diff --git a/mindplot/pom.xml b/mindplot/pom.xml
index e43cfb90..4248a45a 100644
--- a/mindplot/pom.xml
+++ b/mindplot/pom.xml
@@ -62,6 +62,7 @@
+
@@ -80,6 +81,7 @@
+
diff --git a/mindplot/src/main/javascript/CentralTopic.js b/mindplot/src/main/javascript/CentralTopic.js
index ff594145..0e3f1ea3 100644
--- a/mindplot/src/main/javascript/CentralTopic.js
+++ b/mindplot/src/main/javascript/CentralTopic.js
@@ -21,15 +21,12 @@ mindplot.CentralTopic = new Class({
Extends:mindplot.Topic,
initialize: function(model) {
this.parent(model);
- this.registerEvents();
},
- registerEvents : function() {
- // Prevent click on the topics being propagated ...
- this.addEventListener('click', function(event) {
- event.stopPropagation();
- });
+ _registerEvents : function() {
+ this.parent();
+ // This disable the drag of the central topic. But solves the problem of deselecting the nodes when the screen is clicked.
this.addEventListener('mousedown', function(event) {
event.stopPropagation();
});
diff --git a/mindplot/src/main/javascript/DesignerKeyboard.js b/mindplot/src/main/javascript/DesignerKeyboard.js
new file mode 100644
index 00000000..4319f5f8
--- /dev/null
+++ b/mindplot/src/main/javascript/DesignerKeyboard.js
@@ -0,0 +1,266 @@
+/*
+ * 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.DesignerKeyboard = new Class({
+ Extends:Keyboard,
+ initialize : function(designer) {
+ $assert(designer, "designer can not be null");
+ this.parent({defaultEventType: 'keydown'});
+ this._registerEvents(designer);
+ },
+
+ _registerEvents : function(designer) {
+ // Try with the keyboard ..
+ this.addEvents({
+ 'esc' : function(event) {
+ var nodes = this.getSelectedNodes();
+ for (var i = 0; i < nodes.length; i++) {
+ node = nodes[i];
+ node.setOnFocus(false);
+ }
+ event.stopPropagation();
+
+ }.bind(designer),
+
+ 'backspace':function(event) {
+ event.preventDefault();
+ event.stopPropagation();
+ }.bind(this),
+
+ 'space' : function() {
+ var nodes = this.getSelectedNodes();
+ if (nodes.length > 0) {
+ var topic = nodes[0];
+
+ var model = topic.getModel();
+ var isShrink = !model.areChildrenShrinked();
+ topic.setChildrenShrinked(isShrink);
+ }
+ }.bind(this),
+
+ 'f2' : function() {
+ // @todo:
+ console.log("f2 Must be implented");
+ }.bind(this),
+
+ 'delete' : function() {
+ designer.deleteCurrentNode();
+ }.bind(this),
+
+ 'enter' :
+ function() {
+ designer.createSiblingForSelectedNode();
+ }.bind(this),
+
+ 'insert' : function() {
+ designer.createChildForSelectedNode();
+ }.bind(this),
+
+ 'ctrl+z' : function() {
+ designer.undo();
+ }.bind(this),
+
+ 'meta+z' : function() {
+ designer.undo();
+ }.bind(this),
+
+ 'ctrl+z+shift' :function() {
+ designer.redo();
+ }.bind(this),
+
+ 'meta+z+shift' : function() {
+ designer.redo();
+ }.bind(this),
+
+ 'ctrl+a' : function(event) {
+ designer.selectAll();
+ event.preventDefault();
+
+ },
+
+ 'meta+a' : function(event) {
+ designer.selectAll();
+ event.preventDefault();
+ },
+
+ 'right' : function() {
+ var nodes = designer.getSelectedNodes();
+ if (nodes.length > 0) {
+ var node = nodes[0];
+ if (node.getTopicType() == mindplot.model.NodeModel.CENTRAL_TOPIC_TYPE) {
+ this._goToSideChild(designer, node, 'RIGHT');
+ }
+ else {
+ if (node.getPosition().x < 0) {
+ this._goToParent(designer, node);
+ }
+ else if (!node.areChildrenShrinked()) {
+ this._goToChild(designer, node);
+ }
+ }
+ } else {
+ var centralTopic = designer.getCentralTopic();
+ this._goToNode(designer, centralTopic);
+ }
+ }.bind(this),
+
+ 'left' : function() {
+ var nodes = designer.getSelectedNodes();
+ if (nodes.length > 0) {
+ var node = nodes[0];
+ if (node.getTopicType() == mindplot.model.NodeModel.CENTRAL_TOPIC_TYPE) {
+ this._goToSideChild(designer, node, 'LEFT');
+ }
+ else {
+ if (node.getPosition().x > 0) {
+ this._goToParent(designer, node);
+ }
+ else if (!node.areChildrenShrinked()) {
+ this._goToChild(designer, node);
+ }
+ }
+ } else {
+ var centralTopic = designer.getCentralTopic();
+ this._goToNode(designer, centralTopic);
+ }
+ }.bind(this),
+
+ 'up' : function() {
+ // @ToDo: Ups, accessing a private method ...
+ var nodes = designer.getSelectedNodes();
+ if (nodes.length > 0) {
+ var node = nodes[0];
+ if (node.getTopicType() != mindplot.model.NodeModel.CENTRAL_TOPIC_TYPE) {
+ this._goToBrother(designer, node, 'UP');
+ }
+ } else {
+ var centralTopic = designer.getCentralTopic();
+ this._goToNode(designer, centralTopic);
+ }
+ }.bind(this),
+
+ 'down' : function() {
+ var nodes = designer.getSelectedNodes();
+ if (nodes.length > 0) {
+ var node = nodes[0];
+ if (node.getTopicType() != mindplot.model.NodeModel.CENTRAL_TOPIC_TYPE) {
+ this._goToBrother(designer, node, 'DOWN');
+ }
+ } else {
+ var centralTopic = designer.getCentralTopic();
+ this._goToNode(designer, centralTopic);
+ }
+ }.bind(this)
+
+ });
+ },
+
+ _goToBrother : function(designer, node, direction) {
+ var brothers = node._parent._getChildren();
+ var target = node;
+ var y = node.getPosition().y;
+ var x = node.getPosition().x;
+ var dist = null;
+ for (var i = 0; i < brothers.length; i++) {
+ var sameSide = (x * brothers[i].getPosition().x) >= 0;
+ if (brothers[i] != node && sameSide) {
+ var brother = brothers[i];
+ var brotherY = brother.getPosition().y;
+ if (direction == "DOWN" && brotherY > y) {
+ var distancia = y - brotherY;
+ if (distancia < 0) {
+ distancia = distancia * (-1);
+ }
+ if (dist == null || dist > distancia) {
+ dist = distancia;
+ target = brothers[i];
+ }
+ }
+ else if (direction == "UP" && brotherY < y) {
+ var distance = y - brotherY;
+ if (distance < 0) {
+ distance = distance * (-1);
+ }
+ if (dist == null || dist > distance) {
+ dist = distance;
+ target = brothers[i];
+ }
+ }
+ }
+ }
+ this._goToNode(designer, target);
+ },
+
+
+ _goToSideChild : function(designer, node, side) {
+ var children = node._getChildren();
+ if (children.length > 0) {
+ var target = children[0];
+ var top = null;
+ for (var i = 0; i < children.length; i++) {
+ var child = children[i];
+ var childY = child.getPosition().y;
+ if (side == 'LEFT' && child.getPosition().x < 0) {
+ if (top == null || childY < top) {
+ target = child;
+ top = childY;
+ }
+ }
+ if (side == 'RIGHT' && child.getPosition().x > 0) {
+ if (top == null || childY < top) {
+ target = child;
+ top = childY;
+ }
+ }
+ }
+
+ this._goToNode(designer, target);
+ }
+ },
+
+ _goToParent : function(designer, node) {
+ var parent = node._parent;
+ this._goToNode(designer,parent);
+ },
+
+ _goToChild : function(designer, node) {
+ var children = node._getChildren();
+ if (children.length > 0) {
+ var target = children[0];
+ var top = target.getPosition().y;
+ for (var i = 0; i < children.length; i++) {
+ var child = children[i];
+ if (child.getPosition().y < top) {
+ top = child.getPosition().y;
+ target = child;
+ }
+ }
+ this._goToNode(designer,target);
+ }
+ },
+
+ _goToNode : function(designer, node) {
+ // First deselect all the nodes ...
+ designer.deselectAll();
+
+ // Give focus to the selected node....
+ node.setOnFocus(true);
+ }
+
+
+});
diff --git a/mindplot/src/main/javascript/ImageIcon.js b/mindplot/src/main/javascript/ImageIcon.js
index e5ceb605..34d733be 100644
--- a/mindplot/src/main/javascript/ImageIcon.js
+++ b/mindplot/src/main/javascript/ImageIcon.js
@@ -42,7 +42,7 @@ mindplot.ImageIcon = new Class({
removeImage.src = "../images/bin.png";
removeImage.inject(container);
- if (!$defined(designer._viewMode) || ($defined(designer._viewMode) && !designer._viewMode)) {
+ if (!$defined(designer._readOnly) || ($defined(designer._readOnly) && !designer._readOnly)) {
removeImage.addEvent('click', function() {
var actionDispatcher = mindplot.ActionDispatcher.getInstance();
diff --git a/mindplot/src/main/javascript/LinkIcon.js b/mindplot/src/main/javascript/LinkIcon.js
index 29b34173..c1eb6409 100644
--- a/mindplot/src/main/javascript/LinkIcon.js
+++ b/mindplot/src/main/javascript/LinkIcon.js
@@ -81,7 +81,7 @@ mindplot.LinkIcon = new Class({
attribution.inject(element);
element.inject(container);
- if (!$defined(designer._viewMode) || ($defined(designer._viewMode) && !designer._viewMode)) {
+ if (!$defined(designer._readOnly) || ($defined(designer._readOnly) && !designer._readOnly)) {
var buttonContainer = new Element('div').setStyles({paddingTop:5, textAlign:'center'});
var editBtn = new Element('input', {type:'button', 'class':'btn-primary', value:'Edit'}).addClass('button').inject(buttonContainer);
var removeBtn = new Element('input', {type:'button', value:'Remove','class':'btn-primary'}).addClass('button').inject(buttonContainer);
diff --git a/mindplot/src/main/javascript/MindmapDesigner.js b/mindplot/src/main/javascript/MindmapDesigner.js
index 467b587e..d385027d 100644
--- a/mindplot/src/main/javascript/MindmapDesigner.js
+++ b/mindplot/src/main/javascript/MindmapDesigner.js
@@ -35,24 +35,79 @@ mindplot.MindmapDesigner = new Class({
// Initial Zoom
this._zoom = profile.zoom;
- this._viewMode = profile.viewMode;
// Init Screen manager..
var screenManager = new mindplot.ScreenManager(profile.width, profile.height, divElement);
this._workspace = new mindplot.Workspace(profile, screenManager, this._zoom);
-
- //create editor
- var editorClass = mindplot.TextEditorFactory.getTextEditorFromName(mindplot.EditorOptions.textEditor);
- this._editor = new editorClass(this, this._actionRunner);
+ this._readOnly = profile.readOnly;
// Init layout managers ...
this._topics = [];
this._layoutManager = new mindplot.layout.OriginalLayoutManager(this);
// Register handlers..
- this._registerEvents();
this._relationships = {};
this._events = {};
+
+ // Register events
+ if (!profile.readOnly) {
+ this._registerEvents();
+ }
+
+ },
+
+ _registerEvents : function() {
+ // Register mouse events ...
+ this._registerMouseEvents();
+
+ // Register keyboard events ...
+ var keyboard = new mindplot.DesignerKeyboard(this);
+ keyboard.activate();
+
+ // To prevent the user from leaving the page with changes ...
+ window.addEvent('beforeunload', function () {
+ if (this.needsSave()) {
+ this.save(null, false)
+ }
+ }.bind(this));
+ },
+
+ _registerMouseEvents : function() {
+ var workspace = this._workspace;
+ var screenManager = workspace.getScreenManager();
+
+ // Initialize workspace event listeners.
+ screenManager.addEvent('drag', function(event) {
+ // Clean some selected nodes on event ..
+ this._cleanScreen();
+
+
+ }.bind(this));
+
+ // Deselect on click ...
+ screenManager.addEvent('click', function(event) {
+ this.onObjectFocusEvent(null, event);
+ }.bind(this));
+
+ // Create nodes on double click...
+ screenManager.addEvent('dblclick', function(event) {
+ if (workspace.isWorkspaceEventsEnabled()) {
+ // Get mouse position
+ var pos = screenManager.getWorkspaceMousePosition(event);
+
+ // Create a new topic model ...
+ var mindmap = this.getMindmap();
+ var model = mindmap.createNode(mindplot.model.NodeModel.MAIN_TOPIC_TYPE);
+ model.setPosition(pos.x, pos.y);
+
+ // Get central topic ...
+ var centralTopic = this.getCentralTopic();
+ var centralTopicId = centralTopic.getId();
+
+ // Execute action ...
+ this._actionDispatcher.addTopic(model, centralTopicId, true);
+ }
+ }.bind(this));
},
_getTopics : function() {
@@ -75,46 +130,6 @@ mindplot.MindmapDesigner = new Class({
}
},
- _registerEvents : function() {
- var workspace = this._workspace;
- var screenManager = workspace.getScreenManager();
-
- if (!$defined(this._viewMode) || ($defined(this._viewMode) && !this._viewMode)) {
- // Initialize workspace event listeners.
- screenManager.addEvent('drag', function(event) {
- // Clean some selected nodes on envet ..
- this.getEditor().lostFocus();
- this._cleanScreen();
- }.bind(this));
-
- // Deselect on click ...
- // @Todo: Arreglar en el screen manager que si hay drag, no hay click...
- screenManager.addEvent('click', function(event) {
- this.onObjectFocusEvent(null, event);
- }.bind(this));
-
- // Create nodes on double click...
- screenManager.addEvent('dblclick', function(event) {
- if (workspace.isWorkspaceEventsEnabled()) {
- this.getEditor().lostFocus();
- // Get mouse position
- var pos = screenManager.getWorkspaceMousePosition(event);
-
- // Create a new topic model ...
- var mindmap = this.getMindmap();
- var model = mindmap.createNode(mindplot.model.NodeModel.MAIN_TOPIC_TYPE);
- model.setPosition(pos.x, pos.y);
-
- // Get central topic ...
- var centralTopic = this.getCentralTopic();
- var centralTopicId = centralTopic.getId();
-
- // Execute action ...
- this._actionDispatcher.addTopic(model, centralTopicId, true);
- }
- }.bind(this));
- }
- },
_buildNodeGraph : function(model) {
var workspace = this._workspace;
@@ -153,17 +168,17 @@ mindplot.MindmapDesigner = new Class({
}
return topic;
- },
+ }
+ ,
onObjectFocusEvent : function(currentObject, event) {
- this.getEditor().lostFocus();
- var selectableObjects = this.getSelectedObjects();
+ var objects = this.getObjects();
// Disable all nodes on focus but not the current if Ctrl key isn't being pressed
if (!$defined(event) || (!event.ctrlKey && !event.metaKey)) {
- selectableObjects.forEach(function(selectableObject) {
- if (selectableObject.isOnFocus() && selectableObject != currentObject) {
- selectableObject.setOnFocus(false);
+ objects.forEach(function(object) {
+ if (object.isOnFocus() && object != currentObject) {
+ object.setOnFocus(false);
}
});
}
@@ -181,6 +196,20 @@ mindplot.MindmapDesigner = new Class({
},
+ selectAll : function() {
+ var objects = this.getObjects();
+ objects.forEach(function(object) {
+ object.setOnFocus(true);
+ });
+ },
+
+ deselectAll : function() {
+ var objects = this.getObjects();
+ objects.forEach(function(object) {
+ object.setOnFocus(false);
+ });
+ },
+
zoomIn : function() {
var scale = this._zoom / 1.2;
if (scale >= 0.3) {
@@ -190,11 +219,12 @@ mindplot.MindmapDesigner = new Class({
else {
core.Monitor.getInstance().logMessage('Sorry, no more zoom can be applied. \n Why do you need more?');
}
- },
+ }
+ ,
createChildForSelectedNode : function() {
- var nodes = this._getSelectedNodes();
+ var nodes = this.getSelectedNodes();
if (nodes.length <= 0) {
// If there are more than one node selected,
core.Monitor.getInstance().logMessage('Could not create a topic. Only one node must be selected.');
@@ -216,10 +246,11 @@ mindplot.MindmapDesigner = new Class({
// Execute event ...
this._actionDispatcher.addTopic(childModel, parentTopicId, true);
- },
+ }
+ ,
createSiblingForSelectedNode : function() {
- var nodes = this._getSelectedNodes();
+ var nodes = this.getSelectedNodes();
if (nodes.length <= 0) {
// If there are more than one node selected,
core.Monitor.getInstance().logMessage('Could not create a topic. Only one node must be selected.');
@@ -244,7 +275,8 @@ mindplot.MindmapDesigner = new Class({
this._actionDispatcher.addTopic(siblingModel, parentTopicId, true);
}
- },
+ }
+ ,
addRelationShip2SelectedNode : function(event) {
var screen = this._workspace.getScreenManager();
@@ -267,7 +299,8 @@ mindplot.MindmapDesigner = new Class({
screen.addEvent('mousemove', this._relationshipMouseMoveFunction);
screen.addEvent('click', this._relationshipMouseClickFunction);
}
- },
+ }
+ ,
_relationshipMouseMove : function(event) {
var screen = this._workspace.getScreenManager();
@@ -276,7 +309,8 @@ mindplot.MindmapDesigner = new Class({
event.preventDefault();
event.stop();
return false;
- },
+ }
+ ,
_relationshipMouseClick : function (event, fromNode) {
var target = event.target;
@@ -296,7 +330,8 @@ mindplot.MindmapDesigner = new Class({
event.preventDefault();
event.stop();
return false;
- },
+ }
+ ,
addRelationship : function(fromNode, toNode) {
// Create a new topic model ...
@@ -305,7 +340,8 @@ mindplot.MindmapDesigner = new Class({
this._actionDispatcher.addRelationship(model, mindmap);
- },
+ }
+ ,
needsSave : function() {
return this._actionRunner.hasBeenChanged();
@@ -314,7 +350,6 @@ mindplot.MindmapDesigner = new Class({
autoSaveEnabled : function(value) {
if ($defined(value) && value) {
var autosave = function() {
-
if (this.needsSave()) {
this.save(null, false);
}
@@ -333,7 +368,8 @@ mindplot.MindmapDesigner = new Class({
// Refresh undo state...
this._actionRunner.markAsChangeBase();
- },
+ }
+ ,
loadFromCollaborativeModel: function(collaborationManager) {
var mindmap = collaborationManager.buildWiseModel();
@@ -341,10 +377,11 @@ mindplot.MindmapDesigner = new Class({
// Place the focus on the Central Topic
var centralTopic = this.getCentralTopic();
- this._goToNode.attempt(centralTopic, this);
+ this.goToNode.attempt(centralTopic, this);
this._fireEvent("loadsuccess");
- },
+ }
+ ,
loadFromXML : function(mapId, xmlContent) {
$assert(xmlContent, 'mindmapId can not be null');
@@ -360,7 +397,7 @@ mindplot.MindmapDesigner = new Class({
// Place the focus on the Central Topic
var centralTopic = this.getCentralTopic();
- this._goToNode.attempt(centralTopic, this);
+ this.goToNode.attempt(centralTopic, this);
this._fireEvent("loadsuccess");
@@ -381,7 +418,7 @@ mindplot.MindmapDesigner = new Class({
// Place the focus on the Central Topic
var centralTopic = this.getCentralTopic();
- this._goToNode.attempt(centralTopic, this);
+ this.goToNode.attempt(centralTopic, this);
this._fireEvent("loadsuccess");
}
@@ -467,12 +504,14 @@ mindplot.MindmapDesigner = new Class({
workspace.appendChild(relationship);
relationship.redraw();
return relationship;
- },
+ }
+ ,
createRelationship : function(model) {
this._mindmap.addRelationship(model);
return this._relationshipModelToRelationship(model);
- },
+ }
+ ,
removeRelationship : function(model) {
this._mindmap.removeRelationship(model);
@@ -483,7 +522,8 @@ mindplot.MindmapDesigner = new Class({
targetTopic.removeRelationship(relationship);
this._workspace.removeChild(relationship);
delete this._relationships[model.getId()];
- },
+ }
+ ,
_buildRelationship : function (model) {
var elem = this;
@@ -534,11 +574,8 @@ mindplot.MindmapDesigner = new Class({
this._relationships[model.getId()] = relationLine;
return relationLine;
- },
-
- getEditor : function() {
- return this._editor;
- },
+ }
+ ,
_removeNode : function(node) {
if (node.getTopicType() != mindplot.model.NodeModel.CENTRAL_TOPIC_TYPE) {
@@ -558,10 +595,11 @@ mindplot.MindmapDesigner = new Class({
model.deleteNode();
if ($defined(parent)) {
- this._goToNode(parent);
+ this.goToNode(parent);
}
}
- },
+ }
+ ,
deleteCurrentNode : function() {
@@ -574,7 +612,8 @@ mindplot.MindmapDesigner = new Class({
this._actionDispatcher.deleteTopics(selectedObjects);
}
- },
+ }
+ ,
setFont2SelectedNode : function(font) {
var validSelectedObjects = this._getValidSelectedObjectsIds();
@@ -583,7 +622,8 @@ mindplot.MindmapDesigner = new Class({
this._actionDispatcher.changeFontFamilyToTopic(topicsIds, font);
}
- },
+ }
+ ,
setStyle2SelectedNode : function() {
var validSelectedObjects = this._getValidSelectedObjectsIds();
@@ -591,7 +631,8 @@ mindplot.MindmapDesigner = new Class({
if (topicsIds.length > 0) {
this._actionDispatcher.changeFontStyleToTopic(topicsIds);
}
- },
+ }
+ ,
setFontColor2SelectedNode : function(color) {
var validSelectedObjects = this._getValidSelectedObjectsIds();
@@ -599,7 +640,8 @@ mindplot.MindmapDesigner = new Class({
if (topicsIds.length > 0) {
this._actionDispatcher.changeFontColorToTopic(topicsIds, color);
}
- },
+ }
+ ,
setBackColor2SelectedNode : function(color) {
@@ -612,12 +654,13 @@ mindplot.MindmapDesigner = new Class({
if (topicsIds.length > 0) {
this._actionDispatcher.changeBackgroundColorToTopic(topicsIds, color);
}
- },
+ }
+ ,
_getValidSelectedObjectsIds : function(validate, errorMsg) {
var result = {"nodes":[],"relationshipLines":[]};
- var selectedNodes = this._getSelectedNodes();
+ var selectedNodes = this.getSelectedNodes();
var selectedRelationshipLines = this.getSelectedRelationshipLines();
if (selectedNodes.length == 0 && selectedRelationshipLines.length == 0) {
core.Monitor.getInstance().logMessage('At least one element must be selected to execute this operation.');
@@ -651,7 +694,8 @@ mindplot.MindmapDesigner = new Class({
}
}
return result;
- },
+ }
+ ,
setBorderColor2SelectedNode : function(color) {
var validateFunc = function(topic) {
@@ -664,7 +708,8 @@ mindplot.MindmapDesigner = new Class({
if (topicsIds.length > 0) {
this._actionDispatcher.changeBorderColorToTopic(topicsIds, color);
}
- },
+ }
+ ,
setFontSize2SelectedNode : function(size) {
var validSelectedObjects = this._getValidSelectedObjectsIds();
@@ -672,7 +717,8 @@ mindplot.MindmapDesigner = new Class({
if (topicsIds.length > 0) {
this._actionDispatcher.changeFontSizeToTopic(topicsIds, size);
}
- },
+ }
+ ,
setShape2SelectedNode : function(shape) {
var validateFunc = function(topic) {
@@ -685,7 +731,8 @@ mindplot.MindmapDesigner = new Class({
if (topicsIds.length > 0) {
this._actionDispatcher.changeShapeToTopic(topicsIds, shape);
}
- },
+ }
+ ,
setWeight2SelectedNode : function() {
@@ -694,7 +741,8 @@ mindplot.MindmapDesigner = new Class({
if (topicsIds.length > 0) {
this._actionDispatcher.changeFontWeightToTopic(topicsIds);
}
- },
+ }
+ ,
addIconType2SelectedNode : function(iconType) {
var validSelectedObjects = this._getValidSelectedObjectsIds();
@@ -702,7 +750,8 @@ mindplot.MindmapDesigner = new Class({
if (topicsIds.length > 0) {
this._actionDispatcher.addIconToTopic(topicsIds[0], iconType);
}
- },
+ }
+ ,
addLink2Node : function(url) {
var validSelectedObjects = this._getValidSelectedObjectsIds();
@@ -807,7 +856,7 @@ mindplot.MindmapDesigner = new Class({
}
},
- _getSelectedNodes : function() {
+ getSelectedNodes : function() {
var result = new Array();
for (var i = 0; i < this._topics.length; i++) {
if (this._topics[i].isOnFocus()) {
@@ -828,259 +877,17 @@ mindplot.MindmapDesigner = new Class({
return result;
},
- getSelectedNodes : function() {
- return this._getSelectedNodes();
- },
-
- getSelectedObjects : function() {
- var selectedNodes = this.getSelectedNodes();
- var selectedRelationships = this.getSelectedRelationshipLines();
- selectedRelationships.extend(selectedNodes);
- return selectedRelationships;
- },
-
- keyEventHandler : function(event) {
- if (this._workspace.isWorkspaceEventsEnabled()) {
- var evt = (event) ? event : window.event;
-
- if (evt.keyCode == 8) {
- if ($defined(event)) {
- if ($defined(event.preventDefault)) {
- event.preventDefault();
- } else {
- event.returnValue = false;
- }
- new Event(event).stop();
- }
- else
- evt.returnValue = false;
- }
- else {
- // @ToDo: I think that some of the keys has been removed ... Check this...
- evt = new Event(event);
- var key = evt.key;
- if (!this._editor.isVisible()) {
- if (((evt.code >= 65 && evt.code <= 90) || (evt.code >= 48 && evt.code <= 57)) && !(evt.control || evt.meta)) {
- if ($defined(evt.shift)) {
- key = key.toUpperCase();
- }
- this._showEditor(key);
- }
- else {
- var nodes;
- var node;
- switch (key) {
- case 'delete':
- this.deleteCurrentNode();
- break;
- case 'enter':
- if (!evt.meta) {
- this.createSiblingForSelectedNode();
- break;
- }
- case 'insert':
- this.createChildForSelectedNode();
- break;
- case 'right':
- nodes = this._getSelectedNodes();
- if (nodes.length > 0) {
- node = nodes[0];
- if (node.getTopicType() == mindplot.model.NodeModel.CENTRAL_TOPIC_TYPE) {
- this._goToSideChild(node, 'RIGHT');
- }
- else {
- if (node.getPosition().x < 0) {
- this._goToParent(node);
- }
- else if (!node.areChildrenShrinked()) {
- this._goToChild(node);
- }
- }
- } else {
- this._goToNode(this._topics[0]);
- }
- break;
- case 'left':
- nodes = this._getSelectedNodes();
- if (nodes.length > 0) {
- node = nodes[0];
- if (node.getTopicType() == mindplot.model.NodeModel.CENTRAL_TOPIC_TYPE) {
- this._goToSideChild(node, 'LEFT');
- }
- else {
- if (node.getPosition().x > 0) {
- this._goToParent(node);
- }
- else if (!node.areChildrenShrinked()) {
- this._goToChild(node);
- }
- }
- } else {
- this._goToNode(this._topics[0]);
- }
- break;
- case'up':
- nodes = this._getSelectedNodes();
- if (nodes.length > 0) {
- node = nodes[0];
- if (node.getTopicType() != mindplot.model.NodeModel.CENTRAL_TOPIC_TYPE) {
- this._goToBrother(node, 'UP');
- }
- } else {
- this._goToNode(this._topics[0]);
- }
- break;
- case 'down':
- nodes = this._getSelectedNodes();
- if (nodes.length > 0) {
- node = nodes[0];
- if (node.getTopicType() != mindplot.model.NodeModel.CENTRAL_TOPIC_TYPE) {
- this._goToBrother(node, 'DOWN');
- }
- } else {
- this._goToNode(this._topics[0]);
- }
- break;
- case 'f2':
- this._showEditor();
- break;
- case 'space':
- nodes = this._getSelectedNodes();
- if (nodes.length > 0) {
- var topic = nodes[0];
-
- var model = topic.getModel();
- var isShrink = !model.areChildrenShrinked();
- topic.setChildrenShrinked(isShrink);
- }
- break;
- case 'backspace':
- evt.preventDefault();
- break;
- case 'esc':
- nodes = this._getSelectedNodes();
- for (var i = 0; i < nodes.length; i++) {
- node = nodes[i];
- node.setOnFocus(false);
- }
- break;
- case 'z':
- if (evt.control || evt.meta) {
- if (evt.shift) {
- this.redo();
- }
- else {
- this.undo();
- }
- }
- break;
- default:
- break;
- }
- }
- evt.stop();
- }
- }
+ getObjects : function() {
+ var result = [].append(this._topics);
+ for (var id in this._relationships) {
+ result.push(this._relationships[id]);
}
+ return result;
},
- _showEditor : function(key) {
- var nodes = this._getSelectedNodes();
- if (nodes.length == 1) {
- var node = nodes[0];
- if (key && key != "") {
- this._editor.setInitialText(key);
- }
- this._editor.getFocusEvent.attempt(node, this._editor);
- }
- },
-
- _goToBrother : function(node, direction) {
- var brothers = node._parent._getChildren();
- var target = node;
- var y = node.getPosition().y;
- var x = node.getPosition().x;
- var dist = null;
- for (var i = 0; i < brothers.length; i++) {
- var sameSide = (x * brothers[i].getPosition().x) >= 0;
- if (brothers[i] != node && sameSide) {
- var brother = brothers[i];
- var brotherY = brother.getPosition().y;
- if (direction == "DOWN" && brotherY > y) {
- var distancia = y - brotherY;
- if (distancia < 0) {
- distancia = distancia * (-1);
- }
- if (dist == null || dist > distancia) {
- dist = distancia;
- target = brothers[i];
- }
- }
- else if (direction == "UP" && brotherY < y) {
- var distancia = y - brotherY;
- if (distancia < 0) {
- distancia = distancia * (-1);
- }
- if (dist == null || dist > distancia) {
- dist = distancia;
- target = brothers[i];
- }
- }
- }
- }
- this._goToNode(target);
- },
-
- _goToNode : function(node) {
+ goToNode : function(node) {
node.setOnFocus(true);
- this.onObjectFocusEvent.attempt(node, this);
- },
-
- _goToSideChild : function(node, side) {
- var children = node._getChildren();
- if (children.length > 0) {
- var target = children[0];
- var top = null;
- for (var i = 0; i < children.length; i++) {
- var child = children[i];
- var childY = child.getPosition().y;
- if (side == 'LEFT' && child.getPosition().x < 0) {
- if (top == null || childY < top) {
- target = child;
- top = childY;
- }
- }
- if (side == 'RIGHT' && child.getPosition().x > 0) {
- if (top == null || childY < top) {
- target = child;
- top = childY;
- }
- }
- }
-
- this._goToNode(target);
- }
- },
-
- _goToParent : function(node) {
- var parent = node._parent;
- this._goToNode(parent);
- },
-
- _goToChild : function(node) {
- var children = node._getChildren();
- if (children.length > 0) {
- var target = children[0];
- var top = target.getPosition().y;
- for (var i = 0; i < children.length; i++) {
- var child = children[i];
- if (child.getPosition().y < top) {
- top = child.getPosition().y;
- target = child;
- }
- }
- this._goToNode(target);
- }
+ this.onObjectFocusEvent(node);
},
getWorkSpace : function() {
diff --git a/mindplot/src/main/javascript/NodeGraph.js b/mindplot/src/main/javascript/NodeGraph.js
index fdae6747..62d88d63 100644
--- a/mindplot/src/main/javascript/NodeGraph.js
+++ b/mindplot/src/main/javascript/NodeGraph.js
@@ -22,6 +22,8 @@ mindplot.NodeGraph = new Class({
this._mouseEvents = true;
this.setModel(nodeModel);
this._onFocus = false;
+ this._textEditor = new mindplot.TextEditor(this);
+
},
getType : function() {
@@ -93,11 +95,13 @@ mindplot.NodeGraph = new Class({
} else {
// @todo: node must not know about the topic.
-
outerShape.setFill(mindplot.Topic.OUTER_SHAPE_ATTRIBUTES.fillColor);
outerShape.setOpacity(0);
}
this.setCursor('move');
+
+ // In any case, always try to hide the editor ...
+ this._textEditor.close();
},
isOnFocus : function() {
diff --git a/mindplot/src/main/javascript/Note.js b/mindplot/src/main/javascript/Note.js
index b0fc6712..d702de2d 100644
--- a/mindplot/src/main/javascript/Note.js
+++ b/mindplot/src/main/javascript/Note.js
@@ -41,7 +41,7 @@ mindplot.Note = new Class({
imgContainer.inject(container);
- if (!$defined(designer._viewMode) || ($defined(designer._viewMode) && !designer._viewMode)) {
+ if (!$defined(designer._readOnly) || ($defined(designer._readOnly) && !designer._readOnly)) {
var buttonContainer = new Element('div').setStyles({paddingTop:5, textAlign:'center'});
var editBtn = new Element('input', {type:'button', value:'Edit','class':'btn-primary'}).addClass('button').inject(buttonContainer);
var removeBtn = new Element('input', {type:'button', value:'Remove','class':'btn-primary'}).addClass('button').inject(buttonContainer);
diff --git a/mindplot/src/main/javascript/RichTextEditor.js b/mindplot/src/main/javascript/RichTextEditor.js
index eb91567f..9b177dda 100644
--- a/mindplot/src/main/javascript/RichTextEditor.js
+++ b/mindplot/src/main/javascript/RichTextEditor.js
@@ -20,7 +20,7 @@ mindplot.RichTextEditor = mindplot.TextEditor.extend({
initialize:function(screenManager,actionRunner){
this.parent(screenManager, actionRunner);
},
- _createUI:function(){
+ _buildEditor: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"});
@@ -33,7 +33,7 @@ mindplot.RichTextEditor = mindplot.TextEditor.extend({
this._designer.getWorkSpace().appendChild(this._editorNode);
this._addListeners();
},
- _addListeners:function(){
+ _registerListeners:function(){
$(this._myOverlay).addEvent('click', function(event){
event.preventDefault();
@@ -91,7 +91,7 @@ mindplot.RichTextEditor = mindplot.TextEditor.extend({
},
init:function(node){
this._currentNode = node;
- this.applyChanges = false;
+ this._applyChanges = false;
$(this._myOverlay.setStyle('display','block'));
inst = this._editor.instanceById("inputText2");
inst.elm.focus();
@@ -104,7 +104,7 @@ mindplot.RichTextEditor = mindplot.TextEditor.extend({
var text = this._text;
this._text = this._editor.instanceById("inputText2").getContent();
if(text!=this._text){
- this.applyChanges = true;
+ this._applyChanges = true;
}
console.log('bye');
this.lostFocusListener();
@@ -124,11 +124,11 @@ mindplot.RichTextEditor = mindplot.TextEditor.extend({
this._hideNode();
if (this._currentNode != null)
{
- if(this.applyChanges)
+ if(this._applyChanges)
{
- this._updateNode();
+ this._updateModel();
}
- this.applyChanges=true;
+ this._applyChanges=true;
this._currentNode = null;
}
},
diff --git a/mindplot/src/main/javascript/ScreenManager.js b/mindplot/src/main/javascript/ScreenManager.js
index f7d1fe4b..7556d4aa 100644
--- a/mindplot/src/main/javascript/ScreenManager.js
+++ b/mindplot/src/main/javascript/ScreenManager.js
@@ -25,6 +25,9 @@ mindplot.ScreenManager = new Class({
// Ignore default click event propagation. Prevent 'click' event on drad.
this._clickEvents = [];
this._divContainer.addEvent('click',function(event){event.stopPropagation()});
+
+ // @Todo: This must be resolved in other way ...
+ mindplot.util.Converter.setScreenManager(this);
},
setScale : function(scale) {
@@ -59,7 +62,7 @@ mindplot.ScreenManager = new Class({
},
getWorkspaceElementPosition : function(e) {
- // Retrive current element position.
+ // Retrieve current element position.
var elementPosition = e.getPosition();
var x = elementPosition.x;
var y = elementPosition.y;
@@ -68,16 +71,10 @@ mindplot.ScreenManager = new Class({
x = x - this._offset.x;
y = y - this._offset.y;
- // Scale coordinate in order to be relative to the workspace. That's coordSize/size;
+ // Scale coordinate in order to be relative to the workspace. That's coord/size;
x = x / this._workspaceScale;
y = y / this._workspaceScale;
- // Subtract div position.
- /* var containerElem = this.getContainer();
- var containerPosition = core.Utils.workOutDivElementPosition(containerElem);
- x = x + containerPosition.x;
- y = y + containerPosition.y;*/
-
// Remove decimal part..
return {x:x,y:y};
},
diff --git a/mindplot/src/main/javascript/TextEditor.js b/mindplot/src/main/javascript/TextEditor.js
index 7b71f511..a973c131 100644
--- a/mindplot/src/main/javascript/TextEditor.js
+++ b/mindplot/src/main/javascript/TextEditor.js
@@ -17,209 +17,176 @@
*/
mindplot.TextEditor = new Class({
- initialize:function(designer) {
- this._designer = designer;
- this._screenManager = designer.getWorkSpace().getScreenManager();
- this._container = this._screenManager.getContainer();
- this._isVisible = false;
-
- //Create editor ui
- this._createUI();
-
- this._addListeners();
-
+ initialize:function(topic) {
+ this._topic = topic;
},
- _createUI:function() {
+ _buildEditor : 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"}).inject(this._myOverlay);
- this.inputText = new Element('input').setProperties({type:"text", tabindex:'-1', id:"inputText", value:""}).setStyles({border:"none", background:"transparent"}).inject(inputContainer);
- var spanContainer = new Element('div').setStyle('visibility', "hidden").inject(this._myOverlay);
- this._spanText = new Element('span').setProperties({id: "spanText", tabindex:"-1"}).setStyle('white-space', "nowrap").setStyle('nowrap', 'nowrap').inject(spanContainer);
- this._myOverlay.inject(this._container);
+ var result = new Element('div');
+ result.setStyles({
+ position:"absolute",
+ display: "none",
+ zIndex: "8",
+ top: 0,
+ left:0,
+ width:"500px",
+ height:"100px"}
+ );
+
+ var inputContainer = new Element('div');
+ inputContainer.setStyles({
+ border:"none",
+ overflow:"auto"});
+ inputContainer.inject(result);
+
+ var inputText = new Element('input', {type:"text",tabindex:'-1', value:""});
+ inputText.setStyles({
+ border:"none",
+ background:"transparent"
+ });
+ inputText.inject(inputContainer);
+
+ var spanContainer = new Element('div');
+ spanContainer.setStyle('visibility', "hidden");
+ spanContainer.inject(result);
+
+ var spanElem = new Element('span', {tabindex:"-1"});
+ spanElem.setStyle('white-space', "nowrap");
+ spanElem.setStyle('nowrap', 'nowrap');
+ spanElem.inject(spanContainer);
+
+ return result;
},
- _addListeners:function() {
- 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);
+ _registerEvents : function(divElem) {
+ var inputElem = this._getInputElem();
+ var spanElem = this._getSpanElem();
+ divElem.addEvent('keydown', function (event) {
+ switch (event.key) {
+ case 'esc':
+ this.close(false);
+ break;
+ case 'enter':
+ this.close(true);
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";
+ spanElem.innerHTML = inputElem.value;
+ var size = inputElem.value.length + 1;
+ inputElem.size = size;
+ if (spanElem.offsetWidth > (parseInt(divElem.style.width) - 100)) {
+ divElem.style.width = (spanElem.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));
+ event.stopPropagation();
+ }.bind(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;
- }
-
- setTimeout("$('ffoxWorkarroundInput').focus();", 0);
- };
- this.fx = new Fx.Tween(this.inputText, {property: 'opacity', duration: 10});
- this.fx.addEvent('onComplete', onComplete.bind(this));
- },
-
- lostFocusEvent : function () {
- this.fx.options.duration = 10;
- this.fx.start(1, 0);
- //myAnim.animate();
+ // If the user clicks on the input, all event must be ignored ...
+ divElem.addEvent('click', function(event) {
+ event.stopPropagation();
+ });
+ divElem.addEvent('dblclick', function(event) {
+ event.stopPropagation();
+ });
+ divElem.addEvent('mousedown', function(event) {
+ event.stopPropagation();
+ });
},
isVisible : function () {
- return this._isVisible;
+ return $defined(this._divElem) && this._divElem.getStyle('display') == 'block';
},
- 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');
- },
+ _updateModel : function () {
- setInitialText : function (text) {
- this.initialText = text;
- },
-
- _updateNode : function () {
-
- if ($defined(this._currentNode) && this._currentNode.getText() != this.getText()) {
- var text = this.getText();
- var topicId = this._currentNode.getId();
+ if (this._topic.getText() != this._getText()) {
+ var text = this._getText();
+ var topicId = this._topic.getId();
var actionDispatcher = mindplot.ActionDispatcher.getInstance();
actionDispatcher.changeTextOnTopic([topicId], text);
}
},
- 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);
+ show : function (text) {
- if (stopPropagation) {
- if ($defined(event.stopPropagation)) {
- event.stopPropagation(true);
- } else {
- event.cancelBubble = true;
- }
- }
- }
- });
+ if (!this.isVisible()) {
+ //Create editor ui
+ var editorElem = this._buildEditor();
+ // @Todo: What element associate ?
+ editorElem.inject($('mindplot'));
+
+ this._divElem = editorElem;
+ this._registerEvents(editorElem);
+ this._showEditor(text);
+ }
},
- init : function (nodeGraph) {
- //console.log('init method');
- nodeGraph.getTextShape().setVisibility(false);
- this._currentNode = nodeGraph;
+ _showEditor : function (defaultText) {
- //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 topic = this._topic;
+ // Hide topic text ...
+ topic.getTextShape().setVisibility(false);
+
+ // Set Editor Style
+ var nodeText = topic.getTextShape();
var font = nodeText.getFont();
font.size = nodeText.getHtmlFontSize();
font.color = nodeText.getColor();
+ this._setStyle(font);
- this.setStyle(font);
+ // Set editor's initial text
+ var text = $defined(defaultText) ? defaultText : topic.getText();
+ this._setText(text);
- //set editor's initial text
- this.setText(text);
+ // Set editor's initial size
+ var displayFunc = function() {
+ var textShape = topic.getTextShape();
+ var scale = web2d.peer.utils.TransformUtil.workoutScale(textShape._peer);
- //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 screenPosition = mindplot.util.Converter.topicToScreenPosition(topic);
+ var textWidth = textShape.getWidth();
+ var textHeight = textShape.getHeight();
+ var iconGroup = topic.getIconGroup();
+ var iconGroupSize;
- var textWidth = editor._currentNode.getTextShape().getWidth();
- var textHeight = editor._currentNode.getTextShape().getHeight();
- var iconGroup = editor._currentNode.getIconGroup();
- var iconGroupSize;
- if ($defined(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;
+ if ($defined(iconGroup)) {
+ iconGroupSize = topic.getIconGroup().getSize();
+ }
+ else {
+ iconGroupSize = {width:0, height:0};
+ }
- 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');
- };
- };
+ var position = {x:0,y:0};
+ position.x = screenPosition.x - ((textWidth * scale.width) / 2) + (((iconGroupSize.width) * scale.width) / 2);
+ var fixError = 1;
+ position.y = screenPosition.y - ((textHeight * scale.height) / 2) - fixError;
- setTimeout(executor(this), 10);
+ var elemSize = topic.getSize();
+
+ // Position the editor and set the size...
+ this._setEditorSize(elemSize.width, elemSize.height, scale);
+ this._setPosition(position.x, position.y, scale);
+
+ // Make the editor visible ....
+ this._divElem.setStyle('display', 'block');
+
+ var inputElem = this._getInputElem();
+ inputElem.focus();
+ this._changeCursor(inputElem, $defined(defaultText));
+
+ }.bind(this);
+
+ displayFunc.delay(10);
},
- setStyle : function (fontStyle) {
- var inputField = $("inputText");
- var spanField = $("spanText");
+ _setStyle : function (fontStyle) {
+ var inputField = this._getInputElem();
+ var spanField = this._getSpanElem();
if (!$defined(fontStyle.font)) {
fontStyle.font = "Arial";
}
@@ -243,58 +210,48 @@ mindplot.TextEditor = new Class({
spanField.style.fontSize = fontStyle.size + "px";
},
- setText : function(text) {
- var inputField = $("inputText");
+ _setText : function(text) {
+ var inputField = this._getInputElem();
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");
+ this._divElem.style.width = (inputField.size * parseInt(inputField.style.fontSize) + 100) + "px";
+ var spanField = this._getSpanElem();
spanField.innerHTML = text;
inputField.value = text;
},
- getText : function() {
- return $('inputText').value;
+ _getText : function() {
+ return this._getInputElem().value;
},
- setEditorSize : function (width, height, scale) {
- //var scale = web2d.peer.utils.TransformUtil.workoutScale(this._currentNode.getTextShape()._peer);
+ _getInputElem : function() {
+ return this._divElem.getElement('input');
+ },
+
+ _getSpanElem : function() {
+ return this._divElem.getElement('span');
+ },
+
+ _setEditorSize : function (width, height, scale) {
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";
+ this._divElem.style.width = this._size.width * 2 + "px";
+ this._divElem.style.height = this._size.height + "px";
},
- getSize : function () {
- return {width:$("spanText").offsetWidth,height:$("spanText").offsetHeight};
+ _setPosition : function (x, y) {
+ $(this._divElem).setStyles({top : y + "px", left: x + "px"});
},
- setPosition : function (x, y, scale) {
- $(this._myOverlay).setStyles({top : y + "px", left: x + "px"});
- //this._myOverlay.style.left = x + "px";
+ _showTextElem : 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';
- 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
+ _changeCursor : function(inputElem, selectText) {
+ // Select text if it's required ...
+ if (inputElem.createTextRange) //ie
{
- var range = $('inputText').createTextRange();
- var pos = $('inputText').value.length;
- if (selectText) {
+ var range = inputElem.createTextRange();
+ var pos = inputElem.value.length;
+ if (!selectText) {
range.select();
range.move("character", pos);
}
@@ -303,53 +260,26 @@ mindplot.TextEditor = new Class({
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');
+ else if (!selectText) {
+ inputElem.setSelectionRange(0, inputElem.value.length);
}
},
- clickEvent : function(event) {
+
+ close : function(update) {
if (this.isVisible()) {
- if ($defined(event.stopPropagation)) {
- event.stopPropagation(true);
- } else {
- event.cancelBubble = true;
+
+ // Update changes ...
+ if (!$defined(update) || update) {
+ this._updateModel();
}
- event.preventDefault();
- }
- },
- mouseDownEvent : function(event) {
- if (this.isVisible()) {
- if ($defined(event.stopPropagation)) {
- event.stopPropagation(true);
- } else {
- event.cancelBubble = true;
- }
+ // Let make the visible text in the node visible again ...
+ this._topic.getTextShape().setVisibility(true);
+
+ // Remove it form the screen ...
+ this._divElem.dispose();
+ this._divElem = null;
}
}
-
});
diff --git a/mindplot/src/main/javascript/Topic.js b/mindplot/src/main/javascript/Topic.js
index facefd09..949bf972 100644
--- a/mindplot/src/main/javascript/Topic.js
+++ b/mindplot/src/main/javascript/Topic.js
@@ -26,9 +26,7 @@ mindplot.Topic = new Class({
this._relationships = [];
this._isInWorkspace = false;
this._helpers = [];
-
this._buildShape();
- this.setMouseEventsEnabled(true);
// Position a topic ....
var pos = model.getPosition();
@@ -36,15 +34,31 @@ mindplot.Topic = new Class({
this.setPosition(pos);
}
- this.registerEvents();
+ // Register events for the topic ...
+ this._registerEvents();
},
- registerEvents:function () {
+ _registerEvents : function() {
+
+ this.setMouseEventsEnabled(true);
// Prevent click on the topics being propagated ...
this.addEventListener('click', function(event) {
event.stopPropagation();
});
+
+ this.addEventListener('dblclick', function (event) {
+ this._textEditor.show();
+ event.stopPropagation(true);
+ }.bind(this));
+
+ this.addEventListener('keydown', function(event) {
+ if (this.isOnFocus()) {
+ this._textEditor.show();
+
+ }
+ }.bind(this));
+
},
setShapeType : function(type) {
diff --git a/mindplot/src/main/javascript/layout/FreeMindLayoutManager.js b/mindplot/src/main/javascript/layout/FreeMindLayoutManager.js
index 45e4e5f3..2afb3429 100644
--- a/mindplot/src/main/javascript/layout/FreeMindLayoutManager.js
+++ b/mindplot/src/main/javascript/layout/FreeMindLayoutManager.js
@@ -64,7 +64,7 @@ mindplot.layout.FreeMindLayoutManager = mindplot.layout.BaseLayoutManager.extend
}
// Register editor events ...
- if (!$defined(this.getDesigner()._viewMode)|| ($defined(this.getDesigner()._viewMode) && !this.getDesigner()._viewMode))
+ if (!$defined(this.getDesigner()._readOnly)|| ($defined(this.getDesigner()._readOnly) && !this.getDesigner()._readOnly))
{
this.getDesigner()._editor.listenEventOnNode(topic, 'dblclick', true);
}
diff --git a/mindplot/src/main/javascript/layout/OriginalLayoutManager.js b/mindplot/src/main/javascript/layout/OriginalLayoutManager.js
index eaeebdbd..a947e448 100644
--- a/mindplot/src/main/javascript/layout/OriginalLayoutManager.js
+++ b/mindplot/src/main/javascript/layout/OriginalLayoutManager.js
@@ -135,12 +135,6 @@ mindplot.layout.OriginalLayoutManager = new Class({
var dragger = this._dragger;
dragger.add(topic);
}
-
- // Register editor events ...
- if (!$defined(this.getDesigner()._viewMode) || ($defined(this.getDesigner()._viewMode) && !this.getDesigner()._viewMode)) {
- this.getDesigner()._editor.listenEventOnNode(topic, 'dblclick', true);
- }
-
},
_createMainTopicBoard:function(node) {
diff --git a/mindplot/src/main/javascript/model/NodeModel.js b/mindplot/src/main/javascript/model/NodeModel.js
index 62f2a0ea..7b7eb3a6 100644
--- a/mindplot/src/main/javascript/model/NodeModel.js
+++ b/mindplot/src/main/javascript/model/NodeModel.js
@@ -183,9 +183,6 @@ mindplot.model.NodeModel = new Class({
},
setPosition : function(x, y) {
- $assert(x, "x coordinate must be defined");
- $assert(y, "y coordinate must be defined");
-
if (!$defined(this._position)) {
this._position = new core.Point();
}
diff --git a/mindplot/src/main/javascript/util/Converter.js b/mindplot/src/main/javascript/util/Converter.js
new file mode 100644
index 00000000..bc5dd201
--- /dev/null
+++ b/mindplot/src/main/javascript/util/Converter.js
@@ -0,0 +1,31 @@
+/*
+ * 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.util.Converter = {
+
+ topicToScreenPosition : function(topic) {
+ $assert(topic, "topic is not defined");
+ $assert(this._screenManager, "screenManager is not defined");
+
+ return this._screenManager.getWorkspaceElementPosition(topic);
+ }
+};
+
+mindplot.util.Converter.setScreenManager = function(instance) {
+ this._screenManager = instance;
+};
\ No newline at end of file
diff --git a/mindplot/src/main/javascript/util/Shape.js b/mindplot/src/main/javascript/util/Shape.js
index 2653169a..3bedc416 100644
--- a/mindplot/src/main/javascript/util/Shape.js
+++ b/mindplot/src/main/javascript/util/Shape.js
@@ -1,42 +1,30 @@
/*
-* 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.util.Shape =
{
- isAtRight: function(sourcePoint, targetPoint)
- {
+ isAtRight: function(sourcePoint, targetPoint) {
$assert(sourcePoint, "Source can not be null");
$assert(targetPoint, "Target can not be null");
return sourcePoint.x < targetPoint.x;
},
- workoutDistance: function(sourceNode, targetNode)
- {
- var sPos = sourceNode.getPosition();
- var tPos = targetNode.getPosition();
- var x = tPos.x - sPos.x;
- var y = tPos.y - sPos.y;
-
- var hip = y * y + x * x;
- return hip;
- },
- calculateRectConnectionPoint: function(rectCenterPoint, rectSize, isAtRight)
- {
+ calculateRectConnectionPoint: function(rectCenterPoint, rectSize, isAtRight) {
$assert(rectCenterPoint, 'rectCenterPoint can not be null');
$assert(rectSize, 'rectSize can not be null');
$assert(isAtRight, 'isRight can not be null');
@@ -46,98 +34,12 @@ mindplot.util.Shape =
// This is used fix a minor difference ...z
var correctionHardcode = 2;
- if (isAtRight)
- {
+ if (isAtRight) {
result.setValue(rectCenterPoint.x - (rectSize.width / 2) + correctionHardcode, rectCenterPoint.y);
- } else
- {
+ } else {
result.setValue(parseFloat(rectCenterPoint.x) + (rectSize.width / 2) - correctionHardcode, rectCenterPoint.y);
}
- return result;
- },
- _getRectShapeOffset : function(sourceTopic, targetTopic)
- {
-
- var tPos = targetTopic.getPosition();
- var sPos = sourceTopic.getPosition();
-
- var tSize = targetTopic.getSize();
-
- var x = sPos.x - tPos.x;
- var y = sPos.y - tPos.y;
-
- var gradient = 0;
- if ($defined(x))
- {
- gradient = y / x;
- }
-
- var area = this._getSector(gradient, x, y);
- var xOff = -1;
- var yOff = -1;
- if (area == 1 || area == 3)
- {
- xOff = tSize.width / 2;
- yOff = xOff * gradient;
-
- xOff = xOff * ((x < 0) ? -1 : 1);
- yOff = yOff * ((x < 0) ? -1 : 1);
-
-
- } else
- {
- yOff = tSize.height / 2;
- xOff = yOff / gradient;
-
- yOff = yOff * ((y < 0) ? -1 : 1);
- xOff = xOff * ((y < 0) ? -1 : 1);
- }
-
-
- // Controll boundaries.
- if (Math.abs(xOff) > tSize.width / 2)
- {
- xOff = ((tSize.width / 2) * Math.sign(xOff));
- }
-
- if (Math.abs(yOff) > tSize.height / 2)
- {
- yOff = ((tSize.height / 2) * Math.sign(yOff));
- }
-
- return {x:xOff,y:yOff};
- },
-
-/**
- * Sector are numered following the clockwise direction.
- */
- _getSector : function(gradient, x, y)
- {
- var result;
- if (gradient < 0.5 && gradient > -0.5)
- {
- // Sector 1 and 3
- if (x >= 0)
- {
- result = 1;
- } else
- {
- result = 3;
- }
-
- } else
- {
- // Sector 2 and 4
- if (y <= 0)
- {
- result = 4;
- } else
- {
- result = 2;
- }
- }
-
return result;
}
};
diff --git a/wise-doc/src/main/webapp/html/editor.html b/wise-doc/src/main/webapp/html/editor.html
index 9d327830..1eed88d9 100644
--- a/wise-doc/src/main/webapp/html/editor.html
+++ b/wise-doc/src/main/webapp/html/editor.html
@@ -198,7 +198,7 @@
-