WeaveNodesDistanceSnappingPlugin

Overview

The WeaveNodesDistanceSnappingPlugin class that enables smart snapping behavior when users move a target node, distance is relative to the peer nodes located (vertically or horizontally) to the target node. It helps align nodes with each other, improving layout precision and visual consistency across the canvas.

The class extends the WeavePlugin class

Name

This plugin name property value is nodesDistanceSnapping.

Import

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

Instantiation

new import { WeaveNodesDistanceSnappingPlugin } from "@inditextech/weave-sdk";
(params?: WeaveNodesDistanceSnappingPluginParams);

TypeScript types

const GUIDE_DISTANCE_LINE_DEFAULT_CONFIG: WeaveNodesDistanceSnappingUIConfig = {
  line: {
    stroke: "#E12D3C",
    strokeWidth: 1,
  },
  label: {
    linePadding: 10,
    height: 20,
    cornerRadius: 0,
    fill: "#E12D3C",
    fontStyle: "normal",
    fontSize: 14,
    fontFamily: "Arial",
    paddingX: 4,
  },
};
const GUIDE_ENTER_SNAPPING_TOLERANCE = 3;
const GUIDE_EXIT_SNAPPING_TOLERANCE = 5;

type NodeSnapHorizontalKeys = keyof typeof NODE_SNAP_HORIZONTAL;
type NodeSnapHorizontal = (typeof NODE_SNAP_HORIZONTAL)[NodeSnapHorizontalKeys];

type NodeSnapVerticalKeys = keyof typeof NODE_SNAP_VERTICAL;
type NodeSnapVertical = (typeof NODE_SNAP_VERTICAL)[NodeSnapVerticalKeys];

type WeaveNodesDistanceSnappingPluginConfig = {
  enterSnappingTolerance: number;
  exitSnappingTolerance: number;
  ui: WeaveNodesDistanceSnappingUIConfig;
};

type WeaveNodesDistanceSnappingPluginParams = {
  config?: DeepPartial<WeaveNodesDistanceSnappingPluginConfig>;
};

type DistanceInfoH = {
  index: number;
  from: Konva.Node;
  to: Konva.Node;
  midY: number;
  distance: number;
};

type DistanceInfoV = {
  index: number;
  from: Konva.Node;
  to: Konva.Node;
  midX: number;
  distance: number;
};

type WeaveNodesDistanceSnappingUIConfig = {
  line: {
    stroke: string;
    strokeWidth: number;
  };
  label: {
    height: number;
    cornerRadius: number;
    fill: string;
    fontSize: number;
    fontFamily: string;
    fontStyle: string;
    linePadding: number;
    paddingX: number;
  };
};

Parameters

For WeaveNodesDistanceSnappingPluginParams:

Property Type Required Description

Property	Type	Required	Description
`config`	`WeaveNodesDistanceSnappingPluginConfig`		Config parameters for the plugin.

config

WeaveNodesDistanceSnappingPluginConfig

Config parameters for the plugin.

For WeaveNodesDistanceSnappingPluginConfig:

Property Type Required Default Description

Property	Type	Default	Description
`enterSnappingTolerance`	`number`	`3`	Drag snapping threshold (in px) to the guides (when entering snap).
`exitSnappingTolerance`	`number`	`3`	Drag snapping threshold (in px) to the guides (when exiting snap).
`ui`	`WeaveNodesDistanceSnappingUIConfig`	`GUIDE_DISTANCE_LINE_DEFAULT_CONFIG`	Distance lines and labels UI configuration.

enterSnappingTolerance

number

3

Drag snapping threshold (in px) to the guides (when entering snap).

exitSnappingTolerance

number

3

Drag snapping threshold (in px) to the guides (when exiting snap).

ui

WeaveNodesDistanceSnappingUIConfig

GUIDE_DISTANCE_LINE_DEFAULT_CONFIG

Distance lines and labels UI configuration.