WeaveLineNode

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

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

Parameters

For WeaveLineNodeParams:

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

For WeaveLineProperties:

Prop	Type	Default
`transform?`	`object`	`check default values`

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