Keep improving toolbar.

mindplot/pom.xml

@@ -172,7 +172,10 @@
                                     <filelist dir="${basedir}/src/main/javascript/"
                                               files="collaboration/frameworks/brix/BrixFramework.js"/>
 
-
+                                    <filelist dir="${basedir}/src/main/javascript/"
+                                              files="widget/ToolbarItem.js"/>
+                                    <filelist dir="${basedir}/src/main/javascript/"
+                                              files="widget/ColorPickerPanel.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/"
                                               files="widget/IconPanel.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/"
@@ -297,11 +300,14 @@
                                         <include>layout/LayoutManagerFactory-min.js</include>
 
                                         <include>collaboration/CollaborationManager-min.js</include>
-                                        <include>collaboration/frameworks/AbstractCollaborativeFramework-min.js</include>
+                                        <include>collaboration/frameworks/AbstractCollaborativeFramework-min.js
-                                        <include>collaboration/frameworks/AbstractCollaborativeModelFactory-min.js</include>
+                                        </include>
+                                        <include>collaboration/frameworks/AbstractCollaborativeModelFactory-min.js
+                                        </include>
                                         <include>collaboration/frameworks/brix/model/NodeModel-min.js</include>
                                         <include>collaboration/frameworks/brix/model/Mindmap-min.js</include>
-                                        <include>collaboration/frameworks/brix/BrixCollaborativeModelFactory-min.js</include>
+                                        <include>collaboration/frameworks/brix/BrixCollaborativeModelFactory-min.js
+                                        </include>
                                         <include>collaboration/frameworks/brix/BrixFramework-min.js</include>
 
                                         <include>footer-min.js</include>

mindplot/src/main/javascript/IconGroup.js

