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) {
@@ -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

@@ -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>