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/_WidgetBase
dijit/_TemplatedMixin
 
Field Summary
 string RENDER_MODE_BITMAP           
 string RENDER_MODE_SVG           
 String baseURL           

Base path for server requests

 boolean dispatchGraphItemEvents           

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

 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}.

 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.

 Boolean edgeEvents           

Whether edge events should be reported.

 Boolean edgeLabelEvents           

Whether edge events should be reported.

 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.

 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.

 Number height           

The height of the canvas DOM node in pixels

 Number highlightNodeSurroundPixels           

The surrounding pixels for a highlighted node (default 10)

 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.

 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.

 Number maxZoomForFitContent           

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

 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.

 Number mouseClickSize           

The amount of pixels the mouse pointer may move between a mouse down and mouse up event in view coordinates along the x- or y-axis for a mouse click event. When a mouse click event is dispatched, the function isClickEvent() checks the delay and offset between the mouse down and mouse up event to determine if the event is actually considered a click event. The default value is 3 pixels.

 Number mouseClickTime           

The time that may pass between a mouse down and a mouse up event for a mouse click event. When a mouse click event is dispatched, the function isClickEvent() checks the delay and offset between the mouse down and mouse up event to determine if the event is actually considered a click event. The default value is 500 Milliseconds.

 Number mouseWheelScrollFactor           

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

 boolean mouseWheelZoom           

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

 HTMLDivElement movables           

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

 null navigationMode           

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.

 Boolean nodeEvents           

Whether node events should be reported.

 Boolean nodeLabelEvents           

Whether nodelabel events should be reported.

 HTMLElement oldTiles           

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

 HTMLElement overlays           

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

 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.

 Boolean paperEvents           

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

 String path           

The symbolic name of the graph displayed by the canvas

 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.

 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.

 HTMLElement svgLayer           

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

 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.

 String templateString           

The dojo template used when creating this component.

 Number tileSize           

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

 HTMLElement tiles           

The element containing the currently displayed tiles.

 HTMLElement tilesFrame           

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

 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}.

 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.

 yfiles/client/support/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.

 Number width           

The width of the canvas DOM node in pixels

 Number x           

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

 Number y           

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

 Number zoom           

The current zoom factor

 Number zoomMarginFactor           

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

 
Constructor Summary
GraphCanvas()
           
 
Method Summary
  beforeRequest()           

hook for listeners called before a server request

  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().

  clear(Boolean newGraph)           

Clears the display.

 yfiles/client/tiles/NavigationInputMode createNavigationMode()           

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

 instance createSVGViewPort()           
  decreaseZoom(Number factor)           

Decreases the canvas zoom value, using the provided factor.

  fitContent()           

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

 Object getCenter()           

Returns the world coordinates at the center of the view.

 yfiles/client/tiles/Graph getGraph()           

Returns the current graph.

 yfiles/client/tiles/GraphHighlighter getHighlighter()           

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

 yfiles/client/tiles/HitTest getHitTest()           

returns the hit test instance used by this graph canvas.

 yfiles/client/support/HitInfo getLastHitInfo()           

returns the last hit info object.

 Object getMousePosition()           

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

 Object getViewCoordinates(Number rawX, Number rawY)           

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

 Object getViewport()           

Returns the currently visible viewing region in world coordinates as an object with x, y, width and height properties

 yfiles/client/tiles/GraphBounds getWorldBounds()           

The current world bounds.

 Object getWorldCoordinates(Number x, Number y)           

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

  highlight(String id)           

Highlights the graph element with the given id.

  increaseZoom(Number factor)           

Increases the canvas zoom value, using the provided factor.

  invalidateSVG(Function callback)           

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

 Boolean isAutoRefresh()           

Whether the canvas refreshes itself whenever the graph changes.

 Boolean isBitmapMode()           

Returns whether or not this canvas is in Bitmap Mode

 Boolean isClickEvent(Number delay, Number dx, Number dy)           

Returns whether a click event is actually considered a click, given the delay and location delta between the mouse down and mouse up events. The behavior can be adapted using the mouseClickSize and mouseClickTime properties.

 Boolean isMainTouch(undefined touch)           

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

 Boolean isMouseOver()           

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

 Boolean isSVGMode()           

Returns whether or not this canvas is in SVG Mode.

  onClick(Event evt)           

