From f3e024735dd1ae0c616cb06a85520ccb17d9c5c7 Mon Sep 17 00:00:00 2001 From: Paulo Veiga Date: Fri, 19 Aug 2011 13:38:37 -0300 Subject: [PATCH] - Move keyboard events as part of a separate class. - TextEditor is now one instance peer node. - Broken: f2 and start writting on typing. --- mindplot/pom.xml | 2 + mindplot/src/main/javascript/CentralTopic.js | 9 +- .../src/main/javascript/DesignerKeyboard.js | 266 ++++++++++ mindplot/src/main/javascript/ImageIcon.js | 2 +- mindplot/src/main/javascript/LinkIcon.js | 2 +- .../src/main/javascript/MindmapDesigner.js | 485 ++++++------------ mindplot/src/main/javascript/NodeGraph.js | 6 +- mindplot/src/main/javascript/Note.js | 2 +- .../src/main/javascript/RichTextEditor.js | 14 +- mindplot/src/main/javascript/ScreenManager.js | 13 +- mindplot/src/main/javascript/TextEditor.js | 412 ++++++--------- mindplot/src/main/javascript/Topic.js | 22 +- .../layout/FreeMindLayoutManager.js | 2 +- .../layout/OriginalLayoutManager.js | 6 - .../src/main/javascript/model/NodeModel.js | 3 - .../src/main/javascript/util/Converter.js | 31 ++ mindplot/src/main/javascript/util/Shape.js | 138 +---- wise-doc/src/main/webapp/html/editor.html | 3 +- wise-doc/src/main/webapp/js/editor.js | 32 +- .../webapp/js/mootools-more-1.3.2.1-yui.js | 88 +++- wise-webapp/src/main/webapp/js/editor.js | 18 +- wise-webapp/src/main/webapp/js/embedded.js | 2 +- 22 files changed, 759 insertions(+), 799 deletions(-) create mode 100644 mindplot/src/main/javascript/DesignerKeyboard.js create mode 100644 mindplot/src/main/javascript/util/Converter.js 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 @@
- + @@ -215,7 +215,6 @@
Shortcuts
- diff --git a/wise-doc/src/main/webapp/js/editor.js b/wise-doc/src/main/webapp/js/editor.js index 5af67d5f..ec506bce 100644 --- a/wise-doc/src/main/webapp/js/editor.js +++ b/wise-doc/src/main/webapp/js/editor.js @@ -150,8 +150,6 @@ Tabs.Init(); // Hide the content while waiting for the onload event to trigger. var contentId = window.location.hash || "#Introduction"; -var iconPanel = null; - function afterMindpotLibraryLoading() { buildMindmapDesigner(); @@ -177,31 +175,19 @@ function afterMindpotLibraryLoading() { }); } - // Register Key Events ... - $(document).addEvent('keydown', designer.keyEventHandler.bind(designer)); - $("ffoxWorkarroundInput").addEvent('keydown', designer.keyEventHandler.bind(designer)); - - // To prevent the user from leaving the page with changes ... - window.onbeforeunload = function () { - if (designer.needsSave()) { - designer.save(null, false) - } - }; - var menu = new mindplot.widget.Menu(designer,'toolbar'); + var menu = new mindplot.widget.Menu(designer, 'toolbar'); // If a node has focus, focus can be move to another node using the keys. designer._cleanScreen = function() { menu.clear() }; - // If not problem has arisen, close the dialog ... - var closeDialog = function() { - + (function() { if (!window.hasUnexpectedErrors) { waitDialog.deactivate(); } - }.delay(500); + }).delay(500); } function buildMindmapDesigner() { @@ -223,22 +209,22 @@ function buildMindmapDesigner() { editorProperties.height = screenHeight; designer = new mindplot.MindmapDesigner(editorProperties, container); - if(mindplot.collaboration.CollaborationManager.getInstance().isCollaborationFrameworkAvailable()){ + if (mindplot.collaboration.CollaborationManager.getInstance().isCollaborationFrameworkAvailable()) { buildCollaborativeMindmapDesigner(); - }else{ + } else { buildStandaloneMindmapDesigner(); } } -function buildStandaloneMindmapDesigner(){ +function buildStandaloneMindmapDesigner() { designer.loadFromXML(mapId, mapXml); } -function buildCollaborativeMindmapDesigner(){ +function buildCollaborativeMindmapDesigner() { var collaborationManager = mindplot.collaboration.CollaborationManager.getInstance(); - if(collaborationManager.isCollaborativeFrameworkReady()){ + if (collaborationManager.isCollaborativeFrameworkReady()) { designer.loadFromCollaborativeModel(collaborationManager); - }else{ + } else { collaborationManager.setWiseReady(true); } } diff --git a/wise-doc/src/main/webapp/js/mootools-more-1.3.2.1-yui.js b/wise-doc/src/main/webapp/js/mootools-more-1.3.2.1-yui.js index cc678e87..9f4f977f 100644 --- a/wise-doc/src/main/webapp/js/mootools-more-1.3.2.1-yui.js +++ b/wise-doc/src/main/webapp/js/mootools-more-1.3.2.1-yui.js @@ -1,6 +1,6 @@ // MooTools: the javascript framework. -// Load this file's selection again by visiting: http://mootools.net/more/979a28b1cc76ab15b6da1704eb6e4c2c -// Or build this file again with packager using: packager build More/More More/String.Extras More/URI More/URI.Relative More/Hash More/Hash.Extras More/Fx.Elements More/Fx.Accordion More/Fx.Move More/Fx.Reveal More/Fx.Scroll More/Fx.Slide More/Fx.SmoothScroll More/Fx.Sort More/Drag More/Drag.Move More/Assets More/Color More/Locale +// Load this file's selection again by visiting: http://mootools.net/more/62b5cf1c687ec9e067cb5d1c933b608f +// Or build this file again with packager using: packager build More/More More/String.Extras More/URI More/URI.Relative More/Hash More/Hash.Extras More/Fx.Elements More/Fx.Accordion More/Fx.Move More/Fx.Reveal More/Fx.Scroll More/Fx.Slide More/Fx.SmoothScroll More/Fx.Sort More/Drag More/Drag.Move More/Assets More/Color More/Keyboard More/Keyboard.Extras More/Locale /* --- copyrights: @@ -72,21 +72,17 @@ if(e&&!this.selfHidden){for(var d in f){e.setStyle(d,e[f[d]]);}}}if((this.timer& this.selfHidden=false;g.each(function(l,k){h[k]={};var j;if(k!=b){j=true;}else{if(a.alwaysHide&&((l.offsetHeight>0&&a.height)||l.offsetWidth>0&&a.width)){j=true; this.selfHidden=true;}}this.fireEvent(j?"background":"active",[this.togglers[k],l]);for(var m in f){h[k][m]=j?0:l[f[m]];}if(!c&&!j&&a.resetHeight){h[k].height="auto"; }},this);this.internalChain.clearChain();this.internalChain.chain(function(){if(a.resetHeight&&!this.selfHidden){var i=g[b];if(i){i.setStyle("height","auto"); -}}}.bind(this));return c?this.start(h):this.set(h).internalChain.callChain();}});var Accordion=new Class({Extends:Fx.Accordion,initialize:function(){this.parent.apply(this,arguments); -var a=Array.link(arguments,{container:Type.isElement});this.container=a.container;},addSection:function(c,b,e){c=document.id(c);b=document.id(b);var d=this.togglers.contains(c); -var a=this.togglers.length;if(a&&(!d||e)){e=e!=null?e:a-1;c.inject(this.togglers[e],"before");b.inject(c,"after");}else{if(this.container&&!d){c.inject(this.container); -b.inject(this.container);}}return this.parent.apply(this,arguments);}});(function(){var b=function(e,d){var f=[];Object.each(d,function(g){Object.each(g,function(h){e.each(function(i){f.push(i+"-"+h+(i=="border"?"-width":"")); +}}}.bind(this));return c?this.start(h):this.set(h).internalChain.callChain();}});(function(){var b=function(e,d){var f=[];Object.each(d,function(g){Object.each(g,function(h){e.each(function(i){f.push(i+"-"+h+(i=="border"?"-width":"")); });});});return f;};var c=function(f,e){var d=0;Object.each(e,function(h,g){if(g.test(f)){d=d+h.toInt();}});return d;};var a=function(d){return !!(!d||d.offsetHeight||d.offsetWidth); };Element.implement({measure:function(h){if(a(this)){return h.call(this);}var g=this.getParent(),e=[];while(!a(g)&&g!=document.body){e.push(g.expose()); g=g.getParent();}var f=this.expose(),d=h.call(this);f();e.each(function(i){i();});return d;},expose:function(){if(this.getStyle("display")!="none"){return function(){}; }var d=this.style.cssText;this.setStyles({display:"block",position:"absolute",visibility:"hidden"});return function(){this.style.cssText=d;}.bind(this); },getDimensions:function(d){d=Object.merge({computeSize:false},d);var i={x:0,y:0};var h=function(j,e){return(e.computeSize)?j.getComputedSize(e):j.getSize(); };var f=this.getParent("body");if(f&&this.getStyle("display")=="none"){i=this.measure(function(){return h(this,d);});}else{if(f){try{i=h(this,d);}catch(g){}}}return Object.append(i,(i.x||i.x===0)?{width:i.x,height:i.y}:{x:i.width,y:i.height}); -},getComputedSize:function(d){if(d&&d.plains){d.planes=d.plains;}d=Object.merge({styles:["padding","border"],planes:{height:["top","bottom"],width:["left","right"]},mode:"both"},d); -var g={},e={width:0,height:0},f;if(d.mode=="vertical"){delete e.width;delete d.planes.width;}else{if(d.mode=="horizontal"){delete e.height;delete d.planes.height; -}}b(d.styles,d.planes).each(function(h){g[h]=this.getStyle(h).toInt();},this);Object.each(d.planes,function(i,h){var k=h.capitalize(),j=this.getStyle(h); -if(j=="auto"&&!f){f=this.getDimensions();}j=g[h]=(j=="auto")?f[h]:j.toInt();e["total"+k]=j;i.each(function(m){var l=c(m,g);e["computed"+m.capitalize()]=l; -e["total"+k]+=l;});},this);return Object.append(e,g);}});})();(function(b){var a=Element.Position={options:{relativeTo:document.body,position:{x:"center",y:"center"},offset:{x:0,y:0}},getOptions:function(d,c){c=Object.merge({},a.options,c); +},getComputedSize:function(d){d=Object.merge({styles:["padding","border"],planes:{height:["top","bottom"],width:["left","right"]},mode:"both"},d);var g={},e={width:0,height:0},f; +if(d.mode=="vertical"){delete e.width;delete d.planes.width;}else{if(d.mode=="horizontal"){delete e.height;delete d.planes.height;}}b(d.styles,d.planes).each(function(h){g[h]=this.getStyle(h).toInt(); +},this);Object.each(d.planes,function(i,h){var k=h.capitalize(),j=this.getStyle(h);if(j=="auto"&&!f){f=this.getDimensions();}j=g[h]=(j=="auto")?f[h]:j.toInt(); +e["total"+k]=j;i.each(function(m){var l=c(m,g);e["computed"+m.capitalize()]=l;e["total"+k]+=l;});},this);return Object.append(e,g);}});})();(function(b){var a=Element.Position={options:{relativeTo:document.body,position:{x:"center",y:"center"},offset:{x:0,y:0}},getOptions:function(d,c){c=Object.merge({},a.options,c); a.setPositionOption(c);a.setEdgeOption(c);a.setOffsetOption(d,c);a.setDimensionsOption(d,c);return c;},setPositionOption:function(c){c.position=a.getCoordinateFromValue(c.position); },setEdgeOption:function(d){var c=a.getCoordinateFromValue(d.edge);d.edge=c?c:(d.position.x=="center"&&d.position.y=="center")?{x:"center",y:"center"}:{x:"left",y:"top"}; },setOffsetOption:function(f,d){var c={x:0,y:0},g=f.measure(function(){return document.id(this.getOffsetParent());}),e=g.getScroll();if(!g||g==f.getDocument().body){return; @@ -150,8 +146,7 @@ var b=Object.map(document.id(d).getPosition(this.element),function(g,f){return e ["x","y"].each(function(k){if(g.contains(k)){if(c[k]>h[k]+b[k]){i[k]=c[k]-b[k];}if(f[k]