Path Node (INodePath)

Path Node (INodePath)

INodePath extends IShapeBase and gives you freeform vector geometry via path commands.

Use it when Rect/Ellipse/Line are not enough and you need custom silhouettes, icons, or branded shapes.

export interface INodePath extends IShapeBase {
  getCommands(): PathCommand[];
  setCommands(value: PathCommand[]): void;

  moveTo(to: Vector2): void;
  lineTo(to: Vector2): void;
  quadTo(control: Vector2, to: Vector2): void;
  cubicTo(control1: Vector2, control2: Vector2, to: Vector2): void;
  closePath(): void;
  clearPath(): void;
  isClosed(): boolean;
  toString(): string;
}

Live Preview

The scene below renders two Path shapes:

• heart (cubic curves)
• lightning bolt (line segments)

Create a Heart with Commands

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

const heart = new NodePath(1);
heart.setName('HeartPath');
heart.setPosition(-280, -40);
heart.setSize(220, 220);
heart.setFill('#ef4444');
heart.setStrokeFill('#fecaca');
heart.setStrokeWidth({ t: 8, r: 8, b: 8, l: 8 });
heart.setStrokeAlign(StrokeAlign.Inside);

heart.setCommands([
  { type: PathCommandType.MoveTo, to: { x: 50, y: 15 } },
  { type: PathCommandType.CubicTo, control1: { x: 35, y: -5 }, control2: { x: 0, y: 5 }, to: { x: 0, y: 37 } },
  { type: PathCommandType.CubicTo, control1: { x: 0, y: 62 }, control2: { x: 23, y: 82 }, to: { x: 50, y: 105 } },
  { type: PathCommandType.CubicTo, control1: { x: 77, y: 82 }, control2: { x: 100, y: 62 }, to: { x: 100, y: 37 } },
  { type: PathCommandType.CubicTo, control1: { x: 100, y: 5 }, control2: { x: 65, y: -5 }, to: { x: 50, y: 15 } },
  { type: PathCommandType.Close },
]);

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

Create a Path from SVG String

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

const bolt = NodePath.fromString(
  2,
  'M28 0 L2 54 H27 L16 108 L58 43 H34 L45 0 Z',
);

bolt.setName('LightningPath');
bolt.setPosition(220, 20);
bolt.setSize(180, 280);
bolt.setFill('#f59e0b');
bolt.setStrokeFill('#fef3c7');
bolt.setStrokeWidth({ t: 8, r: 8, b: 8, l: 8 });
bolt.setStrokeAlign(StrokeAlign.Inside);

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

Command Types

Command	Purpose
MoveTo	Move cursor without drawing.
LineTo	Add straight segment.
QuadTo	Add quadratic bezier segment.
CubicTo	Add cubic bezier segment.
Close	Close current subpath.

Inheritance

INode
  -> IShapeBase
      -> INodePath

INodePath inherits all standard shape/base behavior: fill, stroke, transform, hierarchy, bounds, hit testing, serialization.

Next

• Polygon Node reference