Called when the user clicks the widget

  onClickEdge(String edgeId, yfiles/client/support/HitInfo info, Event evt)           

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

  onClickEdgeLabel(String edgeLabelId, yfiles/client/support/HitInfo info, Event evt)           

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

  onClickNode(String nodeId, yfiles/client/support/HitInfo info, Event evt)           

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

  onClickNodeLabel(String nodeLabelId, yfiles/client/support/HitInfo info, Event evt)           

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

  onClickPaper(yfiles/client/support/HitInfo info, Event evt)           

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

  onDblClick(Event evt)           

Called when the user double-clicks the widget

  onDblClickEdge(String edgeId, yfiles/client/support/HitInfo info, Event evt)           

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

  onDblClickEdgeLabel(String edgeLabelId, yfiles/client/support/HitInfo info, Event evt)           

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

  onDblClickNode(String nodeId, yfiles/client/support/HitInfo info, Event evt)           

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

  onDblClickNodeLabel(String nodeLabelId, yfiles/client/support/HitInfo info, Event evt)           

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

  onDblTapEdge(String edgeId, yfiles/client/support/HitInfo info, Touch touch)           

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

  onDblTapEdgeLabel(String edgeLabelId, yfiles/client/support/HitInfo info, Touch touch)           

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

  onDblTapNode(String nodeId, yfiles/client/support/HitInfo info, Touch touch)           

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

  onDblTapNodeLabel(String nodeLabelId, yfiles/client/support/HitInfo info, Touch touch)           

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

  onDblTapPaper(yfiles/client/support/HitInfo info, Touch touch)           

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

  onLoadSVG()           

called when a new SVG is requested from the server.

  onLoadTiles()           

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

  onLongPressEdge(String edgeId, yfiles/client/support/HitInfo info, Touch touch)           

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

  onLongPressEdgeLabel(String edgeLabelId, yfiles/client/support/HitInfo info, Touch touch)           

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

  onLongPressNode(String nodeId, yfiles/client/support/HitInfo info, Touch touch)           

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

  onLongPressNodeLabel(String nodeLabelId, yfiles/client/support/HitInfo info, Touch touch)           

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

  onLongPressPaper(yfiles/client/support/HitInfo info, Touch touch)           

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

  onMouseDown(Event evt)           

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

  onMouseMove(Event evt)           

Called when the mouse is moved on the canvas

  onMouseOut(Event evt)           

Called when the mouse left the canvas

  onMouseOutEdge(String edgeId, yfiles/client/support/HitInfo info, Event evt)           

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

  onMouseOutEdgeLabel(String edgeLabelId, yfiles/client/support/HitInfo info, Event evt)           

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

  onMouseOutNode(String nodeId, yfiles/client/support/HitInfo info, Event evt)           

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

  onMouseOutNodeLabel(String nodeLabelId, yfiles/client/support/HitInfo info, Event evt)           

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

  onMouseOver(Event evt)           

Called when the mouse is over the canvas

  onMouseOverEdge(String edgeId, yfiles/client/support/HitInfo info, Event evt)           

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

  onMouseOverEdgeLabel(String edgeLabelId, yfiles/client/support/HitInfo info, Event evt)           

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

  onMouseOverNode(String nodeId, yfiles/client/support/HitInfo info, Event evt)           

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

  onMouseOverNodeLabel(String nodeLabelId, yfiles/client/support/HitInfo info, Event evt)           

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

  onMouseUp(Event evt)           

Called when the user releases a pressed mouse button

  onPathSet(String path)           

hook for listeners called after setting a path

  onPinch(Object worldCoords1, Object worldCoords2, Array pinchTouches)           

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

  onPinchEnd(Object worldCoords1, Object worldCoords2, Array pinchTouches)           

Callback that is invoked when a pinch gesture has ended.

  onPinchStart(Object worldCoords1, Object worldCoords2, Array pinchTouches)           

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

  onSVGLoaded()           

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

  onTapEdge(String edgeId, yfiles/client/support/HitInfo info, Touch touch)           

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

  onTapEdgeLabel(String edgeLabelId, yfiles/client/support/HitInfo info, Touch touch)           

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

  onTapNode(String nodeId, yfiles/client/support/HitInfo info, Touch touch)           

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

  onTapNodeLabel(String nodeLabelId, yfiles/client/support/HitInfo info, Touch touch)           

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

  onTapPaper(yfiles/client/support/HitInfo info, Touch touch)           

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

  onTilesLoaded()           

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

  onTouchEnd(Touch touch, Object worldCoords)           

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

  onTouchLongPress(Touch touch, Object worldCoords)           

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

  onTouchMove(Touch touch, Object worldCoords)           

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

  onTouchStart(Touch touch, Object worldCoords)           

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

  onTouchTapped(Touch touch, Object worldCoords, int tapCount)           

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

  onWorldBoundsChanged(yfiles/client/tiles/GraphBounds oldBounds, yfiles/client/tiles/GraphBounds newBounds)           

