working on freemind layout

core-js/pom.xml

@@ -58,6 +58,7 @@
                                         <include>${basedir}/target/tmp/Utils-min.js</include>
                                         <include>${basedir}/target/tmp/WaitDialog-min.js</include>
                                         <include>${basedir}/target/tmp/footer-min.js</include>
+                                        <include>${basedir}/target/tmp/Executor-min.js</include>
                                     </includes>
                                 </aggregation>
                             </aggregations>

core-js/src/main/javascript/Executor.js

@@ -0,0 +1,55 @@
+/*
+*    Copyright [2011] [wisemapping]
+*
+*   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+*   It is basically the Apache License, Version 2.0 (the "License") plus the
+*   "powered by wisemapping" text requirement on every single page;
+*   you may not use this file except in compliance with the License.
+*   You may obtain a copy of the license at
+*
+*       http://www.wisemapping.org/license
+*
+*   Unless required by applicable law or agreed to in writing, software
+*   distributed under the License is distributed on an "AS IS" BASIS,
+*   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+*   See the License for the specific language governing permissions and
+*   limitations under the License.
+ */
+
+/**
+ * I need this class to clean up things after loading has finished. Without this, async functions at startup are a
+ * nightmare.
+ */
+
+core.Executor = new Class({
+    options:{
+       isLoading:true
+    },
+    initialize:function(options){
+        this._pendingFunctions=[];
+    },
+    setLoading:function(isLoading){
+        this.options.isLoading = isLoading;
+        if(!isLoading){
+            this._pendingFunctions.forEach(function(item){
+                var result = item.fn.attempt(item.args, item.bind);
+                core.assert(result, "execution failed");
+            });
+            this._pendingFunctions=[];
+        }
+    },
+    isLoading:function(){
+        return this.options.isLoading;
+    },
+    delay:function(fn, delay, bind, args){
+        if(this.options.isLoading){
+            this._pendingFunctions.push({fn:fn, bind:bind, args:args});
+        }
+        else{
+            fn.delay(delay, bind, args);
+        }
+    }
+
+});
+
+core.Executor.instance = new core.Executor();

core-js/src/main/javascript/Utils.js

@@ -318,6 +318,47 @@ core.Utils.animateVisibility = function (elems, isVisible, doneFn){
     _fadeEffect =fadeEffect.periodical(10);
 };
 
+core.Utils.animatePosition = function (elems, doneFn, designer){
+    var _moveEffect = null;
+    var i = 10;
+    var step = 10;
+    var moveEffect = function (){
+        if(i>0){
+            var keys = elems.keys();
+            for(var j = 0; j<keys.length; j++){
+                var id = keys[j];
+                var mod = elems.get(id);
+                var allTopics = designer._getTopics();
+                var currentTopic = allTopics.filter(function(node){
+                    return node.getId()== id;
+                })[0];
+                var xStep= (mod.originalPos.x -mod.newPos.x)/step;
+                var yStep= (mod.originalPos.y -mod.newPos.y)/step;
+                var newPos = currentTopic.getPosition().clone();
+                newPos.x +=xStep;
+                newPos.y +=yStep;
+                currentTopic.setPosition(newPos, false);
+            }
+        } else {
+            $clear(_moveEffect);
+            var keys = elems.keys();
+            for(var j = 0; j<keys.length; j++){
+                var id = keys[j];
+                var mod = elems.get(id);
+                var allTopics = designer._getTopics();
+                var currentTopic = allTopics.filter(function(node){
+                    return node.getId()== id;
+                })[0];
+                currentTopic.setPosition(mod.originalPos, false);
+            }
+            if(core.Utils.isDefined(doneFn))
+                doneFn.attempt();
+        }
+        i--;
+    };
+    _moveEffect =moveEffect.periodical(10);
+};
+
 core.Utils._addInnerChildrens = function(elem){
     var children = [];
     var childs = elem._getChildren();

mindplot/pom.xml

@@ -91,6 +91,7 @@
                                     <filelist dir="${basedir}/src/main/javascript/" files="Icon.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/" files="LinkIcon.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/" files="Note.js"/>
+                                    <filelist dir="${basedir}/src/main/javascript/" files="ActionIcon.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/" files="ImageIcon.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/" files="IconModel.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/" files="LinkModel.js"/>
@@ -126,6 +127,8 @@
                                               files="commands/MoveControlPointCommand.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/"
                                               files="commands/freeMind/DragTopicCommand.js"/>
+                                    <filelist dir="${basedir}/src/main/javascript/"
+                                              files="commands/freeMind/ReconnectTopicCommand.js"/>
 
 
                                     <filelist dir="${basedir}/src/main/javascript/"
@@ -221,6 +224,7 @@
                                         <include>Icon-min.js</include>
                                         <include>LinkIcon-min.js</include>
                                         <include>Note-min.js</include>
+                                        <include>ActionIcon-min.js</include>
                                         <include>ImageIcon-min.js</include>
                                         <include>IconModel-min.js</include>
                                         <include>LinkModel-min.js</include>
@@ -244,6 +248,7 @@
                                         <include>commands/AddRelationshipCommand-min.js</include>
                                         <include>commands/MoveControlPointCommand-min.js</include>
                                         <include>commands/freeMind/DragTopicCommand-min.js</include>
+                                        <include>commands/freeMind/ReconnectTopicCommand-min.js</include>
 
                                         <include>layoutManagers/boards/Board-min.js</include>
                                         <include>layoutManagers/boards/freeMindBoards/Board-min.js</include>

mindplot/src/main/javascript/ActionIcon.js

@@ -0,0 +1,66 @@
+/*
+*    Copyright [2011] [wisemapping]
+*
+*   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+*   It is basically the Apache License, Version 2.0 (the "License") plus the
+*   "powered by wisemapping" text requirement on every single page;
+*   you may not use this file except in compliance with the License.
+*   You may obtain a copy of the license at
+*
+*       http://www.wisemapping.org/license
+*
+*   Unless required by applicable law or agreed to in writing, software
+*   distributed under the License is distributed on an "AS IS" BASIS,
+*   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+*   See the License for the specific language governing permissions and
+*   limitations under the License.
+*/
+
+mindplot.ActionIcon = function(topic, url) {
+    mindplot.Icon.call(this, url);
+    this._node = topic;
+};
+
+objects.extend(mindplot.ActionIcon, mindplot.Icon);
+
+mindplot.ActionIcon.prototype.initialize = function() {
+
+};
+
+mindplot.ActionIcon.prototype.getNode = function(){
+    return this._node;
+};
+
+mindplot.ActionIcon.prototype.setPosition = function(x,y){
+    var size = this.getSize();
+    this.getImage().setPosition(x-size.width/2, y-size.height/2);
+};
+
+mindplot.ActionIcon.prototype.addEventListener = function(event, fn){
+    this.getImage().addEventListener(event, fn);
+};
+
+mindplot.ActionIcon.prototype.addToGroup = function(group){
+    group.appendChild(this.getImage());
+};
+
+mindplot.ActionIcon.prototype.setVisibility = function(visible){
+    this.getImage().setVisibility(visible);
+};
+
+mindplot.ActionIcon.prototype.isVisible = function(){
+    return this.getImage().isVisible();
+};
+
+mindplot.ActionIcon.prototype.setCursor = function(cursor){
+    return this.getImage().setCursor(cursor);
+};
+
+mindplot.ActionIcon.prototype.moveToBack = function(cursor){
+    return this.getImage().moveToBack(cursor);
+};
+
+mindplot.ActionIcon.prototype.moveToFront = function(cursor){
+    return this.getImage().moveToFront(cursor);
+};
+

mindplot/src/main/javascript/CentralTopic.js

@@ -48,13 +48,14 @@ mindplot.CentralTopic.prototype.isConnectedToCentralTopic = function()
     return false;
 };
 
