If I select some Treema nodes and hit delete to delete them, my "change" callback on the root Treema node (their parent array node) doesn't fire. (It does fire when I edit any of the values in any node.)

You can see what I mean by deleting any Thangs from the current CodeCombat level editor. They don't disappear from the map until some other change is made which makes the World reload or the Treema change callback fire.

Right now callbacks are passed in through a callbacks option. jQuery has a perfectly nice events system so use that instead.

Each Treema node represents one property in the json data. There are some things that are universal about a node, like how it handles navigation or that it has a working schema, or its state and path. There's also logic mixed in that is to be overridden by subclasses, like how to edit or render the value. Possibly split this logic into the generic Treema node class and the Treema strategy class. This will mainly be good for cases when a node changes its working schema; you don't have to swap in the Treema node object instance if you can just swap in a strategy object. Consider having the strategy object be a singleton that gets passed in all relevant state, and leaving the generic node class to maintain state.

This is the demo of treema http://codecombat.github.io/treema/
There is a head js in this html : http://codecombat.github.io/treema/js/treema.js
This function is wrong:

    TreemaNode.prototype.populateData = function () {
        return this.data = this.data || this.schema["default"] || this.getDefaultValue();
    };

when this.data=0,its populated data will be null , but actually it should be a number 0.
It cost me all the morning.
I hope you can update that demo !

When Treema creates the child of a node, it needs to determine the working schema of that child. Working schemas are denormalized versions of a JSON-schema where the combinatorial schema definitions (anyOf, allOf, oneOf) and references are respectively flattened and dereferenced into a series of simpler schemas Treema can choose from and build based off. See buildWorkingSchemas for how it does this. Most of the time, the working schema is just the schema in the properties array for the given key, or the schema of the items property, but there are these more complicated cases.

Currently the system determines working schemas in the static function make, but choosing working schemas would be useful on its own. Pull out a utility function that, given a parent schema, a tv4 instance (needed for dereferencing) and a key (or index), returns an array of working schemas. This will allow any system to walk through json data and determine, for each property, the working schemas for that property and, through tv4 validation of the extant value, figure out on its own which working schema to use.

For objects, it will be really handy to have an autoPopulate array so that one could do schemas like this:

{
  "type": "array",
  "items": {
    "type": "object",
    "properties": {
      "name": {
        "type": "string",
        "default": "My Project"
      },
      "description": {
        "type": "string",
        "default": "A project I worked on.",
      },
      "picture": {
        "type": "string",
        "format": "image-file",
      },
      "link": {
        "type": "string",
        "default": "http://example.com"
      }
    },
    "required": [
      "name",
      "description",
      "picture"
    ],
    "autoPopulate": ['link']
  }
}

instead of like this:

{
  "type": "array",
  "items": {
    "type": "object",
    "properties": {
      "name": {
        "type": "string",
        "default": "My Project"
      },
      "description": {
        "type": "string",
        "default": "A project I worked on.",
      },
      "picture": {
        "type": "string",
        "format": "image-file",
      },
      "link": {
        "type": "string",
        "default": "http://example.com"
      }
    },
    "required": [
      "name",
      "description",
      "picture"
    ],
    "default": {
      "name": "My Project",
      "description": "A project I worked on.",
      "link": "http://example.com",
      "picture": ""
    }
  }
}

The difference is that we don't need to mirror the default values in two places–the autoPopulate will specify that by default, we will include the link property, and the default value can be grabbed from the leaf just like when we auto-populate required properties.

28d0ead

This test has been disabled. Probably it was broken due to changes to how refreshing works. Will need to be careful bringing this back, since it will probably conflict with other fixes.

If I have a defaulted boolean Treema like either of these:

If I click on the key (exists) to select it:

Then press tab (which will also happen whenever tabbing through fields and hitting a defaulted boolean value), I get into this weird state:

Now pressing tab (or anything other than enter, t, or f) will have no effect. Also, I can't get rid of that state by clicking anywhere except the value (not even the key or another Treema). It also continues to absorb keypresses. For example, I can't type a commit message in here because that state is still absorbing all focus:

Selecting and clicking with the mouse inside the Ace editor moves the window instead.

Make a factory. Most of the logic will already be split out in #28. Possibly can skip this, just leave the make function as a class function. Decide later.

If I initialize a treema with the readOnly setting set to true, drag and drop re-ordering is still allowed. I think this should probably be disabled.

There's no way to get the parent to update after I change worldEndsAfter from type: float to type: null.

