Weave.js

WeaveStageZoomPlugin

Activates support for zoom on the stage

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;
  };
};

type WeaveStageZoomPluginParams = {
  config?: WeaveStageZoomPluginConfig;
};

Parameters

For WeaveStageZoomPluginConfig:

PropTypeDefault
config?
Partial<WeaveStageZoomPluginConfig>
-

For WeaveStageZoomPluginConfig:

PropTypeDefault
fitToSelection.padding?
number
40
fitToScreen.padding?
number
40
defaultZoom?
number
1
zoomSteps?
number[]
[ 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 1.25, 1.5, 1.75, 2, 3, 4, 6, 8, 10]

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.

Events

onZoomChange

onZoomChange: WeaveStageZoomPluginOnZoomChangeEvent;

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