-mindplot.CentralTopic.prototype.createChildModel = function()
+mindplot.CentralTopic.prototype.createChildModel = function(prepositionate)
 {
     // Create a new node ...
     var model = this.getModel();
     var mindmap = model.getMindmap();
     var childModel = mindmap.createNode(mindplot.NodeModel.MAIN_TOPIC_TYPE);
 
+    if(prepositionate){
         if (!core.Utils.isDefined(this.___siblingDirection))
         {
             this.___siblingDirection = 1;
@@ -70,7 +71,7 @@ mindplot.CentralTopic.prototype.createChildModel = function()
             childModel.setPosition(-100, 0);
         }
         this.___siblingDirection = -this.___siblingDirection;
-
+    }
     // Create a new node ...
     childModel.setOrder(0);
 

mindplot/src/main/javascript/ConnectionLine.js

@@ -204,6 +204,14 @@ mindplot.ConnectionLine.prototype.getId = function(){
     return this._model.getId();
 };
 
+mindplot.ConnectionLine.prototype.moveToBack = function(){
+    this._line2d.moveToBack();
+};
+
+mindplot.ConnectionLine.prototype.moveToFront = function(){
+    this._line2d.moveToFront();
+};
+
 mindplot.ConnectionLine.SIMPLE=0;
 mindplot.ConnectionLine.POLYLINE=1;
 mindplot.ConnectionLine.CURVED=2;

mindplot/src/main/javascript/EditorOptions.js

@@ -1,5 +1,5 @@
 mindplot.EditorOptions =
 {
-    LayoutManager:"OriginalLayout"
+//    LayoutManager:"OriginalLayout"
-    //    LayoutManager:"FreeMindLayout"
+        LayoutManager:"FreeMindLayout"
 };

mindplot/src/main/javascript/EventBus.js

@@ -16,7 +16,10 @@ mindplot.EventBus.events ={
     NodeMoveEvent:'NodeMoveEvent',
     NodeDisconnectEvent:'NodeDisconnectEvent',
     NodeConnectEvent:'NodeConnectEvent',
-    NodeRepositionateEvent:'NodeRepositionateEvent'
+    NodeRepositionateEvent:'NodeRepositionateEvent',
+    NodeShrinkEvent:'NodeShrinkEvent',
+    NodeMouseOverEvent:'NodeMouseOverEvent',
+    NodeMouseOutEvent:'NodeMouseOutEvent'
 };
 
 mindplot.EventBus.instance = new mindplot.EventBus();

mindplot/src/main/javascript/MainTopic.js

@@ -27,7 +27,7 @@ objects.extend(mindplot.MainTopic, mindplot.Topic);
 
 mindplot.MainTopic.prototype.INNER_RECT_ATTRIBUTES = {stroke:'0.5 solid #009900'};
 
-mindplot.MainTopic.prototype.createSiblingModel = function()
+mindplot.MainTopic.prototype.createSiblingModel = function(positionate)
 {
     var siblingModel = null;
     var parentTopic = this.getOutgoingConnectedTopic();
@@ -39,7 +39,7 @@ mindplot.MainTopic.prototype.createSiblingModel = function()
         siblingModel = mindmap.createNode(mindplot.NodeModel.MAIN_TOPIC_TYPE);
 
         // Positionate following taking into account the sibling positon.
-        if (parentTopic.getType() == mindplot.NodeModel.CENTRAL_TOPIC_TYPE)
+        if (positionate && parentTopic.getType() == mindplot.NodeModel.CENTRAL_TOPIC_TYPE)
         {
             var pos = this.getPosition();
             siblingModel.setPosition(pos.x, pos.y);
@@ -52,7 +52,7 @@ mindplot.MainTopic.prototype.createSiblingModel = function()
     return siblingModel;
 };
 
-mindplot.MainTopic.prototype.createChildModel = function()
+mindplot.MainTopic.prototype.createChildModel = function(prepositionate)
 {
     // Create a new node ...
     var model = this.getModel();
@@ -150,6 +150,9 @@ mindplot.MainTopic.prototype.updateTopicShape = function(targetTopic, workspace)
         var innerShape = this.getInnerShape();
         innerShape.setVisibility(true);
     }
+    this._helpers.forEach(function(helper){
+        helper.moveToFront();
+    });
 };
 
 mindplot.MainTopic.prototype.disconnect = function(workspace)
@@ -177,7 +180,7 @@ mindplot.MainTopic.prototype.getTopicType = function()
 
 mindplot.MainTopic.prototype._updatePositionOnChangeSize = function(oldSize, newSize, updatePosition) {
 
-    if(!updatePosition && this.getModel().getFinalPosition()){
+    if(updatePosition==false && this.getModel().getFinalPosition()){
         this.setPosition(this.getModel().getFinalPosition(), false);
     }
     else{

mindplot/src/main/javascript/MindmapDesigner.js

@@ -128,6 +128,8 @@ mindplot.MindmapDesigner.prototype._buildNodeGraph = function(model)
     // Create node graph ...
     var topic = mindplot.NodeGraph.create(model);
 
+    this._layoutManager.addHelpers(topic);
+
     // Append it to the workspace ...
     var topics = this._topics;
     topics.push(topic);
@@ -231,7 +233,7 @@ mindplot.MindmapDesigner.prototype.createChildForSelectedNode = function()
     // Add new node ...
     var centalTopic = nodes[0];
     var parentTopicId = centalTopic.getId();
-    var childModel = centalTopic.createChildModel();
+    var childModel = centalTopic.createChildModel(this._layoutManager.needsPrepositioning());
 
     var command = new mindplot.commands.AddTopicCommand(childModel, parentTopicId, true);
     this._actionRunner.execute(command);
@@ -263,7 +265,7 @@ mindplot.MindmapDesigner.prototype.createSiblingForSelectedNode = function()
     } else
     {
         var parentTopic = topic.getOutgoingConnectedTopic();
-        var siblingModel = topic.createSiblingModel();
+        var siblingModel = topic.createSiblingModel(this._layoutManager.needsPrepositioning());
         var parentTopicId = parentTopic.getId();
         var command = new mindplot.commands.AddTopicCommand(siblingModel, parentTopicId, true);
 
@@ -425,6 +427,10 @@ mindplot.MindmapDesigner.prototype._loadMap = function(mapId, mindmapModel)
             var relationship = this._relationshipModelToRelationship(relationships[j]);            
         }
     }
+    core.Executor.instance.setLoading(false);
+    this._getTopics().forEach(function(topic){
+        delete topic.getModel()._finalPosition;
+    });
     this._fireEvent("loadsuccess");
 
 };
@@ -455,24 +461,7 @@ mindplot.MindmapDesigner.prototype._nodeModelToNodeGraph = function(nodeModel, i
 
     var children = nodeModel.getChildren().slice();
 
-    // Sort children by order to solve adding order in for OriginalLayoutManager...
+    children = this._layoutManager.prepareChildrenList(nodeGraph, children);
-    if (this._layoutManager.getClassName() == mindplot.layoutManagers.OriginalLayoutManager.NAME && nodeGraph.getTopicType()!=mindplot.NodeModel.CENTRAL_TOPIC_TYPE && children.length > 0)
-    {
-        var oldChildren = children;
-        children = [];
-        for (var i = 0; i < oldChildren.length; i++)
-        {
-            var child = oldChildren[i];
-            var order = child.getOrder();
-            if (order != null)
-            {
-                children[order] = child;
-            } else
-            {
-                children.push(child);
-            }
-        }
-    }
 
     for (var i = 0; i < children.length; i++)
     {
@@ -632,10 +621,11 @@ mindplot.MindmapDesigner.prototype.setFont2SelectedNode = function(font)
             var result = topic.getFontFamily();
             topic.setFontFamily(font, true);
 
-            var updated = function() {
+            core.Executor.instance.delay(topic.updateNode, 0,topic);
+            /*var updated = function() {
                 topic.updateNode();
             };
-            updated.delay(0);
+            updated.delay(0);*/
             return result;
         }
         var command = new mindplot.commands.GenericFunctionCommand(commandFunc, font, topicsIds);
@@ -784,10 +774,11 @@ mindplot.MindmapDesigner.prototype.setFontSize2SelectedNode = function(size)
             var result = topic.getFontSize();
             topic.setFontSize(size, true);
 
-            var updated = function() {
+            core.Executor.instance.delay(topic.updateNode, 0,topic);
+            /*var updated = function() {
                 topic.updateNode();
             };
-            updated.delay(0);
+            updated.delay(0);*/
             return result;
         }
         var command = new mindplot.commands.GenericFunctionCommand(commandFunc, size, topicsIds);
@@ -830,10 +821,11 @@ mindplot.MindmapDesigner.prototype.setWeight2SelectedNode = function()
             var weight = (result == "bold") ? "normal" : "bold";
             topic.setFontWeight(weight, true);
 
-            var updated = function() {
+            core.Executor.instance.delay(topic.updateNode, 0,topic);
+            /*var updated = function() {
                 topic.updateNode();
             };
-            updated.delay(0);
+            updated.delay(0);*/
             return result;
         }
         var command = new mindplot.commands.GenericFunctionCommand(commandFunc, "", topicsIds);
@@ -984,7 +976,8 @@ mindplot.MindmapDesigner.prototype.removeLastImageFromSelectedNode = function()
     {
         var elem = nodes[0];
         elem.removeLastIcon(this);
-        var executor = function(editor)
+        core.Executor.instance.delay(elem.updateNode, 0,elem);
+        /*var executor = function(editor)
         {
             return function()
             {
@@ -992,7 +985,7 @@ mindplot.MindmapDesigner.prototype.removeLastImageFromSelectedNode = function()
             };
         };
 
-        setTimeout(executor(this), 0);
+        setTimeout(executor(this), 0);*/
     }
 };
 

mindplot/src/main/javascript/ShrinkConnector.js

@@ -120,3 +120,13 @@ mindplot.ShirinkConnector.prototype.setPosition = function(x, y)
 {
     this._elipse.setPosition(x, y);
 }
+
+mindplot.ShirinkConnector.prototype.moveToBack = function()
+{
+    this._elipse.moveToBack();
+}
+
+mindplot.ShirinkConnector.prototype.moveToFront = function()
+{
+    this._elipse.moveToFront();
+}

mindplot/src/main/javascript/Topic.js

@@ -31,6 +31,7 @@ mindplot.Topic.prototype.initialize = function()
     this._lastIconId = -1;
     this._relationships = [];
     this._isInWorkspace = false;
+    this._helpers = [];
 
     this._buildShape();
     this.setMouseEventsEnabled(true);
@@ -75,7 +76,7 @@ mindplot.Topic.prototype._setShapeType = function(type, updateModel)
         innerShape = this.getInnerShape();
 
         //Let's register all the events. The first one is the default one. The others will be copied.
-        this._registerDefaultListenersToElement(innerShape, this);
+        //this._registerDefaultListenersToElement(innerShape, this);
 
         var dispatcher = dispatcherByEventType['mousedown'];
         if(dispatcher)
@@ -389,7 +390,7 @@ mindplot.Topic.prototype.removeLink = function(){
     }
     this._link=null;
     this._hasLink=false;
-}
+};
 
 mindplot.Topic.prototype.removeNote = function(){
     var model = this.getModel();
@@ -404,7 +405,7 @@ mindplot.Topic.prototype.removeNote = function(){
             this._icon=null;
         }
     }
