WeaveConnectorToolAction

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:

Prop	Type	Default
`config`	`Partial<WeaveConnectorToolActionProperties>`	-

For WeaveConnectorToolActionProperties:

Prop	Type	Default
`style.line.dash?`	`string`	`[]`
`style.line.strokeWidth?`	`string`	`1`
`style.line.stroke?`	`string`	`#000000`
`style.anchor.hoveredFill?`	`string`	`#ff2c2c`
`style.anchor.selectedFill?`	`string`	`#1a1aff`
`style.anchor.fill?`	`string`	`#FFFFFF`
`style.anchor.strokeWidth?`	`string`	`1`
`style.anchor.stroke?`	`string`	`#000000`
`style.anchor.radius?`	`number`	`7`

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: [],
    },
  },
};