@twick/2d 0.13.0 → 0.14.2

package/src/lib/components/View2D.ts

@@ -1,98 +1,98 @@
-import type {SimpleSignal} from '@twick/core';
-import {PlaybackState, lazy} from '@twick/core';
-import {initial, signal} from '../decorators';
-import {nodeName} from '../decorators/nodeName';
-import {useScene2D} from '../scenes/useScene2D';
-import type {Node} from './Node';
-import type {RectProps} from './Rect';
-import {Rect} from './Rect';
-
-export interface View2DProps extends RectProps {
-  assetHash: string;
-}
-
-@nodeName('View2D')
-export class View2D extends Rect {
-  // TODO: scope this to individual player
-  @lazy(() => {
-    const frameID = 'twick-2d-frame';
-    let frame = document.querySelector<HTMLDivElement>(`#${frameID}`);
-    if (!frame) {
-      frame = document.createElement('div');
-      frame.id = frameID;
-      frame.style.position = 'absolute';
-      frame.style.pointerEvents = 'none';
-      frame.style.top = '0';
-      frame.style.left = '0';
-      frame.style.fontFeatureSettings = 'normal'; // TODO: find solution that fully isolates CSS
-      frame.style.opacity = '0';
-      frame.style.overflow = 'hidden';
-      document.body.prepend(frame);
-    }
-    return frame.shadowRoot ?? frame.attachShadow({mode: 'open'});
-  })
-  public static shadowRoot: ShadowRoot;
-
-  @initial(PlaybackState.Paused)
-  @signal()
-  public declare readonly playbackState: SimpleSignal<PlaybackState, this>;
-
-  @initial(0)
-  @signal()
-  public declare readonly globalTime: SimpleSignal<number, this>;
-
-  @initial(0)
-  @signal()
-  public declare readonly fps: SimpleSignal<number, this>;
-
-  @signal()
-  public declare readonly assetHash: SimpleSignal<string, this>;
-
-  public constructor(props: View2DProps) {
-    super({
-      composite: true,
-      fontFamily: 'Roboto',
-      fontSize: 48,
-      lineHeight: '120%',
-      textWrap: false,
-      fontStyle: 'normal',
-      ...props,
-    });
-    this.view2D = this;
-
-    View2D.shadowRoot.append(this.element);
-    this.applyFlex();
-  }
-
-  public override dispose() {
-    this.removeChildren();
-    super.dispose();
-  }
-
-  public override async render(context: CanvasRenderingContext2D) {
-    this.computedSize();
-    this.computedPosition();
-    await super.render(context);
-  }
-
-  /**
-   * Find a node by its key.
-   *
-   * @param key - The key of the node.
-   */
-  public findKey<T extends Node = Node>(key: string): T | null {
-    return (useScene2D().getNode(key) as T) ?? null;
-  }
-
-  protected override requestLayoutUpdate() {
-    this.updateLayout();
-  }
-
-  protected override requestFontUpdate() {
-    this.applyFont();
-  }
-
-  public override view(): View2D {
-    return this;
-  }
-}
+import type {SimpleSignal} from '@twick/core';
+import {PlaybackState, lazy} from '@twick/core';
+import {initial, signal} from '../decorators';
+import {nodeName} from '../decorators/nodeName';
+import {useScene2D} from '../scenes/useScene2D';
+import type {Node} from './Node';
+import type {RectProps} from './Rect';
+import {Rect} from './Rect';
+
+export interface View2DProps extends RectProps {
+  assetHash: string;
+}
+
+@nodeName('View2D')
+export class View2D extends Rect {
+  // TODO: scope this to individual player
+  @lazy(() => {
+    const frameID = 'twick-2d-frame';
+    let frame = document.querySelector<HTMLDivElement>(`#${frameID}`);
+    if (!frame) {
+      frame = document.createElement('div');
+      frame.id = frameID;
+      frame.style.position = 'absolute';
+      frame.style.pointerEvents = 'none';
+      frame.style.top = '0';
+      frame.style.left = '0';
+      frame.style.fontFeatureSettings = 'normal'; // TODO: find solution that fully isolates CSS
+      frame.style.opacity = '0';
+      frame.style.overflow = 'hidden';
+      document.body.prepend(frame);
+    }
+    return frame.shadowRoot ?? frame.attachShadow({mode: 'open'});
+  })
+  public static shadowRoot: ShadowRoot;
+
+  @initial(PlaybackState.Paused)
+  @signal()
+  public declare readonly playbackState: SimpleSignal<PlaybackState, this>;
+
+  @initial(0)
+  @signal()
+  public declare readonly globalTime: SimpleSignal<number, this>;
+
+  @initial(0)
+  @signal()
+  public declare readonly fps: SimpleSignal<number, this>;
+
+  @signal()
+  public declare readonly assetHash: SimpleSignal<string, this>;
+
+  public constructor(props: View2DProps) {
+    super({
+      composite: true,
+      fontFamily: 'Roboto',
+      fontSize: 48,
+      lineHeight: '120%',
+      textWrap: false,
+      fontStyle: 'normal',
+      ...props,
+    });
+    this.view2D = this;
+
+    View2D.shadowRoot.append(this.element);
+    this.applyFlex();
+  }
+
+  public override dispose() {
+    this.removeChildren();
+    super.dispose();
+  }
+
+  public override async render(context: CanvasRenderingContext2D) {
+    this.computedSize();
+    this.computedPosition();
+    await super.render(context);
+  }
+
+  /**
+   * Find a node by its key.
+   *
+   * @param key - The key of the node.
+   */
+  public findKey<T extends Node = Node>(key: string): T | null {
+    return (useScene2D().getNode(key) as T) ?? null;
+  }
+
+  protected override requestLayoutUpdate() {
+    this.updateLayout();
+  }
+
+  protected override requestFontUpdate() {
+    this.applyFont();
+  }
+
+  public override view(): View2D {
+    return this;
+  }
+}