-    var elem = this;
+    /*var elem = this;
     var executor = function(editor)
     {
         return function()
@@ -413,10 +414,11 @@ mindplot.Topic.prototype.removeNote = function(){
         };
     };
 
-    setTimeout(executor(this), 0);
+    setTimeout(executor(this), 0);*/
+    core.Executor.instance.delay(this.updateNode, 0,this);
     this._note=null;
     this._hasNote=false;
-}
+};
 
 mindplot.Topic.prototype.addRelationship = function(relationship){
     this._relationships.push(relationship);
@@ -511,7 +513,7 @@ mindplot.Topic.prototype.setFontFamily = function(value, updateModel)
         var model = this.getModel();
         model.setFontFamily(value);
     }
-    var elem = this;
+    /*var elem = this;
     var executor = function(editor)
     {
         return function()
@@ -520,7 +522,8 @@ mindplot.Topic.prototype.setFontFamily = function(value, updateModel)
         };
     };
 
-    setTimeout(executor(this), 0);
+    setTimeout(executor(this), 0);*/
+    core.Executor.instance.delay(this.updateNode, 0,this, [updateModel]);
 };
 
 mindplot.Topic.prototype.setFontSize = function(value, updateModel)
@@ -532,7 +535,7 @@ mindplot.Topic.prototype.setFontSize = function(value, updateModel)
         var model = this.getModel();
         model.setFontSize(value);
     }
-    var elem = this;
+    /*var elem = this;
     var executor = function(editor)
     {
         return function()
@@ -541,7 +544,8 @@ mindplot.Topic.prototype.setFontSize = function(value, updateModel)
         };
     };
 
-    setTimeout(executor(this), 0);
+    setTimeout(executor(this), 0);*/
+    core.Executor.instance.delay(this.updateNode, 0,this, [updateModel]);
 
 };
 
@@ -554,7 +558,7 @@ mindplot.Topic.prototype.setFontStyle = function(value, updateModel)
         var model = this.getModel();
         model.setFontStyle(value);
     }
-    var elem = this;
+    /*var elem = this;
     var executor = function(editor)
     {
         return function()
@@ -563,7 +567,8 @@ mindplot.Topic.prototype.setFontStyle = function(value, updateModel)
         };
     };
 
-    setTimeout(executor(this), 0);
+    setTimeout(executor(this), 0);*/
+    core.Executor.instance.delay(this.updateNode, 0,this, [updateModel]);
 };
 
 mindplot.Topic.prototype.setFontWeight = function(value, updateModel)
@@ -652,7 +657,7 @@ mindplot.Topic.prototype._setText = function(text, updateModel)
 {
     var textShape = this.getTextShape();
     textShape.setText(text);
-    var elem = this;
+    /*var elem = this;
     var executor = function(editor)
     {
         return function()
@@ -661,7 +666,8 @@ mindplot.Topic.prototype._setText = function(text, updateModel)
         };
     };
 
-    setTimeout(executor(this), 0);
+    setTimeout(executor(this), 0);*/
+    core.Executor.instance.delay(this.updateNode, 0,this, [updateModel]);
 
     if (updateModel)
     {
@@ -782,9 +788,9 @@ mindplot.Topic.prototype._buildShape = function()
     }
 
     // Register listeners ...
-    this._registerDefaultListenersToElement(outerShape, this);
+    this._registerDefaultListenersToElement(group, this);
-    this._registerDefaultListenersToElement(innerShape, this);
+//    this._registerDefaultListenersToElement(innerShape, this);
-    this._registerDefaultListenersToElement(textShape, this);
+//    this._registerDefaultListenersToElement(textShape, this);
 
 };
 
@@ -848,6 +854,7 @@ mindplot.Topic.prototype.setChildrenShrinked = function(value)
 
     // Hide children ...
     core.Utils.setChildrenVisibilityAnimated(this, !value);
+    mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.NodeShrinkEvent,[this]);
 };
 
 mindplot.Topic.prototype.getShrinkConnector = function()
@@ -867,6 +874,7 @@ mindplot.Topic.prototype.handleMouseOver = function(event)
 {
     var outerShape = this.getOuterShape();
     outerShape.setOpacity(1);
+    mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.NodeMouseOverEvent,[this]);
 };
 
 mindplot.Topic.prototype.handleMouseOut = function(event)
@@ -876,6 +884,7 @@ mindplot.Topic.prototype.handleMouseOut = function(event)
     {
         outerShape.setOpacity(0);
     }
+    mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.NodeMouseOutEvent,[this]);
 };
 
 /**
@@ -984,6 +993,40 @@ mindplot.Topic.prototype.setVisibility = function(value)
     this._setRelationshipLinesVisibility(value);
 };
 
+mindplot.Topic.prototype.moveToBack = function(){
+//    this._helpers.forEach(function(helper, index){
+//        helper.moveToBack();
+//    });
+    this.get2DElement().moveToBack();
+    var outgoingLine = this.getOutgoingLine();
+
+    var connector = this.getShrinkConnector();
+    if(connector){
+        connector.moveToBack();
+    }
+
+    if(outgoingLine){
+        outgoingLine.moveToBack();
+    }
+
+};
+
+mindplot.Topic.prototype.moveToFront = function(){
+
+    var outgoingLine = this.getOutgoingLine();
+    if(outgoingLine){
+        outgoingLine.moveToFront();
+    }
+    var connector = this.getShrinkConnector();
+    if(connector){
+        connector.moveToFront();
+    }
+    this.get2DElement().moveToFront();
+//    this._helpers.forEach(function(helper, index){
+//        helper.moveToFront();
+//    });
+};
+
 mindplot.Topic.prototype.isVisible = function(){
     var elem = this.get2DElement();
     return elem.isVisible();
@@ -1066,14 +1109,36 @@ mindplot.Topic.prototype.addEventListener = function(type, listener)
         type = 'mousedown';
     }
 
-    var textShape = this.getTextShape();
+   /* var textShape = this.getTextShape();
     textShape.addEventListener(type, listener);
 
     var outerShape = this.getOuterShape();
     outerShape.addEventListener(type, listener);
 
     var innerShape = this.getInnerShape();
-    innerShape.addEventListener(type, listener);
+    innerShape.addEventListener(type, listener);*/
+    var shape = this.get2DElement();
+    shape.addEventListener(type, listener);
+};
+
+mindplot.Topic.prototype.removeEventListener = function(type, listener)
+{
+    // Translate to web 2d events ...
+    if (type == 'onfocus')
+    {
+        type = 'mousedown';
+    }
+    /*var textShape = this.getTextShape();
+    textShape.removeEventListener(type, listener);
+
+    var outerShape = this.getOuterShape();
+    outerShape.removeEventListener(type, listener);
+
+    var innerShape = this.getInnerShape();
+    innerShape.removeEventListener(type, listener);*/
+
+    var shape = this.get2DElement();
+    shape.removeEventListener(type, listener);
 };
 
 
