- Move keyboard events as part of a separate class.
- TextEditor is now one instance peer node. - Broken: f2 and start writting on typing.
This commit is contained in:
@@ -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();
|
||||
});
|
||||
|
266
mindplot/src/main/javascript/DesignerKeyboard.js
Normal file
266
mindplot/src/main/javascript/DesignerKeyboard.js
Normal file
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
});
|
@@ -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();
|
||||
|
@@ -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);
|
||||
|
@@ -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() {
|
||||
|
@@ -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() {
|
||||
|
@@ -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);
|
||||
|
@@ -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;
|
||||
}
|
||||
},
|
||||
|
@@ -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};
|
||||
},
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
@@ -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) {
|
||||
|
@@ -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);
|
||||
}
|
||||
|
@@ -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) {
|
||||
|
@@ -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();
|
||||
}
|
||||
|
31
mindplot/src/main/javascript/util/Converter.js
Normal file
31
mindplot/src/main/javascript/util/Converter.js
Normal file
@@ -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;
|
||||
};
|
@@ -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;
|
||||
}
|
||||
};
|
||||
|
Reference in New Issue
Block a user