WeaveTextNode | Weave.js

Overview

The WeaveTextNode class represents a text element on the Weave.js canvas. It allows users to add editable or static text directly into the collaborative visual environment, making it essential for labels, annotations, titles, and descriptive content.

Built on top of Konva’s Text class shape under the hood, the WeaveTextNode provides rich text customization, interaction handling, and real-time synchronization, ensuring that text content stays up-to-date across all connected users.

Text are ideal for:

Adding titles, labels, and descriptions to diagrams or whiteboards.
Allowing users to comment or annotate visually inside collaborative spaces.
Enabling rich-text editing workflows inside a canvas tool.

The class extends the WeaveNode class

Type

This node nodeType property value is text.

Import

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

Instantiation

new WeaveTextNode(params?: WeaveTextNodeParams);

TypeScript types

type WeaveNodeTransformerProperties = Konva.TransformerConfig;

type WeaveTextProperties = {
  transform: WeaveNodeTransformerProperties;
};

type WeaveTextNodeParams = {
  config: Partial<WeaveTextProperties>;
};

Parameters

For WeaveTextNodeParams:

Property Type Required Description

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

config

Partial<WeaveTextProperties>

Required

Config parameters for the node.

For WeaveTextProperties:

Property Type Required Default Description

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

transform

object

check default values

Setup the transform properties for the text (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,
};