From a1f654226495c6f4bdb560a239b1898cefeae780 Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Wed, 7 Mar 2012 17:40:10 -0300 Subject: [PATCH] First steps on icon drag support. --- mindplot/src/main/javascript/Designer.js | 85 ++++++++++++------- .../src/main/javascript/model/INodeModel.js | 9 ++ .../persistence/XMLSerializer_Pela.js | 10 +++ web2d/src/main/javascript/Element.js | 4 + .../main/javascript/peer/svg/ElementPeer.js | 4 + wise-editor/src/main/webapp/html/editor.html | 26 +++++- .../src/main/webapp/samples/welcome.xml | 3 - 7 files changed, 105 insertions(+), 36 deletions(-) diff --git a/mindplot/src/main/javascript/Designer.js b/mindplot/src/main/javascript/Designer.js index 8f9e92c4..b297f029 100644 --- a/mindplot/src/main/javascript/Designer.js +++ b/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 ... - 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); // } @@ -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); diff --git a/mindplot/src/main/javascript/model/INodeModel.js b/mindplot/src/main/javascript/model/INodeModel.js index 8ee1d1ce..75b46df7 100644 --- a/mindplot/src/main/javascript/model/INodeModel.js +++ b/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'); }, diff --git a/mindplot/src/main/javascript/persistence/XMLSerializer_Pela.js b/mindplot/src/main/javascript/persistence/XMLSerializer_Pela.js index 77e6cec1..88aa892e 100644 --- a/mindplot/src/main/javascript/persistence/XMLSerializer_Pela.js +++ b/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++) { diff --git a/web2d/src/main/javascript/Element.js b/web2d/src/main/javascript/Element.js index 23488a33..3a01de69 100644 --- a/web2d/src/main/javascript/Element.js +++ b/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); }, diff --git a/web2d/src/main/javascript/peer/svg/ElementPeer.js b/web2d/src/main/javascript/peer/svg/ElementPeer.js index a380f36c..4181a27b 100644 --- a/web2d/src/main/javascript/peer/svg/ElementPeer.js +++ b/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); }, diff --git a/wise-editor/src/main/webapp/html/editor.html b/wise-editor/src/main/webapp/html/editor.html index f3361e8d..5e12d4c5 100644 --- a/wise-editor/src/main/webapp/html/editor.html +++ b/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 @@
-
+
@@ -133,6 +133,26 @@ +
diff --git a/wise-editor/src/main/webapp/samples/welcome.xml b/wise-editor/src/main/webapp/samples/welcome.xml index a3ea13e9..c26ee3fb 100644 --- a/wise-editor/src/main/webapp/samples/welcome.xml +++ b/wise-editor/src/main/webapp/samples/welcome.xml @@ -42,8 +42,5 @@ - \ No newline at end of file