Skip to main content

Rect Node (INodeRect)

Rect Node (INodeRect)​

INodeRect is a rectangle node contract:

export interface INodeRect extends IShapeBase {}

It inherits all core node behavior from INode through IShapeBase, and adds rectangle-focused visual behavior through shape appearance and stroke APIs.

Live Preview​

The demo below uses the reusable scene preview component with:

  • Background layer (fill + centered logo)
  • World layer (Rect node)
  • Overlay layer (ready for editor interactions)

Create Rect Like in the Demo​

import {
  NodeRect,
  StrokeAlign,
} from '@flowscape-ui/core-sdk';

const rect = new NodeRect(1);
rect.setSize(360, 220);
rect.setFill('#0b1220');
rect.setStrokeFill('#2f7cf6');
rect.setStrokeWidth({ t: 10, r: 1, b: 1, l: 1 });
rect.setStrokeAlign(StrokeAlign.Inside);
rect.setCornerRadius({ tl: 28, tr: 28, br: 20, bl: 20 });

layerWorld.addNode(rect);
scene.invalidate();

Inheritance​

INode
  -> IShapeBase
      -> INodeRect

INodeRect gets:

  • identity, hierarchy, transforms, bounds, hit-test, serialization from INode
  • shape appearance and visual-bounds behavior from IShapeBase

Appearance API​

MethodDescription
getCornerRadius()Returns corner radii (tl, tr, br, bl).
setCornerRadius(value)Sets corner radii for all rectangle corners.
getFill()Returns fill color in hex format.
setFill(value)Sets fill color (string or Color).

Stroke API​

MethodDescription
getStrokeWidth()Returns stroke widths by side (t, r, b, l).
setStrokeWidth(value)Sets per-side stroke width.
getStrokeFill()Returns stroke color in hex format.
setStrokeFill(value)Sets stroke color (string or Color).
getStrokeAlign()Returns stroke alignment mode.
setStrokeAlign(value)Sets stroke alignment (Inside, Center, Outside).

View Bounds API (Visual Bounds)​

These methods include stroke in bounds calculations:

MethodSpaceNotes
getLocalViewOBB()LocalOBB including stroke width/alignment.
getWorldViewCorners()WorldWorld corners of the visual rectangle.
getWorldViewOBB()WorldRotated visual bounds including stroke.
getWorldViewAABB()WorldAxis-aligned visual bounds including stroke.

Use view-bounds methods for editor overlays, visual selection, and accurate hit workflows where stroke must be respected.

Next​