WeaveConnectorNode

Overview

The WeaveConnectorNode class represents a line that connects two nodes pre-defined anchor points, the line is sticked to both nodes, if anyone of them moves, the line automatically adjusts and moves also.

The class extends the WeaveNode class

Type

This node nodeType property value is connector.

Import

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

Instantiation

new WeaveConnectorNode(params?: WeaveConnectorNodeParams);

TypeScript types

type WeaveConnectorLineTypeKeys = keyof typeof WEAVE_CONNECTOR_NODE_LINE_TYPE;
type WeaveConnectorLineType =
  (typeof WEAVE_CONNECTOR_NODE_LINE_TYPE)[WeaveConnectorLineTypeKeys];

type WeaveConnectorNodeDecoratorTypeKeys =
  keyof typeof WEAVE_CONNECTOR_NODE_DECORATOR_TYPE;
type WeaveConnectorNodeDecoratorType =
  (typeof WEAVE_CONNECTOR_NODE_DECORATOR_TYPE)[WeaveConnectorNodeDecoratorTypeKeys];

type WeaveConnectorNodeDecoratorOriginKeys =
  keyof typeof WEAVE_CONNECTOR_NODE_DECORATOR_ORIGIN;
type WeaveConnectorNodeDecoratorOrigin =
  (typeof WEAVE_CONNECTOR_NODE_DECORATOR_ORIGIN)[WeaveConnectorNodeDecoratorOriginKeys];

type WeaveConnectorNodeProperties = {
  style: {
    line: {
      stroke: string;
      strokeWidth: number;
      tension: number;
      lineCap: "butt" | "round" | "square";
      lineJoin: "bevel" | "round" | "miter";
      dash: number[];
      hitStrokeWidth: number;
    };
    anchorNode: {
      radius: number;
      stroke: string;
      strokeWidth: number;
      anchoredFill: string;
      hoveredFill: string;
      fill: string;
    };
    pointsHandler: {
      radius: number;
      stroke: string;
      strokeWidth: number;
      fill: string;
    };
    curvedControl: {
      radius: number;
      stroke: string;
      strokeWidth: number;
      fill: string;
    };
    dot: {
      radius: number;
      stroke: string;
      strokeWidth: number;
    };
    arrow: {
      size: number;
      stroke: string;
      strokeWidth: number;
    };
    selection: {
      color: string;
    };
  };
  handlerSnapping: {
    activateThreshold: number;
    releaseThreshold: number;
  };
  lineType: WeaveConnectorLineType;
  startNodeDecoratorType: WeaveConnectorNodeDecoratorType;
  endNodeDecoratorType: WeaveConnectorNodeDecoratorType;
  transform?: WeaveNodeTransformerProperties;
};

type WeaveConnectorNodeParams = {
  config: DeepPartial<WeaveConnectorNodeProperties>;
};

type WeaveConnectorAnchor = {
  name: string;
  point: Konva.Vector2d;
};

type WeaveAnchorSnap = {
  name: string | undefined;
  position: Konva.Vector2d;
};

type WeaveConnectorInfo =
  | {
      type: "node";
      node: Konva.Node;
      anchor: string;
    }
  | {
      type: "point";
      point: Konva.Vector2d;
    };

type WeaveConnectorPointPosition = "top" | "bottom" | "left" | "right";

Parameters

For WeaveConnectorNodeParams:

Property Type Required Description

Property	Type	Required	Description
`config`	`DeepPartial<WeaveConnectorNodeProperties>`	Required	Config parameters for the node.

config

DeepPartial<WeaveConnectorNodeProperties>

Required

Config parameters for the node.

For WeaveConnectorNodeProperties:

Property Type Required Default Description

Property	Type	Default	Description
`style.line.stroke`	`number`	`#000000`	Defines stroke (color) of the connector line
`style.line.strokeWidth`	`number`	`1`	Width of the line
`style.line.lineCap`	`butt`	`butt`	Defines the line-cap (how the line is terminated at their ends) of the line
`style.line.lineJoin`	`bevel`	`miter`	Defines the line-join (how the line is connected - when multi segments like an elbow) of the line
`style.line.dash`	`number[]`	`[]`	Defines the dashing properties of the line
`style.line.hitStrokeWidth`	`number`	`10`	Defines the line hit stroke (making easies to select the line)
`style.anchorNode.radius`	`number`	`7`	Defines the anchor node radius
`style.anchorNode.stroke`	`string`	`#000000`	Defines the anchor border color
`style.anchorNode.strokeWidth`	`number`	`1`	Defines the anchor border size
`style.anchorNode.anchoredFill`	`string`	`#ff2c2c`	Defines the anchor fill color when selected (anchored)
`style.anchorNode.hoveredFill`	`string`	`#ff2c2c`	Defines the anchor fill color when hovered
`style.anchorNode.fill`	`string`	`#ffffff`	Defines the anchor fill color (normal state)
`style.pointsHandler.radius`	`number`	`7`	Defines the handlers (that allow to move the connector) radius
`style.pointsHandler.stroke`	`string`	`#000000`	Defines the handlers border color
`style.pointsHandler.strokeWidth`	`number`	`1`	Defines the handlers border size
`style.pointsHandler.fill`	`string`	`#ffffff`	Defines the handlers fill color
`style.curvedControl.radius`	`number`	`7`	Defines the handler (for the curved line control) radius
`style.curvedControl.stroke`	`string`	`#000000`	Defines the handler border color
`style.curvedControl.strokeWidth`	`number`	`1`	Defines the handler border size
`style.curvedControl.fill`	`string`	`#ffffff`	Defines the handler fill color
`style.selection.color`	`string`	`#1a1aff`	The color when an connector is selected
`style.dot.radius`	`number`	`4`	The radius of the start and end line dot decorator
`style.dot.stroke`	`number`	`#000000`	The border color for the line dot decorator
`style.dot.strokeWidth`	`number`	`1`	The border size for the line dot decorator
`style.arrow.size`	`number`	`10`	The size of the start and end line arrow decorator
`style.arrow.stroke`	`number`	`#000000`	The border color for the line arrow decorator
`style.arrow.strokeWidth`	`number`	`1`	The border size for the line arrow decorator
`handlerSnapping.activateThreshold`	`number`	`20`	Amount of pixels to activate the snapping to an anchor
`handlerSnapping.releaseThreshold`	`number`	`25`	Amount of pixels to de-activate the snapping to an anchor
`lineType`	`striWeaveConnectorLineTypeng`	`WEAVE_CONNECTOR_NODE_LINE_TYPE.STRAIGHT`	Default line type
`startNodeDecoratorType`	`WeaveConnectorNodeDecoratorType`	`WEAVE_CONNECTOR_NODE_DECORATOR_TYPE.NONE`	Default start-line decorator type
`endNodeDecoratorType`	`WeaveConnectorNodeDecoratorType`	`WEAVE_CONNECTOR_NODE_DECORATOR_TYPE.NONE`	Default end-line decorator type

