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.

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

Parameters

For WeaveRectangleNodeParams:

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

For WeaveRectangleProperties:

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