yfiles.client.tiles.widget.GraphCanvas
Class GraphCanvas

An area for displaying and interacting with a graph.

The graph canvas provides basic navigation (zooming and panning) for mouse and touch input out-of-the-box. If navigation should be prevented, call setNoInteractionMode(). There are two different 'modes' of graph visualization: 'Bitmap Mode' and 'SVG Mode'. The mode can be set using method setRenderMode().

All Parent Classes:

dijit._Widget

dijit._Templated

RENDER_MODE_BITMAP

/*String*/ RENDER_MODE_BITMAP

RENDER_MODE_SVG

/*String*/ RENDER_MODE_SVG

baseURL

/*String*/ baseURL

[readonly] Base path for server requests

dispatchGraphItemEvents

/*boolean*/ dispatchGraphItemEvents

Determines whether mouse and touch events on graph items should be detected and dispatched. The default value is true.

domNode

/*Object*/ domNode

doubleTapSize

/*Object*/ doubleTapSize

The area in view coordinates the touch pointer needs to stay in before multiple taps are considered multiple single taps instead of multi-taps. If the touch pointer stays within this size within doubleTapTime, multiple taps will be considered double or multi-taps. The default value is {width: 20, height: 20}.

doubleTapTime

/*int*/ doubleTapTime

The amount of time that may pass within which two subsequent touch taps are considered multi taps. The higher the value the easier it will be to double-tap. The default value is 500 milliseconds.

edgeEvents

/*Boolean*/ edgeEvents

[readonly] Whether edge events should be reported.

edgeLabelEvents

/*Boolean*/ edgeLabelEvents

[readonly] Whether edge events should be reported.

fixed

/*boolean*/ fixed

Indicates whether this canvas is currently fixed. It is up to clients to consider this property in order to determine whether they want to move the canvas viewport. The default value is false.

glassPane

/*HTMLDivElement*/ glassPane

A transparent div above the graph visualization, but below any elements that are added as children of the canvas. This div will usually be the target of any mouse and touch events occuring on and dispatched by the canvas.

height

/*Number*/ height

The height of the canvas DOM node in pixels

highlightNodeSurroundPixels

/*Number*/ highlightNodeSurroundPixels

The surrounding pixels for a highlighted node (default 10)

longPressTime

/*int*/ longPressTime

This value indicates the amount of time that may pass before a touch down is considered a long press when the pointer stays within its touchDragSize area. The higher the value the later a touch pointer movement will be recognized as a long press. The default value is 1000 milliseconds.

mainTouchId

/*string*/ mainTouchId

An identifier of a currently active touch that is considered the "main touch". If multiple touches are currently active (i.e., during a pinch gesture), the "main touch" is the touch that was first started.

maxZoomForFitContent

/*Number*/ maxZoomForFitContent

Determines the maximum for the zoom on fitContent (default 1000000)

minPinchDelta

/*Number*/ minPinchDelta

The minimum amount of pixels at least one pinch touch has to move in one direction in order to trigger a pinch event. The default value is 1.

mouseWheelScrollFactor

/*Number*/ mouseWheelScrollFactor

Determines the zoom change amount, if the mouse is wheeled (default 2.0)

mouseWheelZoom

/*boolean*/ mouseWheelZoom

Determines whether the mouse wheel can be used to zoom in and out in the canvas. The default value is true.

movables

/*HTMLDivElement*/ movables

[readonly] Container HTML element for all elements that will be moved simultaneously with the canvas viewpoint.

navigationMode

/*NavigationInputMode*/ navigationMode

[readonly] The navigation mode that enables panning and pinch-zoom functionality for this canvas. The navigation mode is created by createNavigationMode(). If this canvas is in "no interaction mode" (setNotInteractionMode()), the value of this property is null.

nodeEvents

/*Boolean*/ nodeEvents

[readonly] Whether node events should be reported.

nodeLabelEvents

/*Boolean*/ nodeLabelEvents

[readonly] Whether nodelabel events should be reported.

oldTiles

/*HTMLElement*/ oldTiles

The element containing old tiles (if the canvas is in Bitmap Mode).

overlays

/*HTMLElement*/ overlays

The element containing the overlays, i.e. for selection.

paintDetailThreshold

/*Number*/ paintDetailThreshold

The lower bound of detailed painting. If the zoom level is below this number, the rendering will be in sloppy mode. The default value is 0.3.

paperEvents

/*Boolean*/ paperEvents

[readonly] Whether paper events should be reported. Paper events are mouse and touch events that did not hit any graph elements.

path

/*String*/ path

[readonly] The symbolic name of the graph displayed by the canvas

showLoading

/*Boolean*/ showLoading

Whether the canvas shows a loading image when new image tiles are loaded. The loading image will only be shown if no graph image tiles are currently visible. The loading image can be configured using the .loading css class. This property is only relevant in Bitmap Mode.

