adding new editor

mindplot/pom.xml

@@ -74,6 +74,8 @@
                                     <filelist dir="${basedir}/src/main/javascript/" files="DragTopicPositioner.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/" files="Board.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="TextEditorFactory.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/" files="VariableDistanceBoard.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/" files="util/Shape.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/" files="FixedDistanceBoard.js"/>
@@ -207,6 +209,8 @@
                                         <include>DragTopicPositioner-min.js</include>
                                         <include>Board-min.js</include>
                                         <include>TextEditor-min.js</include>
+                                        <include>RichTextEditor-min.js</include>
+                                        <include>TextEditorFactory-min.js</include>
                                         <include>VariableDistanceBoard-min.js</include>
                                         <include>util/Shape-min.js</include>
                                         <include>FixedDistanceBoard-min.js</include>

mindplot/src/main/javascript/EditorOptions.js

@@ -1,5 +1,8 @@
 mindplot.EditorOptions =
 {
 //    LayoutManager:"OriginalLayout"
-        LayoutManager:"FreeMindLayout"
+    LayoutManager:"FreeMindLayout",
+//    textEditor:"TextEditor"
+    textEditor:"RichTextEditor"
+
 };

mindplot/src/main/javascript/MindmapDesigner.js

@@ -31,12 +31,13 @@ mindplot.MindmapDesigner = function(profile, divElement)
     // Init Screen manager..
     var screenManager = new mindplot.ScreenManager(profile.width, profile.height, divElement);
 
-    //create editor
-    this._editor = new mindplot.TextEditor(screenManager, this._actionRunner);
-
     var workspace = new mindplot.Workspace(profile, screenManager, this._zoom);
     this._workspace = workspace;
 
+    //create editor
+    var editorClass = mindplot.TextEditorFactory.getTextEditorFromName(mindplot.EditorOptions.textEditor);
+    this._editor = new editorClass(this, this._actionRunner);
+
 
     // Init layout managers ...
     this._topics = [];
@@ -91,30 +92,34 @@ mindplot.MindmapDesigner.prototype._registerEvents = function()
         // Create nodes on double click...
         screenManager.addEventListener('click', function(event)
         {
-            var t = mindmapDesigner.getEditor()._isVisible();
+            if(workspace.isWorkspaceEventsEnabled()){
-            mindmapDesigner.getEditor().lostFocus();
+                var t = mindmapDesigner.getEditor().isVisible();
-            // @todo: Puaj hack...
+                mindmapDesigner.getEditor().lostFocus();
-            mindmapDesigner._cleanScreen();
+                // @todo: Puaj hack...
+                mindmapDesigner._cleanScreen();
+            }
         });
 
         screenManager.addEventListener('dblclick', function(event)
         {
-            mindmapDesigner.getEditor().lostFocus();
+            if(workspace.isWorkspaceEventsEnabled()){
-            // Get mouse position
+                mindmapDesigner.getEditor().lostFocus();
-            var pos = screenManager.getWorkspaceMousePosition(event);
+                // Get mouse position
+                var pos = screenManager.getWorkspaceMousePosition(event);
 
-            // Create a new topic model ...
+                // Create a new topic model ...
-            var mindmap = mindmapDesigner.getMindmap();
+                var mindmap = mindmapDesigner.getMindmap();
-            var model = mindmap.createNode(mindplot.NodeModel.MAIN_TOPIC_TYPE);
+                var model = mindmap.createNode(mindplot.NodeModel.MAIN_TOPIC_TYPE);
-            model.setPosition(pos.x, pos.y);
+                model.setPosition(pos.x, pos.y);
 
-            // Get central topic ...
+                // Get central topic ...
-            var centralTopic = mindmapDesigner.getCentralTopic();
+                var centralTopic = mindmapDesigner.getCentralTopic();
-            var centralTopicId = centralTopic.getId();
+                var centralTopicId = centralTopic.getId();
 
-            // Execute action ...
+                // Execute action ...
-            var command = new mindplot.commands.AddTopicCommand(model, centralTopicId, true);
+                var command = new mindplot.commands.AddTopicCommand(model, centralTopicId, true);
-            this._actionRunner.execute(command);
+                this._actionRunner.execute(command);
+            }
         }.bind(this));
     }
     ;
