Skip to main content

Navigating the canvas

The surface widget offers a number of methods for you to navigate your way around the rendered dataset.

Positioning​

Several methods are available to assist you with positioning the surface canvas. These are discussed in greater detail in the API documentation:

centerOn

Takes a node/group as argument and positions the surface canvas such that the given node is at the center in both axes.

centerOnHorizontally

Takes a node/group as argument and positions the surface canvas such that the given node is at the center in the horizontal axis.

centerOnVertically

Takes a node/group as argument and positions the surface canvas such that the given node is at the center in the vertical axis.

centerContent

Centers the tracked content inside the viewport, but does not adjust the current zoom (so the content may still extend past the viewport bounds)

pan

Pans the canvas by a given amount in X and Y.

setPan

Sets the position of the panned content's origin.

positionElementAt

Positions a DOM element at a given X,Y on the canvas, in canvas coordinates (meaning it takes into account the current zoom and pan). This is not intended for use with elements the surface is managing: it is designed to be used with elements such as pop-ups that you may wish to position relative to the content in your canvas.

positionElementAtEventLocation

Positions a DOM element at the apparent canvas location corresponding to the page location given by some event. This is not intended for use with elements the surface is managing: it is designed to be used with elements such as pop-ups that you may wish to position relative to the content in your canvas.

positionElementAtPageLocation

Positions a DOM element at the apparent canvas location corresponding to the given page location. This is not intended for use with elements the surface is managing: it is designed to be used with elements such as pop-ups that you may wish to position relative to the content in your canvas.

Finding elements​

Several methods are available to assist you to find elements in the canvas.

findIntersectingVertices

Finds vertices - Nodes or Groups - that intersect a rectangle defined by the given origin and dimensions.

findIntersectingNodes

Finds Nodes (not Groups) - that intersect a rectangle defined by the given origin and dimensions.

findIntersectingGroups

Finds Groups (not Nodes) - that intersect a rectangle defined by the given origin and dimensions.

Mapping coordinates​

Every now and then you'll likely want to map between the surface's coordinate system and the page coordinate system. The surface offers a few methods to assist with this.

isInViewport

Returns whether or not the given point (relative to page origin) is within the viewport for the widget.

fromPageLocation

Maps the given page location to a value relative to the viewport origin, allowing for zoom and pan of the canvas. This takes into account the offset of the viewport in the page so that what you get back is the mapped position relative to the target element's [left,top] corner. If you wish, you can supply true for 'doNotAdjustForOffset', to suppress that behavior.

toPageLocation

Maps the given location relative to the viewport origin, to a page location, allowing for zoom and pan of the canvas. This takes into account the offset of the viewport in the page so that what you get back is the mapped position relative to the target element's [left,top] corner. If you wish, you can supply true for 'doNotAdjustForOffset', to suppress that behavior.