@twick/2d 0.13.0 → 0.14.2

package/src/lib/components/Txt.test.tsx

@@ -1,81 +1,81 @@
-import {linear, waitFor} from '@twick/core';
-import {describe, expect, it, vi} from 'vitest';
-import {Txt} from './Txt';
-import {TxtLeaf} from './TxtLeaf';
-import {generatorTest} from './__tests__/generatorTest';
-import {mockScene2D} from './__tests__/mockScene2D';
-
-describe('Txt', () => {
-  mockScene2D();
-
-  it('Handle plain text', () => {
-    const node = (<Txt lineWidth={8}>test</Txt>) as Txt;
-
-    const parseSpy = vi.spyOn(node as any, 'parseChildren');
-    const leaf = node.childAs<TxtLeaf>(0);
-
-    expect(node.text()).toBe('test');
-    expect(node.lineWidth()).toBe(8);
-    expect(node.children().length).toBe(1);
-    expect(leaf).toBeInstanceOf(TxtLeaf);
-    expect(leaf!.text()).toBe('test');
-    expect(leaf!.lineWidth()).toBe(8);
-
-    node.lineWidth(16);
-    node.text('changed');
-
-    expect(node.childAs(0)).toBe(leaf);
-    expect(leaf!.lineWidth()).toBe(16);
-    expect(leaf!.text()).toBe('changed');
-
-    // Parsing should not happen when operating exclusively on simple text
-    expect(parseSpy).toHaveBeenCalledTimes(0);
-  });
-
-  it('Handle complex text', () => {
-    const node = (
-      <Txt lineWidth={8}>
-        Apple <Txt>Banana</Txt> Cherry
-      </Txt>
-    ) as Txt;
-
-    const first = node.childAs<TxtLeaf>(0);
-    const second = node.childAs<Txt>(1);
-    const third = node.childAs<TxtLeaf>(2);
-
-    expect(node.text()).toBe('Apple Banana Cherry');
-    expect(node.lineWidth()).toBe(8);
-    expect(node.children().length).toBe(3);
-    expect(first).toBeInstanceOf(TxtLeaf);
-    expect(first!.text()).toBe('Apple ');
-    expect(first!.lineWidth()).toBe(8);
-
-    expect(second).toBeInstanceOf(Txt);
-    expect(second!.text()).toBe('Banana');
-    expect(second!.lineWidth()).toBe(8);
-
-    expect(third).toBeInstanceOf(TxtLeaf);
-    expect(third!.text()).toBe(' Cherry');
-    expect(third!.lineWidth()).toBe(8);
-  });
-
-  it(
-    'Tween complex to simple text',
-    generatorTest(function* () {
-      const node = (
-        <Txt>
-          <Txt>Apple</Txt> Banana
-        </Txt>
-      ) as Txt;
-
-      yield node.text('Simple', 2, linear);
-      yield* waitFor(1);
-
-      const leaf = node.childAs<TxtLeaf>(0)!;
-
-      expect(node.children().length).toBe(1);
-      expect(node.text()).toBe('Apple Ban');
-      expect(leaf.text()).toBe('Apple Ban');
-    }),
-  );
-});
+import {linear, waitFor} from '@twick/core';
+import {describe, expect, it, vi} from 'vitest';
+import {Txt} from './Txt';
+import {TxtLeaf} from './TxtLeaf';
+import {generatorTest} from './__tests__/generatorTest';
+import {mockScene2D} from './__tests__/mockScene2D';
+
+describe('Txt', () => {
+  mockScene2D();
+
+  it('Handle plain text', () => {
+    const node = (<Txt lineWidth={8}>test</Txt>) as Txt;
+
+    const parseSpy = vi.spyOn(node as any, 'parseChildren');
+    const leaf = node.childAs<TxtLeaf>(0);
+
+    expect(node.text()).toBe('test');
+    expect(node.lineWidth()).toBe(8);
+    expect(node.children().length).toBe(1);
+    expect(leaf).toBeInstanceOf(TxtLeaf);
+    expect(leaf!.text()).toBe('test');
+    expect(leaf!.lineWidth()).toBe(8);
+
+    node.lineWidth(16);
+    node.text('changed');
+
+    expect(node.childAs(0)).toBe(leaf);
+    expect(leaf!.lineWidth()).toBe(16);
+    expect(leaf!.text()).toBe('changed');
+
+    // Parsing should not happen when operating exclusively on simple text
+    expect(parseSpy).toHaveBeenCalledTimes(0);
+  });
+
+  it('Handle complex text', () => {
+    const node = (
+      <Txt lineWidth={8}>
+        Apple <Txt>Banana</Txt> Cherry
+      </Txt>
+    ) as Txt;
+
+    const first = node.childAs<TxtLeaf>(0);
+    const second = node.childAs<Txt>(1);
+    const third = node.childAs<TxtLeaf>(2);
+
+    expect(node.text()).toBe('Apple Banana Cherry');
+    expect(node.lineWidth()).toBe(8);
+    expect(node.children().length).toBe(3);
+    expect(first).toBeInstanceOf(TxtLeaf);
+    expect(first!.text()).toBe('Apple ');
+    expect(first!.lineWidth()).toBe(8);
+
+    expect(second).toBeInstanceOf(Txt);
+    expect(second!.text()).toBe('Banana');
+    expect(second!.lineWidth()).toBe(8);
+
+    expect(third).toBeInstanceOf(TxtLeaf);
+    expect(third!.text()).toBe(' Cherry');
+    expect(third!.lineWidth()).toBe(8);
+  });
+
+  it(
+    'Tween complex to simple text',
+    generatorTest(function* () {
+      const node = (
+        <Txt>
+          <Txt>Apple</Txt> Banana
+        </Txt>
+      ) as Txt;
+
+      yield node.text('Simple', 2, linear);
+      yield* waitFor(1);
+
+      const leaf = node.childAs<TxtLeaf>(0)!;
+
+      expect(node.children().length).toBe(1);
+      expect(node.text()).toBe('Apple Ban');
+      expect(leaf.text()).toBe('Apple Ban');
+    }),
+  );
+});

package/src/lib/components/Txt.ts

@@ -1,203 +1,203 @@
-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;
-  };
-});
+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;
+  };
+});