WeaveRectangleNode

Overview

The WeaveRectangleNode class represents a basic rectangular shape within the Weave.js canvas. It is one of the fundamental visual building blocks for creating collaborative tools, diagrams, design layouts, and interactive content.

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

Rectangles are ideal for:

Building interactive visual elements (e.g., cards, sections, containers).
Forming basic layout structures for more complex visual tools.
Acting as a foundational primitive in diagrams, whiteboards, or flow-based applications.

Rectangle nodes support an optional text label that is displayed centred inside the shape. The label can be edited interactively by double-clicking the rectangle while it is selected. All label appearance properties (font, colour, alignment, padding, …) are configurable via the label* props described below.

The class extends the WeaveNode class

Type

This node nodeType property value is rectangle.

Import

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

Instantiation

new WeaveRectangleNode(params?: WeaveRectangleNodeParams);

TypeScript types

type WeaveNodeTransformerProperties = Konva.TransformerConfig;

type WeaveRectangleProperties = {
  transform: WeaveNodeTransformerProperties;
};

type WeaveRectangleNodeParams = {
  config: Partial<WeaveRectangleProperties>;
};

type WeaveShapeLabelProps = {
  labelText?: string;
  labelFontFamily?: string;
  labelFontSize?: number;
  labelFontStyle?: string;
  labelFontVariant?: string;
  labelTextDecoration?: string;
  labelFill?: string;
  labelAlign?: string;
  labelVerticalAlign?: string;
  labelLetterSpacing?: number;
  labelLineHeight?: number;
  labelPaddingX?: number;
  labelPaddingY?: number;
};

Parameters

For WeaveRectangleNodeParams:

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

For WeaveRectangleProperties:

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

Label properties

The following props control the optional text label rendered inside the rectangle. They map directly to WeaveShapeLabelProps and are all optional — omit them to use the defaults.

Prop	Type	Default
`labelPaddingY?`	`number`	`8`
`labelPaddingX?`	`number`	`8`
`labelLineHeight?`	`number`	`1`
`labelLetterSpacing?`	`number`	`0`
`labelVerticalAlign?`	`string`	`"middle"`
`labelAlign?`	`string`	`"center"`
`labelFill?`	`string`	`"#000000"`
`labelTextDecoration?`	`string`	`""`
`labelFontVariant?`	`string`	`"normal"`
`labelFontStyle?`	`string`	`"normal"`
`labelFontSize?`	`number`	`14`
`labelFontFamily?`	`string`	`"Arial, sans-serif"`
`labelText?`	`string`	`""`

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_SHAPE_LABEL_DEFAULTS: WeaveShapeLabelProps = {
  labelText: "",
  labelFontFamily: "Arial, sans-serif",
  labelFontSize: 14,
  labelFontStyle: "normal",
  labelFontVariant: "normal",
  labelTextDecoration: "",
  labelFill: "#000000",
  labelAlign: "center",
  labelVerticalAlign: "middle",
  labelLetterSpacing: 0,
  labelLineHeight: 1,
  labelPaddingX: 8,
  labelPaddingY: 8,
};

WeaveRectangleNode

On this page