Weave.js

WeaveStagePanningPlugin

Activates the panning (move) of the stage

Overview

The WeaveStagePanningPlugin class that enables panning the Stage by dragging the canvas background. It allows users to move across large workspaces easily, improving navigation and usability, especially in collaborative and zoomable environments.

This plugin provides a smooth, intuitive drag-to-move experience, essential for exploring detailed or expansive canvases.

The class extends the WeavePlugin class

Name

This plugin name property value is stagePanning.

Import

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

Instantiation

new WeaveStagePanningPlugin(params?: WeaveStagePanningPluginParams);

TypeScript types

type WeaveStagePanningPluginParams = {
  config?: Partial<WeaveStagePanningPluginConfig>;
};

type WeaveStagePanningPluginConfig = {
  edgePanOffset: number;
  edgePanMinSpeed: number;
  edgePanSpeed: number;
  edgePanMaxSpeed: number;
};

Parameters

For WeaveStagePanningPluginParams:

Property Type Required Description

config

WeaveStagePanningPluginConfig

Required

Config parameters for the plugin.

For WeaveStagePanningPluginConfig:

Property Type Required Default Description

edgePanOffset

number

25

The offset from stage borders where auto-panning happens when dragging nodes. In pixels.

edgePanMinSpeed

number

2

The minimum speed of the auto-panning. In pixels.

edgePanSpeed

number

10

The base speed of the auto-panning. In pixels.

edgePanMaxSpeed

number

30

The maximum speed of the auto-panning. In pixels.