@twick/2d 0.13.0 → 0.14.2

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

@@ -1,126 +1,126 @@
-import {Vector2, createSignal, range} from '@twick/core';
-import {describe, expect, it} from 'vitest';
-import {Circle} from '../Circle';
-import {Node} from '../Node';
-import {mockScene2D} from './mockScene2D';
-
-describe('clone', () => {
-  mockScene2D();
-
-  it('Normal clone', () => {
-    const signal = createSignal(45);
-    const template = (
-      <Circle lineWidth={8} startAngle={signal} end={0.5} />
-    ) as Circle;
-    const clone = template.clone({end: 0});
-
-    expect(clone.lineWidth()).toBe(8);
-    expect(clone.startAngle()).toBe(45);
-    expect(clone.end()).toBe(0);
-    expect(clone.startArrow.context.isInitial()).toBe(true);
-
-    signal(90);
-
-    expect(clone.startAngle()).toBe(90);
-  });
-
-  it('Reactive clone', () => {
-    const signal = createSignal(45);
-    const template = (
-      <Circle lineWidth={8} startAngle={signal} end={0.5} />
-    ) as Circle;
-    const clone = template.reactiveClone({end: 0});
-
-    expect(clone.lineWidth()).toBe(8);
-    expect(clone.startAngle()).toBe(45);
-    expect(clone.end()).toBe(0);
-    expect(clone.startArrow.context.isInitial()).toBe(false);
-
-    template.lineWidth(16);
-    template.startArrow(true);
-    template.end(0.25);
-    signal(90);
-
-    expect(clone.lineWidth()).toBe(16);
-    expect(clone.startAngle()).toBe(90);
-    expect(clone.startArrow()).toBe(true);
-    expect(clone.end()).toBe(0);
-  });
-
-  it('Snapshot clone', () => {
-    const signal = createSignal(45);
-    const template = (
-      <Circle lineWidth={8} startAngle={signal} end={0.5} />
-    ) as Circle;
-    const clone = template.snapshotClone({end: 0});
-
-    expect(clone.lineWidth()).toBe(8);
-    expect(clone.startAngle()).toBe(45);
-    expect(clone.end()).toBe(0);
-    expect(clone.startArrow.context.isInitial()).toBe(true);
-
-    template.lineWidth(16);
-    template.startArrow(true);
-    signal(90);
-
-    expect(clone.lineWidth()).toBe(8);
-    expect(clone.startAngle()).toBe(45);
-    expect(clone.startArrow()).toBe(false);
-  });
-
-  it('Clone compound signal', () => {
-    const signal = Vector2.createSignal(200);
-    const template = (<Circle offset={1} position={signal} />) as Circle;
-    const clone = template.clone({x: 100, offsetY: -1});
-
-    expect(clone.x()).toBe(100);
-    expect(clone.y()).toBe(200);
-    expect(clone.offset.x()).toBe(1);
-    expect(clone.offset.y()).toBe(-1);
-
-    signal([300, 400]);
-
-    expect(clone.x()).toBe(100);
-    expect(clone.y()).toBe(400);
-  });
-
-  it('Clone children', () => {
-    const signal = createSignal(45);
-    const template = (
-      <Node>
-        <Circle lineWidth={8} startAngle={signal} />
-      </Node>
-    );
-    const clone = template.clone();
-
-    expect(clone.children().length).toBe(1);
-    expect(clone.childAs(0)).not.toBe(template.childAs(0));
-    expect(clone.childAs<Circle>(0)!.lineWidth()).toBe(8);
-    expect(clone.childAs<Circle>(0)!.startAngle()).toBe(45);
-
-    signal(90);
-
-    expect(clone.childAs<Circle>(0)!.startAngle()).toBe(90);
-  });
-
-  it('Clone spawner', () => {
-    const count = createSignal(3);
-    const template = (
-      <Node>
-        {() =>
-          range(count()).map(() => (
-            <Circle lineWidth={8} startAngle={count} end={0.5} />
-          ))
-        }
-      </Node>
-    );
-    const clone = template.clone();
-
-    expect(clone.children().length).toBe(3);
-    expect(clone.childAs(0)).not.toBe(template.childAs(0));
-
-    count(5);
-
-    expect(clone.children().length).toBe(5);
-  });
-});
+import {Vector2, createSignal, range} from '@twick/core';
+import {describe, expect, it} from 'vitest';
+import {Circle} from '../Circle';
+import {Node} from '../Node';
+import {mockScene2D} from './mockScene2D';
+
+describe('clone', () => {
+  mockScene2D();
+
+  it('Normal clone', () => {
+    const signal = createSignal(45);
+    const template = (
+      <Circle lineWidth={8} startAngle={signal} end={0.5} />
+    ) as Circle;
+    const clone = template.clone({end: 0});
+
+    expect(clone.lineWidth()).toBe(8);
+    expect(clone.startAngle()).toBe(45);
+    expect(clone.end()).toBe(0);
+    expect(clone.startArrow.context.isInitial()).toBe(true);
+
+    signal(90);
+
+    expect(clone.startAngle()).toBe(90);
+  });
+
+  it('Reactive clone', () => {
+    const signal = createSignal(45);
+    const template = (
+      <Circle lineWidth={8} startAngle={signal} end={0.5} />
+    ) as Circle;
+    const clone = template.reactiveClone({end: 0});
+
+    expect(clone.lineWidth()).toBe(8);
+    expect(clone.startAngle()).toBe(45);
+    expect(clone.end()).toBe(0);
+    expect(clone.startArrow.context.isInitial()).toBe(false);
+
+    template.lineWidth(16);
+    template.startArrow(true);
+    template.end(0.25);
+    signal(90);
+
+    expect(clone.lineWidth()).toBe(16);
+    expect(clone.startAngle()).toBe(90);
+    expect(clone.startArrow()).toBe(true);
+    expect(clone.end()).toBe(0);
+  });
+
+  it('Snapshot clone', () => {
+    const signal = createSignal(45);
+    const template = (
+      <Circle lineWidth={8} startAngle={signal} end={0.5} />
+    ) as Circle;
+    const clone = template.snapshotClone({end: 0});
+
+    expect(clone.lineWidth()).toBe(8);
+    expect(clone.startAngle()).toBe(45);
+    expect(clone.end()).toBe(0);
+    expect(clone.startArrow.context.isInitial()).toBe(true);
+
+    template.lineWidth(16);
+    template.startArrow(true);
+    signal(90);
+
+    expect(clone.lineWidth()).toBe(8);
+    expect(clone.startAngle()).toBe(45);
+    expect(clone.startArrow()).toBe(false);
+  });
+
+  it('Clone compound signal', () => {
+    const signal = Vector2.createSignal(200);
+    const template = (<Circle offset={1} position={signal} />) as Circle;
+    const clone = template.clone({x: 100, offsetY: -1});
+
+    expect(clone.x()).toBe(100);
+    expect(clone.y()).toBe(200);
+    expect(clone.offset.x()).toBe(1);
+    expect(clone.offset.y()).toBe(-1);
+
+    signal([300, 400]);
+
+    expect(clone.x()).toBe(100);
+    expect(clone.y()).toBe(400);
+  });
+
+  it('Clone children', () => {
+    const signal = createSignal(45);
+    const template = (
+      <Node>
+        <Circle lineWidth={8} startAngle={signal} />
+      </Node>
+    );
+    const clone = template.clone();
+
+    expect(clone.children().length).toBe(1);
+    expect(clone.childAs(0)).not.toBe(template.childAs(0));
+    expect(clone.childAs<Circle>(0)!.lineWidth()).toBe(8);
+    expect(clone.childAs<Circle>(0)!.startAngle()).toBe(45);
+
+    signal(90);
+
+    expect(clone.childAs<Circle>(0)!.startAngle()).toBe(90);
+  });
+
+  it('Clone spawner', () => {
+    const count = createSignal(3);
+    const template = (
+      <Node>
+        {() =>
+          range(count()).map(() => (
+            <Circle lineWidth={8} startAngle={count} end={0.5} />
+          ))
+        }
+      </Node>
+    );
+    const clone = template.clone();
+
+    expect(clone.children().length).toBe(3);
+    expect(clone.childAs(0)).not.toBe(template.childAs(0));
+
+    count(5);
+
+    expect(clone.children().length).toBe(5);
+  });
+});

