WeavePolygonNode | Weave.js

Overview

The WeavePolygonNode class represents a polygon shape within the Weave.js canvas.

Unlike the WeaveRegularPolygonNode, which uses Konva’s built-in RegularPolygon primitive, WeavePolygonNode is drawn via explicit vertex points (points: WeavePolygonPoint[]). This enables arbitrary convex polygon shapes and precise inside-stroke rendering that never exceeds the shape boundary.

The node also supports an inline text label whose bounding box is derived from the polygon’s innerRect — the largest axis-aligned rectangle that fits inside the shape.

The class extends the WeaveNode class.

Type

This node nodeType property value is polygon.

Import

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

Instantiation

new WeavePolygonNode(params?: WeavePolygonNodeParams);

TypeScript types

type WeavePolygonPoint = { x: number; y: number };

type WeavePolygonInnerRect = {
  tl: WeavePolygonPoint;
  tr: WeavePolygonPoint;
  bl: WeavePolygonPoint;
  br: WeavePolygonPoint;
};

type WeaveNodeTransformerProperties = Konva.TransformerConfig;

type WeavePolygonProperties = {
  transform: WeaveNodeTransformerProperties;
};

type WeavePolygonNodeParams = {
  config: Partial<WeavePolygonProperties>;
};

Parameters

For WeavePolygonNodeParams:

Property Type Required Description

Property	Type	Required	Description
`config`	`Partial<WeavePolygonProperties>`		Config parameters for the node.

config

Partial<WeavePolygonProperties>

Config parameters for the node.

For WeavePolygonProperties:

Property Type Required Default Description

Property	Type	Required	Default	Description
`transform`	`object`		`check default values`	Setup the transform properties for the polygon (if it can be resized, rotated, which anchors are available, etc.).

transform

object

check default values

Setup the transform properties for the polygon (if it can be resized, rotated, which anchors are available, etc.).

Presets

The polygon node ships with six built-in presets available via the exported constant WEAVE_POLYGON_PRESETS. Each preset defines normalized vertex positions and an inner bounding 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

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