Acts as the camera that looks on the canvas. Does the animation, zooming and focusing.
The view has no options.
This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.
| name | returns | description |
| getScale() | Number | Returns the current scale of the network. 1.0 is comparible to 100%, 0 is zoomed out infinitely. |
| getPosition() | Number | Returns the current central focus point of the camera. |
moveTo(Object options) | none | You can animate or move the camera using the moveTo method. Options are:
{
position: {x:Number, y:Number},
scale: Number,
offset: {x:Number, y:Number}
animation: { // -------------------> can be a boolean too!
duration: Number
easingFunction: String
}
}
The position (in canvas units!) is the position of the central focus point of the camera. The scale is the target zoomlevel. Default value is 1.0. The offset (in DOM units) is how many pixels from the center the view is focussed. Default value is {x:0,y:0}. For animation you can either use a Boolean to use it with the default options or disable it or you can define the duration (in milliseconds) and easing function manually. Available are: linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint. You will have to define at least a scale or a position. Otherwise, there is nothing to move to. |
zoomExtent([Object options]) | none | Zooms out so all nodes fit on the canvas. You can supply options to customize this:
{
nodes:[Array of nodeIds],
duration: Number,
easingFunction: String
}
The nodes can be used to zoom to fit only specific nodes in the view. The other options are explained in the moveTo() description above.
All options are optional for zoomExtent.
|
focusOnNode(String nodeId,[Object options]) | none | You can focus on a node with this function. What that means is the view will lock onto that node, if it is moving, the view will also move accordingly. If the view is dragged by the user, the focus is broken.
You can supply options to customize the effect:
{
scale: Number,
offset: {x:Number, y:Number}
locked: boolean
animation: { // -------------------> can be a boolean too!
duration: Number
easingFunction: String
}
}
All options except for locked are explained in the moveTo() description above. Locked denotes whether or not the view remains locked to the node once the zoom-in animation is finished. Default value is true. The options object is optional in focusOnNode. |
| releaseNode() | none | Programatically release the focussed node. |
These events are fired by the renderer and can be used to move and draw custom elements on the same canvas as the rest of the network.
| name | properties | description |
| animationFinished | none | Fired when an animation is finished. |