- Click on the desktop unselect node.

- Drad on workspace clean editor events.
This commit is contained in:
Paulo Veiga 2011-08-13 12:33:37 -03:00
parent 96b40058cc
commit 4e0becef47
8 changed files with 108 additions and 66 deletions

View File

@ -20,6 +20,7 @@ mindplot.DragManager = function(workspace)
{ {
this._workspace = workspace; this._workspace = workspace;
this._listeners = {}; this._listeners = {};
}; };
mindplot.DragManager.prototype.add = function(node) mindplot.DragManager.prototype.add = function(node)
@ -43,11 +44,11 @@ mindplot.DragManager.prototype.add = function(node)
// Register mouse move listener ... // Register mouse move listener ...
var mouseMoveListener = dragManager._buildMouseMoveListener(workspace, dragNode, dragManager); var mouseMoveListener = dragManager._buildMouseMoveListener(workspace, dragNode, dragManager);
screen.addEventListener('mousemove', mouseMoveListener); screen.addEvent('mousemove', mouseMoveListener);
// Register mouse up listeners ... // Register mouse up listeners ...
var mouseUpListener = dragManager._buildMouseUpListener(workspace, node, dragNode, dragManager); var mouseUpListener = dragManager._buildMouseUpListener(workspace, node, dragNode, dragManager);
screen.addEventListener('mouseup', mouseUpListener); screen.addEvent('mouseup', mouseUpListener);
// Execute Listeners .. // Execute Listeners ..
var startDragListener = dragManager._listeners['startdragging']; var startDragListener = dragManager._listeners['startdragging'];
@ -57,8 +58,6 @@ mindplot.DragManager.prototype.add = function(node)
window.document.body.style.cursor = 'move'; window.document.body.style.cursor = 'move';
} }
}; };
dragManager._mouseDownListener = mouseDownListener;
node.addEventListener('mousedown', mouseDownListener); node.addEventListener('mousedown', mouseDownListener);
}; };
@ -102,7 +101,8 @@ mindplot.DragManager.prototype._buildMouseMoveListener = function(workspace, dra
} }
event.preventDefault(); event.preventDefault();
}.bindWithEvent(this);
}.bind(this);
dragManager._mouseMoveListener = result; dragManager._mouseMoveListener = result;
return result; return result;
}; };
@ -122,8 +122,8 @@ mindplot.DragManager.prototype._buildMouseUpListener = function(workspace, node,
} }
// Remove all the events. // Remove all the events.
screen.removeEventListener('mousemove', dragManager._mouseMoveListener); screen.removeEvent('mousemove', dragManager._mouseMoveListener);
screen.removeEventListener('mouseup', dragManager._mouseUpListener); screen.removeEvent('mouseup', dragManager._mouseUpListener);
// Help GC // Help GC
dragManager._mouseMoveListener = null; dragManager._mouseMoveListener = null;
@ -158,5 +158,3 @@ mindplot.DragManager.prototype. addEventListener = function(type, listener)
{ {
this._listeners[type] = listener; this._listeners[type] = listener;
}; };
mindplot.DragManager.DRAG_PRECISION_IN_SEG = 100;

View File

