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

WeaveConnectorToolAction

Add connector nodes to the canvas

Overview

The WeaveConnectorToolAction class allows users to add connector to the canvas by click-and-click onto pre-defined anchors on the canvas elements.

The class extends the WeaveAction class.

Name

This action name property value is connectorTool.

Import

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

Instantiation

new WeaveConnectorToolAction(params?: WeaveConnectorToolActionParams);

TypeScript types

type WeaveConnectorToolActionStateKeys = keyof typeof CONNECTOR_TOOL_STATE;
type WeaveConnectorToolActionState =
  (typeof CONNECTOR_TOOL_STATE)[WeaveConnectorToolActionStateKeys];

type WeaveConnectorToolActionProperties = {
  style: {
    anchor: {
      radius: number;
      stroke: string;
      strokeWidth: number;
      fill: string;
      selectedFill: string;
      hoveredFill: string;
    };
    line: {
      stroke: string;
      strokeWidth: number;
      dash: number[];
    };
  };
};

type WeaveConnectorToolActionParams = {
  config: DeepPartial<WeaveConnectorToolActionProperties>;
};

Parameters

For WeaveConnectorToolActionParams:

Property Type Required Description

config

Partial<WeaveConnectorToolActionProperties>

Required

Config parameters for the tool.

For WeaveConnectorToolActionProperties:

Property Type Required Default Description

style.anchor.radius

number

7

The anchor radius

style.anchor.stroke

string

#000000

The anchor border color

style.anchor.strokeWidth

string

1

The anchor border size (px)

style.anchor.fill

string

#FFFFFF

The anchor fill color

style.anchor.selectedFill

string

#1a1aff

The anchor fill color when selected

style.anchor.hoveredFill

string

#ff2c2c

The anchor fill color when hovered

style.line.stroke

string

#000000

The temporary connecting line when selecting the end anchor, this defines the border color

style.line.strokeWidth

string

1

The temporary connecting line border size

style.line.dash

string

[]

The temporary connecting line dash pattern

Default values

const CONNECTOR_TOOL_ACTION_NAME = "connectorTool";

const CONNECTOR_TOOL_STATE = {
  ["IDLE"]: "idle",
  ["SELECTING_INITIAL"]: "selecting_initial",
  ["SELECTING_FINAL"]: "selecting_final",
  ["ADDED"]: "added",
} as const;

const CONNECTOR_TOOL_DEFAULT_CONFIG: WeaveConnectorToolActionProperties = {
  style: {
    anchor: {
      radius: 7,
      stroke: "#000000",
      strokeWidth: 1,
      fill: "#FFFFFF",
      selectedFill: "#1a1aff",
      hoveredFill: "#ff2c2c",
    },
    line: {
      stroke: "#000000",
      strokeWidth: 1,
      dash: [],
    },
  },
};