@@ -169,7 +169,7 @@ mindplot.IconGroup = new Class({
         this.options.nativeElem.addEventListener('dblclick', function(event) {
             // Avoid node creation ...
             if ($defined(event.stopPropagation)) {
-                event.stopPropagation(true);
+                event.stopPropagation();
             } else {
                 event.cancelBubble = true;
             }

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

@@ -0,0 +1,49 @@
+/*
+ *    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.ColorPicker = new Class({
+    Extends: mindplot.widget.ToolbarItem,
+    initialize : function(buttonId, model) {
+        this.parent(buttonId, model);
+        this._mooRainbow = new MooRainbow(buttonId, {
+            id: buttonId,
+            imgPath: '../images/',
+            startColor: [255, 255, 255],
+            onInit: function() {
+                this.fireEvent("show");
+            }.bind(this),
+            onChange: function(color) {
+                this.getModel().setValue(color.hex);
+            },
+            onComplete: function() {
+                this.hide();
+            }.bind(this)
+        });
+    },
+
+    show : function() {
+        this.parent();
+        this._mooRainbow.show();
+    },
+
+    hide : function() {
+        this.parent();
+        this._mooRainbow.hide();
+
+    }
+});

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

@@ -17,7 +17,8 @@
  */
 
 mindplot.widget.IconPanel = new Class({
-    Implements:[Options,Events],
+    Extends:mindplot.widget.ToolbarItem,
+    Implements:[Options],
     options:{
         width:253,
         initialWidth:0,
@@ -28,17 +29,14 @@ mindplot.widget.IconPanel = new Class({
     },
 
     initialize:function(buttonId, model) {
-        this._buttonId = buttonId;
+        this.parent(buttonId, model);
-        this._model = model;
-
         this.options.content = this._build();
         this.init();
-
     },
 
     init:function() {
         var panel = new Element('div');
-        var buttonElem = $(this._buttonId);
+        var buttonElem = this.getButtonElem();
 
         var coord = buttonElem.getCoordinates();
         var top = buttonElem.getTop() + coord.height + 2;
@@ -68,9 +66,7 @@ mindplot.widget.IconPanel = new Class({
     },
 
     show:function() {
-        this.fireEvent("show");
+        this.parent();
-        $(this._buttonId).className = 'buttonActive';
-
         if (this.options.state == 'close') {
             if (!$defined(this.options.panel)) {
                 this.init();
@@ -90,25 +86,25 @@ mindplot.widget.IconPanel = new Class({
     },
 
     hide:function() {
+        this.parent();
         if (this.options.state == 'open') {
             // Magic, disappear effect ;)
             this.options.panel.setStyles({border: '1px solid transparent', opacity:0});
             this.registerOpenPanel();
             this.options.state = 'close';
-            $(this._buttonId).className = 'button';
         }
     },
 
     registerOpenPanel:function() {
-        $(this._buttonId).removeEvents('click');
+        this.getButtonElem().removeEvents('click');
-        $(this._buttonId).addEvent('click', function() {
+        this.getButtonElem().addEvent('click', function() {
             this.show();
         }.bind(this));
     },
 
     registerClosePanel:function() {
-        $(this._buttonId).removeEvents('click');
+        this.getButtonElem().removeEvents('click');
-        $(this._buttonId).addEvent('click', function() {
+        this.getButtonElem().addEvent('click', function() {
             this.hide();
         }.bind(this));
     } ,
@@ -131,7 +127,7 @@ mindplot.widget.IconPanel = new Class({
                 img.src = mindplot.ImageIcon.prototype._getImageUrl(iconId);
 
                 img.addEvent('click', function() {
-                    this._model.setValue(img.id);
+                    this.getModel().setValue(img.id);
                 }.bind(this));
 
                 count = count + 1;

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

@@ -17,11 +17,25 @@
  */
 
 mindplot.widget.Menu = new Class({
-    initialize : function(designer) {
+    initialize : function(designer, containerId) {
+        $assert(designer, "designer can not be null");
+        $assert(containerId, "containerId can not be null");
+
+        // Init variables ...
         this._designer = designer;
         this._toolbarElems = [];
-        this._colorPickers = [];
+        this._containerId = containerId;
 
+        // Stop event propagation ...
+        $(this._containerId).addEvent('click', function(event) {
+            event.stopPropagation();
+        });
+
+        $(this._containerId).addEvent('dblclick', function(event) {
+            event.stopPropagation();
+        });
+
+        // Create panels ...
         var fontFamilyModel = {
             getValue: function() {
                 var nodes = designer.getSelectedNodes();
@@ -36,11 +50,7 @@ mindplot.widget.Menu = new Class({
 
             }
         };
-        var fontFamilyPanel = new mindplot.widget.FontFamilyPanel("fontFamily", fontFamilyModel);
+        this._toolbarElems.push(new mindplot.widget.FontFamilyPanel("fontFamily", fontFamilyModel));
-        fontFamilyPanel.addEvent('show', function() {
-            this.clear()
-        }.bind(this));
-        this._toolbarElems.push(fontFamilyPanel);
 
         var fontSizeModel = {
             getValue: function() {
@@ -54,11 +64,7 @@ mindplot.widget.Menu = new Class({
                 designer.setFontSize2SelectedNode(value);
             }
         };
-        var fontSizePanel = new mindplot.widget.FontSizePanel("fontSize", fontSizeModel);
+        this._toolbarElems.push(new mindplot.widget.FontSizePanel("fontSize", fontSizeModel));
-        fontSizePanel.addEvent('show', function() {
-            this.clear()
-        }.bind(this));
-        this._toolbarElems.push(fontSizePanel);
 
         var topicShapeModel = {
             getValue: function() {
@@ -72,11 +78,7 @@ mindplot.widget.Menu = new Class({
                 designer.setShape2SelectedNode(value);
             }
         };
-        var topicShapePanel = new mindplot.widget.TopicShapePanel("topicShape", topicShapeModel);
+        this._toolbarElems.push(new mindplot.widget.TopicShapePanel("topicShape", topicShapeModel));
-        topicShapePanel.addEvent('show', function() {
-            this.clear()
-        }.bind(this));
-        this._toolbarElems.push(topicShapePanel);
 
         // Create icon panel dialog ...
         var topicIconModel = {
@@ -87,63 +89,51 @@ mindplot.widget.Menu = new Class({
                 designer.addIconType2SelectedNode(value);
             }
         };
-        var iconPanel = new mindplot.widget.IconPanel('topicIcon', topicIconModel);
+        this._toolbarElems.push(new mindplot.widget.IconPanel('topicIcon', topicIconModel));
-        iconPanel.addEvent('show', function() {
+
+        // Topic color item ...
+        var topicColorModel =
+        {
+            getValue : function() {
+                return null;
+            },
+            setValue : function (hex) {
+                designer.setBackColor2SelectedNode(hex);
+            }
+        };
+        this._toolbarElems.push(new mindplot.widget.ColorPicker('topicColor', topicColorModel));
+
+        // Border color item ...
+        var borderColorModel =
+        {
+            getValue : function() {
+                return null;
+            },
+            setValue : function (hex) {
+                designer.setBorderColor2SelectedNode(hex);
+            }
+        };
+        this._toolbarElems.push(new mindplot.widget.ColorPicker('topicBorder', borderColorModel));
+
+        // Font color item ...
+        var fontColorModel =
+        {
+            getValue : function() {
+                return null;
+            },
+            setValue : function (hex) {
+                designer.setFontColor2SelectedNode(hex);
+            }
+        };
+        var fontColorPicker = new mindplot.widget.ColorPicker('fontColor', fontColorModel);
+        this._toolbarElems.push(fontColorPicker);
+
+        // Register on close events ...
+        this._toolbarElems.forEach(function(elem) {
+            elem.addEvent('show', function() {
                 this.clear()
             }.bind(this));
-        this._toolbarElems.push(iconPanel);
+        }.bind(this));
-
-
-        var colorPickerOptions = {
-            id: 'topicColor',
-            imgPath: '../images/',
-            startColor: [255, 255, 255],
-            onInit: function() {
-                this.clear();
-            }.bind(this),
-
-            onChange: function(color) {
-                designer.setBackColor2SelectedNode(color.hex);
-            },
-            onComplete: function() {
-                this.clear();
-            }.bind(this)
-        };
-        var topicColorPicker = new MooRainbow('topicColor', colorPickerOptions);
-        this._colorPickers.push(topicColorPicker);
-
-        var borderColorPicker = new MooRainbow('topicBorder', {
-            id: 'topicBorder',
-            imgPath: '../images/',
-            startColor: [255, 255, 255],
-            onInit: function() {
-                this.clear();
-            }.bind(this),
-            onChange: function(color) {
-                designer.setBorderColor2SelectedNode(color.hex);
-            },
-            onComplete: function() {
-                this.clear();
-            }.bind(this)
-
-        });
-        this._colorPickers.push(borderColorPicker);
-
-        var fontColorPicker = new MooRainbow('fontColor', {
-            id: 'fontColor',
-            imgPath: '../images/',
-            startColor: [255, 255, 255],
-            onInit: function() {
-                this.clear();
-            }.bind(this),
-            onChange: function(color) {
-                designer.setFontColor2SelectedNode(color.hex);
-            },
-            onComplete: function() {
-                this.clear();
-            }.bind(this)
-        });
-        this._colorPickers.push(fontColorPicker);
 
 
         // Register Events ...
@@ -163,21 +153,6 @@ mindplot.widget.Menu = new Class({
             designer.redo();
         });
 
-        designer.addEventListener("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)");
-            }
-
-        });
-
         $('addTopic').addEvent('click', function(event) {
             designer.createSiblingForSelectedNode();
         });
@@ -209,6 +184,21 @@ mindplot.widget.Menu = new Class({
             designer.setStyle2SelectedNode();
         });
 
+        designer.addEventListener("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)");
+            }
+
+        });
+
 
     },
 
@@ -216,10 +206,5 @@ mindplot.widget.Menu = new Class({
         this._toolbarElems.forEach(function(elem) {
             elem.hide();
         });
-
-        this._colorPickers.forEach(function(elem) {
-            $clear(elem);
-            elem.hide();
-        });
     }
 });

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

@@ -0,0 +1,49 @@
+/*
+ *    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.ToolbarItem = new Class({
+    Implements:[Events],
+    initialize : function(buttonId, model) {
+        $assert(buttonId, "buttonId can not be null");
+        $assert(model, "model can not be null");
+        this._model = model;
+        this._buttonId = buttonId;
+    },
+
+    getModel : function() {
+        return this._model;
+    },
+
+    getButtonElem : function() {
+        var elem = $(this._buttonId);
+        $assert(elem,"Could not find element for " + this._buttonId);
+        return elem;
+    }.protect(),
+
+    show : function() {
+        this.fireEvent('show');
+
+        // Mark the button as active...
+        this.getButtonElem().className = 'buttonActive';
+    },
+
+    hide : function() {
+        this.fireEvent('hide');
+        this.getButtonElem().className = 'button';
+    }
+});

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

@@ -17,24 +17,19 @@
  */
 
 mindplot.widget.ToolbarPanel = new Class({
-    Implements:[Events],
+    Extends: mindplot.widget.ToolbarItem,
     initialize : function(buttonId, model) {
-        $assert(buttonId, "buttonId can not be null");
+        this.parent(buttonId, model);
-        $assert(model, "model can not be null");
+        this._panelId = this.initPanel();
-        this._model = model;
-        this._buttonId = buttonId;
-        this._panelId = this.initPanel(buttonId);
     },
 
     buildPanel : function() {
         throw "Method must be implemented";
     }.protect(),
 
-    initPanel: function (buttonId) {
+    initPanel: function () {
-        $assert(buttonId, "buttonId can not be null");
-
         var panelElem = this.buildPanel();
-        var buttonElem = $(buttonId);
+        var buttonElem = this.getButtonElem();
 
         // Add panel content ..
         panelElem.setStyle('display', 'none');
@@ -45,14 +40,13 @@ mindplot.widget.ToolbarPanel = new Class({
         menuElems.forEach(function(elem) {
             elem.addEvent('click', function(event) {
                 var value = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id;
-                this._model.setValue(value);
+                this.getModel().setValue(value);
                 this.hide();
-                event.stopPropagation();
             }.bind(this));
         }.bind(this));
 
         // Font family event handling ....
-        buttonElem.addEvent('click', function() {
+        buttonElem.addEvent('click', function(event) {
 
             // Is the panel being displayed ?
             if (this.isVisible()) {
@@ -66,10 +60,10 @@ mindplot.widget.ToolbarPanel = new Class({
     },
 
     show : function() {
-        this.fireEvent('show');
+        this.parent();
 
         var menuElems = $(this._panelId).getElements('div');
-        var value = this._model.getValue();
+        var value = this.getModel().getValue();
         menuElems.forEach(function(elem) {
             var elemValue = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id;
             if (elemValue == value)
@@ -79,13 +73,11 @@ mindplot.widget.ToolbarPanel = new Class({
         });
         $(this._panelId).setStyle('display', 'block');
 
-        // Mark the button as active...
-        $(this._buttonId).className = 'buttonActive';
     },
 
     hide : function() {
+        this.parent();
         $(this._panelId).setStyle('display', 'none');
-        $(this._buttonId).className = 'button';
 
     },
 

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

@@ -5,7 +5,7 @@
     <!--[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>

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

@@ -187,7 +187,7 @@ function afterMindpotLibraryLoading() {
             designer.save(null, false)
         }
     };
-    var menu = new mindplot.widget.Menu(designer);
+    var menu = new mindplot.widget.Menu(designer,'toolbar');
 
     //  If a node has focus, focus can be move to another node using the keys.
     designer._cleanScreen = function() {