@@ -1181,6 +1246,18 @@ mindplot.Topic.prototype.connectTo = function(targetTopic, workspace, isVisible)
     core.assert(targetTopic, 'Parent Graph can not be null');
     core.assert(workspace, 'Workspace can not be null');
 
+    // Connect Graphical Nodes ...
+    targetTopic._appendChild(this);
+    this._parent = targetTopic;
+
+// Update model ...
+    var targetModel = targetTopic.getModel();
+    var childModel = this.getModel();
+    childModel.connectTo(targetModel);
+
+// Update topic position based on the state ...
+    mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.NodeConnectEvent,[targetTopic, this]);
+
     // Create a connection line ...
     var outgoingLine = new mindplot.ConnectionLine(this, targetTopic);
     if(core.Utils.isDefined(isVisible))
@@ -1188,15 +1265,6 @@ mindplot.Topic.prototype.connectTo = function(targetTopic, workspace, isVisible)
     this._outgoingLine = outgoingLine;
     workspace.appendChild(outgoingLine);
 
-    // Connect Graphical Nodes ...
-    targetTopic._appendChild(this);
-    this._parent = targetTopic;
-
-    // Update model ...
-    var targetModel = targetTopic.getModel();
-    var childModel = this.getModel();
-    childModel.connectTo(targetModel);
-
     // Update figure is necessary.
     this.updateTopicShape(targetTopic);
 
@@ -1214,9 +1282,6 @@ mindplot.Topic.prototype.connectTo = function(targetTopic, workspace, isVisible)
     }
     var textShape = this.getTextShape();
 
-    // Update topic position based on the state ...
-    mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.NodeConnectEvent,[targetTopic, this]);
-
     // Display connection node...
     var connector = targetTopic.getShrinkConnector();
     connector.setVisibility(true);
@@ -1312,3 +1377,8 @@ mindplot.Topic.prototype.updateNode = function(updatePosition)
             iconGroup.updateIconGroupPosition();
     }
 };
+
+mindplot.Topic.prototype.addHelper = function(helper){
+    helper.addToGroup(this.get2DElement());
+    this._helpers.push(helper);
+};

mindplot/src/main/javascript/commands/freeMind/ReconnectTopicCommand.js

@@ -0,0 +1,103 @@
+/*
+*    Copyright [2011] [wisemapping]
+*
+*   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+*   It is basically the Apache License, Version 2.0 (the "License") plus the
+*   "powered by wisemapping" text requirement on every single page;
+*   you may not use this file except in compliance with the License.
+*   You may obtain a copy of the license at
+*
+*       http://www.wisemapping.org/license
+*
+*   Unless required by applicable law or agreed to in writing, software
+*   distributed under the License is distributed on an "AS IS" BASIS,
+*   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+*   See the License for the specific language governing permissions and
+*   limitations under the License.
+*/
+mindplot.commands.freeMind.ReconnectTopicCommand = mindplot.Command.extend(
+{
+    initialize: function()
+    {
+        this._modifiedTopics=null;
+        this._id = mindplot.Command._nextUUID();
+        this._node = null;
+        this._targetNode = null;
+        this._relationship = null;
+        this._oldParent = null;
+    },
+    execute: function(commandContext)
+    {
+        var node = commandContext.findTopics(parseInt(this._node))[0];
+        var targetNode = commandContext.findTopics(parseInt(this._targetNode))[0];
+        var keys = this._modifiedTopics.keys();
+        for(var i=0; i<keys.length; i++){
+            var id = keys[i];
+            var modTopic = this._modifiedTopics.get(id);
+            var topic = commandContext.findTopics(parseInt(id))[0];
+
+            var position = topic.getPosition();
+            var pos = modTopic.newPos;
+            if(position.x != pos.x || position.y  != pos.y){
+                topic.setPosition(pos.clone(), true);
+            }
+            if(id = this._node){
+                node._originalPosition = modTopic.originalPos;
+            }
+        }
+        var oldParent = commandContext.findTopics(parseInt(this._oldParent))[0];
+        node.relationship = this._relationship;
+        node._relationship_oldParent = oldParent;
+        commandContext.disconnect(node);
+        var parentNode = targetNode;
+        if(this._relationship != "Child"){
+            parentNode = targetNode.getParent();
+            node._relationship_sibling_node = targetNode;
+        }
+        commandContext.connect(node, parentNode);
+        delete node.relationship;
+        delete node._relationship_oldParent;
+        delete node._relationship_sibling_node;
+    },
+    undoExecute: function(commandContext)
+    {
+        var node = commandContext.findTopics(parseInt(this._node))[0];
+        var targetNode = commandContext.findTopics(parseInt(this._oldParent))[0];
+
+        var keys = this._modifiedTopics.keys();
+        for(var i=0; i<keys.length; i++){
+            var id = keys[i];
+            var modTopic = this._modifiedTopics.get(id);
+            var topic = commandContext.findTopics(parseInt(id))[0];
+
+            var position = topic.getPosition();
+            var pos = modTopic.originalPos;
+            if(position.x != pos.x || position.y  != pos.y){
+                topic.setPosition(pos.clone(), true);
+            }
+            if(id = this._node){
+                node._originalPosition = modTopic.originalPos;
+            }
+        }
+        var oldParent = commandContext.findTopics(parseInt(this._targetNode))[0];
+        node.relationship = this._relationship;
+        node._relationship_oldParent = oldParent;
+        commandContext.disconnect(node);
+        commandContext.connect(node, targetNode);
+        delete node.relationship;
+        delete node._relationship_oldParent;
+    },
+    setModifiedTopics:function(modifiedTopics){
+        this._modifiedTopics = modifiedTopics;
+    },
+    setDraggedTopic:function(node){
+        this._node = node.getId();
+        this._oldParent = node.getOutgoingConnectedTopic().getId();
+    },
+    setTargetNode:function(node){
+        this._targetNode = node.getId();
+    },
+    setAs:function(relationship){
+        this._relationship = relationship;
+    }
+});

mindplot/src/main/javascript/layoutManagers/BaseLayoutManager.js

