Stage Zoom

Introduction

This plugin enables smooth zooming in and out of the canvas, allowing users to focus on details or get an overview of the entire workspace. It supports mouse wheel, trackpad gestures, and programmatic control, with customizable zoom levels.

This plugin enhances navigation and usability in complex visual tools like whiteboards, diagrams, or design interfaces. It integrates seamlessly with the panning and resize plugins to provide a fully scalable and interactive canvas experience.

Dependencies

This plugin needs also registered on the Weave instance the following:

Nodes selection plugin.

Usage

Import the Plugin

Start by importing the plugin:

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

Register the Plugin

Then register the plugin on the Weave class instance.

const instance = new Weave({
  ...
  plugins: [
    ...,
    new WeaveStageZoomPlugin(), 
  ]
})

You can also define:

The steps of the zoom.
The default step of the zoom.

For more information check the WeaveStageZoomPlugin plugin API.

Use the plugin

Once the plugin is registered the final user can change the zoom through the following actions:

Fit-to-screen Tool: allows to set a zoom that makes visible the entire stage.
Fit-to-selection Tool: allows to set a zoom that makes visible the actual selection.
Zoom-in Tool: allows to interact and zoom-in the stage one zoom step.
Zoom-out Tool: allows to interact and zoom-out the stage one zoom step.