WeaveStageZoomPlugin

Overview

The WeaveStageZoomPlugin class that adds zooming capabilities to the canvas Stage. It allows users to zoom in and out using gestures like the mouse wheel, trackpad, or programmatic controls, enabling smooth navigation across large or detailed workspaces.

Zooming makes it easier for users to focus on fine details or get a high-level overview of complex visual layouts during collaboration.

The class extends the WeavePlugin class

Name

This plugin name property value is stageZoom.

Import

import { WeaveStageZoomPlugin } from "@inditextech/weave-sdk";

Instantiation

new WeaveStageZoomPlugin(params?: WeaveStageZoomPluginConfig);

TypeScript types

type WeaveStageZoomChanged = {
  scale: number;
  zoomSteps: number[];
  actualStep: number;
  onDefaultStep: boolean;
  canZoomIn: boolean;
  canZoomOut: boolean;
};

type WeaveStageZoomPluginOnZoomChangeEvent = WeaveStageZoomChanged;

type WeaveStageZoomPluginConfig = {
  zoomSteps: number[];
  defaultZoom: number;
  fitToScreen: {
    padding: number;
  };
  fitToSelection: {
    padding: number;
  };
  zoomInertia: {
    friction: number;
    mouseWheelStep: number;
    trackpadStep: number;
  };
};

type DeepPartial<T> = {
  [P in keyof T]?: T[P] extends object
    ? T[P] extends Function
      ? T[P]
      : DeepPartial<T[P]>
    : T[P];
};

type WeaveStageZoomPluginParams = {
  config?: DeepPartial<WeaveStageZoomPluginConfig>;
};

Parameters

For WeaveStageZoomPluginConfig:

For WeaveStageZoomPluginConfig:

Methods

canZoomOut

canZoomOut(): boolean

Returns true if zoom-out is possible with the defined steps and actual step, return false otherwise.

canZoomIn

canZoomIn(): boolean

Returns true if zoom-in is possible with the defined steps and actual step, return false otherwise.

zoomToStep

zoomToStep(index: number): void

This method set the defined step index as zoom.

setZoom

setZoom(scale: number, centered: boolean = true, pointer?: Konva.Vector2d): void

This method set the defined zoom as scale, the zoom by default is centered on screen and if a pointer is provided will use that pointer as zoom center.

fitToScreen

fitToScreen(): void

This method fits the zoom so all elements on the canvas are visible on the user screen or viewport.

fitToNodes

fitToNodes(nodes: string[], smartZoom: boolean = false): void

This method fits the zoom so all elements Id defined on the nodes parameter are visible on the user screen or viewport. If smartZoom is true, no scaling is done, only panning to the center of the defined elements.

fitToSelection

fitToSelection(smartZoom: boolean = false): void

This method fits the zoom so all selected elements (uses the WeaveNodesSelectionPlugin) are visible on the user screen or viewport. If smartZoom is true, no scaling is done, only panning to the center of the defined elements.

Events

onZoomChange

onZoomChange: WeaveStageZoomPluginOnZoomChangeEvent;

The onZoomChange event is called when the the zoom of the stage is changed.