Text Node (INodeText)

Text Node (INodeText)

INodeText extends IShapeBase and adds full text styling/layout API for in-scene typography.

Use it for headings, labels, body copy, and annotation layers in editor products.

Live Preview

Create Text Node in Code

import {
	NodeText,
	TextAlign,
	TextVerticalAlign,
	TextWrapMode,
	FontStyle,
	FontDecoration,
	FontDecorationUnderlineStyle,
	StrokeAlign,
} from "@flowscape-ui/core-sdk";

const textNode = new NodeText(1);
textNode.setName("HeroTitle");
textNode.setPosition(0, -120);
textNode.setSize(860, 140);
textNode.setText("Build editors with Flowscape");
textNode.setFill("#f8fafc");
textNode.setStrokeFill("#334155");
textNode.setStrokeWidth({ t: 2, r: 2, b: 2, l: 2 });
textNode.setStrokeAlign(StrokeAlign.Inside);

textNode.setFontFamily("Georgia");
textNode.setFontSize(56);
textNode.setFontWeight(800);
textNode.setFontStyle(FontStyle.Normal);

textNode.setTextAlign(TextAlign.Center);
textNode.setVerticalAlign(TextVerticalAlign.Center);
textNode.setLineHeight(1.2);
textNode.setLetterSpacing(0.6);
textNode.setWrapMode(TextWrapMode.Word);

textNode.setFontDecoration(FontDecoration.Underline);
textNode.setUnderlineStyle(FontDecorationUnderlineStyle.Solid);
textNode.setUnderlineSkipInk(true);
textNode.setUnderlineColor("#38bdf8");
textNode.setUnderlineThickness(2);
textNode.setUnderlineOffset(4);

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

Typography API

Area	Methods
Content	getText(), setText(value)
Font	getFontFamily(), setFontFamily(value), getFontSize(), setFontSize(value), getFontWeight(), setFontWeight(value), getFontStyle(), setFontStyle(value)
Layout	getTextAlign(), setTextAlign(value), getVerticalAlign(), setVerticalAlign(value), getLineHeight(), setLineHeight(value), getLetterSpacing(), setLetterSpacing(value), getWrapMode(), setWrapMode(value)
Decoration	getFontDecoration(), setFontDecoration(value), getUnderlineStyle(), setUnderlineStyle(value), isUnderlineSkipInk(), setUnderlineSkipInk(value), getUnderlineColor(), setUnderlineColor(value), getUnderlineThickness(), setUnderlineThickness(value), getUnderlineOffset(), setUnderlineOffset(value)

Enums

• TextAlign: Left, Center, Right, Justify
• TextVerticalAlign: Top, Center, Bottom
• TextWrapMode: None, Word, Character
• FontStyle: Normal, Italic, Oblique
• FontDecoration: None, Underline, Striketrough, Overline
• FontDecorationUnderlineStyle: Solid, Dotted, Wavy

Inheritance

INode
  -> IShapeBase
      -> INodeText

INodeText inherits full shape/base behavior: transform, hierarchy, bounds, hit testing, and serialization.

Next

• Frame Node reference