@@ -12,7 +12,8 @@ mindplot.layoutManagers.BaseLayoutManager = new Class({
         mindplot.EventBus.instance.addEvent(mindplot.EventBus.events.NodeMoveEvent,this._nodeMoveEvent.bind(this));
         mindplot.EventBus.instance.addEvent(mindplot.EventBus.events.NodeDisconnectEvent,this._nodeDisconnectEvent.bind(this));
         mindplot.EventBus.instance.addEvent(mindplot.EventBus.events.NodeConnectEvent,this._nodeConnectEvent.bind(this));
-        mindplot.EventBus.instance.addEvent(mindplot.EventBus.events.NodeRepositionateEvent,this._NodeRepositionateEvent.bind(this));
+        mindplot.EventBus.instance.addEvent(mindplot.EventBus.events.NodeRepositionateEvent,this._nodeRepositionateEvent.bind(this));
+        mindplot.EventBus.instance.addEvent(mindplot.EventBus.events.NodeShrinkEvent,this._nodeShrinkEvent.bind(this));
     },
     _nodeResizeEvent:function(node){
     },
@@ -28,7 +29,9 @@ mindplot.layoutManagers.BaseLayoutManager = new Class({
         var modifiedTopics = [];
         this.getTopicBoardForTopic(targetNode).addBranch(node,modifiedTopics);
     },
-    _NodeRepositionateEvent:function(node){
+    _nodeRepositionateEvent:function(node){
+    },
+    _NodeShrinkEvent:function(node){
     },
     _createBoard:function(){
         this._boards = new Hash();
@@ -57,6 +60,15 @@ mindplot.layoutManagers.BaseLayoutManager = new Class({
     _createCentralTopicBoard:function(node){
         return new mindplot.layoutManagers.boards.Board(node, this);
     },
+    prepareChildrenList:function(node, children){
+
+    },
+    addHelpers:function(node){
+
+    },
+    needsPrepositioning:function(){
+        return true;
+    },
     getDesigner:function(){
         return this._designer;
     },

mindplot/src/main/javascript/layoutManagers/FreeMindLayoutManager.js

@@ -6,10 +6,30 @@ mindplot.layoutManagers.FreeMindLayoutManager = mindplot.layoutManagers.BaseLayo
         this.parent(designer, options);
     },
     _nodeConnectEvent:function(targetNode, node){
-        if(!this._isCentralTopic(node)){
+        if(node.relationship){
+            this._movingNode(targetNode, node);
+        }
+        else if(!this._isCentralTopic(node)){
             this.parent(targetNode, node);
         }
     },
+    _nodeDisconnectEvent:function(targetNode, node){
+        if(node.relationship){
+        }
+        else{
+            this.parent(targetNode, node);
+            this._updateBoard(targetNode,[]);
+        }
+    },
+    _nodeShrinkEvent:function(node){
+        this._updateBoard(node,[]);
+    },
+    prepareChildrenList:function(node, children){
+        var result = children.sort(function(n1, n2){
+            return n1.getPosition().y>n2.getPosition().y;
+        });
+        return result;
+    },
     registerListenersOnNode : function(topic)
     {
         var id = topic.getId();
@@ -23,7 +43,7 @@ mindplot.layoutManagers.FreeMindLayoutManager = mindplot.layoutManagers.BaseLayo
         // Add drag behaviour ...
         if (topic.getType() != mindplot.NodeModel.CENTRAL_TOPIC_TYPE)
         {
-            topic.addEventListener("mousedown",this._mousedownListener.bindWithEvent(this,[topic]));
+            topic.addEventListener("mousedown",this._reconnectMouseDownListener.bindWithEvent(this,[topic]));
         }
 
          // Register editor events ...
@@ -57,7 +77,10 @@ mindplot.layoutManagers.FreeMindLayoutManager = mindplot.layoutManagers.BaseLayo
             var screen = workSpace.getScreenManager();
 
             // Set initial position.
-            //        var mousePos = screen.getWorkspaceMousePosition(event);
+            this._mouseInitialPos = screen.getWorkspaceMousePosition(event);
+            var pos = topic.getPosition();
+            this._mouseInitialPos.x = 0;
+            this._mouseInitialPos.y = pos.y - Math.round(this._mouseInitialPos.y);
 
             this._isMovingNode=false;
 
@@ -78,6 +101,8 @@ mindplot.layoutManagers.FreeMindLayoutManager = mindplot.layoutManagers.BaseLayo
             this._isMovingNode=true;
             var screen = this._designer.getWorkSpace().getScreenManager();
             var nodePos = node.getPosition().clone();
+            nodePos.x-=this._mouseInitialPos.x;
+            nodePos.y-=this._mouseInitialPos.y;
             var pos = screen.getWorkspaceMousePosition(event);
             pos.x = Math.round(pos.x);
             pos.y = Math.round(pos.y);
@@ -92,7 +117,6 @@ mindplot.layoutManagers.FreeMindLayoutManager = mindplot.layoutManagers.BaseLayo
                 var parentBoard = this.getTopicBoardForTopic(node.getParent());
                 var entryObj = parentBoard.findNodeEntryIndex(node);
                 var entry = entryObj.table[entryObj.index];
-                //.removeTopicFromBoard(node,this._modifiedTopics);
                 parentBoard._removeEntry(node, entryObj.table, entryObj.index, this._modifiedTopics);
                 this._changeChildrenSide(node, pos, this._modifiedTopics);
                 node.setPosition(pos.clone(), false);
@@ -106,7 +130,6 @@ mindplot.layoutManagers.FreeMindLayoutManager = mindplot.layoutManagers.BaseLayo
                 entryObj = parentBoard.findNewNodeEntryIndex(entry);
                 parentBoard._addEntry(entry, entryObj.table, entryObj.index);
                 parentBoard._updateTable(entryObj.index,  entryObj.table, this._modifiedTopics, true);
-                //this.getTopicBoardForTopic(node.getParent()).addBranch(node,this._modifiedTopics);
 
             }
             this._isMovingNode=false;
@@ -119,16 +142,16 @@ mindplot.layoutManagers.FreeMindLayoutManager = mindplot.layoutManagers.BaseLayo
             var refPos = node.getPosition();
             for( var i = 0 ; i< children.length ; i++){
                 var child = children[i];
-                this._changeChildrenSide(child);
+                var childPos = child.getPosition().clone();
-                var childPos = child.getPosition();
                 var oldPos=childPos.clone();
                 childPos.x = newPos.x +(childPos.x - refPos.x)*-1;
                 childPos.y = newPos.y +(childPos.y - refPos.y);
+                this._changeChildrenSide(child, childPos, modifiedTopics);
                 child.setPosition(childPos, false);
                 if(modifiedTopics.set){
                     var key = node.getId();
                     if(modifiedTopics.hasKey(key)){
-                        childPos = this._modifiedTopics.get(key).originalPos;
+                        oldPos = this._modifiedTopics.get(key).originalPos;
                     }
                     this._modifiedTopics.set(key,{originalPos:oldPos, newPos:childPos});
                 }
@@ -136,7 +159,6 @@ mindplot.layoutManagers.FreeMindLayoutManager = mindplot.layoutManagers.BaseLayo
         }
     },
     _mouseUpListener:function(event, node){
-        var id = node.getId();
 
         var screen = this._designer.getWorkSpace().getScreenManager();
         // Remove all the events.
@@ -162,9 +184,7 @@ mindplot.layoutManagers.FreeMindLayoutManager = mindplot.layoutManagers.BaseLayo
         actionRunner.execute(this._command);
         this._command=null;
         this._modifiedTopics=null;
-
+        this._mouseInitialPos=null;
-//        var topicId = draggedTopic.getId();
-//        var command = new mindplot.commands.DragTopicCommand(topicId);
 
     },
     getClassName:function(){
@@ -175,9 +195,13 @@ mindplot.layoutManagers.FreeMindLayoutManager = mindplot.layoutManagers.BaseLayo
     },
     _createCentralTopicBoard:function(node){
         return new mindplot.layoutManagers.boards.freeMindBoards.CentralTopicBoard(node, this);
-    },
+    }
+    ,
     _updateParentBoard:function(node, modifiedTopics){
-        var parent = node.getParent();
+        this._updateBoard(node.getParent(), modifiedTopics);
+    },
+    _updateBoard:function(node, modifiedTopics){
+        var parent = node;
         if(!this._isCentralTopic(parent)){
             var parentBoard = this.getTopicBoardForTopic(parent.getParent());
             var result = parentBoard.findNodeEntryIndex(parent);
@@ -191,8 +215,11 @@ mindplot.layoutManagers.FreeMindLayoutManager = mindplot.layoutManagers.BaseLayo
                 var lastChild = table[table.length-1];
                 var marginBottom = (lastChild.getPosition()+lastChild.getTotalMarginBottom())-parentEntry.getPosition();
                 parentBoard.setNodeChildrenMarginBottom(parentEntry,marginBottom);
-                parentBoard._updateTable(result.index, result.table, modifiedTopics, false);
+            } else {
+                parentBoard.setNodeChildrenMarginTop(parentEntry, 0);
+                parentBoard.setNodeChildrenMarginBottom(parentEntry, 0);
             }
+            parentBoard._updateTable(result.index, result.table, modifiedTopics, false);
             this._updateParentBoard(parent, modifiedTopics);
         }
     },
@@ -202,7 +229,353 @@ mindplot.layoutManagers.FreeMindLayoutManager = mindplot.layoutManagers.BaseLayo
         for(var i=0; i<topics.length; i++){
             board._updateEntryPos(topics[i],delta, modifiedTopics, false);
         }
+    },
+    addHelpers:function(node){
+        if (node.getType() != mindplot.NodeModel.CENTRAL_TOPIC_TYPE)
+            this._addMoveHelper(node);
+    },
+    _addMoveHelper:function(node){
+        var moveShape = new mindplot.ActionIcon(node, mindplot.layoutManagers.FreeMindLayoutManager.MOVE_IMAGE_URL);
+        moveShape.setCursor('move');
+        var positionate = function(node){
+            if(node.getId() == this.getNode().getId()){
+                var size = this.getNode().getSize();
+                this.setPosition(size.width/2,0);
+            }
+        }.bind(moveShape);
+        positionate(node);
+        moveShape.setVisibility(false);
+        mindplot.EventBus.instance.addEvent(mindplot.EventBus.events.NodeResizeEvent,positionate);
+        var show = function(node){
+            if(node.getId() == this.getNode().getId()){
+                this.setVisibility(true);
+            }
+        }.bind(moveShape);
+        var hide = function(node){
+            if(node.getId() == this.getNode().getId()){
+                this.setVisibility(false);
+            }
+        }.bind(moveShape);
+        mindplot.EventBus.instance.addEvent(mindplot.EventBus.events.NodeMouseOverEvent,show);
+        mindplot.EventBus.instance.addEvent(mindplot.EventBus.events.NodeMouseOutEvent,hide);
+        node.addHelper(moveShape);
+        moveShape.addEventListener("mousedown",this._mousedownListener.bindWithEvent(this,[node]));
+
+    },
+    needsPrepositioning:function(){
+        return false;
+    },
+    _reconnectMouseDownListener:function(event, topic){
+        var workSpace = this._designer.getWorkSpace();
+        if (workSpace.isWorkspaceEventsEnabled())
+        {
+            // Disable double drag...
+            workSpace.enableWorkspaceEvents(false);
+
+            var id = topic.getId();
+            this._command = new mindplot.commands.freeMind.ReconnectTopicCommand();
+            this._modifiedTopics = new Hash();
+            this._mouseOverListeners = new Hash();
+            this._mouseOutListeners = new Hash();
+
+            var topics = this.getDesigner()._getTopics();
+            // Disable all mouse events.
+            for (var i = 0; i < topics.length; i++)
+            {
+                topics[i].setMouseEventsEnabled(false);
+                if(topics[i].getId()!=topic.getId()){
+                    var overListener = this._reconnectMouseOverListener.bindWithEvent(topics[i],[this]);
+                    topics[i].addEventListener('mouseover',overListener);
+                    this._mouseOverListeners.set(topics[i].getId(),overListener);
+                    var outListener = this._reconnectMouseOutListener.bindWithEvent(topics[i],[this]);
+                    topics[i].addEventListener('mouseout',outListener);
+                    this._mouseOutListeners.set(topics[i].getId(),outListener);
+                }
+            }
+            this._updateTopicsForReconnect(topic, mindplot.layoutManagers.FreeMindLayoutManager.RECONNECT_NODES_OPACITY);
+            var line = topic.getOutgoingLine();
+            if(line){
+                line.setVisibility(false);
+            }
+            this._createIndicatorShapes();
+
+            var ev = new Event(event);
+
+            var screen = workSpace.getScreenManager();
+
+            this._isMovingNode=false;
+
+            // Register mouse move listener ...
+            this._mouseMoveListenerInstance = this._reconnectMouseMoveListener.bindWithEvent(this,[topic]);
+            screen.addEventListener('mousemove', this._mouseMoveListenerInstance);
+
+            // Register mouse up listeners ...
+            this._mouseUpListenerInstance = this._reconnectMouseUpListener.bindWithEvent(this,[topic]);
+            screen.addEventListener('mouseup', this._mouseUpListenerInstance);
+
+            // Change cursor.
+            window.document.body.style.cursor = 'move';
+        }
+    },
+    _reconnectMouseMoveListener:function(event, node){
+        if(!this._isMovingNode){
+            this._isMovingNode=true;
+            var screen = this._designer.getWorkSpace().getScreenManager();
+            var nodePos = node.getPosition().clone();
+            var pos = screen.getWorkspaceMousePosition(event);
+            pos.x = Math.round(pos.x);
+            pos.y = Math.round(pos.y);
+            //If still in same side
+            if(Math.sign(nodePos.x)==Math.sign(pos.x)){
+                var x = nodePos.x - pos.x;
+                var y = nodePos.y - pos.y;
+                var delta = new core.Point(Math.round(x), Math.round(y));
+                var newPos = new core.Point(nodePos.x-(delta.x==null?0:delta.x), nodePos.y-delta.y);
+                node.setPosition(newPos, false);
+                this._updateChildrenBoards(node, delta, this._modifiedTopics);
+            } else {
+                this._changeChildrenSide(node, pos, this._modifiedTopics);
+                node.setPosition(pos.clone(), false);
+//                entryObj = parentBoard.findNewNodeEntryIndex(entry);
+//                parentBoard._addEntry(entry, entryObj.table, entryObj.index);
+//                parentBoard._updateTable(entryObj.index,  entryObj.table, this._modifiedTopics, true);
+
+            }
+            if(this._modifiedTopics.set){
+                var key = node.getId();
+                if(this._modifiedTopics.hasKey(key)){
+                    nodePos = this._modifiedTopics.get(key).originalPos;
+                }
+                this._modifiedTopics.set(key,{originalPos:nodePos, newPos:pos});
+            }
+            this._isMovingNode=false;
+        }
+        event.preventDefault();
+    },
+    _reconnectMouseUpListener:function(event, node){
+         var screen = this._designer.getWorkSpace().getScreenManager();
+        // Remove all the events.
+        screen.removeEventListener('mousemove', this._mouseMoveListenerInstance);
+        screen.removeEventListener('mouseup', this._mouseUpListenerInstance);
+        delete this._mouseMoveListenerInstance;
+        delete this._mouseUpListenerInstance;
+
+        var topics = this.getDesigner()._getTopics();
+        // Disable all mouse events.
+        for (var i = topics.length-1; i >=0; i--)
+        {
+            topics[i].setMouseEventsEnabled(true);
+            if(topics[i].getId()!=node.getId()){
+                var overListener = this._mouseOverListeners.get(topics[i].getId());
+                topics[i].removeEventListener('mouseover',overListener);
+                var outListener = this._mouseOutListeners.get(topics[i].getId());
+                topics[i].removeEventListener('mouseout',outListener);
+            }
+        }
+
+        this._restoreTopicsForReconnect(node);
+
+        this._removeIndicatorShapes(node);
+
+        if(this._createShape == null){
+            //cancel everything.
+            var line = node.getOutgoingLine();
+            if(line){
+                line.setVisibility(true);
+            }
+            core.Utils.animatePosition(this._modifiedTopics, null, this.getDesigner());
+        }else{
+            this._command.setModifiedTopics(this._modifiedTopics);
+            this._command.setDraggedTopic(node);
+            this._command.setTargetNode(this._targetNode);
+            this._command.setAs(this._createShape);
+            //todo:Create command
+            var actionRunner = mindplot.DesignerActionRunner.getInstance();
+            actionRunner.execute(this._command);
+        }
+
+        // Change the cursor to the default.
+        window.document.body.style.cursor = 'default';
+
+        this._designer.getWorkSpace().enableWorkspaceEvents(true);
+
+        this._command=null;
+        this._modifiedTopics=null;
+        this._mouseInitialPos=null;
+        this._mouseOverListeners=null;
+        this._mouseOutListeners=null;
+        this._targetNode = null;
+        this._createShape = null;
+    },
+    //function binded to the node with the over event
+    _reconnectMouseOverListener:function(event, layoutManager){
+        var size = this.getSize();
+        var screen = layoutManager.getDesigner().getWorkSpace().getScreenManager();
+        var pos = screen.getWorkspaceMousePosition(event);
+        pos.x = Math.round(pos.x);
+        pos.y = Math.round(pos.y);
+        var nodePos = this.getPosition();
+        //if it is on the child half side, or it is central topic add it as child
+        if(layoutManager._isCentralTopic(this) || ((Math.sign(nodePos.x)>0 && pos.x>nodePos.x) || (Math.sign(nodePos.x)<0 && pos.x<nodePos.x))){
+            layoutManager._updateIndicatorShapes(this, mindplot.layoutManagers.FreeMindLayoutManager.RECONNECT_SHAPE_CHILD, pos);
+        }else{
+            //is a sibling. if mouse in top half sibling goes above this one
+            if(pos.y<nodePos.y){
+                layoutManager._updateIndicatorShapes(this, mindplot.layoutManagers.FreeMindLayoutManager.RECONNECT_SHAPE_SIBLING_TOP);
+            }else{
+                //if mouse in bottom half sibling goes below this one
+                layoutManager._updateIndicatorShapes(this, mindplot.layoutManagers.FreeMindLayoutManager.RECONNECT_SHAPE_SIBLING_BOTTOM);
+            }
+        }
+    },
+    _createIndicatorShapes:function(){
+        if(!core.Utils.isDefined(this._createChildShape) || !core.Utils.isDefined(this._createSiblingShape)){
+            var rectAttributes = {fillColor:'#CC0033',opacity:0.4,width:30,height:30,strokeColor:'#FF9933'};
+            var rect = new web2d.Rect(0, rectAttributes);
+            rect.setVisibility(false);
+            this._createChildShape = rect;
+
+            rect = new web2d.Rect(0, rectAttributes);
+            rect.setVisibility(false);
+            this._createSiblingShape = rect;
+        }
+    },
+    _updateIndicatorShapes:function(topic, shape, mousePos){
+        if(this._createChildShape.getParent()!=null|| this._createSiblingShape.getParent()!=null){
+            this._createChildShape.getParent().removeChild(this._createChildShape._peer);
+            this._createSiblingShape.getParent().removeChild(this._createSiblingShape._peer);
+        }
+        topic.get2DElement().appendChild(this._createChildShape);
+        topic.get2DElement().appendChild(this._createSiblingShape);
+        var size = topic.getSize();
+        var position = topic.getPosition();
+        if(shape == mindplot.layoutManagers.FreeMindLayoutManager.RECONNECT_SHAPE_CHILD){
+            this._createChildShape.setSize(size.width/2, size.height);
+            var sign = mousePos?Math.sign(mousePos.x):Math.sign(position.x);
+            this._createChildShape.setPosition(sign>0?size.width/2:0, 0);
+            this._createChildShape.setVisibility(true);
+            this._createSiblingShape.setVisibility(false);
+            this._createShape = "Child";
+            this._targetNode = topic;
+        } else if(shape == mindplot.layoutManagers.FreeMindLayoutManager.RECONNECT_SHAPE_SIBLING_TOP){
+            this._createSiblingShape.setSize(size.width,size.height/2);
+            this._createSiblingShape.setPosition(0,0);
+            this._createSiblingShape.setVisibility(true);
+            this._createChildShape.setVisibility(false);
+            this._createShape = "Sibling_top";
+            this._targetNode = topic;
+        }else if(shape == mindplot.layoutManagers.FreeMindLayoutManager.RECONNECT_SHAPE_SIBLING_BOTTOM){
+            this._createSiblingShape.setSize(size.width,size.height/2);
+            this._createSiblingShape.setPosition(0,size.height/2);
+            this._createSiblingShape.setVisibility(true);
+            this._createChildShape.setVisibility(false);
+            this._createShape = "Sibling_bottom";
+            this._targetNode = topic;
+        } else {
+            this._createSiblingShape.setVisibility(false);
+            this._createChildShape.setVisibility(false);
+            this._createShape = null;
+            this._targetNode = null;
+        }
+    },
+    _removeIndicatorShapes:function(node){
+        if(this._createChildShape.getParent()!=null|| this._createSiblingShape.getParent()!=null){
+            this._createChildShape.getParent().removeChild(this._createChildShape._peer);
+            this._createSiblingShape.getParent().removeChild(this._createSiblingShape._peer);
+        }
+    },
+    _reconnectMouseOutListener:function(event, layoutManager){
+        layoutManager._updateIndicatorShapes(this, null);
+    },
+    _updateTopicsForReconnect:function(topic, opacity){
+        topic.setOpacity(opacity);
+        topic.moveToBack();
+        var children = topic._getChildren();
+        for(var k = 0; k<children.length; k++){
+            this._updateTopicsForReconnect(children[k], opacity);
+        }
+    },
+    _restoreTopicsForReconnect:function(topic){
+        var children = topic._getChildren();
+        for(var k = 0; k<children.length; k++){
+            this._restoreTopicsForReconnect(children[k]);
+        }
+        topic.setOpacity(1);
+        topic.moveToFront();
+    },
+    _movingNode:function(targetNode, node){
+        var parentBoard = this.getTopicBoardForTopic(node._relationship_oldParent);
+        var entryObj;
+        if(this._isCentralTopic(node._relationship_oldParent)){
+            var oldPos = node._originalPosition;
+                entryObj = parentBoard.findNodeEntryIndex(node,oldPos);
+        }else{
+            entryObj = parentBoard.findNodeEntryIndex(node);
+        }
+        var entry = entryObj.table[entryObj.index];
+        parentBoard._removeEntry(node, entryObj.table, entryObj.index, this._modifiedTopics);
+        var targetBoard = this.getTopicBoardForTopic(targetNode);
+        var table = targetBoard._getTableForNode(node);
+        var index;
+        if(node.relationship == "Child"){
+
+            var newNodePos=new core.Point();
+            if(table.length>0){
+                //if no children use the position set by Entry initializer. Otherwise place as last child
+                var lastChild = table[table.length-1];
+                newNodePos.y = lastChild.getPosition()+lastChild.getTotalMarginBottom() + entry.getTotalMarginTop();
+            } else {
+                newNodePos.y = targetNode.getPosition().y;
+            }
+            var parentPos = targetNode.getPosition();
+            var pwidth = targetNode.getSize().width;
+            var width = node.getSize().width;
+            if(this._isCentralTopic(targetNode)){
+                newNodePos.x = Math.sign(node.getPosition().x) * (entry._DEFAULT_X_GAP + pwidth/2 + width/2)
+            }
+            else{
+                newNodePos.x = parentPos.x + Math.sign(parentPos.x) * (entry._DEFAULT_X_GAP + pwidth/2 + width/2);
+            }
+
+            index = table.length;
+        } else {
+            //moving as sibling of targetNode
+
+            var sibObj = targetBoard.findNodeEntryIndex(node._relationship_sibling_node);
+            var siblingEntry =sibObj.table[sibObj.index];
+
+            var newNodePos=new core.Point();
+            if(node.relationship == "Sibling_top"){
+                newNodePos.y =siblingEntry.getPosition()-siblingEntry.getTotalMarginTop()+entry.getTotalMarginTop();
+                index = sibObj.index==0?0:sibObj.index-1;
+            }
+            else{
+                newNodePos.y = siblingEntry.getPosition()+siblingEntry.getTotalMarginBottom() + entry.getTotalMarginTop();
+                index = sibObj.index+1;
+            }
+            var parentPos = targetNode.getPosition();
+            var pwidth = targetNode.getSize().width;
+            var width = node.getSize().width;
+            newNodePos.x = parentPos.x + Math.sign(parentPos.x) * (entry._DEFAULT_X_GAP + pwidth/2 + width/2);
+        }
+        var nodePos = node.getPosition();
+        var x = nodePos.x - newNodePos.x;
+        var y = nodePos.y - newNodePos.y;
+        var delta = new core.Point(Math.round(x), Math.round(y));
+        entry.setPosition(newNodePos.x, newNodePos.y);
+        this._updateChildrenBoards(node, delta, this._modifiedTopics);
+
+        targetBoard._addEntry(entry, table, index);
+        targetBoard._updateTable(index,  table, [], true);
+        this._updateBoard(targetNode,[]);
+        this._updateBoard(node._relationship_oldParent,[]);
+        mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.NodeMouseOutEvent,[node ]);
     }
 });
 
 mindplot.layoutManagers.FreeMindLayoutManager.NAME ="FreeMindLayoutManager";
