Refactor menu.

mindplot/pom.xml

@@ -156,6 +156,18 @@
                                               files="layout/FreeMindLayoutManager.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/"
                                               files="layout/LayoutManagerFactory.js"/>
+                                    <filelist dir="${basedir}/src/main/javascript/"
+                                              files="widget/IconPanel.js"/>
+                                    <filelist dir="${basedir}/src/main/javascript/"
+                                              files="widget/ToolbarPanel.js"/>
+                                    <filelist dir="${basedir}/src/main/javascript/"
+                                              files="widget/FontFamilyPanel.js"/>
+                                    <filelist dir="${basedir}/src/main/javascript/"
+                                              files="widget/FontSizePanel.js"/>
+                                    <filelist dir="${basedir}/src/main/javascript/"
+                                              files="widget/TopicShapePanel.js"/>
+                                    <filelist dir="${basedir}/src/main/javascript/"
+                                              files="widget/Menu.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/" files="footer.js"/>
                                 </concat>
 

mindplot/src/main/javascript/MindmapDesigner.js

@@ -681,7 +681,7 @@ mindplot.MindmapDesigner = new Class({
             }
         },
 
-        addImage2SelectedNode : function(iconType) {
+        addIconType2SelectedNode : function(iconType) {
             var validSelectedObjects = this._getValidSelectedObjectsIds();
             var topicsIds = validSelectedObjects.nodes;
             if (topicsIds.length > 0) {

mindplot/src/main/javascript/header.js

@@ -26,3 +26,4 @@ var mindplot = {};
 mindplot.util = {};
 mindplot.commands = {};
 mindplot.layout = {};
+mindplot.widget = {};

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

@@ -0,0 +1,37 @@
+/*
+ *    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.FontFamilyPanel = new Class({
+    Extends : mindplot.widget.ToolbarPanel,
+    initialize : function(buttonId, model) {
+        this.parent(buttonId, model);
+    },
+
+    buildPanel: function() {
+
+        var content = new Element("div", {'class':'toolbarPanel','id':'fontFamilyPanel'});
+        content.innerHTML = '' +
+            '<div id="times" model="Times" class="toolbarPanelLink" style="font-family:times;">Times</div>' +
+            '<div id="arial"  model="Arial" style="font-family:arial;">Arial</div>' +
+            '<div id="tahoma" model="Tahoma" style="font-family:tahoma;">Tahoma</div>' +
+            '<div id="verdana" model="Verdana" style="font-family:verdana;">Verdana</div>';
+
+        return content;
+
+    }
+});

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

@@ -0,0 +1,37 @@
+/*
+ *    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.FontSizePanel = new Class({
+    Extends : mindplot.widget.ToolbarPanel,
+    initialize : function(buttonId, model) {
+        this.parent(buttonId, model);
+    },
+
+    buildPanel: function() {
+
+        var content = new Element("div", {'class':'toolbarPanel','id':'fontSizePanel'});
+        content.innerHTML = '' +
+            '<div id="small" model="6" style="font-size:8px">Small</div>' +
+            '<div id="normal" model="8" style="font-size:12px">Normal</div>' +
+            '<div id="large" model="10" style="font-size:15px">Large</div>' +
+            '<div id="huge"  model="15" style="font-size:24px">Huge</div>';
+
+        return content;
+
+    }
+});

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

@@ -0,0 +1,141 @@
+/*
+ *    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.IconPanel = new Class({
+    Implements:[Options,Events],
+    options:{
+        width:253,
+        initialWidth:0,
+        height:200,
+        panel:null,
+        onStart:Class.empty,
+        state:'close'
+    },
+
+    initialize:function(buttonId, model) {
+        this._buttonId = buttonId;
+        this._model = model;
+
+        this.options.content = this._build();
+        this.init();
+
+    },
+
+    init:function() {
+        var panel = new Element('div');
+        var buttonElem = $(this._buttonId);
+
+        var coord = buttonElem.getCoordinates();
+        var top = buttonElem.getTop() + coord.height + 2;
+        var left = buttonElem.getLeft();
+
+        panel.setStyles({
+                width:this.options.initialWidth,
+                height:0,position:'absolute',
+                top:top,
+                left:left,
+                background:'#e5e5e5',
+                border:'1px solid #BBB4D6',
+                zIndex:20,
+                overflow:'hidden'}
+        );
+
+        this.options.panel = panel;
+        this.options.content.inject(panel);
+
+        this.options.content.addEvent('click', function() {
+            this.hide();
+        }.bind(this));
+
+        panel.setStyle('opacity', 0);
+        panel.inject($(document.body));
+        this.registerOpenPanel();
+    },
+
+    show:function() {
+        this.fireEvent("show");
+        if (this.options.state == 'close') {
+            if (!$defined(this.options.panel)) {
+                this.init();
+            }
+
+            var panel = this.options.panel;
+            panel.setStyles({
+                border: '1px solid #636163',
+                opacity:100,
+                height:this.options.height,
+                width:this.options.width
+            });
+            this.fireEvent('onStart');
+            this.registerClosePanel();
+            this.options.state = 'open';
+
+        }
+    },
+
+    hide:function() {
+        if (this.options.state == 'open') {
+            // Magic, disappear effect ;)
+            this.options.panel.setStyles({border: '1px solid transparent', opacity:0});
+            this.registerOpenPanel();
+            this.options.state = 'close';
+        }
+    },
+
+    registerOpenPanel:function() {
+        $(this._buttonId).removeEvents('click');
+        $(this._buttonId).addEvent('click', function() {
+            this.show();
+        }.bind(this));
+    },
+
+    registerClosePanel:function() {
+        $(this._buttonId).removeEvents('click');
+        $(this._buttonId).addEvent('click', function() {
+            this.hide();
+        }.bind(this));
+    } ,
+
+    _build : function() {
+        var content = new Element('div').setStyles({width:253,height:200,padding:5});
+        var count = 0;
+        for (var i = 0; i < mindplot.ImageIcon.prototype.ICON_FAMILIES.length; i = i + 1) {
+            var familyIcons = mindplot.ImageIcon.prototype.ICON_FAMILIES[i].icons;
+            for (var j = 0; j < familyIcons.length; j = j + 1) {
+                // Separate icons by line ...
+                var familyContent;
+                if ((count % 12) == 0) {
+                    familyContent = new Element('div').inject(content);
+                }
+
+                var iconId = familyIcons[j];
+                var img = new Element('img').setStyles({width:16,height:16,padding:"0px 2px"}).inject(familyContent);
+                img.id = iconId;
+                img.src = mindplot.ImageIcon.prototype._getImageUrl(iconId);
+
+                img.addEvent('click', function() {
+                    this._model.setValue(img.id);
+                }.bind(this));
+
+                count = count + 1;
+            }
+        }
+        return content;
+    }
+
+});

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

@@ -0,0 +1,150 @@
+/*
+ *    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.Menu = new Class({
+    initialize : function(designer) {
+        this._designer = designer;
+        this._toolbarElems = [];
+        this._colorPickers = [];
+
+        var fontFamilyModel = {
+            getValue: function() {
+                var nodes = designer.getSelectedNodes();
+                var length = nodes.length;
+                if (length == 1) {
+                    return nodes[0].getFontFamily();
+                }
+            },
+
+            setValue: function(value) {
+                designer.setFont2SelectedNode(value);
+
+            }
+        };
+        var fontFamilyPanel = new mindplot.widget.FontFamilyPanel("fontFamily", fontFamilyModel);
+        fontFamilyPanel.addEvent('show',function(){this.clear()}.bind(this));
+        this._toolbarElems.push(fontFamilyPanel);
+
+        var fontSizeModel = {
+            getValue: function() {
+                var nodes = designer.getSelectedNodes();
+                var length = nodes.length;
+                if (length == 1) {
+                    return nodes[0].getFontSize();
+                }
+            },
+            setValue: function(value) {
+                designer.setFontSize2SelectedNode(value);
+            }
+        };
+        var fontSizePanel = new mindplot.widget.FontSizePanel("fontSize", fontSizeModel);
+        fontSizePanel.addEvent('show',function(){this.clear()}.bind(this));
+        this._toolbarElems.push(fontSizePanel);
+
+        var topicShapeModel = {
+            getValue: function() {
+                var nodes = designer.getSelectedNodes();
+                var length = nodes.length;
+                if (length == 1) {
+                    return nodes[0].getShapeType();
+                }
+            },
+            setValue: function(value) {
+                designer.setShape2SelectedNode(value);
+            }
+        };
+        var topicShapePanel = new mindplot.widget.TopicShapePanel("topicShape", topicShapeModel);
+        topicShapePanel.addEvent('show',function(){this.clear()}.bind(this));
+        this._toolbarElems.push(topicShapePanel);
+
+        // Create icon panel dialog ...
+        var topicIconModel = {
+            getValue: function() {
+                return null;
+            },
+            setValue: function(value) {
+                designer.addIconType2SelectedNode(value);
+            }
+        };
+        var iconPanel = new mindplot.widget.IconPanel('topicIcon', topicIconModel);
+        iconPanel.addEvent('show',function(){this.clear()}.bind(this));
+        this._toolbarElems.push(iconPanel);
+
+
+        var topicColorPicker = new MooRainbow('topicColor', {
+            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)
+        });
+        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);
+    },
+
+    clear : function() {
+        this._toolbarElems.forEach(function(elem) {
+            elem.hide();
+        });
+
+        this._colorPickers.forEach(function(elem) {
+            $clear(elem);
+            elem.hide();
+        });
+    }
+});

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

@@ -0,0 +1,89 @@
+/*
+ *    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.ToolbarPanel = 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._panelId = this.initPanel(buttonId);
+    },
+
+    buildPanel : function() {
+        throw "Method must be implemented";
+    }.protect(),
+
+    initPanel: function (buttonId) {
+        $assert(buttonId, "buttonId can not be null");
+
+        var panelElem = this.buildPanel();
+        var buttonElem = $(buttonId);
+
+        // Add panel content ..
+        panelElem.setStyle('display', 'none');
+        panelElem.inject(buttonElem);
+
+        // Register on toolbar elements ...
+        var menuElems = panelElem.getElements('div');
+        menuElems.forEach(function(elem) {
+            elem.addEvent('click', function() {
+                var value = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id;
+                this._model.setValue(value);
+                this.hide();
+            }.bind(this));
+        }.bind(this));
+
+        // Font family event handling ....
+        buttonElem.addEvent('click', function() {
+
+            // Is the panel being displayed ?
+            if (this.isVisible()) {
+                this.hide();
+            } else {
+                this.show();
+            }
+
+        }.bind(this));
+        return panelElem.id;
+    },
+
+    show : function() {
+        this.fireEvent('show');
+
+        var menuElems = $(this._panelId).getElements('div');
+        var value = this._model.getValue();
+        menuElems.forEach(function(elem) {
+            var elemValue = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id;
+            if (elemValue == value)
+                elem.className = "toolbarPanelLinkSelectedLink";
+            else
+                elem.className = "toolbarPanelLink";
+        });
+        $(this._panelId).setStyle('display', 'block');
+
+    },
+
+    hide : function() {
+        $(this._panelId).setStyle('display', 'none');
+    },
+
+    isVisible : function() {
+        return $(this._panelId).getStyle('display') == 'block';
+    }
+});

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

@@ -0,0 +1,37 @@
+/*
+ *    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.TopicShapePanel = new Class({
+    Extends : mindplot.widget.ToolbarPanel,
+    initialize : function(buttonId, model) {
+        this.parent(buttonId, model);
+    },
+
+    buildPanel: function() {
+
+        var content = new Element("div", {'class':'toolbarPanel','id':'topicShapePanel'});
+        content.innerHTML = '' +
+            '<div id="rectagle" model="rectagle"><img src="../images/shape-rectangle.png" alt="Rectangle" width="40" height="25"></div>' +
+            '<div id="rounded_rectagle" model="rounded rectagle" ><img src="../images/shape-rectangle-rounded.png"alt="Rounded Rectangle" width="40" height="25"></div>' +
+            '<div id="line" model="line"><img src="../images/shape-line.png" alt="Line" width="40" height="7"></div>' +
+            '<div id="elipse" model="elipse" class="toolbarPanelLink"><img src="../images/shape-elipse.png" alt="Elipse" width="40" height="25"></div>';
+
+        return content;
+
+    }
+});

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

@@ -157,6 +157,11 @@ div#toolbar .button {
     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 .comboButton {
@@ -189,7 +194,7 @@ div#toolbar .toolbarLabel {
     top: 55%;
     text-align: center;
     width: 34px;
-    height: 36px;
+    height: 10px;
     font-size: 10px;
 }
 
@@ -379,7 +384,13 @@ div#fontColor {
     display: none;
     position: absolute;
     z-index: 4;
-    top: 71px;
+    top: 53px;
+    text-align: left;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    user-select: none;
 }
 
 div.toolbarPanelLink {

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

@@ -14,7 +14,7 @@
 
     <!--<script type='text/javascript' src='../js/wiseLibrary.js'></script>-->
 
-    <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>-->
     <script type='text/javascript' src='../js/mootools-core-1.3.2-full-compat.js'></script>
     <script type='text/javascript' src='../js/mootools-more-1.3.2.1-yui.js'></script>
 
@@ -22,7 +22,6 @@
     <script type='text/javascript' src='../../../../../wise-webapp/src/main/webapp/js/windoo.js'></script>
 
     <!--<script type='text/javascript' src='../js/wiseEditorLibrary.js'></script>-->
-    <script type='text/javascript' src='../../../../../wise-webapp/src/main/webapp/js/IconPanel.js'></script>
     <script type='text/javascript' src='../../../../../wise-webapp/src/main/webapp/js/mooRainbow.js'></script>
 
     <script type='text/javascript' src='../../../../../core-js/target/classes/core.js'></script>
@@ -113,30 +112,6 @@
     <div id="paletteHeader"></div>
 </div>
 
-<div id="fontFamilyPanel" class="toolbarPanel">
-    <div id="times" class="toolbarPanelLink" style="font-family:times;">Times</div>
-    <div id="arial" class="toolbarPanelLink" style="font-family:arial;">Arial</div>
-    <div id="tahoma" class="toolbarPanelLink" style="font-family:tahoma;">Tahoma</div>
-    <div id="verdana" class="toolbarPanelLink" style="font-family:verdana;">Verdana</div>
-</div>
-
-<div id="fontSizePanel" class="toolbarPanel">
-    <div id="small" class="toolbarPanelLink" style="font-size:8px">Small</div>
-    <div id="normal" class="toolbarPanelLink" style="font-size:12px">Normal</div>
-    <div id="large" class="toolbarPanelLink" style="font-size:15px">Large</div>
-    <div id="huge" class="toolbarPanelLink" style="font-size:24px">Huge</div>
-</div>
-
-<div id="topicShapePanel" class="toolbarPanel">
-    <div id="rectagle" class="toolbarPanelLink"><img src="../images/shape-rectangle.png" alt="Rectangle" width="40"
-                                                     height="25"></div>
-    <div id="rounded_rectagle" class="toolbarPanelLink"><img src="../images/shape-rectangle-rounded.png"
-                                                             alt="Rounded Rectangle" width="40" height="25"></div>
-    <div id="line" class="toolbarPanelLink"><img src="../images/shape-line.png" alt="Line" width="40" height="7"></div>
-    <div id="elipse" class="toolbarPanelLink"><img src="../images/shape-elipse.png" alt="Elipse" width="40" height="25">
-    </div>
-</div>
-
 <div id="actionsContainer">
 </div>
 

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

@@ -177,14 +177,11 @@ function afterMindpotLibraryLoading() {
         });
     }
 
-    var iconChooser = buildIconChooser();
+    // Register Key Events ...
-    iconPanel = new IconPanel({button:$('topicIcon'), onStart:cleanScreenEvent, content:iconChooser});
+    $(document).addEvent('keydown', designer.keyEventHandler.bind(designer));
-
+    $("ffoxWorkarroundInput").addEvent('keydown', designer.keyEventHandler.bind(designer));
-    // Register Events ...
-    $(document).addEvent('keydown', designer.keyEventHandler.bindWithEvent(designer));
-    $("ffoxWorkarroundInput").addEvent('keydown', designer.keyEventHandler.bindWithEvent(designer));
-
 
+    // Register toolbar events ...
     $('zoomIn').addEvent('click', function(event) {
         designer.zoomIn();
     });
@@ -224,38 +221,6 @@ function afterMindpotLibraryLoading() {
         designer.deleteCurrentNode();
     });
 
-    var context = this;
-    var colorPicker1 = new MooRainbow('topicColor', {
-        id: 'topicColor',
-        imgPath: '../images/',
-        startColor: [255, 255, 255],
-        onInit: function(color) {
-            cleanScreenEvent.bind(context).attempt();
-            setCurrentColorPicker.attempt(colorPicker1, context);
-        },
-        onChange: function(color) {
-            designer.setBackColor2SelectedNode(color.hex);
-        },
-        onComplete: function(color) {
-            removeCurrentColorPicker.attempt(colorPicker1, context);
-        }
-    });
-    var colorPicker2 = new MooRainbow('topicBorder', {
-        id: 'topicBorder',
-        imgPath: '../images/',
-        startColor: [255, 255, 255],
-        onInit: function(color) {
-            cleanScreenEvent.bind(context).attempt();
-            setCurrentColorPicker.attempt(colorPicker2, context);
-        },
-        onChange: function(color) {
-            designer.setBorderColor2SelectedNode(color.hex);
-        },
-        onComplete: function(color) {
-            removeCurrentColorPicker.attempt(colorPicker2, context);
-        }
-    });
-
     $('topicLink').addEvent('click', function() {
         designer.addLink2SelectedNode();
 
@@ -278,33 +243,17 @@ function afterMindpotLibraryLoading() {
         designer.setStyle2SelectedNode();
     });
 
-    var colorPicker3 = new MooRainbow('fontColor', {
-        id: 'fontColor',
-        imgPath: '../images/',
-        startColor: [255, 255, 255],
-        onInit: function(color) {
-            cleanScreenEvent.bind(context).attempt();
-            setCurrentColorPicker.attempt(colorPicker3, context);
-        },
-        onChange: function(color) {
-            designer.setFontColor2SelectedNode(color.hex);
-        },
-        onComplete: function(color) {
-            removeCurrentColorPicker.attempt(colorPicker3, context);
-        }
-    });
-
     // To prevent the user from leaving the page with changes ...
     window.onbeforeunload = function () {
         if (designer.needsSave()) {
             designer.save(null, false)
         }
     };
+    var menu = new mindplot.widget.Menu(designer);
+
+    //  If a node has focus, focus can be move to another node using the keys.
+    designer._cleanScreen = function(){menu.clear()};
 
-    // Build panels ...
-    fontFamilyPanel();
-    shapeTypePanel();
-    fontSizePanel();
 
   // If not problem has arisen, close the dialog ...
     var closeDialog = function() {
@@ -315,43 +264,6 @@ function afterMindpotLibraryLoading() {
     }.delay(500);
 }
 
-function buildIconChooser() {
-    var content = new Element('div').setStyles({width:253,height:200,padding:5});
-    var count = 0;
-    for (var i = 0; i < mindplot.ImageIcon.prototype.ICON_FAMILIES.length; i = i + 1) {
-        var familyIcons = mindplot.ImageIcon.prototype.ICON_FAMILIES[i].icons;
-        for (var j = 0; j < familyIcons.length; j = j + 1) {
-            // Separate icons by line ...
-            var familyContent;
-            if ((count % 12) == 0) {
-                familyContent = new Element('div').inject(content);
-            }
-
-
-            var iconId = familyIcons[j];
-            var img = new Element('img').setStyles({width:16,height:16,padding:"0px 2px"}).inject(familyContent);
-            img.id = iconId;
-            img.src = mindplot.ImageIcon.prototype._getImageUrl(iconId);
-            img.addEvent('click', function(event, id) {
-                designer.addImage2SelectedNode(this.id);
-            }.bindWithEvent(img));
-            count = count + 1;
-        }
-
-    }
-
-    return content;
-}
-
-
-function setCurrentColorPicker(colorPicker) {
-    this.currentColorPicker = colorPicker;
-}
-
-function removeCurrentColorPicker(colorPicker) {
-    $clear(this.currentColorPicker);
-}
-
 function buildMindmapDesigner() {
 
     // Initialize message logger ...
@@ -373,132 +285,6 @@ function buildMindmapDesigner() {
 
     designer = new mindplot.MindmapDesigner(editorProperties, container);
     designer.loadFromXML(mapId, mapXml);
-
-    // If a node has focus, focus can be move to another node using the keys.
-    designer._cleanScreen = cleanScreenEvent.bind(this);
-}
-
-function createColorPalette(container, onSelectFunction, event) {
-    cleanScreenEvent();
-    _colorPalette = new core.ColorPicker();
-    _colorPalette.onSelect = function(color) {
-        onSelectFunction.call(this, color);
-        cleanScreenEvent();
-    };
-
-    //    dojo.event.kwConnect({srcObj: this._colorPalette,srcFunc:"onColorSelect",targetObj:this._colorPalette, targetFunc:"onSelect", once:true});
-    var mouseCoords = core.Utils.getMousePosition(event);
-    var colorPaletteElement = $("colorPalette");
-    colorPaletteElement.setStyle('left', (mouseCoords.x - 80) + "px");
-    colorPaletteElement.setStyle('display', "block");
-};
-
-function cleanScreenEvent() {
-    if (this.currentColorPicker) {
-        this.currentColorPicker.hide();
-    }
-    $("fontFamilyPanel").setStyle('display', "none");
-    $("fontSizePanel").setStyle('display', "none");
-    $("topicShapePanel").setStyle('display', "none");
-    iconPanel.close();
-}
-
-function fontFamilyPanel() {
-    var supportedFonts = ['times','arial','tahoma','verdana'];
-    var updateFunction = function(value) {
-        value = value.charAt(0).toUpperCase() + value.substring(1, value.length);
-        designer.setFont2SelectedNode(value);
-    };
-
-    var onFocusValue = function(selectedNode) {
-        return selectedNode.getFontFamily();
-    };
-
-    buildPanel('fontFamily', 'fontFamilyPanel', supportedFonts, updateFunction, onFocusValue);
-}
-
-function shapeTypePanel() {
-    var shapeTypePanel = ['rectagle','rounded_rectagle','line','elipse'];
-    var updateFunction = function(value) {
-        designer.setShape2SelectedNode(value.replace('_', ' '));
-    };
-
-    var onFocusValue = function(selectedNode) {
-
-        return selectedNode.getShapeType().replace(' ', '_');
-    };
-
-    buildPanel('topicShape', 'topicShapePanel', shapeTypePanel, updateFunction, onFocusValue);
-}
-
-function fontSizePanel() {
-    var shapeTypePanel = ['small','normal','large','huge'];
-    var map = {small:'6',normal:'8',large:'10',huge:'15'};
-    var updateFunction = function(key) {
-        var value = map[key];
-        designer.setFontSize2SelectedNode(value);
-    };
-
-    var onFocusValue = function(selectedNode) {
-        var fontSize = selectedNode.getFontSize();
-        var result = "";
-        if (fontSize <= 6) {
-            result = 'small';
-        } else if (fontSize <= 8) {
-            result = 'normal';
-        } else if (fontSize <= 10) {
-            result = 'large';
-        } else if (fontSize >= 15) {
-            result = 'huge';
-        }
-        return result;
-    };
-    buildPanel('fontSize', 'fontSizePanel', shapeTypePanel, updateFunction, onFocusValue);
-}
-
-function buildPanel(buttonElemId, elemLinksContainer, elemLinkIds, updateFunction, onFocusValue) {
-    // Font family event handling ....
-    $(buttonElemId).addEvent('click', function(event) {
-        var container = $(elemLinksContainer);
-        var isRendered = container.getStyle('display') == 'block';
-        cleanScreenEvent();
-
-        // Restore default css.
-        for (var i = 0; i < elemLinkIds.length; i++) {
-            var elementId = elemLinkIds[i];
-            $(elementId).className = 'toolbarPanelLink';
-        }
-
-        // Select current element ...
-        var nodes = designer.getSelectedNodes();
-        var lenght = nodes.length;
-        if (lenght == 1) {
-            var selectedNode = nodes[0];
-            var selectedElementId = onFocusValue(selectedNode);
-            selectedElementId = selectedElementId.toLowerCase();
-            var selectedElement = $(selectedElementId);
-            selectedElement.className = 'toolbarPanelLinkSelectedLink';
-        }
-
-        container.setStyle('display', 'block');
-
-        var mouseCoords = core.Utils.getMousePosition(event);
-        if (!isRendered) {
-            container.setStyle('left', (mouseCoords.x - 10) + "px");
-        }
-    });
-
-    var fontOnClick = function(event) {
-        var value = this.getAttribute('id');
-        updateFunction(value);
-        cleanScreenEvent();
-    };
-
-    // Register event listeners on elements ...
-    for (var i = 0; i < elemLinkIds.length; i++) {
-        var elementId = elemLinkIds[i];
-        $(elementId).addEvent('click', fontOnClick.bind($(elementId)));
-    }
 }
 
 //######################### Libraries Loading ##################################

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

@@ -1,128 +0,0 @@
-/*
- *    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.
- */
-
-var IconPanel = new Class({
-    Implements:[Options,Events],
-    options:{
-        width:253,
-        initialWidth:0,
-        height:200,
-        content:null,
-        panel:null,
-        button:null,
-        onStart:Class.empty,
-        state:'close'
-    },
-
-    initialize:function(options) {
-        this.setOptions(options);
-        if ($defined(this.options.button)) {
-            this.init();
-        }
-    },
-
-    setButton:function(button) {
-        this.options.button = button;
-    },
-
-    init:function() {
-        var panel = new Element('div');
-        var coord = this.options.button.getCoordinates();
-        var top = this.options.button.getTop() + coord.height + 2;
-        var left = this.options.button.getLeft();
-        panel.setStyles({
-            width:this.options.initialWidth,
-            height:0,position:'absolute',
-            top:top,
-            left:left,
-            background:'#e5e5e5',
-            border:'1px solid #BBB4D6',
-            zIndex:20,
-            overflow:'hidden'}
-        );
-
-        this.options.panel = panel;
-        this.options.content.inject(panel);
-
-        this.options.content.addEvent('click', function(event) {
-            this.close();
-        }.bind(this));
-
-        panel.setStyle('opacity', 0);
-        panel.inject($(document.body));
-        this.registerOpenPanel();
-    },
-
-    open:function() {
-        if (this.options.state == 'close') {
-            if (!$defined(this.options.panel)) {
-                this.init();
-            }
-
-            var panel = this.options.panel;
-            panel.setStyles({border: '1px solid #636163', opacity:100});
-            this.fireEvent('onStart');
-
-            // Resize dialog to show a cool effect ;)
-            panel.set('morph', {duration: 'long', transition: 'bounce:out'});
-            panel.morph({
-                height:[0,this.options.height],
-                width:[this.options.initialWidth, this.options.width]
-            });
-            panel.addEvent('complete', function() {
-                this.registerClosePanel();
-            }.bind(this));
-
-            this.options.state = 'open';
-
-        }
-    },
-
-    close:function() {
-        if (this.options.state == 'open') {
-
-            // Magic, disappear effect ;)
-            var panel = this.options.panel;
-            panel.set('morph', {duration: 'long', transition: 'bounce:in'});
-            panel.morph({
-                height:[this.options.height,0],
-                width:[this.options.width, this.options.initialWidth]
-            });
-            panel.addEvent('complete', function() {
-                this.options.panel.setStyles({border: '1px solid transparent', opacity:0});
-                this.registerOpenPanel();
-            }.bind(this));
-
-            this.options.state = 'close';
-        }
-    },
-
-    registerOpenPanel:function() {
-        this.options.button.removeEvents('click');
-        this.options.button.addEvent('click', function(event) {
-            this.open();
-        }.bindWithEvent(this));
-    },
-
-    registerClosePanel:function() {
-        this.options.button.removeEvents('click');
-        this.options.button.addEvent('click', function(event) {
-            this.close();
-        }.bindWithEvent(this));
-    }
-});

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

@@ -184,8 +184,12 @@ function afterMindpotLibraryLoading() {
         });
     }
 
-    var iconChooser = buildIconChooser();
+    // Crate icon panel dialog ...
-    iconPanel = new IconPanel({button:$('topicIcon'), onStart:cleanScreenEvent, content:iconChooser});
+    iconPanel = new mindplot.widget.IconPanel({button:$('topicIcon'), onStart:cleanScreenEvent});
+    iconPanel.addEvent("selected", function(event) {
+        designer.addIconType2SelectedNode(event.iconType);
+    });
+
     // Register Events ...
     $(document).addEvent('keydown', designer.keyEventHandler.bindWithEvent(designer));
     $("ffoxWorkarroundInput").addEvent('keydown', designer.keyEventHandler.bindWithEvent(designer));
@@ -399,9 +403,9 @@ function afterMindpotLibraryLoading() {
         }
     }
     // Build panels ...