package/src/lib/components/__tests__/children.test.tsx

@@ -1,142 +1,142 @@
-import {createRef, createSignal, range} from '@twick/core';
-import {describe, expect, it} from 'vitest';
-import {useScene2D} from '../../scenes';
-import {Node} from '../Node';
-import {mockScene2D} from './mockScene2D';
-
-describe('children', () => {
-  mockScene2D();
-
-  it('Append children', () => {
-    const view = useScene2D().getView();
-    const parent = createRef<Node>();
-    const childA = createRef<Node>();
-    const childB = createRef<Node>();
-
-    view.add(
-      <Node ref={parent}>
-        <Node ref={childA} />
-        <Node ref={childB} />
-      </Node>,
-    );
-
-    expect(childA().parent()).toBe(parent());
-    expect(childB().parent()).toBe(parent());
-    expect(parent().children()).toEqual([childA(), childB()]);
-  });
-
-  it('Clear children', () => {
-    const view = useScene2D().getView();
-    const parent = createRef<Node>();
-    const childA = createRef<Node>();
-    const childB = createRef<Node>();
-
-    view.add(
-      <Node ref={parent}>
-        <Node ref={childA} />
-        <Node ref={childB} />
-      </Node>,
-    );
-
-    parent().removeChildren();
-
-    expect(childA().parent()).toBe(null);
-    expect(childB().parent()).toBe(null);
-    expect(parent().children()).toEqual([]);
-  });
-
-  it('Replace children', () => {
-    const view = useScene2D().getView();
-    const parent = createRef<Node>();
-    const childA = <Node />;
-    const childB = <Node />;
-
-    view.add(<Node ref={parent}>{childA}</Node>);
-
-    parent().children(childB);
-
-    expect(childA.parent()).toBe(null);
-    expect(childB.parent()).toBe(parent());
-    expect(parent().children()).toEqual([childB]);
-  });
-
-  it('Take a child from another node', () => {
-    const view = useScene2D().getView();
-    const parentA = createRef<Node>();
-    const parentB = createRef<Node>();
-    const child = createRef<Node>();
-
-    view.add(
-      <>
-        <Node ref={parentA}>
-          <Node ref={child} />
-        </Node>
-        <Node ref={parentB} />
-      </>,
-    );
-
-    expect(parentA().children()).toEqual([child()]);
-    expect(parentB().children()).toEqual([]);
-    expect(child().parent()).toBe(parentA());
-
-    parentB().children(child());
-
-    expect(parentA().children()).toEqual([]);
-    expect(parentB().children()).toEqual([child()]);
-    expect(child().parent()).toBe(parentB());
-  });
-
-  it('Append children conditionally', () => {
-    const view = useScene2D().getView();
-    const parent = createRef<Node>();
-    const childA = <Node />;
-    const childB = <Node />;
-    const predicate = createSignal(false);
-
-    view.add(<Node ref={parent}>{() => (predicate() ? childA : childB)}</Node>);
-
-    expect(parent().children()).toEqual([childB]);
-    expect(childA.parent()).toBe(null);
-    expect(childB.parent()).toBe(parent());
-
-    predicate(true);
-
-    expect(parent().children()).toEqual([childA]);
-    expect(childA.parent()).toBe(parent());
-    expect(childB.parent()).toBe(null);
-  });
-
-  it('Spawn reactive children', () => {
-    const view = useScene2D().getView();
-    const parent = createRef<Node>();
-    const count = createSignal(3);
-
-    view.add(
-      <Node ref={parent}>{() => range(count()).map(() => <Node />)}</Node>,
-    );
-
-    expect(parent().children().length).toBe(3);
-
-    count(5);
-
-    expect(parent().children().length).toBe(5);
-  });
-
-  it('Replace a spawner', () => {
-    const view = useScene2D().getView();
-    const parent = createRef<Node>();
-    const childA = <Node />;
-    const childB = <Node />;
-
-    view.add(<Node ref={parent}>{() => childA}</Node>);
-
-    expect(parent().children()).toEqual([childA]);
-    expect(childA.parent()).toBe(parent());
-
-    parent().children(childB);
-
-    expect(childA.parent()).toBe(null);
-    expect(childB.parent()).toBe(parent());
-    expect(parent().children()).toEqual([childB]);
-  });
-});
+import {createRef, createSignal, range} from '@twick/core';
+import {describe, expect, it} from 'vitest';
+import {useScene2D} from '../../scenes';
+import {Node} from '../Node';
+import {mockScene2D} from './mockScene2D';
+
+describe('children', () => {
+  mockScene2D();
+
+  it('Append children', () => {
+    const view = useScene2D().getView();
+    const parent = createRef<Node>();
+    const childA = createRef<Node>();
+    const childB = createRef<Node>();
+
+    view.add(
+      <Node ref={parent}>
+        <Node ref={childA} />
+        <Node ref={childB} />
+      </Node>,
+    );
+
+    expect(childA().parent()).toBe(parent());
+    expect(childB().parent()).toBe(parent());
+    expect(parent().children()).toEqual([childA(), childB()]);
+  });
+
+  it('Clear children', () => {
+    const view = useScene2D().getView();
+    const parent = createRef<Node>();
+    const childA = createRef<Node>();
+    const childB = createRef<Node>();
+
+    view.add(
+      <Node ref={parent}>
+        <Node ref={childA} />
+        <Node ref={childB} />
+      </Node>,
+    );
+
+    parent().removeChildren();
+
+    expect(childA().parent()).toBe(null);
+    expect(childB().parent()).toBe(null);
+    expect(parent().children()).toEqual([]);
+  });
+
+  it('Replace children', () => {
+    const view = useScene2D().getView();
+    const parent = createRef<Node>();
+    const childA = <Node />;
+    const childB = <Node />;
+
+    view.add(<Node ref={parent}>{childA}</Node>);
+
+    parent().children(childB);
+
+    expect(childA.parent()).toBe(null);
+    expect(childB.parent()).toBe(parent());
+    expect(parent().children()).toEqual([childB]);
+  });
+
+  it('Take a child from another node', () => {
+    const view = useScene2D().getView();
+    const parentA = createRef<Node>();
+    const parentB = createRef<Node>();
+    const child = createRef<Node>();
+
+    view.add(
+      <>
+        <Node ref={parentA}>
+          <Node ref={child} />
+        </Node>
+        <Node ref={parentB} />
+      </>,
+    );
+
+    expect(parentA().children()).toEqual([child()]);
+    expect(parentB().children()).toEqual([]);
+    expect(child().parent()).toBe(parentA());
+
+    parentB().children(child());
+
+    expect(parentA().children()).toEqual([]);
+    expect(parentB().children()).toEqual([child()]);
+    expect(child().parent()).toBe(parentB());
+  });
+
+  it('Append children conditionally', () => {
+    const view = useScene2D().getView();
+    const parent = createRef<Node>();
+    const childA = <Node />;
+    const childB = <Node />;
+    const predicate = createSignal(false);
+
+    view.add(<Node ref={parent}>{() => (predicate() ? childA : childB)}</Node>);
+
+    expect(parent().children()).toEqual([childB]);
+    expect(childA.parent()).toBe(null);
+    expect(childB.parent()).toBe(parent());
+
+    predicate(true);
+
+    expect(parent().children()).toEqual([childA]);
+    expect(childA.parent()).toBe(parent());
+    expect(childB.parent()).toBe(null);
+  });
+
+  it('Spawn reactive children', () => {
+    const view = useScene2D().getView();
+    const parent = createRef<Node>();
+    const count = createSignal(3);
+
+    view.add(
+      <Node ref={parent}>{() => range(count()).map(() => <Node />)}</Node>,
+    );
+
+    expect(parent().children().length).toBe(3);
+
+    count(5);
+
+    expect(parent().children().length).toBe(5);
+  });
+
+  it('Replace a spawner', () => {
+    const view = useScene2D().getView();
+    const parent = createRef<Node>();
+    const childA = <Node />;
+    const childB = <Node />;
+
+    view.add(<Node ref={parent}>{() => childA}</Node>);
+
+    expect(parent().children()).toEqual([childA]);
+    expect(childA.parent()).toBe(parent());
+
+    parent().children(childB);
+
+    expect(childA.parent()).toBe(null);
+    expect(childB.parent()).toBe(parent());
+    expect(parent().children()).toEqual([childB]);
+  });
+});