- 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._listeners = {};
};
mindplot.DragManager.prototype.add = function(node)
@ -43,11 +44,11 @@ mindplot.DragManager.prototype.add = function(node)
// Register mouse move listener ...
var mouseMoveListener = dragManager._buildMouseMoveListener(workspace, dragNode, dragManager);
screen.addEventListener('mousemove', mouseMoveListener);
screen.addEvent('mousemove', mouseMoveListener);
// Register mouse up listeners ...
var mouseUpListener = dragManager._buildMouseUpListener(workspace, node, dragNode, dragManager);
screen.addEventListener('mouseup', mouseUpListener);
screen.addEvent('mouseup', mouseUpListener);
// Execute Listeners ..
var startDragListener = dragManager._listeners['startdragging'];
@ -57,8 +58,6 @@ mindplot.DragManager.prototype.add = function(node)
window.document.body.style.cursor = 'move';
}
};
dragManager._mouseDownListener = mouseDownListener;
node.addEventListener('mousedown', mouseDownListener);
};
@ -102,7 +101,8 @@ mindplot.DragManager.prototype._buildMouseMoveListener = function(workspace, dra
}
event.preventDefault();
}.bindWithEvent(this);
}.bind(this);
dragManager._mouseMoveListener = result;
return result;
};
@ -122,8 +122,8 @@ mindplot.DragManager.prototype._buildMouseUpListener = function(workspace, node,
}
// Remove all the events.
screen.removeEventListener('mousemove', dragManager._mouseMoveListener);
screen.removeEventListener('mouseup', dragManager._mouseUpListener);
screen.removeEvent('mousemove', dragManager._mouseMoveListener);
screen.removeEvent('mouseup', dragManager._mouseUpListener);
// Help GC
dragManager._mouseMoveListener = null;
@ -157,6 +157,4 @@ mindplot.DragManager.prototype._buildMouseUpListener = function(workspace, node,
mindplot.DragManager.prototype. addEventListener = function(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 ...
var commandContext = new mindplot.CommandContext(this);
this._actionDispatcher = new mindplot.BrixActionDispatcher(commandContext);
// this._actionDispatcher = new mindplot.LocalActionDispatcher(commandContext);
// this._actionDispatcher = new mindplot.BrixActionDispatcher(commandContext);
this._actionDispatcher = new mindplot.LocalActionDispatcher(commandContext);
this._actionDispatcher.addEvent("modelUpdate", function(event) {
this._fireEvent("modelUpdate", event);
@ -39,7 +39,6 @@ mindplot.MindmapDesigner = new Class({
// Init Screen manager..
var screenManager = new mindplot.ScreenManager(profile.width, profile.height, divElement);
this._workspace = new mindplot.Workspace(profile, screenManager, this._zoom);
//create editor
@ -77,35 +76,37 @@ mindplot.MindmapDesigner = new Class({
},
_registerEvents : function() {
var mindmapDesigner = this;
var workspace = this._workspace;
var screenManager = workspace.getScreenManager();
if (!$defined(this._viewMode) || ($defined(this._viewMode) && !this._viewMode)) {
// Initialize workspace event listeners.
// Create nodes on double click...
screenManager.addEventListener('click', function(event) {
if (workspace.isWorkspaceEventsEnabled()) {
mindmapDesigner.getEditor().isVisible();
mindmapDesigner.getEditor().lostFocus();
// @todo: Puaj hack...
mindmapDesigner._cleanScreen();
}
});
screenManager.addEvent('drag', function(event) {
// Clean some selected nodes on envet ..
this.getEditor().lostFocus();
this._cleanScreen();
}.bind(this));
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()) {
mindmapDesigner.getEditor().lostFocus();
this.getEditor().lostFocus();
// Get mouse position
var pos = screenManager.getWorkspaceMousePosition(event);
// Create a new topic model ...
var mindmap = mindmapDesigner.getMindmap();
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 = mindmapDesigner.getCentralTopic();
var centralTopic = this.getCentralTopic();
var centralTopicId = centralTopic.getId();
// Execute action ...
@ -159,7 +160,7 @@ mindplot.MindmapDesigner = new Class({
var selectableObjects = this.getSelectedObjects();
// 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) {
if (selectableObject.isOnFocus() && selectableObject != currentObject) {
selectableObject.setOnFocus(false);
@ -262,8 +263,9 @@ mindplot.MindmapDesigner = new Class({
this._creatingRelationship = true;
this._relationshipMouseMoveFunction = this._relationshipMouseMove.bindWithEvent(this);
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._relationship = null;
this._workspace.getScreenManager().removeEventListener('mousemove', this._relationshipMouseMoveFunction);
this._workspace.getScreenManager().removeEventListener('click', this._relationshipMouseClickFunction);
this._workspace.getScreenManager().removeEvent('mousemove', this._relationshipMouseMoveFunction);
this._workspace.getScreenManager().removeEvent('click', this._relationshipMouseClickFunction);
this._creatingRelationship = false;
this._workspace.enableWorkspaceEvents(true);
event.preventDefault();
@ -894,6 +896,8 @@ mindplot.MindmapDesigner = new Class({
this._goToChild(node);
}
}
} else {
this._goToNode(this._topics[0]);
}
break;
case 'left':
@ -911,6 +915,8 @@ mindplot.MindmapDesigner = new Class({
this._goToChild(node);
}
}
} else {
this._goToNode(this._topics[0]);
}
break;
case'up':
@ -920,6 +926,8 @@ mindplot.MindmapDesigner = new Class({
if (node.getTopicType() != mindplot.model.NodeModel.CENTRAL_TOPIC_TYPE) {
this._goToBrother(node, 'UP');
}
} else {
this._goToNode(this._topics[0]);
}
break;
case 'down':
@ -929,6 +937,8 @@ mindplot.MindmapDesigner = new Class({
if (node.getTopicType() != mindplot.model.NodeModel.CENTRAL_TOPIC_TYPE) {
this._goToBrother(node, 'DOWN');
}
} else {
this._goToNode(this._topics[0]);
}
break;
case 'f2':

View File

@ -21,6 +21,10 @@ mindplot.ScreenManager = new Class({
$assert(divElement, "can not be null");
this._divContainer = divElement;
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) {
@ -28,12 +32,30 @@ mindplot.ScreenManager = new Class({
this._workspaceScale = scale;
},
addEventListener : function(event, listener) {
$(this._divContainer).addEvent(event, listener);
addEvent : function(event, listener) {
if (event == 'click')
this._clickEvents.push(listener);
else
$(this._divContainer).addEvent(event, listener);
},
removeEventListener : function(event, listener) {
$(this._divContainer).removeEvent(event, listener);
removeEvent : function(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) {
@ -94,7 +116,7 @@ mindplot.ScreenManager = new Class({
},
getWorkspaceMousePosition : function(e) {
// Retrive current mouse position.
// Retrieve current mouse position.
var mousePosition = this._getMousePosition(e);
var x = mousePosition.x;
var y = mousePosition.y;

View File

@ -63,7 +63,6 @@ mindplot.Topic = new Class({
innerShape = this.getInnerShape();
//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'];
if ($defined(dispatcher)) {
@ -416,7 +415,7 @@ mindplot.Topic = new Class({
}
}
// Positionate node ...
// Position node ...
this._offset = this.getOffset();
var iconOffset = this.getIconOffset();
result.setPosition(iconOffset + this._offset, this._offset / 2);
@ -664,9 +663,6 @@ mindplot.Topic = new Class({
// Register listeners ...
this._registerDefaultListenersToElement(group, this);
// this._registerDefaultListenersToElement(innerShape, this);
// this._registerDefaultListenersToElement(textShape, this);
},
_registerDefaultListenersToElement : function(elem, topic) {
@ -1051,12 +1047,12 @@ mindplot.Topic = new Class({
targetTopic._appendChild(this);
this._parent = targetTopic;
// Update model ...
// Update model ...
var targetModel = targetTopic.getModel();
var childModel = this.getModel();
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]);
// Create a connection line ...

View File

@ -142,23 +142,25 @@ mindplot.Workspace = new Class({
},
dumpNativeChart: function() {
var workspace = this._workspace;
return workspace.dumpNativeChart();
return this._workspace.dumpNativeChart();
},
_registerDragEvents: function() {
var workspace = this._workspace;
var screenManager = this._screenManager;
this._dragging = true;
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);
var originalCoordOrigin = workspace.getCoordOrigin();
workspace.mouseMoveListener = function(event) {
var wasDragged = false;
workspace._mouseMoveListener = function(event) {
var currentMousePosition = screenManager.getWorkspaceMousePosition(event);
@ -177,30 +179,41 @@ mindplot.Workspace = new Class({
window.document.body.style.cursor = "move";
}
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 ...
workspace.mouseUpListener = function(event) {
workspace._mouseUpListener = function(event) {
screenManager.removeEventListener('mousemove', workspace.mouseMoveListener);
screenManager.removeEventListener('mouseup', workspace.mouseUpListener);
workspace.mouseUpListener = null;
workspace.mouseMoveListener = null;
screenManager.removeEvent('mousemove', workspace._mouseMoveListener);
screenManager.removeEvent('mouseup', workspace._mouseUpListener);
workspace._mouseUpListener = null;
workspace._mouseMoveListener = null;
window.document.body.style.cursor = 'default';
// Update screen manager offset.
var coordOrigin = workspace.getCoordOrigin();
screenManager.setOffset(coordOrigin.x, coordOrigin.y);
mWorkspace.enableWorkspaceEvents(true);
},
screenManager.addEventListener('mouseup', workspace.mouseUpListener);
if(!wasDragged)
{
screenManager.fireEvent('click',new Event());
}
};
screenManager.addEvent('mouseup', workspace._mouseUpListener);
}
} 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) {
// Register node listeners ...
var designer = this.getDesigner();
topic.addEventListener('onfocus', function(event) {
topic.addEventListener('click', function(event) {
designer.onObjectFocusEvent(topic, event);
// Prevent click on the topics being propagated ...
event.stopPropagation();
});
// 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.
- 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]>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<![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 -->
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<title>WiseMapping - Editor </title>