SpaceTree Multitree + Bezier Edges + Load JSON = sad edges #168

Hello everyone! First of all, please note that this is a copy of [the topic on google groups](https://groups.google.com/forum/?hl=en#!topic/javascript-information-visualization-toolkit/hEL_ArcQoa4). Sorry for the double post but the group is flooded with job seekers and my message seems to fit better here. I have a bug with version 2.0.1 (current stable). I use it to generate a multitree with bezier edges. There's no problem when I use addSubtree after a user event, but there's one on loading JSON data. If I have nodes on the right side of the root node, the edges will go straight from the left side of the root node to the right side of the children nodes. It should be the opposite sides and bezier curves. Oddly there's no problem with nodes on the left side. Code to reproduce, based on multitree demo: ``` js var labelType, useGradients, nativeTextSupport, animate; (function() { var ua = navigator.userAgent, iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i), typeOfCanvas = typeof HTMLCanvasElement, nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'), textSupport = nativeCanvasSupport && (typeof document.createElement('canvas').getContext('2d').fillText == 'function'); //I'm setting this based on the fact that ExCanvas provides text support for IE //and that as of today iPhone/iPad current text support is lame labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML'; nativeTextSupport = labelType == 'Native'; useGradients = nativeCanvasSupport; animate = !(iStuff || !nativeCanvasSupport); })(); var Log = { elem: false, write: function(text){ if (!this.elem) this.elem = document.getElementById('log'); this.elem.innerHTML = text; this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px'; } }; function init(){ //init data var json = { "id":"643", "name":"Gangliosidose à GM1", "data":{"$orn":"right"}, "children":[ {"id":"13683", "name":"Maculopathie primaire ou secondaire non classifiée", "data":{"$orn":"right"}, "children":[]}, {"id":"13731", "name":"Maladie métabolique avec tâche maculaire rouge cerise", "data":{"$orn":"right"}, "children":[]}, {"id":"13709", "name":"Anomalie du système nerveux avec atteinte ophtalmologique", "data":{"$orn":"right"}, "children":[]}, {"id":"11283", "name":"Gangliosidose à GM1 type 3", "data":{"$orn":"left"}, "children":[]}, {"id":"11282", "name":"Gangliosidose à GM1 type 2", "data":{"$orn":"left"}, "children":[]}, {"id":"11281", "name":"Gangliosidose à GM1 type 1", "data":{"$orn":"left"}, "children":[]} ] }; //end //grab radio button var normal = $jit.id('s-normal'); //init Spacetree //Create a new ST instance var st = new $jit.ST({ //id of viz container element injectInto: 'infovis', //multitree multitree: true, //set duration for the animation duration: 800, //set animation transition type transition: $jit.Trans.Quart.easeInOut, //set distance between node and its children levelDistance: 40, //sibling and subtrees offsets siblingOffset: 3, subtreeOffset: 3, //set node and edge styles //set overridable=true for styling individual //nodes or edges Node: { height: 30, width: 120, autoHeight: true, color: '#CBEDFF', overridable: true, CanvasStyles: { shadowColor: '#e5e5ff', shadowBlur: 8 } }, Edge: { type: 'bezier', color: '#65B8EE', overridable: true }, onBeforeCompute: function(node){ Log.write("loading " + node.name); }, onAfterCompute: function(){ Log.write("done"); }, //This method is called on DOM label creation. //Use this method to add event handlers and styles to //your node. onCreateLabel: function(label, node){ label.id = node.id; label.innerHTML = node.name; label.onclick = function(){ manageClick(node); }; var style = label.style; style.width = 120 + 'px'; style.cursor = 'pointer'; style.color = '#333'; style.textAlign= 'center'; if (node.selected) { style.color = '#fff'; } }, onPlaceLabel: function(label, node){ if (node.selected) { var style = label.style; style.color = '#fff'; } }, //This method is called right before plotting //a node. It's useful for changing an individual node //style properties before plotting it. //The data properties prefixed with a dollar //sign will override the global node style properties. onBeforePlotNode: function(node){ if (node.selected) { node.data.$color = "#3399DD"; } }, //This method is called right before plotting //an edge. It's useful for changing an individual edge //style properties before plotting it. //Edge data proprties prefixed with a dollar sign will //override the Edge global style properties. onBeforePlotLine: function(adj){ } }); //load json data st.loadJSON(json); //compute node positions and layout st.compute('end'); st.select(st.root); //end } ``` Did I do something wrong? Do not hesitate to ask if you need more information. Thanks for your time and attention! Yannick