@@ -1036,6 +1041,7 @@ mindplot.MindmapDesigner.prototype.getSelectedObjects = function()
 
 mindplot.MindmapDesigner.prototype.keyEventHandler = function(event)
 {
+    if(this._workspace.isWorkspaceEventsEnabled()){
     var evt = (event) ? event : window.event;
 
     if (evt.keyCode == 8)
@@ -1056,7 +1062,7 @@ mindplot.MindmapDesigner.prototype.keyEventHandler = function(event)
     {
         evt = new Event(event);
         var key = evt.key;
-        if (!this._editor._isVisible())
+        if (!this._editor.isVisible())
         {
             if (((evt.code >= 65 && evt.code <= 90) || (evt.code >= 48 && evt.code <= 57)) && !(evt.control || evt.meta))
             {
@@ -1193,6 +1199,7 @@ mindplot.MindmapDesigner.prototype.keyEventHandler = function(event)
             evt.stop();
         }
     }
+    }
 };
 
 mindplot.MindmapDesigner.prototype._showEditor = function(key)

mindplot/src/main/javascript/RichTextEditor.js

@@ -0,0 +1,162 @@
+/*
+*    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.RichTextEditor = mindplot.TextEditor.extend({
+    initialize:function(screenManager,actionRunner){
+        this.parent(screenManager, actionRunner);
+    },
+    _createUI:function(){
+        //Create editor ui
+        this._size = {width:440, height:200};
+        this._myOverlay = new Element('div').setStyles({position:"absolute", display: "none", zIndex: "8", top: "50%", left:"50%", marginLeft:"-200px", marginTop:"-90px", width:"400px", height:"180px"});
+        var inputContainer = new Element('div').setStyles({border:"none", overflow:"auto"}).injectInside(this._myOverlay);
+        this.inputText = new Element('textarea').setProperties({tabindex:'-1', id:"inputText2", value:""}).setStyles({width:"398px", height:"175px", border:"none", background:"transparent"}).injectInside(inputContainer);
+        /*var spanContainer = new Element('div').setStyle('visibility', "hidden").injectInside(this._myOverlay);
+        this._spanText = new Element('span').setProperties({id: "spanText2", tabindex:"-1"}).setStyle('white-space', "nowrap").setStyle('nowrap', 'nowrap').injectInside(spanContainer);
+        */this._myOverlay.injectInside(this._screenManager.getContainer());
+        this._editorNode = new web2d.Rect(0.3,mindplot.Topic.OUTER_SHAPE_ATTRIBUTES);
+        this._editorNode.setSize(50,20);
+        this._editorNode.setVisibility(false);
+        this._designer.getWorkSpace().appendChild(this._editorNode);
+
+//        $(this.inputText).setStyle('display','block');
+        this._addListeners();
+    },
+    _addListeners:function(){
+
+        $(this._myOverlay).addEvent('click', function(event){
+            event.preventDefault();
+            event.stop();
+        }.bindWithEvent(this));
+        $(this._myOverlay).addEvent('dblclick', function(event){
+            event.preventDefault();
+            event.stop();
+        }.bindWithEvent(this));
+    },
+    getFocusEvent:function(node){
+        var screenSize = this._designer.getWorkSpace().getSize();
+        var coordOrigin = this._designer.getWorkSpace()._workspace.getCoordOrigin();
+        var middlePosition = {x:parseInt(screenSize.width)/2 + parseInt(coordOrigin.x), y:parseInt(screenSize.height)/2 + parseInt(coordOrigin.y)};
+
+        this._designer.getWorkSpace().enableWorkspaceEvents(false);
+        var position = node.getPosition().clone();
+        var size = node.getSize();
+        this._editorNode.setPosition(position.x-(size.width/2), position.y-(size.height/2));
+        position = this._editorNode.getPosition();
+        this._editorNode.setSize(size.width, size.height);
+        this._editorNode.moveToFront();
+        this._editorNode.setVisibility(true);
+        var scale = web2d.peer.utils.TransformUtil.workoutScale(node.getOuterShape());
+//        scale.width=1;
+//        scale.height = 1;
+        var steps = 10;
+        this._delta = {width:((this._size.width/scale.width)-size.width)/steps, height:((this._size.height/scale.height)-size.height)/steps};
+        var finx = (middlePosition.x-(((this._size.width)/2)/scale.width));
+        var finy = (middlePosition.y-((this._size.height/2)/scale.height));
+        var step = 10;
+        var d = {x:(position.x - finx)/step, y:(position.y - finy)/step};
+        var _animEffect = null;
+        var effect = function(){
+            if(step>=0){
+                var xStep= (position.x -finx)/step;
+                var yStep= (position.y -finy)/step;
+                var pos = {x:position.x - d.x*(10-step), y: position.y -d.y *(10-step)};
+
+                var size = this._editorNode.getSize();
+                this._editorNode.setSize(size.width + this._delta.width, size.height + this._delta.height);
+                this._editorNode.setPosition(pos.x, pos.y);
+                if(step>0)
+                    this._editorNode.setOpacity(1-step/10);
+                step--;
+            }else{
+                $clear(_animEffect);
+                this._editorNode.setSize((this._size.width/scale.width), (this._size.height/scale.height));
+                this.init(node);
+            }
+        }.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");
+    },
+    init:function(node){
+        this._currentNode = node;
+        this.applyChanges = false;
+        $(this._myOverlay.setStyle('display','block'));
+        inst = this._editor.instanceById("inputText2");
+        inst.elm.focus();
+
+
+
+        //becarefull this._editor is not mootools!!
+        this._editor.addEvent('blur',function(event){
+            this._myOverlay.setStyle('display','none');
+                var text = this._text;
+                this._text = this._editor.instanceById("inputText2").getContent();
+                if(text!=this._text){
+                    this.applyChanges = true;
+                }
+                console.log('bye');
+                this.lostFocusListener();
+                this._editor.removeInstance("inputText2");
+                this._editor.destruct();
+                this._editor = null;
+
+        }.bind(this));
+
+        this._editor.fireEvent();
+        $(this.inputText).focus();
+    },
+    getText:function(){
+        return this._text;
+    },
+    lostFocusListener:function(){
+        this._hideNode();
+        if (this._currentNode != null)
+            {
+                if(this.applyChanges)
+                {
+                    this._updateNode();
+                }
+                this.applyChanges=true;
+                this._currentNode = null;
+            }
+    },
+    _hideNode:function(){
+        var _animEffect = null;
+        var step = 10;
+        var position = this._editorNode.getPosition();
+        var finx = this._currentNode.getPosition().x - this._currentNode.getSize().width/2;
+        var finy = this._currentNode.getPosition().y - this._currentNode.getSize().height/2;
+        var d = {x:(position.x - finx)/step, y:(position.y - finy)/step};
+        var effect = function(){
+            if(step>=0){
+                var pos = {x:position.x - d.x*(10-step), y: position.y - d.y*(10-step)};
+
+                var size = this._editorNode.getSize();
+                this._editorNode.setSize(size.width - this._delta.width, size.height - this._delta.height);
+                this._editorNode.setPosition(pos.x, pos.y);
+                this._editorNode.setOpacity(step/10);
+                step--;
+            }else{
+                $clear(_animEffect);
+                this._designer.getWorkSpace().enableWorkspaceEvents(true);
+                this._editorNode.setVisibility(false);            }
+        }.bind(this);
+        _animEffect = effect.periodical(10);
+    }
+});

