diff --git a/mindplot/pom.xml b/mindplot/pom.xml index 2e522d63..be11bee8 100644 --- a/mindplot/pom.xml +++ b/mindplot/pom.xml @@ -78,7 +78,8 @@ - + + diff --git a/mindplot/src/main/javascript/CentralTopic.js b/mindplot/src/main/javascript/CentralTopic.js index 928e3686..c88166db 100644 --- a/mindplot/src/main/javascript/CentralTopic.js +++ b/mindplot/src/main/javascript/CentralTopic.js @@ -19,8 +19,8 @@ mindplot.CentralTopic = new Class({ Extends:mindplot.Topic, - initialize: function(model,options) { - this.parent(model,options); + initialize: function(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; }, diff --git a/mindplot/src/main/javascript/Icon.js b/mindplot/src/main/javascript/Icon.js index 49e49457..24088bee 100644 --- a/mindplot/src/main/javascript/Icon.js +++ b/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; + + + diff --git a/mindplot/src/main/javascript/IconGroup.js b/mindplot/src/main/javascript/IconGroup.js index 2364f8fa..31ddcac2 100644 --- a/mindplot/src/main/javascript/IconGroup.js +++ b/mindplot/src/main/javascript/IconGroup.js @@ -17,76 +17,65 @@ */ mindplot.IconGroup = new Class({ - initialize : function(topic) { - var offset = topic.getOffset(); + initialize : function(topicId, iconSize) { + $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.options.y = y; - this.options.nativeElem.setPosition(x, y); + this._group.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.options.height = height; - this.options.nativeElem.setSize(width, height); - this.options.nativeElem.setCoordSize(width, height); + this._group.setSize(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 size = nativeElem.getSize(); - newIcon.setPosition(size.width, 0); - this.options.icons.extend([icon]); + var imageShape = icon.getImage(); + var groupShape = this._group; - 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; - if (iconSize.height > size.height) { - 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; + groupShape.appendChild(imageShape); + this._icons.push(icon); // Register event for the group .. - var topicId = this.options.topic.getId(); - this._removeTip.decorate(topicId, icon); + this._removeTip.decorate(this._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() { - return this.options.nativeElem; + // remove from model... + 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,24 +281,30 @@ 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) { - icon.addEvent('mouseover', function() { - this.show(topicId, icon); - }.bind(this)); - icon.addEvent('mouseout', function() { - this.hide(); - }.bind(this)) + if (!icon.__remove) { + icon.addEvent('mouseover', function() { + this.show(topicId, icon); + }.bind(this)); + + icon.addEvent('mouseout', function() { + this.hide(); + }.bind(this)) + icon.__remove = true; + } } }); \ No newline at end of file diff --git a/mindplot/src/main/javascript/ImageIcon.js b/mindplot/src/main/javascript/ImageIcon.js index a07d2590..b856cf77 100644 --- a/mindplot/src/main/javascript/ImageIcon.js +++ b/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); } }); diff --git a/mindplot/src/main/javascript/LocalActionDispatcher.js b/mindplot/src/main/javascript/LocalActionDispatcher.js index a894b1b6..e1746ccd 100644 --- a/mindplot/src/main/javascript/LocalActionDispatcher.js +++ b/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; - }, + } }); diff --git a/mindplot/src/main/javascript/MainTopic.js b/mindplot/src/main/javascript/MainTopic.js index 44eb4e4a..d5ef792d 100644 --- a/mindplot/src/main/javascript/MainTopic.js +++ b/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(); diff --git a/mindplot/src/main/javascript/MultilineTextEditor.js b/mindplot/src/main/javascript/MultilineTextEditor.js new file mode 100644 index 00000000..c3833281 --- /dev/null +++ b/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; + } + } +}); + diff --git a/mindplot/src/main/javascript/Note.js b/mindplot/src/main/javascript/Note.js index 028e38d7..86a3dd4c 100644 --- a/mindplot/src/main/javascript/Note.js +++ b/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; diff --git a/mindplot/src/main/javascript/ScreenManager.js b/mindplot/src/main/javascript/ScreenManager.js index c1b7c36d..49cc76bf 100644 --- a/mindplot/src/main/javascript/ScreenManager.js +++ b/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; - y = y - this._offset.y; + x = x - this._padding.x; + 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; - y = y + this._offset.y; + x = x + this._padding.x; + 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._offset.y = y; + this._padding.x = x; + this._padding.y = y; } }); diff --git a/mindplot/src/main/javascript/ShrinkConnector.js b/mindplot/src/main/javascript/ShrinkConnector.js index ff219c47..20e49b4c 100644 --- a/mindplot/src/main/javascript/ShrinkConnector.js +++ b/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'; diff --git a/mindplot/src/main/javascript/TextEditor.js b/mindplot/src/main/javascript/TextEditor.js index eaa08993..401fe131 100644 --- a/mindplot/src/main/javascript/TextEditor.js +++ b/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'); }, diff --git a/mindplot/src/main/javascript/Topic.js b/mindplot/src/main/javascript/Topic.js index 5a041e75..35a6937b 100644 --- a/mindplot/src/main/javascript/Topic.js +++ b/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(); - if (innerShape != null) { - var dispatcherByEventType = innerShape._dispatcherByEventType; - // Remove old shape ... + var oldInnerShape = this.getInnerShape(); + if (oldInnerShape != null) { + this._removeInnerShape(); // Create a new one ... - innerShape = this.getInnerShape(); - - //Let's register all the events. The first one is the default one. The others will be copied. - var dispatcher = dispatcherByEventType['mousedown']; - - if ($defined(dispatcher)) { - for (var i = 1; i < dispatcher._listeners.length; i++) { - innerShape.addEvent('mousedown', dispatcher._listeners[i]); - } - } + var innerShape = this.getInnerShape(); + // @Todo: Fix... + //innerShape.cloneEvents(oldInnerShape); // 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)) { - this._icon = this._buildIconGroup(); + if (!$defined(this._iconsGroup)) { + this._iconsGroup = this._buildIconGroup(); var group = this.get2DElement(); - group.appendChild(this._icon.getNativeElement()); - this._icon.moveToFront(); + group.appendChild(this._iconsGroup.getNativeElement()); + 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() { - var iconGroup = this.getIconGroup(); - 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; + _getInnerPadding : function() { + throw "this must be implemented"; }, 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) { - if (this.isInWorkspace()) { + _adjustShapes : function(updatePosition) { + (function() { var textShape = this.getTextShape(); - var sizeWidth = textShape.getWidth(); - var sizeHeight = textShape.getHeight(); - var iconOffset = this.getIconOffset(); - var height = sizeHeight + this._offset; - var width = sizeWidth + this._offset * 2 + iconOffset + 2; - var pos = this._offset / 2 - 1; - if (this.getShapeType() == mindplot.model.NodeModel.SHAPE_TYPE_ELIPSE) { - var factor = 0.25; - height = (width * factor < height ? height : width * factor); - pos = (height - sizeHeight + 3) / 2; + var textWidth = textShape.getWidth(); + var textHeight = textShape.getHeight(); + var topicPadding = this._getInnerPadding(); + + var iconGroup = this.getOrBuildIconGroup(); + var iconsWidth = iconGroup.getSize().width; + if (iconsWidth != 0) { + // Add a extra padding between the text and the icons + iconsWidth = iconsWidth + (textHeight / 4); } - var newSize = {width:width,height:height}; - this.setSize(newSize, false, updatePosition); + var height = textHeight + (topicPadding * 2); + var width = textWidth + iconsWidth + (topicPadding * 2); - // Positionate node ... - textShape.setPosition(iconOffset + this._offset + 2, pos); - textShape.setTextSize(sizeWidth, sizeHeight); - var iconGroup = this.getIconGroup(); - if ($defined(iconGroup)) - iconGroup.updateIconGroupPosition(); - } + var size = {width:width,height:height}; + this.setSize(size, false, updatePosition); + + // Position node ... + textShape.setPosition(topicPadding + iconsWidth, topicPadding); + + }).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'}; diff --git a/mindplot/src/main/javascript/XMLMindmapSerializer_Pela.js b/mindplot/src/main/javascript/XMLMindmapSerializer_Pela.js index a7cd1741..c28d29f5 100644 --- a/mindplot/src/main/javascript/XMLMindmapSerializer_Pela.js +++ b/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(); diff --git a/mindplot/src/main/javascript/commands/AddIconToTopicCommand.js b/mindplot/src/main/javascript/commands/AddIconToTopicCommand.js index f48dab55..7ddd0492 100644 --- a/mindplot/src/main/javascript/commands/AddIconToTopicCommand.js +++ b/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); } diff --git a/mindplot/src/main/javascript/commands/AddLinkToTopicCommand.js b/mindplot/src/main/javascript/commands/AddLinkToTopicCommand.js index 2fe3f974..0c5c5417 100644 --- a/mindplot/src/main/javascript/commands/AddLinkToTopicCommand.js +++ b/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); diff --git a/mindplot/src/main/javascript/commands/AddNoteToTopicCommand.js b/mindplot/src/main/javascript/commands/AddNoteToTopicCommand.js index 65510beb..87f1ca32 100644 --- a/mindplot/src/main/javascript/commands/AddNoteToTopicCommand.js +++ b/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); diff --git a/mindplot/src/main/javascript/commands/DeleteCommand.js b/mindplot/src/main/javascript/commands/DeleteCommand.js index 9b495518..af1efb89 100644 --- a/mindplot/src/main/javascript/commands/DeleteCommand.js +++ b/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( diff --git a/mindplot/src/main/javascript/commands/DragTopicCommand.js b/mindplot/src/main/javascript/commands/DragTopicCommand.js index 38f2d7de..0f3c25c2 100644 --- a/mindplot/src/main/javascript/commands/DragTopicCommand.js +++ b/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(); diff --git a/mindplot/src/main/javascript/commands/GenericFunctionCommand.js b/mindplot/src/main/javascript/commands/GenericFunctionCommand.js index 0dc6f896..b2552103 100644 --- a/mindplot/src/main/javascript/commands/GenericFunctionCommand.js +++ b/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]); diff --git a/mindplot/src/main/javascript/commands/RemoveIconFromTopicCommand.js b/mindplot/src/main/javascript/commands/RemoveIconFromTopicCommand.js index adca6c33..bd0585fa 100644 --- a/mindplot/src/main/javascript/commands/RemoveIconFromTopicCommand.js +++ b/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); } diff --git a/mindplot/src/main/javascript/commands/RemoveLinkFromTopicCommand.js b/mindplot/src/main/javascript/commands/RemoveLinkFromTopicCommand.js index cb12136e..045e6cb8 100644 --- a/mindplot/src/main/javascript/commands/RemoveLinkFromTopicCommand.js +++ b/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); } diff --git a/mindplot/src/main/javascript/commands/RemoveNoteFromTopicCommand.js b/mindplot/src/main/javascript/commands/RemoveNoteFromTopicCommand.js index bd2f97dc..ea023576 100644 --- a/mindplot/src/main/javascript/commands/RemoveNoteFromTopicCommand.js +++ b/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); } diff --git a/mindplot/src/test/javascript/static/editor.html b/mindplot/src/test/javascript/static/editor.html new file mode 100644 index 00000000..943322db --- /dev/null +++ b/mindplot/src/test/javascript/static/editor.html @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + +
+ The button +
+ + + + \ No newline at end of file diff --git a/web2d/src/main/javascript/Element.js b/web2d/src/main/javascript/Element.js index f61b3bed..8612edd3 100644 --- a/web2d/src/main/javascript/Element.js +++ b/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. diff --git a/web2d/src/main/javascript/Text.js b/web2d/src/main/javascript/Text.js index 35833ab5..0d0f1640 100644 --- a/web2d/src/main/javascript/Text.js +++ b/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); }, diff --git a/web2d/src/main/javascript/peer/svg/ElementPeer.js b/web2d/src/main/javascript/peer/svg/ElementPeer.js index 489699c2..a380f36c 100644 --- a/web2d/src/main/javascript/peer/svg/ElementPeer.js +++ b/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) { diff --git a/web2d/src/main/javascript/peer/svg/TextPeer.js b/web2d/src/main/javascript/peer/svg/TextPeer.js index ea6f7284..0451c00f 100644 --- a/web2d/src/main/javascript/peer/svg/TextPeer.js +++ b/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; - if ($defined(child)) { - this._native.removeChild(child); - } + var childs = this._native.getChildren(); + childs.forEach(function(child) { + child.dispose(); + }); + this._text = text; - var textNode = window.document.createTextNode(text); - this._native.appendChild(textNode); + this.setVisibility(false); + 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(); - 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('y', y); this._native.setAttribute('x', x); + + // tspan must be positioned manually. + this._native.getElements('tspan').forEach(function(span) { + span.setAttribute('x', x); + }); + }, getPosition : function() { diff --git a/web2d/src/test/javascript/render/font.html b/web2d/src/test/javascript/render/font.html new file mode 100644 index 00000000..fcaa164c --- /dev/null +++ b/web2d/src/test/javascript/render/font.html @@ -0,0 +1,159 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Web2d Fonts Tests

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ArialTahomaVerdanaTimes
+ Multiline Text + +
+ 		+
+ 		+
+ 		+
+
+ Multiline Aligment + +
+ 		+
+ 		+
+ 		+
+
+ + + diff --git a/web2d/src/test/javascript/render/text.html b/web2d/src/test/javascript/render/text.html index 93bc58af..61cbe637 100755 --- a/web2d/src/test/javascript/render/text.html +++ b/web2d/src/test/javascript/render/text.html @@ -15,7 +15,8 @@ web2d.peer.utils = {}; - + @@ -44,66 +45,57 @@ + @@ -132,7 +124,8 @@ Text to Inspect: - + diff --git a/wise-doc/pom.xml b/wise-doc/pom.xml index f73ec88b..ff415f8d 100644 --- a/wise-doc/pom.xml +++ b/wise-doc/pom.xml @@ -8,7 +8,7 @@ org.wisemapping wisemapping - ../pom.xml + ../pom.xml 1.0-SNAPSHOT @@ -25,14 +25,14 @@ 1.0-SNAPSHOT provided - + - + - + maven-war-plugin - + wisemapping @@ -62,37 +62,37 @@ *.wsdl *.xsd - *.xml + *.xml - - + + diff --git a/wise-doc/src/main/webapp/html/editor.html b/wise-doc/src/main/webapp/html/editor.html index 779f90ec..5215db97 100644 --- a/wise-doc/src/main/webapp/html/editor.html +++ b/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 = ''; + var mapXml = ''; var editorProperties = {zoom:0.85,saveOnLoad:true};