Skip to content
Nodus

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