Called when the world bounds changed

  onZoomChanged(Object evt)           

Called when the zoom is changed

  pathSet(String path)           

hook for listeners called after setting a path This callback is deprecated - please use onPathSet() instead.

  postCreate()           
  pushTiles()           

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

  recalculateTiles(Boolean replaceTiles)           

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

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

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

  requestDone(Boolean success)           

hook for listeners called after a server request

  resize(Object marginBox)           

Resizes the canvas.

  setAutoRefresh(Boolean autoRefresh)           

Sets whether the canvas refreshes itself whenever the graph changes.

  setBaseURL(String baseURL)           

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

  setCenter(Object center)           

Sets the world coordinates at the center of the view.

  setCustomCopySVG_DOM_Attribute(function customCopySVG_DOM_Attribute)           
  setHighlighter(yfiles/client/tiles/GraphHighlighter highlighter)           

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

  setNoInteractionMode()           

Sets the interaction mode to no interaction.

  setPanMode(Boolean replaceTiles)           

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

  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.

  setRenderMode(String mode)           

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

  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.

  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.

  setZoom(Number zoom)           

Sets the zoom factor to the specified value.

  setZoomBoundsProviders(Function minZoomProvider, Function maxZoomProvider)           

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

  shift(Number dx, Number dy, Boolean fixOldTiles)           

Shifts the visible area by (dx, dy).

  tileLoaded(String tileId)           

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

 Object toLocal(Number x, Number y)           

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

  unhighlight(String id)           

Unhighlights the graph elements with the given id.

  unhighlightAll()           

Unhighlights all graph elements.

  updateWorldBounds(Object newWorldBounds, Boolean doNotUpdateHitTest)           

sets new world bounds for this graph canvas.

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

hook for listeners called after a viewport change

  zoomTo(Object worldRect)           

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

 Boolean zoomToPointRecognizer(Event evt)           

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

  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.

 
Field Detail

RENDER_MODE_BITMAP

string RENDER_MODE_BITMAP

RENDER_MODE_SVG

string RENDER_MODE_SVG

baseURL

String baseURL

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.


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

Whether edge events should be reported.


edgeLabelEvents

Boolean edgeLabelEvents

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.


mouseClickSize

Number mouseClickSize

The amount of pixels the mouse pointer may move between a mouse down and mouse up event in view coordinates along the x- or y-axis for a mouse click event. When a mouse click event is dispatched, the function isClickEvent() checks the delay and offset between the mouse down and mouse up event to determine if the event is actually considered a click event. The default value is 3 pixels.


mouseClickTime

Number mouseClickTime

The time that may pass between a mouse down and a mouse up event for a mouse click event. When a mouse click event is dispatched, the function isClickEvent() checks the delay and offset between the mouse down and mouse up event to determine if the event is actually considered a click event. The default value is 500 Milliseconds.


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

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


navigationMode

null navigationMode

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

Whether node events should be reported.


nodeLabelEvents

Boolean nodeLabelEvents

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

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


path

String path

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.


templateString

String templateString

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.


tiles

HTMLElement tiles

The element containing the currently displayed tiles.


tilesFrame

HTMLElement tilesFrame

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

yfiles/client/support/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

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.

 
Constructor Detail

GraphCanvas

GraphCanvas()
Method Detail

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

yfiles/client/tiles/NavigationInputMode createNavigationMode()

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


createSVGViewPort

instance createSVGViewPort()

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 visible 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

yfiles/client/tiles/Graph getGraph()

Returns the current graph.


getHighlighter

yfiles/client/tiles/GraphHighlighter getHighlighter()

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


getHitTest

yfiles/client/tiles/HitTest getHitTest()

returns the hit test instance used by this graph canvas.


getLastHitInfo

yfiles/client/support/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.

Returns an object with "x" and "y" fields based on the provided parameters. 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

