@efxlab/motion-canvas-2d 4.0.0

package/src/lib/components/Txt.ts

@@ -0,0 +1,204 @@
+import {
+  DEFAULT,
+  InterpolationFunction,
+  SignalValue,
+  SimpleSignal,
+  ThreadGenerator,
+  TimingFunction,
+  all,
+  capitalize,
+  threadable,
+} from '@efxlab/motion-canvas-core';
+import {computed, initial, nodeName, signal} from '../decorators';
+import {is} from '../utils';
+import {Node} from './Node';
+import {Shape, ShapeProps} from './Shape';
+import {TxtLeaf} from './TxtLeaf';
+import {ComponentChildren} from './types';
+
+type TxtChildren = string | Node | (string | Node)[];
+type AnyTxt = Txt | TxtLeaf;
+
+export interface TxtProps extends ShapeProps {
+  children?: TxtChildren;
+  text?: SignalValue<string>;
+}
+
+@nodeName('Txt')
+export class Txt extends Shape {
+  /**
+   * Create a bold text node.
+   *
+   * @remarks
+   * This is a shortcut for
+   * ```tsx
+   * <Txt fontWeight={700} />
+   * ```
+   *
+   * @param props - Additional text properties.
+   */
+  public static b(props: TxtProps) {
+    return new Txt({...props, fontWeight: 700});
+  }
+
+  /**
+   * Create an italic text node.
+   *
+   * @remarks
+   * This is a shortcut for
+   * ```tsx
+   * <Txt fontStyle={'italic'} />
+   * ```
+   *
+   * @param props - Additional text properties.
+   */
+  public static i(props: TxtProps) {
+    return new Txt({...props, fontStyle: 'italic'});
+  }
+
+  @initial('')
+  @signal()
+  declare public readonly text: SimpleSignal<string, this>;
+
+  protected getText(): string {
+    return this.innerText();
+  }
+
+  protected setText(value: SignalValue<string>) {
+    const children = this.children();
+    let leaf: TxtLeaf | null = null;
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if (leaf === null && child instanceof TxtLeaf) {
+        leaf = child;
+      } else {
+        child.parent(null);
+      }
+    }
+
+    if (leaf === null) {
+      leaf = new TxtLeaf({text: value});
+      leaf.parent(this);
+    } else {
+      leaf.text(value);
+    }
+
+    this.setParsedChildren([leaf]);
+  }
+
+  protected override setChildren(value: SignalValue<ComponentChildren>) {
+    if (this.children.context.raw() === value) {
+      return;
+    }
+
+    if (typeof value === 'string') {
+      this.text(value);
+    } else {
+      super.setChildren(value);
+    }
+  }
+
+  @threadable()
+  protected *tweenText(
+    value: SignalValue<string>,
+    time: number,
+    timingFunction: TimingFunction,
+    interpolationFunction: InterpolationFunction<string>,
+  ): ThreadGenerator {
+    const children = this.children();
+    if (children.length !== 1 || !(children[0] instanceof TxtLeaf)) {
+      this.text.save();
+    }
+
+    const leaf = this.childAs<TxtLeaf>(0)!;
+    const oldText = leaf.text.context.raw();
+    const oldSize = this.size.context.raw();
+    leaf.text(value);
+    const newSize = this.size();
+    leaf.text(oldText ?? DEFAULT);
+
+    const oldHeight = this.height();
+    if (oldHeight === 0) {
+      this.height(newSize.height);
+    } else if (newSize.height === 0) {
+      newSize.height = oldHeight;
+    }
+
+    yield* all(
+      this.size(newSize, time, timingFunction),
+      leaf.text(value, time, timingFunction, interpolationFunction),
+    );
+
+    this.children.context.setter(value);
+    this.size(oldSize);
+  }
+
+  protected getLayout(): boolean {
+    return true;
+  }
+
+  public constructor({children, text, ...props}: TxtProps) {
+    super(props);
+    this.children(text ?? children);
+  }
+
+  @computed()
+  protected innerText(): string {
+    const children = this.childrenAs<Txt | TxtLeaf>();
+    let text = '';
+    for (const child of children) {
+      text += child.text();
+    }
+
+    return text;
+  }
+
+  @computed()
+  protected parentTxt() {
+    const parent = this.parent();
+    return parent instanceof Txt ? parent : null;
+  }
+
+  protected override parseChildren(children: ComponentChildren): AnyTxt[] {
+    const result: AnyTxt[] = [];
+    const array = Array.isArray(children) ? children : [children];
+    for (const child of array) {
+      if (child instanceof Txt || child instanceof TxtLeaf) {
+        result.push(child);
+      } else if (typeof child === 'string') {
+        result.push(new TxtLeaf({text: child}));
+      }
+    }
+
+    return result;
+  }
+
+  protected override applyFlex() {
+    super.applyFlex();
+    this.element.style.display = this.findAncestor(is(Txt))
+      ? 'inline'
+      : 'block';
+  }
+
+  protected override draw(context: CanvasRenderingContext2D) {
+    this.drawChildren(context);
+  }
+}
+
+[
+  'fill',
+  'stroke',
+  'lineWidth',
+  'strokeFirst',
+  'lineCap',
+  'lineJoin',
+  'lineDash',
+  'lineDashOffset',
+].forEach(prop => {
+  (Txt.prototype as any)[`getDefault${capitalize(prop)}`] = function (
+    this: Txt,
+    initial: unknown,
+  ) {
+    return (this.parentTxt() as any)?.[prop]() ?? initial;
+  };
+});

