Add support for click event node registration.

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="TopicEventDispatcher.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,7 +61,7 @@ mindplot.Designer = new Class({
             // Set editor working area ...
             this.setViewPort(options.viewPort);
 
-            mindplot.TopicEditor.configure(this.isReadOnly());
+            mindplot.TopicEventDispatcher.configure(this.isReadOnly());
         },
 
         /**
@@ -71,6 +71,10 @@ mindplot.Designer = new Class({
             mindplot.DesignerKeyboard.getInstance().deactivate();
             this.deselectAll();
         },
+
+        /**
+         * Activates the keyboard events so you can enter text into forms
+         */
         activateKeyboard: function() {
             mindplot.DesignerKeyboard.getInstance().activate();
         },
@@ -85,8 +89,8 @@ mindplot.Designer = new Class({
         },
 
         addEvent: function(type, listener) {
-            if (type == "editnode") {
-                var editor = mindplot.TopicEditor.getInstance();
+            if (type == mindplot.TopicEvent.EDIT || type == mindplot.TopicEvent.CLICK) {
+                var editor = mindplot.TopicEventDispatcher.getInstance();
                 editor.addEvent(type, listener);
             } else {
                 this.parent(type, listener);
@@ -294,7 +298,7 @@ mindplot.Designer = new Class({
                 object.setOnFocus(false);
             });
         },
-                      
+
         /**
          * Set the zoom of the map.
          * @param: zoom: number between 0.3 and 1.9
@@ -302,16 +306,13 @@ mindplot.Designer = new Class({
         setZoom: function(zoom) {
             if (zoom > 1.9 || zoom < 0.3) {
                 $notify("Zoom too high. Cannot apply zoom above 1.9 or below 0.3");
-                console.log("Tried to set zoom to " + zoom + " which is utside allowed range.");
+                console.log("Tried to set zoom to " + zoom + " which is outside allowed range.");
                 return;
             }
             this.getModel().setZoom(zoom);
             this._workspace.setZoom(zoom);
-
         },
 
-                     
-
         zoomOut : function(factor) {
             if (!factor)
                 factor = 1.2;

mindplot/src/main/javascript/Topic.js

@@ -49,7 +49,7 @@ mindplot.Topic = new Class({
         });
 
         this.addEvent('dblclick', function (event) {
-            this._getTopicEditor().show(this);
+            this._getTopicEventDispatcher().show(this);
             event.stopPropagation(true);
         }.bind(this));
     },
@@ -583,7 +583,7 @@ mindplot.Topic = new Class({
         elem.addEvent('mouseout', outout);
 
         // Focus events ...
-        var mouseDown = function(event) {
+        elem.addEvent('mousedown', function(event) {
             var value = true;
             if ((event.meta && Browser.Platform.mac) || (event.control && !Browser.Platform.mac)) {
                 value = !this.isOnFocus();
@@ -591,8 +591,10 @@ mindplot.Topic = new Class({
                 event.preventDefault();
             }
             topic.setOnFocus(value);
-        }.bind(this);
-        elem.addEvent('mousedown', mouseDown);
+
+            var eventDispatcher = this._getTopicEventDispatcher();
+            eventDispatcher.process(mindplot.TopicEvent.CLICK, this);
+        }.bind(this));
     },
 
     areChildrenShrunken : function() {
@@ -658,7 +660,7 @@ mindplot.Topic = new Class({
     },
 
     showTextEditor : function(text) {
-        this._getTopicEditor().show(this, {text:text});
+        this._getTopicEventDispatcher().show(this, {text:text});
     },
 
     showNoteEditor : function() {
@@ -735,11 +737,11 @@ mindplot.Topic = new Class({
     },
 
     closeEditors : function() {
-        this._getTopicEditor().close(true);
+        this._getTopicEventDispatcher().close(true);
     },
 
-    _getTopicEditor : function() {
-        return mindplot.TopicEditor.getInstance();
+    _getTopicEventDispatcher : function() {
+        return mindplot.TopicEventDispatcher.getInstance();
     },
 
     /**
@@ -1128,7 +1130,7 @@ mindplot.Topic = new Class({
         }
 
         // If a drag node is create for it, let's hide the editor.
-        this._getTopicEditor().close();
+        this._getTopicEventDispatcher().close();
 
         return result;
     },

mindplot/src/main/javascript/TopicEventDispatcher.js

@@ -16,13 +16,13 @@
  *   limitations under the License.
  */
 
-mindplot.TopicEditor = new Class({
+mindplot.TopicEventDispatcher = new Class({
     Extends: Events,
     Static: {
         _instance: null,
 
         configure: function(readOnly) {
-            this._instance = new mindplot.TopicEditor(readOnly);
+            this._instance = new mindplot.TopicEventDispatcher(readOnly);
         },
 
         getInstance : function() {
@@ -44,6 +44,10 @@ mindplot.TopicEditor = new Class({
     },
 
     show : function(topic, options) {
+        this.process(mindplot.TopicEvent.EDIT, topic, options);
+    },
+
+    process : function(eventType, topic, options) {
 
         // Close all previous open editor ....
         if (this.isVisible()) {
@@ -52,11 +56,11 @@ mindplot.TopicEditor = new Class({
 
         // Open the new editor ...
         var model = topic.getModel();
-        if (model.getShapeType() != mindplot.model.TopicShape.IMAGE && !this._readOnly) {
+        if (model.getShapeType() != mindplot.model.TopicShape.IMAGE && !this._readOnly && eventType == mindplot.TopicEvent.EDIT) {
             this._multilineEditor.show(topic, options ? options.text : null);
             this._activeEditor = this._multilineEditor;
         } else {
-            this.fireEvent("editnode", {model:model,readOnly:this._readOnly});
+            this.fireEvent(eventType, {model:model,readOnly:this._readOnly});
         }
     },
 
@@ -65,3 +69,9 @@ mindplot.TopicEditor = new Class({
     }
 });
 
+
+mindplot.TopicEvent = {
+    EDIT : "editnode",
+    CLICK : "clicknode"
+};
+

wise-editor/src/main/webapp/html/drag.html

@@ -73,12 +73,22 @@
                 designer.addDraggedNode(event, node);
             });
 
-            designer.addEvent("editnode", function(event) {
+            designer.addEvent(mindplot.TopicEvent.EDIT, function(event) {
                 var node = event.model;
 
-                alert("Node Id:" + node.getId());
-                alert("Node Metadata:" + node.getMetadata());
-                alert("Is Read Only:" + event.readOnly);
+                console.log("Event: edit");
+                console.log("Node Id:" + node.getId());
+                console.log("Node Metadata:" + node.getMetadata());
+                console.log("Is Read Only:" + event.readOnly);
+            });
+
+            designer.addEvent(mindplot.TopicEvent.CLICK, function(event) {
+                var node = event.model;
+
+                console.log("Event: click");
+                console.log("Node Id:" + node.getId());
+                console.log("Node Metadata:" + node.getMetadata());
+                console.log("Is Read Only:" + event.readOnly);
             });
         });
     </script>