Add a new color picker...

core-js/pom.xml

@@ -50,7 +50,7 @@
                                     <includes>
                                         <include>${basedir}/target/tmp/header-min.js</include>
                                         <include>${basedir}/target/tmp/ColorPicker-min.js</include>
-                                        <include>${basedir}/target/tmp/Loader-min.js</include>
+                                        <include>${basedir}/target/tmp/Functions-min.js</include>
                                         <include>${basedir}/target/tmp/log4js-min.js</include>
                                         <include>${basedir}/target/tmp/Monitor-min.js</include>
                                         <include>${basedir}/target/tmp/Point-min.js</include>
@@ -64,6 +64,7 @@
                             </aggregations>
                             <nomunge>true</nomunge>
                             <jswarn>false</jswarn>
+                            <force>true</force>
                         </configuration>
                     </execution>
                 </executions>

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

@@ -0,0 +1,26 @@
+/*
+ Function: $defined
+ Returns true if the passed in value/object is defined, that means is not null or undefined.
+
+ Arguments:
+ obj - object to inspect
+ */
+
+$defined = function(obj) {
+    return (obj != undefined);
+};
+
+
+$assert = function(assert, message) {
+    if (!$defined(assert) || !assert) {
+        var stack;
+        try {
+            null.eval();
+        } catch(e) {
+            stack = e;
+        }
+        wLogger.error(message + "," + stack);
+//        core.Logger.logError(message + "," + stack);
+
+    }
+};

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

@@ -24,18 +24,6 @@ core.Utils =
     }
 };
 
