Add support for custom dialogs and extend drag support.

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();
+            mindplot.TopicEditor.configure(this.isReadOnly());
         },
 
         _registerEvents : function() {
@@ -72,6 +72,15 @@ mindplot.Designer = new Class({
             mindplot.DesignerKeyboard.register(this);
         },
 
+        addEvent: function(type, listener) {
+            if (type == "editnode") {
+                var editor = mindplot.TopicEditor.getInstance();
+                editor.addEvent(type, listener);
+            } else {
+                this.parent(type, listener);
+            }
+        },
+
         _registerMouseEvents : function() {
             var workspace = this._workspace;
             var screenManager = workspace.getScreenManager();
@@ -329,7 +338,7 @@ mindplot.Designer = new Class({
             // Create a new node ...
             var model = topic.getModel();
             var mindmap = model.getMindmap();
-            var childModel = mindmap.createNode(mindplot.model.INodeModel.MAIN_TOPIC_TYPE);
+            var childModel = mindmap.createNode();
 
             // Create a new node ...
             var layoutManager = this._eventBussDispatcher.getLayoutManager();
@@ -342,19 +351,9 @@ mindplot.Designer = new Class({
             return childModel;
         },
 
-        addDraggedNode: function(event, options) {
+        addDraggedNode: function(event, model) {
             $assert(event, "event can not be null");
-            $assert(options, "option can not be null");
+            $assert(model, "model 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);
@@ -402,7 +401,7 @@ mindplot.Designer = new Class({
                 // Create a new node ...
                 var model = topic.getModel();
                 var mindmap = model.getMindmap();
-                result = mindmap.createNode(mindplot.model.INodeModel.MAIN_TOPIC_TYPE);
+                result = mindmap.createNode();
 
                 // Create a new node ...
                 var order = topic.getOrder() + 1;
@@ -449,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);
 //            }

mindplot/src/main/javascript/TopicEditor.js

@@ -21,8 +21,8 @@ mindplot.TopicEditor = new Class({
     Static: {
         _instance: null,
 
-        configure: function(options) {
+        configure: function(readOnly) {
-            this._instance = new mindplot.TopicEditor();
+            this._instance = new mindplot.TopicEditor(readOnly);
         },
 
         getInstance : function() {
@@ -30,7 +30,8 @@ mindplot.TopicEditor = new Class({
         }
     },
 
-    initialize:function() {
+    initialize:function(readOnly) {
+        this._readOnly = readOnly;
         this._activeEditor = null;
         this._multilineEditor = new mindplot.MultilineTextEditor();
     },
@@ -51,11 +52,11 @@ mindplot.TopicEditor = new Class({
 
         // Open the new editor ...
         var model = topic.getModel();
-        if (model.getShapeType() != mindplot.model.TopicShape.IMAGE) {
+        if (model.getShapeType() != mindplot.model.TopicShape.IMAGE && !this._readOnly) {
             this._multilineEditor.show(topic, options ? options.text : null);
             this._activeEditor = this._multilineEditor;
         } else {
-            // To be implemented....
+            this.fireEvent("editnode", {model:model,readOnly:this._readOnly});
         }
     },
 

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

@@ -91,7 +91,7 @@ mindplot.model.Mindmap = new Class({
         },
 
         createNode : function(type, id) {
-            $assert(type, "node type can not be null");
+            type = !$defined(type) ? mindplot.model.INodeModel.MAIN_TOPIC_TYPE : type;
             return new mindplot.model.NodeModel(type, this, id);
         },
 

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

@@ -0,0 +1,214 @@
+<!DOCTYPE HTML>
+
+<html>
+<head>
+    <base href="../">
+    <title>WiseMapping - Editor </title>
+    <meta http-equiv="Content-type" content="text/html; char
+    set=UTF-8"/>
+
+    <!--[if lt IE 9]>
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <![endif]-->
+    <link rel="stylesheet/less" type="text/css" href="css/editor.less"/>
+
+    <script type='text/javascript' src='js/mootools-core.js'></script>
+    <script type='text/javascript' src='js/mootools-more.js'></script>
+    <script type='text/javascript' src='js/core.js'></script>
+    <script type='text/javascript' src='js/less.js'></script>
+
+    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
+    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
+
+    <script type="text/javascript">
+
+        var mapId = 'welcome';
+        $(document).addEvent('loadcomplete', function(resource) {
+            var options = loadDesignerOptions();
+            var designer = buildDesigner(options);
+
+            // Load map from XML file persisted on disk...
+            var persistence = mindplot.PersistenceManager.getInstance();
+            var mindmap = mindmap = persistence.load(mapId);
+            designer.loadMap(mindmap);
+        });
+
+
+        $(document).addEvent('loadcomplete', function(resource) {
+
+            $("dragImageNode").addEvent('mousedown', function(event) {
+                event.preventDefault();
+
+                // Create a image node ...
+                var mindmap = designer.getMindmap();
+                var node = mindmap.createNode();
+                node.setImageSize(80, 43);
+                node.setMetadata("{'media':'video,'url':'http://www.youtube.com/watch?v=P3FrXftyuzw&feature=g-vrec&context=G2b4ab69RVAAAAAAAAAA'}");
+                node.setImageUrl("images/logo-small.png");
+                node.setShapeType(mindplot.model.TopicShape.IMAGE);
+
+                designer.addDraggedNode(event, node);
+            });
+
+
+            $("dragTextNode").addEvent('mousedown', function(event) {
+                event.preventDefault();
+
+                // Create a image node ...
+                var mindmap = designer.getMindmap();
+                var node = mindmap.createNode();
+                node.setText("Node Text !!!!");
+                node.setMetadata("{'media':'test'}");
+                node.setShapeType(mindplot.model.TopicShape.RECTANGLE);
+
+                // Add link ...
+                var link = node.createFeature(mindplot.TopicFeature.Link.id, {url:"http://www.wisemapping.com"});
+                node.addFeature(link);
+
+                // Add Note ...
+                var note = node.createFeature(mindplot.TopicFeature.Note.id, {text:"This is a note"});
+                node.addFeature(note);
+
+
+                designer.addDraggedNode(event, node);
+            });
+
+            designer.addEvent("editnode", function(event) {
+                var node = event.model;
+
+                alert("Node Id:" + node.getId());
+                alert("Node Metadata:" + node.getMetadata());
+                alert("Is Read Only:" + event.readOnly);
+            });
+        });
+    </script>
+    <style>
+        #dragPanel {
+            border: 2px black solid;
+            position: absolute;
+            background: gray;
+            width: 100px;
+            height: 300px;
+            z-index: 100;
+            padding: 5px;
+            border-radius: 15px;
+            top: 150px;
+            left: 10px;
+            text-align: center;
+        }
+
+        #dragPanel .textNode {
+            background-color: #E0E5EF;
+            height: 20px;
+            width: 80px;
+            border: 3px #023BB9 solid;
+            padding: 4px;
+            cursor: move
+        }
+
+    </style>
+</head>
+<body>
+
+<div id="header">
+
+    <div id="headerInfo">
+        <div id="headerActions"></div>
+        <div id="headerLogo"></div>
+        <div id="headerMapTitle">Title: <span>Welcome</span></div>
+    </div>
+    <div id="toolbar">
+        <div id="editTab" class="tabContent">
+            <div id="persist" class="buttonContainer">
+                <div id="save" class="buttonOn" title="Save">
+                    <img src="images/save.png"/>
+                </div>
+                <div id="discard" class="buttonOn" title="Discard">
+                    <img src="images/discard.png"/>
+                </div>
+                <div id="export" class="buttonOn" title="Export">
+                    <img src="images/export.png"/>
+                </div>
+            </div>
+            <div id="edit" class="buttonContainer">
+                <div id="undoEdition" class="buttonOn" title="Undo Edition">
+                    <img src="images/undo.png"/>
+                </div>
+                <div id="redoEdition" class="buttonOn" title="Redo Edition">
+                    <img src="images/redo.png"/>
+                </div>
+            </div>
+            <div id="zoom" class="buttonContainer">
+                <div id="zoomIn" class="buttonOn" title="Zoom In">
+                    <img src="images/zoom-in.png"/>
+                </div>
+                <div id="zoomOut" class="buttonOn" title="Zoom Out">
+                    <img src="images/zoom-out.png"/>
+                </div>
+            </div>
+            <div id="node" class="buttonContainer">
+                <div id="topicShape" class="buttonExtOn" title="Topic Shape">
+                    <img src="images/topic-shape.png"/>
+                </div>
+                <div id="addTopic" class="buttonOn" title="Add Topic">
+                    <img src="images/topic-add.png"/>
+                </div>
+                <div id="deleteTopic" class="buttonOn" title="Delete">
+                    <img src="images/topic-delete.png"/>
+                </div>
+                <div id="topicBorder" class="buttonExtOn" title="Border Color">
+                    <img src="images/topic-border.png"/>
+                </div>
+                <div id="topicColor" class="buttonExtOn" title="Background Color">
+                    <img src="images/topic-color.png"/>
+                </div>
+                <div id="topicIcon" class="buttonExtOn" title="Add Icon">
+                    <img src="images/topic-icon.png"/>
+                </div>
+                <div id="topicNote" class="buttonOn" title="Add Note">
+                    <img src="images/topic-note.png"/>
+                </div>
+                <div id="topicLink" class="buttonOn" title="Add Link">
+                    <img src="images/topic-link.png"/>
+                </div>
+                <div id="topicRelation" class="buttonOn" title="Add Relationship">
+                    <img src="images/topic-relation.png"/>
+                </div>
+            </div>
+            <div id="font" class="buttonContainer">
+                <div id="fontFamily" class="buttonExtOn" title="Font Style">
+                    <img src="images/font-type.png"/>
+                </div>
+                <div id="fontSize" class="buttonExtOn" title="Font Size">
+                    <img src="images/font-size.png"/>
+                </div>
+                <div id="fontBold" class="buttonOn" title="Bold Style">
+                    <img src="images/font-bold.png"/>
+                </div>
+                <div id="fontItalic" class="buttonOn" title="Italic Style">
+                    <img src="images/font-italic.png"/>
+                </div>
+                <div id="fontColor" class="buttonExtOn" title="Font Color" style="padding-top:4px">
+                    <img src="images/font-color.png"/>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="headerNotifier"></div>
+    <div id="footer">
+        <div id="footerLogo"></div>
+    </div>
+</div>
+
+<div id="dragPanel">
+    <div id="dragImageNode" style="cursor: move">
+        <img src="images/logo-small.png"/>
+    </div>
+    <div id="dragTextNode" class="textNode">Text Node !!</div>
+
+</div>
+
+<div id="mindplot"></div>
+<script type="text/javascript" src="js/editor.js"></script>
+</body>
+</html>

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

@@ -127,25 +127,6 @@
     </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.addDraggedNode(event, options);-->
-<!--});-->
-<!--</script>-->
-
 <div id="mindplot"></div>
 <script type="text/javascript" src="js/editor.js"></script>
 </body>

wise-webapp/src/main/java/com/wisemapping/rest/MindmapController.java

@@ -7,7 +7,6 @@ import com.wisemapping.model.MindmapUser;
 import com.wisemapping.model.User;
 import com.wisemapping.rest.model.RestMindmap;
 import com.wisemapping.rest.model.RestMindmapList;
-import com.wisemapping.rest.model.RestUser;
 import com.wisemapping.security.Utils;
 import com.wisemapping.service.MindmapService;
 import org.jetbrains.annotations.NotNull;
@@ -21,9 +20,20 @@ import javax.servlet.http.HttpServletResponse;
 import java.io.IOException;
 import java.util.ArrayList;
 import java.util.Calendar;
-import java.util.Date;
 import java.util.List;
 
+
+/**
+ * Pendings:
+ *  Change map title
+ *  List with filter
+ *  Clone
+ *  Delete map
+ *  Discard Changed
+ *  Public ?
+ *  Admin operations for get/update
+ *  Check visibility
+ */
 @Controller
 public class MindmapController extends BaseController {
     @Autowired
@@ -92,7 +102,6 @@ public class MindmapController extends BaseController {
         updateMindmap(minor, mindMap, user);
     }
 
-
     private void updateMindmap(boolean minor, MindMap mindMap, User user) throws WiseMappingException {
         final Calendar now = Calendar.getInstance();
         mindMap.setLastModificationTime(now);

wise-webapp/src/main/webapp/WEB-INF/classes/log4j.properties

@@ -1,6 +1,6 @@
 log4j.rootLogger=WARN, stdout, R
 log4j.logger.com.wisemapping=WARN,stdout,R
-log4j.logger.org.springframework=WARN,stdout,R
+log4j.logger.org.springframework=DEBUG,stdout,R
 log4j.logger.org.codehaus.jackson=WARN,stdout,R
 
 # Stdout logger <20>