package/src/lib/components/__tests__/generatorTest.ts

@@ -1,28 +1,28 @@
-import type {ThreadGeneratorFactory} from '@twick/core';
-import {threads} from '@twick/core';
-import {useScene2D} from '../../scenes';
-import type {View2D} from '../View2D';
-
-/**
- * Turn a generator factory into a test function.
- *
- * @example
- * ```ts
- * it(
- *   'Example test',
- *   generatorTest(function* () {
- *     yield* waitFor(1);
- *     expect(useTime()).toBe(1);
- *   }),
- * );
- * ```
- *
- * @param factory - The generator factory to test.
- */
-export function generatorTest(factory: ThreadGeneratorFactory<View2D>) {
-  return () => {
-    const view = useScene2D().getView();
-    const tasks = threads(() => factory(view));
-    [...tasks];
-  };
-}
+import type {ThreadGeneratorFactory} from '@twick/core';
+import {threads} from '@twick/core';
+import {useScene2D} from '../../scenes';
+import type {View2D} from '../View2D';
+
+/**
+ * Turn a generator factory into a test function.
+ *
+ * @example
+ * ```ts
+ * it(
+ *   'Example test',
+ *   generatorTest(function* () {
+ *     yield* waitFor(1);
+ *     expect(useTime()).toBe(1);
+ *   }),
+ * );
+ * ```
+ *
+ * @param factory - The generator factory to test.
+ */
+export function generatorTest(factory: ThreadGeneratorFactory<View2D>) {
+  return () => {
+    const view = useScene2D().getView();
+    const tasks = threads(() => factory(view));
+    [...tasks];
+  };
+}