I often used to have the same problem trying to save containers where I have changed a boolean, but at least then certain keyboard interactions to change the value will update the parent, so I could work around it. For null, there's no way to toggle a value change, so I can't save it.

Right now the DOM element for adding an item to an array or a property to an object receives a unique focus. Instead, give it a Treema node row so that it can be selected like any full fledged Treema row. Not sure how best to share that logic. Possibly have the add property/item row be a subclass to a common superclass with the Treema node. When it's done, update the navigation systems (pressing tab, enter, or arrow keys) to make sure they still work.

I was checking out a bug from codecombat where there was trouble uploading sound files. I managed to select a different sound file in the Treema for a Thang Type that was read-only (verified by trying to edit other fields), using the dropdown menu. The dropdown toggle that displays this menu should have been disabled as well.

Alright, looks like I've come to the wrong place. Sound files are an add-on by Code Combat implemented by the class SoundFileTreema.

However there's something else I found can be toggled that is native to Treema: Treema Booleans.
Will look into this.

In Level editor, under Systems tab, while adding a configuration under UI v0, config is not added if Enter/Return Key is pressed unlike other cases, while it works if Tab key is pressed.

Hello @sderickson,

According to CodeCombat #507, components should care about their dependencies before being deleted. Currently the deleting action is handled by treema, but dependencies are found by thang editor. So I'm thinking about adding a callback (passed by constructor) in onDeletePressed() or in removeSelectedNodes(). If the callback exists and return false, then treema should prevent deletion from proceeding. How do you think?

Take for example the point node in the level editor. It knows to open a modal for the given level through data options that are passed in on the creation of the root Treema node. Is there a better way to do this? Can Treema nodes be made to be more context independent? The less we have to pass in contextually, the better. Possibly this just has to be done node by node, using things like backbone mediator to send out generic notifications or by sharing data such as component names through globally accessible routes. The benefit is that for views like the delta view, it can get complete data on the properties that are changed.

While editing components, I was not able to copy some content of a field and paste it onto another using common key-bindings ctrl+c and ctrl+v.
Though right clicks work in the fields which solved the purpose.
-Karan Dhamele

Right now when refreshing an array or object property, the children are updated in the least efficient way, by closing and reopening the property, thus rebuilding each and every child node. This is a really dumb but effective way to do this. Find a smarter but still effective method.

Cool interfaces for the win but the Treema needs a clear text button.

When you have a property that can have multiple schemas, if you go to click on the value field to edit it, the schema select button intercepts the click instead. In order to edit the value, you have to click the key and then tab over to the value. Instead, you should be able to just click the value.

In this screenshot, if I click "radians", it's as if I clicked on the "S" to the left of it:

To reproduce the issue:

• get the latest version of treema from github
• open the file in a browser(chrome) treema/dev/demo.html
• in the section, "Basics: A Contact Book", expand "Google" and add the field "friend" and choose false.
• look at the Data tab, it shows: friend = false
• go back to the Treema tab, update the friend value to true
• go to the Data tab, the friend value was not updated

By looking at the source code, it seems that somehow, updating a BooleanNode does not trigger the refresh of the data of its parent node.
It might not be the best way to fix that but adding the following call in the method BooleanNode.toggleValue:
this.flushChanges();
seems to fix the issue.

Add a Demo page for easily seeing what the plugin does.
This was the link before :-

https://github.com/sderickson/treema/blob/master/test/test.html

Sorry to bother with howto questions in issues section, but couldn't find any other place to ask it.
I'm using DatabaseSearchTreemaNode.extend(MyTreemaNode); to create a list of available values to add as a new array element.
After click on one of search result rows - it's being added as a
<div class="treema-value treema-search treema-display">"element name"</div> But to really push this element to array - user must activate this new row by mouse clicking on it (creates input element atm) and than press enter key to submit it.
I tried simulate same events with $, but it ain't work.
Is there any native way to skip this 'double-submit' and add new elements to array right after clicking on search result rows?

From the forum: if you directly load http://codecombat.com/play/ladder/gold-rush, it's okay. But if you use https, it throws an error because TreemaNode wasn't loaded properly: http://codecombat.com/play/ladder/gold-rush

Looks like Treema is somehow still trying to connect to brunch even in production use in CodeCombat, and when in HTTPS, this fails due to an insecure web socket. Now with the new module loader, this makes Treema not load at all.

With the new defaults, we often end up with a situation like this:

If I press tab or enter in order to save my edit by navigating away from the field, then I get this:

