mirror of https://gitee.com/bigwinds/arangodb
436 lines
12 KiB
JavaScript
436 lines
12 KiB
JavaScript
/*jslint indent: 2, nomen: true, maxlen: 100, white: true plusplus: true */
|
|
/*global $, _, d3*/
|
|
/*global document, window*/
|
|
/*global modalDialogHelper, uiComponentsHelper */
|
|
/*global EventDispatcher*/
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
/// @brief Graph functionality
|
|
///
|
|
/// @file
|
|
///
|
|
/// DISCLAIMER
|
|
///
|
|
/// Copyright 2010-2012 triagens GmbH, Cologne, Germany
|
|
///
|
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|
/// you may not use this file except in compliance with the License.
|
|
/// You may obtain a copy of the License at
|
|
///
|
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
|
///
|
|
/// 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 holder is triAGENS GmbH, Cologne, Germany
|
|
///
|
|
/// @author Michael Hackstein
|
|
/// @author Copyright 2011-2013, triAGENS GmbH, Cologne, Germany
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
/* Archive
|
|
function EventDispatcherControls(list, cursorIconBox, nodeShaper, edgeShaper, dispatcherConfig) {
|
|
*/
|
|
function EventDispatcherControls(list, nodeShaper, edgeShaper, dispatcherConfig) {
|
|
"use strict";
|
|
|
|
if (list === undefined) {
|
|
throw "A list element has to be given.";
|
|
}
|
|
/*
|
|
if (cursorIconBox === undefined) {
|
|
throw "The cursor decoration box has to be given.";
|
|
}
|
|
*/
|
|
if (nodeShaper === undefined) {
|
|
throw "The NodeShaper has to be given.";
|
|
}
|
|
if (edgeShaper === undefined) {
|
|
throw "The EdgeShaper has to be given.";
|
|
}
|
|
|
|
var self = this,
|
|
/* archive
|
|
firstButton = true,
|
|
currentListGroup,
|
|
placeHolderBtn = uiComponentsHelper.createIconButton(
|
|
"none",
|
|
""
|
|
),
|
|
icons = {
|
|
expand: "plus",
|
|
add: "plus-sign",
|
|
trash: "trash",
|
|
drag: "move",
|
|
edge: "resize-horizontal",
|
|
edit: "pencil"
|
|
},
|
|
*/
|
|
icons = {
|
|
expand: "expand",
|
|
add: "add",
|
|
trash: "trash",
|
|
drag: "drag",
|
|
edge: "connect",
|
|
edit: "edit",
|
|
view: "view"
|
|
},
|
|
baseClass = "event",
|
|
dispatcher = new EventDispatcher(nodeShaper, edgeShaper, dispatcherConfig),
|
|
|
|
setCursorIcon = function(icon) {
|
|
//cursorIconBox.className = "mousepointer icon-" + icon;
|
|
},
|
|
|
|
appendToList = function(button) {
|
|
list.appendChild(button);
|
|
/* archive
|
|
if (firstButton) {
|
|
currentListGroup = document.createElement("div");
|
|
currentListGroup.className = "btn btn-group";
|
|
currentListGroup.appendChild(button);
|
|
currentListGroup.appendChild(placeHolderBtn);
|
|
firstButton = false;
|
|
list.appendChild(currentListGroup);
|
|
} else {
|
|
currentListGroup.removeChild(placeHolderBtn);
|
|
currentListGroup.appendChild(button);
|
|
firstButton = true;
|
|
}
|
|
*/
|
|
},
|
|
createButton = function(title, callback) {
|
|
uiComponentsHelper.createButton(
|
|
baseClass,
|
|
list,
|
|
title,
|
|
"control_event_" + title,
|
|
callback
|
|
);
|
|
},
|
|
createIcon = function(icon, title, callback) {
|
|
var btn = uiComponentsHelper.createIconButton(
|
|
icon,
|
|
"control_event_" + title,
|
|
callback
|
|
);
|
|
appendToList(btn);
|
|
},
|
|
rebindNodes = function(actions) {
|
|
dispatcher.rebind("nodes", actions);
|
|
},
|
|
rebindEdges = function(actions) {
|
|
dispatcher.rebind("edges", actions);
|
|
},
|
|
rebindSVG = function(actions) {
|
|
dispatcher.rebind("svg", actions);
|
|
},
|
|
|
|
getCursorPosition = function (ev) {
|
|
var e = ev || window.event,
|
|
res = {};
|
|
res.x = e.clientX;
|
|
res.y = e.clientY;
|
|
res.x += document.body.scrollLeft;
|
|
res.y += document.body.scrollTop;
|
|
return res;
|
|
},
|
|
|
|
getCursorPositionInSVG = function (ev) {
|
|
var pos = getCursorPosition(ev);
|
|
pos.x -= $('svg').offset().left;
|
|
pos.y -= $('svg').offset().top;
|
|
return pos;
|
|
};
|
|
/* Archive
|
|
moveCursorBox = function(ev) {
|
|
var pos = getCursorPosition(ev);
|
|
pos.x += 7;
|
|
pos.y += 12;
|
|
cursorIconBox.style.position = "absolute";
|
|
cursorIconBox.style.left = pos.x + 'px';
|
|
cursorIconBox.style.top = pos.y + 'px';
|
|
};
|
|
*/
|
|
/* Archive
|
|
dispatcher.fixSVG("mousemove", moveCursorBox);
|
|
dispatcher.fixSVG("mouseout", function() {
|
|
cursorIconBox.style.display = "none";
|
|
});
|
|
dispatcher.fixSVG("mouseover", function() {
|
|
cursorIconBox.style.display = "block";
|
|
});
|
|
*/
|
|
/*******************************************
|
|
* Raw rebind objects
|
|
*
|
|
*******************************************/
|
|
|
|
this.dragRebinds = function() {
|
|
return {
|
|
nodes: {
|
|
drag: dispatcher.events.DRAG
|
|
}
|
|
};
|
|
};
|
|
|
|
this.newNodeRebinds = function() {
|
|
var prefix = "control_event_new_node",
|
|
idprefix = prefix + "_",
|
|
createCallback = function(n) {
|
|
modalDialogHelper.createModalCreateDialog(
|
|
"Create New Node",
|
|
idprefix,
|
|
{},
|
|
function(data) {
|
|
dispatcher.events.CREATENODE(data, function(node) {
|
|
$("#" + idprefix + "modal").modal('hide');
|
|
console.log(node);
|
|
nodeShaper.reshapeNodes();
|
|
})();
|
|
}
|
|
);
|
|
};
|
|
return {
|
|
svg: {
|
|
click: createCallback
|
|
}
|
|
};
|
|
};
|
|
|
|
this.viewRebinds = function() {
|
|
var prefix = "control_event_view",
|
|
idprefix = prefix + "_",
|
|
nodeCallback = function(n) {
|
|
modalDialogHelper.createModalViewDialog(
|
|
"View Node " + n._id,
|
|
"control_event_node_view_",
|
|
n._data,
|
|
function() {
|
|
modalDialogHelper.createModalEditDialog(
|
|
"Edit Node " + n._id,
|
|
"control_event_node_edit_",
|
|
n._data,
|
|
function(newData) {
|
|
dispatcher.events.PATCHNODE(n, newData, function() {
|
|
$("#control_event_node_edit_modal").modal('hide');
|
|
})();
|
|
}
|
|
);
|
|
}
|
|
);
|
|
},
|
|
edgeCallback = function(e) {
|
|
modalDialogHelper.createModalViewDialog(
|
|
"View Edge " + e._id,
|
|
"control_event_edge_view_",
|
|
e._data,
|
|
function() {
|
|
modalDialogHelper.createModalEditDialog(
|
|
"Edit Edge " + e._id,
|
|
"control_event_edge_edit_",
|
|
e._data,
|
|
function(newData) {
|
|
dispatcher.events.PATCHEDGE(e, newData, function() {
|
|
$("#control_event_edge_edit_modal").modal('hide');
|
|
})();
|
|
}
|
|
);
|
|
}
|
|
);
|
|
};
|
|
return {
|
|
nodes: {
|
|
click: nodeCallback
|
|
},
|
|
edges: {
|
|
click: edgeCallback
|
|
}
|
|
};
|
|
};
|
|
|
|
this.connectNodesRebinds = function() {
|
|
var prefix = "control_event_connect",
|
|
idprefix = prefix + "_",
|
|
nodesDown = dispatcher.events.STARTCREATEEDGE(function(startNode, ev) {
|
|
var pos = getCursorPositionInSVG(ev),
|
|
moveCB = edgeShaper.addAnEdgeFollowingTheCursor(pos.x, pos.y);
|
|
dispatcher.bind("svg", "mousemove", function(ev) {
|
|
var pos = getCursorPositionInSVG(ev);
|
|
moveCB(pos.x, pos.y);
|
|
});
|
|
}),
|
|
nodesUp = dispatcher.events.FINISHCREATEEDGE(function(edge){
|
|
edgeShaper.removeCursorFollowingEdge();
|
|
dispatcher.bind("svg", "mousemove", function(){});
|
|
}),
|
|
svgUp = function() {
|
|
dispatcher.events.CANCELCREATEEDGE();
|
|
edgeShaper.removeCursorFollowingEdge();
|
|
};
|
|
return {
|
|
nodes: {
|
|
mousedown: nodesDown,
|
|
mouseup: nodesUp
|
|
},
|
|
svg: {
|
|
mouseup: svgUp
|
|
}
|
|
};
|
|
};
|
|
|
|
this.editRebinds = function() {
|
|
var prefix = "control_event_edit",
|
|
idprefix = prefix + "_",
|
|
nodeCallback = function(n) {
|
|
modalDialogHelper.createModalEditDialog(
|
|
"Edit Node " + n._id,
|
|
"control_event_node_edit_",
|
|
n._data,
|
|
function(newData) {
|
|
dispatcher.events.PATCHNODE(n, newData, function() {
|
|
$("#control_event_node_edit_modal").modal('hide');
|
|
})();
|
|
}
|
|
);
|
|
},
|
|
edgeCallback = function(e) {
|
|
modalDialogHelper.createModalEditDialog(
|
|
"Edit Edge " + e._id,
|
|
"control_event_edge_edit_",
|
|
e._data,
|
|
function(newData) {
|
|
dispatcher.events.PATCHEDGE(e, newData, function() {
|
|
$("#control_event_edge_edit_modal").modal('hide');
|
|
})();
|
|
}
|
|
);
|
|
};
|
|
return {
|
|
nodes: {
|
|
click: nodeCallback
|
|
},
|
|
edges: {
|
|
click: edgeCallback
|
|
}
|
|
};
|
|
};
|
|
|
|
this.expandRebinds = function() {
|
|
return {
|
|
nodes: {
|
|
click: dispatcher.events.EXPAND
|
|
}
|
|
};
|
|
};
|
|
|
|
this.deleteRebinds = function() {
|
|
return {
|
|
nodes: {
|
|
click: dispatcher.events.DELETENODE(
|
|
function() {}
|
|
)
|
|
},
|
|
edges: {
|
|
click: dispatcher.events.DELETEEDGE(
|
|
function() {}
|
|
)
|
|
}
|
|
};
|
|
};
|
|
|
|
this.rebindAll = function(obj) {
|
|
rebindNodes(obj.nodes);
|
|
rebindEdges(obj.edges);
|
|
rebindSVG(obj.svg);
|
|
};
|
|
|
|
/*******************************************
|
|
* Functions to add controls
|
|
*
|
|
*******************************************/
|
|
|
|
|
|
this.addControlNewNode = function() {
|
|
var icon = icons.add,
|
|
callback = function() {
|
|
setCursorIcon(icon);
|
|
self.rebindAll(self.newNodeRebinds());
|
|
};
|
|
createIcon(icon, "new_node", callback);
|
|
};
|
|
|
|
this.addControlView = function() {
|
|
var icon = icons.view,
|
|
callback = function() {
|
|
setCursorIcon(icon);
|
|
self.rebindAll(self.viewRebinds());
|
|
};
|
|
createIcon(icon, "view", callback);
|
|
};
|
|
|
|
this.addControlDrag = function() {
|
|
var prefix = "control_event_drag",
|
|
idprefix = prefix + "_",
|
|
icon = icons.drag,
|
|
callback = function() {
|
|
setCursorIcon(icon);
|
|
self.rebindAll(self.dragRebinds());
|
|
};
|
|
createIcon(icon, "drag", callback);
|
|
};
|
|
|
|
this.addControlEdit = function() {
|
|
var icon = icons.edit,
|
|
callback = function() {
|
|
setCursorIcon(icon);
|
|
self.rebindAll(self.editRebinds());
|
|
};
|
|
createIcon(icon, "edit", callback);
|
|
};
|
|
|
|
this.addControlExpand = function() {
|
|
var icon = icons.expand,
|
|
callback = function() {
|
|
setCursorIcon(icon);
|
|
self.rebindAll(self.expandRebinds());
|
|
};
|
|
createIcon(icon, "expand", callback);
|
|
};
|
|
|
|
this.addControlDelete = function() {
|
|
var icon = icons.trash,
|
|
callback = function() {
|
|
setCursorIcon(icon);
|
|
rebindNodes({click: dispatcher.events.DELETENODE(function() {
|
|
|
|
})});
|
|
rebindEdges({click: dispatcher.events.DELETEEDGE(function() {
|
|
|
|
})});
|
|
rebindSVG();
|
|
};
|
|
createIcon(icon, "delete", callback);
|
|
};
|
|
|
|
this.addControlConnect = function() {
|
|
var icon = icons.edge,
|
|
callback = function() {
|
|
setCursorIcon(icon);
|
|
self.rebindAll(self.connectNodesRebinds());
|
|
};
|
|
createIcon(icon, "connect", callback);
|
|
};
|
|
|
|
this.addAll = function () {
|
|
self.addControlDrag();
|
|
self.addControlView();
|
|
self.addControlEdit();
|
|
self.addControlExpand();
|
|
self.addControlDelete();
|
|
self.addControlConnect();
|
|
self.addControlNewNode();
|
|
};
|
|
|
|
} |