Weave.js
prerelease Prerelease 5.2.2 Latest 5.2.1
↑↓ navigate · ↵ select · esc close
Weave.js
Weave.js
prerelease Prerelease 5.2.2 Latest 5.2.1

WeaveFrameNode

Frame node API Reference

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:

Property Type Required Description

config

Partial<WeaveFrameProperties>

Required

Config parameters for the node.

For WeaveFrameProperties:

Property Type Required Default Description

fontFamily

string

check default values

The font family to use on the frame title.

fontStyle

string

check default values

The font style to use on the frame title.

fontSize

string

check default values

The font size to use on the frame title.

fontColor

string

check default values

The font color to use on the frame title.

titleMargin

number

check default values

The margin of the title (px) with the frame contents.

borderWidth

number

check default values

The border width (px) of the frame.

borderColor

string

#000check default values0ff

The border color (HEX with alpha) of the frame.

onTargetLeave.borderColor

string

check default values

The border color (HEX with alpha) of the frame when no target is added.

onTargetLeave.fill

string

check default values

The frame background color (HEX with alpha) of the frame when no target is added.

onTargetEnter.borderColor

string

check default values

The border color (HEX with alpha) of the frame when a target is going to be added.

onTargetEnter.fill

string

check default values

The frame background color (HEX with alpha) of the frame when a target going to be added.

transform

object

check default values

Setup the transform properties for the frame (if can be resized, rotated, anchors, etc.).

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