|
|||||
SUMMARY: FIELD | CONSTR | METHOD| EVENT | DETAIL: FIELD | CONSTR | METHOD| EVENT |
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()
.
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
HTMLElement |
svgLayer
The element containing the |
String |
svgPrefix
The prefix added to the generated SVG. Use this value if multiple GraphCanvas objects
in |
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 |
HTMLElement |
tiles
The element containing the currently displayed tiles. |
HTMLElement |
tilesFrame
The element containing the current and old tiles (in |
Object |
touchDragSize
the area in view coordinates the touch may stay in before a
movement is considered a drag.
The default value is |
Boolean |
useTouchEventsExclusively
Whether to use only touch events (if available). The default is true.
If the value of this property is |
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 |
|
clear(Boolean newGraph)
Clears the display. |
yfiles/client/tiles/NavigationInputMode |
createNavigationMode()
Creates a |
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 |
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 |
Boolean |
isMainTouch(undefined touch)
Returns whether the provided touch instance is currently considered the "mainTouch". |
Boolean |
isMouseOver()
Returns |
Boolean |
isSVGMode()
Returns whether or not this canvas is in |
|
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 |
|
onClickEdgeLabel(String edgeLabelId, yfiles/client/support/HitInfo info, Event evt)
Called when an edge label was clicked, if |
|
onClickNode(String nodeId, yfiles/client/support/HitInfo info, Event evt)
Called when a node was clicked, and |
|
onClickNodeLabel(String nodeLabelId, yfiles/client/support/HitInfo info, Event evt)
Called when a node label is clicked, if |
|
onClickPaper(yfiles/client/support/HitInfo info, Event evt)
Called when a click event does not hit any graph element, if |
|
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 |
|
onDblClickEdgeLabel(String edgeLabelId, yfiles/client/support/HitInfo info, Event evt)
Called when an edge label was double-clicked, if |
|
onDblClickNode(String nodeId, yfiles/client/support/HitInfo info, Event evt)
Called when a node was double-clicked, and |
|
onDblClickNodeLabel(String nodeLabelId, yfiles/client/support/HitInfo info, Event evt)
Called when a node label is double-clicked, if |
|
onDblTapEdge(String edgeId, yfiles/client/support/HitInfo info, Touch touch)
Called when an edge was double-tapped, if |
|
onDblTapEdgeLabel(String edgeLabelId, yfiles/client/support/HitInfo info, Touch touch)
Called when an edge label was double-tapped, if |
|
onDblTapNode(String nodeId, yfiles/client/support/HitInfo info, Touch touch)
Called when a node was double-tapped, if |
|
onDblTapNodeLabel(String nodeLabelId, yfiles/client/support/HitInfo info, Touch touch)
Called when a node label was double-tapped, if |
|
onDblTapPaper(yfiles/client/support/HitInfo info, Touch touch)
Called for a double tap event that does not hit any graph element, if |
|
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 |
|
onLongPressEdgeLabel(String edgeLabelId, yfiles/client/support/HitInfo info, Touch touch)
Called when an edge label was long-pressed, if |
|
onLongPressNode(String nodeId, yfiles/client/support/HitInfo info, Touch touch)
Called when a node was long-pressed, if |
|
onLongPressNodeLabel(String nodeLabelId, yfiles/client/support/HitInfo info, Touch touch)
Called when a node label was long-pressed, if |
|
onLongPressPaper(yfiles/client/support/HitInfo info, Touch touch)
Called for a long press event that does not hit any graph elements, if |
|
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 |
|
onMouseOutEdgeLabel(String edgeLabelId, yfiles/client/support/HitInfo info, Event evt)
Called when the mouse exits the bounds of an edge label, if |
|
onMouseOutNode(String nodeId, yfiles/client/support/HitInfo info, Event evt)
Called when the mouse exits the bounds of a node, if |
|
onMouseOutNodeLabel(String nodeLabelId, yfiles/client/support/HitInfo info, Event evt)
Called when the mouse exits the bounds of a node label, if |
|
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 |
|
onMouseOverEdgeLabel(String edgeLabelId, yfiles/client/support/HitInfo info, Event evt)
Called when the mouse enters the bounds of an edge label, if |
|
onMouseOverNode(String nodeId, yfiles/client/support/HitInfo info, Event evt)
Called when the mouse enters the bounds of a node, if |
|
onMouseOverNodeLabel(String nodeLabelId, yfiles/client/support/HitInfo info, Event evt)
Called when the mouse enters the bounds of a node label, if |
|
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 |
|
onTapEdgeLabel(String edgeLabelId, yfiles/client/support/HitInfo info, Touch touch)
is called for a tap event on an edge label, if |
|
onTapNode(String nodeId, yfiles/client/support/HitInfo info, Touch touch)
Called when a node is tapped, if |
|
onTapNodeLabel(String nodeLabelId, yfiles/client/support/HitInfo info, Touch touch)
Called when a node label is tapped, if |
|
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 |
|
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 |
---|
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 Detail |
---|
GraphCanvas()
Method Detail |
---|
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()
.
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(Boolean newGraph)
Clears the display.
newGraph
- If true
(the default), the canvas is set up for loading a new graph.
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.
This method takes the limits set on the viewportLimiter
into account.
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()
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.
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.
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.
Use the static methods of HitTest like getHitId() to examine the details of the hit info.
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.
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.
rawX
- The raw x coordinate.
rawY
- The raw y coordinate.
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.
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()
.
x
- The x coordinate.
y
- The y coordinate.
highlight(String id)
Highlights the graph element with the given id.
id
- id of a node or edge
increaseZoom(Number factor)
Increases the canvas zoom value, using the provided factor.
This method takes the limits set on the viewportLimiter
into account.
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(Function callback)
Invalidates the current SVG and reloads it from the server. Also updates the world bounds.
callback
- A Callback that will be invoked when the new SVG has been loaded
Boolean isAutoRefresh()
Whether the canvas refreshes itself whenever the graph changes.
Boolean isBitmapMode()
Returns whether or not this canvas is in Bitmap Mode
Returns true
if Bitmap Mode
is enabled; false
otherwise.
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.
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
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".
touch
-
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
.
Returns true
if SVG Mode
is enabled; false
otherwise.
onClick(Event evt)
Called when the user clicks the widget
evt
- The event.
onClickEdge(String edgeId, yfiles/client/support/HitInfo info, Event evt)
Called when an edge was clicked, if edgeEvents
are enabled.
edgeId
- The id of the clicked edge
info
- The hit info, as returned by getHitTest().getHitInfo()
evt
- The click event
onClickEdgeLabel(String edgeLabelId, yfiles/client/support/HitInfo info, Event evt)
Called when an edge label was clicked, if edgeLabelEvents
are enabled.
edgeLabelId
- The id of the clicked edge label
info
- The hit info, as returned by getHitTest().getHitInfo()
evt
- The click event
onClickNode(String nodeId, yfiles/client/support/HitInfo info, Event evt)
Called when a node was clicked, and nodeEvents
are enabled.
nodeId
- The id of the clicked node
info
- The hit info, as returned by getHitTest().getHitInfo()
evt
- The click event
onClickNodeLabel(String nodeLabelId, yfiles/client/support/HitInfo info, Event evt)
Called when a node label is clicked, if nodeLabelEvents
are enabled.
nodeLabelId
- The id of the node label
info
- The hit info, as returned by getHitTest().getHitInfo()
evt
- The click event
onClickPaper(yfiles/client/support/HitInfo info, Event evt)
Called when a click event does not hit any graph element, if paperEvents
are enabled.
info
- The hit info, as returned by getHitTest().getHitInfo()
evt
- The click event
onDblClick(Event evt)
Called when the user double-clicks the widget
evt
-
onDblClickEdge(String edgeId, yfiles/client/support/HitInfo info, Event evt)
Called when an edge was double-clicked, if edgeEvents
are enabled.
edgeId
- The id of the clicked edge
info
- The hit info, as returned by getHitTest().getHitInfo()
evt
- The double click event
onDblClickEdgeLabel(String edgeLabelId, yfiles/client/support/HitInfo info, Event evt)
Called when an edge label was double-clicked, if edgeLabelEvents
are enabled.
edgeLabelId
- The id of the clicked edge label
info
- The hit info, as returned by getHitTest().getHitInfo()
evt
- The double click event
onDblClickNode(String nodeId, yfiles/client/support/HitInfo info, Event evt)
Called when a node was double-clicked, and nodeEvents
are enabled.
nodeId
- The id of the double clicked node
info
- The hit info, as returned by getHitTest().getHitInfo()
evt
- The double click event
onDblClickNodeLabel(String nodeLabelId, yfiles/client/support/HitInfo info, Event evt)
Called when a node label is double-clicked, if nodeLabelEvents
are enabled.
nodeLabelId
- The id of the node label
info
- The hit info, as returned by getHitTest().getHitInfo()
evt
- The double click event
onDblTapEdge(String edgeId, yfiles/client/support/HitInfo info, Touch touch)
Called when an edge was double-tapped, if edgeEvents
are enabled.
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(String edgeLabelId, yfiles/client/support/HitInfo info, Touch touch)
Called when an edge label was double-tapped, if edgeLabelEvents
are enabled.
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(String nodeId, yfiles/client/support/HitInfo info, Touch touch)
Called when a node was double-tapped, if nodeEvents
are enabled.
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(String nodeLabelId, yfiles/client/support/HitInfo info, Touch touch)
Called when a node label was double-tapped, if nodeLabelEvents
are enabled.
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(yfiles/client/support/HitInfo info, Touch touch)
Called for a double tap event that does not hit any graph element, if paperEvents
are enabled.
info
- The hit info, as returned by getHitTest().getHitInfo()
touch
- The touch instance of the double-taps' last touch event.
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.
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(String edgeLabelId, yfiles/client/support/HitInfo info, Touch touch)
Called when an edge label was long-pressed, if edgeLabelEvents
are enabled.
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(String nodeId, yfiles/client/support/HitInfo info, Touch touch)
Called when a node was long-pressed, if nodeEvents
are enabled.
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(String nodeLabelId, yfiles/client/support/HitInfo info, Touch touch)
Called when a node label was long-pressed, if nodeLabelEvents
are enabled.
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(yfiles/client/support/HitInfo info, Touch touch)
Called for a long press event that does not hit any graph elements, if paperEvents
are enabled.
info
- The hit info, as returned by getHitTest().getHitInfo()
touch
- The touch instance of the original touch down event.
onMouseDown(Event evt)
Called when the user pressed the mouse on the widget but before it is released
evt
-
onMouseMove(Event evt)
Called when the mouse is moved on the canvas
evt
-
onMouseOut(Event evt)
Called when the mouse left the canvas
evt
-
onMouseOutEdge(String edgeId, yfiles/client/support/HitInfo info, Event evt)
Called when the mouse stops hovering over an edge path, if edgeEvents
are enabled.
edgeId
- The id of the edge
info
- The hit info, as returned by getHitTest().getHitInfo()
evt
- The mouse out event
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.
edgeLabelId
- The id of the edge label
info
- The hit info, as returned by getHitTest().getHitInfo()
evt
- The mouse out event
onMouseOutNode(String nodeId, yfiles/client/support/HitInfo info, Event evt)
Called when the mouse exits the bounds of a node, if nodeEvents
are enabled.
nodeId
- the id of the node
info
- The hit info, as returned by getHitTest().getHitInfo()
evt
- the mouse out event
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.
nodeLabelId
- The id of the node label
info
- The hit info, as returned by getHitTest().getHitInfo()
evt
- The mouse out event
onMouseOver(Event evt)
Called when the mouse is over the canvas
evt
-
onMouseOverEdge(String edgeId, yfiles/client/support/HitInfo info, Event evt)
Called when the mouse hovers over an edge path, if edgeEvents
are enabled.
edgeId
- The id of the edge
info
- The hit info, as returned by getHitTest().getHitInfo()
evt
- The mouse over event
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.
edgeLabelId
- The id of the edge label
info
- The hit info, as returned by getHitTest().getHitInfo()
evt
- The mouse over event
onMouseOverNode(String nodeId, yfiles/client/support/HitInfo info, Event evt)
Called when the mouse enters the bounds of a node, if nodeEvents
are enabled.
nodeId
- The id of the node
info
- The hit info, as returned by getHitTest().getHitInfo()
evt
- The mouse over event
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.
nodeLabelId
- The id of the node label
info
- The hit info, as returned by getHitTest().getHitInfo()
evt
- The mouse over event
onMouseUp(Event evt)
Called when the user releases a pressed mouse button
evt
-
onPathSet(String path)
hook for listeners called after setting a path
path
- the symbolic graph name
onPinch(Object worldCoords1, Object worldCoords2, Array pinchTouches)
Callback that is invoked when a touch (or both touches) of a pinch gesture moved.
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(Object worldCoords1, Object worldCoords2, Array pinchTouches)
Callback that is invoked when a pinch gesture has ended.
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(Object worldCoords1, Object worldCoords2, Array pinchTouches)
Callback that is invoked when a pinch gesture was started on the canvas.
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()
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.
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(String edgeLabelId, yfiles/client/support/HitInfo info, Touch touch)
is called for a tap event on an edge label, if edgeLabelEvents
are enabled.
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(String nodeId, yfiles/client/support/HitInfo info, Touch touch)
Called when a node is tapped, if nodeEvents
are enabled.
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(String nodeLabelId, yfiles/client/support/HitInfo info, Touch touch)
Called when a node label is tapped, if nodeLabelEvents
are enabled.
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(yfiles/client/support/HitInfo info, Touch touch)
Called for a tap event that does not hit any graph elements.
info
- The hit info, as returned by getHitTest().getHitInfo()
touch
- The touch instance of the touch tap event.
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.
touch
- The touch event
worldCoords
- The world coordinates of the touch event.
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.
touch
- The touch event
worldCoords
- The world coordinates of the touch event.
onTouchMove(Touch touch, Object worldCoords)
Callback that is invoked when a touch location that started on the canvas was moved.
touch
- The touch event
worldCoords
- The world coordinates of the touch event.
onTouchStart(Touch touch, Object worldCoords)
Callback that is invoked when a touch gesture has started on the canvas.
touch
- The touch event
worldCoords
- The world coordinates of the touch event.
onTouchTapped(Touch touch, Object worldCoords, int tapCount)
Callback that is invoked when a tap gesture occurred on the canvas.
touch
- The touch event
worldCoords
- The world coordinates of the touch event.
tapCount
-
onWorldBoundsChanged(yfiles/client/tiles/GraphBounds oldBounds, yfiles/client/tiles/GraphBounds newBounds)
Called when the world bounds changed
oldBounds
- The old graph bounds
newBounds
- The new graph bounds
onZoomChanged(Object evt)
Called when the zoom is changed
The provided evt argument is an object which defines the properties "zoom", "oldZoom" and "zoomPoint".
evt
- An object which defines the properties "zoom", "oldZoom" and "zoomPoint".
pathSet(String path)
hook for listeners called after setting a path This callback is deprecated - please use onPathSet() instead.
path
- the symbolic graph name
postCreate()
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(Boolean replaceTiles)
Calculates the tiles for the visible area and loads missing tiles from the server. This method is only relevant in Bitmap Mode.
replaceTiles
- If true, existing tiles are replaced with newly loaded tiles.
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
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(Boolean success)
hook for listeners called after a server request
success
- whether the request succeeded
resize(Object marginBox)
Resizes the canvas.
marginBox
- The object must have the properties
t
(top offset), l
(left offset),
h
(height) and w
(width).
setAutoRefresh(Boolean autoRefresh)
Sets whether the canvas refreshes itself whenever the graph changes.
This does not apply to grouping changes.
autoRefresh
- If true
the canvas can refresh itself.
setBaseURL(String baseURL)
Sets the base path for server requests (possibly relative to the current page)
baseURL
- The new base url.
setCenter(Object center)
Sets the world coordinates at the center of the view.
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(function customCopySVG_DOM_Attribute)
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.
highlighter
- The highlighter instance that provides drawNodeHighlight and drawEdgeHighlight implementations.
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(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.
replaceTiles
- If true
, existing tiles are replaced with newly loaded tiles.
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.
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(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.
mode
- yfiles/client/tiles/widget/GraphCanvas.RENDER_MODE_SVG
or
yfiles/client/tiles/widget/GraphCanvas.RENDER_MODE_BITMAP
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.
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(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.
worldX
- The x-coordinate of the new viewpoint.
worldY
- The y-coordinate of the new viewpoint.
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.
zoom
- The new zoom value.
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.
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(Number dx, Number dy, Boolean fixOldTiles)
Shifts the visible area by (dx, dy).
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(String tileId)
Hook for listeners called after loading a bitmap tile. This method is only relevant in Bitmap Mode.
tileId
- The id of the tile that has been loaded.
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.
x
- y-coordinate of a point on the page
y
-
unhighlight(String id)
Unhighlights the graph elements with the given id.
id
- id of a node or edge
unhighlightAll()
Unhighlights all graph elements.
updateWorldBounds(Object newWorldBounds, Boolean doNotUpdateHitTest)
sets new world bounds for this graph canvas.
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(Number x, Number y, Number width, Number height, Number zoom)
hook for listeners called after a viewport change
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(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.
worldRect
- A rectangle with properties x
,y
,width
and height
that specifies the desired rectangle in world coordinates that should fit into the viewport.
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.
evt
- The mouse 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.
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.