Weave.js

Rectangle

Draw a rectangle on the canvas

Rectangle on the Weave.js showcase

The Rectangle node is a simple, versatile primitive shape used to render rectangular elements on the canvas. Built on top of Konva’s Rect, it supports customizable properties such as position, size, fill color, stroke, corner radius, and more.

Rectangle nodes are often used as building blocks for UI components, layout guides, or user-created nodes. They can also respond to interactions like dragging, resizing, or selection.

Usage

Import the Node

Start by importing the node:

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

Register the Node

Then register the node on the Weave class instance.

const instance = new Weave({
  ...
  nodes: [
    ...,
    new WeaveRectangleNode(), 
  ]
})

Use the node

Once the node is registered you can use it on Actions or Plugins or even other Nodes.

We provide an action named Rectangle Tool that allows users to add Rectangle nodes to the application.