svgBorder

/*int*/ svgBorder

Space that should be added between the actual graph bounds and the border of the generated SVG (in SVG Mode). This property does not influence the graph's bounding box on the client - i.e., it will not change the resulting graph placement when calling fitContent(). Instead, the property can be used when node visualizations extend beyond the graph bounds calculated on the server (as might be the case for drop shadow effects). The default value is 0.

svgLayer

/*HTMLElement*/ svgLayer

The element containing the SVGViewPort widget (if in SVG Mode).

svgPrefix

/*String*/ svgPrefix

The prefix added to the generated SVG. Use this value if multiple GraphCanvas objects in SVG Mode are used on the same page. Each canvas in SVG Mode has to use a unique prefix.

templatePath

/*String*/ templatePath

The path to the dojo template used when creating this component.

tileSize

/*Number*/ tileSize

The width and height of the image tiles showing the graph. This property is only relevant in Bitmap Mode.

tilesFrame

/*HTMLElement*/ tilesFrame

[readonly] The element containing the current and old tiles (in Bitmap Mode).

touchDragSize

/*Object*/ touchDragSize

the area in view coordinates the touch may stay in before a movement is considered a drag. The default value is {width: 5, height: 5}.

useTouchEventsExclusively

/*Boolean*/ useTouchEventsExclusively

Whether to use only touch events (if available). The default is true. If the value of this property is true, evt.preventDefault() is called on each touch event, thereby preventing the additional mouse event.

viewportLimiter

/*ViewportLimiter*/ viewportLimiter

The viewport limiter instance that can be used to limit the explorable region. By default there are no limits set on the explorable region.

width

/*Number*/ width

The width of the canvas DOM node in pixels

x

/*Number*/ x

x-coordinate of the upper left corner of the graph visualization, relative to the top left corner of this canvas

y

/*Number*/ y

y-coordinate of the upper left corner of the graph visualization, relative to the top left corner of this canvas

zoom

/*Number*/ zoom

[readonly] The current zoom factor

zoomMarginFactor

/*Number*/ zoomMarginFactor

The factor that is used to add a margin when fitting the graph into the view. The default value is 0.95.

_createTouchPointHandler

TouchPointHandler _createTouchPointHandler(/*String*/ identifier)

Called by _getOrCreateTouchPointHandler to create a new yfiles.client.support.TouchPointHandler instance to handle the touch event that corresponds to the provided identifier.

Parameters:

identifier - The identifier that should be passed on to the TouchPointHandler.

_getOrCreateTouchPointHandler

TouchPointHandler _getOrCreateTouchPointHandler(/*Number*/ identifier, /*Object*/ currentTouchPoint)

Gets or creates a yfiles.client.support.TouchPointHandler for a touch event identified by the provided identifier.

If a handler exists for the provided identifier, it is returned. Else, if a currentTouchPoint was passed, and a handler already exists that matches the size and time criteria of a double tap, the handler is reused. Else, a new handler is created.

Parameters:

identifier - The identifier for which a TouchPointHandler is requested.

currentTouchPoint - If a point is passed, it is used to check whether a double-tap occurred. If so, the TouchPointHandler that corresponds to the previous touch event is reused for the current touch event (even though the touch identifiers differ).

_mouseWheeled

_mouseWheeled(/*Event*/ evt)

Callback invoked when the mouse wheel is used over the canvas.

If the mouseWheelZoom property is enabled, a mouse wheel event will change the zoom level. The zoom behavior is influenced by the current limits of the viewportLimiter, and by the mouseWheelScrollFactor and zoomToPointRecognizer properties.

Parameters:

evt - The mouse wheel event.

_supportMultiTouch

Boolean _supportMultiTouch()

determines whether simultaneous touch events should be processed, e.g. in order to detect pinch gestures

beforeRequest

beforeRequest()

hook for listeners called before a server request

center

center(/*Number*/ cX, /*Number*/ cY)

Moves the visible area such that the view coordinates (cX, cY) become the new coordinates of the center of the visible area. To center world coordinates, use setCenter().

Parameters:

cX - The new x coordinate of the center of the visible area.

cY - The new y coordinate of the center of the visible area.

clear

clear(/*Boolean*/ newGraph)

Clears the display.

Parameters:

newGraph - If true (the default), the canvas is set up for loading a new graph.

createNavigationMode

NavigationInputMode createNavigationMode()

Creates a NavigationInputMode that enables panning and zooming support for mouse and touch input.

decreaseZoom

decreaseZoom(/*Number*/ factor)

Decreases the canvas zoom value, using the provided factor.

This method takes the limits set on the viewportLimiter into account.

Parameters:

factor - The factor the current zoom value should be divided by. If no factor is provided, a default factor of 1.2 is used.

fitContent

fitContent()

Adjusts the viewport and the zoom level such that the entire graph is displayed in the canvas area.

The zoom level is not set to value bigger than the maxZoomForFitContent attribute of this canvas instance. To determine the target zoom level, the zoomMarginFactor property is taken into account.

getCenter

Object getCenter()

Returns the world coordinates at the center of the view.

Returns an object with "x" and "y" properties that specify the world coordinates at the center of the view.

getGraph

Graph getGraph()

Returns the current graph.

getHighlighter

GraphHighlighter getHighlighter()

Returns the GraphHighlighter instance that is used to create the visual representation of the highlight for nodes and edges.

getHitTest

HitTest getHitTest()

returns the hit test instance used by this graph canvas.

getLastHitInfo

HitInfo getLastHitInfo()

returns the last hit info object.

Use the static methods of HitTest like getHitId() to examine the details of the hit info.

getMousePosition

Object getMousePosition()

Returns the coordinates of the last mouse or touch position over the canvas as an object with "x" and "y" fields.

getViewCoordinates

Object getViewCoordinates(/*Number*/ rawX, /*Number*/ rawY)

Translates the provided coordinates to view coordinates, making them relative to the upper left corner of the canvas.

The coordinates are translated so that they are relative to the upper left corner of the canvas. If no arguments are provided the last known mouse location will be used instead.

Parameters:

rawX - The raw x coordinate.

rawY - The raw y coordinate.

getViewport

getViewport()

Returns the currently visible viewing region in world coordinates.

getWorldBounds

GraphBounds getWorldBounds()

Returns the current world bounds.

getWorldCoordinates

Object getWorldCoordinates(/*Number*/ x, /*Number*/ y)

Translates the provided coordinates to view coordinates and takes the zoom factor into account.

The coordinates are translated using the getViewCoordinates() and then the zoom factor is taken into account. If no parameters are provided, it will use the last known mouse location instead. Note that passed x and y coordinates are assumed to be relative to the position of the canvas - i.e., this method will not translate the passed coordinates by the canvas position. To translate page coordinates to local canvas coordinates, use toLocal().

Parameters:

x - The x coordinate.

y - The y coordinate.

highlight

highlight(/*String*/ id)

Highlights the graph element with the given id.

Parameters:

id - id of a node or edge

increaseZoom

increaseZoom(/*Number*/ factor)

Increases the canvas zoom value, using the provided factor.

This method takes the limits set on the viewportLimiter into account.

Parameters:

factor - The factor the current zoom value should be multiplied by. If no factor is provided, a default factor of 1.2 is used.

invalidateSVG

invalidateSVG(/*Function*/ callback)

Invalidates the current SVG and reloads it from the server. Also updates the world bounds.

Parameters:

callback - A Callback that will be invoked when the new SVG has been loaded

isAutoRefresh

Boolean isAutoRefresh()

Returns whether the canvas refreshes itself whenever the graph changes.

isBitmapMode

Boolean isBitmapMode()

Returns whether or not this canvas is in Bitmap Mode

Returns true if Bitmap Mode is enabled; false otherwise.

isMainTouch

isMainTouch(/**/ touch)

Returns whether the provided touch instance is currently considered the "mainTouch".

If multiple touches are active (e.g. during a pinch gesture), the touch that started first is considered the "main touch".

Parameters:

touch -

isMouseOver

Boolean isMouseOver()

Returns true, if the mouse is over the canvas; false otherwise.

isSVGMode

Boolean isSVGMode()

Returns whether or not this canvas is in SVG Mode.

Returns true if SVG Mode is enabled; false otherwise.

onWorldBoundsChanged

onWorldBoundsChanged(/*GraphBounds*/ oldBounds, /*GraphBounds*/ newBounds)

Called when the world bounds changed

Parameters:

oldBounds - The old graph bounds

newBounds - The new graph bounds

pathSet

pathSet(/*String*/ path)

hook for listeners called after setting a path

Parameters:

path - the symbolic graph name

postCreate

postCreate()

pushTiles

pushTiles()

Moves the currently visible tiles to the second layer. This method is only relevant in <i>Bitmap Mode</i>.

While new tiles are fetched from the server the user sees the tiles on the second layer. The refresh function uses pushTiles. Calling pushTiles directly can be used in situations where the upper layer gets shifted like in the Collapsible Tree demo.

recalculateTiles

recalculateTiles(/*Boolean*/ replaceTiles)

Calculates the tiles for the visible area and loads missing tiles from the server. This method is only relevant in <i>Bitmap Mode</i>.

Parameters:

replaceTiles - If true, existing tiles are replaced with newly loaded tiles.

refresh