mindplot/src/main/javascript/TextEditor.js

@@ -1,179 +1,385 @@
 /*
-*    Copyright [2011] [wisemapping]
+ *    Copyright [2011] [wisemapping]
-*
+ *
-*   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
-*   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
-*   "powered by wisemapping" text requirement on every single page;
+ *   "powered by wisemapping" text requirement on every single page;
-*   you may not use this file except in compliance with the License.
+ *   you may not use this file except in compliance with the License.
-*   You may obtain a copy of the license at
+ *   You may obtain a copy of the license at
-*
+ *
-*       http://www.wisemapping.org/license
+ *       http://www.wisemapping.org/license
-*
+ *
-*   Unless required by applicable law or agreed to in writing, software
+ *   Unless required by applicable law or agreed to in writing, software
-*   distributed under the License is distributed on an "AS IS" BASIS,
+ *   distributed under the License is distributed on an "AS IS" BASIS,
-*   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-*   See the License for the specific language governing permissions and
+ *   See the License for the specific language governing permissions and
-*   limitations under the License.
+ *   limitations under the License.
-*/
+ */
 
-mindplot.TextEditor = function(screenManager,actionRunner)
+mindplot.TextEditor = new Class({
-{
+    initialize:function(designer,actionRunner)
-    this._screenManager = screenManager;
+    {
-    this._container = screenManager.getContainer();
+        this._designer = designer;
-    this._actionRunner = actionRunner;
+        this._screenManager = designer.getWorkSpace().getScreenManager();
+        this._container = this._screenManager.getContainer();
+        this._actionRunner = actionRunner;
+        this._isVisible=false;
 
-    //Create editor ui
+        //Create editor ui
-    this._size = {width:500, height:100};
+        this._createUI();
-    this._myOverlay = new Element('div').setStyles({position:"absolute", display: "none", zIndex: "8", top: 0, left:0, width:"500px", height:"100px"});
-    var inputContainer = new Element('div').setStyles({border:"none", overflow:"auto"}).injectInside(this._myOverlay);
-    this.inputText = new Element('input').setProperties({type:"text", tabindex:'-1', id:"inputText", value:""}).setStyles({border:"none", background:"transparent"}).injectInside(inputContainer);
-    var spanContainer = new Element('div').setStyle('visibility', "hidden").injectInside(this._myOverlay);
-    this._spanText = new Element('span').setProperties({id: "spanText", tabindex:"-1"}).setStyle('white-space', "nowrap").setStyle('nowrap', 'nowrap').injectInside(spanContainer);
 
-    this._myOverlay.injectInside(this._container);
+        this._addListeners();
 
-    var elem = this;
+    },
-    this.applyChanges=true;
+    _createUI:function(){
-    this.inputText.onkeyup = function (evt) {
+        this._size = {width:500, height:100};
-        var event = new Event(evt);
+        this._myOverlay = new Element('div').setStyles({position:"absolute", display: "none", zIndex: "8", top: 0, left:0, width:"500px", height:"100px"});
-        var key = event.key;
+        var inputContainer = new Element('div').setStyles({border:"none", overflow:"auto"}).injectInside(this._myOverlay);
-        switch(key)
+        this.inputText = new Element('input').setProperties({type:"text", tabindex:'-1', id:"inputText", value:""}).setStyles({border:"none", background:"transparent"}).injectInside(inputContainer);
-        {
+        var spanContainer = new Element('div').setStyle('visibility', "hidden").injectInside(this._myOverlay);
-            case 'esc':
+        this._spanText = new Element('span').setProperties({id: "spanText", tabindex:"-1"}).setStyle('white-space', "nowrap").setStyle('nowrap', 'nowrap').injectInside(spanContainer);
-                elem.applyChanges=false;
+        this._myOverlay.injectInside(this._container);
-            case 'enter':        
+    },
-                var executor = function(editor)
+    _addListeners:function(){
-                {
+        var elem = this;
-                    return function()
+        this.applyChanges=true;
-                    {
+        this.inputText.onkeyup = function (evt) {
-                        elem.lostFocus(true);
+            var event = new Event(evt);
-                        $(document.documentElement).fireEvent('focus');
+            var key = event.key;
-                    };
+            switch(key)
-                };
-                setTimeout(executor(this), 3);
-
-                break;
-            default:
-                var span =$('spanText');
-                var input = $('inputText');
-                span.innerHTML = input.value;
-                var size = input.value.length + 1;
-                input.size= size;
-                if (span.offsetWidth > (parseInt(elem._myOverlay.style.width) - 100))
-                {
-                    elem._myOverlay.style.width = (span.offsetWidth + 100) + "px";
-                }
-                break;
-        }
-    };
-    //Register onLostFocus/onBlur event
-    $(this.inputText).addEvent('blur', this.lostFocusEvent.bind(this));
-    $(this._myOverlay).addEvent('click', this.clickEvent.bindWithEvent(this));
-    $(this._myOverlay).addEvent('dblclick', this.clickEvent.bindWithEvent(this));
-    $(this._myOverlay).addEvent('mousedown', this.mouseDownEvent.bindWithEvent(this));
-
-    var elem = this;
-    var onComplete = function() {
-        this._myOverlay.setStyle('display', "none");
-        this.inputText.setStyle('opacity', 1);
-
-        this.setPosition(0, 0);
-        if (elem._currentNode != null)
-        {
-            this._currentNode.getTextShape().setVisibility(true);
-            if(this.applyChanges)
             {
-                this._updateNode();
+                case 'esc':
+                    elem.applyChanges=false;
+                case 'enter':
+                    var executor = function(editor)
+                    {
+                        return function()
+                        {
+                            elem.lostFocus(true);
+                            $(document.documentElement).fireEvent('focus');
+                        };
+                    };
+                    setTimeout(executor(this), 3);
+
+                    break;
+                default:
+                    var span =$('spanText');
+                    var input = $('inputText');
+                    span.innerHTML = input.value;
+                    var size = input.value.length + 1;
+                    input.size= size;
+                    if (span.offsetWidth > (parseInt(elem._myOverlay.style.width) - 100))
+                    {
+                        elem._myOverlay.style.width = (span.offsetWidth + 100) + "px";
+                    }
+                    break;
+            }
+        };
+        //Register onLostFocus/onBlur event
+        $(this.inputText).addEvent('blur', this.lostFocusEvent.bind(this));
+        $(this._myOverlay).addEvent('click', this.clickEvent.bindWithEvent(this));
+        $(this._myOverlay).addEvent('dblclick', this.clickEvent.bindWithEvent(this));
+        $(this._myOverlay).addEvent('mousedown', this.mouseDownEvent.bindWithEvent(this));
+
+        var elem = this;
+        var onComplete = function() {
+            this._myOverlay.setStyle('display', "none");
+            this._isVisible=false;
+            this.inputText.setStyle('opacity', 1);
+
+            this.setPosition(0, 0);
+            if (elem._currentNode != null)
+            {
+                this._currentNode.getTextShape().setVisibility(true);
+                if(this.applyChanges)
+                {
+                    this._updateNode();
+                }
+                this.applyChanges=true;
+                this._currentNode = null;
             }
-            this.applyChanges=true;
-            this._currentNode = null;
-        }
 
             setTimeout("$('ffoxWorkarroundInput').focus();", 0);
-    };
-    this.fx = new Fx.Style(this.inputText, 'opacity', { duration: 10});
-    this.fx.addEvent('onComplete', onComplete.bind(this));
-
-};
-
-mindplot.TextEditor.prototype.lostFocusEvent = function ()
-{
-    this.fx.options.duration = 10;
-    this.fx.start(1, 0);
-    //myAnim.animate();
-};
-
-mindplot.TextEditor.prototype._isVisible = function ()
-{
-    //console.log('focus event');
-    //if(this._myOverlay.cfg.getProperty("visible") == true)
-    if ($(this._myOverlay).getStyle('display') == "block")
-    {
-        return true;
-    }
-    else
-    {
-        return false;
-    }
-};
-mindplot.TextEditor.prototype.getFocusEvent = function (node)
-{
-    //console.log('focus event');
-    if (this._isVisible())
-    {
-        //        var elem = this;
-        //        var executor = function(editor)
-        //        {
-        //            return function()
-        //            {
-        //                elem.getFocusEvent.attempt(node, elem);
-        //            };
-        //        };
-        //
-        //        setTimeout(executor(this), 10);
-        this.getFocusEvent.delay(10, this);
-    }
-    else
-    {
-        //console.log('calling init');
-        this.init(node);
-    }
-    //console.log('focus event done');
-};
-
-mindplot.TextEditor.prototype.setInitialText = function (text)
-{
-    this.initialText=text;
-};
-
-mindplot.TextEditor.prototype._updateNode = function ()
-{
-
-    if (core.Utils.isDefined(this._currentNode) && this._currentNode.getText() != this.getText())
-    {
-        var text = this.getText();
-        var topicId = this._currentNode.getId();
-
-        var commandFunc = function(topic,value)
-        {
-            var result = topic.getText();
-            topic.setText(value);
-            return result;
         };
-        var command = new mindplot.commands.GenericFunctionCommand(commandFunc,text,[topicId]);
+        this.fx = new Fx.Style(this.inputText, 'opacity', { duration: 10});
-        this._actionRunner.execute(command);
+        this.fx.addEvent('onComplete', onComplete.bind(this));
-    }
+    },
-};
+    lostFocusEvent : function ()
-
+    {
-mindplot.TextEditor.prototype.listenEventOnNode = function(topic, eventName, stopPropagation)
+        this.fx.options.duration = 10;
-{
+        this.fx.start(1, 0);
-    var elem = this;
+        //myAnim.animate();
-    topic.addEventListener(eventName, function (event) {
+    },
-        elem.lostFocus();
+    isVisible : function ()
-        elem.getFocusEvent.attempt(topic, elem);
+    {
-
+        return this._isVisible;
-        if (stopPropagation)
+    },
+    getFocusEvent: function (node)
+    {
+        //console.log('focus event');
+        if (this.isVisible())
         {
+            this.getFocusEvent.delay(10, this);
+        }
+        else
+        {
+            //console.log('calling init');
+            this.init(node);
+        }
+        //console.log('focus event done');
+    },
+    setInitialText : function (text)
+    {
+        this.initialText=text;
+    },
+    _updateNode : function ()
+    {
+
+        if (core.Utils.isDefined(this._currentNode) && this._currentNode.getText() != this.getText())
+        {
+            var text = this.getText();
+            var topicId = this._currentNode.getId();
+
+            var commandFunc = function(topic,value)
+            {
+                var result = topic.getText();
+                topic.setText(value);
+                return result;
+            };
+            var command = new mindplot.commands.GenericFunctionCommand(commandFunc,text,[topicId]);
+            this._actionRunner.execute(command);
+        }
+    },
+    listenEventOnNode : function(topic, eventName, stopPropagation)
+    {
+        var elem = this;
+        topic.addEventListener(eventName, function (event) {
+            if(elem._designer.getWorkSpace().isWorkspaceEventsEnabled()){
+                mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.NodeMouseOutEvent,[topic ]);
+                elem.lostFocus();
+                elem.getFocusEvent.attempt(topic, elem);
+
+                if (stopPropagation)
+                {
+                    if (core.Utils.isDefined(event.stopPropagation))
+                    {
+                        event.stopPropagation(true);
+                    } else
+                    {
+                        event.cancelBubble = true;
+                    }
+                }
+            }
+        });
+    },
+    init : function (nodeGraph)
+    {
+        //console.log('init method');
+        nodeGraph.getTextShape().setVisibility(false);
+        this._currentNode = nodeGraph;
+
+        //set Editor Style
+        var nodeText = nodeGraph.getTextShape();
+        var text;
+        var selectText=true;
+        if(this.initialText && this.initialText!="")
+        {
+            text = this.initialText;
+            this.initialText=null;
+            selectText=false;
+        }
+        else
+            text = nodeText.getText();
+
+        var font = nodeText.getFont();
+        font.size = nodeText.getHtmlFontSize();
+        font.color = nodeText.getColor();
+
+        this.setStyle(font);
+
+        //set editor's initial text
+        this.setText(text);
+
+        //set editor's initial size
+        var editor = this;
+        var executor = function(editor)
+        {
+            return function()
+            {
+                //console.log('setting editor in init thread');
+                var scale = web2d.peer.utils.TransformUtil.workoutScale(editor._currentNode.getTextShape()._peer);
+                var elemSize = editor._currentNode.getSize();
+                //var textSize = editor.getSize();
+                var pos = editor._screenManager.getWorkspaceElementPosition(editor._currentNode);
+
+                var textWidth = editor._currentNode.getTextShape().getWidth();
+                var textHeight = editor._currentNode.getTextShape().getHeight();
+                var iconGroup = editor._currentNode.getIconGroup();
+                var iconGroupSize;
+                if($chk(iconGroup))
+                {
+                    iconGroupSize = editor._currentNode.getIconGroup().getSize();
+                }
+                else
+                {
+                    iconGroupSize = {width:0, height:0};
+                }
+                var position = {x:0,y:0};
+                position.x = pos.x - ((textWidth * scale.width) / 2) + (((iconGroupSize.width) * scale.width)/2);
+                var fixError =1;
+                position.y = pos.y - ((textHeight * scale.height) / 2) - fixError;
+
+                editor.setEditorSize(elemSize.width, elemSize.height, scale);
+                //console.log('setting position:'+pos.x+';'+pos.y);
+                editor.setPosition(position.x, position.y, scale);
+                editor.showTextEditor(selectText);
+                //console.log('setting editor done');
+            };
+        };
+
+        setTimeout(executor(this), 10);
+        //console.log('init done');
+    },
+    setStyle : function (fontStyle)
+    {
+        var inputField = $("inputText");
+        var spanField = $("spanText");
+        if (!core.Utils.isDefined(fontStyle.font))
+        {
+            fontStyle.font = "Arial";
+        }
+        if (!core.Utils.isDefined(fontStyle.style))
+        {
+            fontStyle.style = "normal";
+        }
+        if (!core.Utils.isDefined(fontStyle.weight))
+        {
+            fontStyle.weight = "normal";
+        }
+        if (!core.Utils.isDefined(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 = $("inputText");
+        inputField.size = text.length + 1;
+        //this._myOverlay.cfg.setProperty("width", (inputField.size * parseInt(inputField.style.fontSize) + 100) + "px");
+        this._myOverlay.style.width = (inputField.size * parseInt(inputField.style.fontSize) + 100) + "px";
+        var spanField = $("spanText");
+        spanField.innerHTML = text;
+        inputField.value = text;
+    },
+    getText : function()
+    {
+        return $('inputText').value;
+    },
+    setEditorSize : function (width, height, scale)
+    {
+        //var scale = web2d.peer.utils.TransformUtil.workoutScale(this._currentNode.getTextShape()._peer);
+        this._size = {width:width * scale.width, height:height * scale.height};
+        //this._myOverlay.cfg.setProperty("width",this._size.width*2+"px");
+        this._myOverlay.style.width = this._size.width * 2 + "px";
+        //this._myOverlay.cfg.setProperty("height",this._size.height+"px");
+        this._myOverlay.style.height = this._size.height + "px";
+    },
+    getSize : function ()
+    {
+        return {width:$("spanText").offsetWidth,height:$("spanText").offsetHeight};
+    },
+    setPosition : function (x, y, scale)
+    {
+        $(this._myOverlay).setStyles({top : y + "px", left: x + "px"});
+        //this._myOverlay.style.left = x + "px";
+    },
+    showTextEditor : function(selectText)
+    {
+        //this._myOverlay.show();
+        //var myAnim = new YAHOO.util.Anim('inputText',{opacity: {to:1}}, 0.10, YAHOO.util.Easing.easeOut);
+        //$('inputText').style.opacity='1';
+        var elem = this;
+        //myAnim.onComplete.subscribe(function(){
+        //elem._myOverlay.show();
+        elem._myOverlay.setStyle('display', "block");
+        this._isVisible=true;
+        //elem.cfg.setProperty("visible", false);
+        //elem._myOverlay.cfg.setProperty("xy", [0, 0]);
+        //elem._myOverlay.cfg.setProperty("visible", true);
+        //select the text in the input
+        $('inputText').disabled = false;
+
+        if ($('inputText').createTextRange) //ie
+        {
+            var range = $('inputText').createTextRange();
+            var pos = $('inputText').value.length;
+            if(selectText)
+            {
+                range.select();
+                range.move("character", pos);
+            }
+            else
+            {
+                range.move("character", pos);
+                range.select();
+            }
+        }
+        else if(selectText)
+        {
+            $('inputText').setSelectionRange(0, $('inputText').value.length);
+        }
+
+        var executor = function(editor)
+        {
+            return function()
+            {
+                try {
+                    $('inputText').focus();
+                }
+                catch (e)
+                {
+
+                }
+            };
+        };
+        setTimeout(executor(this), 0);
+        //});
+        //myAnim.animate();
+
+    },
+    lostFocus : function(bothBrowsers)
+    {
+        if (this.isVisible())
+        {
+            //the editor is opened in another node. lets Finish it.
+            var fireOnThis = $('inputText');
+            fireOnThis.fireEvent('blur');
+        }
+    },
+    clickEvent : function(event){
+        if(this.isVisible()){
+            if (core.Utils.isDefined(event.stopPropagation))
+            {
+                event.stopPropagation(true);
+            } else
+            {
+                event.cancelBubble = true;
+            }
+            event.preventDefault();
+        }
+
+    },
+    mouseDownEvent : function(event){
+        if(this.isVisible()){
             if (core.Utils.isDefined(event.stopPropagation))
             {
                 event.stopPropagation(true);
@@ -182,234 +388,7 @@ mindplot.TextEditor.prototype.listenEventOnNode = function(topic, eventName, sto
                 event.cancelBubble = true;
             }
         }
-    });
-};
-
-mindplot.TextEditor.prototype.init = function (nodeGraph)
-{
-    //console.log('init method');
-    nodeGraph.getTextShape().setVisibility(false);
-    this._currentNode = nodeGraph;
-
-    //set Editor Style
-    var nodeText = nodeGraph.getTextShape();
-    var text;
-    var selectText=true;
-    if(this.initialText && this.initialText!="")
-    {
-        text = this.initialText;
-        this.initialText=null;
-        selectText=false;
-    }
-    else
-        text = nodeText.getText();
-    
-    var font = nodeText.getFont();
-    font.size = nodeText.getHtmlFontSize();
-    font.color = nodeText.getColor();
-
-    this.setStyle(font);
-
-    //set editor's initial text
-    this.setText(text);
-
-    //set editor's initial size
-    var editor = this;
-    var executor = function(editor)
-    {
-        return function()
-        {
-            //console.log('setting editor in init thread');
-            var scale = web2d.peer.utils.TransformUtil.workoutScale(editor._currentNode.getTextShape()._peer);
-            var elemSize = editor._currentNode.getSize();
-            //var textSize = editor.getSize();
-            var pos = editor._screenManager.getWorkspaceElementPosition(editor._currentNode);
-
-            var textWidth = editor._currentNode.getTextShape().getWidth();
-            var textHeight = editor._currentNode.getTextShape().getHeight();
-            var iconGroup = editor._currentNode.getIconGroup();
-            var iconGroupSize;
-            if($chk(iconGroup))
-            {
-                iconGroupSize = editor._currentNode.getIconGroup().getSize();
-            }
-            else
-            {
-                iconGroupSize = {width:0, height:0};
-            }
-            var position = {x:0,y:0};
-            position.x = pos.x - ((textWidth * scale.width) / 2) + (((iconGroupSize.width) * scale.width)/2);
-            var fixError =1;
-            position.y = pos.y - ((textHeight * scale.height) / 2) - fixError;
-
-            editor.setEditorSize(elemSize.width, elemSize.height, scale);
-            //console.log('setting position:'+pos.x+';'+pos.y);
-            editor.setPosition(position.x, position.y, scale);
-            editor.showTextEditor(selectText);
-            //console.log('setting editor done');
-        };
-    };
-
-    setTimeout(executor(this), 10);
-    //console.log('init done');
-};
-
-mindplot.TextEditor.prototype.setStyle = function (fontStyle)
-{
-    var inputField = $("inputText");
-    var spanField = $("spanText");
-    if (!core.Utils.isDefined(fontStyle.font))
-    {
-        fontStyle.font = "Arial";
-    }
-    if (!core.Utils.isDefined(fontStyle.style))
-    {
-        fontStyle.style = "normal";
-    }
-    if (!core.Utils.isDefined(fontStyle.weight))
-    {
-        fontStyle.weight = "normal";
-    }
-    if (!core.Utils.isDefined(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";
-};
-
-mindplot.TextEditor.prototype.setText = function(text)
-{
-    var inputField = $("inputText");
-    inputField.size = text.length + 1;
-    //this._myOverlay.cfg.setProperty("width", (inputField.size * parseInt(inputField.style.fontSize) + 100) + "px");
-    this._myOverlay.style.width = (inputField.size * parseInt(inputField.style.fontSize) + 100) + "px";
-    var spanField = $("spanText");
-    spanField.innerHTML = text;
-    inputField.value = text;
-};
-
-mindplot.TextEditor.prototype.getText = function()
-{
-    return $('inputText').value;
-};
-
-
-mindplot.TextEditor.prototype.setEditorSize = function (width, height, scale)
-{
-    //var scale = web2d.peer.utils.TransformUtil.workoutScale(this._currentNode.getTextShape()._peer);
-    this._size = {width:width * scale.width, height:height * scale.height};
-    //this._myOverlay.cfg.setProperty("width",this._size.width*2+"px");
-    this._myOverlay.style.width = this._size.width * 2 + "px";
-    //this._myOverlay.cfg.setProperty("height",this._size.height+"px");
-    this._myOverlay.style.height = this._size.height + "px";
-};
-
-mindplot.TextEditor.prototype.getSize = function ()
-{
-    return {width:$("spanText").offsetWidth,height:$("spanText").offsetHeight};
-};
-
-
-mindplot.TextEditor.prototype.setPosition = function (x, y, scale)
-{
-    $(this._myOverlay).setStyles({top : y + "px", left: x + "px"});
-    //this._myOverlay.style.left = x + "px";
-};
-
-mindplot.TextEditor.prototype.showTextEditor = function(selectText)
-{
-    //this._myOverlay.show();
-    //var myAnim = new YAHOO.util.Anim('inputText',{opacity: {to:1}}, 0.10, YAHOO.util.Easing.easeOut);
-    //$('inputText').style.opacity='1';
-    var elem = this;
-    //myAnim.onComplete.subscribe(function(){
-    //elem._myOverlay.show();
-    elem._myOverlay.setStyle('display', "block");
-    //elem.cfg.setProperty("visible", false);
-    //elem._myOverlay.cfg.setProperty("xy", [0, 0]);
-    //elem._myOverlay.cfg.setProperty("visible", true);
-    //select the text in the input
-    $('inputText').disabled = false;
-
-    if ($('inputText').createTextRange) //ie
-    {
-        var range = $('inputText').createTextRange();
-        var pos = $('inputText').value.length;
-        if(selectText)
-        {
-            range.select();
-            range.move("character", pos);
-        }
-        else
-        {
-            range.move("character", pos);
-            range.select();
-        }
-    }
-    else if(selectText)
-    {
-        $('inputText').setSelectionRange(0, $('inputText').value.length);
     }
 
-    var executor = function(editor)
+});
-    {
-        return function()
-        {
-            try {
-                $('inputText').focus();
-            }
-            catch (e)
-            {
-
-            }
-        };
-    };
-    setTimeout(executor(this), 0);
-    //});
-    //myAnim.animate();
-
-};
-
-mindplot.TextEditor.prototype.lostFocus = function(bothBrowsers)
-{
-    if (this._isVisible())
-    {
-        //the editor is opened in another node. lets Finish it.
-        var fireOnThis = $('inputText');
-        fireOnThis.fireEvent('blur');
-    }
-};
-
-mindplot.TextEditor.prototype.clickEvent = function(event){
-    if(this._isVisible()){
-        if (core.Utils.isDefined(event.stopPropagation))
-        {
-            event.stopPropagation(true);
-        } else
-        {
-            event.cancelBubble = true;
-        }
-        event.preventDefault();
-    }
-};
-
-mindplot.TextEditor.prototype.mouseDownEvent = function(event){
-    if(this._isVisible()){
-        if (core.Utils.isDefined(event.stopPropagation))
-        {
-            event.stopPropagation(true);
-        } else
-        {
-            event.cancelBubble = true;
-        }
-    }
-};
 

mindplot/src/main/javascript/TextEditorFactory.js

@@ -0,0 +1,28 @@
+/*
+*    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.TextEditorFactory={};
+
+mindplot.TextEditorFactory.getTextEditorFromName = function(name){
+    var editorClass = null;
+    if(name == "RichTextEditor"){
+        editorClass = mindplot.RichTextEditor;
+    }else {
+        editorClass = mindplot.TextEditor;
+    }
+    return editorClass;
+};

wise-webapp/pom.xml

@@ -443,6 +443,7 @@
                                         <include>help.js</include>
                                         <include>helpPanel.js</include>
                                         <include>IconPanel.js</include>
+                                        <!--<include>nicEdit.js</include>-->
                                     </includes>
                                 </aggregation>
                             </aggregations>

wise-webapp/src/main/webapp/css/editor.css

@@ -736,3 +736,7 @@ div#toolbar .topicRelation:hover {
 div#toolbar .relationshiplabel{
     width:56px;
 }
+
+.nicEdit-main {
+    outline:none;
+}

wise-webapp/src/main/webapp/jsp/mindmapEditor.jsp

@@ -26,6 +26,7 @@
 
     <script type='text/javascript' src='../js/wiseLibrary.js'></script>
     <script type='text/javascript' src='../js/wiseEditorLibrary.js'></script>
+    <script type='text/javascript' src='../js/nicEdit.js'></script>
     <script type='text/javascript' src='../js/core.js'></script>
 
     <link rel="icon" href="../images/favicon.ico" type="image/x-icon">