cubing 0.20.2 → 0.21.0-pre12

package/src/cubing/twisty/views/3D/Twisty3DVantage.ts

@@ -0,0 +1,244 @@
+import type { PerspectiveCamera, WebGLRenderer } from "three";
+import { Stats } from "../../../vendor/three/examples/jsm/libs/stats.modified.module";
+import { THREEJS } from "../../heavy-code-imports/3d";
+import { StaleDropper } from "../../model/PromiseFreshener";
+import type { TwistyPropParent } from "../../model/props/TwistyProp";
+import type { OrbitCoordinatesV2 } from "../../model/props/viewer/OrbitCoordinatesRequestProp";
+import type { TwistyPlayerModel } from "../../model/TwistyPlayerModel";
+import { RenderScheduler } from "../../old/animation/RenderScheduler";
+import { ManagedCustomElement } from "../../old/dom/element/ManagedCustomElement";
+import { customElementsShim } from "../../old/dom/element/node-custom-element-shims";
+import { pixelRatio } from "../../old/dom/viewers/canvas";
+import { twisty3DCanvasCSS } from "../../old/dom/viewers/Twisty3DCanvas.css";
+import { newRenderer, renderPooled } from "./RendererPool";
+import { DEGREES_PER_RADIAN } from "./TAU";
+import type { Twisty3DSceneWrapper } from "./Twisty3DSceneWrapper";
+import { TwistyOrbitControlsV2 } from "./TwistyOrbitControlsV2";
+
+let SHOW_STATS = false;
+export function showStats(enable: boolean): void {
+  SHOW_STATS = enable;
+}
+
+export async function setCameraFromOrbitCoordinates(
+  camera: PerspectiveCamera,
+  orbitCoordinates: OrbitCoordinatesV2,
+  backView: boolean = false,
+): Promise<void> {
+  const spherical = new (await THREEJS).Spherical(
+    orbitCoordinates.distance,
+    (90 - (backView ? -1 : 1) * orbitCoordinates.latitude) / DEGREES_PER_RADIAN,
+    ((backView ? 180 : 0) + orbitCoordinates.longitude) / DEGREES_PER_RADIAN,
+  );
+  spherical.makeSafe();
+  camera.position.setFromSpherical(spherical);
+  camera.lookAt(0, 0, 0);
+}
+
+let shareAllNewRenderers: boolean | null = null;
+
+// WARNING: The current shared renderer implementation is not every efficient.
+// Avoid using for players that are likely to have dimensions approaching 1 megapixel or higher.
+// TODO: use a dedicated renderer while fullscreen?
+export function experimentalSetShareAllNewRenderers(share: boolean): void {
+  shareAllNewRenderers = share;
+}
+
+let anyRenderersSofar = false;
+function shareRenderer(): boolean {
+  if (shareAllNewRenderers !== null) {
+    return shareAllNewRenderers;
+  }
+  if (!anyRenderersSofar) {
+    anyRenderersSofar = true;
+    return false;
+  }
+  return true;
+}
+
+export class Twisty3DVantage extends ManagedCustomElement {
+  scene: Twisty3DSceneWrapper | null = null;
+
+  stats: Stats | null = null;
+
+  private rendererIsShared: boolean = shareRenderer();
+
+  constructor(
+    private model?: TwistyPlayerModel,
+    scene?: Twisty3DSceneWrapper,
+    private options?: { backView?: boolean },
+  ) {
+    super();
+    this.scene = scene ?? null;
+
+    if (SHOW_STATS) {
+      this.stats = new Stats();
+      this.stats.dom.style.position = "absolute";
+      this.contentWrapper.appendChild(this.stats.dom);
+    }
+  }
+
+  async connectedCallback(): Promise<void> {
+    this.addCSS(twisty3DCanvasCSS);
+    this.addElement(await this.canvas());
+
+    this.#onResize();
+    const observer = new ResizeObserver(this.#onResize.bind(this));
+    observer.observe(this.contentWrapper);
+    this.orbitControls(); // TODO
+    this.scheduleRender();
+  }
+
+  #onResizeStaleDropper = new StaleDropper<PerspectiveCamera>();
+
+  // TODO: Why doesn't this work for the top-right back view height?
+  #width: number = 0;
+  #height: number = 0;
+  async #onResize(): Promise<void> {
+    const camera = await this.#onResizeStaleDropper.queue(this.camera());
+
+    const w = this.contentWrapper.clientWidth;
+    const h = this.contentWrapper.clientHeight;
+    this.#width = w;
+    this.#height = h;
+    const off = 0;
+    let yoff = 0;
+    let excess = 0;
+    if (h > w) {
+      excess = h - w;
+      yoff = -Math.floor(0.5 * excess);
+    }
+    camera.aspect = w / h;
+    camera.setViewOffset(w, h - excess, off, yoff, w, h);
+    camera.updateProjectionMatrix(); // TODO
+
+    if (this.rendererIsShared) {
+      const canvas = await this.canvas();
+      canvas.width = w * pixelRatio();
+      canvas.height = h * pixelRatio();
+      canvas.style.width = w.toString();
+      canvas.style.height = w.toString();
+    } else {
+      (await this.renderer()).setSize(w, h, true);
+    }
+
+    this.scheduleRender();
+  }
+
+  #cachedRenderer: Promise<WebGLRenderer> | null = null;
+  async renderer(): Promise<WebGLRenderer> {
+    if (this.rendererIsShared) {
+      throw new Error("renderer expected to be shared.");
+    }
+    return (this.#cachedRenderer ??= newRenderer());
+  }
+
+  #cachedCanvas: Promise<HTMLCanvasElement> | null = null;
+  async canvas(): Promise<HTMLCanvasElement> {
+    return (this.#cachedCanvas ??= (async () => {
+      if (this.rendererIsShared) {
+        return this.addElement(document.createElement("canvas"));
+      }
+      const renderer = await this.renderer();
+      return this.addElement(renderer.domElement);
+    })());
+  }
+
+  #cachedCamera: Promise<PerspectiveCamera> | null = null;
+  async camera(): Promise<PerspectiveCamera> {
+    return (this.#cachedCamera ??= (async () => {
+      const camera = new (await THREEJS).PerspectiveCamera(
+        20,
+        1, // We rely on the resize logic to handle this.
+        0.1,
+        20,
+      );
+      camera.position.copy(
+        new (await THREEJS).Vector3(2, 4, 4).multiplyScalar(
+          this.options?.backView ? -1 : 1,
+        ),
+      );
+      camera.lookAt(0, 0, 0);
+      // TODO: `TwistyOrbitControls` breaks isolateion
+      return camera;
+    })());
+  }
+
+  #cachedOrbitControls: Promise<TwistyOrbitControlsV2> | null = null;
+  async orbitControls(): Promise<TwistyOrbitControlsV2> {
+    return (this.#cachedOrbitControls ??= (async () => {
+      const orbitControls = new TwistyOrbitControlsV2(
+        this.model!,
+        !!this.options?.backView,
+        await this.canvas(),
+      );
+
+      if (this.model) {
+        this.addListener(
+          this.model.orbitCoordinatesProp,
+          async (orbitCoordinates: OrbitCoordinatesV2) => {
+            const camera = await this.camera();
+            setCameraFromOrbitCoordinates(
+              camera,
+              orbitCoordinates,
+              this.options?.backView,
+            );
+            // TODO: Wrap in StaleDropper?
+
+            this.scheduleRender();
+          },
+        );
+      }
+
+      return orbitControls;
+    })());
+  }
+
+  addListener<T>(
+    prop: TwistyPropParent<T>,
+    listener: (value: T) => void,
+  ): void {
+    prop.addFreshListener(listener);
+    this.#disconnectionFunctions.push(() => {
+      prop.removeFreshListener(listener);
+      // disconnected = true; // TODO
+    });
+  }
+
+  #disconnectionFunctions: (() => void)[] = [];
+  disconnect(): void {
+    for (const fn of this.#disconnectionFunctions) {
+      fn();
+    }
+    this.#disconnectionFunctions = []; // TODO: Encapsulate this.
+  }
+
+  async render(): Promise<void> {
+    if (!this.scene) {
+      throw new Error("Attempted to render without a scene");
+    }
+
+    this.stats?.begin();
+
+    const [scene, camera, canvas] = await Promise.all([
+      this.scene.scene(),
+      this.camera(),
+      this.canvas(),
+    ]);
+    if (this.rendererIsShared) {
+      renderPooled(this.#width, this.#height, canvas, scene, camera);
+    } else {
+      (await this.renderer()).render(scene, camera);
+    }
+
+    this.stats?.end();
+  }
+
+  #scheduler = new RenderScheduler(this.render.bind(this));
+  scheduleRender(): void {
+    // console.log("scheduling", this);
+    this.#scheduler.requestAnimFrame();
+  }
+}
+
+customElementsShim.define("twisty-3d-vantage-v2", Twisty3DVantage);

