WeaveStageGridPlugin
Renders a reference grid behind the nodes layer
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;
gridOriginColor: string;
gridSize: number;
gridMajorRatio?: number;
gridStroke?: number;
gridDotRadius?: number;
};
type WeaveStageGridPluginParams = {
config?: Partial<WeaveStageGridPluginConfig>;
};
Parameters
For WeaveStageGridPluginParams
:
Prop | Type | Default |
---|---|---|
config? | Partial<WeaveStageGridPluginConfig> | - |
For WeaveStageGridPluginConfig
:
Prop | Type | Default |
---|---|---|
gridDotRadius? | number | 1 |
gridStroke? | number | 0.5 |
gridMajorRatio? | number | type === 'lines' => 4, type === 'dots' => 2 |
gridMajorEvery? | number | 10 |
gridSize? | number | 50 |
gridOriginColor? | string | rgba(255,0,0,0.2) |
gridColor? | string | rgba(0,0,0,0.2) |
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).
enable
enable(): void
This method enables the grid.
disable
disable(): void
This method disables the grid.