Skip to main content

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​

AreaMethods
ContentgetText(), setText(value)
FontgetFontFamily(), setFontFamily(value), getFontSize(), setFontSize(value), getFontWeight(), setFontWeight(value), getFontStyle(), setFontStyle(value)
LayoutgetTextAlign(), setTextAlign(value), getVerticalAlign(), setVerticalAlign(value), getLineHeight(), setLineHeight(value), getLetterSpacing(), setLetterSpacing(value), getWrapMode(), setWrapMode(value)
DecorationgetFontDecoration(), 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​