@ -24,8 +24,8 @@ mindplot.MindmapDesigner = new Class({
// Dispatcher manager ... // Dispatcher manager ...
var commandContext = new mindplot.CommandContext(this); var commandContext = new mindplot.CommandContext(this);
this._actionDispatcher = new mindplot.BrixActionDispatcher(commandContext); // this._actionDispatcher = new mindplot.BrixActionDispatcher(commandContext);
// this._actionDispatcher = new mindplot.LocalActionDispatcher(commandContext); this._actionDispatcher = new mindplot.LocalActionDispatcher(commandContext);
this._actionDispatcher.addEvent("modelUpdate", function(event) { this._actionDispatcher.addEvent("modelUpdate", function(event) {
this._fireEvent("modelUpdate", event); this._fireEvent("modelUpdate", event);
@ -39,7 +39,6 @@ mindplot.MindmapDesigner = new Class({
// Init Screen manager.. // Init Screen manager..
var screenManager = new mindplot.ScreenManager(profile.width, profile.height, divElement); var screenManager = new mindplot.ScreenManager(profile.width, profile.height, divElement);
this._workspace = new mindplot.Workspace(profile, screenManager, this._zoom); this._workspace = new mindplot.Workspace(profile, screenManager, this._zoom);
//create editor //create editor
@ -77,35 +76,37 @@ mindplot.MindmapDesigner = new Class({
}, },
_registerEvents : function() { _registerEvents : function() {
var mindmapDesigner = this;
var workspace = this._workspace; var workspace = this._workspace;
var screenManager = workspace.getScreenManager(); var screenManager = workspace.getScreenManager();
if (!$defined(this._viewMode) || ($defined(this._viewMode) && !this._viewMode)) { if (!$defined(this._viewMode) || ($defined(this._viewMode) && !this._viewMode)) {
// Initialize workspace event listeners. // Initialize workspace event listeners.
// Create nodes on double click... screenManager.addEvent('drag', function(event) {
screenManager.addEventListener('click', function(event) { // Clean some selected nodes on envet ..
if (workspace.isWorkspaceEventsEnabled()) { this.getEditor().lostFocus();
mindmapDesigner.getEditor().isVisible(); this._cleanScreen();
mindmapDesigner.getEditor().lostFocus(); }.bind(this));
// @todo: Puaj hack...
mindmapDesigner._cleanScreen();
}
});
screenManager.addEventListener('dblclick', function(event) { // 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()) { if (workspace.isWorkspaceEventsEnabled()) {
mindmapDesigner.getEditor().lostFocus(); this.getEditor().lostFocus();
// Get mouse position // Get mouse position
var pos = screenManager.getWorkspaceMousePosition(event); var pos = screenManager.getWorkspaceMousePosition(event);
// Create a new topic model ... // Create a new topic model ...
var mindmap = mindmapDesigner.getMindmap(); var mindmap = this.getMindmap();
var model = mindmap.createNode(mindplot.model.NodeModel.MAIN_TOPIC_TYPE); var model = mindmap.createNode(mindplot.model.NodeModel.MAIN_TOPIC_TYPE);
model.setPosition(pos.x, pos.y); model.setPosition(pos.x, pos.y);
// Get central topic ... // Get central topic ...
var centralTopic = mindmapDesigner.getCentralTopic(); var centralTopic = this.getCentralTopic();
var centralTopicId = centralTopic.getId(); var centralTopicId = centralTopic.getId();
// Execute action ... // Execute action ...
@ -159,7 +160,7 @@ mindplot.MindmapDesigner = new Class({
var selectableObjects = this.getSelectedObjects(); var selectableObjects = this.getSelectedObjects();
// Disable all nodes on focus but not the current if Ctrl key isn't being pressed // Disable all nodes on focus but not the current if Ctrl key isn't being pressed
if (!$defined(event) || (event.ctrlKey == false && event.metaKey == false)) { if (!$defined(event) || (!event.ctrlKey && !event.metaKey)) {
selectableObjects.forEach(function(selectableObject) { selectableObjects.forEach(function(selectableObject) {
if (selectableObject.isOnFocus() && selectableObject != currentObject) { if (selectableObject.isOnFocus() && selectableObject != currentObject) {
selectableObject.setOnFocus(false); selectableObject.setOnFocus(false);
@ -262,8 +263,9 @@ mindplot.MindmapDesigner = new Class({
this._creatingRelationship = true; this._creatingRelationship = true;
this._relationshipMouseMoveFunction = this._relationshipMouseMove.bindWithEvent(this); this._relationshipMouseMoveFunction = this._relationshipMouseMove.bindWithEvent(this);
this._relationshipMouseClickFunction = this._relationshipMouseClick.bindWithEvent(this, selectedTopics[0]); this._relationshipMouseClickFunction = this._relationshipMouseClick.bindWithEvent(this, selectedTopics[0]);
this._workspace.getScreenManager().addEventListener('mousemove', this._relationshipMouseMoveFunction);
this._workspace.getScreenManager().addEventListener('click', this._relationshipMouseClickFunction); screen.addEvent('mousemove', this._relationshipMouseMoveFunction);
screen.addEvent('click', this._relationshipMouseClickFunction);
} }
}, },
@ -287,8 +289,8 @@ mindplot.MindmapDesigner = new Class({
} }
this._workspace.removeChild(this._relationship); this._workspace.removeChild(this._relationship);
this._relationship = null; this._relationship = null;
this._workspace.getScreenManager().removeEventListener('mousemove', this._relationshipMouseMoveFunction); this._workspace.getScreenManager().removeEvent('mousemove', this._relationshipMouseMoveFunction);
this._workspace.getScreenManager().removeEventListener('click', this._relationshipMouseClickFunction); this._workspace.getScreenManager().removeEvent('click', this._relationshipMouseClickFunction);
this._creatingRelationship = false; this._creatingRelationship = false;
this._workspace.enableWorkspaceEvents(true); this._workspace.enableWorkspaceEvents(true);
event.preventDefault(); event.preventDefault();
@ -894,6 +896,8 @@ mindplot.MindmapDesigner = new Class({
this._goToChild(node); this._goToChild(node);
} }
} }
} else {
this._goToNode(this._topics[0]);
} }
break; break;
case 'left': case 'left':
@ -911,6 +915,8 @@ mindplot.MindmapDesigner = new Class({
this._goToChild(node); this._goToChild(node);
} }
} }
} else {
this._goToNode(this._topics[0]);
} }
break; break;
case'up': case'up':
@ -920,6 +926,8 @@ mindplot.MindmapDesigner = new Class({
if (node.getTopicType() != mindplot.model.NodeModel.CENTRAL_TOPIC_TYPE) { if (node.getTopicType() != mindplot.model.NodeModel.CENTRAL_TOPIC_TYPE) {
this._goToBrother(node, 'UP'); this._goToBrother(node, 'UP');
} }
} else {
this._goToNode(this._topics[0]);
} }
break; break;
case 'down': case 'down':
@ -929,6 +937,8 @@ mindplot.MindmapDesigner = new Class({
if (node.getTopicType() != mindplot.model.NodeModel.CENTRAL_TOPIC_TYPE) { if (node.getTopicType() != mindplot.model.NodeModel.CENTRAL_TOPIC_TYPE) {
this._goToBrother(node, 'DOWN'); this._goToBrother(node, 'DOWN');
} }
} else {
this._goToNode(this._topics[0]);
} }
break; break;
case 'f2': case 'f2':

View File

@ -21,6 +21,10 @@ mindplot.ScreenManager = new Class({
$assert(divElement, "can not be null"); $assert(divElement, "can not be null");
this._divContainer = divElement; this._divContainer = divElement;
this._offset = {x:0,y:0}; this._offset = {x:0,y:0};
// Ignore default click event propagation. Prevent 'click' event on drad.
this._clickEvents = [];
this._divContainer.addEvent('click',function(event){event.stopPropagation()});
}, },
setScale : function(scale) { setScale : function(scale) {
@ -28,12 +32,30 @@ mindplot.ScreenManager = new Class({
this._workspaceScale = scale; this._workspaceScale = scale;
}, },
addEventListener : function(event, listener) { addEvent : function(event, listener) {
$(this._divContainer).addEvent(event, listener); if (event == 'click')
this._clickEvents.push(listener);
else
$(this._divContainer).addEvent(event, listener);
}, },
removeEventListener : function(event, listener) { removeEvent : function(event, listener) {
$(this._divContainer).removeEvent(event, listener); if (event == 'click')
this._clickEvents.remove(listener);
else
$(this._divContainer).removeEvent(event, listener);
},
fireEvent : function(type, event) {
if (type == 'click') {
this._clickEvents.forEach(function(listener)
{
listener(type,event);
});
}
else {
$(this._divContainer).fireEvent(type, event);
}
}, },
getWorkspaceElementPosition : function(e) { getWorkspaceElementPosition : function(e) {
@ -94,7 +116,7 @@ mindplot.ScreenManager = new Class({
}, },
getWorkspaceMousePosition : function(e) { getWorkspaceMousePosition : function(e) {
// Retrive current mouse position. // Retrieve current mouse position.
var mousePosition = this._getMousePosition(e); var mousePosition = this._getMousePosition(e);
var x = mousePosition.x; var x = mousePosition.x;
var y = mousePosition.y; var y = mousePosition.y;

View File

@ -63,7 +63,6 @@ mindplot.Topic = new Class({
innerShape = this.getInnerShape(); innerShape = this.getInnerShape();
//Let's register all the events. The first one is the default one. The others will be copied. //Let's register all the events. The first one is the default one. The others will be copied.
//this._registerDefaultListenersToElement(innerShape, this);
var dispatcher = dispatcherByEventType['mousedown']; var dispatcher = dispatcherByEventType['mousedown'];
if ($defined(dispatcher)) { if ($defined(dispatcher)) {
@ -416,7 +415,7 @@ mindplot.Topic = new Class({
} }
} }
// Positionate node ... // Position node ...
this._offset = this.getOffset(); this._offset = this.getOffset();
var iconOffset = this.getIconOffset(); var iconOffset = this.getIconOffset();
result.setPosition(iconOffset + this._offset, this._offset / 2); result.setPosition(iconOffset + this._offset, this._offset / 2);
@ -664,9 +663,6 @@ mindplot.Topic = new Class({
// Register listeners ... // Register listeners ...
this._registerDefaultListenersToElement(group, this); this._registerDefaultListenersToElement(group, this);
// this._registerDefaultListenersToElement(innerShape, this);
// this._registerDefaultListenersToElement(textShape, this);
}, },
_registerDefaultListenersToElement : function(elem, topic) { _registerDefaultListenersToElement : function(elem, topic) {
@ -1051,12 +1047,12 @@ mindplot.Topic = new Class({
targetTopic._appendChild(this); targetTopic._appendChild(this);
this._parent = targetTopic; this._parent = targetTopic;
// Update model ... // Update model ...
var targetModel = targetTopic.getModel(); var targetModel = targetTopic.getModel();
var childModel = this.getModel(); var childModel = this.getModel();
childModel.connectTo(targetModel); childModel.connectTo(targetModel);
// Update topic position based on the state ... // Update topic position based on the state ...
mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.NodeConnectEvent, [targetTopic, this]); mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.NodeConnectEvent, [targetTopic, this]);
// Create a connection line ... // Create a connection line ...

View File

@ -142,23 +142,25 @@ mindplot.Workspace = new Class({
}, },
dumpNativeChart: function() { dumpNativeChart: function() {
var workspace = this._workspace; return this._workspace.dumpNativeChart();
return workspace.dumpNativeChart();
}, },
_registerDragEvents: function() { _registerDragEvents: function() {
var workspace = this._workspace; var workspace = this._workspace;
var screenManager = this._screenManager; var screenManager = this._screenManager;
this._dragging = true;
var mWorkspace = this; var mWorkspace = this;
var mouseDownListener = function(event) { var mouseDownListener = function(event) {
if (!$defined(workspace.mouseMoveListener)) { if (!$defined(workspace._mouseMoveListener))
if (mWorkspace.isWorkspaceEventsEnabled()) { {
if (mWorkspace.isWorkspaceEventsEnabled())
{
mWorkspace.enableWorkspaceEvents(false); mWorkspace.enableWorkspaceEvents(false);
var mouseDownPosition = screenManager.getWorkspaceMousePosition(event); var mouseDownPosition = screenManager.getWorkspaceMousePosition(event);
var originalCoordOrigin = workspace.getCoordOrigin(); var originalCoordOrigin = workspace.getCoordOrigin();
workspace.mouseMoveListener = function(event) { var wasDragged = false;
workspace._mouseMoveListener = function(event) {
var currentMousePosition = screenManager.getWorkspaceMousePosition(event); var currentMousePosition = screenManager.getWorkspaceMousePosition(event);
@ -177,30 +179,41 @@ mindplot.Workspace = new Class({
window.document.body.style.cursor = "move"; window.document.body.style.cursor = "move";
} }
event.preventDefault(); event.preventDefault();
}.bindWithEvent(this);
screenManager.addEventListener('mousemove', workspace.mouseMoveListener); // Fire drag event ...
screenManager.fireEvent('drag',new Event());
wasDragged = true;
}.bind(this);
screenManager.addEvent('mousemove', workspace._mouseMoveListener);
// Register mouse up listeners ... // Register mouse up listeners ...
workspace.mouseUpListener = function(event) { workspace._mouseUpListener = function(event) {
screenManager.removeEventListener('mousemove', workspace.mouseMoveListener); screenManager.removeEvent('mousemove', workspace._mouseMoveListener);
screenManager.removeEventListener('mouseup', workspace.mouseUpListener); screenManager.removeEvent('mouseup', workspace._mouseUpListener);
workspace.mouseUpListener = null; workspace._mouseUpListener = null;
workspace.mouseMoveListener = null; workspace._mouseMoveListener = null;
window.document.body.style.cursor = 'default'; window.document.body.style.cursor = 'default';
// Update screen manager offset. // Update screen manager offset.
var coordOrigin = workspace.getCoordOrigin(); var coordOrigin = workspace.getCoordOrigin();
screenManager.setOffset(coordOrigin.x, coordOrigin.y); screenManager.setOffset(coordOrigin.x, coordOrigin.y);
mWorkspace.enableWorkspaceEvents(true); mWorkspace.enableWorkspaceEvents(true);
},
screenManager.addEventListener('mouseup', workspace.mouseUpListener); if(!wasDragged)
{
screenManager.fireEvent('click',new Event());
}
};
screenManager.addEvent('mouseup', workspace._mouseUpListener);
} }
} else { } else {
workspace.mouseUpListener(); workspace._mouseUpListener();
} }
}; };
screenManager.addEventListener('mousedown', mouseDownListener); screenManager.addEvent('mousedown', mouseDownListener);
} }
}); });

View File

@ -124,8 +124,11 @@ mindplot.layout.OriginalLayoutManager = new Class({
registerListenersOnNode : function(topic) { registerListenersOnNode : function(topic) {
// Register node listeners ... // Register node listeners ...
var designer = this.getDesigner(); var designer = this.getDesigner();
topic.addEventListener('onfocus', function(event) { topic.addEventListener('click', function(event) {
designer.onObjectFocusEvent(topic, event); designer.onObjectFocusEvent(topic, event);
// Prevent click on the topics being propagated ...
event.stopPropagation();
}); });
// Add drag behaviour ... // Add drag behaviour ...

View File

@ -1,4 +1,4 @@
- Select and unselect de un nodo.
- metaKey for mac
- Si todos los nodos tienen las mismas propiedades, las opciones deberian aparecer marcadas.
- Ver de que algunos de los colores de las paleta sean los utilizados. - 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...

View File

@ -5,7 +5,7 @@
<!--[if lt IE 9]> <!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta http-equiv="X-UA-Compatible" content="chrome=1">
<![endif]--> <![endif]-->
<script type="text/javascript" src="http://docs.google.com/brix/static/api/js/jsapi.nocache.js"></script> <!--<script type="text/javascript" src="http://docs.google.com/brix/static/api/js/jsapi.nocache.js"></script>-->
<!-- Internet Explorer 8 Hack --> <!-- Internet Explorer 8 Hack -->
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<title>WiseMapping - Editor </title> <title>WiseMapping - Editor </title>