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:

Prop	Type	Default
`config?`	`WeaveNodesDistanceSnappingPluginConfig`	-

For WeaveNodesDistanceSnappingPluginConfig:

Prop	Type	Default
`ui?`	`WeaveNodesDistanceSnappingUIConfig`	`GUIDE_DISTANCE_LINE_DEFAULT_CONFIG`
`exitSnappingTolerance?`	`number`	`3`
`enterSnappingTolerance?`	`number`	`3`