From d1a3ba470e8522ca629e0cf13a5d9980797f4c22 Mon Sep 17 00:00:00 2001 From: Paulo Veiga Date: Sat, 20 Aug 2011 10:50:48 -0300 Subject: [PATCH] More fixes. --- mindplot/src/main/javascript/CentralTopic.js | 4 +- .../src/main/javascript/DesignerKeyboard.js | 83 ++++++++++---- mindplot/src/main/javascript/DragTopic.js | 2 +- mindplot/src/main/javascript/MainTopic.js | 6 +- .../src/main/javascript/MindmapDesigner.js | 102 +++++++++--------- mindplot/src/main/javascript/NodeGraph.js | 22 ++-- mindplot/src/main/javascript/TextEditor.js | 10 +- mindplot/src/main/javascript/Topic.js | 23 +--- mindplot/src/main/javascript/Workspace.js | 22 ++-- .../layout/FreeMindLayoutManager.js | 8 +- .../layout/OriginalLayoutManager.js | 6 -- wise-doc/bugs.txt | 4 +- 12 files changed, 155 insertions(+), 137 deletions(-) diff --git a/mindplot/src/main/javascript/CentralTopic.js b/mindplot/src/main/javascript/CentralTopic.js index 0e3f1ea3..1f399f63 100644 --- a/mindplot/src/main/javascript/CentralTopic.js +++ b/mindplot/src/main/javascript/CentralTopic.js @@ -19,8 +19,8 @@ mindplot.CentralTopic = new Class({ Extends:mindplot.Topic, - initialize: function(model) { - this.parent(model); + initialize: function(model,options) { + this.parent(model,options); }, _registerEvents : function() { diff --git a/mindplot/src/main/javascript/DesignerKeyboard.js b/mindplot/src/main/javascript/DesignerKeyboard.js index 4319f5f8..c2bdb74f 100644 --- a/mindplot/src/main/javascript/DesignerKeyboard.js +++ b/mindplot/src/main/javascript/DesignerKeyboard.js @@ -24,26 +24,19 @@ mindplot.DesignerKeyboard = new Class({ 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), - + var keyboardEvents = { 'backspace':function(event) { event.preventDefault(); event.stopPropagation(); }.bind(this), 'space' : function() { - var nodes = this.getSelectedNodes(); + var nodes = designer.getSelectedNodes(); if (nodes.length > 0) { var topic = nodes[0]; @@ -54,8 +47,12 @@ mindplot.DesignerKeyboard = new Class({ }.bind(this), 'f2' : function() { - // @todo: - console.log("f2 Must be implented"); + var nodes = designer.getSelectedNodes(); + if (nodes.length > 0) { + var topic = nodes[0]; + topic.showTextEditor(); + } + }.bind(this), 'delete' : function() { @@ -93,6 +90,17 @@ mindplot.DesignerKeyboard = new Class({ }, + 'meta+shift+a' : function(event) { + designer.deselectAll(); + event.preventDefault(); + }, + + 'ctrl+shift+a' : function(event) { + designer.deselectAll(); + event.preventDefault(); + + }, + 'meta+a' : function(event) { designer.selectAll(); event.preventDefault(); @@ -141,7 +149,6 @@ mindplot.DesignerKeyboard = new Class({ }.bind(this), 'up' : function() { - // @ToDo: Ups, accessing a private method ... var nodes = designer.getSelectedNodes(); if (nodes.length > 0) { var node = nodes[0]; @@ -166,8 +173,43 @@ mindplot.DesignerKeyboard = new Class({ this._goToNode(designer, centralTopic); } }.bind(this) + }; + this.addEvents(keyboardEvents); + var regex = /^(?:shift|control|ctrl|alt|meta)$/; + var modifiers = ['shift', 'control', 'alt', 'meta']; + var excludes = ['esc','capslock','tab']; + + $(document).addEvent('keydown', function(event) { + + // Convert key to mootool keyboard event format... + var keys = []; + modifiers.each(function(mod) { + if (event[mod]) keys.push(mod); + }); + if (!regex.test(event.key)) + keys.push(event.key); + var key = keys.join('+'); + + // Is the pressed key one of the already registered in the keyboard ? + var isRegistered = false; + for (var eKey in keyboardEvents) { + if (eKey == key) { + isRegistered = true; + break; + } + } + + // If it's not registered, let's + if (!isRegistered && !excludes.contains(key) && !modifiers.contains(key) && !key.contains('meta') && !key.contains('ctrl') && !key.contains('control')) { + var nodes = designer.getSelectedNodes(); + if (nodes.length > 0) { + nodes[0].showTextEditor(event.key); + event.stopPropagation(); + } + } }); + }, _goToBrother : function(designer, node, direction) { @@ -235,7 +277,7 @@ mindplot.DesignerKeyboard = new Class({ _goToParent : function(designer, node) { var parent = node._parent; - this._goToNode(designer,parent); + this._goToNode(designer, parent); }, _goToChild : function(designer, node) { @@ -250,7 +292,7 @@ mindplot.DesignerKeyboard = new Class({ target = child; } } - this._goToNode(designer,target); + this._goToNode(designer, target); } }, @@ -261,6 +303,9 @@ mindplot.DesignerKeyboard = new Class({ // Give focus to the selected node.... node.setOnFocus(true); } - - }); + +mindplot.DesignerKeyboard.register = function(designer) { + this._instance = new mindplot.DesignerKeyboard(designer); + this._instance.activate(); +} \ No newline at end of file diff --git a/mindplot/src/main/javascript/DragTopic.js b/mindplot/src/main/javascript/DragTopic.js index 051fff42..9b6bcf8a 100644 --- a/mindplot/src/main/javascript/DragTopic.js +++ b/mindplot/src/main/javascript/DragTopic.js @@ -95,7 +95,7 @@ mindplot.DragTopic = new Class({ // Remove drag shadow. workspace.removeChild(this._elem2d); - // Remove pivot shape. To improve performace it will not be removed. Only the visilility will be changed. + // Remove pivot shape. To improve performace it will not be removed. Only the visibility will be changed. var dragPivot = this._getDragPivot(); dragPivot.setVisibility(false); }, diff --git a/mindplot/src/main/javascript/MainTopic.js b/mindplot/src/main/javascript/MainTopic.js index 7e22e2de..44eb4e4a 100644 --- a/mindplot/src/main/javascript/MainTopic.js +++ b/mindplot/src/main/javascript/MainTopic.js @@ -18,8 +18,8 @@ mindplot.MainTopic = new Class({ Extends: mindplot.Topic, - initialize : function(model) { - this.parent(model); + initialize : function(model, options) { + this.parent(model, options); }, INNER_RECT_ATTRIBUTES : {stroke:'0.5 solid #009900'}, @@ -301,4 +301,4 @@ mindplot.MainTopic = new Class({ addSibling : function() { var order = this.getOrder(); } -}); +}); \ No newline at end of file diff --git a/mindplot/src/main/javascript/MindmapDesigner.js b/mindplot/src/main/javascript/MindmapDesigner.js index d385027d..55800db2 100644 --- a/mindplot/src/main/javascript/MindmapDesigner.js +++ b/mindplot/src/main/javascript/MindmapDesigner.js @@ -61,8 +61,7 @@ mindplot.MindmapDesigner = new Class({ this._registerMouseEvents(); // Register keyboard events ... - var keyboard = new mindplot.DesignerKeyboard(this); - keyboard.activate(); + mindplot.DesignerKeyboard.register(this); // To prevent the user from leaving the page with changes ... window.addEvent('beforeunload', function () { @@ -77,11 +76,16 @@ mindplot.MindmapDesigner = new Class({ var screenManager = workspace.getScreenManager(); // Initialize workspace event listeners. - screenManager.addEvent('drag', function(event) { + screenManager.addEvent('update', function() { + // Topic must be set to his original state. All editors must be closed. + var objects = this.getObjects(); + objects.forEach(function(object) { + object.closeEditors(); + }); + // Clean some selected nodes on event .. this._cleanScreen(); - }.bind(this)); // Deselect on click ... @@ -143,8 +147,17 @@ mindplot.MindmapDesigner = new Class({ var topics = this._topics; topics.push(topic); + // Add Topic events ... - this._layoutManager.registerListenersOnNode(topic); + if (!this._readOnly) { + // Add drag behaviour ... + this._layoutManager.registerListenersOnNode(topic); + + // If a node had gained focus, clean the rest of the nodes ... + topic.addEventListener('mousedown', function(event) { + this.onObjectFocusEvent(topic, event); + }.bind(this)); + } // Connect Topic ... var isConnected = model.isConnected(); @@ -168,20 +181,25 @@ mindplot.MindmapDesigner = new Class({ } return topic; - } - , + }, onObjectFocusEvent : function(currentObject, event) { - var objects = this.getObjects(); + // Close node editors .. + var topics = this._getTopics(); + topics.forEach(function(topic) { + topic.closeEditors(); + }); - // Disable all nodes on focus but not the current if Ctrl key isn't being pressed - if (!$defined(event) || (!event.ctrlKey && !event.metaKey)) { - objects.forEach(function(object) { + var objects = this.getObjects(); + objects.forEach(function(object) { + // Disable all nodes on focus but not the current if Ctrl key isn't being pressed + if (!$defined(event) || (!event.ctrlKey && !event.metaKey)) { if (object.isOnFocus() && object != currentObject) { object.setOnFocus(false); } - }); - } + } + }); + }, zoomOut : function() { @@ -246,8 +264,7 @@ mindplot.MindmapDesigner = new Class({ // Execute event ... this._actionDispatcher.addTopic(childModel, parentTopicId, true); - } - , + }, createSiblingForSelectedNode : function() { var nodes = this.getSelectedNodes(); @@ -299,8 +316,7 @@ mindplot.MindmapDesigner = new Class({ screen.addEvent('mousemove', this._relationshipMouseMoveFunction); screen.addEvent('click', this._relationshipMouseClickFunction); } - } - , + }, _relationshipMouseMove : function(event) { var screen = this._workspace.getScreenManager(); @@ -309,8 +325,7 @@ mindplot.MindmapDesigner = new Class({ event.preventDefault(); event.stop(); return false; - } - , + }, _relationshipMouseClick : function (event, fromNode) { var target = event.target; @@ -330,8 +345,7 @@ mindplot.MindmapDesigner = new Class({ event.preventDefault(); event.stop(); return false; - } - , + }, addRelationship : function(fromNode, toNode) { // Create a new topic model ... @@ -397,7 +411,7 @@ mindplot.MindmapDesigner = new Class({ // Place the focus on the Central Topic var centralTopic = this.getCentralTopic(); - this.goToNode.attempt(centralTopic, this); + this.goToNode(centralTopic); this._fireEvent("loadsuccess"); @@ -510,8 +524,7 @@ mindplot.MindmapDesigner = new Class({ createRelationship : function(model) { this._mindmap.addRelationship(model); return this._relationshipModelToRelationship(model); - } - , + }, removeRelationship : function(model) { this._mindmap.removeRelationship(model); @@ -522,8 +535,7 @@ mindplot.MindmapDesigner = new Class({ targetTopic.removeRelationship(relationship); this._workspace.removeChild(relationship); delete this._relationships[model.getId()]; - } - , + }, _buildRelationship : function (model) { var elem = this; @@ -574,8 +586,7 @@ mindplot.MindmapDesigner = new Class({ this._relationships[model.getId()] = relationLine; return relationLine; - } - , + }, _removeNode : function(node) { if (node.getTopicType() != mindplot.model.NodeModel.CENTRAL_TOPIC_TYPE) { @@ -598,8 +609,7 @@ mindplot.MindmapDesigner = new Class({ this.goToNode(parent); } } - } - , + }, deleteCurrentNode : function() { @@ -612,8 +622,7 @@ mindplot.MindmapDesigner = new Class({ this._actionDispatcher.deleteTopics(selectedObjects); } - } - , + }, setFont2SelectedNode : function(font) { var validSelectedObjects = this._getValidSelectedObjectsIds(); @@ -622,8 +631,7 @@ mindplot.MindmapDesigner = new Class({ this._actionDispatcher.changeFontFamilyToTopic(topicsIds, font); } - } - , + }, setStyle2SelectedNode : function() { var validSelectedObjects = this._getValidSelectedObjectsIds(); @@ -631,8 +639,7 @@ mindplot.MindmapDesigner = new Class({ if (topicsIds.length > 0) { this._actionDispatcher.changeFontStyleToTopic(topicsIds); } - } - , + }, setFontColor2SelectedNode : function(color) { var validSelectedObjects = this._getValidSelectedObjectsIds(); @@ -640,8 +647,7 @@ mindplot.MindmapDesigner = new Class({ if (topicsIds.length > 0) { this._actionDispatcher.changeFontColorToTopic(topicsIds, color); } - } - , + }, setBackColor2SelectedNode : function(color) { @@ -654,9 +660,7 @@ mindplot.MindmapDesigner = new Class({ if (topicsIds.length > 0) { this._actionDispatcher.changeBackgroundColorToTopic(topicsIds, color); } - } - , - + }, _getValidSelectedObjectsIds : function(validate, errorMsg) { var result = {"nodes":[],"relationshipLines":[]}; @@ -694,8 +698,7 @@ mindplot.MindmapDesigner = new Class({ } } return result; - } - , + }, setBorderColor2SelectedNode : function(color) { var validateFunc = function(topic) { @@ -708,8 +711,7 @@ mindplot.MindmapDesigner = new Class({ if (topicsIds.length > 0) { this._actionDispatcher.changeBorderColorToTopic(topicsIds, color); } - } - , + }, setFontSize2SelectedNode : function(size) { var validSelectedObjects = this._getValidSelectedObjectsIds(); @@ -731,9 +733,7 @@ mindplot.MindmapDesigner = new Class({ if (topicsIds.length > 0) { this._actionDispatcher.changeShapeToTopic(topicsIds, shape); } - } - , - + }, setWeight2SelectedNode : function() { var validSelectedObjects = this._getValidSelectedObjectsIds(); @@ -741,8 +741,7 @@ mindplot.MindmapDesigner = new Class({ if (topicsIds.length > 0) { this._actionDispatcher.changeFontWeightToTopic(topicsIds); } - } - , + }, addIconType2SelectedNode : function(iconType) { var validSelectedObjects = this._getValidSelectedObjectsIds(); @@ -750,8 +749,7 @@ mindplot.MindmapDesigner = new Class({ if (topicsIds.length > 0) { this._actionDispatcher.addIconToTopic(topicsIds[0], iconType); } - } - , + }, addLink2Node : function(url) { var validSelectedObjects = this._getValidSelectedObjectsIds(); diff --git a/mindplot/src/main/javascript/NodeGraph.js b/mindplot/src/main/javascript/NodeGraph.js index 62d88d63..77a9e3fe 100644 --- a/mindplot/src/main/javascript/NodeGraph.js +++ b/mindplot/src/main/javascript/NodeGraph.js @@ -17,13 +17,14 @@ */ mindplot.NodeGraph = new Class({ - initialize:function(nodeModel) { + initialize:function(nodeModel, options) { $assert(nodeModel, "model can not be null"); + + this._options = options; this._mouseEvents = true; this.setModel(nodeModel); this._onFocus = false; this._textEditor = new mindplot.TextEditor(this); - }, getType : function() { @@ -101,7 +102,7 @@ mindplot.NodeGraph = new Class({ this.setCursor('move'); // In any case, always try to hide the editor ... - this._textEditor.close(); + this.closeEditors(); }, isOnFocus : function() { @@ -109,6 +110,7 @@ mindplot.NodeGraph = new Class({ }, dispose : function(workspace) { + this.setOnFocus(false); workspace.removeChild(this); }, @@ -124,10 +126,18 @@ mindplot.NodeGraph = new Class({ getPosition : function() { var model = this.getModel(); return model.getPosition(); + }, + + showTextEditor : function(text) { + this._textEditor.show(text); + }, + + closeEditors : function() { + this._textEditor.close(true); } }); -mindplot.NodeGraph.create = function(nodeModel) { +mindplot.NodeGraph.create = function(nodeModel, options) { $assert(nodeModel, 'Model can not be null'); var type = nodeModel.getType(); @@ -135,10 +145,10 @@ mindplot.NodeGraph.create = function(nodeModel) { var result; if (type == mindplot.model.NodeModel.CENTRAL_TOPIC_TYPE) { - result = new mindplot.CentralTopic(nodeModel); + result = new mindplot.CentralTopic(nodeModel, options); } else if (type == mindplot.model.NodeModel.MAIN_TOPIC_TYPE) { - result = new mindplot.MainTopic(nodeModel); + result = new mindplot.MainTopic(nodeModel, options); } else { assert(false, "unsupported node type:" + type); } diff --git a/mindplot/src/main/javascript/TextEditor.js b/mindplot/src/main/javascript/TextEditor.js index a973c131..ea3dc496 100644 --- a/mindplot/src/main/javascript/TextEditor.js +++ b/mindplot/src/main/javascript/TextEditor.js @@ -38,7 +38,8 @@ mindplot.TextEditor = new Class({ var inputContainer = new Element('div'); inputContainer.setStyles({ border:"none", - overflow:"auto"}); + overflow:"auto" + }); inputContainer.inject(result); var inputText = new Element('input', {type:"text",tabindex:'-1', value:""}); @@ -241,10 +242,6 @@ mindplot.TextEditor = new Class({ $(this._divElem).setStyles({top : y + "px", left: x + "px"}); }, - _showTextElem : function(selectText) { - - }, - _changeCursor : function(inputElem, selectText) { // Select text if it's required ... if (inputElem.createTextRange) //ie @@ -267,7 +264,6 @@ mindplot.TextEditor = new Class({ close : function(update) { if (this.isVisible()) { - // Update changes ... if (!$defined(update) || update) { this._updateModel(); @@ -279,6 +275,8 @@ mindplot.TextEditor = new Class({ // Remove it form the screen ... this._divElem.dispose(); this._divElem = null; + + console.log("closing ...."); } } }); diff --git a/mindplot/src/main/javascript/Topic.js b/mindplot/src/main/javascript/Topic.js index 949bf972..fd2b2e64 100644 --- a/mindplot/src/main/javascript/Topic.js +++ b/mindplot/src/main/javascript/Topic.js @@ -51,14 +51,6 @@ mindplot.Topic = new Class({ this._textEditor.show(); event.stopPropagation(true); }.bind(this)); - - this.addEventListener('keydown', function(event) { - if (this.isOnFocus()) { - this._textEditor.show(); - - } - }.bind(this)); - }, setShapeType : function(type) { @@ -243,8 +235,7 @@ mindplot.Topic = new Class({ getTextShape : function() { if (!$defined(this._text)) { - var model = this.getModel(); - this._text = this._buildTextShape(); + this._text = this._buildTextShape(false); // Set Text ... var text = this.getText(); @@ -411,8 +402,6 @@ mindplot.Topic = new Class({ _buildTextShape : function(disableEventsListeners) { var result = new web2d.Text(); - var font = {}; - var family = this.getFontFamily(); var size = this.getFontSize(); var weight = this.getFontWeight(); @@ -572,16 +561,6 @@ mindplot.Topic = new Class({ _setText : function(text, updateModel) { var textShape = this.getTextShape(); textShape.setText(text); - /*var elem = this; - var executor = function(editor) - { - return function() - { - elem.updateNode(updateModel); - }; - }; - - setTimeout(executor(this), 0);*/ core.Executor.instance.delay(this.updateNode, 0, this, [updateModel]); if ($defined(updateModel) && updateModel) { diff --git a/mindplot/src/main/javascript/Workspace.js b/mindplot/src/main/javascript/Workspace.js index 98707115..15c0fc8a 100644 --- a/mindplot/src/main/javascript/Workspace.js +++ b/mindplot/src/main/javascript/Workspace.js @@ -39,9 +39,7 @@ mindplot.Workspace = new Class({ // Register drag events ... this._registerDragEvents(); - - this._eventsEnabled = true; - + this._eventsEnabled = true; }, _updateScreenManager: function() { @@ -127,6 +125,9 @@ mindplot.Workspace = new Class({ // Update screen. this._screenManager.setOffset(coordOriginX, coordOriginY); this._screenManager.setScale(zoom); + + // Some changes in the screen. Let's fire an update event... + this._screenManager.fireEvent('update', new Event()); }, getScreenManager: function() { @@ -150,10 +151,8 @@ mindplot.Workspace = new Class({ var screenManager = this._screenManager; var mWorkspace = this; var mouseDownListener = function(event) { - if (!$defined(workspace._mouseMoveListener)) - { - if (mWorkspace.isWorkspaceEventsEnabled()) - { + if (!$defined(workspace._mouseMoveListener)) { + if (mWorkspace.isWorkspaceEventsEnabled()) { mWorkspace.enableWorkspaceEvents(false); var mouseDownPosition = screenManager.getWorkspaceMousePosition(event); @@ -181,10 +180,10 @@ mindplot.Workspace = new Class({ event.preventDefault(); // Fire drag event ... - screenManager.fireEvent('drag',new Event()); + screenManager.fireEvent('update', new Event()); wasDragged = true; - + }.bind(this); screenManager.addEvent('mousemove', workspace._mouseMoveListener); @@ -202,9 +201,8 @@ mindplot.Workspace = new Class({ screenManager.setOffset(coordOrigin.x, coordOrigin.y); mWorkspace.enableWorkspaceEvents(true); - if(!wasDragged) - { - screenManager.fireEvent('click',new Event()); + if (!wasDragged) { + screenManager.fireEvent('click', new Event()); } }; screenManager.addEvent('mouseup', workspace._mouseUpListener); diff --git a/mindplot/src/main/javascript/layout/FreeMindLayoutManager.js b/mindplot/src/main/javascript/layout/FreeMindLayoutManager.js index 2afb3429..babe155c 100644 --- a/mindplot/src/main/javascript/layout/FreeMindLayoutManager.js +++ b/mindplot/src/main/javascript/layout/FreeMindLayoutManager.js @@ -52,7 +52,7 @@ mindplot.layout.FreeMindLayoutManager = mindplot.layout.BaseLayoutManager.extend var id = topic.getId(); // Register node listeners ... var designer = this.getDesigner(); - topic.addEventListener('onfocus', function(event) + topic.addEventListener('click', function(event) { designer.onObjectFocusEvent.attempt([topic, event], designer); }); @@ -63,12 +63,6 @@ mindplot.layout.FreeMindLayoutManager = mindplot.layout.BaseLayoutManager.extend topic.addEventListener("mousedown",this._reconnectMouseDownListener.bindWithEvent(this,[topic])); } - // Register editor events ... - if (!$defined(this.getDesigner()._readOnly)|| ($defined(this.getDesigner()._readOnly) && !this.getDesigner()._readOnly)) - { - this.getDesigner()._editor.listenEventOnNode(topic, 'dblclick', true); - } - }, _mousedownListener:function(event,topic){ diff --git a/mindplot/src/main/javascript/layout/OriginalLayoutManager.js b/mindplot/src/main/javascript/layout/OriginalLayoutManager.js index a947e448..03d49fb5 100644 --- a/mindplot/src/main/javascript/layout/OriginalLayoutManager.js +++ b/mindplot/src/main/javascript/layout/OriginalLayoutManager.js @@ -123,12 +123,6 @@ mindplot.layout.OriginalLayoutManager = new Class({ registerListenersOnNode : function(topic) { // Register node listeners ... - var designer = this.getDesigner(); - topic.addEventListener('click', function(event) { - designer.onObjectFocusEvent(topic, event); - }); - - // Add drag behaviour ... if (topic.getType() != mindplot.model.NodeModel.CENTRAL_TOPIC_TYPE) { // Central Topic doesn't support to be dragged diff --git a/wise-doc/bugs.txt b/wise-doc/bugs.txt index 032e0706..c7ba66e4 100644 --- a/wise-doc/bugs.txt +++ b/wise-doc/bugs.txt @@ -1,4 +1,6 @@ - Ver de que algunos de los colores de las paleta sean los utilizados. -- Que el click del workspace unseleccione los nodos. - Resize de la ventana ajuste el workspace - Fixiar metodo de drag del workspace... +- Cambiar el nodo on type +- f2 +- documentar el select and unselect all