Default editor colors appear in the pallete.

Remove discard changes button.
2024-11-22 14:17:57 +01:00 · 2012-08-17 09:46:35 -03:00 · 2012-08-17 09:46:35 -03:00 · f6953aad9c
commit f6953aad9c
parent 4cd765cfb9
4 changed files with 109 additions and 50 deletions
--- a/mindplot/src/main/javascript/MainTopic.js
+++ b/mindplot/src/main/javascript/MainTopic.js
@ -17,14 +17,14 @@
 */

 mindplot.MainTopic = new Class({
-    Extends: mindplot.Topic,
-    initialize : function(model, options) {
+    Extends:mindplot.Topic,
+    initialize:function (model, options) {
        this.parent(model, options);
    },

-    INNER_RECT_ATTRIBUTES : {stroke:'0.5 solid #009900'},
+    INNER_RECT_ATTRIBUTES:{stroke:'0.5 solid #009900'},

-    _buildDragShape : function() {
+    _buildDragShape:function () {
        var innerShape = this._buildShape(this.INNER_RECT_ATTRIBUTES, this.getShapeType());
        var size = this.getSize();
        innerShape.setSize(size.width, size.height);
@ -40,7 +40,7 @@ mindplot.MainTopic = new Class({
        innerShape.setAttribute("fillColor", bgColor);

        //  Create group ...
-        var groupAttributes = {width: 100, height:100,coordSizeWidth:100,coordSizeHeight:100};
+        var groupAttributes = {width:100, height:100, coordSizeWidth:100, coordSizeHeight:100};
        var group = new web2d.Group(groupAttributes);
        group.appendChild(innerShape);

@ -56,11 +56,11 @@ mindplot.MainTopic = new Class({
    },


-    _defaultShapeType : function() {
+    _defaultShapeType:function () {
        return mindplot.model.TopicShape.LINE;
    },

-    updateTopicShape : function(targetTopic, workspace) {
+    updateTopicShape:function (targetTopic, workspace) {
        // Change figure based on the connected topic ...
        var model = this.getModel();
        var shapeType = model.getShapeType();
@ -73,7 +73,7 @@ mindplot.MainTopic = new Class({
        }
    },

-    disconnect : function(workspace) {
+    disconnect:function (workspace) {
        this.parent(workspace);
        var size = this.getSize();

@ -88,11 +88,11 @@ mindplot.MainTopic = new Class({
        innerShape.setVisibility(true);
    },

-    getTopicType : function() {
+    getTopicType:function () {
        return "MainTopic";
    },

-    _updatePositionOnChangeSize : function(oldSize, newSize) {
+    _updatePositionOnChangeSize:function (oldSize, newSize) {

        var xOffset = Math.round((newSize.width - oldSize.width) / 2);
        var pos = this.getPosition();
@ -106,7 +106,7 @@ mindplot.MainTopic = new Class({
        }
    },

-    workoutIncomingConnectionPoint : function(sourcePosition) {
+    workoutIncomingConnectionPoint:function (sourcePosition) {
        $assert(sourcePosition, 'sourcePoint can not be null');
        var pos = this.getPosition();
        var size = this.getSize();
@ -131,7 +131,7 @@ mindplot.MainTopic = new Class({

    },

-    workoutOutgoingConnectionPoint : function(targetPosition) {
+    workoutOutgoingConnectionPoint:function (targetPosition) {
        $assert(targetPosition, 'targetPoint can not be null');
        var pos = this.getPosition();
        var isAtRight = mindplot.util.Shape.isAtRight(targetPosition, pos);
@ -169,7 +169,7 @@ mindplot.MainTopic = new Class({
        return result;
    },

-    _getInnerPadding : function() {
+    _getInnerPadding:function () {
        var result;
        var parent = this.getModel().getParent();
        if (parent && mindplot.model.INodeModel.MAIN_TOPIC_TYPE == parent.getType()) {
@ -181,14 +181,14 @@ mindplot.MainTopic = new Class({
        return result;
    },

-    isConnectedToCentralTopic : function() {
+    isConnectedToCentralTopic:function () {
        var model = this.getModel();
        var parent = model.getParent();

        return parent && parent.getType() === mindplot.model.INodeModel.CENTRAL_TOPIC_TYPE;
    },

-    _defaultText : function() {
+    _defaultText:function () {
        var targetTopic = this.getOutgoingConnectedTopic();
        var result = "";
        if ($defined(targetTopic)) {
@ -198,50 +198,51 @@ mindplot.MainTopic = new Class({
                result = $msg('SUB_TOPIC');
            }
        } else {
-            result = $msg('ISOLATED_TOPIC');;
+            result = $msg('ISOLATED_TOPIC');
+            ;
        }
        return result;
    },

-    _defaultFontStyle : function() {
+    _defaultFontStyle:function () {
        var targetTopic = this.getOutgoingConnectedTopic();
        var result;
        if ($defined(targetTopic)) {
            if (targetTopic.getType() == mindplot.model.INodeModel.CENTRAL_TOPIC_TYPE) {
                result = {
                    font:"Arial",
-                    size: 8,
+                    size:8,
                    style:"normal",
                    weight:"normal",
-                    color:"#525c61"
+                    color:"rgb(82,92,97)"
                };
            } else {
                result = {
                    font:"Arial",
-                    size: 6,
+                    size:6,
                    style:"normal",
                    weight:"normal",
-                    color:"#525c61"
+                    color:"rgb(82,92,97)"
                };
            }
        } else {
            result = {
                font:"Verdana",
-                size: 8,
+                size:8,
                style:"normal",
                weight:"normal",
-                color:"#525c61"
+                color:"rgb(82,92,97)"
            };
        }
        return result;
    },

-    _defaultBackgroundColor : function() {
-        return "#E0E5EF";
+    _defaultBackgroundColor:function () {
+        return "rgb(224,229,239)";
    },

-    _defaultBorderColor : function() {
-        return '#023BB9';
+    _defaultBorderColor:function () {
+        return 'rgb(2,59,185)';
    }

 });
--- a/mindplot/src/main/javascript/widget/ColorPalettePanel.js
+++ b/mindplot/src/main/javascript/widget/ColorPalettePanel.js
@ -17,34 +17,34 @@
 */

 mindplot.widget.ColorPalettePanel = new Class({
-    Extends: mindplot.widget.ToolbarPaneItem,
+    Extends:mindplot.widget.ToolbarPaneItem,

-    initialize : function(buttonId, model, baseUrl) {
+    initialize:function (buttonId, model, baseUrl) {
        this._baseUrl = baseUrl;
        this.parent(buttonId, model);
        $assert($defined(baseUrl), "baseUrl can not be null");
    },

-    _load : function() {
+    _load:function () {

        if (!mindplot.widget.ColorPalettePanel._panelContent) {

            // Load all the CSS styles ...
-            Asset.css(this._baseUrl + '/colorPalette.css', {id: 'colorPaletteStyle', title: 'colorPalette'});
+            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() {
+                url:this._baseUrl + '/colorPalette.html',
+                method:'get',
+                async:false,
+                onRequest:function () {
                    console.log("loading ...");
                },
-                onSuccess: function(responseText) {
+                onSuccess:function (responseText) {
                    result = responseText;
                },
-                onFailure: function() {
+                onFailure:function () {
                    result = '<div>Sorry, your request failed :(</div>';
                }
            });
@ -56,15 +56,15 @@ mindplot.widget.ColorPalettePanel = new Class({
    },


-    buildPanel: function() {
-        var content = new Element("div", {'class':'toolbarPanel','id': this._buttonId + 'colorPalette'});
+    buildPanel:function () {
+        var content = new Element("div", {'class':'toolbarPanel', 'id':this._buttonId + 'colorPalette'});
        content.innerHTML = this._load();

        // Register on toolbar elements ...
        var colorCells = content.getElements('div[class=palette-colorswatch]');
        var model = this.getModel();
-        colorCells.each(function(elem) {
-            elem.addEvent('click', function() {
+        colorCells.each(function (elem) {
+            elem.addEvent('click', function () {
                var color = elem.getStyle("background-color");
                model.setValue(color);
                this.hide();
@ -74,12 +74,12 @@ mindplot.widget.ColorPalettePanel = new Class({
        return content;
    },

-    _updateSelectedItem : function() {
+    _updateSelectedItem:function () {
        var panelElem = this.getPanelElem();

        // Clear selected cell based on the color  ...
        var tdCells = panelElem.getElements("td[class='palette-cell palette-cell-selected']");
-        tdCells.each(function(elem) {
+        tdCells.each(function (elem) {
            elem.className = 'palette-cell';
        });

@ -87,9 +87,15 @@ mindplot.widget.ColorPalettePanel = new Class({
        var colorCells = panelElem.getElements('div[class=palette-colorswatch]');
        var model = this.getModel();
        var modelValue = model.getValue();
-        colorCells.each(function(elem) {
+        colorCells.each(function (elem) {
            var color = elem.getStyle("background-color");
-            if (modelValue == color) {
+            if (modelValue != null && modelValue[0] == 'r') {
+                modelValue = modelValue.rgbToHex();
+            }
+            console.log("modelValue:" + modelValue);
+            console.log("color:" + color);
+
+            if (modelValue != null && modelValue.toUpperCase() == color.toUpperCase()) {
                elem.parentNode.className = 'palette-cell palette-cell-selected';
            }
        });
--- a/mindplot/src/main/javascript/widget/colorPalette.html
+++ b/mindplot/src/main/javascript/widget/colorPalette.html
@ -1,6 +1,7 @@
 <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">
@ -46,8 +47,8 @@
            </td>
            <td class="palette-cell">
                <div class="palette-colorswatch"
-                     style="background-color: rgb(255, 255, 255);"
-                     title="RGB (255, 255, 255)"></div>
+                     style="background-color: rgb(254, 255, 255);"
+                     title="RGB (254, 255, 255)"></div>
            </td>
        </tr>
        </tbody>
@ -395,4 +396,55 @@
 </tbody>
 </table>
 </div>
+
+<div class="palette" id=":2p">
+    <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(255, 255, 255);"
+                     title="RGB (255, 255, 255)"></div>
+            </td>
+            <td class="palette-cell">
+                <div class="palette-colorswatch"
+                     style="background-color: rgb(224, 229, 239);"
+                     title="RGB (224, 229, 239)"></div>
+            </td>
+            <td class="palette-cell">
+                <div class="palette-colorswatch"
+                     style="background-color:rgb(80, 157, 192);"
+                     title="RGB (80, 157, 192)"></div>
+            </td>
+            <td class="palette-cell">
+                <div class="palette-colorswatch"
+                     style="background-color:rgb(57, 113, 177);"
+                     title="RGB (57, 113, 177)"></div>
+            </td>
+            <td class="palette-cell">
+                <div class="palette-colorswatch"
+                     style="background-color: rgb(2, 59, 185);"
+                     title="RGB (2, 59, 185)"></div>
+            </td>
+            <td class="palette-cell">
+                <div class="palette-colorswatch"
+                     style="background-color: rgb(244, 184, 45);"
+                     title="RGB (244, 184, 45)"></div>
+            </td>
+            <td class="palette-cell palette-cell-selected">
+                <div class="palette-colorswatch"
+                     style="background-color: rgb(241, 163, 39);"
+                     title="RGB (241, 163, 39)"></div>
+            </td>
+            <td class="palette-cell">
+                <div class="palette-colorswatch"
+                     style="background-color: rgb(82, 92, 97);"
+                     title="RGB (82, 92, 97)"></div>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+</div>
+
 </div>
--- a/wise-webapp/src/main/webapp/jsp/mindmapEditorToolbar.jsf
+++ b/wise-webapp/src/main/webapp/jsp/mindmapEditorToolbar.jsf
@ -6,9 +6,9 @@
            <div id="save" class="buttonOn">
                <img src="images/save.png"/>
            </div>
-            <div id="discard" class="buttonOn">
-                <img src="images/discard.png"/>
-            </div>
+            <%--<div id="discard" class="buttonOn">--%>
+                <%--<img src="images/discard.png"/>--%>
+            <%--</div>--%>
        </c:if>
        <div id="print" class="buttonOn">
            <img src="images/print.png"/>