@twick/2d 0.14.21 → 0.15.0

package/src/lib/components/Txt.ts

@@ -1,203 +0,0 @@
-import type {
-  InterpolationFunction,
-  SignalValue,
-  SimpleSignal,
-  ThreadGenerator,
-  TimingFunction,
-} from '@twick/core';
-import {DEFAULT, all, capitalize, threadable} from '@twick/core';
-import {computed, initial, nodeName, signal} from '../decorators';
-import {is} from '../utils';
-import type {Node} from './Node';
-import type {ShapeProps} from './Shape';
-import {Shape} from './Shape';
-import {TXT_TYPE, TxtLeaf} from './TxtLeaf';
-import type {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 {
-  public readonly [TXT_TYPE] = true;
-
-  /**
-   * 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()
-  public declare 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 {
-    yield document.fonts?.ready;
-    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);
-
-    if (this.height() === 0) {
-      this.height(newSize.height);
-    }
-
-    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 async draw(context: CanvasRenderingContext2D) {
-    await document.fonts?.ready;
-    await 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

@@ -1,205 +0,0 @@
-import type {SignalValue, SimpleSignal} from '@twick/core';
-import {BBox, capitalize, lazy, textLerp} from '@twick/core';
-import {
-  computed,
-  initial,
-  interpolation,
-  nodeName,
-  signal,
-} from '../decorators';
-import type {ShapeProps} from './Shape';
-import {Shape} from './Shape';
-
-export interface TxtLeafProps extends ShapeProps {
-  children?: string;
-  text?: SignalValue<string>;
-}
-
-export const TXT_TYPE = Symbol('Txt');
-
-@nodeName('TxtLeaf')
-export class TxtLeaf extends Shape {
-  @lazy(() => {
-    try {
-      return new (Intl as any).Segmenter(undefined, {
-        granularity: 'grapheme',
-      });
-    } catch (e) {
-      return null;
-    }
-  })
-  protected static readonly segmenter: any;
-
-  @initial('')
-  @interpolation(textLerp)
-  @signal()
-  public declare readonly text: SimpleSignal<string, this>;
-
-  public constructor({children, ...rest}: TxtLeafProps) {
-    super(rest);
-    if (children) {
-      this.text(children);
-    }
-  }
-
-  @computed()
-  protected parentTxt() {
-    const parent = this.parent();
-    if (!parent) {
-      return null;
-    }
-
-    if (!(TXT_TYPE in parent)) {
-      return null;
-    }
-
-    return parent;
-  }
-
-  protected override async draw(context: CanvasRenderingContext2D) {
-    this.requestFontUpdate();
-    this.applyStyle(context);
-    await document.fonts?.ready;
-    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 = '';
-    const lineRect = new BBox();
-    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.y === y) {
-        lineRect.width += rangeRect.width;
-        line += childNode.textContent;
-      } else {
-        await this.drawText(context, line, lineRect);
-        lineRect.x = x;
-        lineRect.y = y;
-        lineRect.width = rangeRect.width;
-        lineRect.height = rangeRect.height;
-        line = childNode.textContent;
-      }
-    }
-
-    await this.drawText(context, line, lineRect);
-  }
-
-  protected async drawText(
-    context: CanvasRenderingContext2D,
-    text: string,
-    box: BBox,
-  ) {
-    const y = box.y;
-    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();
-    }
-  }
-}
-
-/**
- * Overwrite all getters for signal values to return the parent value if it
- * exists.
- *
- * The getters on the TxtLeaf class are used by the `@signal` decorators and
- * are not used by the class or its consumers directly.
- *
- * Check out 2d/src/lib/utils/makeSignalExtensions.ts if this is confusing.
- */
-[
-  '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()
-    );
-  };
-});