refresh(/*Object*/ bounds, /*Object*/ shift, /*Boolean*/ doNotPushTiles, /*Function*/ callback)

Refreshes the display, useful after changes of the graph. This method is only relevant in <i>Bitmap Mode</i>

Parameters:

bounds - Optional new world bounds as an object with minX, minY, maxX and maxY attributes.

shift - An optional shift for the new tiles, the tiles on the second layer are fixed.

doNotPushTiles - The current tiles are pushed to the second layer in a first step, unless this is true.

callback - Callback that is invoked after the new world bounds have been loaded.

requestDone

requestDone(/*Boolean*/ success)

hook for listeners called after a server request

Parameters:

success - whether the request succeeded

resize

resize(/*Object*/ marginBox)

Resizes the canvas.

Parameters:

marginBox - The object must have the properties t (top offset), l (left offset), h (height) and w (width).

setAutoRefresh

setAutoRefresh(/*Boolean*/ autoRefresh)

Sets whether the canvas refreshes itself whenever the graph changes.

This does not apply to grouping changes.

Parameters:

autoRefresh - If true then the canvas can refresh itself.

setBaseURL

setBaseURL(/*String*/ baseURL)

Sets the base path for server requests (possibly relative to the current page)

Parameters:

baseURL - The new base url.

setCenter

setCenter(/*Object*/ center)

Sets the world coordinates at the center of the view.

Parameters:

center - An object with "x" and "y" properties that specify the target world coordinates that should be moved to the center of the view.

setHighlighter

setHighlighter(/*GraphHighlighter*/ highlighter)

Set the GraphHighlighter instance that will be used to create the visual representation of the highlight for nodes and edges.

Parameters:

highlighter - The highlighter instance that provides drawNodeHighlight and drawEdgeHighlight implementations.

setNoInteractionMode

setNoInteractionMode()

Sets the interaction mode to no interaction.

The user cannot pan or zoom the graph. This is suitable, if the canvas is used for displaying a graph overview, for example.

setPanMode

setPanMode(/*Boolean*/ replaceTiles)

Enables the NavigationInputMode to enable pan and pinch-zoom functionality.

This is opposed to the no interaction mode, which is more suitable, if the canvas is used for displaying a graph overview.

Parameters:

replaceTiles - If true, existing tiles are replaced with newly loaded tiles.

setPath

setPath(/*String*/ newPath, /*Boolean*/ reload)

Initializes the canvas for a graph given by a symbolic name, if it is set to a non-empty string.

Parameters:

newPath - The symbolic name of the graph

reload - If true, the graph is reloaded even if it is already cached for the session (default false)

setRenderMode

setRenderMode(/*String*/ mode)

Set whether the graph visualization should be rendered on the client using bitmap tiles or using a single SVG image.

The client can be used either in Bitmap Mode or in SVG Mode. SVG Mode is supported only in modern browsers.

Bitmap mode uses a number of Bitmap tiles to render the diagram. This means that basic navigation actions like zooming and panning require multiple server requests. However, the client-side rendering performance in Bitmap Mode does not depend on the graph size.

In SVG Mode, a single SVG image is generated on the server. For panning and zooming, this image is just moved/scaled on the client, without the need for additional server requests. Of course, client-side editing support and level-of-detail functionality still requires server requests for the updated SVG image.

In contrast to Bitmap Mode, the client-side rendering performance in SVG Mode does heavily depend on the graph size and on the complexity of the graph visualizations.

Parameters:

mode - yfiles.client.tiles.widget.GraphCanvas.RENDER_MODE_SVG or yfiles.client.tiles.widget.GraphCanvas.RENDER_MODE_BITMAP

setViewPoint

setViewPoint(/*Number*/ newX, /*Number*/ newY, /*Boolean*/ fixOldTiles)

moves the visible area, such that the view coordinates (newX, newY) become the coordinates of the upper left corner.

Parameters:

newX - The new x coordinate.

newY - The new y coordinate.

fixOldTiles - If true, the old tiles will be fixed by moving their position appropriately. The default value is false.

setViewPointWorld

setViewPointWorld(/*Number*/ worldX, /*Number*/ worldY)

Sets the viewpoint such that the provided world coordinates will be located at the top left corner of the canvas viewport.

Parameters:

worldX - The x-coordinate of the new viewpoint.

worldY - The y-coordinate of the new viewpoint.

setZoom

setZoom(/*Number*/ zoom)

Sets the zoom factor to the specified value.

The graph is redrawn with the new zoom factor such that the coordinates of the center of the visible area remain the same.

Parameters:

zoom - The new zoom value.

setZoomBoundsProviders

setZoomBoundsProviders(/*Function*/ minZoomProvider, /*Function*/ maxZoomProvider)

Sets functions which are used to obtain the bounds on the zoom value in setZoom.

