Weave.js
prerelease Prerelease 5.2.2 Latest 5.2.1
↑↓ navigate · ↵ select · esc close
Weave.js
Weave.js
prerelease Prerelease 5.2.2 Latest 5.2.1

WeaveNodesEdgeSnappingPlugin

Allow to snap nodes to guides and to themselves

Overview

The WeaveNodesEdgeSnappingPlugin 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 nodesEdgeSnapping.

Import

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

Instantiation

new WeaveNodesEdgeSnappingPlugin(params?: WeaveNodesEdgeSnappingPluginParams);

TypeScript types

const GUIDE_LINE_DEFAULT_CONFIG: Required<
  Pick<Konva.LineConfig, "stroke" | "strokeWidth" | "dash">
> = {
  stroke: "#ff0000",
  strokeWidth: 1,
  dash: [],
};
const GUIDE_LINE_DRAG_SNAPPING_THRESHOLD = 3;
const GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD = 3;

type NodeSnapKeys = keyof typeof NODE_SNAP;
type NodeSnap = (typeof NODE_SNAP)[NodeSnapKeys];

type NodeSnappingEdge = {
  nodeId: string;
  guide: number;
  offset: number;
  snap: NodeSnap;
};

type NodeSnappingEdges = {
  vertical: NodeSnappingEdge[];
  horizontal: NodeSnappingEdge[];
};

type LineGuideStop = {
  vertical: number[];
  horizontal: number[];
};

type LineGuide = {
  nodeId: string;
  lineGuide: number;
  diff: number;
  snap: NodeSnap;
  offset: number;
};

type GuideOrientationKeys = keyof typeof GUIDE_ORIENTATION;
type GuideOrientation = (typeof GUIDE_ORIENTATION)[GuideOrientationKeys];

type Guide = {
  lineGuide: number;
  offset: number;
  orientation: GuideOrientation;
  snap: NodeSnap;
};

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

type WeaveNodesEdgeSnappingPluginParams = {
  config?: WeaveNodesEdgeSnappingPluginConfig;
};

Parameters

For WeaveNodesEdgeSnappingPluginParams:

Property Type Required Description

config

WeaveNodesEdgeSnappingPluginConfig

Config parameters for the plugin.

For WeaveNodesEdgeSnappingPluginConfig:

Property Type Required Default Description

guideLine

Konva.LineConfig

{ stroke: "rgb(0

Guide lines configuration, extend from Konva.Line

dragSnappingThreshold

number

10

Drag snapping threshold (in px) to the guides.

transformSnappingThreshold

number

10

Transform (resize) snapping threshold (in px) to the guides.