Devel-SizeMe
view release on metacpan or search on metacpan
lib/Devel/SizeMe/Graph/static/jit.js view on Meta::CPAN
stylesClick: false
};
/*
* File: Options.Events.js
*
*/
/*
Object: Options.Events
Configuration for adding mouse/touch event handlers to Nodes.
Syntax:
(start code js)
Options.Events = {
enable: false,
enableForEdges: false,
type: 'auto',
onClick: $.empty,
onRightClick: $.empty,
onMouseMove: $.empty,
onMouseEnter: $.empty,
onMouseLeave: $.empty,
onDragStart: $.empty,
onDragMove: $.empty,
onDragCancel: $.empty,
onDragEnd: $.empty,
onTouchStart: $.empty,
onTouchMove: $.empty,
onTouchEnd: $.empty,
onTouchCancel: $.empty,
onMouseWheel: $.empty
};
(end code)
Example:
(start code js)
var viz = new $jit.Viz({
Events: {
enable: true,
onClick: function(node, eventInfo, e) {
viz.doSomething();
},
onMouseEnter: function(node, eventInfo, e) {
viz.canvas.getElement().style.cursor = 'pointer';
},
onMouseLeave: function(node, eventInfo, e) {
viz.canvas.getElement().style.cursor = '';
}
}
});
(end code)
Parameters:
enable - (boolean) Default's *false*. Whether to enable the Event system.
enableForEdges - (boolean) Default's *false*. Whether to track events also in arcs. If *true* the same callbacks -described below- are used for nodes *and* edges. A simple duck type check for edges is to check for *node.nodeFrom*.
type - (string) Default's 'auto'. Whether to attach the events onto the HTML labels (via event delegation) or to use the custom 'Native' canvas Event System of the library. 'auto' is set when you let the <Options.Label> *type* parameter decide this...
onClick(node, eventInfo, e) - Triggered when a user performs a click in the canvas. *node* is the <Graph.Node> clicked or false if no node has been clicked. *e* is the grabbed event (should return the native event in a cross-browser manner). *event...
onRightClick(node, eventInfo, e) - Triggered when a user performs a right click in the canvas. *node* is the <Graph.Node> right clicked or false if no node has been clicked. *e* is the grabbed event (should return the native event in a cross-browse...
onMouseMove(node, eventInfo, e) - Triggered when the user moves the mouse. *node* is the <Graph.Node> under the cursor as it's moving over the canvas or false if no node has been clicked. *e* is the grabbed event (should return the native event in ...
onMouseEnter(node, eventInfo, e) - Triggered when a user moves the mouse over a node. *node* is the <Graph.Node> that the mouse just entered. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an obj...
onMouseLeave(node, eventInfo, e) - Triggered when the user mouse-outs a node. *node* is the <Graph.Node> 'mouse-outed'. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an object containing useful ...
onDragStart(node, eventInfo, e) - Triggered when the user mouse-downs over a node. *node* is the <Graph.Node> being pressed. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an object containing us...
onDragMove(node, eventInfo, e) - Triggered when a user, after pressing the mouse button over a node, moves the mouse around. *node* is the <Graph.Node> being dragged. *e* is the grabbed event (should return the native event in a cross-browser manne...
onDragEnd(node, eventInfo, e) - Triggered when a user finished dragging a node. *node* is the <Graph.Node> being dragged. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an object containing usefu...
onDragCancel(node, eventInfo, e) - Triggered when the user releases the mouse button over a <Graph.Node> that wasn't dragged (i.e. the user didn't perform any mouse movement after pressing the mouse button). *node* is the <Graph.Node> being dragged...
onTouchStart(node, eventInfo, e) - Behaves just like onDragStart.
onTouchMove(node, eventInfo, e) - Behaves just like onDragMove.
onTouchEnd(node, eventInfo, e) - Behaves just like onDragEnd.
onTouchCancel(node, eventInfo, e) - Behaves just like onDragCancel.
onMouseWheel(delta, e) - Triggered when the user uses the mouse scroll over the canvas. *delta* is 1 or -1 depending on the sense of the mouse scroll.
*/
Options.Events = {
$extend: false,
enable: false,
enableForEdges: false,
type: 'auto',
onClick: $.empty,
onRightClick: $.empty,
onMouseMove: $.empty,
onMouseEnter: $.empty,
onMouseLeave: $.empty,
onDragStart: $.empty,
onDragMove: $.empty,
onDragCancel: $.empty,
onDragEnd: $.empty,
onTouchStart: $.empty,
onTouchMove: $.empty,
onTouchEnd: $.empty,
onMouseWheel: $.empty
};
/*
* File: Options.Navigation.js
*
*/
/*
Object: Options.Navigation
Panning and zooming options for Graph/Tree based visualizations. These options are implemented
by all visualizations except charts (<AreaChart>, <BarChart> and <PieChart>).
Syntax:
(start code js)
Options.Navigation = {
enable: false,
type: 'auto',
panning: false, //true, 'avoid nodes'
zooming: false
};
lib/Devel/SizeMe/Graph/static/jit.js view on Meta::CPAN
},
/*
Method: select
Selects a node in the <ST> without performing an animation. Useful when selecting
nodes which are currently hidden or deep inside the tree.
Parameters:
id - (string) The id of the node to select.
onComplete - (optional|object) an onComplete callback.
Example:
(start code js)
st.select('mynodeid', {
onComplete: function() {
alert('complete!');
}
});
(end code)
*/
select: function(id, onComplete) {
var group = this.group, geom = this.geom;
var node= this.graph.getNode(id), canvas = this.canvas;
var root = this.graph.getNode(this.root);
var complete = $.merge(this.controller, onComplete);
var that = this;
complete.onBeforeCompute(node);
this.selectPath(node);
this.clickedNode= node;
this.requestNodes(node, {
onComplete: function(){
group.hide(group.prepare(getNodesToHide.call(that)), complete);
geom.setRightLevelToShow(node, canvas);
that.compute("current");
that.graph.eachNode(function(n) {
var pos = n.pos.getc(true);
n.startPos.setc(pos.x, pos.y);
n.endPos.setc(pos.x, pos.y);
n.visited = false;
});
var offset = { x: complete.offsetX, y: complete.offsetY };
that.geom.translate(node.endPos.add(offset).$scale(-1), ["start", "current", "end"]);
group.show(getNodesToShow.call(that));
that.plot();
complete.onAfterCompute(that.clickedNode);
complete.onComplete();
}
});
},
/*
Method: onClick
Animates the <ST> to center the node specified by *id*.
Parameters:
id - (string) A node id.
options - (optional|object) A group of options and callbacks described below.
onComplete - (object) An object callback called when the animation finishes.
Move - (object) An object that has as properties _offsetX_ or _offsetY_ for adding some offset position to the centered node.
Example:
(start code js)
st.onClick('mynodeid', {
Move: {
enable: true,
offsetX: 30,
offsetY: 5
},
onComplete: function() {
alert('yay!');
}
});
(end code)
*/
onClick: function (id, options) {
var canvas = this.canvas, that = this, Geom = this.geom, config = this.config;
var innerController = {
Move: {
enable: true,
offsetX: config.offsetX || 0,
offsetY: config.offsetY || 0
},
setRightLevelToShowConfig: false,
onBeforeRequest: $.empty,
onBeforeContract: $.empty,
onBeforeMove: $.empty,
onBeforeExpand: $.empty
};
var complete = $.merge(this.controller, innerController, options);
if(!this.busy) {
this.busy = true;
var node = this.graph.getNode(id);
this.selectPath(node, this.clickedNode);
this.clickedNode = node;
complete.onBeforeCompute(node);
complete.onBeforeRequest(node);
this.requestNodes(node, {
onComplete: function() {
complete.onBeforeContract(node);
that.contract({
onComplete: function() {
Geom.setRightLevelToShow(node, canvas, complete.setRightLevelToShowConfig);
complete.onBeforeMove(node);
that.move(node, {
Move: complete.Move,
onComplete: function() {
complete.onBeforeExpand(node);
that.expand(node, {
onComplete: function() {
that.busy = false;
complete.onAfterCompute(id);
complete.onComplete();
}
}); // expand
( run in 0.481 second using v1.01-cache-2.11-cpan-99c4e6809bf )