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:

Prop	Type	Default
`config`	`DeepPartial<WeaveConnectorNodeProperties>`	-

For WeaveConnectorNodeProperties:

Prop	Type	Default
`endNodeDecoratorType?`	`WeaveConnectorNodeDecoratorType`	`WEAVE_CONNECTOR_NODE_DECORATOR_TYPE.NONE`
`startNodeDecoratorType?`	`WeaveConnectorNodeDecoratorType`	`WEAVE_CONNECTOR_NODE_DECORATOR_TYPE.NONE`
`lineType?`	`striWeaveConnectorLineTypeng`	`WEAVE_CONNECTOR_NODE_LINE_TYPE.STRAIGHT`
`handlerSnapping.releaseThreshold?`	`number`	`25`
`handlerSnapping.activateThreshold?`	`number`	`20`
`style.arrow.strokeWidth?`	`number`	`1`
`style.arrow.stroke?`	`number`	`#000000`
`style.arrow.size?`	`number`	`10`
`style.dot.strokeWidth?`	`number`	`1`
`style.dot.stroke?`	`number`	`#000000`
`style.dot.radius?`	`number`	`4`
`style.selection.color?`	`string`	`#1a1aff`
`style.curvedControl.fill?`	`string`	`#ffffff`
`style.curvedControl.strokeWidth?`	`number`	`1`
`style.curvedControl.stroke?`	`string`	`#000000`
`style.curvedControl.radius?`	`number`	`7`
`style.pointsHandler.fill?`	`string`	`#ffffff`
`style.pointsHandler.strokeWidth?`	`number`	`1`
`style.pointsHandler.stroke?`	`string`	`#000000`
`style.pointsHandler.radius?`	`number`	`7`
`style.anchorNode.fill?`	`string`	`#ffffff`
`style.anchorNode.hoveredFill?`	`string`	`#ff2c2c`
`style.anchorNode.anchoredFill?`	`string`	`#ff2c2c`
`style.anchorNode.strokeWidth?`	`number`	`1`
`style.anchorNode.stroke?`	`string`	`#000000`
`style.anchorNode.radius?`	`number`	`7`
`style.line.hitStrokeWidth?`	`number`	`10`
`style.line.dash?`	`number[]`	`[]`
`style.line.lineJoin?`	`'bevel' \| 'round' \| 'miter'`	`miter`
`style.line.lineCap?`	`'butt' \| 'round' \| 'square'`	`butt`
`style.line.strokeWidth?`	`number`	`1`
`style.line.stroke?`	`number`	`#000000`

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,
};