The functions are called with the canvas instance for which the zoom value is requested to be changed. The functions have to return a number. If a parameter of setZoomBoundsProviders is not set, then the corresponding default zoom value provider will be used. The default max zoom value provider returns 5 for any canvas. The default min value provider returns a zoom value such that the current graph will fit twice into the canvas.

Parameters:

minZoomProvider - A function that takes a graph canvas and returns a Number that represents the minimal allowed value for zoom.

maxZoomProvider - A function that takes a graph canvas and returns a Number that represents the maximal allowed value for zoom.

shift

shift(/*Number*/ dx, /*Number*/ dy, /*Boolean*/ fixOldTiles)

Shifts the visible area by (dx, dy).

Parameters:

dx - The amount of shifting to the right (if positive) or left (if negative).

dy - The amount of shifting down (if positive) or up (if negative).

fixOldTiles - If true, the old tiles will be fixed by moving their position appropriately. The default value is false.

toLocal

Object toLocal(/*Number*/ x, /*Number*/ y)

Translates the passed page coordinates to local view coordinates of this canvas

Parameters:

x - y-coordinate of a point on the page

y -

unhighlight

unhighlight(/*String*/ id)

Unhighlights the graph elements with the given id.

Parameters:

id - id of a node or edge

unhighlightAll

unhighlightAll()

Unhighlights all graph elements.

updateWorldBounds

updateWorldBounds(/*Object*/ newWorldBounds, /*boolean*/ doNotUpdateHitTest)

sets new world bounds for this graph canvas.

Parameters:

newWorldBounds - object with minX, minY, maxX and maxY attributes

doNotUpdateHitTest - do not set the bounds for the hit test of the canvas (default: false)

viewPortChanged

viewPortChanged(/*Number*/ x, /*Number*/ y, /*Number*/ width, /*Number*/ height, /*Number*/ zoom)

hook for listeners called after a viewport change

Parameters:

x - view coordinate of the left boundary of the visible area

y - view coordinate of the upper boundary of the visible area

width - width of the visible area in pixels

height - height of the visible area in pixels

zoom - zoom factor, view units divided by world units

zoomTo

zoomTo(/*Object*/ worldRect)

Sets the zoom level and view port center so that the given rectangle in world coordinates fits the viewport.

This method will not take the viewportLimiter into account.

Parameters:

worldRect - A rectangle with properties x,y,width and height that specifies the desired rectangle in world coordinates that should fit into the viewport.

zoomToPointRecognizer

Boolean zoomToPointRecognizer(/*Event*/ evt)

Callback to decide whether to zoom to the mouse position or setZoom on mouse wheel event.

If it returns true, the canvas is zoomed to the mouse position. default implementation will return true if the ctrl key is pressed during a mouse wheel event. This function can be safely replaced on any canvas object with another function that performs the desired logical test.

Parameters:

evt - The mouse event.

zoomWithPoint

zoomWithPoint(/*Number*/ x, /*Number*/ y, /*Number*/ newZoom)

Zooms the canvas such that the world coordinates that are currently displayed at the provided view coordinates will stay at the same view coordinates after the zoom change.

Parameters:

x - The x coordinate at the center of the zoom.

y - The y coordinate at the center of the zoom.

newZoom - The new zoom value to be applied to that point.

onClick

onClick(/*Event*/ evt)

Called when the user clicks the widget

Parameters:

evt - The event.

onClickEdge

onClickEdge(/*String*/ edgeId, /*HitInfo*/ info, /*Object*/ evt)

Called when an edge was clicked, if edgeEvents are enabled.

Parameters:

edgeId - The id of the clicked edge

info - The hit info, as returned by getHitTest().getHitInfo()

evt - The click event

onClickEdgeLabel

onClickEdgeLabel(/*String*/ edgeLabelId, /*HitInfo*/ info, /*Object*/ evt)

Called when an edge label was clicked, if edgeLabelEvents are enabled.

Parameters:

edgeLabelId - The id of the clicked edge label

info - The hit info, as returned by getHitTest().getHitInfo()

evt - The click event

onClickNode

onClickNode(/*String*/ nodeId, /*HitInfo*/ info, /*Object*/ evt)

Called when a node was clicked, and nodeEvents are enabled.

Parameters:

nodeId - The id of the clicked node

info - The hit info, as returned by getHitTest().getHitInfo()

evt - The click event

onClickNodeLabel

onClickNodeLabel(/*String*/ nodeLabelId, /*HitInfo*/ info, /*Object*/ evt)

Called when a node label is clicked, if nodeLabelEvents are enabled.

Parameters:

nodeLabelId - The id of the node label

info - The hit info, as returned by getHitTest().getHitInfo()

evt - The click event

onClickPaper

onClickPaper(/*Object*/ info, /*HitInfo*/ evt)

