Weave.js

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:

PropTypeDefault
config?
Partial<WeaveStageGridPluginConfig>
-

For WeaveStageGridPluginConfig:

PropTypeDefault
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.