Network - view

Acts as the camera that looks on the canvas. Does the animation, zooming and focusing.

Options

The view has no options.

Methods

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.

namereturnsdescription
getScale() NumberReturns the current scale of the network. 1.0 is comparible to 100%, 0 is zoomed out infinitely.
getPosition() NumberReturns the current central focus point of the camera.
fit([Object options])noneZooms 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.
moveTo(Object options) noneYou 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.
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()noneProgramatically release the focussed node.

Events

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.

namepropertiesdescription
animationFinishednoneFired when an animation is finished.