Ellipse Node (INodeEllipse)

Ellipse Node (INodeEllipse)

INodeEllipse extends IShapeBase and adds ellipse-specific controls for donut ratio and arc angles.

export interface INodeEllipse extends IShapeBase {
  getInnerRatio(): number;
  setInnerRatio(value: number): void;

  getStartAngle(): number;
  setStartAngle(value: number): void;

  getEndAngle(): number;
  setEndAngle(value: number): void;

  getSweepAngle(): number;
}

Live Preview

The example below uses warm, high-contrast colors and shows multiple ellipse variants in one scene:

• Background layer (fill + logo)
• World layer (NodeEllipse variants)
• Overlay layer (editor overlays/interactions)

Variations in Code

1. Solid Ellipse

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

const ellipse = new NodeEllipse(1);
ellipse.setName('Solid');
ellipse.setSize(260, 260);
ellipse.setPosition(-460, -160);
ellipse.setFill('#ff7a00');
ellipse.setStrokeFill('#ffe0b2');
ellipse.setStrokeWidth({ t: 8, r: 8, b: 8, l: 8 });
ellipse.setStrokeAlign(StrokeAlign.Inside);
ellipse.setInnerRatio(0);
ellipse.setStartAngle(0);
ellipse.setEndAngle(360);

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

2. Donut Ellipse

const donut = new NodeEllipse(2);
donut.setName('Donut');
donut.setSize(260, 260);
donut.setPosition(-120, -160);
donut.setFill('#ff4d00');
donut.setStrokeFill('#ffe9c7');
donut.setStrokeWidth({ t: 10, r: 10, b: 10, l: 10 });
donut.setStrokeAlign(StrokeAlign.Inside);
donut.setInnerRatio(0.58);
donut.setStartAngle(0);
donut.setEndAngle(360);
layerWorld.addNode(donut);

3. Arc Ellipse

const arc = new NodeEllipse(3);
arc.setName('Arc');
arc.setSize(260, 260);
arc.setPosition(220, -160);
arc.setFill('#ff9f1c');
arc.setStrokeFill('#fff0d6');
arc.setStrokeWidth({ t: 10, r: 10, b: 10, l: 10 });
arc.setStrokeAlign(StrokeAlign.Inside);
arc.setInnerRatio(0);
arc.setStartAngle(28);
arc.setEndAngle(306);
layerWorld.addNode(arc);

4. Ring Arc

const ringArc = new NodeEllipse(4);
ringArc.setName('Ring Arc');
ringArc.setSize(260, 260);
ringArc.setPosition(-460, 140);
ringArc.setFill('#ff5a36');
ringArc.setStrokeFill('#ffd8bf');
ringArc.setStrokeWidth({ t: 10, r: 10, b: 10, l: 10 });
ringArc.setStrokeAlign(StrokeAlign.Inside);
ringArc.setInnerRatio(0.7);
ringArc.setStartAngle(44);
ringArc.setEndAngle(332);
layerWorld.addNode(ringArc);

5. Rotated Donut

const rotated = new NodeEllipse(5);
rotated.setName('Tilted Donut');
rotated.setSize(260, 260);
rotated.setPosition(-120, 140);
rotated.setRotation(0.24);
rotated.setFill('#f97316');
rotated.setStrokeFill('#fff1db');
rotated.setStrokeWidth({ t: 8, r: 8, b: 8, l: 8 });
rotated.setStrokeAlign(StrokeAlign.Inside);
rotated.setInnerRatio(0.3);
rotated.setStartAngle(0);
rotated.setEndAngle(360);
layerWorld.addNode(rotated);

6. Thin Ring

const thinRing = new NodeEllipse(6);
thinRing.setName('Sun Ring');
thinRing.setSize(260, 260);
thinRing.setPosition(220, 140);
thinRing.setFill('#ffb347');
thinRing.setStrokeFill('#fff5dd');
thinRing.setStrokeWidth({ t: 12, r: 12, b: 12, l: 12 });
thinRing.setStrokeAlign(StrokeAlign.Inside);
thinRing.setInnerRatio(0.82);
thinRing.setStartAngle(0);
thinRing.setEndAngle(360);
layerWorld.addNode(thinRing);

Ratio API

Method	Description
getInnerRatio()	Returns inner ratio (0 means filled ellipse).
setInnerRatio(value)	Sets inner ratio, clamped to [0, 0.999].

innerRatio > 0 creates a donut-like visual form.

Angle API

Method	Description
getStartAngle()	Returns arc start angle in degrees.
setStartAngle(value)	Sets arc start angle in degrees.
getEndAngle()	Returns arc end angle in degrees.
setEndAngle(value)	Sets arc end angle in degrees.
getSweepAngle()	Returns computed sweep (endAngle - startAngle).

These methods let you build full ellipses, arcs, and ring-like segments.

Inheritance

INode
  -> IShapeBase
      -> INodeEllipse

INodeEllipse also inherits all shape/base methods:

• fill and stroke API
• transform and hierarchy API
• bounds and hit-test API
• serialization API

Next

• Group Node reference