WeaveLineNode (deprecated)

Overview

The WeaveLineNode class represents a multi-point line or path on the Weave.js canvas. It is a versatile and essential node type for building connectors, freehand drawings, flow diagrams, annotations, and visual paths in collaborative environments.

Built on top of Konva’s Line class shape under the hood, the WeaveLineNode offers full control over the line’s geometry, style, and behavior—all synchronized in real time across users.

Lines are ideal for:

Drawing connectors between nodes (e.g., in flowcharts, mind maps, and diagrams).
Allowing freehand sketching or pen/brush tools.
Building visual relationships or paths between visual elements.
Enabling annotation layers in collaborative tools.

The class extends the WeaveNode class

Type

This node nodeType property value is line.

Import

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

Instantiation

new WeaveLineNode(params?: WeaveLineNodeParams);

TypeScript types

type WeaveNodeTransformerProperties = Konva.TransformerConfig;

type WeaveLineProperties = {
  transform?: WeaveNodeTransformerProperties;
  snapAngles: {
    angles: number[]; // Angles for snapping in degrees
    activateThreshold: number;
    releaseThreshold: number;
  };
};

type WeaveLineNodeParams = {
  config: Partial<WeaveLineProperties>;
};

Parameters

For WeaveLineNodeParams:

Property Type Required Description

Property	Type	Required	Description
`config`	`Partial<WeaveLineProperties>`	Required	Config parameters for the node.

config

Partial<WeaveLineProperties>

Required

Config parameters for the node.

For WeaveLineProperties:

Property Type Required Default Description

Property	Type	Default	Description
`transform`	`object`	`check default values`	Setup the transform properties for the line (if can be resized, rotated, anchors, etc.).
`snapAngles.angles`	`number`	`10`	Array of angles (in degrees) to snap the line to when shift is pressed.
`snapAngles.activateThreshold`	`number`	`5`	Activation threshold for the angle snapping utility.
`snapAngles.releaseThreshold`	`number`	`10`	Release threshold for the angle snapping utility.

transform

object

check default values

Setup the transform properties for the line (if can be resized, rotated, anchors, etc.).

snapAngles.angles

number

10

Array of angles (in degrees) to snap the line to when shift is pressed.

snapAngles.activateThreshold

number

5

Activation threshold for the angle snapping utility.

snapAngles.releaseThreshold

number

10

Release threshold for the angle snapping utility.

Default values

const WEAVE_TRANSFORMER_ANCHORS = {
  ["TOP_LEFT"]: "top-left",
  ["TOP_CENTER"]: "top-center",
  ["TOP_RIGHT"]: "top-right",
  ["MIDDLE_RIGHT"]: "middle-right",
  ["MIDDLE_LEFT"]: "middle-left",
  ["BOTTOM_LEFT"]: "bottom-left",
  ["BOTTOM_CENTER"]: "bottom-center",
  ["BOTTOM_RIGHT"]: "bottom-right",
};

const WEAVE_DEFAULT_ENABLED_ANCHORS: string[] = Object.values(
  WEAVE_TRANSFORMER_ANCHORS,
);

const WEAVE_DEFAULT_TRANSFORM_PROPERTIES: WeaveNodeTransformerProperties = {
  rotateEnabled: true,
  resizeEnabled: true,
  enabledAnchors: WEAVE_DEFAULT_ENABLED_ANCHORS,
  borderStrokeWidth: 3,
  padding: 0,
};

const WEAVE_LINE_NODE_DEFAULT_CONFIG = {
  snapAngles: {
    angles: [0, 45, 90, 135, 180, 225, 270, 315],
    activateThreshold: 5,
    releaseThreshold: 10,
  },
};