Partially supported multilines.

mindplot/pom.xml

@@ -78,7 +78,8 @@
                                     <filelist dir="${basedir}/src/main/javascript/" files="RelationshipLine.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/" files="DragTopicPositioner.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/" files="TextEditor.js"/>
-                                    <filelist dir="${basedir}/src/main/javascript/" files="RichTextEditor.js"/>
+                                    <filelist dir="${basedir}/src/main/javascript/" files="MultilineTextEditor.js"/>
+                                    <!--<filelist dir="${basedir}/src/main/javascript/" files="RichTextEditor.js"/>-->
                                     <filelist dir="${basedir}/src/main/javascript/" files="TextEditorFactory.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/" files="VariableDistanceBoard.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/" files="util/Shape.js"/>

mindplot/src/main/javascript/CentralTopic.js

@@ -19,8 +19,8 @@
 mindplot.CentralTopic = new Class({
 
     Extends:mindplot.Topic,
-    initialize: function(model,options) {
+    initialize: function(model, options) {
-        this.parent(model,options);
+        this.parent(model, options);
     },
 
     _registerEvents : function() {
@@ -36,6 +36,10 @@ mindplot.CentralTopic = new Class({
         return this.getPosition();
     },
 
+    _getInnerPadding : function() {
+        return 9;
+    },
+
     getTopicType : function() {
         return mindplot.model.NodeModel.CENTRAL_TOPIC_TYPE;
     },

mindplot/src/main/javascript/Icon.js

@@ -21,7 +21,7 @@ mindplot.Icon = new Class({
         $assert(url, 'topic can not be null');
         this._image = new web2d.Image();
         this._image.setHref(url);
-        this._image.setSize(12, 12);
+        this._image.setSize(100,100);
     },
 
     getImage : function() {
@@ -58,4 +58,8 @@ mindplot.Icon = new Class({
     }
 });
 
+mindplot.Icon.HEIGHT = 100;
+
+
+
 

mindplot/src/main/javascript/IconGroup.js

@@ -17,76 +17,65 @@
  */
 
 mindplot.IconGroup = new Class({
-    initialize : function(topic) {
+    initialize : function(topicId, iconSize) {
-        var offset = topic.getOffset();
+        $assert(topicId, "topicId can not be null");
+        $assert(iconSize, "iconSize can not be null");
+
+        this._icons = [];
+        this._group = new web2d.Group({width: 0, height:iconSize,x: 0, y:0, coordSizeWidth:0,coordSizeHeight:100});
+        this._removeTip = new mindplot.IconGroup.RemoveTip(this._group, topicId);
+        this.seIconSize(iconSize, iconSize);
 
-        this.options = {
-            width:0,
-            height:0,
-            x:offset.x / 2,
-            y:offset.y,
-            icons:[],
-            topic:topic,
-            nativeElem:new web2d.Group({width: 2, height:2,x: offset, y:offset, coordSizeWidth:1,coordSizeHeight:1})
-        };
-        this.updateIconGroupPosition();
         this.registerListeners();
 
-        this._removeTip = new mindplot.IconGroup.RemoveTip(this.options.nativeElem, this);
-
     },
 
     setPosition : function(x, y) {
-        this.options.x = x;
+        this._group.setPosition(x, y);
-        this.options.y = y;
-        this.options.nativeElem.setPosition(x, y);
     },
 
     getPosition : function() {
-        return {x:this.options.x, y:this.options.y};
+        return this._group.getPosition();
+    },
+
+    getNativeElement : function() {
+        return this._group;
     },
 
     setSize : function(width, height) {
-        this.options.width = width;
+        this._group.setSize(width, height);
-        this.options.height = height;
-        this.options.nativeElem.setSize(width, height);
-        this.options.nativeElem.setCoordSize(width, height);
     },
 
     getSize : function() {
-        return {width:this.options.width, height:this.options.height};
+        return this._group.getSize();
+    },
+
+    seIconSize : function(width, height) {
+        this._iconSize = {width:width,height:height};
+        this._group.setCoordSize(width / mindplot.Icon.HEIGHT, height / mindplot.Icon.HEIGHT);
     },
 
     addIcon : function(icon) {
         $defined(icon, "icon is not defined");
         icon.setGroup(this);
-        var newIcon = icon.getImage();
-        var nativeElem = this.options.nativeElem;
 
-        var iconSize = newIcon.getSize();
+        var imageShape = icon.getImage();
-        var size = nativeElem.getSize();
+        var groupShape = this._group;
-        newIcon.setPosition(size.width, 0);
-        this.options.icons.extend([icon]);
 
-        nativeElem.appendChild(newIcon);
+        var iconsLength = this._icons.length;
+        imageShape.setPosition(mindplot.Icon.HEIGHT * iconsLength, 0);
+        groupShape.setSize((iconsLength + 1) * this._iconSize.width, this._iconSize.height);
+        groupShape.setCoordSize((iconsLength + 1 ) * mindplot.Icon.HEIGHT, mindplot.Icon.HEIGHT);
 
-        size.width = size.width + iconSize.width;
+        groupShape.appendChild(imageShape);
-        if (iconSize.height > size.height) {
+        this._icons.push(icon);
-            size.height = iconSize.height;
-        }
-
-        nativeElem.setCoordSize(size.width, size.height);
-        nativeElem.setSize(size.width, size.height);
-        this.options.width = size.width;
-        this.options.height = size.height;
 
         // Register event for the group ..
-        var topicId = this.options.topic.getId();
+        this._removeTip.decorate(this._topicId, icon);
-        this._removeTip.decorate(topicId, icon);
     },
 
     getIcons : function() {
-        return this.options.icons;
+        return this._icons;
     },
 
     removeIcon : function(url) {
@@ -101,7 +90,7 @@ mindplot.IconGroup = new Class({
 
     getIcon : function(url) {
         var result = null;
-        this.options.icons.each(function(el) {
+        this._icons.each(function(el) {
             var nativeImage = el.getImage();
             if (nativeImage.getHref() == url) {
                 result = el;
@@ -112,7 +101,7 @@ mindplot.IconGroup = new Class({
 
     getImageIcon : function(icon) {
         var result = null;
-        this.options.icons.each(function(el) {
+        this._icons.each(function(el) {
             if (result == null && $defined(el.getModel().isIconModel) && el.getId() == icon.getId() && el.getUiId() == icon.getUiId()) {
                 result = el;
             }
@@ -122,7 +111,7 @@ mindplot.IconGroup = new Class({
 
     findIconFromModel : function(iconModel) {
         var result = null;
-        this.options.icons.each(function(el) {
+        this._icons.each(function(el) {
             var elModel = el.getModel();
             if (result == null && $defined(elModel.isIconModel) && elModel.getId() == iconModel.getId()) {
                 result = el;
@@ -137,61 +126,34 @@ mindplot.IconGroup = new Class({
     },
 
     _removeIcon : function(icon) {
-        var nativeImage = icon.getImage();
-        this.options.icons.erase(icon);
-        var iconSize = nativeImage.getSize();
-        var size = this.options.nativeElem.getSize();
-        var position = nativeImage.getPosition();
-        this.options.icons.each(function(icon) {
-            var img = icon.getImage();
-            var pos = img.getPosition();
-            if (pos.x > position.x) {
-                img.setPosition(pos.x - iconSize.width, 0);
-            }
-        }.bind(this));
-        size.width = size.width - iconSize.width;
-        this.setSize(size.width, size.height);
-    },
 
-    getNativeElement : function() {
+        // remove from model...
-        return this.options.nativeElem;
+        this._icons.forEach(function(icon) {
+            this._group.removeChild(icon.getImage());
+        }.bind(this));
+        this._icons.erase(icon);
+
+        // Add all again ...
+        this._icons.forEach(function(icon) {
+            this.addIcon(icon);
+        }.bind(this));
     },
 
     moveToFront : function() {
-        this.options.nativeElem.moveToFront();
+        this._group.moveToFront();
     },
 
     registerListeners : function() {
-        this.options.nativeElem.addEvent('click', function(event) {
+        this._group.addEvent('click', function(event) {
             // Avoid node creation ...
             event.stopPropagation();
 
         });
 
-        this.options.nativeElem.addEvent('dblclick', function(event) {
+        this._group.addEvent('dblclick', function(event) {
             event.stopPropagation();
 
         });
-    },
-
-    getTopic : function() {
-        return this.options.topic;
-    },
-
-    updateIconGroupPosition : function() {
-        var offsets = this._calculateOffsets();
-        this.setPosition(offsets.x, offsets.y);
-    },
-
-    _calculateOffsets : function() {
-        var offset = this.options.topic.getOffset();
-        var text = this.options.topic.getTextShape();
-
-        var sizeHeight = text.getHtmlFontSize();
-        var yOffset = offset;
-
-        yOffset = text.getPosition().y + (sizeHeight - 18) / 2 + 1;
-        return {x:offset, y:yOffset};
     }
 });
 
@@ -215,7 +177,7 @@ mindplot.IconGroup.RemoveTip = new Class({
 
             // Now, let move the position the icon...
             var pos = icon.getPosition();
-            icon.setSize(15, 15);
+//            icon.setSize(15, 15);
 
             // Register events ...
             var widget = this._buildWeb2d();
@@ -231,7 +193,7 @@ mindplot.IconGroup.RemoveTip = new Class({
                 this.hide();
             }.bind(this));
 
-            widget.setPosition(pos.x + 11, pos.y - 11);
+            widget.setPosition(pos.x + 80, pos.y - 50);
             this._container.appendChild(widget);
 
             // Setup current element ...
@@ -259,7 +221,7 @@ mindplot.IconGroup.RemoveTip = new Class({
             var widget = this._widget;
             var close = function() {
 
-                icon.setSize(12, 12);
+//                icon.setSize(12, 12);
                 this._activeIcon = null;
 
                 this._container.removeChild(widget);
@@ -319,17 +281,21 @@ mindplot.IconGroup.RemoveTip = new Class({
         line2.setTo(9, 1);
         result.appendChild(line2);
 
-        // Some sily events ...
+        // Some events ...
         result.addEvent('mouseover', function() {
             innerRect.setFill('#CC0033');
         });
         result.addEvent('mouseout', function() {
             innerRect.setFill('gray');
         });
+
+        result.setSize(50, 50);
         return result;
     },
 
     decorate : function(topicId, icon) {
+
+        if (!icon.__remove) {
             icon.addEvent('mouseover', function() {
                 this.show(topicId, icon);
             }.bind(this));
@@ -337,6 +303,8 @@ mindplot.IconGroup.RemoveTip = new Class({
             icon.addEvent('mouseout', function() {
                 this.hide();
             }.bind(this))
+            icon.__remove = true;
+        }
     }
 
 });

mindplot/src/main/javascript/ImageIcon.js

@@ -22,7 +22,7 @@ mindplot.ImageIcon = new Class({
         $assert(iconModel, 'iconModel can not be null');
         $assert(topic, 'topic can not be null');
 
-        this._topic = topic;
+        this._topicId = topic.getId();
         this._iconModel = iconModel;
 
         // @Todo: Read only must be a property ...
@@ -108,7 +108,7 @@ mindplot.ImageIcon = new Class({
 
     remove : function() {
         var actionDispatcher = mindplot.ActionDispatcher.getInstance();
-        actionDispatcher.removeIconFromTopic(this._topic.getId(), this._iconModel);
+        actionDispatcher.removeIconFromTopic(this._topicId, this._iconModel);
     }
 });
 

mindplot/src/main/javascript/LocalActionDispatcher.js

@@ -118,7 +118,7 @@ mindplot.LocalActionDispatcher = new Class({
             var result = topic.getFontFamily();
             topic.setFontFamily(fontFamily, true);
 
-            topic.updateNode.delay(0, topic);
+            topic._adjustShapes.delay(0, topic);
             return result;
         };
 
@@ -179,7 +179,7 @@ mindplot.LocalActionDispatcher = new Class({
             var result = topic.getFontSize();
             topic.setFontSize(size, true);
 
-            topic.updateNode.delay(0, topic);
+            topic._adjustShapes.delay(0, topic);
             return result;
         };
 
@@ -209,7 +209,7 @@ mindplot.LocalActionDispatcher = new Class({
             var weight = (result == "bold") ? "normal" : "bold";
             topic.setFontWeight(weight, true);
 
-            topic.updateNode.delay(0, topic);
+            topic._adjustShapes.delay(0, topic);
             return result;
         };
 
@@ -292,7 +292,7 @@ mindplot.CommandContext = new Class({
             }
         }.bind(this));
         return result;
-    },
+    }
 });
 
 

mindplot/src/main/javascript/MainTopic.js

@@ -235,6 +235,17 @@ mindplot.MainTopic = new Class({
         return result;
     },
 
+    _getInnerPadding : function() {
+        var result;
+        var parent = this.getModel().getParent();
+        if (parent && mindplot.model.NodeModel.MAIN_TOPIC_TYPE == parent.getType()) {
+            result = 3;
+        }
+        else {
+            result = 4;
+        }
+        return result;
+    },
 
     isConnectedToCentralTopic : function() {
         var model = this.getModel();

mindplot/src/main/javascript/MultilineTextEditor.js

@@ -0,0 +1,271 @@
+/*
+ *    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.MultilineTextEditor = new Class({
+    initialize:function(topic) {
+        this._topic = topic;
+    },
+
+    _buildEditor : function() {
+
+        this._size = {width:500, height:100};
+        var result = new Element('div');
+        result.setStyles({
+                position:"absolute",
+                display: "none",
+                zIndex: "8",
+                width:"500px",
+                height:"100px"}
+        );
+
+
+        var inputContainer = new Element('div');
+        inputContainer.setStyles({
+            border:"none",
+            overflow:"auto"
+        });
+        inputContainer.inject(result);
+
+        var inputText = new Element('textarea',
+            {   rows:2,
+                tabindex:'-1',
+                value:""}
+        );
+        inputText.setStyles({
+            border:"none",
+            background:"transparent"
+        });
+        inputText.inject(inputContainer);
+
+        var spanContainer = new Element('div');
+        spanContainer.setStyle('visibility', "hidden");
+        spanContainer.inject(result);
+
+        var spanElem = new Element('span', {tabindex:"-1"});
+        spanElem.setStyle('white-space', "nowrap");
+        spanElem.setStyle('nowrap', 'nowrap');
+        spanElem.inject(spanContainer);
+
+
+        return result;
+    },
+
+    _registerEvents : function(divElem) {
+        var inputElem = this._getTextareaElem();
+        var spanElem = this._getSpanElem();
+
+        divElem.addEvent('keydown', function (event) {
+            switch (event.key) {
+                case 'esc':
+                    this.close(false);
+                    break;
+                case 'enter':
+                    if (event.meta || event.control) {
+
+                        // @todo: Enters must be in any place ...
+                        inputElem.value = inputElem.value + "\n";
+                    }
+                    else {
+                        this.close(true);
+                    }
+                    break;
+                default:
+                    spanElem.innerHTML = inputElem.value;
+                    var size = inputElem.value.length + 1;
+                    inputElem.size = size;
+                    if (spanElem.offsetWidth > (parseInt(divElem.style.width) - 100)) {
+                        divElem.style.width = (spanElem.offsetWidth + 100) + "px";
+                    }
+                    break;
+            }
+            event.stopPropagation();
+        }.bind(this));
+
+        // If the user clicks on the input, all event must be ignored ...
+        divElem.addEvent('click', function(event) {
+            event.stopPropagation();
+        });
+        divElem.addEvent('dblclick', function(event) {
+            event.stopPropagation();
+        });
+        divElem.addEvent('mousedown', function(event) {
+            event.stopPropagation();
+        });
+    },
+
+    isVisible : function () {
+        return $defined(this._divElem) && this._divElem.getStyle('display') == 'block';
+    },
+
+    _updateModel : function () {
+
+        if (this._topic.getText() != this._getText()) {
+            var text = this._getText();
+            var topicId = this._topic.getId();
+
+            var actionDispatcher = mindplot.ActionDispatcher.getInstance();
+            actionDispatcher.changeTextOnTopic([topicId], text);
+        }
+    },
+
+    show : function (text) {
+
+        if (!this.isVisible()) {
+            //Create editor ui
+            var editorElem = this._buildEditor();
+            editorElem.inject($(document.body));
+
+            this._divElem = editorElem;
+            this._registerEvents(editorElem);
+            this._showEditor(text);
+        }
+    },
+
+    _showEditor : function (defaultText) {
+
+        var topic = this._topic;
+
+        // Hide topic text ...
+        topic.getTextShape().setVisibility(false);
+
+        // Set Editor Style
+        var nodeText = topic.getTextShape();
+        var font = nodeText.getFont();
+        font.size = nodeText.getHtmlFontSize();
+        font.color = nodeText.getColor();
+        this._setStyle(font);
+
+        // Set editor's initial text
+        var text = $defined(defaultText) ? defaultText : topic.getText();
+        this._setText(text);
+
+        // Set editor's initial size
+        var displayFunc = function() {
+            // Position the editor and set the size...
+            var textShape = this._topic.getTextShape();
+            textShape.positionRelativeTo(this._divElem, {
+                position: {x: 'left',y:'top'},
+                edge: {x: 'left', y: 'top'}
+            });
+            this._divElem.setStyle('display', 'block');
+
+            // Set size ...
+            var elemSize = topic.getSize();
+            this._setEditorSize(elemSize.width, elemSize.height);
+
+            var inputElem = this._getTextareaElem();
+            inputElem.focus();
+            this._changeCursor(inputElem, $defined(defaultText));
+
+        }.bind(this);
+
+        displayFunc.delay(10);
+    },
+
+    _setStyle : function (fontStyle) {
+        var inputField = this._getTextareaElem();
+        var spanField = this._getSpanElem();
+        if (!$defined(fontStyle.font)) {
+            fontStyle.font = "Arial";
+        }
+        if (!$defined(fontStyle.style)) {
+            fontStyle.style = "normal";
+        }
+        if (!$defined(fontStyle.weight)) {
+            fontStyle.weight = "normal";
+        }
+        if (!$defined(fontStyle.size)) {
+            fontStyle.size = 12;
+        }
+        inputField.style.fontSize = fontStyle.size + "px";
+        inputField.style.fontFamily = fontStyle.font;
+        inputField.style.fontStyle = fontStyle.style;
+        inputField.style.fontWeight = fontStyle.weight;
+        inputField.style.color = fontStyle.color;
+        spanField.style.fontFamily = fontStyle.font;
+        spanField.style.fontStyle = fontStyle.style;
+        spanField.style.fontWeight = fontStyle.weight;
+        spanField.style.fontSize = fontStyle.size + "px";
+    },
+
+    _setText : function(text) {
+        var inputField = this._getTextareaElem();
+        inputField.size = text.length + 1;
+        this._divElem.style.width = (inputField.size * parseInt(inputField.style.fontSize) + 100) + "px";
+        var spanField = this._getSpanElem();
+        spanField.innerHTML = text;
+        inputField.value = text;
+    },
+
+    _getText : function() {
+        return this._getTextareaElem().value;
+    },
+
+    _getTextareaElem : function() {
+        return this._divElem.getElement('textarea');
+    },
+
+    _getSpanElem : function() {
+        return this._divElem.getElement('span');
+    },
+
+    _setEditorSize : function (width, height) {
+        var textShape = this._topic.getTextShape();
+        var scale = web2d.peer.utils.TransformUtil.workoutScale(textShape._peer);
+        this._size = {width:width * scale.width, height:height * scale.height};
+        this._divElem.style.width = this._size.width * 2 + "px";
+        this._divElem.style.height = this._size.height + "px";
+    },
+
+    _changeCursor : function(inputElem, selectText) {
+        // Select text if it's required ...
+        if (inputElem.createTextRange) //ie
+        {
+            var range = inputElem.createTextRange();
+            var pos = inputElem.value.length;
+            if (!selectText) {
+                range.select();
+                range.move("character", pos);
+            }
+            else {
+                range.move("character", pos);
+                range.select();
+            }
+        }
+        else if (!selectText) {
+            inputElem.setSelectionRange(0, inputElem.value.length);
+        }
+    },
+
+    close : function(update) {
+        if (this.isVisible()) {
+            // Update changes ...
+            if (!$defined(update) || update) {
+                this._updateModel();
+            }
+
+            // Let make the visible text in the node visible again ...
+            this._topic.getTextShape().setVisibility(true);
+
+            // Remove it form the screen ...
+            this._divElem.dispose();
+            this._divElem = null;
+        }
+    }
+});
+

mindplot/src/main/javascript/Note.js

@@ -19,6 +19,7 @@
 mindplot.Note = new Class({
     Extends: mindplot.Icon,
     initialize : function(topic, noteModel) {
+        $assert(topicId, 'topic can not be null');
         this.parent(mindplot.Note.IMAGE_URL);
         this._noteModel = noteModel;
         this._topic = topic;

mindplot/src/main/javascript/ScreenManager.js

@@ -20,7 +20,7 @@ mindplot.ScreenManager = new Class({
     initialize:function(divElement) {
         $assert(divElement, "can not be null");
         this._divContainer = divElement;
-        this._offset = {x:0,y:0};
+        this._padding = {x:0,y:0};
 
         // Ignore default click event propagation. Prevent 'click' event on drad.
         this._clickEvents = [];
@@ -71,8 +71,8 @@ mindplot.ScreenManager = new Class({
         var y = elementPosition.y;
 
         // Add workspace offset.
-        x = x - this._offset.x;
+        x = x - this._padding.x;
-        y = y - this._offset.y;
+        y = y - this._padding.y;
 
         // Scale coordinate in order to be relative to the workspace. That's coord/size;
         x = x / this._scale;
@@ -129,8 +129,8 @@ mindplot.ScreenManager = new Class({
         y = y * this._scale;
 
         // Add workspace offset.
-        x = x + this._offset.x;
+        x = x + this._padding.x;
-        y = y + this._offset.y;
+        y = y + this._padding.y;
 
         // Remove decimal part..
         return new core.Point(x, y);
@@ -141,7 +141,7 @@ mindplot.ScreenManager = new Class({
     },
 
     setOffset : function(x, y) {
-        this._offset.x = x;
+        this._padding.x = x;
-        this._offset.y = y;
+        this._padding.y = y;
     }
 });

mindplot/src/main/javascript/ShrinkConnector.js

@@ -54,7 +54,7 @@ mindplot.ShirinkConnector = new Class({
         elipse.addEvent('mouseout', function(event) {
             var color = topic.getBackgroundColor();
             this.setFill(color);
-        });
+        }.bind(this));
 
         elipse.setCursor('default');
         this._fillColor = '#f7f7f7';

mindplot/src/main/javascript/TextEditor.js

@@ -66,7 +66,7 @@ mindplot.TextEditor = new Class({
     },
 
     _registerEvents : function(divElem) {
-        var inputElem = this._getInputElem();
+        var inputElem = this._getTextareaElem();
         var spanElem = this._getSpanElem();
 
         divElem.addEvent('keydown', function (event) {
@@ -161,7 +161,7 @@ mindplot.TextEditor = new Class({
             var elemSize = topic.getSize();
             this._setEditorSize(elemSize.width, elemSize.height);
 
-            var inputElem = this._getInputElem();
+            var inputElem = this._getTextareaElem();
             inputElem.focus();
             this._changeCursor(inputElem, $defined(defaultText));
 
@@ -171,7 +171,7 @@ mindplot.TextEditor = new Class({
     },
 
     _setStyle : function (fontStyle) {
-        var inputField = this._getInputElem();
+        var inputField = this._getTextareaElem();
         var spanField = this._getSpanElem();
         if (!$defined(fontStyle.font)) {
             fontStyle.font = "Arial";
@@ -197,7 +197,7 @@ mindplot.TextEditor = new Class({
     },
 
     _setText : function(text) {
-        var inputField = this._getInputElem();
+        var inputField = this._getTextareaElem();
         inputField.size = text.length + 1;
         this._divElem.style.width = (inputField.size * parseInt(inputField.style.fontSize) + 100) + "px";
         var spanField = this._getSpanElem();
@@ -206,10 +206,10 @@ mindplot.TextEditor = new Class({
     },
 
     _getText : function() {
-        return this._getInputElem().value;
+        return this._getTextareaElem().value;
     },
 
-    _getInputElem : function() {
+    _getTextareaElem : function() {
         return this._divElem.getElement('input');
     },
 

mindplot/src/main/javascript/Topic.js

@@ -21,7 +21,7 @@ mindplot.Topic = new Class({
     Extends:mindplot.NodeGraph,
     initialize : function(model) {
         this.parent(model);
-        this._textEditor = new mindplot.TextEditor(this);
+        this._textEditor = new mindplot.MultilineTextEditor(this);
 
         this._children = [];
         this._parent = null;
@@ -71,23 +71,15 @@ mindplot.Topic = new Class({
             model.setShapeType(type);
         }
 
-        var innerShape = this.getInnerShape();
+        var oldInnerShape = this.getInnerShape();
-        if (innerShape != null) {
+        if (oldInnerShape != null) {
-            var dispatcherByEventType = innerShape._dispatcherByEventType;
+
-            // Remove old shape ...
             this._removeInnerShape();
 
             // Create a new one ...
-            innerShape = this.getInnerShape();
+            var innerShape = this.getInnerShape();
-
+            // @Todo: Fix...
-            //Let's register all the events. The first one is the default one. The others will be copied.
+            //innerShape.cloneEvents(oldInnerShape);
-            var dispatcher = dispatcherByEventType['mousedown'];
-
-            if ($defined(dispatcher)) {
-                for (var i = 1; i < dispatcher._listeners.length; i++) {
-                    innerShape.addEvent('mousedown', dispatcher._listeners[i]);
-                }
-            }
 
             // Update figure size ...
             var size = model.getSize();
@@ -134,12 +126,13 @@ mindplot.Topic = new Class({
         var innerShape = this.getInnerShape();
         group.removeChild(innerShape);
         this._innerShape = null;
+        return innerShape;
     },
 
     getInnerShape : function() {
         if (!$defined(this._innerShape)) {
             // Create inner box.
-            this._innerShape = this.buildShape(this.INNER_RECT_ATTRIBUTES);
+            this._innerShape = this.buildShape(mindplot.Topic.INNER_RECT_ATTRIBUTES);
 
             // Update bgcolor ...
             var bgColor = this.getBackgroundColor();
@@ -247,21 +240,25 @@ mindplot.Topic = new Class({
     },
 
     getOrBuildIconGroup : function() {
-        if (!$defined(this._icon)) {
+        if (!$defined(this._iconsGroup)) {
-            this._icon = this._buildIconGroup();
+            this._iconsGroup = this._buildIconGroup();
             var group = this.get2DElement();
-            group.appendChild(this._icon.getNativeElement());
+            group.appendChild(this._iconsGroup.getNativeElement());
-            this._icon.moveToFront();
+            this._iconsGroup.moveToFront();
         }
-        return this._icon;
+        return this._iconsGroup;
     },
 
     getIconGroup : function() {
-        return this._icon;
+        return this._iconsGroup;
     },
 
     _buildIconGroup : function() {
-        var result = new mindplot.IconGroup(this);
+        var textHeight = this.getTextShape().getHeight();
+        var result = new mindplot.IconGroup(this.getId(), textHeight);
+        var padding = this._getInnerPadding();
+        result.setPosition(padding, padding);
+
         var model = this.getModel();
 
         //Icons
@@ -341,9 +338,9 @@ mindplot.Topic = new Class({
             iconGroup.removeImageIcon(imgIcon);
             if (iconGroup.getIcons().length == 0) {
                 this.get2DElement().removeChild(iconGroup.getNativeElement());
-                this._icon = null;
+                this._iconsGroup = null;
             }
-            this.updateNode();
+            this._adjustShapes();
         }
     },
 
@@ -356,9 +353,9 @@ mindplot.Topic = new Class({
             iconGroup.removeIcon(mindplot.LinkIcon.IMAGE_URL);
             if (iconGroup.getIcons().length == 0) {
                 this.get2DElement().removeChild(iconGroup.getNativeElement());
-                this._icon = null;
+                this._iconsGroup = null;
             }
-            this.updateNode.delay(0, this);
+            this._adjustShapes(this);
         }
         this._link = null;
         this._hasLink = false;
@@ -373,11 +370,11 @@ mindplot.Topic = new Class({
             iconGroup.removeIcon(mindplot.Note.IMAGE_URL);
             if (iconGroup.getIcons().length == 0) {
                 this.get2DElement().removeChild(iconGroup.getNativeElement());
-                this._icon = null;
+                this._iconsGroup = null;
             }
         }
 
-        this.updateNode.delay(0, this);
+        this._adjustShapes();
         this._note = null;
         this._hasNote = false;
     },
@@ -411,14 +408,6 @@ mindplot.Topic = new Class({
 
         if (!disableEventsListeners) {
             // Propagate mouse events ...
-            var topic = this;
-            result.addEvent('mousedown', function(event) {
-                var eventDispatcher = topic.getInnerShape()._dispatcherByEventType['mousedown'];
-                if ($defined(eventDispatcher)) {
-                    eventDispatcher.eventListener(event);
-                }
-            });
-
             if (this.getType() != mindplot.model.NodeModel.CENTRAL_TOPIC_TYPE) {
                 result.setCursor('move');
             } else {
@@ -426,35 +415,11 @@ mindplot.Topic = new Class({
             }
         }
 
-        // Position node ...
-        this._offset = this.getOffset();
-        var iconOffset = this.getIconOffset();
-        result.setPosition(iconOffset + this._offset, this._offset / 2);
         return result;
     },
 
-    getIconOffset : function() {
+    _getInnerPadding : function() {
-        var iconGroup = this.getIconGroup();
+        throw "this must be implemented";
-        var size = 0;
-        if ($defined(iconGroup)) {
-            size = iconGroup.getSize().width;
-        }
-        return size;
-    },
-
-    getOffset : function(value, updateModel) {
-        var offset = 18;
-
-        if (mindplot.model.NodeModel.MAIN_TOPIC_TYPE == this.getType()) {
-            var parent = this.getModel().getParent();
-            if (parent && mindplot.model.NodeModel.MAIN_TOPIC_TYPE == parent.getType()) {
-                offset = 6;
-            }
-            else {
-                offset = 8;
-            }
-        }
-        return offset;
     },
 
     setFontFamily : function(value, updateModel) {
@@ -464,7 +429,7 @@ mindplot.Topic = new Class({
             var model = this.getModel();
             model.setFontFamily(value);
         }
-        this.updateNode.delay(0, this, [updateModel]);
+        this._adjustShapes(updateModel);
     },
 
     setFontSize : function(value, updateModel) {
@@ -474,7 +439,7 @@ mindplot.Topic = new Class({
             var model = this.getModel();
             model.setFontSize(value);
         }
-        this.updateNode.delay(0, this, [updateModel]);
+        this._adjustShapes(updateModel);
 
     },
 
@@ -485,7 +450,7 @@ mindplot.Topic = new Class({
             var model = this.getModel();
             model.setFontStyle(value);
         }
-        this.updateNode.delay(0, this, [updateModel]);
+        this._adjustShapes(updateModel);
     },
 
     setFontWeight : function(value, updateModel) {
@@ -559,7 +524,7 @@ mindplot.Topic = new Class({
     _setText : function(text, updateModel) {
         var textShape = this.getTextShape();
         textShape.setText(text);
-        this.updateNode.delay(0, this, [updateModel]);
+        this._adjustShapes(updateModel);
 
         if ($defined(updateModel) && updateModel) {
             var model = this.getModel();
@@ -635,7 +600,6 @@ mindplot.Topic = new Class({
     _buildShape : function() {
         var groupAttributes = {width: 100, height:100,coordSizeWidth:100,coordSizeHeight:100};
         var group = new web2d.Group(groupAttributes);
-        group._peer._native.virtualRef = this;
         this._set2DElement(group);
 
         // Shape must be build based on the model width ...
@@ -644,18 +608,15 @@ mindplot.Topic = new Class({
         var textShape = this.getTextShape();
         var shrinkConnector = this.getShrinkConnector();
 
-        // Update figure size ...
-        var model = this.getModel();
-        var size = model.getSize();
-        this._setSize(size);
-
         // Add to the group ...
         group.appendChild(outerShape);
         group.appendChild(innerShape);
         group.appendChild(textShape);
 
+        // Update figure size ...
+        var model = this.getModel();
         if (model.getLinks().length != 0 || model.getNotes().length != 0 || model.getIcons().length != 0) {
-            iconGroup = this.getOrBuildIconGroup();
+            this.getOrBuildIconGroup();
         }
 
         if (this.getType() != mindplot.model.NodeModel.CENTRAL_TOPIC_TYPE) {
@@ -664,6 +625,9 @@ mindplot.Topic = new Class({
 
         // Register listeners ...
         this._registerDefaultListenersToElement(group, this);
+
+        // Put all the topic elements in place ...
+        this._adjustShapes(false);
     },
 
     _registerDefaultListenersToElement : function(elem, topic) {
@@ -1178,42 +1142,40 @@ mindplot.Topic = new Class({
         return result;
     },
 
-    updateNode : function(updatePosition) {
+    _adjustShapes : function(updatePosition) {
-        if (this.isInWorkspace()) {
+        (function() {
             var textShape = this.getTextShape();
-            var sizeWidth = textShape.getWidth();
+            var textWidth = textShape.getWidth();
-            var sizeHeight = textShape.getHeight();
+            var textHeight = textShape.getHeight();
-            var iconOffset = this.getIconOffset();
+            var topicPadding = this._getInnerPadding();
-            var height = sizeHeight + this._offset;
+
-            var width = sizeWidth + this._offset * 2 + iconOffset + 2;
+            var iconGroup = this.getOrBuildIconGroup();
-            var pos = this._offset / 2 - 1;
+            var iconsWidth = iconGroup.getSize().width;
-            if (this.getShapeType() == mindplot.model.NodeModel.SHAPE_TYPE_ELIPSE) {
+            if (iconsWidth != 0) {
-                var factor = 0.25;
+                // Add a extra padding between the text and the icons
-                height = (width * factor < height ? height : width * factor);
+                iconsWidth = iconsWidth + (textHeight / 4);
-                pos = (height - sizeHeight + 3) / 2;
             }
 
-            var newSize = {width:width,height:height};
+            var height = textHeight + (topicPadding * 2);
-            this.setSize(newSize, false, updatePosition);
+            var width = textWidth + iconsWidth + (topicPadding * 2);
 
-            // Positionate node ...
+            var size = {width:width,height:height};
-            textShape.setPosition(iconOffset + this._offset + 2, pos);
+            this.setSize(size, false, updatePosition);
-            textShape.setTextSize(sizeWidth, sizeHeight);
+
-            var iconGroup = this.getIconGroup();
+            // Position node ...
-            if ($defined(iconGroup))
+            textShape.setPosition(topicPadding + iconsWidth, topicPadding);
-                iconGroup.updateIconGroupPosition();
+
-        }
+        }).delay(0, this);
     },
 
-    INNER_RECT_ATTRIBUTES : {stroke:'0.5 solid'},
-
     addHelper : function(helper) {
         helper.addToGroup(this.get2DElement());
         this._helpers.push(helper);
     }
+
 });
 
 
 mindplot.Topic.CONNECTOR_WIDTH = 6;
 mindplot.Topic.OUTER_SHAPE_ATTRIBUTES = {fillColor:'#dbe2e6',stroke:'1 solid #77555a',x:0,y:0};
-
+mindplot.Topic.INNER_RECT_ATTRIBUTES = {stroke:'0.5 solid'};

mindplot/src/main/javascript/XMLMindmapSerializer_Pela.js

@@ -66,15 +66,12 @@ mindplot.XMLMindmapSerializer_Pela = new Class({
             parentTopic.setAttribute("central", true);
         } else {
             var parent = topic.getParent();
-//        if (parent == null || parent.getType() == mindplot.model.NodeModel.CENTRAL_TOPIC_TYPE)
+
-//        {
             var pos = topic.getPosition();
             parentTopic.setAttribute("position", pos.x + ',' + pos.y);
-//        } else
+
-//        {
             var order = topic.getOrder();
             parentTopic.setAttribute("order", order);
-//        }
         }
 
         var text = topic.getText();

mindplot/src/main/javascript/commands/AddIconToTopicCommand.js

@@ -21,25 +21,25 @@ mindplot.commands.AddIconToTopicCommand = new Class({
     initialize: function(topicId, iconType) {
         $assert(topicId, 'topicId can not be null');
         $assert(iconType, 'iconType can not be null');
-        this._objectsIds = topicId;
+        this._topicsIds = topicId;
         this._iconType = iconType;
     },
 
     execute: function(commandContext) {
-        var topic = commandContext.findTopics(this._objectsIds)[0];
+        var topic = commandContext.findTopics(this._topicsIds)[0];
         var updated = function() {
             var iconImg = topic.addIcon(this._iconType, commandContext._designer);
             this._iconModel = iconImg.getModel();
-            topic.updateNode();
+            topic._adjustShapes();
         }.bind(this);
         updated.delay(0);
     },
 
     undoExecute: function(commandContext) {
-        var topic = commandContext.findTopics(this._objectsIds)[0];
+        var topic = commandContext.findTopics(this._topicsIds)[0];
         var updated = function() {
             topic.removeIcon(this._iconModel);
-            topic.updateNode();
+            topic._adjustShapes();
         }.bind(this);
         updated.delay(0);
     }

mindplot/src/main/javascript/commands/AddLinkToTopicCommand.js

@@ -20,20 +20,20 @@ mindplot.commands.AddLinkToTopicCommand = new Class({
     Extends:mindplot.Command,
     initialize: function(topicId, url) {
         $assert(topicId, 'topicId can not be null');
-        this._objectsIds = topicId;
+        this._topicsIds = topicId;
         this._url = url;
         this._id = mindplot.Command._nextUUID();
     },
     execute: function(commandContext) {
-        var topic = commandContext.findTopics(this._objectsIds)[0];
+        var topic = commandContext.findTopics(this._topicsIds)[0];
         var updated = function() {
             topic.addLink(this._url, commandContext._designer);
-            topic.updateNode();
+            topic._adjustShapes();
         }.bind(this);
         updated.delay(0);
     },
     undoExecute: function(commandContext) {
-        var topic = commandContext.findTopics(this._objectsIds)[0];
+        var topic = commandContext.findTopics(this._topicsIds)[0];
         var updated = function() {
             topic.removeLink();
         }.bind(this);

mindplot/src/main/javascript/commands/AddNoteToTopicCommand.js

@@ -20,20 +20,20 @@ mindplot.commands.AddNoteToTopicCommand = new Class({
     Extends:mindplot.Command,
     initialize: function(topicId, text) {
         $assert(topicId, 'topicId can not be null');
-        this._objectsIds = topicId;
+        this._topicsIds = topicId;
         this._text = text;
         this._id = mindplot.Command._nextUUID();
     },
     execute: function(commandContext) {
-        var topic = commandContext.findTopics(this._objectsIds)[0];
+        var topic = commandContext.findTopics(this._topicsIds)[0];
         var updated = function() {
             topic.addNote(this._text);
-            topic.updateNode();
+            topic._adjustShapes();
         }.bind(this);
         updated.delay(0);
     },
     undoExecute: function(commandContext) {
-        var topic = commandContext.findTopics(this._objectsIds)[0];
+        var topic = commandContext.findTopics(this._topicsIds)[0];
         var updated = function() {
             topic.removeNote();
         }.bind(this);

mindplot/src/main/javascript/commands/DeleteCommand.js

@@ -20,7 +20,7 @@ mindplot.commands.DeleteCommand = new Class({
     Extends:mindplot.Command,
     initialize: function(objectIds) {
         $assert(objectIds, "objectIds must be defined");
-        this._objectsIds = objectIds;
+        this._topicsIds = objectIds;
         this._deletedTopicModels = [];
         this._parentTopicIds = [];
         this._deletedRelationships = [];
@@ -28,7 +28,7 @@ mindplot.commands.DeleteCommand = new Class({
     },
 
     execute: function(commandContext) {
-        var topics = commandContext.findTopics(this._objectsIds.nodes);
+        var topics = commandContext.findTopics(this._topicsIds.nodes);
         if (topics.length > 0) {
             topics.forEach(
                 function(topic, index) {
@@ -58,7 +58,7 @@ mindplot.commands.DeleteCommand = new Class({
                 }.bind(this)
             );
         }
-        var lines = commandContext.findRelationships(this._objectsIds.relationship);
+        var lines = commandContext.findRelationships(this._topicsIds.relationship);
         if (lines.length > 0) {
             lines.forEach(function(line, index) {
                 if (line.isInWorkspace()) {
@@ -70,7 +70,7 @@ mindplot.commands.DeleteCommand = new Class({
     },
     undoExecute: function(commandContext) {
 
-        var topics = commandContext.findTopics(this._objectsIds);
+        var topics = commandContext.findTopics(this._topicsIds);
         var parent = commandContext.findTopics(this._parentTopicIds);
 
         this._deletedTopicModels.forEach(

mindplot/src/main/javascript/commands/DragTopicCommand.js

@@ -21,7 +21,7 @@ mindplot.commands.DragTopicCommand = new Class({
     initialize: function(topicIds, position, order, parentTopic) {
         $assert(topicIds, "topicIds must be defined");
 
-        this._objectsIds = topicIds;
+        this._topicsIds = topicIds;
         if ($defined(parentTopic))
             this._parentId = parentTopic.getId();
 
@@ -31,7 +31,7 @@ mindplot.commands.DragTopicCommand = new Class({
     },
     execute: function(commandContext) {
 
-        var topic = commandContext.findTopics([this._objectsIds])[0];
+        var topic = commandContext.findTopics([this._topicsIds])[0];
 
         // Save old position ...
         var origParentTopic = topic.getOutgoingConnectedTopic();

mindplot/src/main/javascript/commands/GenericFunctionCommand.js

@@ -23,14 +23,14 @@ mindplot.commands.GenericFunctionCommand = new Class({
         $assert(topicsIds, "topicsIds must be defined");
 
         this._value = value;
-        this._objectsIds = topicsIds;
+        this._topicsIds = topicsIds;
         this._commandFunc = commandFunc;
         this._oldValues = [];
         this._id = mindplot.Command._nextUUID();
     },
     execute: function(commandContext) {
         if (!this.applied) {
-            var topics = commandContext.findTopics(this._objectsIds);
+            var topics = commandContext.findTopics(this._topicsIds);
             topics.forEach(function(topic) {
                 var oldValue = this._commandFunc(topic, this._value);
                 this._oldValues.push(oldValue);
@@ -43,7 +43,7 @@ mindplot.commands.GenericFunctionCommand = new Class({
     },
     undoExecute: function(commandContext) {
         if (this.applied) {
-            var topics = commandContext.findTopics(this._objectsIds);
+            var topics = commandContext.findTopics(this._topicsIds);
             topics.forEach(function(topic, index) {
                 this._commandFunc(topic, this._oldValues[index]);
 

mindplot/src/main/javascript/commands/RemoveIconFromTopicCommand.js

@@ -22,26 +22,26 @@ mindplot.commands.RemoveIconFromTopicCommand = new Class({
     {
         $assert(topicIds, 'topicIds can not be null');
         $assert(iconModel, 'iconModel can not be null');
-        this._objectsIds = topicIds;
+        this._topicsIds = topicIds;
         this._iconModel = iconModel;
     },
     execute: function(commandContext)
     {
-        var topic = commandContext.findTopics(this._objectsIds)[0];
+        var topic = commandContext.findTopics(this._topicsIds)[0];
         var updated = function() {
             topic.removeIcon(this._iconModel);
-            topic.updateNode();
+            topic._adjustShapes();
         }.bind(this);
         updated.delay(0);
     },
     undoExecute: function(commandContext)
     {
-        var topic = commandContext.findTopics(this._objectsIds)[0];
+        var topic = commandContext.findTopics(this._topicsIds)[0];
         var updated = function() {
             var iconType = this._iconModel.getIconType();
             var iconImg = topic.addIcon(iconType, commandContext._designer);
             this._iconModel = iconImg.getModel();
-            topic.updateNode();
+            topic._adjustShapes();
         }.bind(this);
         updated.delay(0);
     }

mindplot/src/main/javascript/commands/RemoveLinkFromTopicCommand.js

@@ -20,10 +20,10 @@ mindplot.commands.RemoveLinkFromTopicCommand = new Class({
     Extends:mindplot.Command,
     initialize: function(topicId) {
         $assert(topicId, 'topicId can not be null');
-        this._objectsIds = topicId;
+        this._topicsIds = topicId;
     },
     execute: function(commandContext) {
-        var topic = commandContext.findTopics(this._objectsIds)[0];
+        var topic = commandContext.findTopics(this._topicsIds)[0];
         this._url = topic._link.getUrl();
         var updated = function() {
             topic.removeLink();
@@ -31,10 +31,10 @@ mindplot.commands.RemoveLinkFromTopicCommand = new Class({
         updated.delay(0);
     },
     undoExecute: function(commandContext) {
-        var topic = commandContext.findTopics(this._objectsIds)[0];
+        var topic = commandContext.findTopics(this._topicsIds)[0];
         var updated = function() {
             topic.addLink(this._url, commandContext._designer);
-            topic.updateNode();
+            topic._adjustShapes();
         }.bind(this);
         updated.delay(0);
     }

mindplot/src/main/javascript/commands/RemoveNoteFromTopicCommand.js

@@ -21,11 +21,11 @@ mindplot.commands.RemoveNoteFromTopicCommand = new Class({
     initialize: function(topicId)
     {
         $assert(topicId, 'topicId can not be null');
-        this._objectsIds = topicId;
+        this._topicsIds = topicId;
     },
     execute: function(commandContext)
     {
-        var topic = commandContext.findTopics(this._objectsIds)[0];
+        var topic = commandContext.findTopics(this._topicsIds)[0];
         this._text = topic._note.getText();
         var updated = function() {
             topic.removeNote();
@@ -34,10 +34,10 @@ mindplot.commands.RemoveNoteFromTopicCommand = new Class({
     },
     undoExecute: function(commandContext)
     {
-        var topic = commandContext.findTopics(this._objectsIds)[0];
+        var topic = commandContext.findTopics(this._topicsIds)[0];
         var updated = function() {
             topic.addNote(this._text,commandContext._designer);
-            topic.updateNode();
+            topic._adjustShapes();
         }.bind(this);
         updated.delay(0);
     }

mindplot/src/test/javascript/static/editor.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.ColorPalettePanel('myButton', model,"/mindplot/src/main/javascript/widget");
+        });
+
+    </script>
+
+</head>
+<body>
+
+<div id="myButton" style="border: 1px red solid">
+    The button
+</div>
+
+
+</body>
+</html>

web2d/src/main/javascript/Element.js

@@ -87,6 +87,10 @@ web2d.Element = new Class({
     addEvent : function(type, listener) {
         this._peer.addEvent(type, listener);
     },
+
+    cloneEvents : function(from) {
+        this._peer.cloneEvents(from);
+    },
     /**
      *
      * Allows the removal of event listeners from the event target.

web2d/src/main/javascript/Text.js

@@ -31,6 +31,12 @@ web2d.Text = new Class({
         this._peer.setText(text);
     },
 
+    setTextAlignment : function(align)
+    {
+        $assert(align,"align can not be null");
+        this._peer.setTextAlignment(align);
+    },
+
     setTextSize  : function(width, height) {
         this._peer.setContentSize(width, height);
     },

web2d/src/main/javascript/peer/svg/ElementPeer.js

@@ -82,9 +82,11 @@ web2d.peer.svg.ElementPeer = new Class({
      * http://developer.mozilla.org/en/docs/addEvent
      */
     addEvent : function(type, listener) {
-
         this._native.addEvent(type, listener);
+    },
 
+    cloneEvents : function(from) {
+        this._native.cloneEvents(from);
     },
 
     removeEvent : function(type, listener) {

web2d/src/main/javascript/peer/svg/TextPeer.js

@@ -29,15 +29,41 @@ web2d.peer.svg.TextPeer = new Class({
         this._native.appendChild(element._native);
     },
 
+    setTextAlignment  : function(align) {
+        this._textAlign = align;
+    },
+
+
+    getTextAlignment  : function() {
+        return $defined(this._textAlign) ? this._textAlign : 'left';
+    },
+
     setText  : function(text) {
         text = core.Utils.escapeInvalidTags(text);
-        var child = this._native.firstChild;
+        var childs = this._native.getChildren();
-        if ($defined(child)) {
+        childs.forEach(function(child) {
-            this._native.removeChild(child);
+            child.dispose();
-        }
+        });
+
         this._text = text;
-        var textNode = window.document.createTextNode(text);
+        this.setVisibility(false);
-        this._native.appendChild(textNode);
+        var lines = text.split('\n');
+
+        var tspans = [];
+        lines.forEach(function(line) {
+
+            var tspan = window.document.createElementNS(this.svgNamespace, 'tspan');
+            tspan.setAttribute('dy', '1em');
+            tspan.setAttribute('x', this.getPosition().x);
+            var tspanContent = window.document.createTextNode(line);
+            tspan.appendChild(tspanContent);
+            tspans.push(tspan);
+
+            this._native.appendChild(tspan);
+        }.bind(this));
+
+        this.setVisibility(true);
+
     },
 
     getText  : function() {
@@ -46,13 +72,14 @@ web2d.peer.svg.TextPeer = new Class({
 
     setPosition  : function(x, y) {
         this._position = {x:x, y:y};
-        var height = this._font.getSize();
+        this._native.setAttribute('y', y);
-        if ($defined(this._parent) && $defined(this._native.getBBox))
-            height = this.getHeight();
-        var size = parseInt(height);
-        this._native.setAttribute('y', y + size * 3 / 4);
-        //y+size/2
         this._native.setAttribute('x', x);
+
+        // tspan must be positioned manually.
+        this._native.getElements('tspan').forEach(function(span) {
+            span.setAttribute('x', x);
+        });
+
     },
 
     getPosition  : function() {

web2d/src/test/javascript/render/font.html

@@ -0,0 +1,159 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <script type="text/javascript">
+        web2d = {
+            peer: {}
+        };
+
+        web2d.peer =
+        {
+            svg: {}
+        };
+
+        web2d.peer.utils = {};
+    </script>
+
+    <script type="text/javascript"
+            src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
+    <script type="text/javascript" src="../../../../../core-js/target/classes/core.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElementPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Element.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Workspace.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/WorkspacePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Toolkit.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Elipse.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElipsePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Line.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/LinePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/PolyLine.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/PolyLinePeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Group.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/GroupPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Rect.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/RectPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Text.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TextPeer.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/utils/TransformUtils.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/utils/EventUtils.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/Font.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/Font.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TahomaFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/TimesFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ArialFont.js"></script>
+    <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/VerdanaFont.js"></script>
+    <script type="text/javascript" src="utils.js"></script>
+    <script type="text/javascript">
+        function multiline(text, family, elemId) {
+            var overflowWorkspace = new web2d.Workspace();
+            overflowWorkspace.setSize('200px', '240px');
+            overflowWorkspace.setCoordSize('200', '240');
+            overflowWorkspace.setCoordOrigin(0, 0);
+
+            [6,8,10,15].forEach(function(size, i) {
+                var wText = new web2d.Text();
+                overflowWorkspace.appendChild(wText);
+
+                wText.setText(text);
+                wText.setFont(family, size, 'bold');
+                wText.setPosition(30, 50 * i);
+                wText.setColor('red');
+            });
+
+            overflowWorkspace.addItAsChildTo($(elemId));
+        }
+
+        function alignments(text, family, elemId) {
+            var overflowWorkspace = new web2d.Workspace();
+            overflowWorkspace.setSize('260px', '240px');
+            overflowWorkspace.setCoordSize('260', '240');
+            overflowWorkspace.setCoordOrigin(0, 0);
+
+            ['center','left','right'].forEach(function(align, i) {
+                var wText = new web2d.Text();
+                overflowWorkspace.appendChild(wText);
+
+                wText.setText(text);
+                wText.setFont(family, 8, 'bold');
+                wText.setPosition(30, 80 * i);
+                wText.setColor('red');
+                wText.setTextAlignment(align);
+            });
+
+            overflowWorkspace.addItAsChildTo($(elemId));
+        }
+
+        function initialize() {
+            web2d.peer.Toolkit.init();
+            // Multine tests ...
+            ['Arial','Tahoma','Verdana','Times'].forEach(function(family, i) {
+                multiline('This multine text.\nLine 1 :)\nLine2', family, 'multi' + i);
+            });
+
+            // Multine tests and alingments .. ...
+            ['Arial','Tahoma','Verdana','Times'].forEach(function(family, i) {
+                alignments('This multine text.\nThis is the long line just because :)\nShort line', family, 'amulti' + i);
+            })
+        }
+    </script>
+</head>
+
+<body onload="initialize();">
+
+<h1>Web2d Fonts Tests</h1>
+
+<table border="1">
+    <colgroup>
+        <col style="width:30%"/>
+        <col style="width:60%"/>
+    </colgroup>
+    <thead>
+    <tr>
+        <td></td>
+        <td>Arial</td>
+        <td>Tahoma</td>
+        <td>Verdana</td>
+        <td>Times</td>
+    </tr>
+    </thead>
+    <tr>
+        <td>
+            Multiline Text
+        </td>
+        <td>
+            <div id="multi0"></div>
+        </td>
+        <td>
+            <div id="multi1"></div>
+        </td>
+        <td>
+            <div id="multi2"></div>
+        </td>
+        <td>
+            <div id="multi3"></div>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            Multiline Aligment
+        </td>
+        <td>
+            <div id="amulti0"></div>
+        </td>
+        <td>
+            <div id="amulti1"></div>
+        </td>
+        <td>
+            <div id="amulti2"></div>
+        </td>
+        <td>
+            <div id="amulti3"></div>
+        </td>
+    </tr>
+    <!--**************************************************************************-->
+
+</table>
+<input type="button" value="Zoom In" onclick="zoomIn()">
+</body>
+</html>

web2d/src/test/javascript/render/text.html

@@ -15,7 +15,8 @@
         web2d.peer.utils = {};
     </script>
 
-    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
+    <script type="text/javascript"
+            src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
     <script type="text/javascript" src="../../../../../core-js/target/classes/core.js"></script>
     <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/ElementPeer.js"></script>
     <script type="text/javascript" src="../../../../src/main/javascript/Element.js"></script>
@@ -44,34 +45,25 @@
     <script type="text/javascript" src="../../../../src/main/javascript/peer/svg/VerdanaFont.js"></script>
     <script type="text/javascript" src="utils.js"></script>
     <script type="text/javascript">
-    function zoomIn()
+        function zoomIn() {
-    {
+            for (i = 0; i < workspaces.length; i++) {
-        for(i=0; i<workspaces.length; i++)
-        {
                 var coordSize = workspaces[i].getCoordSize();
-            workspaces[i].setCoordSize(coordSize.width*2,coordSize.height*2);
+                workspaces[i].setCoordSize(coordSize.width * 2, coordSize.height * 2);
             }
         };
 
         workspaces = [];
-    var textot;
 
-    var TextTest = function (size,coordSize,textval,font,fontSizeval, style, modifier, fontColor, owner, iesimo)
+        var TextTest = function (size, coordSize, textval, font, fontSizeval, style, modifier, fontColor, owner, iesimo) {
-    {
             var overflowWorkspace = new web2d.Workspace();
             overflowWorkspace.setSize(size, size);
-                overflowWorkspace.setCoordSize(coordSize,coordSize);
+            overflowWorkspace.setCoordSize(coordSize, coordSize);
-                overflowWorkspace.setCoordOrigin(0,0);
+            overflowWorkspace.setCoordOrigin(0, 0);
 
-                /*var rect = new web2d.Rect(1 / 10);
-                rect.setPosition(40, 40);
-                rect.setSize(20, 20);
-                overflowWorkspace.appendChild(rect);
-                */
             var text = new web2d.Text();
             overflowWorkspace.appendChild(text);
             var scale = web2d.peer.utils.TransformUtil.workoutScale(text._peer);
-                text.setText(textval+" "+scale.height);
+            text.setText(textval + " " + scale.height);
             text.setFont(font, fontSizeval, style, modifier);
             text.setPosition(0, 0);
             text.setColor(fontColor);
@@ -81,29 +73,29 @@
             overflowWorkspace.addItAsChildTo($(owner));
 
             var parent = $(owner);
-                var span= document.createElement("span");
+            var span = document.createElement("span");
-                span.setAttribute("id","textoHTML"+iesimo);
+            span.setAttribute("id", "textoHTML" + iesimo);
             var textsize = text.offsetWidth;
-                var textHtml=document.createTextNode(textsize);
+            var textHtml = document.createTextNode(textsize);
-                var fontSize=text.getHtmlFontSize();
+            var fontSize = text.getHtmlFontSize();
             span.appendChild(textHtml);
             //var fontSize=20*scale.height*2;
-                    span.setAttribute("style", "font-weight:"+modifier+";font-style: "+style+"; font-size:"+ fontSize +"pt; font-family: "+font+";width:30;height:30;");
+            span.setAttribute("style", "font-weight:" + modifier + ";font-style: " + style + "; font-size:" + fontSize + "pt; font-family: " + font + ";width:30;height:30;");
 
             parent.appendChild(span);
-                workspaces[iesimo]=overflowWorkspace;
+            workspaces[iesimo] = overflowWorkspace;
         };
 
-    function initialize(){
+        function initialize() {
             web2d.peer.Toolkit.init();
-        TextTest("100px",200,"Test Text","Arial",10, "normal", "normal", "red", "text0", 0);
+            TextTest("100px", 200, "Test Text", "Arial", 10, "normal", "normal", "red", "text0", 0);
-        TextTest("100px",100,"Test Text","Arial",10, "normal", "normal", "blue", "text1", 1);
+            TextTest("100px", 100, "Test Text", "Arial", 10, "normal", "normal", "blue", "text1", 1);
-        TextTest("100px",50,"Test Text","Arial",10, "normal", "normal", "blue", "text2", 2);
+            TextTest("100px", 50, "Test Text", "Arial", 10, "normal", "normal", "blue", "text2", 2);
-        TextTest("100px",100,"Test Text","Arial",10, "italic", "normal", "blue", "text3", 3);
+            TextTest("100px", 100, "Test Text", "Arial", 10, "italic", "normal", "blue", "text3", 3);
-        TextTest("100px",100,"Test Text","Arial",10, "italic", "bold", "green", "text4", 4);
+            TextTest("100px", 100, "Test Text", "Arial", 10, "italic", "bold", "green", "text4", 4);
         }
 
-</script>
+    </script>
 </head>
 
 <body onload="initialize();">
@@ -132,7 +124,8 @@
 
 </table>
 <span>Text to Inspect: </span><input type="text" id="iesimo">
-<input type="button" value="Inspect" onclick="alert(document.getElementById('textoHTML'+$('iesimo').value).offsetWidth);">
+<input type="button" value="Inspect"
+       onclick="alert(document.getElementById('textoHTML'+$('iesimo').value).offsetWidth);">
 <input type="button" value="Zoom In" onclick="zoomIn()">
 </body>
 </html>

wise-doc/pom.xml

@@ -70,7 +70,7 @@
             </plugin>
 
 
-<!--            <plugin>
+            <!--            <plugin>
                             <groupId>org.codehaus.mojo</groupId>
                             <artifactId>jaxws-maven-plugin</artifactId>
                             <executions>
@@ -92,7 +92,7 @@
                                 </wsdlFiles>
                             </configuration>
                         </plugin>
--->
+            -->
 
         </plugins>
     </build>

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

@@ -81,7 +81,7 @@
 
     // @Todo: This must be persited in the map properties ...
     var mapId = '1';
-    var mapXml = '<map name="38298" version="pela"><topic central="true" text="test" id="1"/></map>';
+    var mapXml = '<map name="38298" version="pela"><topic central="true" text="test\nThis is working ?" id="1"/></map>';
     var editorProperties = {zoom:0.85,saveOnLoad:true};