First steps on icon drag support.

mindplot/src/main/javascript/Designer.js

@@ -160,6 +160,7 @@ mindplot.Designer = new Class({
             this._workspace.setZoom(model.getZoom(), true);
         },
 
+
         _buildNodeGraph : function(model, readOnly) {
             var workspace = this._workspace;
 
@@ -340,6 +341,30 @@ mindplot.Designer = new Class({
             return childModel;
         },
 
+        addDraddedNode: function(event, options) {
+            $assert(event, "event can not be null");
+            $assert(options, "option can not be null");
+
+            // Create a new node ...
+            var mindmap = this.getMindmap();
+            var model = mindmap.createNode(mindplot.model.INodeModel.MAIN_TOPIC_TYPE);
+            model.setShapeType(mindplot.model.TopicShape.IMAGE);
+
+            // Set node specified options ...
+            model.setImageUrl(options.imageUrl);
+            model.setImageSize(options.imageWidth, options.imageHeight);
+            model.setMetadata(options.metadata);
+
+            // Position far from the visual area ...
+            model.setPosition(1000, 1000);
+
+            this._actionDispatcher.addTopic(model, null, false);
+            var topic = this.getModel().findTopicById(model.getId());
+
+            // Simulate a mouse down event to start the dragging ...
+            topic.fireEvent("mousedown", event);
+        },
+
         createSiblingForSelectedNode : function() {
             var nodes = this.getModel().filterSelectedTopics();
             if (nodes.length <= 0) {
@@ -423,42 +448,42 @@ mindplot.Designer = new Class({
             this._mindmap = mindmapModel;
 
 //            try {
-                // Init layout manager ...
+            // Init layout manager ...
-                var size = {width:25,height:25};
+            var size = {width:25,height:25};
-                var layoutManager = new mindplot.layout.LayoutManager(mindmapModel.getCentralTopic().getId(), size);
+            var layoutManager = new mindplot.layout.LayoutManager(mindmapModel.getCentralTopic().getId(), size);
-                layoutManager.addEvent('change', function(event) {
+            layoutManager.addEvent('change', function(event) {
-                    var id = event.getId();
+                var id = event.getId();
-                    var topic = this.getModel().findTopicById(id);
+                var topic = this.getModel().findTopicById(id);
-                    topic.setPosition(event.getPosition());
+                topic.setPosition(event.getPosition());
-                    topic.setOrder(event.getOrder());
+                topic.setOrder(event.getOrder());
-                }.bind(this));
+            }.bind(this));
-                this._eventBussDispatcher.setLayoutManager(layoutManager);
+            this._eventBussDispatcher.setLayoutManager(layoutManager);
 
 
-                // Building node graph ...
+            // Building node graph ...
-                var branches = mindmapModel.getBranches();
+            var branches = mindmapModel.getBranches();
-                for (var i = 0; i < branches.length; i++) {
+            for (var i = 0; i < branches.length; i++) {
-                    // NodeModel -> NodeGraph ...
+                // NodeModel -> NodeGraph ...
-                    var nodeModel = branches[i];
+                var nodeModel = branches[i];
-                    var nodeGraph = this._nodeModelToNodeGraph(nodeModel, false);
+                var nodeGraph = this._nodeModelToNodeGraph(nodeModel, false);
 
-                    // Update shrink render state...
+                // Update shrink render state...
-                    nodeGraph.setBranchVisibility(true);
+                nodeGraph.setBranchVisibility(true);
-                }
+            }
 
-                var relationships = mindmapModel.getRelationships();
+            var relationships = mindmapModel.getRelationships();
-                for (var j = 0; j < relationships.length; j++) {
+            for (var j = 0; j < relationships.length; j++) {
-                    this._relationshipModelToRelationship(relationships[j]);
+                this._relationshipModelToRelationship(relationships[j]);
-                }
+            }
 
-                // Place the focus on the Central Topic
+            // Place the focus on the Central Topic
-                var centralTopic = this.getModel().getCentralTopic();
+            var centralTopic = this.getModel().getCentralTopic();
-                this.goToNode(centralTopic);
+            this.goToNode(centralTopic);
 
-                // Finally, sort the map ...
+            // Finally, sort the map ...
-                mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.DoLayout);
+            mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.DoLayout);
 
-                this.fireEvent('loadSuccess');
+            this.fireEvent('loadSuccess');
 //            } catch(e) {
 //                this.fireEvent('loadError', e);
 //            }
@@ -668,7 +693,7 @@ mindplot.Designer = new Class({
 
         changeBorderColor : function(color) {
             var validateFunc = function(topic) {
-                return topic.getShapeType() != mindplot.model.TopicShape.LINE ;
+                return topic.getShapeType() != mindplot.model.TopicShape.LINE;
             };
             var validateError = 'Color can not be set to line topics.';
             var topicsIds = this.getModel().filterTopicsIds(validateFunc, validateError);

mindplot/src/main/javascript/model/INodeModel.js

@@ -87,6 +87,15 @@ mindplot.model.INodeModel = new Class({
 
     },
 
+    getMetadata:function() {
+        return this.getProperty('metadata');
+    },
+
+    setMetadata:function(json) {
+        this.putProperty('metadata', json);
+
+    },
+
     getImageUrl:function() {
         return this.getProperty('imageUrl');
     },

mindplot/src/main/javascript/persistence/XMLSerializer_Pela.js

@@ -127,6 +127,11 @@ mindplot.persistence.XMLSerializer_Pela = new Class({
             parentTopic.setAttribute('brColor', brColor);
         }
 
+        var metadata = topic.getMetadata();
+        if ($defined(metadata)) {
+            parentTopic.setAttribute('metadata', metadata);
+        }
+
         // Serialize features ...
         var features = topic.getFeatures();
         for (var i = 0; i < features.length; i++) {
@@ -314,6 +319,11 @@ mindplot.persistence.XMLSerializer_Pela = new Class({
             topic.setPosition(pos[0], pos[1]);
         }
 
+        var metadata = domElem.getAttribute('metadata');
+        if ($defined(metadata)) {
+            topic.setMetadata(metadata);
+        }
+
         //Creating icons and children nodes
         var children = domElem.childNodes;
         for (var i = 0; i < children.length; i++) {

web2d/src/main/javascript/Element.js

@@ -87,6 +87,10 @@ web2d.Element = new Class({
         this._peer.addEvent(type, listener);
     },
 
+    fireEvent : function(type, event) {
+        this._peer.fireEvent(type, event);
+    },
+
     cloneEvents : function(from) {
         this._peer.cloneEvents(from);
     },

web2d/src/main/javascript/peer/svg/ElementPeer.js

@@ -85,6 +85,10 @@ web2d.peer.svg.ElementPeer = new Class({
         this._native.addEvent(type, listener);
     },
 
+    fireEvent : function(type) {
+        this._native.fireEvent(type, event);
+    },
+
     cloneEvents : function(from) {
         this._native.cloneEvents(from);
     },

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

@@ -30,9 +30,9 @@
             var persistence = mindplot.PersistenceManager.getInstance();
             var mindmap;
 //            try {
-                mindmap = persistence.load(mapId);
+            mindmap = persistence.load(mapId);
 //            } catch(e) {
-                // If the map could not be loaded, create a new empty map...
+            // If the map could not be loaded, create a new empty map...
 //                mindmap = mindplot.model.Mindmap.buildEmpty(mapId);
 //            }
             designer.loadMap(mindmap);
@@ -121,7 +121,7 @@
                 <div id="fontItalic" class="buttonOn" title="Italic Style">
                     <img src="images/font-italic.png"/>
                 </div>
-                <div id="fontColor" class="buttonExtOn" title="Fond Color" style="padding-top:4px">
+                <div id="fontColor" class="buttonExtOn" title="Font Color" style="padding-top:4px">
                     <img src="images/font-color.png"/>
                 </div>
             </div>
@@ -133,6 +133,26 @@
     </div>
 </div>
 
+<!--
+<div style="position: absolute;align:left;background: gray;width: 100px;height: 300px;z-index: 100" id="dragPanel">
+    <div id="dragIcon" style="">
+        <img src="images/logo-small.png"/>
+    </div>
+</div>
+
+<script type="text/javascript">
+    $("dragIcon").addEvent('mousedown', function(event) {
+        event.preventDefault();
+
+        var options = {imageUrl:"images/logo-small.png",
+            imageWidth:80,
+            imageHeight:43,
+            metadata: "{'media':'video,'url':'http://www.youtube.com/watch?v=P3FrXftyuzw&feature=g-vrec&context=G2b4ab69RVAAAAAAAAAA'}"
+        };
+        designer.addDraddedNode(event, options);
+    });
+</script>
+-->
 <div id="mindplot"></div>
 <script type="text/javascript" src="js/editor.js"></script>
 </body>

wise-editor/src/main/webapp/samples/welcome.xml

@@ -42,8 +42,5 @@
             <topic position="410,-97" order="2" text="Anyplace, Anytime" id="9"/>
             <topic position="386,-73" order="3" text="Free!!!" id="10"/>
         </topic>
-        <topic shape="image"
-               image="163,80:images/logo-medium.png"
-               prop="" order="9" position="-336,-100"/>
     </topic>
 </map>