WeaveFrameNode

Overview

The WeaveFrameNode class represents a specialized container node in Weave.js designed to act like a framed section or visual panel inside the canvas. A WeaveFrameNode is used to group and organize nodes visually and logically within a bounded, styled area—similar to a "frame" or "workspace" within the larger canvas.

Built on top of the WeaveGroupNode and extended with additional visual and interactive features, it provides a structured layout area perfect for modular designs, diagram sections, flowchart stages, or collaborative workspaces.

Frames are useful for:

Renders a rectangular frame with optional size, background color, border and title area (depending on design requirements).
Acts as a container where users can add child nodes that logically belong inside a specific framed area.
Allows dragging and interacting with the frame itself while maintaining the internal layout of its child nodes.
Can carry additional metadata (e.g., frame labels, section types, or workflow states) useful for collaborative tooling and visual organization.

The class extends the WeaveNode class

Type

This node nodeType property value is frame.

Import

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

Instantiation

new WeaveFrameNode(params?: WeaveFrameNodeParams);

TypeScript types

type WeaveNodeTransformerProperties = Konva.TransformerConfig;

type WeaveFrameProperties = {
  fontFamily: string;
  fontStyle: string;
  fontSize: number;
  fontColor: string;
  titleMargin: number;
  borderWidth: number;
  borderColor: string;
  onTargetLeave: {
    borderColor: string;
    fill: string;
  };
  onTargetEnter: {
    borderColor: string;
    fill: string;
  };
  transform: WeaveNodeTransformerProperties;
};

type WeaveFrameAttributes = WeaveElementAttributes & {
  title: string;
  frameWidth: number;
  frameHeight: number;
};

type WeaveFrameNodeParams = {
  config: Partial<WeaveFrameProperties>;
};

Parameters

For WeaveFrameNodeParams:

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

For WeaveFrameProperties:

Prop	Type	Default
`transform?`	`object`	`check default values`
`onTargetEnter.fill?`	`string`	`check default values`
`onTargetEnter.borderColor?`	`string`	`check default values`
`onTargetLeave.fill?`	`string`	`check default values`
`onTargetLeave.borderColor?`	`string`	`check default values`
`borderColor?`	`string`	`#000check default values0ff`
`borderWidth?`	`number`	`check default values`
`titleMargin?`	`number`	`check default values`
`fontColor?`	`string`	`check default values`
`fontSize?`	`string`	`check default values`
`fontStyle?`	`string`	`check default values`
`fontFamily?`	`string`	`check default values`

Default values

const WEAVE_FRAME_NODE_DEFAULT_CONFIG = {
  fontFamily: "Arial",
  fontStyle: "normal",
  fontSize: 20,
  fontColor: "#000000ff",
  titleMargin: 20,
  borderColor: "#000000ff",
  borderWidth: 1,
  onTargetLeave: {
    borderColor: "#000000ff",
    fill: "#ffffffff",
  },
  onTargetEnter: {
    borderColor: "#ff6863ff",
    fill: "#ffffffff",
  },
  transform: {
    rotateEnabled: false,
    resizeEnabled: false,
    enabledAnchors: [] as string[],
    borderStrokeWidth: 3,
    padding: 0,
  },
};

const WEAVE_FRAME_NODE_DEFAULT_PROPS = {
  title: "Frame XXX",
  frameWidth: 1920,
  frameHeight: 1080,
};