-    fontFamilyPanel();
+    var fontPanel = new mindplot.widget.FontFamilyPanel();
-    shapeTypePanel();
+//    shapeTypePanel();
-    fontSizePanel();
+//    fontSizePanel();
 
     // If not problem has occured, I close the dialod ...
     var closeDialog = function() {
@@ -412,36 +416,6 @@ function afterMindpotLibraryLoading() {
     }.delay(500);
 }
 
-function buildIconChooser() {
-    var content = new Element('div').setStyles({width:253,height:200,padding:5});
-    var count = 0;
-    for (var i = 0; i < mindplot.ImageIcon.prototype.ICON_FAMILIES.length; i = i + 1) {
-        var familyIcons = mindplot.ImageIcon.prototype.ICON_FAMILIES[i].icons;
-        for (var j = 0; j < familyIcons.length; j = j + 1) {
-            // Separate icons by line ...
-            var familyContent;
-            if ((count % 12) == 0) {
-                familyContent = new Element('div').inject(content);
-            }
-
-
-            var iconId = familyIcons[j];
-            var img = new Element('img').setStyles({width:16,height:16,padding:"0px 2px"}).inject(familyContent);
-            img.id = iconId;
-            img.src = mindplot.ImageIcon.prototype._getImageUrl(iconId);
-            img.addEvent('click', function(event, id) {
-                designer.addImage2SelectedNode(this.id);
-            }.bindWithEvent(img));
-            count = count + 1;
-        }
-
-    }
-
-    return content;
-}
-;
-
-
 function setCurrentColorPicker(colorPicker) {
     this.currentColorPicker = colorPicker;
 }
@@ -486,8 +460,7 @@ function buildMindmapDesigner() {
         }.delay(1000)
     }
 
-}
+};
-;
 
 function createColorPalette(container, onSelectFunction, event) {
     cleanScreenEvent();
@@ -515,20 +488,6 @@ function cleanScreenEvent() {
     iconPanel.close();
 }
 
-function fontFamilyPanel() {
-    var supportedFonts = ['times','arial','tahoma','verdana'];
-    var updateFunction = function(value) {
-        value = value.charAt(0).toUpperCase() + value.substring(1, value.length);
-        designer.setFont2SelectedNode(value);
-    };
-
-    var onFocusValue = function(selectedNode) {
-        return selectedNode.getFontFamily();
-    };
-
-    buildPanel('fontFamily', 'fontFamilyPanel', supportedFonts, updateFunction, onFocusValue);
-}
-
 function shapeTypePanel() {
     var shapeTypePanel = ['rectagle','rounded_rectagle','line','elipse'];
     var updateFunction = function(value) {