yfiles.client.tiles.widget.GraphCanvas
Class GraphCanvas

an area for displaying and interacting with a graph. There are some read-only fields which provide information on the current state of the canvas. Some of them can be set in HTML markup or during programmatic widget creation, namely path, nodeEvents, nodeLabelEvents, edgeEvents, edgeLabelEvents and baseURL. Later on, only the setters like setPath() should be used. Changing the reported events can be done by using setEventTypes() on the HitTest instance returned by getHitTest().

All Parent Classes:

dijit._Widget

dijit._Templated

baseURL

/*String*/ baseURL

(read-only) base path for server requests

edgeEvents

/*Boolean*/ edgeEvents

(read-only) report edge events

edgeLabelEvents

/*Boolean*/ edgeLabelEvents

(read-only) report edge label events

height

/*Number*/ height

(read-only) the height of the canvas DOM node in pixels

highlightNodeSurroundPixels

/*Number*/ highlightNodeSurroundPixels

(read-write) the surrounding pixels for a highlighted node (default 10)

maxZoomForFitContent

/*Number*/ maxZoomForFitContent

(read-write) determines the maximum for the zoom on fitContent (default 1000000)

mouseWheelScrollFactor

/*Number*/ mouseWheelScrollFactor

(read-write) determines the zoom change amount, if the mouse is wheeled (default 2.0)

movables

/*Container*/ movables

HTML element for all elements that will be moved simulatenously with the canvas viewpoint.

nodeEvents

/*Boolean*/ nodeEvents

(read-only) report node events

nodeLabelEvents

/*Boolean*/ nodeLabelEvents

(read-only) report node label events

paperEvents

/*Boolean*/ paperEvents

(read-only) report paper events

path

/*String*/ path

(read-only) the symbolic name of the graph displayed by the canvas

tileSize

/*Number*/ tileSize

(read-only) the width and height of the image tiles showing the graph

x

/*Number*/ x

(read-only) x-coordinate of the upper right corner of the visible area (world coordinates)

y

/*Number*/ y

(read-only) y-coordinate of the upper right corner of the visible area (world coordinates)

zoom

/*Number*/ zoom

(read-only) the current zoom factor

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.

clear

clear(/*Boolean?*/ newGraph)

clears the display

Parameters:

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

fitContent

fitContent()

adjusts the vieport and the zoom level such that the entire graph is displayed in the entire area. The zoom level is not set to value bigger than the maxZoomForFitContent attribute of this canvas instance.

fix

fix()

disables panning temporarily. This is only useful in "pan" mode.

getGraph

Graph getGraph()

returns the current graph.

getHitTest

HitTest getHitTest()

returns the hit test instance used by this graph canvas.

getLastHitInfo

Object 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 position over the canvas as an object with "x" and "y" fields.

getViewCoordinates

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

returns the coordinates of the last mouse position over the canvas as an object with "x" and "y" fields in view coordinates (pixels).

getWorldCoordinates

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

returns the coordinates of the last mouse position over the canvas as an object with "x" and "y" fields in world coordinates.

highlight

highlight(/*String*/ id)

highlights the graph element with the given id.

Parameters:

id - id of a node or edge

isAutoRefresh

Boolean isAutoRefresh()

returns whether the canvas refreshes itself whenever the graph changes.

isMouseOver

Boolean isMouseOver()

returns true, if the mouse is over the canvas.

onClickEdge

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

is called for a click event concerning an edge.

Parameters:

edgeId - the id of the edge

info - the hit info

evt - the click event

onClickEdgeLabel

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

is called for a click event concerning an edge label.

Parameters:

edgeLabelId - the id of the edge label

info - the hit info

evt - the click event

onClickNode

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

is called, if the user clicks a node.

Parameters:

nodeId - the id of the clicked node

info - the hit info

evt - the click event

onClickNodeLabel

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

is called for a click event concerning a node label.

Parameters:

nodeLabelId - the id of the node label

info - the hit info

evt - the click event

onClickPaper

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

is called for a click event which does not hit any graph element.

Parameters:

info - the hit info

evt - the click event

onDblClickEdge

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

is called for a double click event concerning an edge.

Parameters:

edgeId - the id of the edge

info - the hit info

evt - the double click event

onDblClickEdgeLabel

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

is called for a double click event concerning an edge label.

Parameters:

edgeLabelId - the id of the edge label

info - the hit info

evt - the double click event

onDblClickNode

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

is called, if the user double clicks a node.

Parameters:

nodeId - the id of the double clicked node

info - the hit info

evt - the double click event

onDblClickNodeLabel

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

is called for a double click event concerning a node label.

Parameters:

nodeLabelId - the id of the node label

info - the hit info

evt - the double click event

onMouseOutEdge

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

is called for a mouse out event concerning an edge.

Parameters:

edgeId - the id of the edge

info - the hit info

evt - the mouse out event

onMouseOutEdgeLabel

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

is called for a mouse out event concerning an edge label.

Parameters:

edgeLabelId - the id of the edge label

info - the hit info

evt - the mouse out event

onMouseOutNode

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

is called for a mouse out event concerning a node.

Parameters:

nodeId - the id of the node

info - the hit info

evt - the mouse out event

onMouseOutNodeLabel

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

is called for a mouse out event concerning a node label.

Parameters:

nodeLabelId - the id of the node label

info - the hit info

evt - the mouse out event

onMouseOverEdge

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

is called for a mouse over event concerning an edge.

Parameters:

edgeId - the id of the edge

info - the hit info

evt - the mouse over event

onMouseOverEdgeLabel

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

is called for a mouse over event concerning an edge label.

Parameters:

edgeLabelId - the id of the edge label

info - the hit info

evt - the mouse over event

onMouseOverNode

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

is called for a mouse over event concerning a node.

Parameters:

nodeId - the id of the node

info - the hit info

evt - the mouse over event

onMouseOverNodeLabel

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

is called for a mouse over event concerning a node label.

Parameters:

nodeLabelId - the id of the node label

info - the hit info

evt - the mouse over event

pathSet

pathSet(/*String*/ path)

hook for listeners called after setting a path

Parameters:

path - the symbolic graph name

pushTiles

pushTiles()

moves the currently visible tiles to the second layer. 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.

Parameters:

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

refresh

refresh(/*Object?*/ bounds, /*Object?*/ shift, /*Boolean?*/ doNotPushTiles)

refreshes the display, useful after changes of the graph

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

release

release()

enables panning again (after a call to fix()).

requestDone

requestDone(/*Boolean*/ success)

hook for listeners called after a server request

Parameters:

success - whether the request succeeded

setAutoRefresh

setAutoRefresh(/*bool*/ autoRefresh)

sets whether the canvas refreshes itself whenever the graph changes. This does not apply to grouping changes.

setBaseURL

setBaseURL(/*String*/ baseURL)

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

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 the graph. This is suitable, if the canvas is used for displaying a graph overview, for example.

setPanMode

setPanMode(/*Boolean*/ replaceTiles)

sets the interaction moode to the "normal" pan mode, where the user can pan the graph. This is opposed to the no interaction mode, which is more suitable, if the canvas is used for displaying a graph overview.

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 - symbolic name of the graph

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

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 right corner.

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.

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.

shift

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

shifts the visible area by (dx, dy).

tileLoaded

tileLoaded(/*String*/ tileId)

hook for listeners called after loading a tile

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