WeaveGroupNode

Overview

The WeaveGroupNode class represents a container node in Weave.js that groups multiple child nodes together into a single, manageable entity. Built on top of Konva’s Group class, it allows developers and users to treat a collection of nodes as a single object—moving, scaling, rotating, or interacting with them as one.

Groups are useful for:

Organizing multiple child nodes under one parent, allowing bulk transformations like dragging, resizing, scaling, and rotating.
Ensures that transformations applied to the group (like moving or rotating) cascade properly to the children, maintaining relative positions and sizes.
Allows nesting other groups or individual nodes, making it flexible for complex scene structures (e.g., a diagram block containing text, shapes, and connectors).

The class extends the WeaveNode class

Type

This node nodeType property value is group.

Import

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

Instantiation

new WeaveGroupNode(params?: WeaveGroupNodeParams);

TypeScript types

type WeaveNodeTransformerProperties = Konva.TransformerConfig;

type WeaveGroupProperties = {
  transform: WeaveNodeTransformerProperties;
};

type WeaveGroupNodeParams = {
  config: Partial<WeaveGroupProperties>;
};

Parameters

For WeaveGroupNodeParams:

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

For WeaveGroupProperties:

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