style.line.stroke

number

#000000

Defines stroke (color) of the connector line

style.line.strokeWidth

number

1

Width of the line

style.line.lineCap

butt

Defines the line-cap (how the line is terminated at their ends) of the line

style.line.lineJoin

bevel

miter

Defines the line-join (how the line is connected - when multi segments like an elbow) of the line

style.line.dash

number[]

[]

Defines the dashing properties of the line

style.line.hitStrokeWidth

number

10

Defines the line hit stroke (making easies to select the line)

style.anchorNode.radius

number

7

Defines the anchor node radius

style.anchorNode.stroke

string

#000000

Defines the anchor border color

style.anchorNode.strokeWidth

number

1

Defines the anchor border size

style.anchorNode.anchoredFill

string

#ff2c2c

Defines the anchor fill color when selected (anchored)

style.anchorNode.hoveredFill

string

#ff2c2c

Defines the anchor fill color when hovered

style.anchorNode.fill

string

#ffffff

Defines the anchor fill color (normal state)

style.pointsHandler.radius

number

7

Defines the handlers (that allow to move the connector) radius

style.pointsHandler.stroke

string

#000000

Defines the handlers border color

style.pointsHandler.strokeWidth

number

1

Defines the handlers border size

style.pointsHandler.fill

string

#ffffff

Defines the handlers fill color

style.curvedControl.radius

number

7

Defines the handler (for the curved line control) radius

style.curvedControl.stroke

string

#000000

Defines the handler border color

style.curvedControl.strokeWidth

number

1

Defines the handler border size

style.curvedControl.fill

string

#ffffff

Defines the handler fill color

style.selection.color

string

#1a1aff

The color when an connector is selected

style.dot.radius

number

4

The radius of the start and end line dot decorator

style.dot.stroke

number

#000000

The border color for the line dot decorator

style.dot.strokeWidth

number

1

The border size for the line dot decorator

style.arrow.size

number

10

The size of the start and end line arrow decorator

style.arrow.stroke

number

#000000

The border color for the line arrow decorator

style.arrow.strokeWidth

number

1

The border size for the line arrow decorator

handlerSnapping.activateThreshold

number

20

Amount of pixels to activate the snapping to an anchor

handlerSnapping.releaseThreshold

number

25

Amount of pixels to de-activate the snapping to an anchor

lineType

striWeaveConnectorLineTypeng

WEAVE_CONNECTOR_NODE_LINE_TYPE.STRAIGHT

Default line type

startNodeDecoratorType

WeaveConnectorNodeDecoratorType

WEAVE_CONNECTOR_NODE_DECORATOR_TYPE.NONE

Default start-line decorator type

endNodeDecoratorType

WeaveConnectorNodeDecoratorType

WEAVE_CONNECTOR_NODE_DECORATOR_TYPE.NONE

Default end-line decorator type

Default values

const WEAVE_CONNECTOR_NODE_DEFAULT_CONFIG: WeaveConnectorNodeProperties = {
  style: {
    line: {
      stroke: "#000000",
      strokeWidth: 1,
      lineCap: "butt",
      lineJoin: "miter",
      dash: [],
      hitStrokeWidth: 10,
    },
    anchorNode: {
      radius: 7,
      stroke: "#000000",
      strokeWidth: 1,
      anchoredFill: "#ff2c2c",
      hoveredFill: "#ff2c2cff",
      fill: "#ffffff",
    },
    pointsHandler: {
      radius: 7,
      stroke: "#000000",
      strokeWidth: 1,
      fill: "#ffffff",
    },
    curvedControl: {
      radius: 7,
      stroke: "#000000",
      strokeWidth: 1,
      fill: "#ffffff",
    },
    selection: {
      color: "#1a1aff",
    },
    dot: {
      radius: 4,
      stroke: "#000000",
      strokeWidth: 0,
    },
    arrow: {
      size: 10,
      stroke: "#000000",
      strokeWidth: 0,
    },
  },
  handlerSnapping: {
    activateThreshold: 20,
    releaseThreshold: 25,
  },
  lineType: WEAVE_CONNECTOR_NODE_LINE_TYPE.STRAIGHT,
  startNodeDecoratorType: WEAVE_CONNECTOR_NODE_DECORATOR_TYPE.NONE,
  endNodeDecoratorType: WEAVE_CONNECTOR_NODE_DECORATOR_TYPE.NONE,
};