Called when a click event does not hit any graph element, if paperEvents are enabled.

Parameters:

info - The hit info, as returned by getHitTest().getHitInfo()

evt - The click event

onDblClick

onDblClick(/*Event*/ evt)

Called when the user double-clicks the widget

Parameters:

evt -

onDblClickEdge

onDblClickEdge(/*String*/ edgeId, /*HitInfo*/ info, /*Object*/ evt)

Called when an edge was double-clicked, if edgeEvents are enabled.

Parameters:

edgeId - The id of the clicked edge

info - The hit info, as returned by getHitTest().getHitInfo()

evt - The double click event

onDblClickEdgeLabel

onDblClickEdgeLabel(/*String*/ edgeLabelId, /*HitInfo*/ info, /*Object*/ evt)

Called when an edge label was double-clicked, if edgeLabelEvents are enabled.

Parameters:

edgeLabelId - The id of the clicked edge label

info - The hit info, as returned by getHitTest().getHitInfo()

evt - The double click event

onDblClickNode

onDblClickNode(/*String*/ nodeId, /*HitInfo*/ info, /*Object*/ evt)

Called when a node was double-clicked, and nodeEvents are enabled.

Parameters:

nodeId - The id of the double clicked node

info - The hit info, as returned by getHitTest().getHitInfo()

evt - The double click event

onDblClickNodeLabel

onDblClickNodeLabel(/*String*/ nodeLabelId, /*HitInfo*/ info, /*Object*/ evt)

Called when a node label is double-clicked, if nodeLabelEvents are enabled.

Parameters:

nodeLabelId - The id of the node label

info - The hit info, as returned by getHitTest().getHitInfo()

evt - The double click event

onDblTapEdge

onDblTapEdge(/*String*/ edgeId, /*HitInfo*/ info, /*Object*/ touch)

Called when an edge was double-tapped, if edgeEvents are enabled.

Parameters:

edgeId - The id of the tapped edge.

info - The hit info, as returned by getHitTest().getHitInfo()

touch - The touch instance of the double-taps' last touch event.

onDblTapEdgeLabel

onDblTapEdgeLabel(/*String*/ edgeLabelId, /*HitInfo*/ info, /*Object*/ touch)

Called when an edge label was double-tapped, if edgeLabelEvents are enabled.

Parameters:

edgeLabelId - The id of the tapped edge label.

info - The hit info, as returned by getHitTest().getHitInfo()

touch - The touch instance of the double-taps' last touch event.

onDblTapNode

onDblTapNode(/*String*/ nodeId, /*HitInfo*/ info, /*Object*/ touch)

Called when a node was double-tapped, if nodeEvents are enabled.

Parameters:

nodeId - The id of the tapped node.

info - The hit info, as returned by getHitTest().getHitInfo()

touch - The touch instance of the double-taps' last touch event.

onDblTapNodeLabel

onDblTapNodeLabel(/*String*/ nodeLabelId, /*HitInfo*/ info, /*Object*/ touch)

Called when a node label was double-tapped, if nodeLabelEvents are enabled.

Parameters:

nodeLabelId - The id of the tapped node label.

info - The hit info, as returned by getHitTest().getHitInfo()

touch - The touch instance of the double-taps' last touch event.

onDblTapPaper

onDblTapPaper(/*HitInfo*/ info, /*Object*/ touch)

Called for a double tap event that does not hit any graph element, if paperEvents are enabled.

Parameters:

info - The hit info, as returned by getHitTest().getHitInfo()

touch - The touch instance of the double-taps' last touch event.

onLoadSVG

onLoadSVG()

called when a new SVG is requested from the server.

onLoadTiles

onLoadTiles()

hook for listeners called when tiles will be (re)loaded. This method is only relevant in <i>Bitmap Mode</i>.

onLongPressEdge

onLongPressEdge(/*String*/ edgeId, /*HitInfo*/ info, /*Object*/ touch)

Called when an edge was long-pressed, if edgeEvents are enabled.

Parameters:

edgeId - The id of the edge that was pressed.

info - The hit info, as returned by getHitTest().getHitInfo()

touch - The touch instance of the original touch down event.

onLongPressEdgeLabel

onLongPressEdgeLabel(/*String*/ edgeLabelId, /*HitInfo*/ info, /*Object*/ touch)

Called when an edge label was long-pressed, if edgeLabelEvents are enabled.

Parameters:

edgeLabelId - The id of the pressed edge label.

info - The hit info, as returned by getHitTest().getHitInfo()

touch - The touch instance of the original touch down event.

onLongPressNode

onLongPressNode(/*String*/ nodeId, /*HitInfo*/ info, /*Object*/ touch)

Called when a node was long-pressed, if nodeEvents are enabled.

Parameters:

