WeaveStageGridPlugin

Overview

The WeaveStageGridPlugin class that renders a background grid on the canvas Stage. It provides visual guides that help users align, arrange, and position nodes more precisely, improving layout consistency and the overall user experience.

The plugin can render grids as lines or dots, and it is highly configurable to match the needs of different visual collaborative tools, from whiteboards to complex design editors.

The class extends the WeavePlugin class

Name

This plugin name property value is stageGrid.

Import

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

Instantiation

new WeaveStageGridPlugin(params?: Partial<WeaveStageGridPluginParams>);

TypeScript types

type WeaveStageGridPluginConfig = {
  type: WeaveStageGridType;
  gridColor: string;
  gridMajorColor: string;
  gridOriginColor: string;
  gridSize: number;
  gridMajorEvery: number;
  gridMajorRatio: number;
  gridStroke: number;
  gridDotType: WeaveStageGridDotType;
  gridDotRadius: number;
  gridDotRectSize: number;
};

type WeaveStageGridPluginParams = {
  config?: DeepPartial<WeaveStageGridPluginConfig>;
};

type WeaveStageGridDotTypeKeys = keyof typeof WEAVE_GRID_DOT_TYPES;
type WeaveStageGridDotType =
  (typeof WEAVE_GRID_DOT_TYPES)[WeaveStageGridDotTypeKeys];

type WeaveStageGridTypeKeys = keyof typeof WEAVE_GRID_TYPES;
type WeaveStageGridType = (typeof WEAVE_GRID_TYPES)[WeaveStageGridTypeKeys];

Parameters

For WeaveStageGridPluginParams:

Prop	Type	Default
`config?`	`Partial<WeaveStageGridPluginConfig>`	-

For WeaveStageGridPluginConfig:

Prop	Type	Default
`gridDotRectSize?`	`number`	`2`
`gridDotRadius?`	`number`	`1`
`gridDotType?`	`string`	`circle`
`gridStroke?`	`number`	`1`
`gridMajorRatio?`	`number`	`2`
`gridMajorEvery?`	`number`	`10`
`gridSize?`	`number`	`50`
`gridOriginColor?`	`string`	`#ff746c`
`gridMajorColor?`	`string`	`#b3b3b3`
`gridColor?`	`string`	`#b3b3b3`
`type?`	`WeaveStageGridType`	`lines`

Methods

getType

getType(): WeaveStageGridType

This method return the type of the actual grid (line or dotted).

setType

setType(type: WeaveStageGridType): void

This method set the type of the actual grid (line or dotted).

getDotsType

getDotsType(): WeaveStageGridDotType

This method return the kind of the actual grid dot (square or circle).

setDotsType

setDotsType(type: WeaveStageGridDotType): void

This method set the kind of the actual grid dot (square or circle).

enable

enable(): void

This method enables the grid.

disable

disable(): void

This method disables the grid.

WeaveStageGridPlugin

On this page