package/src/cubing/twisty/views/3D/TwistyOrbitControlsV2.spec.ts

@@ -0,0 +1,209 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { LatitudeLimitProp } from "../../model/props/viewer/LatitudeLimit";
+import { OrbitCoordinatesRequestProp } from "../../model/props/viewer/OrbitCoordinatesRequestProp";
+import { PuzzleIDRequestProp } from "../../model/props/puzzle/structure/PuzzleIDRequestProp";
+import { VisualizationFormatProp } from "../../model/props/viewer/VisualizationProp";
+import { VisualizationStrategyProp } from "../../model/props/viewer/VisualizationStrategyProp";
+import { OrbitCoordinatesProp } from "../../model/props/viewer/OrbitCoordinatesProp";
+import type { TwistyPlayerModel } from "../../model/TwistyPlayerModel";
+import type { TwistyPropParent } from "../../model/props/TwistyProp";
+import type { PuzzleID } from "../../old/dom/TwistyPlayerConfig";
+import { TwistyOrbitControlsV2 } from "./TwistyOrbitControlsV2";
+
+describe("TwistyOrbitControlsV2", () => {
+  it("should update correctly", async () => {
+    const orbitCoordinatesRequestProp = new OrbitCoordinatesRequestProp();
+    const latLimit = new LatitudeLimitProp();
+    const puzzleIDRequestProp = new PuzzleIDRequestProp(
+      "3x3x3",
+    ) as TwistyPropParent<PuzzleID>;
+    const visualizationRequestProp = new VisualizationFormatProp();
+    const visualizationStrategyProp = new VisualizationStrategyProp({
+      puzzleID: puzzleIDRequestProp,
+      visualizationRequest: visualizationRequestProp,
+    });
+    const orbitCoordinatesProp = new OrbitCoordinatesProp({
+      orbitCoordinatesRequest: orbitCoordinatesRequestProp,
+      latitudeLimit: latLimit,
+      puzzleID: puzzleIDRequestProp,
+      strategy: visualizationStrategyProp,
+    });
+    const mockModel = {
+      orbitCoordinatesRequestProp,
+      orbitCoordinatesProp: orbitCoordinatesProp,
+    };
+
+    // Uncomment to watch changes.
+    // mockModel.orbitCoordinatesProp.addFreshListener(console.log);
+
+    expect(await orbitCoordinatesProp.get()).toEqual({
+      latitude: 35,
+      longitude: 30,
+      distance: 6,
+    });
+
+    expect(await orbitCoordinatesProp.get()).toEqual({
+      latitude: 35,
+      longitude: 30,
+      distance: 6,
+    });
+
+    // Values are:true if currently set, false if previously set, undefined otherwise.
+    const canvasEventListenersRegistered: Record<string, boolean> = {};
+    const windowEventListenersRegistered: Record<string, boolean> = {};
+    window.addEventListener = (event: string): void => {
+      windowEventListenersRegistered[event] = true;
+    };
+    window.removeEventListener = (event: string): void => {
+      windowEventListenersRegistered[event] = false;
+    };
+
+    const mockCanvas = {
+      offsetWidth: 100,
+      offsetHeight: 100,
+      addEventListener: (event: string) => {
+        canvasEventListenersRegistered[event] = true;
+      },
+      removeEventListener: (event: string) => {
+        canvasEventListenersRegistered[event] = false;
+      },
+    } as any as HTMLCanvasElement;
+
+    const orbitControls = new TwistyOrbitControlsV2(
+      mockModel as TwistyPlayerModel,
+      false,
+      mockCanvas,
+    );
+    expect(canvasEventListenersRegistered).toEqual({
+      mousedown: true,
+      touchstart: true,
+    });
+    expect(windowEventListenersRegistered).toEqual({});
+
+    expect(await orbitCoordinatesProp.get()).toEqual({
+      latitude: 35,
+      longitude: 30,
+      distance: 6,
+    });
+
+    let preventedDefault = false;
+    orbitControls.onMouseStart({
+      timeStamp: 200,
+      preventDefault: () => {
+        preventedDefault = true;
+      },
+    } as MouseEvent);
+    expect(preventedDefault).toBe(true);
+    expect(canvasEventListenersRegistered).toEqual({
+      mousedown: true,
+      touchstart: true,
+    });
+    expect(windowEventListenersRegistered).toEqual({
+      mousemove: true,
+      mouseup: true,
+    });
+
+    expect(await orbitCoordinatesProp.get()).toEqual({
+      latitude: 35,
+      longitude: 30,
+      distance: 6,
+    });
+
+    orbitControls.onMouseMove({
+      timeStamp: 210,
+      movementX: 10,
+      movementY: 10,
+    } as MouseEvent);
+
+    expect(await orbitCoordinatesProp.get()).toEqual({
+      latitude: 35,
+      longitude: 16.76186399084088,
+      distance: 6,
+    });
+
+    orbitControls.onMouseMove({
+      timeStamp: 220,
+      movementX: 1,
+      movementY: -10,
+    } as MouseEvent);
+
+    expect(await orbitCoordinatesProp.get()).toEqual({
+      latitude: 24.312125734137396,
+      longitude: 14.941573641700643,
+      distance: 6,
+    });
+
+    orbitControls.onMouseMove({
+      timeStamp: 240,
+      movementX: 0,
+      movementY: 0,
+    } as MouseEvent);
+
+    expect(await orbitCoordinatesProp.get()).toEqual({
+      latitude: 24.312125734137396,
+      longitude: 14.941573641700643,
+      distance: 6,
+    });
+
+    orbitControls.onMouseMove({
+      timeStamp: 250,
+      movementX: 2,
+      movementY: 1,
+    } as MouseEvent);
+
+    expect(await orbitCoordinatesProp.get()).toEqual({
+      latitude: 25.69334862750623,
+      longitude: 11.459488402184547,
+      distance: 6,
+    });
+
+    orbitControls.onMouseMove({
+      timeStamp: 250,
+      movementX: 10,
+      movementY: 1,
+    } as MouseEvent);
+    // Protect against a regression.
+    // https://www.speedsolving.com/threads/introducing-twizzle-alpha.85019/page-3#post-1454696
+    expect((orbitControls as any).lastMouseMoveMomentumX).not.toBe(Infinity);
+
+    expect(await orbitCoordinatesProp.get()).toEqual({
+      latitude: 27.07457152087506,
+      longitude: -1.7786476069745731,
+      distance: 6,
+    });
+
+    orbitControls.onMouseMove({
+      timeStamp: 1000,
+      movementX: -3,
+      movementY: 2,
+    } as MouseEvent);
+    expect(await orbitCoordinatesProp.get()).toEqual({
+      latitude: 29.743827999090797,
+      longitude: 3.232140742705951,
+      distance: 6,
+    });
+
+    orbitControls.onMouseEnd({
+      timeStamp: 1000, // Note: unused by the current implementation, but we provide it for consistency.
+      preventDefault: () => {},
+    } as MouseEvent);
+    expect(await orbitCoordinatesProp.get()).toEqual({
+      latitude: 29.743827999090797,
+      longitude: 3.232140742705951,
+      distance: 6,
+    });
+    expect(canvasEventListenersRegistered).toEqual({
+      mousedown: true,
+      touchstart: true,
+    });
+    expect(windowEventListenersRegistered).toEqual({
+      mousemove: false,
+      mouseup: false,
+    });
+
+    // TODO: test inertia separately?
+  });
+});