From 5aa6775a857f7d518b6a1ecfcdc9472fe7eae95c Mon Sep 17 00:00:00 2001 From: Pablo Luna Date: Tue, 19 Apr 2011 17:01:12 +0100 Subject: [PATCH] adding multiple line support editor and in nodes --- mindplot/src/main/javascript/ActionIcon.js | 9 +- .../src/main/javascript/ConnectionLine.js | 4 +- mindplot/src/main/javascript/IconGroup.js | 6 +- .../src/main/javascript/RichTextEditor.js | 34 +++- mindplot/src/main/javascript/TextEditor.js | 2 +- mindplot/src/main/javascript/Topic.js | 16 +- .../javascript/XMLMindmapSerializer_Pela.js | 5 +- .../layoutManagers/BaseLayoutManager.js | 2 +- .../layoutManagers/FreeMindLayoutManager.js | 28 ++- .../boards/freeMindBoards/Entry.js | 13 +- web2d/pom.xml | 2 + web2d/src/main/javascript/HtmlBox.js | 104 ++++++++++ web2d/src/main/javascript/Toolkit.js | 4 + .../javascript/peer/svg/CurvedLinePeer.js | 2 +- .../main/javascript/peer/svg/HtmlBoxPeer.js | 178 ++++++++++++++++++ wise-webapp/pom.xml | 2 +- wise-webapp/src/main/webapp/css/editor.css | 8 + wise-webapp/src/main/webapp/js/nicEdit.js | 10 +- .../src/main/webapp/jsp/mindmapEditor.jsp | 1 - 19 files changed, 398 insertions(+), 32 deletions(-) create mode 100644 web2d/src/main/javascript/HtmlBox.js create mode 100644 web2d/src/main/javascript/peer/svg/HtmlBoxPeer.js diff --git a/mindplot/src/main/javascript/ActionIcon.js b/mindplot/src/main/javascript/ActionIcon.js index 43ef8a03..49736ce9 100644 --- a/mindplot/src/main/javascript/ActionIcon.js +++ b/mindplot/src/main/javascript/ActionIcon.js @@ -24,7 +24,9 @@ mindplot.ActionIcon = function(topic, url) { objects.extend(mindplot.ActionIcon, mindplot.Icon); mindplot.ActionIcon.prototype.initialize = function() { - + var pos = this.getImage.getPosition(); + var size = this.getSize(); + this._position = new core.Point(pos.x - size.width/2, pos.y - size.height/2); }; mindplot.ActionIcon.prototype.getNode = function(){ @@ -33,9 +35,14 @@ mindplot.ActionIcon.prototype.getNode = function(){ mindplot.ActionIcon.prototype.setPosition = function(x,y){ var size = this.getSize(); + this._position = new core.Point(x,y); this.getImage().setPosition(x-size.width/2, y-size.height/2); }; +mindplot.ActionIcon.prototype.getPosition = function(){ + return this._position; +}; + mindplot.ActionIcon.prototype.addEventListener = function(event, fn){ this.getImage().addEventListener(event, fn); }; diff --git a/mindplot/src/main/javascript/ConnectionLine.js b/mindplot/src/main/javascript/ConnectionLine.js index aa67df2f..9af953b2 100644 --- a/mindplot/src/main/javascript/ConnectionLine.js +++ b/mindplot/src/main/javascript/ConnectionLine.js @@ -29,7 +29,7 @@ mindplot.ConnectionLine = function(sourceNode, targetNode, lineType) var line; if (targetNode.getType() == mindplot.NodeModel.CENTRAL_TOPIC_TYPE) { - line = this._createLine(lineType,mindplot.ConnectionLine.CURVED); + line = this._createLine(lineType,mindplot.ConnectionLine.SIMPLE_CURVED); // line = new web2d.Line(); if(line.getType()=="CurvedLine"){ var ctrlPoints = this._getCtrlPoints(sourceNode, targetNode); @@ -86,7 +86,7 @@ mindplot.ConnectionLine.prototype._createLine = function(lineType, defaultStyle) mindplot.ConnectionLine.getStrokeColor = function() { - return '#c8e794'; + return '#495879'; }; mindplot.ConnectionLine.prototype.setVisibility = function(value) diff --git a/mindplot/src/main/javascript/IconGroup.js b/mindplot/src/main/javascript/IconGroup.js index 9629a59f..4f28e2a0 100644 --- a/mindplot/src/main/javascript/IconGroup.js +++ b/mindplot/src/main/javascript/IconGroup.js @@ -189,10 +189,12 @@ mindplot.IconGroup.prototype.updateIconGroupPosition = function() { mindplot.IconGroup.prototype._calculateOffsets = function() { var offset = this.options.topic.getOffset(); - var text = this.options.topic.getTextShape(); + /*var text = this.options.topic.getTextShape(); var sizeHeight = text.getHtmlFontSize(); var yOffset = offset; var shape = this.options.topic.getShapeType(); - yOffset = text.getPosition().y + (sizeHeight - 18)/2 + 1; + yOffset = text.getPosition().y + (sizeHeight - 18)/2 + 1;*/ + var height = this.options.topic.getSize().height; + var yOffset = (height/2)-this.getSize().height/2; return {x:offset, y:yOffset}; }; \ No newline at end of file diff --git a/mindplot/src/main/javascript/RichTextEditor.js b/mindplot/src/main/javascript/RichTextEditor.js index c31fd759..b03aac6d 100644 --- a/mindplot/src/main/javascript/RichTextEditor.js +++ b/mindplot/src/main/javascript/RichTextEditor.js @@ -90,8 +90,21 @@ mindplot.RichTextEditor = mindplot.TextEditor.extend({ } }.bind(this); _animEffect = effect.periodical(10); - $(this.inputText).value = core.Utils.isDefined(this.initialText)&& this.initialText!=""? this.initialText: node.getText(); - this._editor = new nicEditor({iconsPath: '../images/nicEditorIcons.gif', buttonList : ['bold','italic','underline','removeformat','forecolor', 'fontSize', 'fontFamily', 'xhtml']}).panelInstance("inputText2"); + var text; + this._selectText=true; + if(this.initialText && this.initialText!="") + { + text = this.initialText; + this.initialText=null; + this._selectText=false; + } + else + text = node.getText(); + $(this.inputText).value = text; + this._editor = new nicEditor({iconsPath: '../images/nicEditorIcons.gif', buttonList : ['bold','italic','underline','ol','ul','image','link','unlink','forecolor','removeformat','fontSize','fontFamily'], maxHeight:152}).panelInstance("inputText2"); + this._editor.addEvent('key',function(instance,event){ + console.log("key"); + }); }, init:function(node){ this._currentNode = node; @@ -99,7 +112,21 @@ mindplot.RichTextEditor = mindplot.TextEditor.extend({ $(this._myOverlay.setStyle('display','block')); inst = this._editor.instanceById("inputText2"); inst.elm.focus(); - + if(this._selectText){ + document.execCommand('selectAll', false, null); + } + else{ + var length = $(this.inputText).value.length; + if (document.selection) { + var sel = document.selection.createRange(); + sel.moveStart('character', length); + sel.select(); + } + else { + sel = window.getSelection(); + sel.collapse(inst.elm.firstChild, length); + } + } //becarefull this._editor is not mootools!! @@ -110,7 +137,6 @@ mindplot.RichTextEditor = mindplot.TextEditor.extend({ if(text!=this._text){ this.applyChanges = true; } - console.log('bye'); this.lostFocusListener(); this._editor.removeInstance("inputText2"); this._editor.destruct(); diff --git a/mindplot/src/main/javascript/TextEditor.js b/mindplot/src/main/javascript/TextEditor.js index e00e3397..730dd4de 100644 --- a/mindplot/src/main/javascript/TextEditor.js +++ b/mindplot/src/main/javascript/TextEditor.js @@ -192,7 +192,7 @@ mindplot.TextEditor = new Class({ text = nodeText.getText(); var font = nodeText.getFont(); - font.size = nodeText.getHtmlFontSize(); + font.size = nodeText.getSize(); font.color = nodeText.getColor(); this.setStyle(font); diff --git a/mindplot/src/main/javascript/Topic.js b/mindplot/src/main/javascript/Topic.js index 8d14aade..07f1aef4 100644 --- a/mindplot/src/main/javascript/Topic.js +++ b/mindplot/src/main/javascript/Topic.js @@ -189,7 +189,7 @@ mindplot.Topic.prototype.buildShape = function(attributes, type) } else if (type == mindplot.NodeModel.SHAPE_TYPE_LINE) { - result = new web2d.Line({strokeColor:"#c8e794",strokeWidth:1, strokeOpacity:1}); + result = new web2d.Line({strokeColor:"#495879",strokeWidth:1, strokeOpacity:1}); result.setSize = function(width, height) { this.size = {width:width, height:height}; @@ -440,7 +440,7 @@ mindplot.Topic.prototype.getRelationships = function(){ mindplot.Topic.prototype._buildTextShape = function(disableEventsListeners) { - var result = new web2d.Text(); + var result = new web2d.HtmlBox(); var font = {}; var family = this.getFontFamily(); @@ -1174,7 +1174,7 @@ mindplot.Topic.prototype.setSize = function(size, force, updatePosition) // Update the figure position(ej: central topic must be centered) and children position. this._updatePositionOnChangeSize(oldSize, size, updatePosition); - mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.NodeResizeEvent,[this]); + mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.NodeResizeEvent,[this, oldSize]); } }; @@ -1359,11 +1359,10 @@ mindplot.Topic.prototype.updateNode = function(updatePosition) var textShape = this.getTextShape(); var sizeWidth = textShape.getWidth(); var sizeHeight = textShape.getHeight(); - var font = textShape.getFont(); var iconOffset = this.getIconOffset(); var height = sizeHeight + this._offset; var width = sizeWidth + this._offset*2 + iconOffset +2; - var pos = this._offset /2 -1; + var pos = height/2 - sizeHeight/2; if(this.getShapeType()==mindplot.NodeModel.SHAPE_TYPE_ELIPSE){ var factor = 0.25; height = (width*factor0 && pos.x>nodePos.x) || (Math.sign(nodePos.x)<0 && pos.x0 && pos.x>nodePos.x) || (Math.sign(nodePos.x)<0 && pos.x${basedir}/target/tmp/peer/svg/CurvedLinePeer-min.js ${basedir}/target/tmp/peer/svg/ArrowPeer-min.js ${basedir}/target/tmp/peer/svg/TextPeer-min.js + ${basedir}/target/tmp/peer/svg/HtmlBoxPeer-min.js ${basedir}/target/tmp/peer/svg/WorkspacePeer-min.js ${basedir}/target/tmp/peer/svg/GroupPeer-min.js ${basedir}/target/tmp/peer/svg/RectPeer-min.js @@ -79,6 +80,7 @@ ${basedir}/target/tmp/Arrow-min.js ${basedir}/target/tmp/Rect-min.js ${basedir}/target/tmp/Text-min.js + ${basedir}/target/tmp/HtmlBox-min.js ${basedir}/target/tmp/Toolkit-min.js ${basedir}/target/tmp/Workspace-min.js diff --git a/web2d/src/main/javascript/HtmlBox.js b/web2d/src/main/javascript/HtmlBox.js new file mode 100644 index 00000000..d9628bb5 --- /dev/null +++ b/web2d/src/main/javascript/HtmlBox.js @@ -0,0 +1,104 @@ +/* +* 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. +*/ + +web2d.HtmlBox = function(attributes) +{ + var peer = web2d.peer.Toolkit.createHtmlBox(); + web2d.Element.call(this, peer, attributes); +}; +objects.extend(web2d.HtmlBox, web2d.Element); + +web2d.HtmlBox.prototype.getType = function() +{ + return "HtmlBox"; +}; + +web2d.HtmlBox.prototype.setText = function(text) +{ + this._peer.setText(text); +}; + +web2d.HtmlBox.prototype.getText = function() +{ + return this._peer.getText(); +}; + +web2d.HtmlBox.prototype.setFont = function(font, size, style, weight) +{ + this._peer.setFont(font, size, style, weight); +}; + +web2d.HtmlBox.prototype.setColor = function(color) +{ + this._peer.setColor(color); +}; + +web2d.HtmlBox.prototype.getColor = function() +{ + return this._peer.getColor(); +}; + +web2d.HtmlBox.prototype.setStyle = function(style) +{ + this._peer.setStyle(style); +}; + +web2d.HtmlBox.prototype.setWeight = function(weight) +{ + this._peer.setWeight(weight); +}; + +web2d.HtmlBox.prototype.setFontFamily = function(family) +{ + this._peer.setFontFamily(family); +}; + +web2d.HtmlBox.prototype.getFont = function() +{ + return this._peer.getFont(); +}; + +web2d.HtmlBox.prototype.setSize = function(size) +{ + this._peer.setSize(size); +}; + +web2d.HtmlBox.prototype.getWidth = function() +{ + return parseInt(this._peer.getWidth()); +}; + +web2d.HtmlBox.prototype.getHeight = function() +{ + return parseInt(this._peer.getHeight()); +}; + +web2d.HtmlBox.prototype.setWidth = function(width) +{ + return this._peer.setWidth(width); +}; + +web2d.HtmlBox.prototype.setHeight = function(height) +{ + return this._peer.setHeight(height); +}; + +web2d.HtmlBox.prototype.setTextSize = function() +{ + return this._peer.updateSize(); +}; \ No newline at end of file diff --git a/web2d/src/main/javascript/Toolkit.js b/web2d/src/main/javascript/Toolkit.js index 7c2e4292..217f1607 100644 --- a/web2d/src/main/javascript/Toolkit.js +++ b/web2d/src/main/javascript/Toolkit.js @@ -53,6 +53,10 @@ web2d.peer.ToolkitSVG = { return new web2d.peer.svg.TextPeer(); }, + createHtmlBox: function () + { + return new web2d.peer.svg.HtmlBoxPeer(); + }, createImage: function () { return new web2d.peer.svg.ImagePeer(); diff --git a/web2d/src/main/javascript/peer/svg/CurvedLinePeer.js b/web2d/src/main/javascript/peer/svg/CurvedLinePeer.js index 08af0470..7968104f 100644 --- a/web2d/src/main/javascript/peer/svg/CurvedLinePeer.js +++ b/web2d/src/main/javascript/peer/svg/CurvedLinePeer.js @@ -20,7 +20,7 @@ web2d.peer.svg.CurvedLinePeer = function() { var svgElement = window.document.createElementNS(this.svgNamespace, 'path'); web2d.peer.svg.ElementPeer.call(this, svgElement); - this._style={fill:'#c8e794'}; + this._style={fill:'gray'}; this._updateStyle(); this._customControlPoint_1 = false; this._customControlPoint_2 = false; diff --git a/web2d/src/main/javascript/peer/svg/HtmlBoxPeer.js b/web2d/src/main/javascript/peer/svg/HtmlBoxPeer.js new file mode 100644 index 00000000..dac98c33 --- /dev/null +++ b/web2d/src/main/javascript/peer/svg/HtmlBoxPeer.js @@ -0,0 +1,178 @@ +/* +* 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. +*/ + +web2d.peer.svg.HtmlBoxPeer = function() +{ + var svgElement = window.document.createElementNS(this.svgNamespace, 'foreignObject'); + web2d.peer.svg.ElementPeer.call(this, svgElement); + this._native.setAttribute("focusable", "true"); + svgElement.setAttribute('width',1); + svgElement.setAttribute('height',1); + $(svgElement).setAttribute("x",0); + $(svgElement).setAttribute("y",0); + + this._position = {x:0,y:0}; + this._font = new web2d.Font("Arial", this); + var body = window.document.createElementNS("http://www.w3.org/1999/xhtml",'body'); + this._body = window.document.createElementNS("http://www.w3.org/1999/xhtml",'div'); + $(body).setStyle("backgroundColor","transparent"); + $(this._body).setStyles({position:"absolute", left:0, top:0, whiteSpace:"nowrap"}); + body.appendChild(this._body); + this._native.appendChild(body); +}; + +objects.extend(web2d.peer.svg.HtmlBoxPeer, web2d.peer.svg.ElementPeer); + +//todo: use ths method to specify the maximum size of the text box +/*web2d.web2d.peer.svg.HtmlBoxPeer.prototype.setSize = function(width, height) +{ + web2d.web2d.peer.svg.HtmlBoxPeer.superClass.setSize.call(this,width,height); + this._native.setAttribute('rx', width / 2); + this._native.setAttribute('ry', height /ose 2); +}; +*/ + +web2d.peer.svg.HtmlBoxPeer.prototype.appendChild = function(element) +{ + this._native.appendChild(element._native); +}; + +web2d.peer.svg.HtmlBoxPeer.prototype.setText = function(text) +{ + var child = this._body.firstChild; + if (core.Utils.isDefined(child)) + { + this._body.removeChild(child); + } + this._text = text; + this._body.innerHTML=text; + this.updateSize.delay(1, this); +}; + +web2d.peer.svg.HtmlBoxPeer.prototype.getText = function() +{ + return this._text; +}; + +web2d.peer.svg.HtmlBoxPeer.prototype.setPosition = function(x, y) +{ + this._position = {x:x, y:y}; + $(this._native).setAttribute('y', y); + $(this._native).setAttribute('x', x); +}; + +web2d.peer.svg.HtmlBoxPeer.prototype.getPosition = function() +{ + return this._position; +}; + +web2d.peer.svg.HtmlBoxPeer.prototype.setFont = function(font, size, style, weight) +{ + if (core.Utils.isDefined(font)) + { + this._font = new web2d.Font(font, this); + } + if (core.Utils.isDefined(style)) + { + this._font.setStyle(style); + } + if (core.Utils.isDefined(weight)) + { + this._font.setWeight(weight); + } + if (core.Utils.isDefined(size)) + { + this._font.setSize(size); + } + this._updateFontStyle(); +}; + +web2d.peer.svg.HtmlBoxPeer.prototype._updateFontStyle = function() +{ + $(this._body).setStyles({fontFamily: this._font.getFontFamily(), fontSize: this._font.getGraphSize(), fontStyle: this._font.getStyle(), fontWeight: this._font.getWeight()}); + +}; +web2d.peer.svg.HtmlBoxPeer.prototype.setColor = function(color) +{ + $(this._body).setStyle('color', color); +}; + +web2d.peer.svg.HtmlBoxPeer.prototype.getColor = function() +{ + return $(this._body).getStyle('color'); +}; + +web2d.peer.svg.HtmlBoxPeer.prototype.setStyle = function (style) +{ + this._font.setStyle(style); + this._updateFontStyle(); +}; + +web2d.peer.svg.HtmlBoxPeer.prototype.setWeight = function (weight) +{ + this._font.setWeight(weight); + this._updateFontStyle(); +}; + +web2d.peer.svg.HtmlBoxPeer.prototype.setFontFamily = function (family) +{ + var oldFont = this._font; + this._font = new web2d.Font(family, this); + this._font.setSize(oldFont.getSize()); + this._font.setStyle(oldFont.getStyle()); + this._font.setWeight(oldFont.getWeight()); + this._updateFontStyle(); +}; + +web2d.peer.svg.HtmlBoxPeer.prototype.getFont = function () +{ + return { + font:this._font.getFont(), + size:parseInt(this._font.getSize()), + style:this._font.getStyle(), + weight:this._font.getWeight() + }; +}; + +web2d.peer.svg.HtmlBoxPeer.prototype.setSize = function (size) +{ + this._font.setSize(size); + this._updateFontStyle(); +}; + +web2d.peer.svg.HtmlBoxPeer.prototype.getWidth = function () +{ + var scale = web2d.peer.utils.TransformUtil.workoutScale(this); + var width = $(this._body).getSize().size.x; + return width*scale.width*3/4; +}; + +web2d.peer.svg.HtmlBoxPeer.prototype.getHeight = function () +{ + var scale = web2d.peer.utils.TransformUtil.workoutScale(this); + var height = $(this._body).getSize().size.y; + return height*scale.height*3/4; +}; + +web2d.peer.svg.HtmlBoxPeer.prototype.updateSize = function() +{ + var width = this.getWidth(); + this._native.setAttribute("width", width>1?width:1); + var height = this.getHeight(); + this._native.setAttribute("height", height>1?height:1); +}; \ No newline at end of file diff --git a/wise-webapp/pom.xml b/wise-webapp/pom.xml index 74400d28..2f75d2b3 100644 --- a/wise-webapp/pom.xml +++ b/wise-webapp/pom.xml @@ -443,7 +443,7 @@ help.js helpPanel.js IconPanel.js - + nicEdit.js diff --git a/wise-webapp/src/main/webapp/css/editor.css b/wise-webapp/src/main/webapp/css/editor.css index d0d55023..5d2bcf4e 100644 --- a/wise-webapp/src/main/webapp/css/editor.css +++ b/wise-webapp/src/main/webapp/css/editor.css @@ -737,6 +737,14 @@ div#toolbar .relationshiplabel{ width:56px; } +#mindplot ul{ + list-style:disc inside none; +} + +#mindplot ol{ + list-style:decimal inside none; +} + .nicEdit-main { outline:none; } \ No newline at end of file diff --git a/wise-webapp/src/main/webapp/js/nicEdit.js b/wise-webapp/src/main/webapp/js/nicEdit.js index fbe1b3b6..d67bc021 100644 --- a/wise-webapp/src/main/webapp/js/nicEdit.js +++ b/wise-webapp/src/main/webapp/js/nicEdit.js @@ -399,11 +399,11 @@ var nicEditor = bkClass.extend({ selectCheck : function(e,t) { var found = false; do{ - if(t.className && t.className.indexOf && t.className.indexOf('nicEdit') != -1) { + if(t.className && t.className.indexOf && (t.className.indexOf('nicEdit') != -1 || t.className.indexOf('nicEdit-mainContainer') != -1)) { return false; } } while(t = t.parentNode); - this.fireEvent('blur',this. -