Polygon | Weave.js

The Polygon node is a versatile primitive shape used to render polygon elements on the canvas. Unlike the Regular Polygon node, it is based on a set of explicit vertex points and an inner bounding rectangle, enabling arbitrary convex polygons to be rendered with a consistent, inside-stroke border.

It supports customizable properties such as position, fill color, stroke, and an optional inline text label.

They can also respond to interactions like dragging, resizing, or selection.

Presets

The polygon node ships with six built-in presets, each defining the normalized vertex positions and the largest inscribed axis-aligned rectangle (used for label placement):

Preset ID Label Sides

Preset ID	Label	Sides
`triangle`	Triangle	3
`diamond`	Diamond	4
`pentagon`	Pentagon	5
`hexagon`	Hexagon	6
`octagon`	Octagon	8
`decagon`	Decagon	10

triangle

Triangle

diamond

Diamond

pentagon

Pentagon

hexagon

Hexagon

octagon

Octagon

decagon

Decagon

Usage

Import the Node

Start by importing the node:

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

Register the Node

Then register the node on the Weave class instance.

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

1	Added in this step.

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 Polygon Tool that allows users to add Polygon nodes to the application.