diff --git a/mindplot/src/main/javascript/IconGroup.js b/mindplot/src/main/javascript/IconGroup.js index e5efa1ac..3dbe2294 100644 --- a/mindplot/src/main/javascript/IconGroup.js +++ b/mindplot/src/main/javascript/IconGroup.js @@ -53,7 +53,6 @@ mindplot.IconGroup = new Class({ addIcon : function(icon) { $defined(icon, "icon is not defined"); - icon.getImage().setVisibility(false); icon.setGroup(this); this._icons.push(icon); @@ -67,8 +66,6 @@ mindplot.IconGroup = new Class({ // Register event for the group .. this._removeTip.decorate(this._topicId, icon); - - icon.getImage().setVisibility(true); }, _findIconFromUrl : function(url) { diff --git a/mindplot/src/main/javascript/MultilineTextEditor.js b/mindplot/src/main/javascript/MultilineTextEditor.js index c3833281..fa1231e7 100644 --- a/mindplot/src/main/javascript/MultilineTextEditor.js +++ b/mindplot/src/main/javascript/MultilineTextEditor.js @@ -23,53 +23,38 @@ mindplot.MultilineTextEditor = new Class({ _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"} + overflow:"hidden", + border: "0 none" + } ); - - var inputContainer = new Element('div'); - inputContainer.setStyles({ - border:"none", - overflow:"auto" - }); - inputContainer.inject(result); - - var inputText = new Element('textarea', - { rows:2, - tabindex:'-1', - value:""} + var textareaElem = new Element('textarea', + { tabindex:'-1', + value:"", + wrap:'off' + } ); - inputText.setStyles({ - border:"none", - background:"transparent" + + textareaElem.setStyles({ + border: "0 none", + background:"transparent", + outline: '0 none', + resize: 'none', + overflow:"hidden" }); - 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); - - + textareaElem.inject(result); return result; }, - _registerEvents : function(divElem) { - var inputElem = this._getTextareaElem(); - var spanElem = this._getSpanElem(); + _registerEvents : function(containerElem) { + var textareaElem = this._getTextareaElem(); - divElem.addEvent('keydown', function (event) { + textareaElem.addEvent('keydown', function (event) { switch (event.key) { case 'esc': this.close(false); @@ -78,38 +63,57 @@ mindplot.MultilineTextEditor = new Class({ if (event.meta || event.control) { // @todo: Enters must be in any place ... - inputElem.value = inputElem.value + "\n"; + textareaElem.value = textareaElem.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; } + this._adjustEditorSize(); event.stopPropagation(); }.bind(this)); + + textareaElem.addEvent('blur', function() { + this.close(true); + }.bind(this)); + // If the user clicks on the input, all event must be ignored ... - divElem.addEvent('click', function(event) { + containerElem.addEvent('click', function(event) { event.stopPropagation(); }); - divElem.addEvent('dblclick', function(event) { + containerElem.addEvent('dblclick', function(event) { event.stopPropagation(); }); - divElem.addEvent('mousedown', function(event) { + containerElem.addEvent('mousedown', function(event) { event.stopPropagation(); }); }, + _adjustEditorSize : function() { + + var textElem = this._getTextareaElem(); + console.log(textElem.value); + + var lines = textElem.value.split('\n'); + var maxLineLength = 5; + lines.forEach(function(line) { + if (maxLineLength < line.length) + maxLineLength = line.length; + }); + + textElem.setAttribute('cols', maxLineLength + 3); + textElem.setAttribute('rows', lines.length); + + this._containerElem.setStyles({ + width: maxLineLength + 'em', + height: textElem.getSize().height + }); + }, + isVisible : function () { - return $defined(this._divElem) && this._divElem.getStyle('display') == 'block'; + return $defined(this._containerElem) && this._containerElem.getStyle('display') == 'block'; }, _updateModel : function () { @@ -127,11 +131,11 @@ mindplot.MultilineTextEditor = new Class({ if (!this.isVisible()) { //Create editor ui - var editorElem = this._buildEditor(); - editorElem.inject($(document.body)); + var containerElem = this._buildEditor(); + containerElem.inject($(document.body)); - this._divElem = editorElem; - this._registerEvents(editorElem); + this._containerElem = containerElem; + this._registerEvents(containerElem); this._showEditor(text); } }, @@ -158,15 +162,11 @@ mindplot.MultilineTextEditor = new Class({ var displayFunc = function() { // Position the editor and set the size... var textShape = this._topic.getTextShape(); - textShape.positionRelativeTo(this._divElem, { + textShape.positionRelativeTo(this._containerElem, { 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); + this._containerElem.setStyle('display', 'block'); var inputElem = this._getTextareaElem(); inputElem.focus(); @@ -179,7 +179,6 @@ mindplot.MultilineTextEditor = new Class({ _setStyle : function (fontStyle) { var inputField = this._getTextareaElem(); - var spanField = this._getSpanElem(); if (!$defined(fontStyle.font)) { fontStyle.font = "Arial"; } @@ -192,24 +191,21 @@ mindplot.MultilineTextEditor = new Class({ 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"; + var style = { + fontSize : fontStyle.size + "px", + fontFamily : fontStyle.font, + fontStyle : fontStyle.style, + fontWeight : fontStyle.weight, + color : fontStyle.color + }; + inputField.setStyles(style); + this._containerElem.setStyles(style); }, _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; + var textareaElem = this._getTextareaElem(); + textareaElem.value = text; + this._adjustEditorSize(); }, _getText : function() { @@ -217,19 +213,7 @@ mindplot.MultilineTextEditor = new Class({ }, _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"; + return this._containerElem.getElement('textarea'); }, _changeCursor : function(inputElem, selectText) { @@ -263,8 +247,8 @@ mindplot.MultilineTextEditor = new Class({ this._topic.getTextShape().setVisibility(true); // Remove it form the screen ... - this._divElem.dispose(); - this._divElem = null; + this._containerElem.dispose(); + this._containerElem = null; } } }); diff --git a/mindplot/src/main/javascript/TextEditor.js b/mindplot/src/main/javascript/TextEditor.js index 401fe131..afd01666 100644 --- a/mindplot/src/main/javascript/TextEditor.js +++ b/mindplot/src/main/javascript/TextEditor.js @@ -102,7 +102,7 @@ mindplot.TextEditor = new Class({ }, isVisible : function () { - return $defined(this._divElem) && this._divElem.getStyle('display') == 'block'; + return $defined(this._containerElem) && this._containerElem.getStyle('display') == 'block'; }, _updateModel : function () { @@ -123,7 +123,7 @@ mindplot.TextEditor = new Class({ var editorElem = this._buildEditor(); editorElem.inject($(document.body)); - this._divElem = editorElem; + this._containerElem = editorElem; this._registerEvents(editorElem); this._showEditor(text); } @@ -151,11 +151,11 @@ mindplot.TextEditor = new Class({ var displayFunc = function() { // Position the editor and set the size... var textShape = this._topic.getTextShape(); - textShape.positionRelativeTo(this._divElem, { + textShape.positionRelativeTo(this._containerElem, { position: {x: 'left',y:'top'}, edge: {x: 'left', y: 'top'} }); - this._divElem.setStyle('display', 'block'); + this._containerElem.setStyle('display', 'block'); // Set size ... var elemSize = topic.getSize(); @@ -199,7 +199,7 @@ mindplot.TextEditor = new Class({ _setText : function(text) { var inputField = this._getTextareaElem(); inputField.size = text.length + 1; - this._divElem.style.width = (inputField.size * parseInt(inputField.style.fontSize) + 100) + "px"; + this._containerElem.style.width = (inputField.size * parseInt(inputField.style.fontSize) + 100) + "px"; var spanField = this._getSpanElem(); spanField.innerHTML = text; inputField.value = text; @@ -210,19 +210,19 @@ mindplot.TextEditor = new Class({ }, _getTextareaElem : function() { - return this._divElem.getElement('input'); + return this._containerElem.getElement('input'); }, _getSpanElem : function() { - return this._divElem.getElement('span'); + return this._containerElem.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"; + this._containerElem.style.width = this._size.width * 2 + "px"; + this._containerElem.style.height = this._size.height + "px"; }, _changeCursor : function(inputElem, selectText) { @@ -256,8 +256,8 @@ mindplot.TextEditor = new Class({ this._topic.getTextShape().setVisibility(true); // Remove it form the screen ... - this._divElem.dispose(); - this._divElem = null; + this._containerElem.dispose(); + this._containerElem = null; } } }); diff --git a/mindplot/src/main/javascript/Topic.js b/mindplot/src/main/javascript/Topic.js index 6631f949..447bbf63 100644 --- a/mindplot/src/main/javascript/Topic.js +++ b/mindplot/src/main/javascript/Topic.js @@ -153,8 +153,7 @@ mindplot.Topic = new Class({ return this._innerShape; }, - - buildShape : function(attributes, type) { + buildShape : function(attributes, type) { var result; if (!$defined(type)) { type = this.getShapeType(); @@ -164,7 +163,7 @@ mindplot.Topic = new Class({ result = new web2d.Rect(0, attributes); } else if (type == mindplot.model.NodeModel.SHAPE_TYPE_ELIPSE) { - result = new web2d.Elipse(attributes); + result = new web2d.Rect(0.9, attributes); } else if (type == mindplot.model.NodeModel.SHAPE_TYPE_ROUNDED_RECT) { result = new web2d.Rect(0.3, attributes); diff --git a/web2d/src/main/javascript/peer/svg/GroupPeer.js b/web2d/src/main/javascript/peer/svg/GroupPeer.js index 238947e9..1af52095 100644 --- a/web2d/src/main/javascript/peer/svg/GroupPeer.js +++ b/web2d/src/main/javascript/peer/svg/GroupPeer.js @@ -33,9 +33,6 @@ web2d.peer.svg.GroupPeer = new Class({ this._coordSize.width = width; this._coordSize.height = height; - console.log("coordSize.width:" + width); - console.log("coordSize.height:" + height); - if (change) this.updateTransform(); web2d.peer.utils.EventUtils.broadcastChangeEvent(this, "strokeStyle"); @@ -73,21 +70,6 @@ web2d.peer.svg.GroupPeer = new Class({ var cx = this._position.x - this._coordOrigin.x * sx; var cy = this._position.y - this._coordOrigin.y * sy; - console.log("------------------"); - console.log("this._coordSize.width:" + this._coordSize.width); - console.log("this._coordSize.height:" + this._coordSize.height); - - console.log("cx:" + cx); - console.log("cy:" + cy); - - console.log("this._size.width:" + this._size.width); - console.log("this._size.height:" + this._size.height); - - console.log("sx:" + sx); - console.log("sy:" + sy); - console.log("------------------"); - - this._native.setAttribute("transform", "translate(" + cx + "," + cy + ") scale(" + sx + "," + sy + ")"); }, diff --git a/web2d/src/main/javascript/peer/svg/TextPeer.js b/web2d/src/main/javascript/peer/svg/TextPeer.js index 0451c00f..c1c88290 100644 --- a/web2d/src/main/javascript/peer/svg/TextPeer.js +++ b/web2d/src/main/javascript/peer/svg/TextPeer.js @@ -55,7 +55,7 @@ web2d.peer.svg.TextPeer = new Class({ var tspan = window.document.createElementNS(this.svgNamespace, 'tspan'); tspan.setAttribute('dy', '1em'); tspan.setAttribute('x', this.getPosition().x); - var tspanContent = window.document.createTextNode(line); + var tspanContent = window.document.createTextNode(line.length == 0 ? " " : line); tspan.appendChild(tspanContent); tspans.push(tspan); @@ -107,11 +107,8 @@ web2d.peer.svg.TextPeer = new Class({ this._native.setAttribute('font-size', this._font.getGraphSize()); this._native.setAttribute('font-style', this._font.getStyle()); this._native.setAttribute('font-weight', this._font.getWeight()); - - var scale = this._font.getFontScale(); - this._native.xFontScale = scale.toFixed(1); - }, + setColor : function(color) { this._native.setAttribute('fill', color); },