Implements toolbar disabling.

2024-12-31 15:23:52 +01:00 · 2011-10-04 01:16:29 -03:00 · 2011-10-04 01:16:29 -03:00 · 9185883d30
commit 9185883d30
parent b7bbe2c0b7
24 changed files with 919 additions and 275 deletions
--- a/core-js/src/main/javascript/Monitor.js
+++ b/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;
--- a/mindplot/pom.xml
+++ b/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/"
--- a/mindplot/src/main/javascript/MindmapDesigner.js
+++ b/mindplot/src/main/javascript/MindmapDesigner.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;
        },

--- a/mindplot/src/main/javascript/DesignerModel.js
+++ b/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.
-                if (isValid) {
-                    result.push(selectedNode.getId());
-                } else {
-                    core.Monitor.getInstance().logMessage(errorMsg);
-                }
+        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.
+            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) {
-                    result.push(selectedLine.getId());
-                } else {
-                    core.Monitor.getInstance().logMessage(errorMsg);
-                }
+        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) {
+                result.push(selectedLine.getId());
+            } else {
+                core.Monitor.getInstance().logMessage(errorMsg);
            }
        }
        return result;
--- a/mindplot/src/main/javascript/IconGroup.js
+++ b/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;
--- a/mindplot/src/main/javascript/NodeGraph.js
+++ b/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;
-        var outerShape = this.getOuterShape();
-        if (focus) {
-            outerShape.setFill('#c7d8ff');
-            outerShape.setOpacity(1);
+        if (this._onFocus != focus) {
+
+            this._onFocus = focus;
+            var outerShape = this.getOuterShape();
+            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() {
--- a/mindplot/src/main/javascript/Topic.js
+++ b/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");
--- a/mindplot/src/main/javascript/widget/ColorPalettePanel.js
+++ b/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;
--- a/mindplot/src/main/javascript/widget/ColorPickerPanel.js
+++ b/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, {
--- a/mindplot/src/main/javascript/widget/IconPanel.js
+++ b/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);
    },
--- a/mindplot/src/main/javascript/widget/ListToolbarPanel.js
+++ b/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();
--- a/mindplot/src/main/javascript/widget/Menu.js
+++ b/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._toolbarElems.forEach(function(elem) {
-            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);
+        this.addButton('zoomIn', false, false, function() {
+            designer.zoomIn()
        });

-        $('topicNote').addEvent('click', function() {
-            this.clear();
-            designer.addNote();
-        }.bind(this));
+        this.addButton('zoomOut', false, false, function() {
+            designer.zoomOut()
+        });

-        $('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() {
@ -345,4 +378,4 @@ mindplot.widget.Menu = new Class({
            elem.hide();
        });
    }
-});
+});
--- a/mindplot/src/main/javascript/widget/Monitor.js
+++ b/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
+};
--- a/mindplot/src/main/javascript/widget/NoteEditor.js
+++ b/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);
    },

--- a/mindplot/src/main/javascript/widget/ToolbarItem.js
+++ b/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");
-        this._model = model;
+        $assert(fn, "fn can not be null");
        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.getButtonElem().className = 'buttonActive';
-            this.getPanelElem().setStyle('display', 'block');
-        }
+        this.fireEvent('show');
    },

    hide : function() {
-        if (this.isVisible()) {
-            this.getButtonElem().className = 'button';
-            this.getPanelElem().setStyle('display', 'none');
-            this.fireEvent('hide');
+        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() {
-        return this.getPanelElem().getStyle('display') == 'block';
-    },
-
-    buildPanel : function() {
-        throw "Method must be implemented";
-    }.protect()
-
+    enable : function() {
+        var elem = this.getButtonElem();
+        if (!this._enable) {
+            elem.addEvent('click', this._fn);
+            elem.removeClass('buttonOff');
+            elem.addClass('buttonOn');
+            this._enable = true;
+        }
+    }
 });
--- a/mindplot/src/main/javascript/widget/ToolbarPaneItem.js
+++ b/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()
+
+});
--- a/mindplot/src/test/javascript/simpleTest.js
+++ b/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);


--- a/wise-doc/src/main/webapp/css/editor.css
+++ b/wise-doc/src/main/webapp/css/editor.css
@ -1,7 +1,6 @@
@import "common.css";
-/* @Todo: Fix this ...*/
-@import "widget/lightbox.css";
-@import "libraries/moodialog/css/MooDialog.css";
+@import "/mindplot/src/main/javascript/widget/lightbox.css";
+@import "/mindplot/src/main/javascript/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 {
-    width: 32px;
-    height: 36px;
-    float: left;
+div#toolbar .buttonOn:hover, div#toolbar .buttonActive {
    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;
+    cursor: pointer;
 }

-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;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -o-user-select: none;
-    user-select: none;
+div#toolbar .buttonOff {
+    opacity: 0.4;
 }

 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;
--- a/wise-doc/src/main/webapp/css/widget/colorPalette.css
+++ b/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;
+}
--- a/wise-doc/src/main/webapp/css/widget/colorPalette.html
+++ b/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>
--- a/wise-doc/src/main/webapp/html/editor.html
+++ b/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>
-    <!-- Internet Explorer 8 Hack -->
-    <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
-    <title>WiseMapping - Editor </title>
+    <!--<script type="text/javascript" src="http://docs.google.com/brix/static/api/js/jsapi.nocache.js"></script>-->
+
    <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);
-                mindmap.setId('1');
+                var mindmap = serializer.loadFromDom(domDocument, mapId);

                // 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>
--- a/wise-doc/src/main/webapp/js/editor.js
+++ b/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};
-    designer = new mindplot.MindmapDesigner(editorProperties, container);
+    var editorProperties = {zoom:0.85,saveOnLoad:true,collab:collab};
+    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;
 }

--- a/wise-webapp/src/main/webapp/js/editor.js
+++ b/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)
--- a/wise-webapp/src/main/webapp/js/embedded.js
+++ b/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.