-/*
- Function: $defined
- Returns true if the passed in value/object is defined, that means is not null or undefined.
-
- Arguments:
- obj - object to inspect
- */
-function $defined(obj) {
-    return (obj != undefined);
-}
-;
-
 /**
  * http://kevlindev.com/tutorials/javascript/inheritance/index.htm
  * A function used to extend one class with another
@@ -58,21 +46,6 @@ objects.extend = function(subClass, baseClass) {
     subClass.superClass = baseClass.prototype;
 };
 
-$assert = function(assert, message) {
-    if (!$defined(assert) || !assert) {
-        var stack;
-        try {
-            null.eval();
-        } catch(e) {
-            stack = e;
-        }
-        wLogger.error(message + "," + stack);
-//        core.Logger.logError(message + "," + stack);
-    }
-
-};
-
-
 Math.sign = function(value) {
     return (value >= 0) ? 1 : -1;
 };

mindplot/pom.xml

@@ -176,6 +176,8 @@
                                               files="widget/ToolbarItem.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/"
                                               files="widget/ColorPickerPanel.js"/>
+                                    <filelist dir="${basedir}/src/main/javascript/"
+                                              files="widget/ColorPalettePanel.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/"
                                               files="widget/IconPanel.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/"
@@ -236,7 +238,6 @@
                                         <include>DragTopic-min.js</include>
                                         <include>DragManager-min.js</include>
                                         <include>DragPivot-min.js</include>
-                                        <include>TopicBoard-min.js</include>
                                         <include>CentralTopicBoard-min.js</include>
                                         <include>MainTopicBoard-min.js</include>
                                         <include>ConnectionLine-min.js</include>
@@ -324,6 +325,7 @@
                             </aggregations>
                             <nomunge>true</nomunge>
                             <jswarn>false</jswarn>
+                            <force>true</force>
                         </configuration>
                     </execution>
                 </executions>

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

@@ -0,0 +1,140 @@
+/*
+ *    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.ColorPalettePanel = new Class({
+    Extends: mindplot.widget.ToolbarItem,
+
+    initialize : function(buttonId, model, baseUrl) {
+        this.parent(buttonId, model);
+        $assert(baseUrl, "baseUrl can not be null");
+
+        this.getButtonElem().addEvent('click', function() {
+            // Is the panel being displayed ?
+            if (this.isVisible()) {
+                this.hide();
+            } else {
+                this.show();
+            }
+
+        }.bind(this));
+        this._baseUrl = baseUrl;
+    },
+
+    _load : function() {
+
+        if (!mindplot.widget.ColorPalettePanel._panelContent) {
+
+            // Load all the CSS styles ...
+            Asset.css(this._baseUrl + '/colorPalette.css', {id: 'colorPaletteStyle', title: 'colorPalette'});
+
+            // Load panel html fragment ...
+            var result;
+            var request = new Request({
+                url: this._baseUrl + '/colorPalette.html',
+                method: 'get',
+                async: false,
+                onRequest: function() {
+                    console.log("loading ...");
+                },
+                onSuccess: function(responseText) {
+                    result = responseText;
+                },
+                onFailure: function() {
+                    result = '<div>Sorry, your request failed :(</div>';
+                }
+            });
+            request.send();
+            mindplot.widget.ColorPalettePanel._panelContent = result;
+
+        }
+        return mindplot.widget.ColorPalettePanel._panelContent;
+    },
+
+    _init : function() {
+        if (!this._panelContent) {
+            var buttonElem = this.getButtonElem();
+
+            // Add panel content ..
+            var panelElem = this.buildPanel();
+            panelElem.setStyle('display', 'none');
+            panelElem.inject(buttonElem);
+
+            // Register on toolbar elements ...
+            var colorCells = panelElem.getElements('div[class=palette-colorswatch]');
+            var model = this.getModel();
+            colorCells.forEach(function(elem) {
+                elem.addEvent('click', function() {
+                    var color = elem.getStyle("background-color");
+                    model.setValue(color);
+                });
+            });
+            this._panelId = panelElem.id;
+            this._panelContent = true;
+        }
+
+    },
+
+    buildPanel: function() {
+        var content = new Element("div", {'class':'toolbarPanel','id': this._buttonId + 'colorPalette'});
+        content.innerHTML = this._load();
+        return content;
+    },
+
+    _getPanelElem : function () {
+        this._init();
+        return $(this._panelId);
+    },
+
+    show : function() {
+       if (!this.isVisible()) {
+
+            this.parent();
+            var panelElem = this._getPanelElem();
+
+            // Clear selected cell based on the color  ...
+            var tdCells = panelElem.getElements("td[class='palette-cell palette-cell-selected']");
+            tdCells.forEach(function(elem) {
+                elem.className = 'palette-cell';
+            });
+
+            // Mark the cell as selected ...
+            var colorCells = panelElem.getElements('div[class=palette-colorswatch]');
+            var model = this.getModel();
+            colorCells.forEach(function(elem) {
+                var color = elem.getStyle("background-color");
+                if (model.getValue() == color) {
+                    elem.parentNode.className = 'palette-cell palette-cell-selected';
+                }
+            });
+
+            // Finally, display the dialog ...
+            panelElem.setStyle('display', 'block');
+        }
+    },
+
+    hide : function() {
+        if (this.isVisible()) {
+            this.parent();
+            this._getPanelElem().setStyle('display', 'none');
+        }
+    },
+
+    isVisible : function() {
+        return this._getPanelElem().getStyle('display') == 'block';
+    }
+});

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

@@ -16,7 +16,7 @@
  *   limitations under the License.
  */
 
