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;
gridDotMaxDotsPerAxis: number;
};
type WeaveStageGridPluginParams = {
config?: Partial<WeaveStageGridPluginConfig>;
};Parameters
For WeaveStageGridPluginParams:
| Prop | Type | Default |
|---|---|---|
config? | Partial<WeaveStageGridPluginConfig> | - |
For WeaveStageGridPluginConfig:
| Prop | Type | Default |
|---|---|---|
gridDotMaxDotsPerAxis? | number | 250 |
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(): WeaveStageGridTypeThis method return the type of the actual grid (line or dotted).
setType
setType(type: WeaveStageGridType): voidThis method set the type of the actual grid (line or dotted).
enable
enable(): voidThis method enables the grid.
disable
disable(): voidThis method disables the grid.