package/src/lib/components/__tests__/mockScene2D.ts

@@ -1,45 +1,45 @@
-import type {FullSceneDescription, ThreadGeneratorFactory} from '@twick/core';
-import {
-  PlaybackManager,
-  PlaybackStatus,
-  Vector2,
-  endPlayback,
-  endScene,
-  startPlayback,
-  startScene,
-} from '@twick/core';
-import {afterAll, beforeAll, beforeEach} from 'vitest';
-import {Scene2D, makeScene2D} from '../../scenes';
-import type {View2D} from '../View2D';
-
-/**
- * Set up the test environment to support creating nodes.
- *
- * @remarks
- * Should be called inside a `describe()` block.
- * Due to js-dom limitations, layouts are not correctly computed.
- */
-export function mockScene2D() {
-  const playback = new PlaybackManager();
-  const status = new PlaybackStatus(playback);
-  const description = {
-    ...makeScene2D('scene 1', function* () {
-      // do nothing
-    }),
-    name: 'test',
-    size: new Vector2(1920, 1080),
-    resolutionScale: 1,
-    playback: status,
-  } as unknown as FullSceneDescription<ThreadGeneratorFactory<View2D>>;
-  const scene = new Scene2D(description);
-
-  beforeAll(() => {
-    startScene(scene);
-    startPlayback(status);
-  });
-  afterAll(() => {
-    endPlayback(status);
-    endScene(scene);
-  });
-  beforeEach(() => scene.reset());
-}
+import type {FullSceneDescription, ThreadGeneratorFactory} from '@twick/core';
+import {
+  PlaybackManager,
+  PlaybackStatus,
+  Vector2,
+  endPlayback,
+  endScene,
+  startPlayback,
+  startScene,
+} from '@twick/core';
+import {afterAll, beforeAll, beforeEach} from 'vitest';
+import {Scene2D, makeScene2D} from '../../scenes';
+import type {View2D} from '../View2D';
+
+/**
+ * Set up the test environment to support creating nodes.
+ *
+ * @remarks
+ * Should be called inside a `describe()` block.
+ * Due to js-dom limitations, layouts are not correctly computed.
+ */
+export function mockScene2D() {
+  const playback = new PlaybackManager();
+  const status = new PlaybackStatus(playback);
+  const description = {
+    ...makeScene2D('scene 1', function* () {
+      // do nothing
+    }),
+    name: 'test',
+    size: new Vector2(1920, 1080),
+    resolutionScale: 1,
+    playback: status,
+  } as unknown as FullSceneDescription<ThreadGeneratorFactory<View2D>>;
+  const scene = new Scene2D(description);
+
+  beforeAll(() => {
+    startScene(scene);
+    startPlayback(status);
+  });
+  afterAll(() => {
+    endPlayback(status);
+    endScene(scene);
+  });
+  beforeEach(() => scene.reset());
+}

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

