WeaveTextNode

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:

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

For WeaveTextProperties:

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