Skip to main content

Frame Node (INodeFrame)

Frame Node (INodeFrame)​

INodeFrame extends INodeRect and adds clipping control for child content.

export interface INodeFrame extends INodeRect {
	getClipsContent(): boolean;
	setClipsContent(value: boolean): void;
}

It behaves like a rectangle container with an extra frame-specific responsibility:

  • organize a bounded editor region
  • optionally clip all child nodes inside that region

Live Preview​

Create Frame Node in Code​

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

const frame = new NodeFrame(1);
frame.setName("MainFrame");
frame.setPosition(0, 20);
frame.setSize(820, 420);
frame.setFill("#0f172a");
frame.setStrokeFill("#38bdf8");
frame.setStrokeWidth({ t: 8, r: 8, b: 8, l: 8 });
frame.setStrokeAlign(StrokeAlign.Inside);
frame.setCornerRadius({ tl: 22, tr: 22, br: 22, bl: 22 });
frame.setClipsContent(true);
layerWorld.addNode(frame);

const child = new NodeRect(2);
child.setName("ChildCard");
child.setSize(320, 180);
child.setPosition(370, 170);
child.setFill("#f59e0b");
child.setStrokeFill("#fef3c7");
child.setStrokeWidth({ t: 6, r: 6, b: 6, l: 6 });
child.setStrokeAlign(StrokeAlign.Inside);

// Child is linked to frame hierarchy.
frame.addChild(child);
layerWorld.addNode(child);

scene.invalidate();

Frame-Specific API​

MethodDescription
getClipsContent()Returns current clipping mode for children.
setClipsContent(value)Enables/disables child clipping inside frame bounds.

Inheritance​

INode
  -> IShapeBase
      -> INodeRect
          -> INodeFrame

INodeFrame inherits all Rect/Shape/Base behavior (fill, stroke, transform, hierarchy, bounds, hit testing, serialization).

Next​