+mindplot.layoutManagers.FreeMindLayoutManager.MOVE_IMAGE_URL = "../images/move.png";
+mindplot.layoutManagers.FreeMindLayoutManager.RECONNECT_NODES_OPACITY = 0.4;
+mindplot.layoutManagers.FreeMindLayoutManager.RECONNECT_SHAPE_CHILD = "child";
+mindplot.layoutManagers.FreeMindLayoutManager.RECONNECT_SHAPE_SIBLING_TOP = "top";
+mindplot.layoutManagers.FreeMindLayoutManager.RECONNECT_SHAPE_SIBLING_BOTTOM = "bottom";

mindplot/src/main/javascript/layoutManagers/OriginalLayoutManager.js

@@ -12,6 +12,26 @@ mindplot.layoutManagers.OriginalLayoutManager = mindplot.layoutManagers.BaseLayo
         // Add shapes to speed up the loading process ...
         mindplot.DragTopic.initialize(workSpace);
     },
+    prepareChildrenList:function(node, children){
+        // Sort children by order to solve adding order in for OriginalLayoutManager...
+        var result = [];
+        if (node.getTopicType()!=mindplot.NodeModel.CENTRAL_TOPIC_TYPE && children.length > 0)
+        {
+            for (var i = 0; i < children.length; i++)
+            {
+                var child = children[i];
+                var order = child.getOrder();
+                if (order != null)
+                {
+                    result[order] = child;
+                } else
+                {
+                    result.push(child);
+                }
+            }
+        }
+        return result;
+    },
     _nodeResizeEvent:function(node){
         if(this._isCentralTopic(node)){
             var size = node.getSize();
@@ -19,7 +39,7 @@ mindplot.layoutManagers.OriginalLayoutManager = mindplot.layoutManagers.BaseLayo
                 this.getTopicBoardForTopic(node).updateChildrenPosition(node,size.height/2, []);
         }
     },
