WeaveArrowNode (deprecated)

Overview

The WeaveArrowNode class represents a basic arrow shape within the Weave.js canvas.

Built on top of Konva’s Arrow class shape under the hood, the WeaveArrowNode offers a simple yet powerful primitive that supports full interaction, styling, and real-time synchronization.

Arrow are ideal for:

Point to important stuff on whiteboards.
Connect flows of ideas.

The class extends the WeaveNode class

Type

This node nodeType property value is arrow.

Import

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

Instantiation

new WeaveArrowNode(params?: WeaveArrowNodeParams);

TypeScript types

type WeaveNodeTransformerProperties = Konva.TransformerConfig;

type WeaveArrowProperties = {
  transform: WeaveNodeTransformerProperties;
};

type WeaveArrowNodeParams = {
  config: Partial<WeaveArrowProperties>;
};

Parameters

For WeaveArrowNodeParams:

Property Type Required Description

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

config

Partial<WeaveArrowProperties>

Required

Config parameters for the node.

For WeaveArrowProperties:

Property Type Required Default Description

Property	Type	Required	Default	Description
`transform`	`object`		`check default values`	Setup the transform properties for the arrow (if can be resized, rotated, anchors, etc.).

transform

object

check default values

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

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