Topic editor can be configured based on the shape type.

mindplot/pom.xml

@@ -51,7 +51,7 @@
                                 <mkdir dir="${basedir}/target/classes"/>
                                 <concat destfile="${basedir}/target/tmp/mindplot.js" append="false">
                                     <filelist dir="${basedir}/src/main/javascript/" files="header.js"/>
-
+                                    <filelist dir="${basedir}/src/main/javascript/" files="TopicEditor.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/" files="model/IMindmap.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/" files="model/Mindmap.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/" files="model/INodeModel.js"/>

mindplot/src/main/javascript/Designer.js

@@ -61,6 +61,7 @@ mindplot.Designer = new Class({
             // Set editor working area ...
             this.setViewPort(options.viewPort);
 
+            mindplot.TopicEditor.configure();
         },
 
         _registerEvents : function() {
@@ -448,42 +449,42 @@ mindplot.Designer = new Class({
             this._mindmap = mindmapModel;
 
             try {
-            // Init layout manager ...
-            var size = {width:25,height:25};
-            var layoutManager = new mindplot.layout.LayoutManager(mindmapModel.getCentralTopic().getId(), size);
-            layoutManager.addEvent('change', function(event) {
-                var id = event.getId();
-                var topic = this.getModel().findTopicById(id);
-                topic.setPosition(event.getPosition());
-                topic.setOrder(event.getOrder());
-            }.bind(this));
-            this._eventBussDispatcher.setLayoutManager(layoutManager);
+                // Init layout manager ...
+                var size = {width:25,height:25};
+                var layoutManager = new mindplot.layout.LayoutManager(mindmapModel.getCentralTopic().getId(), size);
+                layoutManager.addEvent('change', function(event) {
+                    var id = event.getId();
+                    var topic = this.getModel().findTopicById(id);
+                    topic.setPosition(event.getPosition());
+                    topic.setOrder(event.getOrder());
+                }.bind(this));
+                this._eventBussDispatcher.setLayoutManager(layoutManager);
 
 
-            // Building node graph ...
-            var branches = mindmapModel.getBranches();
-            for (var i = 0; i < branches.length; i++) {
-                // NodeModel -> NodeGraph ...
-                var nodeModel = branches[i];
-                var nodeGraph = this._nodeModelToNodeGraph(nodeModel, false);
+                // Building node graph ...
+                var branches = mindmapModel.getBranches();
+                for (var i = 0; i < branches.length; i++) {
+                    // NodeModel -> NodeGraph ...
+                    var nodeModel = branches[i];
+                    var nodeGraph = this._nodeModelToNodeGraph(nodeModel, false);
 
-                // Update shrink render state...
-                nodeGraph.setBranchVisibility(true);
-            }
+                    // Update shrink render state...
+                    nodeGraph.setBranchVisibility(true);
+                }
 
-            var relationships = mindmapModel.getRelationships();
-            for (var j = 0; j < relationships.length; j++) {
-                this._relationshipModelToRelationship(relationships[j]);
-            }
+                var relationships = mindmapModel.getRelationships();
+                for (var j = 0; j < relationships.length; j++) {
+                    this._relationshipModelToRelationship(relationships[j]);
+                }
 
-            // Place the focus on the Central Topic
-            var centralTopic = this.getModel().getCentralTopic();
-            this.goToNode(centralTopic);
+                // Place the focus on the Central Topic
+                var centralTopic = this.getModel().getCentralTopic();
+                this.goToNode(centralTopic);
 
-            // Finally, sort the map ...
-            mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.DoLayout);
+                // Finally, sort the map ...
+                mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.DoLayout);
 
-            this.fireEvent('loadSuccess');
+                this.fireEvent('loadSuccess');
             } catch(e) {
                 this.fireEvent('loadError', e);
             }

mindplot/src/main/javascript/MultilineTextEditor.js

@@ -18,8 +18,8 @@
 
 mindplot.MultilineTextEditor = new Class({
     Extends: Events,
-    initialize:function(topic) {
-        this._topic = topic;
+    initialize:function() {
+        this._topic = null;
     },
 
     _buildEditor : function() {
@@ -133,8 +133,9 @@ mindplot.MultilineTextEditor = new Class({
         }
     },
 
-    show : function (text) {
+    show : function (topic,text) {
 
+        this._topic = topic;
         if (!this.isVisible()) {
             //Create editor ui
             var containerElem = this._buildEditor();
@@ -260,6 +261,7 @@ mindplot.MultilineTextEditor = new Class({
             // Remove it form the screen ...
             this._containerElem.dispose();
             this._containerElem = null;
+            this._topic = null;
         }
     }
 });

mindplot/src/main/javascript/Topic.js

@@ -21,8 +21,6 @@ mindplot.Topic = new Class({
     Extends:mindplot.NodeGraph,
     initialize : function(model, options) {
         this.parent(model, options);
-        this._textEditor = new mindplot.MultilineTextEditor(this);
-
         this._children = [];
         this._parent = null;
         this._relationships = [];
@@ -51,19 +49,9 @@ mindplot.Topic = new Class({
         });
 
         this.addEvent('dblclick', function (event) {
-            this._textEditor.show();
+            this._getTopicEditor().show(this);
             event.stopPropagation(true);
         }.bind(this));
-
-        this._textEditor.addEvent('input', function() {
-            var textShape = this.getTextShape();
-//            var oldText = textShape.getText();
-
-//            this._setText(text, false);
-            // @Todo: I must resize, no change the position ...
-//            textShape.setText(oldText);
-        }.bind(this));
-
     },
 
     setShapeType : function(type) {
@@ -664,7 +652,7 @@ mindplot.Topic = new Class({
     },
 
     showTextEditor : function(text) {
-        this._textEditor.show(text);
+        this._getTopicEditor().show(this, {text:text});
     },
 
     showNoteEditor : function() {
@@ -740,9 +728,12 @@ mindplot.Topic = new Class({
         editor.show();
     },
 
-
     closeEditors : function() {
-        this._textEditor.close(true);
+        this._getTopicEditor().close(true);
+    },
+
+    _getTopicEditor : function() {
+        return mindplot.TopicEditor.getInstance();
     },
 
     /**
@@ -1123,7 +1114,7 @@ mindplot.Topic = new Class({
         }
 
         // If a drag node is create for it, let's hide the editor.
-        this._textEditor.close();
+        this._getTopicEditor().close();
 
         return result;
     },

mindplot/src/main/javascript/TopicEditor.js

@@ -18,8 +18,49 @@
 
 mindplot.TopicEditor = new Class({
     Extends: Events,
-    initialize:function(topic) {
-        this._topic = topic;
+    Static: {
+        _instance: null,
+
+        configure: function(options) {
+            this._instance = new mindplot.TopicEditor();
+        },
+
+        getInstance : function() {
+            return this._instance;
+        }
+    },
+
+    initialize:function() {
+        this._activeEditor = null;
+        this._multilineEditor = new mindplot.MultilineTextEditor();
+    },
+
+    close : function(update) {
+        if (this.isVisible()) {
+            this._activeEditor.close(update);
+            this._activeEditor = null;
+        }
+    },
+
+    show : function(topic, options) {
+
+        // Close all previous open editor ....
+        if (this.isVisible()) {
+            this.close();
+        }
+
+        // Open the new editor ...
+        var model = topic.getModel();
+        if (model.getShapeType() != mindplot.model.TopicShape.IMAGE) {
+            this._multilineEditor.show(topic, options ? options.text : null);
+            this._activeEditor = this._multilineEditor;
+        } else {
+            // To be implemented....
+        }
+    },
+
+    isVisible: function() {
+        return this._activeEditor != null && this._activeEditor.isVisible();
     }
 });
 

mindplot/src/main/javascript/TopicFeature.js

@@ -63,6 +63,6 @@ mindplot.TopicFeature = {
     }
 };
 
-mindplot.TopicFeature._featuresMetadataById = [mindplot.TopicFeature.Icon,mindplot.TopicFeature.Link,mindplot.TopicFeature.Note]
+mindplot.TopicFeature._featuresMetadataById = [mindplot.TopicFeature.Icon,mindplot.TopicFeature.Link,mindplot.TopicFeature.Note];
 
 

mindplot/src/main/javascript/header.js

@@ -29,3 +29,8 @@ mindplot.collaboration.framework = {};
 mindplot.persistence = {};
 
 mindplot.layout = {};
+
+Class.Mutators.Static = function(items){
+    this.extend(items);
+};
+