@@ -1,122 +1,122 @@
-import {createRef, createRefArray} from '@twick/core';
-import {describe, expect, it} from 'vitest';
-import {useScene2D} from '../../scenes';
-import {is} from '../../utils';
-import {Circle} from '../Circle';
-import {Rect} from '../Rect';
-import {mockScene2D} from './mockScene2D';
-
-describe('query', () => {
-  mockScene2D();
-
-  it('Query items based on their type', () => {
-    const view = useScene2D().getView();
-    const circles = createRefArray<Circle>();
-    view.add(
-      <>
-        <Rect />
-        <Circle ref={circles} />
-        <Rect />
-        <Circle ref={circles} />
-        <Rect />
-      </>,
-    );
-
-    const query = view.findAll(is(Circle));
-    expect(query.length).toBe(2);
-    expect(query).toEqual([...circles]);
-  });
-
-  it('Query items based on a custom predicate', () => {
-    const view = useScene2D().getView();
-    const nodes = createRefArray<Node>();
-    view.add(
-      <>
-        <Rect ref={nodes} scale={2} />
-        <Rect />
-        <Circle />
-        <Circle ref={nodes} scale={2} />
-      </>,
-    );
-
-    const query = view.findAll(node => node.scale.x() === 2);
-    expect(query.length).toBe(2);
-    expect(query).toEqual([...nodes]);
-  });
-
-  it('Query the first matching child', () => {
-    const view = useScene2D().getView();
-    const match = createRef<Circle>();
-    view.add(
-      <>
-        <Rect />
-        <Rect>
-          <Rect />
-          <Circle ref={match} />
-        </Rect>
-        <Circle />
-        <Rect />
-      </>,
-    );
-
-    const query = view.findFirst(is(Circle));
-    expect(query).toBe(match());
-  });
-
-  it('Query the last matching child', () => {
-    const view = useScene2D().getView();
-    const match = createRef<Circle>();
-    view.add(
-      <>
-        <Rect />
-        <Circle />
-        <Circle>
-          <Circle />
-          <Rect />
-          <Circle ref={match} />
-        </Circle>
-        <Rect />
-      </>,
-    );
-
-    const query = view.findLast(is(Circle));
-    expect(query?.key).toBe(match().key);
-  });
-
-  it('Query the first matching ancestor', () => {
-    const view = useScene2D().getView();
-    const child = createRef<Circle>();
-    const match = createRef<Circle>();
-    view.add(
-      <Circle>
-        <Circle ref={match}>
-          <Rect>
-            <Circle />
-            <Circle ref={child} />
-            <Circle />
-          </Rect>
-        </Circle>
-      </Circle>,
-    );
-
-    const query = child().findAncestor(is(Circle));
-    expect(query).toBe(match());
-  });
-
-  it('Retrieve a node by its key', () => {
-    const view = useScene2D().getView();
-    const match = createRef<Circle>();
-    view.add(
-      <>
-        <Circle>
-          <Rect />
-          <Circle ref={match} key="test-key" />
-        </Circle>
-        <Rect />
-      </>,
-    );
-
-    const query = view.findKey('test-key');
-    expect(query).toBe(match());
-  });
-});
+import {createRef, createRefArray} from '@twick/core';
+import {describe, expect, it} from 'vitest';
+import {useScene2D} from '../../scenes';
+import {is} from '../../utils';
+import {Circle} from '../Circle';
+import {Rect} from '../Rect';
+import {mockScene2D} from './mockScene2D';
+
+describe('query', () => {
+  mockScene2D();
+
+  it('Query items based on their type', () => {
+    const view = useScene2D().getView();
+    const circles = createRefArray<Circle>();
+    view.add(
+      <>
+        <Rect />
+        <Circle ref={circles} />
+        <Rect />
+        <Circle ref={circles} />
+        <Rect />
+      </>,
+    );
+
+    const query = view.findAll(is(Circle));
+    expect(query.length).toBe(2);
+    expect(query).toEqual([...circles]);
+  });
+
+  it('Query items based on a custom predicate', () => {
+    const view = useScene2D().getView();
+    const nodes = createRefArray<Node>();
+    view.add(
+      <>
+        <Rect ref={nodes} scale={2} />
+        <Rect />
+        <Circle />
+        <Circle ref={nodes} scale={2} />
+      </>,
+    );
+
+    const query = view.findAll(node => node.scale.x() === 2);
+    expect(query.length).toBe(2);
+    expect(query).toEqual([...nodes]);
+  });
+
+  it('Query the first matching child', () => {
+    const view = useScene2D().getView();
+    const match = createRef<Circle>();
+    view.add(
+      <>
+        <Rect />
+        <Rect>
+          <Rect />
+          <Circle ref={match} />
+        </Rect>
+        <Circle />
+        <Rect />
+      </>,
+    );
+
+    const query = view.findFirst(is(Circle));
+    expect(query).toBe(match());
+  });
+
+  it('Query the last matching child', () => {
+    const view = useScene2D().getView();
+    const match = createRef<Circle>();
+    view.add(
+      <>
+        <Rect />
+        <Circle />
+        <Circle>
+          <Circle />
+          <Rect />
+          <Circle ref={match} />
+        </Circle>
+        <Rect />
+      </>,
+    );
+
+    const query = view.findLast(is(Circle));
+    expect(query?.key).toBe(match().key);
+  });
+
+  it('Query the first matching ancestor', () => {
+    const view = useScene2D().getView();
+    const child = createRef<Circle>();
+    const match = createRef<Circle>();
+    view.add(
+      <Circle>
+        <Circle ref={match}>
+          <Rect>
+            <Circle />
+            <Circle ref={child} />
+            <Circle />
+          </Rect>
+        </Circle>
+      </Circle>,
+    );
+
+    const query = child().findAncestor(is(Circle));
+    expect(query).toBe(match());
+  });
+
+  it('Retrieve a node by its key', () => {
+    const view = useScene2D().getView();
+    const match = createRef<Circle>();
+    view.add(
+      <>
+        <Circle>
+          <Rect />
+          <Circle ref={match} key="test-key" />
+        </Circle>
+        <Rect />
+      </>,
+    );
+
+    const query = view.findKey('test-key');
+    expect(query).toBe(match());
+  });
+});