nodeId - The id of the pressed node.

info - The hit info, as returned by getHitTest().getHitInfo()

touch - The touch instance of the original touch down event.

onLongPressNodeLabel

onLongPressNodeLabel(/*String*/ nodeLabelId, /*HitInfo*/ info, /*Object*/ touch)

Called when a node label was long-pressed, if nodeLabelEvents are enabled.

Parameters:

nodeLabelId - The id of the pressed node label.

info - The hit info, as returned by getHitTest().getHitInfo()

touch - The touch instance of the original touch down event.

onLongPressPaper

onLongPressPaper(/*HitInfo*/ info, /*Object*/ touch)

Called for a long press event that does not hit any graph elements, if paperEvents are enabled.

Parameters:

info - The hit info, as returned by getHitTest().getHitInfo()

touch - The touch instance of the original touch down event.

onMouseDown

onMouseDown(/*Event*/ evt)

Called when the user pressed the mouse on the widget but before it is released

Parameters:

evt -

onMouseMove

onMouseMove(/*MouseEvent*/ evt)

Called when the mouse is moved on the canvas

Parameters:

evt -

onMouseOut

onMouseOut(/*Event*/ evt)

Called when the mouse left the canvas

Parameters:

evt -

onMouseOutEdge

onMouseOutEdge(/*String*/ edgeId, /*HitInfo*/ info, /*Object*/ evt)

Called when the mouse stops hovering over an edge path, if edgeEvents are enabled.

Parameters:

edgeId - The id of the edge

info - The hit info, as returned by getHitTest().getHitInfo()

evt - The mouse out event

onMouseOutEdgeLabel

onMouseOutEdgeLabel(/*String*/ edgeLabelId, /*HitInfo*/ info, /*Object*/ evt)

Called when the mouse exits the bounds of an edge label, if edgeLabelEvents are enabled.

Parameters:

edgeLabelId - The id of the edge label

info - The hit info, as returned by getHitTest().getHitInfo()

evt - The mouse out event

onMouseOutNode

onMouseOutNode(/*String*/ nodeId, /*HitInfo*/ info, /*Object*/ evt)

Called when the mouse exits the bounds of a node, if nodeEvents are enabled.

Parameters:

nodeId - the id of the node

info - The hit info, as returned by getHitTest().getHitInfo()

evt - the mouse out event

onMouseOutNodeLabel

onMouseOutNodeLabel(/*String*/ nodeLabelId, /*HitInfo*/ info, /*Object*/ evt)

Called when the mouse exits the bounds of a node label, if nodeLabelEvents are enabled.

Parameters:

nodeLabelId - The id of the node label

info - The hit info, as returned by getHitTest().getHitInfo()

evt - The mouse out event

onMouseOver

onMouseOver(/*Event*/ evt)

Called when the mouse is over the canvas

Parameters:

evt -

onMouseOverEdge

onMouseOverEdge(/*String*/ edgeId, /*HitInfo*/ info, /*Object*/ evt)

Called when the mouse hovers over an edge path, if edgeEvents are enabled.

Parameters:

edgeId - The id of the edge

info - The hit info, as returned by getHitTest().getHitInfo()

evt - The mouse over event

onMouseOverEdgeLabel

onMouseOverEdgeLabel(/*String*/ edgeLabelId, /*HitInfo*/ info, /*Object*/ evt)

Called when the mouse enters the bounds of an edge label, if edgeLabelEvents are enabled.

Parameters:

edgeLabelId - The id of the edge label

info - The hit info, as returned by getHitTest().getHitInfo()

evt - The mouse over event

onMouseOverNode

onMouseOverNode(/*String*/ nodeId, /*HitInfo*/ info, /*Object*/ evt)

Called when the mouse enters the bounds of a node, if nodeEvents are enabled.

Parameters:

nodeId - The id of the node

info - The hit info, as returned by getHitTest().getHitInfo()

evt - The mouse over event

onMouseOverNodeLabel

onMouseOverNodeLabel(/*String*/ nodeLabelId, /*HitInfo*/ info, /*Object*/ evt)

Called when the mouse enters the bounds of a node label, if nodeLabelEvents are enabled.

Parameters:

nodeLabelId - The id of the node label

info - The hit info, as returned by getHitTest().getHitInfo()

evt - The mouse over event

onMouseUp

onMouseUp(/*Event*/ evt)

Called when the user releases a pressed mouse button

Parameters:

evt -

onPinch

onPinch(/*Object*/ worldCoords1, /*Object*/ worldCoords2, /*Array*/ pinchTouches)

Callback that is invoked when a touch (or both touches) of a pinch gesture moved.

Parameters:

worldCoords1 - The world coordinates of the first touch event of the pinch gesture.

worldCoords2 - The world coordinates of the second touch event of the pinch gesture.

