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.
Label engine
By default the label is rendered with Konva’s text and edited through a DOM textarea overlay (legacy).
Set config.label.engine to native to render the label with the on-canvas text engine and edit it
with the native editing session instead: no DOM overlay, and caret and selection are drawn on the canvas.
new WeavePolygonNode({ config: { label: { engine: "native" } } });Both engines read and write the same labelText and label* props, so clients using different engines
can edit the same document. The native engine enables rich text in labels (bold, italic, underline, lists, alignment). Formatted content is stored in the optional labelBlocks prop, and labelText always holds the plain text, so the legacy engine shows the plain text.
Label edit events
With the native label engine the node emits onEnterShapeLabelEditMode when a label edit session starts and
onExitShapeLabelEditMode when it ends. Exit receives { node: Konva.Group }; enter also receives the live
session, so an app can build a formatting toolbar by running format commands on it. While editing,
onShapeLabelFormatChange receives { node, format } whenever the selection format changes.
The legacy engine does not emit them.
TypeScript types
type WeavePolygonPoint = { x: number; y: number };
type WeavePolygonInnerRect = {
tl: WeavePolygonPoint;
tr: WeavePolygonPoint;
bl: WeavePolygonPoint;
br: WeavePolygonPoint;
};
type WeaveNodeTransformerProperties = Konva.TransformerConfig;
type WeaveShapeLabelProps = {
labelText?: string;
labelBlocks?: WeaveTextBlock[]; // rich content written by the native engine
// plus labelFontFamily, labelFontSize, labelFontStyle, labelFontVariant, labelTextDecoration,
// labelFill, labelAlign, labelVerticalAlign, labelLetterSpacing, labelLineHeight,
// labelPaddingX, labelPaddingY
};
type WeaveShapeLabelConfig = {
engine: "legacy" | "native"; // default "legacy"
};
type WeavePolygonProperties = {
transform: WeaveNodeTransformerProperties;
label?: Partial<WeaveShapeLabelConfig>;
};
type WeavePolygonNodeParams = {
config: Partial<WeavePolygonProperties>;
};Parameters
For WeavePolygonNodeParams:
| Property | Type | Required | Description |
|---|---|---|---|
|
|
Config parameters for the node. |
For WeavePolygonProperties:
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
|
|
|
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 |
|---|---|---|
|
Triangle |
3 |
|
Diamond |
4 |
|
Pentagon |
5 |
|
Hexagon |
6 |
|
Octagon |
8 |
|
Decagon |
10 |
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,
};