View & camera

nodus.view controls the camera and answers spatial queries about what is on screen. Camera moves take an optional opts that commonly carries { duration } (milliseconds) to animate the transition. For the coordinate model see Coordinate system and the Controlling the camera guide.

Zoom

• setZoom(zoom, opts?) — set the zoom level.
• zoomIn(opts?), zoomOut(opts?) — step the zoom in or out.
• getZoom() — the current zoom level.

nodus.view.setZoom(2, { duration: 200 });
nodus.view.zoomIn();
const z = nodus.view.getZoom();

Pan and center

• setCenter(center, opts?) — center the camera on a point.
• getCenter() -> {x, y} — the current center, in graph coordinates.
• move(delta, opts?) — pan by a delta.
• moveTo(target, opts?) — pan to a target.
• moveToBounds(bounds, opts?) — pan/zoom to fit a bounds.

nodus.view.setCenter({ x: 0, y: 0 }, { duration: 300 });
nodus.view.move({ x: 50, y: 0 });

Rotate

• setAngle(angle, opts?) — set the camera angle.
• rotate(delta, opts?) — rotate by a delta.
• getAngle() — the current angle.

nodus.view.setAngle(Math.PI / 6, { duration: 250 });

Full state

• set(view, opts?) — apply a complete view state (center, zoom, angle).
• get() — read the complete view state.

const saved = nodus.view.get();
// ...later...
nodus.view.set(saved, { duration: 400 });

Coordinates

• graphToScreenCoordinates(pt) — convert a graph point to screen pixels.
• screenToGraphCoordinates(pt) — convert screen pixels to a graph point.

const screenPt = nodus.view.graphToScreenCoordinates({ x: 0, y: 0 });
const graphPt = nodus.view.screenToGraphCoordinates({ x: 120, y: 80 });

Hit-testing and spatial queries

• getElementAt(pt) — the element under a point.
• getElementsInView() — elements currently visible.
• getElementsInside(x1, y1, x2, y2, inGraphCoords?) — elements within a rectangle. Set inGraphCoords to interpret the rectangle in graph coordinates.
• getBounds() — the viewport bounds.
• getGraphBoundingBox(opts?) — the bounding box of the whole graph.
• getTextBoundingBox(el) — the bounding box of an element’s text.
• getNodeBadgeAt(node, position) — the badge of a node at a position.

const el = nodus.view.getElementAt({ x: 120, y: 80 });
const visible = nodus.view.getElementsInView();
const inBox = nodus.view.getElementsInside(0, 0, 200, 200);

Fit

• locateGraph(opts?) -> Promise<void> — fit the whole graph in the viewport.
• locateRawGraph(graph, opts?) — fit to the bounds of a provided RawGraph.

await nodus.view.locateGraph({ duration: 400 });

Size

• getSize() -> {width, height} — the current viewport size.
• setSize({width, height}) -> Promise<void> — resize the viewport.
• forceResize() — force a resize/relayout to the container.

const { width, height } = nodus.view.getSize();
await nodus.view.setSize({ width: 800, height: 600 });

Fullscreen

• setFullScreen(bool) — enter or leave fullscreen.
• isFullScreen() — whether fullscreen is active.

nodus.view.setFullScreen(true);

Frame sync

• beforeNextFrame() -> Promise<void> — resolves before the next frame renders.
• afterNextFrame() -> Promise<void> — resolves after the next frame renders.
• animationInProgress() — whether an animation is currently running.

await nodus.view.afterNextFrame();
// the latest changes are now on screen

Raster snapshot

• getImageData() — read back the rendered surface as raster image data. For exporting see Utilities.

const image = nodus.view.getImageData();