diff --git a/mindplot/pom.xml b/mindplot/pom.xml index f8fa19a3..de203cf9 100644 --- a/mindplot/pom.xml +++ b/mindplot/pom.xml @@ -74,6 +74,8 @@ + + @@ -207,6 +209,8 @@ DragTopicPositioner-min.js Board-min.js TextEditor-min.js + RichTextEditor-min.js + TextEditorFactory-min.js VariableDistanceBoard-min.js util/Shape-min.js FixedDistanceBoard-min.js diff --git a/mindplot/src/main/javascript/EditorOptions.js b/mindplot/src/main/javascript/EditorOptions.js index ed615fe1..5858b0be 100644 --- a/mindplot/src/main/javascript/EditorOptions.js +++ b/mindplot/src/main/javascript/EditorOptions.js @@ -1,5 +1,8 @@ mindplot.EditorOptions = { // LayoutManager:"OriginalLayout" - LayoutManager:"FreeMindLayout" + LayoutManager:"FreeMindLayout", +// textEditor:"TextEditor" + textEditor:"RichTextEditor" + }; \ No newline at end of file diff --git a/mindplot/src/main/javascript/MindmapDesigner.js b/mindplot/src/main/javascript/MindmapDesigner.js index be9b0675..bf2907ec 100644 --- a/mindplot/src/main/javascript/MindmapDesigner.js +++ b/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(); - mindmapDesigner.getEditor().lostFocus(); - // @todo: Puaj hack... - mindmapDesigner._cleanScreen(); + if(workspace.isWorkspaceEventsEnabled()){ + var t = mindmapDesigner.getEditor().isVisible(); + mindmapDesigner.getEditor().lostFocus(); + // @todo: Puaj hack... + mindmapDesigner._cleanScreen(); + } }); screenManager.addEventListener('dblclick', function(event) { - mindmapDesigner.getEditor().lostFocus(); - // Get mouse position - var pos = screenManager.getWorkspaceMousePosition(event); + if(workspace.isWorkspaceEventsEnabled()){ + mindmapDesigner.getEditor().lostFocus(); + // Get mouse position + var pos = screenManager.getWorkspaceMousePosition(event); - // Create a new topic model ... - var mindmap = mindmapDesigner.getMindmap(); - var model = mindmap.createNode(mindplot.NodeModel.MAIN_TOPIC_TYPE); - model.setPosition(pos.x, pos.y); + // Create a new topic model ... + var mindmap = mindmapDesigner.getMindmap(); + var model = mindmap.createNode(mindplot.NodeModel.MAIN_TOPIC_TYPE); + model.setPosition(pos.x, pos.y); - // Get central topic ... - var centralTopic = mindmapDesigner.getCentralTopic(); - var centralTopicId = centralTopic.getId(); + // Get central topic ... + var centralTopic = mindmapDesigner.getCentralTopic(); + var centralTopicId = centralTopic.getId(); - // Execute action ... - var command = new mindplot.commands.AddTopicCommand(model, centralTopicId, true); - this._actionRunner.execute(command); + // 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) diff --git a/mindplot/src/main/javascript/RichTextEditor.js b/mindplot/src/main/javascript/RichTextEditor.js new file mode 100644 index 00000000..c31fd759 --- /dev/null +++ b/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); + } +}); diff --git a/mindplot/src/main/javascript/TextEditor.js b/mindplot/src/main/javascript/TextEditor.js index b03ea65a..e00e3397 100644 --- a/mindplot/src/main/javascript/TextEditor.js +++ b/mindplot/src/main/javascript/TextEditor.js @@ -1,179 +1,385 @@ /* -* 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. -*/ + * 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.TextEditor = function(screenManager,actionRunner) -{ - this._screenManager = screenManager; - this._container = screenManager.getContainer(); - this._actionRunner = actionRunner; +mindplot.TextEditor = new Class({ + initialize:function(designer,actionRunner) + { + this._designer = designer; + this._screenManager = designer.getWorkSpace().getScreenManager(); + this._container = this._screenManager.getContainer(); + this._actionRunner = actionRunner; + this._isVisible=false; - //Create editor ui - 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); + //Create editor ui + this._createUI(); - this._myOverlay.injectInside(this._container); + this._addListeners(); - var elem = this; - this.applyChanges=true; - this.inputText.onkeyup = function (evt) { - var event = new Event(evt); - var key = event.key; - switch(key) - { - 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.inputText.setStyle('opacity', 1); - - this.setPosition(0, 0); - if (elem._currentNode != null) - { - this._currentNode.getTextShape().setVisibility(true); - if(this.applyChanges) + }, + _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) { + var event = new Event(evt); + var key = event.key; + switch(key) { - 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._actionRunner.execute(command); - } -}; - -mindplot.TextEditor.prototype.listenEventOnNode = function(topic, eventName, stopPropagation) -{ - var elem = this; - topic.addEventListener(eventName, function (event) { - elem.lostFocus(); - elem.getFocusEvent.attempt(topic, elem); - - if (stopPropagation) + this.fx = new Fx.Style(this.inputText, 'opacity', { duration: 10}); + this.fx.addEvent('onComplete', onComplete.bind(this)); + }, + lostFocusEvent : function () + { + this.fx.options.duration = 10; + this.fx.start(1, 0); + //myAnim.animate(); + }, + isVisible : function () + { + return this._isVisible; + }, + 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; - } - } -}; +}); diff --git a/mindplot/src/main/javascript/TextEditorFactory.js b/mindplot/src/main/javascript/TextEditorFactory.js new file mode 100644 index 00000000..0e7537b8 --- /dev/null +++ b/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; +}; \ No newline at end of file diff --git a/wise-webapp/pom.xml b/wise-webapp/pom.xml index 50916531..74400d28 100644 --- a/wise-webapp/pom.xml +++ b/wise-webapp/pom.xml @@ -443,6 +443,7 @@ help.js helpPanel.js IconPanel.js + diff --git a/wise-webapp/src/main/webapp/css/editor.css b/wise-webapp/src/main/webapp/css/editor.css index 84a8555f..d0d55023 100644 --- a/wise-webapp/src/main/webapp/css/editor.css +++ b/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; +} \ No newline at end of file diff --git a/wise-webapp/src/main/webapp/images/move.png b/wise-webapp/src/main/webapp/images/move.png new file mode 100644 index 00000000..6e13dd3d Binary files /dev/null and b/wise-webapp/src/main/webapp/images/move.png differ diff --git a/wise-webapp/src/main/webapp/images/nicEditorIcons.gif b/wise-webapp/src/main/webapp/images/nicEditorIcons.gif new file mode 100644 index 00000000..be044c69 Binary files /dev/null and b/wise-webapp/src/main/webapp/images/nicEditorIcons.gif differ diff --git a/wise-webapp/src/main/webapp/js/nicEdit.js b/wise-webapp/src/main/webapp/js/nicEdit.js new file mode 100644 index 00000000..fbe1b3b6 --- /dev/null +++ b/wise-webapp/src/main/webapp/js/nicEdit.js @@ -0,0 +1,1416 @@ +/* NicEdit - Micro Inline WYSIWYG + * Copyright 2007-2008 Brian Kirchoff + * + * NicEdit is distributed under the terms of the MIT license + * For more information visit http://nicedit.com/ + * Do not remove this copyright message + */ +var bkExtend = function(){ + var args = arguments; + if (args.length == 1) args = [this, args[0]]; + for (var prop in args[1]) args[0][prop] = args[1][prop]; + return args[0]; +}; +function bkClass() { } +bkClass.prototype.construct = function() {}; +bkClass.extend = function(def) { + var classDef = function() { + if (arguments[0] !== bkClass) { return this.construct.apply(this, arguments); } + }; + var proto = new this(bkClass); + bkExtend(proto,def); + classDef.prototype = proto; + classDef.extend = this.extend; + return classDef; +}; + +var bkElement = bkClass.extend({ + construct : function(elm,d) { + if(typeof(elm) == "string") { + elm = (d || document).createElement(elm); + } + elm = $BK(elm); + return elm; + }, + + appendTo : function(elm) { + elm.appendChild(this); + return this; + }, + + appendBefore : function(elm) { + elm.parentNode.insertBefore(this,elm); + return this; + }, + + addEvent : function(type, fn) { + bkLib.addEvent(this,type,fn); + return this; + }, + + setContent : function(c) { + this.innerHTML = c; + return this; + }, + + pos : function() { + var curleft = curtop = 0; + var o = obj = this; + if (obj.offsetParent) { + do { + curleft += obj.offsetLeft; + curtop += obj.offsetTop; + } while (obj = obj.offsetParent); + } + var b = (!window.opera) ? parseInt(this.getStyle('border-width') || this.style.border) || 0 : 0; + return [curleft+b,curtop+b+this.offsetHeight]; + }, + + noSelect : function() { + bkLib.noSelect(this); + return this; + }, + + parentTag : function(t) { + var elm = this; + do { + if(elm && elm.nodeName && elm.nodeName.toUpperCase() == t) { + return elm; + } + elm = elm.parentNode; + } while(elm); + return false; + }, + + hasClass : function(cls) { + return this.className.match(new RegExp('(\\s|^)nicEdit-'+cls+'(\\s|$)')); + }, + + addClass : function(cls) { + if (!this.hasClass(cls)) { this.className += " nicEdit-"+cls }; + return this; + }, + + removeClass : function(cls) { + if (this.hasClass(cls)) { + this.className = this.className.replace(new RegExp('(\\s|^)nicEdit-'+cls+'(\\s|$)'),' '); + } + return this; + }, + + setStyle : function(st) { + var elmStyle = this.style; + for(var itm in st) { + switch(itm) { + case 'float': + elmStyle['cssFloat'] = elmStyle['styleFloat'] = st[itm]; + break; + case 'opacity': + elmStyle.opacity = st[itm]; + elmStyle.filter = "alpha(opacity=" + Math.round(st[itm]*100) + ")"; + break; + case 'className': + this.className = st[itm]; + break; + default: + //if(document.compatMode || itm != "cursor") { // Nasty Workaround for IE 5.5 + elmStyle[itm] = st[itm]; + //} + } + } + return this; + }, + + getStyle : function( cssRule, d ) { + var doc = (!d) ? document.defaultView : d; + if(this.nodeType == 1) + return (doc && doc.getComputedStyle) ? doc.getComputedStyle( this, null ).getPropertyValue(cssRule) : this.currentStyle[ bkLib.camelize(cssRule) ]; + }, + + remove : function() { + this.parentNode.removeChild(this); + return this; + }, + + setAttributes : function(at) { + for(var itm in at) { + this[itm] = at[itm]; + } + return this; + } +}); + +var bkLib = { + isMSIE : (navigator.appVersion.indexOf("MSIE") != -1), + + addEvent : function(obj, type, fn) { + (obj.addEventListener) ? obj.addEventListener( type, fn, false ) : obj.attachEvent("on"+type, fn); + }, + + removeEvent : function(obj, type, fn) { + (obj.removeEventListener) ? obj.removeEventListener( type, fn, false ) : obj.detachEvent("on"+type, fn); + }, + + toArray : function(iterable) { + var length = iterable.length, results = new Array(length); + while (length--) { results[length] = iterable[length] }; + return results; + }, + + noSelect : function(element) { + if(element.setAttribute && element.nodeName.toLowerCase() != 'input' && element.nodeName.toLowerCase() != 'textarea') { + element.setAttribute('unselectable','on'); + } + for(var i=0;i.nicEdit-main p { margin: 0; }<\/scr"+"ipt>"); + $BK("__ie_onload").onreadystatechange = function() { + if (this.readyState == "complete"){bkLib.domLoaded();} + }; + } + window.onload = bkLib.domLoaded; + } +}; + +function $BK(elm) { + if(typeof(elm) == "string") { + elm = document.getElementById(elm); + } + return (elm && !elm.appendTo) ? bkExtend(elm,bkElement.prototype) : elm; +} + +var bkEvent = { + addEvent : function(evType, evFunc) { + if(evFunc) { + this.eventList = this.eventList || {}; + this.eventList[evType] = this.eventList[evType] || []; + this.eventList[evType].push(evFunc); + } + return this; + }, + fireEvent : function() { + var args = bkLib.toArray(arguments), evType = args.shift(); + if(this.eventList && this.eventList[evType]) { + for(var i=0;i'); + } + this.instanceDoc = document.defaultView; + this.elm.addEvent('mousedown',this.selected.closureListener(this)).addEvent('keypress',this.keyDown.closureListener(this)).addEvent('focus',this.selected.closure(this)).addEvent('blur',this.blur.closure(this)).addEvent('keyup',this.selected.closure(this)); + this.ne.fireEvent('add',this); + }, + + remove : function() { + this.saveContent(); + if(this.copyElm || this.options.hasPanel) { + this.editorContain.remove(); + this.e.setStyle({'display' : 'block'}); + this.ne.removePanel(); + } + this.disable(); + this.ne.fireEvent('remove',this); + }, + + disable : function() { + this.elm.setAttribute('contentEditable','false'); + }, + + getSel : function() { + return (window.getSelection) ? window.getSelection() : document.selection; + }, + + getRng : function() { + var s = this.getSel(); + if(!s) { return null; } + return (s.rangeCount > 0) ? s.getRangeAt(0) : s.createRange(); + }, + + selRng : function(rng,s) { + if(window.getSelection) { + s.removeAllRanges(); + s.addRange(rng); + } else { + rng.select(); + } + }, + + selElm : function() { + var r = this.getRng(); + if(r.startContainer) { + var contain = r.startContainer; + if(r.cloneContents().childNodes.length == 1) { + for(var i=0;i'+((css) ? '' : '')+''+this.initialContent+''); + fd.close(); + this.frameDoc = fd; + + this.frameWin = $BK(this.elmFrame.contentWindow); + this.frameContent = $BK(this.frameWin.document.body).setStyle(this.savedStyles); + this.instanceDoc = this.frameWin.document.defaultView; + + this.heightUpdate(); + this.frameDoc.addEvent('mousedown', this.selected.closureListener(this)).addEvent('keyup',this.heightUpdate.closureListener(this)).addEvent('keydown',this.keyDown.closureListener(this)).addEvent('keyup',this.selected.closure(this)); + this.ne.fireEvent('add',this); + }, + + getElm : function() { + return this.frameContent; + }, + + setContent : function(c) { + this.content = c; + this.ne.fireEvent('set',this); + this.frameContent.innerHTML = this.content; + this.heightUpdate(); + }, + + getSel : function() { + return (this.frameWin) ? this.frameWin.getSelection() : this.frameDoc.selection; + }, + + heightUpdate : function() { + this.elmFrame.style.height = Math.max(this.frameContent.offsetHeight,this.initialHeight)+'px'; + }, + + nicCommand : function(cmd,args) { + this.frameDoc.execCommand(cmd,false,args); + setTimeout(this.heightUpdate.closure(this),100); + } + + +}); +var nicEditorPanel = bkClass.extend({ + construct : function(e,options,nicEditor) { + this.elm = e; + this.options = options; + this.ne = nicEditor; + this.panelButtons = new Array(); + this.buttonList = bkExtend([],this.ne.options.buttonList); + + this.panelContain = new bkElement('DIV').setStyle({overflow : 'hidden', width : '100%', border : '1px solid #cccccc', backgroundColor : '#efefef'}).addClass('panelContain'); + this.panelElm = new bkElement('DIV').setStyle({margin : '2px', marginTop : '0px', zoom : 1, overflow : 'hidden'}).addClass('panel').appendTo(this.panelContain); + this.panelContain.appendTo(e); + + var opt = this.ne.options; + var buttons = opt.buttons; + for(button in buttons) { + this.addButton(button,opt,true); + } + this.reorder(); + e.noSelect(); + }, + + addButton : function(buttonName,options,noOrder) { + var button = options.buttons[buttonName]; + var type = (button['type']) ? eval('(typeof('+button['type']+') == "undefined") ? null : '+button['type']+';') : nicEditorButton; + var hasButton = bkLib.inArray(this.buttonList,buttonName); + if(type && (hasButton || this.ne.options.fullPanel)) { + this.panelButtons.push(new type(this.panelElm,buttonName,options,this.ne)); + if(!hasButton) { + this.buttonList.push(buttonName); + } + } + }, + + findButton : function(itm) { + for(var i=0;i'+this.sel[itm]+''); + } + } +}); + +var nicEditorFontFamilySelect = nicEditorSelect.extend({ + sel : {'arial' : 'Arial','comic sans ms' : 'Comic Sans','courier new' : 'Courier New','georgia' : 'Georgia', 'helvetica' : 'Helvetica', 'impact' : 'Impact', 'times new roman' : 'Times', 'trebuchet ms' : 'Trebuchet', 'verdana' : 'Verdana'}, + + init : function() { + this.setDisplay('Font Family...'); + for(itm in this.sel) { + this.add(itm,''+this.sel[itm]+''); + } + } +}); + +var nicEditorFontFormatSelect = nicEditorSelect.extend({ + sel : {'p' : 'Paragraph', 'pre' : 'Pre', 'h6' : 'Heading 6', 'h5' : 'Heading 5', 'h4' : 'Heading 4', 'h3' : 'Heading 3', 'h2' : 'Heading 2', 'h1' : 'Heading 1'}, + + init : function() { + this.setDisplay('Font Format...'); + for(itm in this.sel) { + var tag = itm.toUpperCase(); + this.add('<'+tag+'>','<'+itm+' style="padding: 0px; margin: 0px;">'+this.sel[itm]+''); + } + } +}); + +nicEditors.registerPlugin(nicPlugin,nicSelectOptions); + + + +/* START CONFIG */ +var nicColorOptions = { + buttons : { + 'forecolor' : {name : __('Change Text Color'), type : 'nicEditorColorButton', noClose : true}, + 'bgcolor' : {name : __('Change Background Color'), type : 'nicEditorBgColorButton', noClose : true} + } +}; +/* END CONFIG */ + +var nicEditorColorButton = nicEditorAdvancedButton.extend({ + addPane : function() { + var colorList = {0 : '00',1 : '33',2 : '66',3 :'99',4 : 'CC',5 : 'FF'}; + var colorItems = new bkElement('DIV').setStyle({width: '270px'}); + + for(var r in colorList) { + for(var b in colorList) { + for(var g in colorList) { + var colorCode = '#'+colorList[r]+colorList[g]+colorList[b]; + + var colorSquare = new bkElement('DIV').setStyle({'cursor' : 'pointer', 'height' : '15px', 'float' : 'left'}).appendTo(colorItems); + var colorBorder = new bkElement('DIV').setStyle({border: '2px solid '+colorCode}).appendTo(colorSquare); + var colorInner = new bkElement('DIV').setStyle({backgroundColor : colorCode, overflow : 'hidden', width : '11px', height : '11px'}).addEvent('click',this.colorSelect.closure(this,colorCode)).addEvent('mouseover',this.on.closure(this,colorBorder)).addEvent('mouseout',this.off.closure(this,colorBorder,colorCode)).appendTo(colorBorder); + + if(!window.opera) { + colorSquare.onmousedown = colorInner.onmousedown = bkLib.cancelEvent; + } + + } + } + } + this.pane.append(colorItems.noSelect()); + }, + + colorSelect : function(c) { + this.ne.nicCommand('foreColor',c); + this.removePane(); + }, + + on : function(colorBorder) { + colorBorder.setStyle({border : '2px solid #000'}); + }, + + off : function(colorBorder,colorCode) { + colorBorder.setStyle({border : '2px solid '+colorCode}); + } +}); + +var nicEditorBgColorButton = nicEditorColorButton.extend({ + colorSelect : function(c) { + this.ne.nicCommand('hiliteColor',c); + this.removePane(); + } +}); + +nicEditors.registerPlugin(nicPlugin,nicColorOptions); + + +var nicXHTML = bkClass.extend({ + stripAttributes : ['_moz_dirty','_moz_resizing','_extended'], + noShort : ['style','title','script','textarea','a'], + cssReplace : {'font-weight:bold;' : 'strong', 'font-style:italic;' : 'em'}, + sizes : {1 : 'xx-small', 2 : 'x-small', 3 : 'small', 4 : 'medium', 5 : 'large', 6 : 'x-large'}, + + construct : function(nicEditor) { + this.ne = nicEditor; + if(this.ne.options.xhtml) { + nicEditor.addEvent('get',this.cleanup.closure(this)); + } + }, + + cleanup : function(ni) { + var node = ni.getElm(); + var xhtml = this.toXHTML(node); + ni.content = xhtml; + }, + + toXHTML : function(n,r,d) { + var txt = ''; + var attrTxt = ''; + var cssTxt = ''; + var nType = n.nodeType; + var nName = n.nodeName.toLowerCase(); + var nChild = n.hasChildNodes && n.hasChildNodes(); + var extraNodes = new Array(); + + switch(nType) { + case 1: + var nAttributes = n.attributes; + + switch(nName) { + case 'b': + nName = 'strong'; + break; + case 'i': + nName = 'em'; + break; + case 'font': + nName = 'span'; + break; + } + + if(r) { + for(var i=0;i'; + } + + if(attrTxt == "" && nName == "span") { + r = false; + } + if(r) { + txt += '<'+nName; + if(nName != 'br') { + txt += attrTxt; + } + } + } + + + + if(!nChild && !bkLib.inArray(this.noShort,attributeName)) { + if(r) { + txt += ' />'; + } + } else { + if(r) { + txt += '>'; + } + + for(var i=0;i'; + } + + for(var i=0;i'; + } + + break; + case 3: + //if(n.nodeValue != '\n') { + txt += n.nodeValue; + //} + break; + } + + return txt; + } +}); +nicEditors.registerPlugin(nicXHTML); + + + + +/* START CONFIG */ +var nicCodeOptions = { + buttons : { + 'xhtml' : {name : 'Edit HTML', type : 'nicCodeButton'} + } + +}; +/* END CONFIG */ + +var nicCodeButton = nicEditorAdvancedButton.extend({ + width : '350px', + + addPane : function() { + this.addForm({ + '' : {type : 'title', txt : 'Edit HTML'}, + 'code' : {type : 'content', 'value' : this.ne.selectedInstance.getContent(), style : {width: '340px', height : '200px'}} + }); + }, + + submit : function(e) { + var code = this.inputs['code'].value; + this.ne.selectedInstance.setContent(code); + this.removePane(); + } +}); + +nicEditors.registerPlugin(nicPlugin,nicCodeOptions); + + diff --git a/wise-webapp/src/main/webapp/jsp/mindmapEditor.jsp b/wise-webapp/src/main/webapp/jsp/mindmapEditor.jsp index 782c4744..208a16aa 100644 --- a/wise-webapp/src/main/webapp/jsp/mindmapEditor.jsp +++ b/wise-webapp/src/main/webapp/jsp/mindmapEditor.jsp @@ -26,6 +26,7 @@ +