WeaveNodesSnappingPlugin

Overview

The WeaveNodesSnappingPlugin class that enables smart snapping behavior when users move or resize nodes. It helps align nodes with each other, grids, or guides automatically, improving layout precision and visual consistency across the canvas.

Snapping provides users with subtle, intuitive assistance when organizing elements, making building clean and aligned interfaces much easier—especially in collaborative environments.

The class extends the WeavePlugin class

Name

This plugin name property value is nodesSnapping.

Import

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

Instantiation

new WeaveNodesSnappingPlugin(params?: WeaveNodesSnappingPluginParams);

TypeScript types

const GUIDE_LINE_DEFAULT_CONFIG: Required<
  Pick<Konva.LineConfig, "stroke" | "strokeWidth" | "dash">
> = {
  stroke: "rgb(0, 161, 255)",
  strokeWidth: 1,
  dash: [4, 6],
};
const GUIDE_LINE_DRAG_SNAPPING_THRESHOLD = 10;
const GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD = 10;

type WeaveNodesSnappingPluginConfig = {
  guideLine: Konva.LineConfig;
  dragSnappingThreshold: number;
  transformSnappingThreshold: number;
};

type WeaveNodesSnappingPluginParams = {
  config?: WeaveNodesSnappingPluginConfig;
};

Parameters

For WeaveNodesSnappingPluginParams:

Prop	Type	Default
`config?`	`WeaveNodesSnappingPluginConfig`	-

For WeaveNodesSnappingPluginConfig:

Prop	Type	Default
`transformSnappingThreshold?`	`number`	`10`
`dragSnappingThreshold?`	`number`	`10`
`guideLine?`	`Konva.LineConfig`	`{ stroke: "rgb(0, 161, 255)", strokeWidth: 1, dash: [4, 6] }`