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