package/src/lib/components/TxtLeaf.ts

@@ -0,0 +1,210 @@
+import {
+  BBox,
+  SignalValue,
+  SimpleSignal,
+  capitalize,
+  lazy,
+  textLerp,
+} from '@efxlab/motion-canvas-core';
+import {
+  computed,
+  initial,
+  interpolation,
+  nodeName,
+  signal,
+} from '../decorators';
+import {Shape, ShapeProps} from './Shape';
+import {Txt} from './Txt';
+import {View2D} from './View2D';
+
+export interface TxtLeafProps extends ShapeProps {
+  children?: string;
+  text?: SignalValue<string>;
+}
+
+@nodeName('TxtLeaf')
+export class TxtLeaf extends Shape {
+  @lazy(() => {
+    const formatter = document.createElement('span');
+    View2D.shadowRoot.append(formatter);
+    return formatter;
+  })
+  protected static formatter: HTMLDivElement;
+
+  @lazy(() => {
+    try {
+      return new (Intl as any).Segmenter(undefined, {
+        granularity: 'grapheme',
+      });
+    } catch (e) {
+      return null;
+    }
+  })
+  protected static readonly segmenter: any;
+
+  @initial('')
+  @interpolation(textLerp)
+  @signal()
+  declare public readonly text: SimpleSignal<string, this>;
+
+  public constructor({children, ...rest}: TxtLeafProps) {
+    super(rest);
+    if (children) {
+      this.text(children);
+    }
+  }
+
+  @computed()
+  protected parentTxt() {
+    const parent = this.parent();
+    return parent instanceof Txt ? parent : null;
+  }
+
+  protected override draw(context: CanvasRenderingContext2D) {
+    this.requestFontUpdate();
+    this.applyStyle(context);
+    this.applyText(context);
+    context.font = this.styles.font;
+    context.textBaseline = 'bottom';
+    if ('letterSpacing' in context) {
+      context.letterSpacing = `${this.letterSpacing()}px`;
+    }
+    const fontOffset = context.measureText('').fontBoundingBoxAscent;
+
+    const parentRect = this.element.getBoundingClientRect();
+    const {width, height} = this.size();
+    const range = document.createRange();
+    let line = '';
+    let lineRect: BBox | null = null;
+    for (const childNode of this.element.childNodes) {
+      if (!childNode.textContent) {
+        continue;
+      }
+
+      range.selectNodeContents(childNode);
+      const rangeRect = range.getBoundingClientRect();
+
+      const x = width / -2 + rangeRect.left - parentRect.left;
+      const y = height / -2 + rangeRect.top - parentRect.top + fontOffset;
+
+      if (!lineRect) {
+        lineRect = new BBox(x, y, rangeRect.width, rangeRect.height);
+        line = childNode.textContent;
+        continue;
+      }
+
+      if (lineRect.y === y) {
+        lineRect.width += rangeRect.width;
+        line += childNode.textContent;
+      } else {
+        this.drawText(context, line, lineRect);
+        lineRect.x = x;
+        lineRect.y = y;
+        lineRect.width = rangeRect.width;
+        lineRect.height = rangeRect.height;
+        line = childNode.textContent;
+      }
+    }
+
+    if (lineRect) {
+      this.drawText(context, line, lineRect);
+    }
+  }
+
+  protected drawText(
+    context: CanvasRenderingContext2D,
+    text: string,
+    box: BBox,
+  ) {
+    const y = box.y;
+    if (this.styles.whiteSpace !== 'pre') {
+      text = text.replace(/\s+/g, ' ');
+    }
+
+    if (this.lineWidth() <= 0) {
+      context.fillText(text, box.x, y);
+    } else if (this.strokeFirst()) {
+      context.strokeText(text, box.x, y);
+      context.fillText(text, box.x, y);
+    } else {
+      context.fillText(text, box.x, y);
+      context.strokeText(text, box.x, y);
+    }
+  }
+
+  protected override getCacheBBox(): BBox {
+    const size = this.computedSize();
+    const range = document.createRange();
+    range.selectNodeContents(this.element);
+    const bbox = range.getBoundingClientRect();
+
+    const lineWidth = this.lineWidth();
+    // We take the default value of the miterLimit as 10.
+    const miterLimitCoefficient = this.lineJoin() === 'miter' ? 0.5 * 10 : 0.5;
+
+    return new BBox(-size.width / 2, -size.height / 2, bbox.width, bbox.height)
+      .expand([0, this.fontSize() * 0.5])
+      .expand(lineWidth * miterLimitCoefficient);
+  }
+
+  protected override applyFlex() {
+    super.applyFlex();
+    this.element.style.display = 'inline';
+  }
+
+  protected override updateLayout() {
+    this.applyFont();
+    this.applyFlex();
+
+    // Make sure the text is aligned correctly even if the text is smaller than
+    // the container.
+    if (this.justifyContent.isInitial()) {
+      this.element.style.justifyContent =
+        this.styles.getPropertyValue('text-align');
+    }
+
+    const wrap =
+      this.styles.whiteSpace !== 'nowrap' && this.styles.whiteSpace !== 'pre';
+
+    if (wrap) {
+      this.element.innerText = '';
+
+      if (TxtLeaf.segmenter) {
+        for (const word of TxtLeaf.segmenter.segment(this.text())) {
+          this.element.appendChild(document.createTextNode(word.segment));
+        }
+      } else {
+        for (const word of this.text().split('')) {
+          this.element.appendChild(document.createTextNode(word));
+        }
+      }
+    } else if (this.styles.whiteSpace === 'pre') {
+      this.element.innerText = '';
+      for (const line of this.text().split('\n')) {
+        this.element.appendChild(document.createTextNode(line + '\n'));
+      }
+    } else {
+      this.element.innerText = this.text();
+    }
+  }
+}
+
+[
+  'fill',
+  'stroke',
+  'lineWidth',
+  'strokeFirst',
+  'lineCap',
+  'lineJoin',
+  'lineDash',
+  'lineDashOffset',
+].forEach(prop => {
+  (TxtLeaf.prototype as any)[`get${capitalize(prop)}`] = function (
+    this: TxtLeaf,
+  ) {
+    return (
+      (this.parentTxt() as any)?.[prop]() ??
+      (this as any)[prop].context.getInitial()
+    );
+  };
+});