pinchTouches - The individual touches that make up the pinch gesture.

onPinchEnd

onPinchEnd(/*Object*/ worldCoords1, /*Object*/ worldCoords2, /*Array*/ pinchTouches)

Callback that is invoked when a pinch gesture has ended.

Parameters:

worldCoords1 - The world coordinates of the first touch event of the pinch gesture.

worldCoords2 - The world coordinates of the second touch event of the pinch gesture.

pinchTouches - The individual touches that make up the pinch gesture.

onPinchStart

onPinchStart(/*Object*/ worldCoords1, /*Object*/ worldCoords2, /*Array*/ pinchTouches)

Callback that is invoked when a pinch gesture was started on the canvas.

Parameters:

worldCoords1 - The world coordinates of the first touch event of the pinch gesture.

worldCoords2 - The world coordinates of the second touch event of the pinch gesture.

pinchTouches - The individual touches that make up the pinch gesture.

onSVGLoaded

onSVGLoaded()

called when an SVG request has completed (i.e., the SVG is now available on the client).

onTapEdge

onTapEdge(/*String*/ edgeId, /*HitInfo*/ info, /*Object*/ touch)

Called when an edge has been tapped, if edgeEvents are enabled.

Parameters:

edgeId - The id of the tapped egde.

info - The hit info, as returned by getHitTest().getHitInfo()

touch - The touch instance of the touch tap event.

onTapEdgeLabel

onTapEdgeLabel(/*String*/ edgeLabelId, /*HitInfo*/ info, /*Object*/ touch)

is called for a tap event on an edge label, if edgeLabelEvents are enabled.

Parameters:

edgeLabelId - The id of the tapped edge label.

info - The hit info, as returned by getHitTest().getHitInfo()

touch - The touch instance of the touch tap event.

onTapNode

onTapNode(/*String*/ nodeId, /*HitInfo*/ info, /*Object*/ touch)

Called when a node is tapped, if nodeEvents are enabled.

Parameters:

nodeId - The id of the tapped node.

info - The hit info, as returned by getHitTest().getHitInfo()

touch - The touch instance of the touch tap event.

onTapNodeLabel

onTapNodeLabel(/*String*/ nodeLabelId, /*HitInfo*/ info, /*Object*/ touch)

Called when a node label is tapped, if nodeLabelEvents are enabled.

Parameters:

nodeLabelId - The id of the tapped node label.

info - The hit info, as returned by getHitTest().getHitInfo()

touch - The touch instance of the touch tap event.

onTapPaper

onTapPaper(/*HitInfo*/ info, /*Object*/ touch)

Called for a tap event that does not hit any graph elements.

Parameters:

info - The hit info, as returned by getHitTest().getHitInfo()

touch - The touch instance of the touch tap event.

onTilesLoaded

onTilesLoaded()

hook for listeneres called when all tiles have been loaded. This method is only relevant in <i>Bitmap Mode</i>.

onTouchEnd

onTouchEnd(/*Touch*/ touch, /*Object*/ worldCoords)

Callback that is invoked when a touch gesture that started on the canvas has ended.

Parameters:

touch -

worldCoords - The world coordinates of the touch event.

onTouchLongPress

onTouchLongPress(/*Touch*/ touch, /*Object*/ worldCoords)

Callback that is invoked when a long press touch gesture occurred on the canvas.

Whether a touch gesture is considered a long press is determined by the longPressTime and touchDragSize properties.

Parameters:

touch -

worldCoords - The world coordinates of the touch event.

onTouchMove

onTouchMove(/*Touch*/ touch, /*Object*/ worldCoords)

Callback that is invoked when a touch location that started on the canvas was moved.

Parameters:

touch -

worldCoords - The world coordinates of the touch event.

onTouchStart

onTouchStart(/*Touch*/ touch, /*Object*/ worldCoords)

Callback that is invoked when a touch gesture has started on the canvas.

Parameters:

touch -

worldCoords - The world coordinates of the touch event.

onTouchTapped

onTouchTapped(/*Touch*/ touch, /*Object*/ worldCoords, /*int*/ tapCount)

Callback that is invoked when a tap gesture occurred on the canvas.

Parameters:

touch -

worldCoords - The world coordinates of the touch event.

tapCount -

onZoomChanged

onZoomChanged(/*Object*/ evt)

Called when the zoom is changed

The provided evt argument is an object which defines the properties "zoom", "oldZoom" and "zoomPoint".

Parameters:

evt - An object which defines the properties "zoom", "oldZoom" and "zoomPoint".

tileLoaded

tileLoaded(/*String*/ tileId)

Hook for listeners called after loading a bitmap tile. This method is only relevant in <i>Bitmap Mode</i>.

Parameters:

tileId - The id of the tile that has been loaded.