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​