Weave.js
prerelease Prerelease 5.4.0 Latest 5.3.0 5.2.2 5.2.1
↑↓ navigate · ↵ select · esc close
Weave.js
Weave.js
prerelease Prerelease 5.4.0 Latest 5.3.0 5.2.2 5.2.1

WeaveTextNode

Text node API Reference

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 WeaveTextOutlineProperties =
  | { enabled: true; color: string; width: number }
  | { enabled: false };

type WeaveTextEditionProperties = {
  borderSize: number;
};

type WeaveTextCursorProperties = {
  color: string;
};

type WeaveTextLinkProperties = {
  defaultColor: string;
  hoverColor: string;
};

type WeaveTextProperties = {
  transform: WeaveNodeTransformerProperties;
  outline: WeaveTextOutlineProperties;
  edition: WeaveTextEditionProperties;
  cursor: WeaveTextCursorProperties;
  link: WeaveTextLinkProperties;
};

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

Parameters

For WeaveTextNodeParams:

Property Type Required Description

config

Partial<WeaveTextProperties>

Required

Config parameters for the node.

For WeaveTextProperties:

Property Type Required Default Description

transform

object

check default values

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

outline

object

{ enabled: false }

Setup an outline (stroke) around the text glyphs.

edition

object

{ borderSize: 2 }

Border size, in pixels, of the overlay shown while editing the text in-place.

cursor

object

{ color: "#000000" }

Caret colour used by the in-place text editor.

link

object

check default values

Default and hover colours applied to a text node once it has a link set — see the "Hyperlinks" section below.

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_TEXT_NODE_DEFAULT_CONFIG: WeaveTextProperties = {
  transform: WEAVE_DEFAULT_TRANSFORM_PROPERTIES,
  outline: {
    enabled: false,
  },
  cursor: {
    color: "#000000",
  },
  edition: {
    borderSize: 2,
  },
  link: {
    defaultColor: "#1155ccff",
    hoverColor: "#3d7be0ff",
  },
};

A text node can link its whole text to an external URL by setting its link attribute (a plain string, part of the node’s props like fill or text) to an absolute http:// or https:// URL — any other scheme (e.g. javascript:, data:) is rejected, both by the node’s zod schema and again defensively before the link is opened, since the value is user-authored content that other collaborators will click on.

Behaviour while link is set (per-node, does not affect nodes without a link):

  • The text is always rendered underlined and coloured with link.defaultColor, regardless of the node’s own fill/textDecoration. The real values are captured once, the first time a link is applied, into two internal bookkeeping props — linkPreviousFill and linkPreviousTextDecoration — and restored from there whenever the link is removed or the node is re-serialized (e.g. after a resize, a drag, or exiting text-edit mode) while still linked, so they’re never lost to the forced link styling. These two props are managed automatically; don’t set them directly.

  • Hovering the text swaps its colour to link.hoverColor and the cursor to a pointer.

  • Clicking opens the URL in a new tab (window.open(url). Because a plain click on any node already means "select/drag it", opening the link uses two gestures layered on top of that, both working identically on mouse and touch:

    • Clicking/tapping a text node that is already selected opens its link (a first click on an unselected node still only selects it, same as any other node).

    • On desktop, holding Ctrl (or Cmd on macOS) while clicking opens the link immediately, whether or not the node was already selected.

  • Rich/partial-text linking is out of scope — the link always applies to the node’s entire text.

Methods

getLink(nodeInstance: WeaveElementInstance): string | undefined

Returns the URL currently set on the given text node instance, or undefined if it has no link.

setLink(nodeInstance: WeaveElementInstance, url: string): void

Sets (or replaces) the URL a text node links to. url must be an absolute http:// or https:// URL; any other value is a no-op.

removeLink(nodeInstance: WeaveElementInstance): void

Removes the link from a text node. The node’s original fill/textDecoration reappear immediately, since they were never altered while the link was set.