Object getViewport()

Returns the currently visible viewing region in world coordinates as an object with x, y, width and height properties


getWorldBounds

yfiles/client/tiles/GraphBounds getWorldBounds()

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.

Returns an object with "x" and "y" fields based on the provided parameters. The coordinates are translated using 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()

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.


isClickEvent

Boolean isClickEvent(Number delay, Number dx, Number dy)

Returns whether a click event is actually considered a click, given the delay and location delta between the mouse down and mouse up events. The behavior can be adapted using the mouseClickSize and mouseClickTime properties.

Parameters:
delay -

The delay since the mouse down event

dx -

The horizontal offset between the mouse down and mouse up location

dy -

The horizontal offset between the mouse down and mouse up location


isMainTouch

Boolean isMainTouch(undefined 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.


onClick

 onClick(Event evt)

Called when the user clicks the widget

Parameters:
evt -

The event.


onClickEdge

 onClickEdge(String edgeId, yfiles/client/support/HitInfo info, Event 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, yfiles/client/support/HitInfo info, Event 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, yfiles/client/support/HitInfo info, Event 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, yfiles/client/support/HitInfo info, Event 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(yfiles/client/support/HitInfo info, Event 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, yfiles/client/support/HitInfo info, Event 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, yfiles/client/support/HitInfo info, Event 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, yfiles/client/support/HitInfo info, Event 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, yfiles/client/support/HitInfo info, Event 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, yfiles/client/support/HitInfo info, Touch 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, yfiles/client/support/HitInfo info, Touch 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, yfiles/client/support/HitInfo info, Touch 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, yfiles/client/support/HitInfo info, Touch 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(yfiles/client/support/HitInfo info, Touch 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 Bitmap Mode.


onLongPressEdge

 onLongPressEdge(String edgeId, yfiles/client/support/HitInfo info, Touch 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, yfiles/client/support/HitInfo info, Touch 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, yfiles/client/support/HitInfo info, Touch 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, yfiles/client/support/HitInfo info, Touch 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(yfiles/client/support/HitInfo info, Touch 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(Event 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, yfiles/client/support/HitInfo info, Event 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, yfiles/client/support/HitInfo info, Event 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, yfiles/client/support/HitInfo info, Event 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, yfiles/client/support/HitInfo info, Event 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, yfiles/client/support/HitInfo info, Event 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, yfiles/client/support/HitInfo info, Event 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, yfiles/client/support/HitInfo info, Event 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, yfiles/client/support/HitInfo info, Event 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 -

onPathSet

 onPathSet(String path)

hook for listeners called after setting a path

Parameters:
path -

the symbolic graph name


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, yfiles/client/support/HitInfo info, Touch 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, yfiles/client/support/HitInfo info, Touch 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, yfiles/client/support/HitInfo info, Touch 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, yfiles/client/support/HitInfo info, Touch 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(yfiles/client/support/HitInfo info, Touch 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 Bitmap Mode.


onTouchEnd

 onTouchEnd(Touch touch, Object worldCoords)

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

Parameters:
touch -

The touch event

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 -

The touch event

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 -

The touch event

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 -

The touch event

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 -

The touch event

worldCoords -

The world coordinates of the touch event.

tapCount -

onWorldBoundsChanged

 onWorldBoundsChanged(yfiles/client/tiles/GraphBounds oldBounds, yfiles/client/tiles/GraphBounds newBounds)

Called when the world bounds changed

Parameters:
oldBounds -

The old graph bounds

newBounds -

The new graph bounds


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".


pathSet

 pathSet(String path)

hook for listeners called after setting a path This callback is deprecated - please use onPathSet() instead.

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 Bitmap Mode.

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 Bitmap Mode.

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 Bitmap Mode

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


setCustomCopySVG_DOM_Attribute

 setCustomCopySVG_DOM_Attribute(function customCopySVG_DOM_Attribute)
Parameters:
customCopySVG_DOM_Attribute -

setHighlighter

 setHighlighter(yfiles/client/tiles/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.


tileLoaded

 tileLoaded(String tileId)

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

Parameters:
tileId -

The id of the tile that has been loaded.


toLocal

Object toLocal(Number x, Number y)

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

Returns an object with x and y properties representing the passed point in coordinates relative to the canvas position.

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.


Copyright © 2006-2013 yWorks GmbH. All rights reserved.