-    _NodeRepositionateEvent:function(node){
+    _nodeRepositionateEvent:function(node){
         this.getTopicBoardForTopic(node).repositionate();
     },
     getDragTopicPositioner : function()

mindplot/src/main/javascript/layoutManagers/boards/freeMindBoards/Board.js

@@ -11,24 +11,13 @@ mindplot.layoutManagers.boards.freeMindBoards.Board = mindplot.layoutManagers.bo
     _createTables:function(){
         core.assert(false, "no Board implementation found!")
     },
-    _getTableForNode:function(node){
+    _getTableForNode:function(node, position){
         core.assert(false, "no Board implementation found!")
     },
     removeTopicFromBoard:function(node, modifiedTopics){
-        var table = this._getTableForNode(node);
+        var result = this.findNodeEntryIndex(node);
-        var id = node.getId();
+        core.assert(result.index<result.table.length,"node not found. Could not remove");
-
+        this._removeEntry(node, result.table, result.index, modifiedTopics);
-        //search for position
-        var i;
-        for(i = 0; i< table.length ; i++){
-            var entry = table[i];
-            if (entry.getId() == id){
-                break;
-            }
-        }
-        core.assert(i<table.length,"node not found. Could not remove");
-        this._removeEntry(node, table, i, modifiedTopics);
-        this._updateTable(0,table, modifiedTopics, true);
     },
     addBranch:function(node,modifiedTopics){
         var pos = (this._layoutManager._isMovingNode?node.getPosition():node.getModel().getFinalPosition() || node.getPosition());
@@ -38,12 +27,21 @@ mindplot.layoutManagers.boards.freeMindBoards.Board = mindplot.layoutManagers.bo
         // if creating a sibling or child
         if(!this._layoutManager._isMovingNode && this._layoutManager.getDesigner().getSelectedNodes().length>0){
             var selectedNode = this._layoutManager.getDesigner().getSelectedNodes()[0];
-            if(selectedNode.getParent()!= null && node.getParent().getId() == selectedNode.getParent().getId() && !this._layoutManager._isCentralTopic(node.getParent())){
+            if(!pos){
+                if(selectedNode.getParent()!= null && node.getParent().getId() == selectedNode.getParent().getId()){
                     //creating a sibling - Lets put the new node below the selected node.
                     var parentBoard = this._layoutManager.getTopicBoardForTopic(selectedNode.getParent());
                     var selectedNodeResult = parentBoard.findNodeEntryIndex(selectedNode);
                     var selectedNodeEntry = selectedNodeResult.table[selectedNodeResult.index];
-                entry.setPosition(null, selectedNodeEntry.getPosition()+selectedNodeEntry.getTotalMarginBottom() + entry.getMarginTop());
+                    var x = null;
+                    if(this._layoutManager._isCentralTopic(selectedNode.getParent())){
+                        var nodeX = entry.getNode().getPosition().x;
+                        if(Math.sign(nodeX)!=Math.sign(selectedNode.getPosition().x)){
+                            x =nodeX *-1;
+                        }
+                        result.table = selectedNodeResult.table;
+                    }
+                    entry.setPosition(x, selectedNodeEntry.getPosition()+selectedNodeEntry.getTotalMarginBottom() + entry.getMarginTop());
                     result.index = selectedNodeResult.index+1;
                 } else if(node.getParent().getId() == selectedNode.getId()){
                     //creating a child node - Lest put the new node as the last child.
@@ -57,6 +55,7 @@ mindplot.layoutManagers.boards.freeMindBoards.Board = mindplot.layoutManagers.bo
                     result.index = table.length;
                 }
             }
+        }
         this._addEntry(entry, result.table, result.index);
         if(pos){
             if(result.index>0){
@@ -89,7 +88,7 @@ mindplot.layoutManagers.boards.freeMindBoards.Board = mindplot.layoutManagers.bo
     },
     _removeEntry:function(node, table, index, modifiedTopics){
         table.splice(index, 1);
-        this._updateTable(index, table, modifiedTopics, false);
+        this._updateTable(index>0?index-1:index, table, modifiedTopics, false);
     },
     _addEntry:function(entry, table, index){
         table.splice(index, 0, entry);
@@ -136,18 +135,13 @@ mindplot.layoutManagers.boards.freeMindBoards.Board = mindplot.layoutManagers.bo
             }
         }
 
-//        if(updateParents && (i==0 || i==table.length-1)){
-//            this._layoutManager._updateParentBoard(table[i].getNode(), modifiedTopics);
-//        }
     },
     updateChildrenPosition:function(node, modifiedTopics){
         var result = this.findNodeEntryIndex(node);
         this._updateTable(result.index, result.table, modifiedTopics, false);
     },
-    findNodeEntryIndex:function(node){
+    findNodeEntryIndex:function(node, position){
-        var table = this._getTableForNode(node);
+        var table = this._getTableForNode(node, position);
-        var position = node.getPosition();
-        var y = position.y;
 
         //search for position
         var i;
@@ -181,11 +175,9 @@ mindplot.layoutManagers.boards.freeMindBoards.Board = mindplot.layoutManagers.bo
         entry.setMarginBottom(marginBottom);
     },
     setNodeChildrenMarginTop:function(entry, delta){
-        var marginTop = entry.getChildrenMarginTop()-delta.y;
         entry.setChildrenMarginTop(delta);
     },
     setNodeChildrenMarginBottom:function(entry, delta){
-        var marginBottom = entry.getChildrenMarginBottom()-delta.y;
         entry.setChildrenMarginBottom(delta);
     },
     updateEntry:function(node, delta, modifiedTopics){
@@ -204,8 +196,6 @@ mindplot.layoutManagers.boards.freeMindBoards.Board = mindplot.layoutManagers.bo
         var newPos = new core.Point(pos.x-(delta.x==null?0:delta.x), pos.y-delta.y);
         entry.setPosition(newPos.x, newPos.y);
         this._layoutManager._updateChildrenBoards(entry.getNode(), delta, modifiedTopics);
-//        if(updateParents)
-//            this._layoutManager._updateParentBoard(entry.getNode(), modifiedTopics);
         if(modifiedTopics.set){
             var key = entry.getId();
             if(modifiedTopics.hasKey(key)){

mindplot/src/main/javascript/layoutManagers/boards/freeMindBoards/CentralTopicBoard.js

@@ -8,15 +8,19 @@ mindplot.layoutManagers.boards.freeMindBoards.CentralTopicBoard = mindplot.layou
     _createTables:function(){
         return [[],[]];
     },
-    _getTableForNode:function(node){
+    _getTableForNode:function(node, altPosition){
         var i = 0;
         var position = node.getPosition();
+        if(typeof altPosition != "undefined")
+        {
+            position = altPosition;
+        }
         if(!position){
             if(Math.sign(node.getParent().getPosition().x) == -1){
                 i=1;
             }
         }
-        else if(mindplot.util.Shape.isAtRight(position, node.getParent().getPosition()))
+        else if(Math.sign(position.x)==-1)
             i=1;
         return this._positionTables[i];
     }

mindplot/src/main/javascript/layoutManagers/boards/freeMindBoards/Entry.js

@@ -83,9 +83,9 @@ mindplot.layoutManagers.boards.freeMindBoards.Entry = new Class({
         return this._marginBottomChildren;
     },
     getTotalMarginTop:function(){
-        return this._marginTopChildren+this._marginTop;
+        return (this._node.areChildrenShrinked()?0:this._marginTopChildren)+this._marginTop;
     },
     getTotalMarginBottom:function(){
-        return this._marginBottomChildren + this._marginBottom;
+        return (this._node.areChildrenShrinked()?0:this._marginBottomChildren) + this._marginBottom;
     }
 });