vmario/wisemapping-open-source
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-open-source.git synced 2024-11-25 07:27:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

adding new editor

Browse Source
This commit is contained in:
Pablo Luna 2011-04-17 19:04:02 +01:00
parent 5d911efa70
commit c804b3715e
12 changed files with 2020 additions and 415 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
mindplot/pom.xml
View File

@ -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>

5
mindplot/src/main/javascript/EditorOptions.js
View File

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

17
mindplot/src/main/javascript/MindmapDesigner.js
View File

@ -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)

162
mindplot/src/main/javascript/RichTextEditor.js Normal file
View File

@ -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);
}
});

207
mindplot/src/main/javascript/TextEditor.js
View File

@ -1,37 +1,46 @@
/*
* 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();
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._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,15 +127,13 @@ 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,11 +169,11 @@ 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);
this._currentNode = nodeGraph;
@ -252,10 +239,9 @@ 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");
if (!core.Utils.isDefined(fontStyle.font))
@ -283,10 +269,9 @@ 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;
//this._myOverlay.cfg.setProperty("width", (inputField.size * parseInt(inputField.style.fontSize) + 100) + "px");
@ -294,38 +279,31 @@ 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};
//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 ()
{
},
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);
//$('inputText').style.opacity='1';
@ -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)
{
if (this._isVisible())
},
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()){
},
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;
}
}
};
}
});

28
mindplot/src/main/javascript/TextEditorFactory.js Normal file
View File

@ -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;
};

1
wise-webapp/pom.xml
View File

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

4
wise-webapp/src/main/webapp/css/editor.css
View File

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

BIN
wise-webapp/src/main/webapp/images/move.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 575 B

BIN
wise-webapp/src/main/webapp/images/nicEditorIcons.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

1416
wise-webapp/src/main/webapp/js/nicEdit.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
wise-webapp/src/main/webapp/jsp/mindmapEditor.jsp
View File

@ -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">