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:

Property Type Required Description

Property	Type	Required	Description
`config`	`Partial<WeaveStageGridPluginConfig>`		Config parameters for the plugin.

config

Partial<WeaveStageGridPluginConfig>

Config parameters for the plugin.

For WeaveStageGridPluginConfig:

Property Type Required Default Description

Property	Type	Default	Description
`type`	`WeaveStageGridType`	`lines`	Type of the grid to use by default.
`gridColor`	`string`	`#b3b3b3`	Color of the grid (lines or dots)
`gridMajorColor`	`string`	`#b3b3b3`	Color of the grid (lines or dots) for the major separators
`gridOriginColor`	`string`	`#ff746c`	Color of the grid origin axis (both x and y).
`gridSize`	`number`	`50`	A number in pixels that define the size of the grid separation.
`gridMajorEvery`	`number`	`10`	A number that defines when to render the major lines, every N gridSize
`gridMajorRatio`	`number`	`2`	A number that defines the size (ratio) of the references, for the type lines its a multiple for the stroke and for the dots its a multiple for the dot radius
`gridStroke`	`number`	`1`	A number that defines the stroke base size of the grid lines when the type is lines
`gridDotType`	`string`	`circle`	The type of the dot grid, it can be square or circle
`gridDotRadius`	`number`	`1`	A number that defines the dot base size of the grid when the type is dots and circles (radius)
`gridDotRectSize`	`number`	`2`	A number that defines the dot base size of the grid when the type is dots and square (square size)

type

WeaveStageGridType

lines

Type of the grid to use by default.

gridColor

string

#b3b3b3

Color of the grid (lines or dots)

gridMajorColor

string

#b3b3b3

Color of the grid (lines or dots) for the major separators

gridOriginColor

string

#ff746c

Color of the grid origin axis (both x and y).

gridSize

number

50

A number in pixels that define the size of the grid separation.

gridMajorEvery

number

10

A number that defines when to render the major lines, every N gridSize

gridMajorRatio

number

2

A number that defines the size (ratio) of the references, for the type lines its a multiple for the stroke and for the dots its a multiple for the dot radius

gridStroke

number

1

A number that defines the stroke base size of the grid lines when the type is lines

gridDotType

string

circle

The type of the dot grid, it can be square or circle

gridDotRadius

number

1

A number that defines the dot base size of the grid when the type is dots and circles (radius)

gridDotRectSize

number

2

A number that defines the dot base size of the grid when the type is dots and square (square size)

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.