Skip to main content

Line Node (INodeLine)

Line Node (INodeLine)​

INodeLine extends IShapeBase and adds connector-specific API for:

  • local start/end points
  • independent stroke thickness
  • cap styles on both ends
  • decorative endings (arrows, circles, diamonds)
export interface INodeLine extends IShapeBase {
getStart(): Vector2;
setStart(value: Vector2): void;

getEnd(): Vector2;
setEnd(value: Vector2): void;

getStrokeThickness(): number;
setStrokeThickness(value: number): void;

getLineCapStart(): LineCap;
setLineCapStart(value: LineCap): void;

getLineCapEnd(): LineCap;
setLineCapEnd(value: LineCap): void;

getStartEnding(): LineEnding;
setStartEnding(value: LineEnding): void;

getEndEnding(): LineEnding;
setEndEnding(value: LineEnding): void;
}

Live Preview​

The preview shows several practical line styles in one scene:

  • neutral rounded connector
  • one-directional arrow link
  • bidirectional semantic link
  • diagonal link with mixed endings

Create Line Nodes in Code​

import { NodeLine, LineCap, LineEnding } from "@flowscape-ui/core-sdk";

const line = new NodeLine(1);
line.setName("ArrowLink");
line.setPosition(-420, -40);
line.setStart({ x: 0, y: 0 });
line.setEnd({ x: 360, y: 0 });
line.setStrokeFill("#f59e0b");
line.setStrokeThickness(10);
line.setLineCapStart(LineCap.Butt);
line.setLineCapEnd(LineCap.Square);
line.setStartEnding(LineEnding.None);
line.setEndEnding(LineEnding.LineArrow);

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

Caps and Endings​

LineCap​

ValueMeaning
LineCap.RoundRounded stroke edge.
LineCap.SquareSquared cap extending beyond the endpoint.
LineCap.ButtFlat cap ending exactly at the endpoint.

LineEnding​

ValueMeaning
LineEnding.NoneNo decorative ending.
LineEnding.LineArrowOpen arrow line ending.
LineEnding.TriangleArrowFilled triangular arrow.
LineEnding.ReversedTriangleTriangle pointing opposite direction.
LineEnding.CircleArrowCircular ending marker.
LineEnding.DiamondArrowDiamond-shaped ending marker.

Size Override Behavior​

INodeLine overrides box resize methods:

  • setWidth(value)
  • setHeight(value)
  • setSize(width, height)

Unlike box nodes, these methods rescale line geometry inside its container and do not change strokeThickness.

Inheritance​

INode
-> IShapeBase
-> INodeLine

INodeLine also inherits base/shape APIs (setFill, setStrokeFill, transforms, hierarchy, bounds, hit testing, serialization).

Next​