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,14 +92,17 @@ mindplot.MindmapDesigner.prototype._registerEvents = function()
         // Create nodes on double click...
         screenManager.addEventListener('click', function(event)
         {
-            var t = mindmapDesigner.getEditor()._isVisible();
+            if(workspace.isWorkspaceEventsEnabled()){
+                var t = mindmapDesigner.getEditor().isVisible();
                 mindmapDesigner.getEditor().lostFocus();
                 // @todo: Puaj hack...
                 mindmapDesigner._cleanScreen();
+            }
         });
 
         screenManager.addEventListener('dblclick', function(event)
         {
+            if(workspace.isWorkspaceEventsEnabled()){
                 mindmapDesigner.getEditor().lostFocus();
                 // Get mouse position
                 var pos = screenManager.getWorkspaceMousePosition(event);
@@ -115,6 +119,7 @@ mindplot.MindmapDesigner.prototype._registerEvents = function()
                 // Execute action ...
                 var command = new mindplot.commands.AddTopicCommand(model, centralTopicId, true);
                 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

@@ -16,22 +16,31 @@
  *   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._screenManager = designer.getWorkSpace().getScreenManager();
+        this._container = this._screenManager.getContainer();
         this._actionRunner = actionRunner;
+        this._isVisible=false;
 
         //Create editor ui
+        this._createUI();
+
+        this._addListeners();
+
+    },
+    _createUI:function(){
         this._size = {width:500, height:100};
         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);
-
+    },
+    _addListeners:function(){
         var elem = this;
         this.applyChanges=true;
         this.inputText.onkeyup = function (evt) {
@@ -75,6 +84,7 @@ mindplot.TextEditor = function(screenManager,actionRunner)
         var elem = this;
         var onComplete = function() {
             this._myOverlay.setStyle('display', "none");
+            this._isVisible=false;
             this.inputText.setStyle('opacity', 1);
 
             this.setPosition(0, 0);
@@ -93,44 +103,22 @@ mindplot.TextEditor = function(screenManager,actionRunner)
         };
         this.fx = new Fx.Style(this.inputText, 'opacity', { duration: 10});
         this.fx.addEvent('onComplete', onComplete.bind(this));
-
-};
-
-mindplot.TextEditor.prototype.lostFocusEvent = function ()
+    },
+    lostFocusEvent : function ()
     {
         this.fx.options.duration = 10;
         this.fx.start(1, 0);
         //myAnim.animate();
-};
-
-mindplot.TextEditor.prototype._isVisible = function ()
+    },
+    isVisible : function ()
+    {
+        return this._isVisible;
+    },
+    getFocusEvent: function (node)
     {
         //console.log('focus event');
-    //if(this._myOverlay.cfg.getProperty("visible") == true)
-    if ($(this._myOverlay).getStyle('display') == "block")
+        if (this.isVisible())
         {
-        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
@@ -139,14 +127,12 @@ mindplot.TextEditor.prototype.getFocusEvent = function (node)
             this.init(node);
         }
         //console.log('focus event done');
-};
-
-mindplot.TextEditor.prototype.setInitialText = function (text)
+    },
+    setInitialText : function (text)
     {
         this.initialText=text;
-};
-
-mindplot.TextEditor.prototype._updateNode = function ()
+    },
+    _updateNode : function ()
     {
 
         if (core.Utils.isDefined(this._currentNode) && this._currentNode.getText() != this.getText())
@@ -163,12 +149,13 @@ mindplot.TextEditor.prototype._updateNode = function ()
             var command = new mindplot.commands.GenericFunctionCommand(commandFunc,text,[topicId]);
             this._actionRunner.execute(command);
         }
-};
-
-mindplot.TextEditor.prototype.listenEventOnNode = function(topic, eventName, stopPropagation)
+    },
+    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);
 
@@ -182,10 +169,10 @@ mindplot.TextEditor.prototype.listenEventOnNode = function(topic, eventName, sto
                         event.cancelBubble = true;
                     }
                 }
+            }
         });
-};
-
-mindplot.TextEditor.prototype.init = function (nodeGraph)
+    },
+    init : function (nodeGraph)
     {
         //console.log('init method');
         nodeGraph.getTextShape().setVisibility(false);
@@ -252,9 +239,8 @@ mindplot.TextEditor.prototype.init = function (nodeGraph)
 
         setTimeout(executor(this), 10);
         //console.log('init done');
-};
-
-mindplot.TextEditor.prototype.setStyle = function (fontStyle)
+    },
+    setStyle : function (fontStyle)
     {
         var inputField = $("inputText");
         var spanField = $("spanText");
@@ -283,9 +269,8 @@ mindplot.TextEditor.prototype.setStyle = function (fontStyle)
         spanField.style.fontStyle = fontStyle.style;
         spanField.style.fontWeight = fontStyle.weight;
         spanField.style.fontSize = fontStyle.size + "px";
-};
-
-mindplot.TextEditor.prototype.setText = function(text)
+    },
+    setText : function(text)
     {
         var inputField = $("inputText");
         inputField.size = text.length + 1;
@@ -294,15 +279,12 @@ mindplot.TextEditor.prototype.setText = function(text)
         var spanField = $("spanText");
         spanField.innerHTML = text;
         inputField.value = text;
-};
-
-mindplot.TextEditor.prototype.getText = function()
+    },
+    getText : function()
     {
         return $('inputText').value;
-};
-
-
-mindplot.TextEditor.prototype.setEditorSize = function (width, height, scale)
+    },
+    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};
@@ -310,21 +292,17 @@ mindplot.TextEditor.prototype.setEditorSize = function (width, height, scale)
         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 ()
+    },
+    getSize : function ()
     {
         return {width:$("spanText").offsetWidth,height:$("spanText").offsetHeight};
-};
-
-
-mindplot.TextEditor.prototype.setPosition = function (x, y, scale)
+    },
+    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)
+    },
+    showTextEditor : function(selectText)
     {
         //this._myOverlay.show();
         //var myAnim = new YAHOO.util.Anim('inputText',{opacity: {to:1}}, 0.10, YAHOO.util.Easing.easeOut);
@@ -333,6 +311,7 @@ mindplot.TextEditor.prototype.showTextEditor = function(selectText)
         //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);
@@ -376,20 +355,18 @@ mindplot.TextEditor.prototype.showTextEditor = function(selectText)
         //});
         //myAnim.animate();
 
-};
-
-mindplot.TextEditor.prototype.lostFocus = function(bothBrowsers)
+    },
+    lostFocus : function(bothBrowsers)
     {
-    if (this._isVisible())
+        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()){
+    },
+    clickEvent : function(event){
+        if(this.isVisible()){
             if (core.Utils.isDefined(event.stopPropagation))
             {
                 event.stopPropagation(true);
@@ -399,10 +376,10 @@ mindplot.TextEditor.prototype.clickEvent = function(event){
             }
             event.preventDefault();
         }
-};
 
-mindplot.TextEditor.prototype.mouseDownEvent = function(event){
-    if(this._isVisible()){
+    },
+    mouseDownEvent : function(event){
+        if(this.isVisible()){
             if (core.Utils.isDefined(event.stopPropagation))
             {
                 event.stopPropagation(true);
@@ -411,5 +388,7 @@ mindplot.TextEditor.prototype.mouseDownEvent = function(event){
                 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">