Implements toolbar disabling.

core-js/src/main/javascript/Monitor.js

@@ -47,10 +47,6 @@ core.Monitor = new Class({
         console.log(userMsg);
     },
 
-    logFatal : function(userMsg) {
-        this.logMessage(userMsg, core.Monitor.MsgKind.FATAL);
-    },
-
     logMessage : function(msg, msgKind) {
         if (!msgKind) {
             msgKind = core.Monitor.MsgKind.INFO;

mindplot/pom.xml

@@ -70,7 +70,7 @@
                                     <filelist dir="${basedir}/src/main/javascript/"
                                               files="StandaloneActionDispatcher.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/" files="DesignerModel.js"/>
-                                    <filelist dir="${basedir}/src/main/javascript/" files="MindmapDesigner.js"/>
+                                    <filelist dir="${basedir}/src/main/javascript/" files="Designer.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/" files="ScreenManager.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/" files="Workspace.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/" files="ShrinkConnector.js"/>
@@ -184,11 +184,9 @@
                                               files="collaboration/framework/brix/BrixCollaborativeModelFactory.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/"
                                               files="collaboration/framework/brix/BrixFramework.js"/>
-
                                     <filelist dir="${basedir}/src/main/javascript/widget/" files="ToolbarItem.js"/>
-
+                                    <filelist dir="${basedir}/src/main/javascript/widget/" files="ToolbarPaneItem.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/widget/" files="NoteEditor.js"/>
-
                                     <filelist dir="${basedir}/src/main/javascript/"
                                               files="widget/ColorPickerPanel.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/"

mindplot/src/main/javascript/Designer.js

@@ -16,7 +16,7 @@
  *   limitations under the License.
  */
 
-mindplot.MindmapDesigner = new Class({
+mindplot.Designer = new Class({
         Extends: Events,
         initialize: function(profile, divElement) {
             $assert(profile, "profile must be defined");
@@ -170,6 +170,24 @@ mindplot.MindmapDesigner = new Class({
                 topic.connectTo(targetTopic, workspace);
             }
 
+            topic.addEvent('ontblur', function() {
+                var topics = this.getModel().filterSelectedTopics();
+                var rels = this.getModel().filterSelectedRelations();
+
+                if (topics.length == 0 || rels.length == 0) {
+                    this.fireEvent('onblur');
+                }
+            }.bind(this));
+
+            topic.addEvent('ontfocus', function() {
+                var topics = this.getModel().filterSelectedTopics();
+                var rels = this.getModel().filterSelectedRelations();
+
+                if (topics.length == 1 || rels.length == 1) {
+                    this.fireEvent('onfocus');
+                }
+            }.bind(this));
+
             return  topic;
         },
 

mindplot/src/main/javascript/DesignerModel.js

@@ -17,6 +17,7 @@
  */
 
 mindplot.DesignerModel = new Class({
+    Implements: [Events],
     initialize : function(options) {
         this._zoom = options.zoom;
         this._topics = [];
@@ -79,27 +80,23 @@ mindplot.DesignerModel = new Class({
         this._topics.push(topic);
     },
 
-
     filterTopicsIds : function(validate, errorMsg) {
         var result = [];
         var topics = this.filterSelectedTopics();
 
-        if (topics.length == 0) {
-            core.Monitor.getInstance().logMessage('At least one element must be selected to execute this operation.');
-        } else {
-            var isValid = true;
-            for (var i = 0; i < topics.length; i++) {
-                var selectedNode = topics[i];
-                if ($defined(validate)) {
-                    isValid = validate(selectedNode);
-                }
 
-                // Add node only if it's valid.
+        var isValid = true;
-                if (isValid) {
+        for (var i = 0; i < topics.length; i++) {
-                    result.push(selectedNode.getId());
+            var selectedNode = topics[i];
-                } else {
+            if ($defined(validate)) {
-                    core.Monitor.getInstance().logMessage(errorMsg);
+                isValid = validate(selectedNode);
-                }
+            }
+
+            // Add node only if it's valid.
+            if (isValid) {
+                result.push(selectedNode.getId());
+            } else {
+                core.Monitor.getInstance().logMessage(errorMsg);
             }
         }
         return result;
@@ -108,22 +105,19 @@ mindplot.DesignerModel = new Class({
     filterRelationIds : function(validate, errorMsg) {
         var result = [];
         var relationships = this.filterSelectedRelations();
-        if (relationships.length == 0) {
-            core.Monitor.getInstance().logMessage('At least one element must be selected to execute this operation.');
-        } else {
-            var isValid = true;
-            for (var j = 0; j < relationships.length; j++) {
-                var selectedLine = relationships[j];
-                isValid = true;
-                if ($defined(validate)) {
-                    isValid = validate(selectedLine);
-                }
 
-                if (isValid) {
+        var isValid = true;
-                    result.push(selectedLine.getId());
+        for (var j = 0; j < relationships.length; j++) {
-                } else {
+            var selectedLine = relationships[j];
-                    core.Monitor.getInstance().logMessage(errorMsg);
+            isValid = true;
-                }
+            if ($defined(validate)) {
+                isValid = validate(selectedLine);
+            }
+
+            if (isValid) {
+                result.push(selectedLine.getId());
+            } else {
+                core.Monitor.getInstance().logMessage(errorMsg);
             }
         }
         return result;

mindplot/src/main/javascript/IconGroup.js

@@ -157,7 +157,7 @@ mindplot.IconGroup.ICON_PADDING = 5;
 mindplot.IconGroup.RemoveTip = new Class({
     initialize : function(container) {
         $assert(container, "group can not be null");
-        this._container = container;
+        this._fadeElem = container;
     },
 
 
@@ -189,7 +189,7 @@ mindplot.IconGroup.RemoveTip = new Class({
             }.bind(this));
 
             widget.setPosition(pos.x + 80, pos.y - 50);
-            this._container.appendChild(widget);
+            this._fadeElem.appendChild(widget);
 
             // Setup current element ...
             this._activeIcon = icon;
@@ -217,7 +217,7 @@ mindplot.IconGroup.RemoveTip = new Class({
             var close = function() {
 
                 this._activeIcon = null;
-                this._container.removeChild(widget);
+                this._fadeElem.removeChild(widget);
                 this._widget = null;
 
                 this._closeTimeoutId = null;

mindplot/src/main/javascript/NodeGraph.js

@@ -24,6 +24,7 @@ mindplot.NodeGraph = new Class({
         this._mouseEvents = true;
         this.setModel(nodeModel);
         this._onFocus = false;
+        this._event = new Events();
     },
 
     getType : function() {
@@ -52,10 +53,20 @@ mindplot.NodeGraph = new Class({
     },
 
     addEvent : function(type, listener) {
-        var elem = this.get2DElement();
+        var elem = type.substr(0, 3) == "ont" ? this._event : this.get2DElement();
         elem.addEvent(type, listener);
     },
 
+    removeEvent : function(type, listener) {
+        var elem = type.substr(0, 3) == "ont" ? this._event : this.get2DElement();
+        elem.removeEvent(type, listener);
+    },
+
+    fireEvent: function(type) {
+        var elem = type.substr(0, 3) == "ont" ? this._event : this.get2DElement();
+        elem.fireEvent(type);
+    },
+
     setMouseEventsEnabled : function(isEnabled) {
         this._mouseEvents = isEnabled;
     },
@@ -87,21 +98,28 @@ mindplot.NodeGraph = new Class({
     },
 
     setOnFocus : function(focus) {
-        this._onFocus = focus;
+        if (this._onFocus != focus) {
-        var outerShape = this.getOuterShape();
+
-        if (focus) {
+            this._onFocus = focus;
-            outerShape.setFill('#c7d8ff');
+            var outerShape = this.getOuterShape();
-            outerShape.setOpacity(1);
+            if (focus) {
+                outerShape.setFill('#c7d8ff');
+                outerShape.setOpacity(1);
+
+            } else {
+                // @todo: node must not know about the topic.
+                outerShape.setFill(mindplot.Topic.OUTER_SHAPE_ATTRIBUTES.fillColor);
+                outerShape.setOpacity(0);
+            }
+            this.setCursor('move');
+
+            // In any case, always try to hide the editor ...
+            this.closeEditors();
+
+            // Fire event ...
+            this.fireEvent(focus ? 'ontfocus' : 'ontblur');
 
-        } else {
-            // @todo: node must not know about the topic.
-            outerShape.setFill(mindplot.Topic.OUTER_SHAPE_ATTRIBUTES.fillColor);
-            outerShape.setOpacity(0);
         }
-        this.setCursor('move');
-
-        // In any case, always try to hide the editor ...
-        this.closeEditors();
     },
 
     isOnFocus : function() {

mindplot/src/main/javascript/Topic.js

@@ -929,35 +929,12 @@ mindplot.Topic = new Class({
         var model = this.getModel();
         var isConnected = model.isConnected();
 
-        // Check consitency...
+        // Check consistency...
         if ((isConnected && !line) || (!isConnected && line)) {
             // $assert(false,'Illegal state exception.');
         }
     },
 
-    /**
-     * type:
-     *    onfocus
-     */
-    addEvent : function(type, listener) {
-        // Translate to web 2d events ...
-        if (type == 'onfocus') {
-            type = 'mousedown';
-        }
-
-        var shape = this.get2DElement();
-        shape.addEvent(type, listener);
-    },
-
-    removeEvent : function(type, listener) {
-        // Translate to web 2d events ...
-        if (type == 'onfocus') {
-            type = 'mousedown';
-        }
-        var shape = this.get2DElement();
-        shape.removeEvent(type, listener);
-    },
-
 
     _setSize : function(size) {
         $assert(size, "size can not be null");

mindplot/src/main/javascript/widget/ColorPalettePanel.js

@@ -17,7 +17,7 @@
  */
 
 mindplot.widget.ColorPalettePanel = new Class({
-    Extends: mindplot.widget.ToolbarItem,
+    Extends: mindplot.widget.ToolbarPaneItem,
 
     initialize : function(buttonId, model, baseUrl) {
         this._baseUrl = baseUrl;

mindplot/src/main/javascript/widget/ColorPickerPanel.js

@@ -17,7 +17,7 @@
  */
 
 mindplot.widget.ColorPickerPanel = new Class({
-    Extends: mindplot.widget.ToolbarItem,
+    Extends: mindplot.widget.ToolbarPaneItem,
     initialize : function(buttonId, model) {
         this.parent(buttonId, model);
         this._mooRainbow = new MooRainbow(buttonId, {

mindplot/src/main/javascript/widget/IconPanel.js

@@ -17,7 +17,7 @@
  */
 
 mindplot.widget.IconPanel = new Class({
-    Extends: mindplot.widget.ToolbarItem,
+    Extends: mindplot.widget.ToolbarPaneItem,
     initialize : function(buttonId, model) {
         this.parent(buttonId, model);
     },

mindplot/src/main/javascript/widget/ListToolbarPanel.js

@@ -17,7 +17,7 @@
  */
 
 mindplot.widget.ListToolbarPanel = new Class({
-    Extends: mindplot.widget.ToolbarItem,
+    Extends: mindplot.widget.ToolbarPaneItem,
     initialize : function(buttonId, model) {
         this.parent(buttonId, model);
         this._initPanel();

mindplot/src/main/javascript/widget/Menu.js

@@ -26,6 +26,7 @@ mindplot.widget.Menu = new Class({
         this._designer = designer;
         this._toolbarElems = [];
         this._containerId = containerId;
+        this._toolbarDisabled = false;
 
         // Stop event propagation ...
         $(this._containerId).addEvent('click', function(event) {
@@ -179,83 +180,50 @@ mindplot.widget.Menu = new Class({
         };
         this._toolbarElems.push(new mindplot.widget.ColorPalettePanel('fontColor', fontColorModel, baseUrl));
 
-        // Register on close events ...
+        this.addButton('zoomIn', false, false, function() {
-        this._toolbarElems.forEach(function(elem) {
+            designer.zoomIn()
-            elem.addEvent('show', function() {
-                this.clear()
-            }.bind(this));
-        }.bind(this));
-
-
-        // Register Events ...
-        $('zoomIn').addEvent('click', function() {
-            this.clear();
-            designer.zoomIn();
-        }.bind(this));
-
-        $('zoomOut').addEvent('click', function() {
-            this.clear();
-            designer.zoomOut();
-        }.bind(this));
-
-        $('undoEdition').addEvent('click', function() {
-            this.clear();
-            designer.undo();
-        }.bind(this));
-
-        $('redoEdition').addEvent('click', function() {
-            this.clear();
-            designer.redo();
-        }.bind(this));
-
-        $('addTopic').addEvent('click', function() {
-            this.clear();
-            designer.createChildForSelectedNode();
-        }.bind(this));
-
-        $('deleteTopic').addEvent('click', function() {
-            this.clear();
-            designer.deleteCurrentNode();
-        }.bind(this));
-
-
-        $('topicLink').addEvent('click', function() {
-            this.clear();
-            designer.addLink();
-        }.bind(this));
-
-        $('topicRelation').addEvent('click', function(event) {
-            designer.addRelationShip(event);
         });
 
-        $('topicNote').addEvent('click', function() {
+        this.addButton('zoomOut', false, false, function() {
-            this.clear();
+            designer.zoomOut()
-            designer.addNote();
+        });
-        }.bind(this));
 
-        $('fontBold').addEvent('click', function() {
+        this.addButton('undoEdition', false, false, function() {
+            designer.undo()
+        });
+
+        this.addButton('redoEdition', false, false, function() {
+            designer.redo();
+        });
+
+        this.addButton('addTopic', true, false, function() {
+            designer.createChildForSelectedNode();
+        });
+
+        this.addButton('deleteTopic', true, true, function() {
+            designer.deleteCurrentNode();
+        });
+
+        this.addButton('topicLink', true, false, function() {
+            designer.addLink();
+        });
+
+        this.addButton('topicRelation', true, false, function() {
+            designer.addLink();
+        });
+
+        this.addButton('topicNote', true, false, function() {
+            designer.addNote();
+        });
+
+        this.addButton('fontBold', true, false, function() {
             designer.changeFontWeight();
         });
 
-        $('fontItalic').addEvent('click', function() {
+        this.addButton('fontItalic', true, false, function() {
             designer.changeFontStyle();
         });
 
-        designer.addEvent("modelUpdate", function(event) {
-            if (event.undoSteps > 0) {
-                $("undoEdition").setStyle("background-image", "url(../images/file_undo.png)");
-            } else {
-                $("undoEdition").setStyle("background-image", "url(../images/file_undo_dis.png)");
-            }
-
-            if (event.redoSteps > 0) {
-                $("redoEdition").setStyle("background-image", "url(../images/file_redo.png)");
-            } else {
-                $("redoEdition").setStyle("background-image", "url(../images/file_redo_dis.png)");
-            }
-
-        });
-
         var saveElem = $('saveButton');
         if (saveElem) {
             saveElem.addEvent('click', function() {
@@ -338,6 +306,71 @@ mindplot.widget.Menu = new Class({
 
         }
 
+        this._registerEvents(designer);
+    },
+
+    _registerEvents : function(designer) {
+
+        // Register on close events ...
+        this._toolbarElems.forEach(function(elem) {
+            elem.addEvent('show', function() {
+                this.clear()
+            }.bind(this));
+        }.bind(this));
+
+        designer.addEvent('onblur', function() {
+            var topics = designer.getModel().filterSelectedTopics();
+            var rels = designer.getModel().filterSelectedRelations();
+
+            this._toolbarElems.forEach(function(button) {
+                if (button.isTopicAction() && topics.length == 0) {
+                    button.disable();
+                }
+
+                if (button.isRelAction() && rels.length == 0) {
+                    button.disable();
+                }
+            })
+        }.bind(this));
+
+        designer.addEvent('onfocus', function() {
+            var topics = designer.getModel().filterSelectedTopics();
+            var rels = designer.getModel().filterSelectedRelations();
+
+            this._toolbarElems.forEach(function(button) {
+                if (button.isTopicAction() && topics.length > 0) {
+                    button.enable();
+                }
+
+                if (button.isRelAction() && rels.length > 0) {
+                    button.enable();
+                }
+            })
+        }.bind(this));
+
+        designer.addEvent("modelUpdate", function(event) {
+            if (event.undoSteps > 0) {
+                $("undoEdition").setStyle("background-image", "url(../images/file_undo.png)");
+            } else {
+                $("undoEdition").setStyle("background-image", "url(../images/file_undo_dis.png)");
+            }
+
+            if (event.redoSteps > 0) {
+                $("redoEdition").setStyle("background-image", "url(../images/file_redo.png)");
+            } else {
+                $("redoEdition").setStyle("background-image", "url(../images/file_redo_dis.png)");
+            }
+
+        });
+    },
+
+    addButton:function (buttonId, topic, rel, fn) {
+        // Register Events ...
+        var button = new mindplot.widget.ToolbarItem(buttonId, function(event) {
+            this.clear();
+            fn(event);
+        }.bind(this), {topicAction:topic,relAction:rel});
+        this._toolbarElems.push(button);
     },
 
     clear : function() {

mindplot/src/main/javascript/widget/Monitor.js

@@ -0,0 +1,50 @@
+/*
+ *    Copyright [2011] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+
+mindplot.widget.Monitor = new Class({
+    initialize : function(fadeElem, msgElem) {
+        $assert(fadeElem, "fadeElem can not be null");
+        $assert(msgElem, "msgElem can not be null");
+        this.msgQueue = [];
+
+        this._fadeElem = fadeElem;
+        this._msgElem = msgElem;
+    },
+
+    _showMsg : function(msg, msgKind) {
+        if (msgKind == core.Monitor.MsgKind.ERROR) {
+            msg = "<div id='small_error_icon'>" + msg + "</div>";
+        }
+        this._msgElem.innerHTML = msg;
+    },
+
+    logError : function(userMsg) {
+        this.logMessage(userMsg, core.Monitor.MsgKind.ERROR);
+    },
+
+    logMessage : function(msg, msgKind) {
+        console.log(userMsg);
+    }
+});
+
+core.Monitor.MsgKind = {
+    INFO:1,
+    WARNING:2,
+    ERROR:3,
+    FATAL:4
+};

mindplot/src/main/javascript/widget/NoteEditor.js

@@ -21,7 +21,42 @@ mindplot.widget.NoteEditor = new Class({
     initialize : function(model) {
         $assert(model, "model can not be null");
         var panel = this._buildPanel(model);
-        this.parent({closeButton:false,destroyOnClose:true,title:'Note'});
+        this.parent({
+            closeButton:false,
+            destroyOnClose:true,
+            title:'Note',
+            onInitialize: function(wrapper) {
+                wrapper.setStyle('opacity', 0);
+                this.fx = new Fx.Morph(wrapper, {
+                    duration: 600,
+                    transition: Fx.Transitions.Bounce.easeOut
+                });
+                this.overlay = new Overlay(this.options.inject, {
+                    duration: this.options.duration
+                });
+                if (this.options.closeOnOverlayClick) this.overlay.addEvent('click', this.close.bind(this));
+            },
+
+            onBeforeOpen: function() {
+                this.overlay.open();
+                this.fx.start({
+                    'margin-top': [-200, -100],
+                    opacity: [0, 1]
+                }).chain(function() {
+                    this.fireEvent('show');
+                }.bind(this));
+            },
+
+            onBeforeClose: function() {
+                this.fx.start({
+                    'margin-top': [-100, 0],
+                    opacity: 0
+                }).chain(function() {
+                    this.fireEvent('hide');
+                }.bind(this));
+                this.overlay.close();
+            }
+        });
         this.setContent(panel);
     },
 

mindplot/src/main/javascript/widget/ToolbarItem.js

@@ -18,39 +18,13 @@
 
 mindplot.widget.ToolbarItem = new Class({
     Implements:[Events],
-    initialize : function(buttonId, model) {
+    initialize : function(buttonId, fn, options) {
         $assert(buttonId, "buttonId can not be null");
-        $assert(model, "model can not be null");
+        $assert(fn, "fn can not be null");
-        this._model = model;
         this._buttonId = buttonId;
-        this._panelId = this._init().id;
+        this._fn = fn;
-    },
+        this._options = options;
 
-    _init:function () {
-        // Load the context of the panel ...
-        var panelElem = this.buildPanel();
-        var buttonElem = this.getButtonElem();
-
-        // Add panel content ..
-        panelElem.setStyle('display', 'none');
-        panelElem.inject(buttonElem);
-
-        // Add events for button click ...
-        this.getButtonElem().addEvent('click', function() {
-            // Is the panel being displayed ?
-            if (this.isVisible()) {
-                this.hide();
-            } else {
-                this.show();
-            }
-
-        }.bind(this));
-
-        return panelElem;
-   },
-
-    getModel : function() {
-        return this._model;
     },
 
     getButtonElem : function() {
@@ -59,32 +33,39 @@ mindplot.widget.ToolbarItem = new Class({
         return elem;
     }.protect(),
 
-    getPanelElem : function() {
-        return $(this._panelId);
-    }.protect(),
-
     show : function() {
-        if (!this.isVisible()) {
+        this.fireEvent('show');
-            this.fireEvent('show');
-            this.getButtonElem().className = 'buttonActive';
-            this.getPanelElem().setStyle('display', 'block');
-        }
     },
 
     hide : function() {
-        if (this.isVisible()) {
+        this.fireEvent('hide');
-            this.getButtonElem().className = 'button';
+    },
-            this.getPanelElem().setStyle('display', 'none');
+
-            this.fireEvent('hide');
+    isTopicAction : function() {
+        return this._options.topicAction;
+    },
+
+    isRelAction : function() {
+        return this._options.relAction;
+    },
+
+    disable : function() {
+        var elem = this.getButtonElem();
+        if (this._enable) {
+            elem.removeEvent('click', this._fn);
+            elem.removeClass('buttonOn');
+            elem.addClass('buttonOff');
+            this._enable = false;
         }
     },
 
-    isVisible : function() {
+    enable : function() {
-        return this.getPanelElem().getStyle('display') == 'block';
+        var elem = this.getButtonElem();
-    },
+        if (!this._enable) {
-
+            elem.addEvent('click', this._fn);
-    buildPanel : function() {
+            elem.removeClass('buttonOff');
-        throw "Method must be implemented";
+            elem.addClass('buttonOn');
-    }.protect()
+            this._enable = true;
-
+        }
+    }
 });

mindplot/src/main/javascript/widget/ToolbarPaneItem.js

@@ -0,0 +1,93 @@
+/*
+ *    Copyright [2011] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+
+mindplot.widget.ToolbarPaneItem = new Class({
+    Extends:mindplot.widget.ToolbarItem,
+    initialize : function(buttonId, model) {
+        $assert(buttonId, "buttonId can not be null");
+        $assert(model, "model can not be null");
+        var fn = function() {
+            // Is the panel being displayed ?
+            if (this.isVisible()) {
+                this.hide();
+            } else {
+                this.show();
+            }
+
+        }.bind(this);
+        this.parent(buttonId, fn, {topicAction:true,relAction:true});
+        this._model = model;
+        this._panelId = this._init().id;
+    },
+
+    _init:function () {
+        // Load the context of the panel ...
+        var panelElem = this.buildPanel();
+        var buttonElem = this.getButtonElem();
+
+        // Add panel content ..
+        panelElem.setStyle('display', 'none');
+        panelElem.inject(buttonElem);
+
+        return panelElem;
+    },
+
+    getModel : function() {
+        return this._model;
+    },
+
+    getButtonElem : function() {
+        var elem = $(this._buttonId);
+        $assert(elem, "Could not find element for " + this._buttonId);
+        return elem;
+    }.protect(),
+
+    getPanelElem : function() {
+        return $(this._panelId);
+    }.protect(),
+
+    show : function() {
+        if (!this.isVisible()) {
+            this.parent();
+            this.getButtonElem().className = 'buttonActive';
+            this.getPanelElem().setStyle('display', 'block');
+        }
+    },
+
+    hide : function() {
+        if (this.isVisible()) {
+            this.getButtonElem().className = 'buttonOn';
+            this.getPanelElem().setStyle('display', 'none');
+            this.parent();
+        }
+    },
+
+    isVisible : function() {
+        return this.getPanelElem().getStyle('display') == 'block';
+    },
+
+    disable: function() {
+        this.hide();
+        this.parent();
+    },
+
+    buildPanel : function() {
+        throw "Method must be implemented";
+    }.protect()
+
+});

mindplot/src/test/javascript/simpleTest.js

@@ -59,7 +59,7 @@ TestCase("Mindplot test",{
             editorProperties.width = screenWidth;
             editorProperties.height = screenHeight;
 
-            designer = new mindplot.MindmapDesigner(editorProperties, container);
+            designer = new mindplot.Designer(editorProperties, container);
             designer.loadFromXML(mapId, mapXml);
 
 

wise-doc/src/main/webapp/css/editor.css

@@ -1,7 +1,6 @@
 @import "common.css";
-/* @Todo: Fix this ...*/
+@import "/mindplot/src/main/javascript/widget/lightbox.css";
-@import "widget/lightbox.css";
+@import "/mindplot/src/main/javascript/libraries/moodialog/css/MooDialog.css";
-@import "libraries/moodialog/css/MooDialog.css";
 
 html {
     overflow: hidden;
@@ -159,50 +158,25 @@ div#toolbar .buttonContainer {
     -moz-margin-end: 7px;
 }
 
-div#toolbar .button {
+div#toolbar .buttonOn, div#toolbar .buttonOff, div#toolbar .buttonActive, div#toolbar .buttonOn:hover {
     width: 32px;
     height: 36px;
     float: left;
     margin: 0 2px 2px 2px;
-    cursor: pointer;
     text-align: center;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -o-user-select: none;
-    user-select: none;
 }
 
-div#toolbar .button:hover {
+div#toolbar .buttonOn:hover, div#toolbar .buttonActive {
-    width: 32px;
-    height: 36px;
-    float: left;
     margin: 0 1px;
     cursor: pointer;
     border: 1px solid black;
     border-top-color: white;
     border-left-color: white;
-    -webkit-user-select: none;
+    cursor: pointer;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -o-user-select: none;
-    user-select: none;
 }
 
-div#toolbar .buttonActive {
+div#toolbar .buttonOff {
-    width: 32px;
+    opacity: 0.4;
-    height: 36px;
-    float: left;
-    margin: 0 1px;
-    cursor: pointer;
-    border: 1px solid black;
-    border-top-color: white;
-    border-left-color: white;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -o-user-select: none;
-    user-select: none;
 }
 
 div#toolbar .button img {
@@ -302,6 +276,11 @@ div#topicNote {
     z-index: 4;
 }
 
+div#topicNote {
+    background: url(../images/topic_icon.png) no-repeat center top;
+    z-index: 4;
+}
+
 div#topicLink {
     background: url(../images/topic_link.png) no-repeat center top;
     z-index: 4;

wise-doc/src/main/webapp/css/widget/colorPalette.css

@@ -0,0 +1,74 @@
+.palette-panel {
+    /*background: white;*/
+    /*border-color: #CCC #666 #666 #CCC;*/
+    /*border-style: solid;*/
+    /*border-width: 1px;*/
+    cursor: default;
+    font: normal 13px Arial, sans-serif;
+    margin: 0;
+    outline: none;
+    padding: 4px 0;
+    z-index: 20000;
+    -webkit-user-select: none;
+}
+
+.palette {
+    cursor: default;
+    outline: none;
+}
+
+.palette-table {
+    border: 1px solid #666;
+    border-collapse: collapse;
+    margin: 5px;
+}
+
+tbody {
+    display: table-row-group;
+    vertical-align: middle;
+    border-color: inherit;
+}
+
+.palette-table {
+    border-collapse: collapse;
+}
+
+tr {
+    display: table-row;
+    vertical-align: inherit;
+    border-color: inherit;
+}
+
+.palette-cell {
+    border: 0;
+    border-right: 1px solid #666;
+    cursor: pointer;
+    height: 18px;
+    margin: 0;
+    text-align: center;
+    vertical-align: middle;
+    width: 18px;
+}
+
+.palette-cell .palette-colorswatch {
+    border: none;
+    font-size: x-small;
+    height: 18px;
+    position: relative;
+    width: 18px;
+}
+
+.palette-cell-selected .palette-colorswatch {
+    background: url(//ssl.gstatic.com/editor/editortoolbar.png) no-repeat -368px 0;
+    border: 1px solid #333;
+    color: white;
+    font-weight: bold;
+    height: 16px;
+    width: 16px;
+}
+
+.palette-colorswatch:hover {
+    border: 1px solid white;
+    height: 16px;
+    width: 16px;
+}

wise-doc/src/main/webapp/css/widget/colorPalette.html

@@ -0,0 +1,398 @@
+<div id="color-palette" class="palette-panel palette-panel-vertical palette-panel-noaccel"
+     style="-webkit-user-select: none; left: 451px; top: 128px; visibility: visible; " role="menu" aria-haspopup="true"
+     aria-activedescendant="">
+    <div class="palette" id=":3p">
+        <table class="palette-table" cellspacing="0" cellpadding="0" role="grid"
+               aria-activedescendent="palette-cell-244">
+            <tbody class="palette-body">
+            <tr class="palette-row">
+                <td class="palette-cell">
+                    <div class="palette-colorswatch"
+                         style="background-color: rgb(0, 0, 0);"
+                         title="RGB (0, 0, 0)"></div>
+                </td>
+                <td class="palette-cell palette-cell-selected">
+                    <div class="palette-colorswatch"
+                         style="background-color: rgb(68, 68, 68);"
+                         title="RGB (68, 68, 68)"></div>
+                </td>
+                <td class="palette-cell">
+                    <div class="palette-colorswatch"
+                         style="background-color: rgb(102, 102, 102);"
+                         title="RGB (102, 102, 102)"></div>
+                </td>
+                <td class="palette-cell">
+                    <div class="palette-colorswatch"
+                         style="background-color: rgb(153, 153, 153);"
+                         title="RGB (153, 153, 153)"></div>
+                </td>
+                <td class="palette-cell"
+                        >
+                    <div class="palette-colorswatch"
+                         style="background-color: rgb(204, 204, 204);"
+                         title="RGB (204, 204, 204)"></div>
+                </td>
+                <td class="palette-cell"
+                        >
+                    <div class="palette-colorswatch"
+                         style="background-color: rgb(238, 238, 238);"
+                         title="RGB (238, 238, 238)"></div>
+                </td>
+                <td class="palette-cell"
+                        >
+                    <div class="palette-colorswatch"
+                         style="background-color: rgb(243, 243, 243);"
+                         title="RGB (243, 243, 243)"></div>
+                </td>
+                <td class="palette-cell">
+                    <div class="palette-colorswatch"
+                         style="background-color: rgb(255, 255, 255);"
+                         title="RGB (255, 255, 255)"></div>
+                </td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+    <div class="palette" id=":3q">
+        <table class="palette-table" cellspacing="0" cellpadding="0" role="grid"
+                >
+            <tbody class="palette-body">
+            <tr class="palette-row">
+                <td class="palette-cell"
+                        >
+                    <div class="palette-colorswatch"
+                         style="background-color: rgb(255, 0, 0);"
+                         title="RGB (255, 0, 0)"></div>
+                </td>
+                <td class="palette-cell"
+                        >
+                    <div class="palette-colorswatch"
+                         style="background-color: rgb(255, 153, 0);"
+                         title="RGB (255, 153, 0)"></div>
+                </td>
+                <td class="palette-cell"
+                        >
+                    <div class="palette-colorswatch"
+                         style="background-color: rgb(255, 255, 0);"
+                         title="RGB (255, 255, 0)"></div>
+                </td>
+                <td class="palette-cell"
+                        >
+                    <div class="palette-colorswatch"
+                         style="background-color: rgb(0, 255, 0);"
+                         title="RGB (0, 255, 0)"></div>
+                </td>
+                <td class="palette-cell"
+                        >
+                    <div class="palette-colorswatch"
+                         style="background-color: rgb(0, 255, 255);"
+                         title="RGB (0, 255, 255)"></div>
+                </td>
+                <td class="palette-cell"
+                        >
+                    <div class="palette-colorswatch"
+                         style="background-color: rgb(0, 0, 255);"
+                         title="RGB (0, 0, 255)"></div>
+                </td>
+                <td class="palette-cell"
+                        >
+                    <div class="palette-colorswatch"
+                         style="background-color: rgb(153, 0, 255);"
+                         title="RGB (153, 0, 255)"></div>
+                </td>
+                <td class="palette-cell"
+                        >
+                    <div class="palette-colorswatch"
+                         style="background-color: rgb(255, 0, 255);"
+                         title="RGB (255, 0, 255)"></div>
+                </td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+    <div class="palette" id=":3r">
+    <table class="palette-table" cellspacing="0" cellpadding="0" role="grid">
+    <tbody class="palette-body">
+    <tr class="palette-row">
+        <td class="palette-cell">
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(244, 204, 204);"
+                 title="RGB (244, 204, 204)"></div>
+        </td>
+        <td class="palette-cell">
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(252, 229, 205);"
+                 title="RGB (252, 229, 205)"></div>
+        </td>
+        <td class="palette-cell">
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(255, 242, 204);"
+                 title="RGB (255, 242, 204)"></div>
+        </td>
+        <td class="palette-cell"
+                >
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(217, 234, 211);"
+                 title="RGB (217, 234, 211)"></div>
+        </td>
+        <td class="palette-cell"
+                >
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(208, 224, 227);"
+                 title="RGB (208, 224, 227)"></div>
+        </td>
+        <td class="palette-cell"
+                >
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(207, 226, 243);"
+                 title="RGB (207, 226, 243)"></div>
+        </td>
+        <td class="palette-cell"
+                >
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(217, 210, 233);"
+                 title="RGB (217, 210, 233)"></div>
+        </td>
+        <td class="palette-cell"
+                >
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(234, 209, 220);"
+                 title="RGB (234, 209, 220)"></div>
+        </td>
+    </tr>
+    <tr class="palette-row">
+        <td class="palette-cell">
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(234, 153, 153);"
+                 title="RGB (234, 153, 153)"></div>
+        </td>
+        <td class="palette-cell">
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(249, 203, 156);"
+                 title="RGB (249, 203, 156)"></div>
+        </td>
+        <td class="palette-cell">
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(255, 229, 153);"
+                 title="RGB (255, 229, 153)"></div>
+        </td>
+        <td class="palette-cell">
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(182, 215, 168);"
+                 title="RGB (182, 215, 168)"></div>
+        </td>
+        <td class="palette-cell">
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(162, 196, 201);"
+                 title="RGB (162, 196, 201)"></div>
+        </td>
+        <td class="palette-cell">
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(159, 197, 232);"
+                 title="RGB (159, 197, 232)"></div>
+        </td>
+        <td class="palette-cell">
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(180, 167, 214);"
+                 title="RGB (180, 167, 214)"></div>
+        </td>
+        <td class="palette-cell">
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(213, 166, 189);"
+                 title="RGB (213, 166, 189)"></div>
+        </td>
+    </tr>
+    <tr class="palette-row">
+        <td class="palette-cell">
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(224, 102, 102);"
+                 title="RGB (224, 102, 102)"></div>
+        </td>
+        <td class="palette-cell">
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(246, 178, 107);"
+                 title="RGB (246, 178, 107)"></div>
+        </td>
+        <td class="palette-cell">
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(255, 217, 102);"
+                 title="RGB (255, 217, 102)"></div>
+        </td>
+        <td class="palette-cell">
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(147, 196, 125);"
+                 title="RGB (147, 196, 125)"></div>
+        </td>
+        <td class="palette-cell">
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(118, 165, 175);"
+                 title="RGB (118, 165, 175)"></div>
+        </td>
+        <td class="palette-cell">
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(111, 168, 220);"
+                 title="RGB (111, 168, 220)"></div>
+        </td>
+        <td class="palette-cell">
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(142, 124, 195);"
+                 title="RGB (142, 124, 195)"></div>
+        </td>
+        <td class="palette-cell">
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(194, 123, 160);"
+                 title="RGB (194, 123, 160)"></div>
+        </td>
+    </tr>
+    <tr class="palette-row">
+        <td class="palette-cell"
+                >
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(204, 0, 0);"
+                 title="RGB (204, 0, 0)"></div>
+        </td>
+        <td class="palette-cell"
+                >
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(230, 145, 56);"
+                 title="RGB (230, 145, 56)"></div>
+        </td>
+        <td class="palette-cell"
+                >
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(241, 194, 50);"
+                 title="RGB (241, 194, 50)"></div>
+        </td>
+        <td class="palette-cell"
+                >
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(106, 168, 79);"
+                 title="RGB (106, 168, 79)"></div>
+        </td>
+        <td class="palette-cell"
+                >
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(69, 129, 142);"
+                 title="RGB (69, 129, 142)"></div>
+        </td>
+        <td class="palette-cell"
+                >
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(61, 133, 198);"
+                 title="RGB (61, 133, 198)"></div>
+        </td>
+        <td class="palette-cell"
+                >
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(103, 78, 167);"
+                 title="RGB (103, 78, 167)"></div>
+        </td>
+        <td class="palette-cell"
+                >
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(166, 77, 121);"
+                 title="RGB (166, 77, 121)"></div>
+        </td>
+    </tr>
+    <tr class="palette-row">
+        <td class="palette-cell"
+                >
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(153, 0, 0);"
+                 title="RGB (153, 0, 0)"></div>
+        </td>
+        <td class="palette-cell"
+                >
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(180, 95, 6);"
+                 title="RGB (180, 95, 6)"></div>
+        </td>
+        <td class="palette-cell"
+                >
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(191, 144, 0);"
+                 title="RGB (191, 144, 0)"></div>
+        </td>
+        <td class="palette-cell"
+                >
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(56, 118, 29);"
+                 title="RGB (56, 118, 29)"></div>
+        </td>
+        <td class="palette-cell"
+                >
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(19, 79, 92);"
+                 title="RGB (19, 79, 92)"></div>
+        </td>
+        <td class="palette-cell"
+                >
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(11, 83, 148);"
+                 title="RGB (11, 83, 148)"></div>
+        </td>
+        <td class="palette-cell"
+                >
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(53, 28, 117)"
+                 title="RGB (53, 28, 117)"></div>
+        </td>
+        <td class="palette-cell"
+                >
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(116, 27, 71);"
+                 title="RGB (116, 27, 71)"></div>
+        </td>
+    </tr>
+    <tr class="palette-row">
+        <td class="palette-cell">
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(102, 0, 0);"
+                 title="RGB (102, 0, 0)"></div>
+        </td>
+        <td class="palette-cell">
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(120, 63, 4);"
+                 title="RGB (120, 63, 4)"></div>
+        </td>
+        <td class="palette-cell"
+                >
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(127, 96, 0);"
+                 title="RGB (127, 96, 0)"></div>
+        </td>
+        <td class="palette-cell"
+                >
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(39, 78, 19);"
+                 title="RGB (39, 78, 19)"></div>
+        </td>
+        <td class="palette-cell"
+                >
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(12, 52, 61);"
+                 title="RGB (12, 52, 61)"></div>
+        </td>
+        <td class="palette-cell"
+                >
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(7, 55, 99);"
+                 title="RGB (7, 55, 99)"></div>
+        </td>
+        <td class="palette-cell"
+                >
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(32, 18, 77);"
+                 title="RGB (32, 18, 77)"></div>
+        </td>
+        <td class="palette-cell"
+                >
+            <div class="palette-colorswatch"
+                 style="background-color: rgb(76, 17, 48);"
+                 title="RGB (76, 17, 48)"></div>
+        </td>
+    </tr>
+    </tbody>
+    </table>
+    </div>
+</div>

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

@@ -2,21 +2,21 @@
 
 <html>
 <head>
+    <title>WiseMapping - Editor </title>
+    <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
     <!--[if lt IE 9]>
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <![endif]-->
-    <script type="text/javascript" src="http://docs.google.com/brix/static/api/js/jsapi.nocache.js"></script>
+    <!--<script type="text/javascript" src="http://docs.google.com/brix/static/api/js/jsapi.nocache.js"></script>-->
-    <!-- Internet Explorer 8 Hack -->
+
-    <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
-    <title>WiseMapping - Editor </title>
     <link rel="stylesheet" type="text/css" href="../css/editor.css"/>
     <link rel="stylesheet" type="text/css" href='/mindplot/src/main/javascript/libraries/moodialog/css/MooDialog.css'/>
-    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js'></script>
-    <script type='text/javascript' src='../js/mootools-more-1.3.2.1-yui.js'></script>
 
+    <script type='text/javascript'
+            src='https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js'></script>
+    <script type='text/javascript'
+            src='/mindplot/src/main/javascript/libraries/mootools/mootools-more-1.3.2.1-yui.js'></script>
     <script type='text/javascript' src='/core-js/target/classes/core.js'></script>
-    <!--<script type='text/javascript' src='js/core-min.js'></script>-->
-
     <script type="text/javascript">
 
         //Google-Brix framework load callback function
@@ -24,15 +24,17 @@
             $(document).fireEvent('loadcomplete', 'brix');
         };
 
+        var mapId = '10'; // @todo: Must be changed ...
         var brixReady = false;
         var mindReady = false;
-        var local = false;
+        var collab = 'standalone';
+        //       var collab = 'brix';
         $(document).addEvent('loadcomplete', function(resource) {
             brixReady = resource == 'brix' ? true : brixReady;
             mindReady = resource == 'mind' ? true : mindReady;
 
             if (mindReady) {
-                designer = buildDesigner();
+                designer = buildDesigner(collab);
             }
 
             // If both resources has been loaded, start loading the framework...
@@ -49,13 +51,12 @@
                     }
                 });
 
-            } else if (local && mindReady) {
+            } else if (collab == 'standalone' && mindReady) {
                 // Load map from XML ...
                 var mapXml = '<map name="38298" version="pela"><topic central="true" text="test\nThis is working ?" id="1"/></map>';
                 var domDocument = core.Utils.createDocumentFromText(mapXml);
                 var serializer = mindplot.XMLMindmapSerializerFactory.getSerializerFromDocument(domDocument);
-                var mindmap = serializer.loadFromDom(domDocument);
+                var mindmap = serializer.loadFromDom(domDocument, mapId);
-                mindmap.setId('1');
 
                 // Now, load the map ...
                 designer.loadMap(mindmap);
@@ -116,12 +117,12 @@
     <div id="editTab" class="tabContent">
         <div id="file" class="buttonContainer" title="SYMB_ FILE">
             <fieldset>
-                <div id="undoEdition" class="button" title="Undo Edition">
+                <div id="undoEdition" class="buttonOn" title="Undo Edition">
                     <div class="toolbarLabel">
                         <p>Undo</p>
                     </div>
                 </div>
-                <div id="redoEdition" class="button" title="Redo Edition">
+                <div id="redoEdition" class="buttonOn" title="Redo Edition">
                     <div class="toolbarLabel">
                         <p>Redo</p>
                     </div>
@@ -130,12 +131,12 @@
         </div>
         <div id="zoom" class="buttonContainer" title="Zoom">
             <fieldset>
-                <div id="zoomIn" class="button" title="Zoom In">
+                <div id="zoomIn" class="buttonOn" title="Zoom In">
                     <div class="toolbarLabel">
                         <p>In</p>
                     </div>
                 </div>
-                <div id="zoomOut" class="button" title="Zoom Out">
+                <div id="zoomOut" class="buttonOn" title="Zoom Out">
                     <div class="toolbarLabel">
                         <p>Out</p>
                     </div>
@@ -144,42 +145,42 @@
         </div>
         <div id="node" class="buttonContainer" title="Node Properties">
             <fieldset>
-                <div id="topicShape" class="button comboButton" title="SYMB_TOPIC_SHAPE">
+                <div id="topicShape" class="buttonOn comboButton" title="SYMB_TOPIC_SHAPE">
                     <div class="toolbarLabel">
                         <p>Shape</p>
                     </div>
                 </div>
-                <div id="addTopic" class="button" title="SYMB_ TOPIC_ADD">
+                <div id="addTopic" class="buttonOn" title="SYMB_ TOPIC_ADD">
                     <div class="toolbarLabel">
                         <p>Add</p>
                     </div>
                 </div>
-                <div id="deleteTopic" class="button" title="SYMB_ TOPIC_DELETE">
+                <div id="deleteTopic" class="buttonOn" title="SYMB_ TOPIC_DELETE">
                     <div class="toolbarLabel">
                         <p>Delete</p>
                     </div>
                 </div>
-                <div id="topicBorder" class="button" title="SYMB_ TOPIC_BORDER_COLOR">
+                <div id="topicBorder" class="buttonOn" title="SYMB_ TOPIC_BORDER_COLOR">
                     <div class="toolbarLabel">
                         <p>Border</p>
                     </div>
                 </div>
-                <div id="topicColor" class="button" title="Background Color">
+                <div id="topicColor" class="buttonOn" title="Background Color">
                     <div class="toolbarLabel">
                         <p>Color</p>
                     </div>
                 </div>
-                <div id="topicIcon" class="button" title="Change Icon">
+                <div id="topicIcon" class="buttonOn" title="Change Icon">
                     <div class="toolbarLabel">
                         <p>Icon</p>
                     </div>
                 </div>
-                <div id="topicNote" class="button" title="Add Note">
+                <div id="topicNote" class="buttonOn" title="Add Note">
                     <div class="toolbarLabel">
                         <p>Note</p>
                     </div>
                 </div>
-                <div id="topicLink" class="button" title="Add Link">
+                <div id="topicLink" class="buttonOn" title="Add Link">
                     <div class="toolbarLabel">
                         <p>Link</p>
                     </div>
@@ -193,27 +194,27 @@
         </div>
         <div id="font" class="buttonContainer" title="Font Properties">
             <fieldset>
-                <div id="fontFamily" class="button comboButton" title="Font Style">
+                <div id="fontFamily" class="buttonOn comboButton" title="Font Style">
                     <div class="toolbarLabel">
                         <p>Style</p>
                     </div>
                 </div>
-                <div id="fontSize" class="button comboButton" title="Font Size">
+                <div id="fontSize" class="buttonOn comboButton" title="Font Size">
                     <div class="toolbarLabel">
                         <p>Size</p>
                     </div>
                 </div>
-                <div id="fontBold" class="button" title="Bold Style">
+                <div id="fontBold" class="buttonOn" title="Bold Style">
                     <div class="toolbarLabel">
                         <p>Bold</p>
                     </div>
                 </div>
-                <div id="fontItalic" class="button" title="Italic Style">
+                <div id="fontItalic" class="buttonOn" title="Italic Style">
                     <div class="toolbarLabel">
                         <p>Italic</p>
                     </div>
                 </div>
-                <div id="fontColor" class="button comboButton" title="Fond Color">
+                <div id="fontColor" class="buttonOn comboButton" title="Fond Color">
                     <div class="toolbarLabel">
                         <p>Color</p>
                     </div>

wise-doc/src/main/webapp/js/editor.js

@@ -158,8 +158,8 @@ function buildDesigner() {
         width:  parseInt(screen.width)
     });
 
-    var editorProperties = {zoom:0.85,saveOnLoad:true};
+    var editorProperties = {zoom:0.85,saveOnLoad:true,collab:collab};
-    designer = new mindplot.MindmapDesigner(editorProperties, container);
+    designer = new mindplot.Designer(editorProperties, container);
     designer.setViewPort({
         height: parseInt(window.innerHeight - 112), // Footer and Header
         width:  parseInt(window.innerWidth)
@@ -171,7 +171,6 @@ function buildDesigner() {
     designer._cleanScreen = function() {
         menu.clear()
     };
-
     return designer;
 }
 

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

@@ -225,7 +225,7 @@ function buildDesigner(editorProperties, isTryMode) {
         width:  parseInt(screen.width)
     });
 
-    designer = new mindplot.MindmapDesigner(editorProperties, container);
+    designer = new mindplot.Designer(editorProperties, container);
     designer.setViewPort({
         height: parseInt(window.innerHeight - 151), // Footer and Header
         width:  parseInt(window.innerWidth)

wise-webapp/src/main/webapp/js/embedded.js

@@ -64,7 +64,7 @@ function buildMindmapDesigner() {
     editorProperties.height = screenHeight;
     editorProperties.readOnly = true;
 
-    designer = new mindplot.MindmapDesigner(editorProperties, container);
+    designer = new mindplot.Designer(editorProperties, container);
     designer.loadFromXML(mapId, mapXml);
 
     // If a node has focus, focus can be move to another node using the keys.