-mindplot.widget.ColorPicker = new Class({
+mindplot.widget.ColorPickerPanel = new Class({
     Extends: mindplot.widget.ToolbarItem,
     initialize : function(buttonId, model) {
         this.parent(buttonId, model);
@@ -29,7 +29,7 @@ mindplot.widget.ColorPicker = new Class({
             }.bind(this),
             onChange: function(color) {
                 this.getModel().setValue(color.hex);
-            },
+            }.bind(this),
             onComplete: function() {
                 this.hide();
             }.bind(this)

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

@@ -39,16 +39,17 @@ mindplot.widget.IconPanel = new Class({
         var buttonElem = this.getButtonElem();
 
         var coord = buttonElem.getCoordinates();
-        var top = buttonElem.getTop() + coord.height + 2;
+        var top = buttonElem.getTop() + coord.height + 7;
-        var left = buttonElem.getLeft();
+        var left = buttonElem.getLeft() - 6;
 
         panel.setStyles({
                 width:this.options.initialWidth,
-                height:0,position:'absolute',
+                height:0,
+                position:'absolute',
                 top:top,
                 left:left,
-                background:'#e5e5e5',
+                background:'#ffffff',
-                border:'1px solid #BBB4D6',
+                'border-color':'#CCC #666 #666 #CCC;',
                 zIndex:20,
                 overflow:'hidden'}
         );

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

@@ -20,6 +20,8 @@ mindplot.widget.Menu = new Class({
     initialize : function(designer, containerId) {
         $assert(designer, "designer can not be null");
         $assert(containerId, "containerId can not be null");
+        // @Todo: Remove hardcode ...
+        var baseUrl = "/mindplot/src/main/javascript/widget";
 
         // Init variables ...
         this._designer = designer;
@@ -29,18 +31,19 @@ mindplot.widget.Menu = new Class({
         // Stop event propagation ...
         $(this._containerId).addEvent('click', function(event) {
             event.stopPropagation();
+            return false;
         });
 
         $(this._containerId).addEvent('dblclick', function(event) {
             event.stopPropagation();
+            return false;
         });
 
         // Create panels ...
         var fontFamilyModel = {
             getValue: function() {
                 var nodes = designer.getSelectedNodes();
-                var length = nodes.length;
+                if (nodes.length == 1) {
-                if (length == 1) {
                     return nodes[0].getFontFamily();
                 }
             },
@@ -55,8 +58,7 @@ mindplot.widget.Menu = new Class({
         var fontSizeModel = {
             getValue: function() {
                 var nodes = designer.getSelectedNodes();
-                var length = nodes.length;
+                if (nodes.length == 1) {
-                if (length == 1) {
                     return nodes[0].getFontSize();
                 }
             },
@@ -69,8 +71,7 @@ mindplot.widget.Menu = new Class({
         var topicShapeModel = {
             getValue: function() {
                 var nodes = designer.getSelectedNodes();
-                var length = nodes.length;
+                if (nodes.length == 1) {
-                if (length == 1) {
                     return nodes[0].getShapeType();
                 }
             },
@@ -95,38 +96,47 @@ mindplot.widget.Menu = new Class({
         var topicColorModel =
         {
             getValue : function() {
+                var nodes = designer.getSelectedNodes();
+                if (nodes.length == 1) {
+                    return nodes[0].getBackgroundColor();
+                }
                 return null;
             },
             setValue : function (hex) {
                 designer.setBackColor2SelectedNode(hex);
             }
         };
-        this._toolbarElems.push(new mindplot.widget.ColorPicker('topicColor', topicColorModel));
+        this._toolbarElems.push(new mindplot.widget.ColorPalettePanel('topicColor', topicColorModel, baseUrl));
 
         // Border color item ...
         var borderColorModel =
         {
             getValue : function() {
-                return null;
+                var nodes = designer.getSelectedNodes();
+                if (nodes.length == 1) {
+                    return nodes[0].getBorderColor();
+                }
             },
             setValue : function (hex) {
                 designer.setBorderColor2SelectedNode(hex);
             }
         };
-        this._toolbarElems.push(new mindplot.widget.ColorPicker('topicBorder', borderColorModel));
+        this._toolbarElems.push(new mindplot.widget.ColorPalettePanel('topicBorder', borderColorModel, baseUrl));
 
         // Font color item ...
         var fontColorModel =
         {
             getValue : function() {
-                return null;
+                var nodes = designer.getSelectedNodes();
+                if (nodes.length == 1) {
+                    return nodes[0].getFontColor();
+                }
             },
             setValue : function (hex) {
                 designer.setFontColor2SelectedNode(hex);
             }
         };
-        var fontColorPicker = new mindplot.widget.ColorPicker('fontColor', fontColorModel);
+        this._toolbarElems.push(new mindplot.widget.ColorPalettePanel('fontColor', fontColorModel, baseUrl));
-        this._toolbarElems.push(fontColorPicker);
 
         // Register on close events ...
         this._toolbarElems.forEach(function(elem) {
@@ -198,8 +208,6 @@ mindplot.widget.Menu = new Class({
             }
 
         });
-
-
     },
 
     clear : function() {

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

@@ -41,6 +41,7 @@ mindplot.widget.ToolbarPanel = new Class({
             elem.addEvent('click', function(event) {
                 var value = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id;
                 this.getModel().setValue(value);
+                event.stopPropagation();
                 this.hide();
             }.bind(this));
         }.bind(this));
@@ -54,31 +55,31 @@ mindplot.widget.ToolbarPanel = new Class({
             } else {
                 this.show();
             }
-
         }.bind(this));
         return panelElem.id;
     },
 
     show : function() {
-        this.parent();
+        if (!this.isVisible()) {
-
+            this.parent();
-        var menuElems = $(this._panelId).getElements('div');
+            var menuElems = $(this._panelId).getElements('div');
-        var value = this.getModel().getValue();
+            var value = this.getModel().getValue();
-        menuElems.forEach(function(elem) {
+            menuElems.forEach(function(elem) {
-            var elemValue = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id;
+                var elemValue = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id;
-            if (elemValue == value)
+                if (elemValue == value)
-                elem.className = "toolbarPanelLinkSelectedLink";
+                    elem.className = "toolbarPanelLinkSelectedLink";
-            else
+                else
-                elem.className = "toolbarPanelLink";
+                    elem.className = "toolbarPanelLink";
-        });
+            });
-        $(this._panelId).setStyle('display', 'block');
+            $(this._panelId).setStyle('display', 'block');
-
+        }
     },
 
     hide : function() {
-        this.parent();
+        if (this.isVisible()) {
-        $(this._panelId).setStyle('display', 'none');
+            this.parent();
-
+            $(this._panelId).setStyle('display', 'none');
+        }
     },
 
     isVisible : function() {

mindplot/src/main/javascript/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;
+}

mindplot/src/main/javascript/widget/colorPalette.html

@@ -0,0 +1,401 @@
+<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: #525c61;"
+                 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>

mindplot/src/test/javascript/static/palette.html

@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+
+<html>
+<head>
+    <script type='text/javascript'
+            src='../../../../../wise-doc/src/main/webapp/js/mootools-core-1.3.2-full-compat.js'></script>
+    <script type='text/javascript'
+            src='../../../../../wise-doc/src/main/webapp/js/mootools-more-1.3.2.1-yui.js'></script>
+
+
+    <script type='text/javascript' src='../../../main/javascript/header.js'></script>
+    <script type='text/javascript' src='../../../../../core-js/target/classes/core.js'></script>
+
+    <script type='text/javascript' src='../../../main/javascript/widget/ToolbarItem.js'></script>
+    <script type='text/javascript' src='../../../main/javascript/widget/ColorPalettePanel.js'></script>
+
+    <script type='text/javascript'>
+        window.addEvent("load", function(e) {
+            var model = {
+                getValue: function() {
+
+                },
+                setValue : function(value) {
+                    console.log("value:" + value);
+                }
+            };
+            var palette = new mindplot.widget.ColorPalette('myButton', model,"/mindplot/src/main/javascript/widget");
+        });
+
+    </script>
+
+</head>
+<body>
+
+<div id="myButton" style="border: 1px red solid">
+    The button
+</div>
+
+
+</body>
+</html>

web2d/pom.xml

@@ -86,6 +86,7 @@
                             </aggregations>
                             <nomunge>true</nomunge>
                             <jswarn>false</jswarn>
+                            <force>true</force>
                         </configuration>
                     </execution>
                 </executions>

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

@@ -1,242 +0,0 @@
-.bubbleContainer {
-    position: absolute;
-    z-index: 50;
-    opacity: 0;
-    width: auto;
-    overflow: hidden;
-    padding: 20px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
-    background-color: #BCCCE1;
-    -moz-box-shadow: 5px 5px 5px #888;
-    -webkit-box-shadow: 5px 5px 5px #888;
-    box-shadow: 5px 5px 5px #888;
-    border: 1px solid black;
-}
-
-.bublePartContainer {
-    clear: both;
-}
-
-.bubblePart {
-    float: left;
-}
-
-.bubbleLeft {
-    background: transparent url(../images/bubbleTip_left.png) top left;
-    width: 12px;
-    height: 4px;
-}
-
-.bubbleCenter {
-    background-color: #362d2e;
-    text-align: center;
-    z-index: 60;
-}
-
-.bubbleRight {
-    background: transparent url(../images/bubbleTip_right.png) top left;
-    width: 23px;
-    height: 4px;
-}
-
-.bubbleTopLeft {
-    background: transparent url(../images/bubbleTip_corner_top_left.png) top left;
-    width: 12px;
-    height: 12px;
-}
-
-.bubbleHintTopLeft {
-    background: transparent url(../images/bubbleTip_pico_corner_top_left.png) top left;
-    width: 12px;
-    height: 57px;
-}
-
-.bubbleTopRight {
-    background: transparent url(../images/bubbleTip_corner_top_right.png) top left;
-    width: 23px;
-    height: 12px;
-}
-
-.bubbleHintTopRight {
-    background: transparent url(../images/bubbleTip_pico_corner_top_right.png) top left;
-    width: 23px;
-    height: 57px;
-}
-
-.bubbleTop {
-    background: transparent url(../images/bubbleTip_top.png) top left;
-    height: 12px;
-    width: 4px;
-}
-
-.bubbleHintTop {
-    background: transparent url(../images/bubbleTip_pico_top.png) top left;
-    height: 57px;
-    width: 4px;
-}
-
-.bubbleBottomLeft {
-    background: transparent url(../images/bubbleTip_corner_bottom_left.png) top left;
-    width: 12px;
-    height: 26px;
-}
-
-.bubbleHintBottomLeft {
-    background: transparent url(../images/bubbleTip_pico_corner_bottom_left.png) top left;
-    width: 12px;
-    height: 62px;
-}
-
-.bubbleBottomRight {
-    background: transparent url(../images/bubbleTip_corner_bottom_right.png) top left;
-    width: 23px;
-    height: 26px;
-}
-
-.bubbleHintBottomRight {
-    background: transparent url(../images/bubbleTip_pico_corner_bottom_right.png) top left;
-    width: 23px;
-    height: 62px;
-}
-
-.bubbleBottom {
-    background: transparent url(../images/bubbleTip_bottom.png) top left;
-    height: 26px;
-    width: 4px;
-}
-
-.bubbleHintBottom {
-    background: transparent url(../images/bubbleTip_pico_bottom.png) top left;
-    height: 62px;
-    width: 4px;
-}
-
-.bubbleBottomHint {
-    background: transparent url(../images/bubbleTip_bottom_pico.png) top left;
-    width: 58px;
-    height: 62px;
-}
-
-.bubbleTopHint {
-    background: transparent url(../images/bubbleTip_top_pico.png) top left;
-    width: 58px;
-    height: 57px;
-}
-
-.bubbleLeftBlue {
-    background: transparent url(../images/bubbleTip_left_blue.gif) top left;
-    width: 12px;
-    height: 4px;
-}
-
-.bubbleCenterBlue {
-    background-color: #BCCCE1;
-    z-index: 60;
-    overflow: hidden;
-}
-
-.bubbleRightBlue {
-    background: transparent url(../images/bubbleTip_right_blue.gif) top left;
-    width: 23px;
-    height: 3px;
-}
-
-.bubbleTopLeftBlue {
-    background: transparent url(../images/bubbleTip_corner_top_left_blue.gif) top left;
-    width: 12px;
-    height: 18px;
-}
-
-.bubbleHintTopLeftBlue {
-    background: transparent url(../images/bubbleTip_pico_corner_top_left_blue.gif) top left;
-    width: 13px;
-    height: 61px;
-}
-
-.bubbleTopRightBlue {
-    background: transparent url(../images/bubbleTip_corner_top_right_blue.gif) top left;
-    width: 23px;
-    height: 18px;
-}
-
-.bubbleHintTopRightBlue {
-    background: transparent url(../images/bubbleTip_pico_corner_top_right_blue.gif) top left;
-    width: 23px;
-    height: 61px;
-}
-
-.bubbleTopBlue {
-    background: transparent url(../images/bubbleTip_top_blue.gif) top left;
-    height: 18px;
-    width: 3px;
-}
-
-.bubbleHintTopBlue {
-    background: transparent url(../images/bubbleTip_pico_top_blue.gif) top left;
-    height: 61px;
-    width: 3px;
-}
-
-.bubbleBottomLeftBlue {
-    background: transparent url(../images/bubbleTip_corner_bottom_left_blue.gif) top left;
-    width: 13px;
-    height: 32px;
-}
-
-.bubbleHintBottomLeftBlue {
-    background: transparent url(../images/bubbleTip_pico_corner_bottom_left_blue.gif) top left;
-    width: 12px;
-    height: 62px;
-}
-
-.bubbleBottomRightBlue {
-    background: transparent url(../images/bubbleTip_corner_bottom_right_blue.gif) top left;
-    width: 23px;
-    height: 32px;
-}
-
-.bubbleHintBottomRightBlue {
-    background: transparent url(../images/bubbleTip_pico_corner_bottom_right_blue.gif) top left;
-    width: 23px;
-    height: 62px;
-}
-
-.bubbleBottomBlue {
-    background: transparent url(../images/bubbleTip_bottom_blue.gif) top left;
-    height: 32px;
-    width: 3px;
-}
-
-.bubbleHintBottomBlue {
-    background: transparent url(../images/bubbleTip_pico_bottom_blue.gif) top left;
-    height: 62px;
-    width: 3px;
-}
-
-.bubbleBottomHintBlue {
-    background: transparent url(../images/bubbleTip_bottom_pico_blue.png) top left;
-    width: 58px;
-    height: 62px;
-}
-
-.bubbleTopHintBlue {
-    background: transparent url(../images/bubbleTip_top_pico_blue.png) top left;
-    width: 58px;
-    height: 61px;
-}
-
-.btn-primary {
-    background: #3399CC;
-    border: 1px solid #006699;
-    color: #FFFFFF;
-    font-family: arial, helvetica, sans-serif;
-    font-size: 72%;
-    font-style: normal;
-    font-variant: normal;
-    font-weight: normal;
-    line-height: normal;
-    overflow: visible;
-    padding: 2px 8px 1px;
-    vertical-align: middle;
-}

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

@@ -400,8 +400,11 @@ div#fontColor {
 
 .toolbarPanel {
     color: black;
-    border: 1px solid #bbb4d6;
+    border-color: #CCC #666 #666 #CCC;
-    background: #E5E5E5;
+    border-style: solid;
+    border-width: 1px;
+    background: white;
+    padding: 2px;
     display: none;
     position: absolute;
     z-index: 4;

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

@@ -10,7 +10,6 @@
     <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
     <title>WiseMapping - Editor </title>
     <link rel="stylesheet" type="text/css" href="../css/editor.css"/>
-    <link rel="stylesheet" type="text/css" href="../css/bubble.css"/>
 
     <!--<script type='text/javascript' src='../js/wiseLibrary.js'></script>-->
 
@@ -21,10 +20,6 @@
     <!--<script type='text/javascript' src='../js/windoo.js'></script>-->
 
     <!--<script type='text/javascript' src='../js/wiseEditorLibrary.js'></script>-->
-    <!--<script type='text/javascript' src='../js/IconPanel.js'></script>-->
-    <!--<script type='text/javascript' src='../js/mooRainbow.js'></script>-->
-
-
     <script type='text/javascript' src='../../../../../wise-webapp/src/main/webapp/js/mooRainbow.js'></script>
 
     <script type='text/javascript' src='../js/core.js'></script>