Now there's nothing I can do to avoid the maxAcceleration becoming set to 100 instead of being left as a default of 100:

After which I have to click on the field name (not value) and hit "delete" to restore it to default state. The only other workaround is to deselect the field by clicking with the mouse.

The result is that we get a lot of accidentally overwritten defaults.

What if instead we don't assign the values of fields if they are the same as the default? Or if we only do so when pressing enter, not tab?

Ive been trying to use Treema under phonegap for an iphone app - I have found that both phonegap (based on WKwebkit and therefore safari) and desktop safari on Mac OS10 seem to break the limitChoices function. Ie if a schema is defined - say a number - and you enter instead some letters and press return instead of rejecting the input the entire node disappears. You can verify this via the demos on http://codecombat.github.io/treema/demo.html - go to the Custom Node demo and instead of 3 or 4 as the coordinates, enter a few letters and hit return - the entire node disappears. BTW this is a really useful plugin thank you.

This is in 0.0.14. When I go from this:

... to this by adding the lol2 propert:

... no change callback is fired. If I edit the nested properties of lol2, it then says it's changed. I think it's the child add event that isn't triggering change.

I have a schema that defines a certain object like this:

{
 "type": "object",
 "patternProperties": "<someRegex>",
 "additionalProperties": true
}

Notice that there's no properties field but there is a patternProperties field.

However, when I try to add an object to that node, treema errors out with Uncaught TypeError: Cannot read property '<property>' of undefined with the culprit being in the following generated check on the canAddProperty method (line 3097 on my file):

      if (this.workingSchema.properties[key] != null) {
        return true;
      }

I changed the above check to

      if (this.workingSchema.properties && this.workingSchema.properties[key] != null)

and it worked nicely. I don't coffescript so I can't send a PR with the fix.

I need a patternProperty for my Mongo query, which can hold just about any keys. Currently I'm testing with

patternProperties:
    '^[-a-zA-Z0-9_]*$': { type: 'string' }

Yet treema allows me to pick any type (with its little menu thingie).
However, if I hardcode my test property called 'levelID', it gets recognized correctly, like so.

properties
    'levelID': { type: 'string' }

I don't mind checking this myself at all but I have to be off for a bit and I was hoping anyone could point me in the right direction of where a property's contents are verified against.

Recap: patternProperties ignore the type I define them with even though they get matched. Moreover, I put some faulty stuff in there which Treema threw errors at, so it does get checked.

Right now if you select one row and then shift click another row, it doesn't properly select the rows between inclusive.

In this example, you can click str, but it doesn't let you open the schema select. Here is the config schema property for offset:

Migrating from codecombat/codecombat#1259:

Oh, it's because the root node is always hidden. It's assumed to be a collection (an array or object) and that's why we don't usually show treemas in the patches for anything but collections. Think of all the treemas throughout the site, all of them have top-level collection nodes which are kept out of sight but always open.

I would add an option to treema which would add a class to the root node that triggers a rule to override the &.treema-root > .treema-row .treema-value, &.treema-root > .treema-row .treema-type-select rule at the top of base.sass

On Windows Chrome, if you create a node in Treema that takes text input, select the input field, and hold the backspace key, you will delete everything in the Thang type. Basically, holding "backspace" doesn't stop when you have removed the string from an input field, and assumes you want to delete the next item up the data structure.

After doing this, you are unable to upload new .js files, even after using the "x" button and reloading the page. Interestingly, if you return to the list of thang types and then return to the thang type in question, you can successfully upload js files again.

The current implementation of treema has ws:// built in for websockets, however this fails for all browsers but Chrome when displaying a HTTPS page.
On HTTPS, we want to use wss:// as protocol instead.
We could use something like

if ("https:" == document.location.protocol) {
    /* secure */
} else {
    /* unsecure */
}

as seen in:
http://stackoverflow.com/questions/282444/how-can-i-use-javascript-on-the-client-side-to-detect-if-the-page-was-encrypted
or pass the option in as a parameter (firebase seems to go that path).
/edit: It seems firebase is also parsing the url, just somewhere else

Just of quick trivial mention of broken links on Treema using page. Third partys links jQuery, TV4, and jQuery-UI near top of page are broken.

To signal to Treema what custom node is what type, it uses type and format to check for entries that match. Perhaps instead of relying on these, we should use a custom schema property to signal to Treema which strategy to use. This way it's more explicit what we're doing.

Moved from codecombat/codecombat#881

Build some general way to go back and forth between Treema-edit and raw-JSON-edit modes.