cubing 0.21.2 → 0.23.0

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

@@ -1,14 +1,15 @@
-import type { Texture as ThreeTexture } from "three";
+import type { Raycaster, Texture as ThreeTexture } from "three";
 import { experimentalCubeAppearance, PuzzleLoader } from "../../../puzzles";
 import type { ExperimentalStickering } from "../../../twisty";
 import { proxy3D } from "../../heavy-code-imports/3d";
-import type { Cube3D, PG3D } from "../../heavy-code-imports/dynamic-entries/3d";
+import { Cube3D, PG3D } from "../../heavy-code-imports/dynamic-entries/3d";
+import type { FoundationDisplay } from "../../model/props/puzzle/display/FoundationDisplayProp";
 import type { HintFaceletStyleWithAuto } from "../../model/props/puzzle/display/HintFaceletProp";
+import { FreshListenerManager } from "../../model/props/TwistyProp";
 import type { VisualizationStrategy } from "../../model/props/viewer/VisualizationStrategyProp";
 import type { TwistyPlayerModel } from "../../model/TwistyPlayerModel";
-import { FreshListenerManager } from "../../model/props/TwistyProp";
-import type { PuzzlePosition } from "../../old/animation/cursor/CursorTypes";
-import type { Schedulable } from "../../old/animation/RenderScheduler";
+import type { PuzzlePosition } from "../../controllers/AnimationTypes";
+import type { Schedulable } from "../../controllers/RenderScheduler";
 import type { Twisty3DPuzzle } from "./puzzles/Twisty3DPuzzle";
 
 export class Twisty3DPuzzleWrapper implements Schedulable {
@@ -61,6 +62,17 @@ export class Twisty3DPuzzleWrapper implements Schedulable {
         this.scheduleRender();
       },
     );
+    this.#freshListenerManager.addListener(
+      this.model.foundationDisplayProp,
+      async (foundationDisplay: FoundationDisplay) => {
+        (
+          (await this.twisty3DPuzzle()) as Cube3D | PG3D
+        ).experimentalUpdateOptions({
+          showFoundation: foundationDisplay !== "none",
+        });
+        this.scheduleRender();
+      },
+    );
     this.#freshListenerManager.addListener(
       this.model.stickeringProp,
       async (stickering: ExperimentalStickering) => {
@@ -165,4 +177,38 @@ export class Twisty3DPuzzleWrapper implements Schedulable {
       }
     })());
   }
+
+  async raycastMove(
+    raycasterPromise: Promise<Raycaster>,
+    transformations: {
+      invert: boolean;
+      depth?: "secondSlice" | "rotation" | "none";
+    },
+  ): Promise<void> {
+    const puzzle = await this.twisty3DPuzzle();
+    // TODO: check this differently.
+    if (!(puzzle instanceof PG3D)) {
+      console.info("not PG3D! skipping raycast");
+      return;
+    }
+
+    const targets = puzzle.experimentalGetControlTargets(); // TODO: sticker targets
+    const [raycaster] = await Promise.all([raycasterPromise]);
+
+    const intersects = raycaster.intersectObjects(targets);
+    if (intersects.length > 0) {
+      const closestMove = puzzle.getClosestMoveToAxis(
+        intersects[0].point,
+        transformations,
+      );
+      if (closestMove) {
+        this.model.experimentalAddMove(closestMove.move, {
+          coalesce: true,
+          mod: closestMove.order,
+        });
+      } else {
+        console.info("Skipping move!");
+      }
+    }
+  }
 }

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

@@ -1,17 +1,20 @@
-import type { Scene as ThreeScene } from "three";
+import { PerspectiveCamera, Scene as ThreeScene, Vector2 } from "three";
 import type { PuzzleLoader } from "../../../puzzles";
 import { THREEJS } from "../../heavy-code-imports/3d";
-import type { BackViewLayoutWithAuto } from "../../model/props/viewer/BackViewProp";
-import type { VisualizationStrategy } from "../../model/props/viewer/VisualizationStrategyProp";
 import { StaleDropper } from "../../model/PromiseFreshener";
-import type { TwistyPlayerModel } from "../../model/TwistyPlayerModel";
 import { FreshListenerManager } from "../../model/props/TwistyProp";
-import type { Schedulable } from "../../old/animation/RenderScheduler";
-import { ClassListManager } from "../../old/dom/element/ClassListManager";
-import { ManagedCustomElement } from "../../old/dom/element/ManagedCustomElement";
-import { customElementsShim } from "../../old/dom/element/node-custom-element-shims";
-import type { BackViewLayout } from "../../old/dom/viewers/TwistyViewerWrapper";
-import { twistyViewerWrapperCSS } from "../../old/dom/viewers/TwistyViewerWrapper.css";
+import type {
+  BackViewLayout,
+  BackViewLayoutWithAuto,
+} from "../../model/props/viewer/BackViewProp";
+import type { VisualizationStrategy } from "../../model/props/viewer/VisualizationStrategyProp";
+import type { TwistyPlayerModel } from "../../model/TwistyPlayerModel";
+import type { Schedulable } from "../../controllers/RenderScheduler";
+import { ClassListManager } from "../ClassListManager";
+import { ManagedCustomElement } from "../ManagedCustomElement";
+import { customElementsShim } from "../node-custom-element-shims";
+import { twistyViewerWrapperCSS } from "../TwistyViewerWrapper.css";
+import type { PressInfo } from "./DragTracker";
 import { Twisty3DPuzzleWrapper } from "./Twisty3DPuzzleWrapper";
 import { Twisty3DVantage } from "./Twisty3DVantage";
 
@@ -79,6 +82,43 @@ export class Twisty3DSceneWrapper
     this.setBackView(backView);
   }
 
+  async onPress(
+    e: CustomEvent<{
+      pressInfo: PressInfo;
+      cameraPromise: Promise<PerspectiveCamera>;
+    }>,
+  ): Promise<void> {
+    const twisty3DPuzzleWrapper = this.#currentTwisty3DPuzzleWrapper;
+    if (!twisty3DPuzzleWrapper) {
+      console.info("no wrapper; skipping scene wrapper press!");
+      return;
+    }
+
+    const raycasterPromise = (async () => {
+      const [camera, three] = await Promise.all([
+        e.detail.cameraPromise,
+        THREEJS,
+      ]);
+
+      const raycaster = new three.Raycaster();
+      const mouse = new Vector2(
+        e.detail.pressInfo.normalizedX,
+        e.detail.pressInfo.normalizedY,
+      );
+      raycaster.setFromCamera(mouse, camera);
+      return raycaster;
+    })();
+
+    twisty3DPuzzleWrapper.raycastMove(raycasterPromise, {
+      invert: !e.detail.pressInfo.rightClick,
+      depth: e.detail.pressInfo.keys.ctrlOrMetaKey
+        ? "rotation"
+        : e.detail.pressInfo.keys.shiftKey
+        ? "secondSlice"
+        : "none",
+    });
+  }
+
   #cachedScene: Promise<ThreeScene> | null;
   async scene(): Promise<ThreeScene> {
     return (this.#cachedScene ??= (async () => new (await THREEJS).Scene())());
@@ -86,6 +126,7 @@ export class Twisty3DSceneWrapper
 
   #vantages: Set<Twisty3DVantage> = new Set();
   addVantage(vantage: Twisty3DVantage) {
+    vantage.addEventListener("press", this.onPress.bind(this));
     this.#vantages.add(vantage);
     this.contentWrapper.appendChild(vantage);
   }

package/src/cubing/twisty/{old/dom/viewers/Twisty3DCanvas.css.ts → views/3D/Twisty3DVantage.css.ts}

@@ -1,4 +1,4 @@
-import { CSSSource } from "../element/ManagedCustomElement";
+import { CSSSource } from "../ManagedCustomElement";
 
 // The `position` values are a hack for a bug in Safari where the canvas either
 // grows infinitely, or takes up the full `fr` of any encompassing grid (making
@@ -6,7 +6,7 @@ import { CSSSource } from "../element/ManagedCustomElement";
 // content` is a good fix for this, but there is no indication that Safari will
 // support it soon. https://developer.mozilla.org/en-US/docs/Web/CSS/contain
 
-export const twisty3DCanvasCSS = new CSSSource(`
+export const twisty3DVantageCSS = new CSSSource(`
 :host {
   width: 384px;
   height: 256px;

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

@@ -3,26 +3,27 @@ import { Stats } from "../../../vendor/three/examples/jsm/libs/stats.modified.mo
 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 { OrbitCoordinates } 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 { RenderScheduler } from "../../controllers/RenderScheduler";
+import { ManagedCustomElement } from "../ManagedCustomElement";
+import { customElementsShim } from "../node-custom-element-shims";
+import { pixelRatio } from "../canvas";
+import { twisty3DVantageCSS } from "./Twisty3DVantage.css";
+import { DragTracker, PressInfo } from "./DragTracker";
 import { newRenderer, renderPooled } from "./RendererPool";
 import { DEGREES_PER_RADIAN } from "./TAU";
 import type { Twisty3DSceneWrapper } from "./Twisty3DSceneWrapper";
-import { TwistyOrbitControlsV2 } from "./TwistyOrbitControlsV2";
+import { TwistyOrbitControls } from "./TwistyOrbitControls";
 
 let SHOW_STATS = false;
-export function showStats(enable: boolean): void {
+export function debugShowRenderStats(enable: boolean): void {
   SHOW_STATS = enable;
 }
 
 export async function setCameraFromOrbitCoordinates(
   camera: PerspectiveCamera,
-  orbitCoordinates: OrbitCoordinatesV2,
+  orbitCoordinates: OrbitCoordinates,
   backView: boolean = false,
 ): Promise<void> {
   const spherical = new (await THREEJS).Spherical(
@@ -89,18 +90,54 @@ export class Twisty3DVantage extends ManagedCustomElement {
   }
 
   async connectedCallback(): Promise<void> {
-    this.addCSS(twisty3DCanvasCSS);
-    this.addElement(await this.canvas());
+    this.addCSS(twisty3DVantageCSS);
+    this.addElement((await this.canvasInfo()).canvas);
 
     this.#onResize();
     const observer = new ResizeObserver(this.#onResize.bind(this));
     observer.observe(this.contentWrapper);
     this.orbitControls(); // TODO
+    this.#setupBasicPresses();
+
     this.scheduleRender();
   }
 
+  async #setupBasicPresses(): Promise<void> {
+    const dragTracker = await this.#dragTracker();
+    dragTracker.addEventListener("press", async (e: CustomEvent<PressInfo>) => {
+      const movePressInput = await this.model!.movePressInputProp.get();
+      if (movePressInput !== "basic") {
+        return;
+      }
+      this.dispatchEvent(
+        new CustomEvent("press", {
+          detail: {
+            pressInfo: e.detail,
+            cameraPromise: this.camera(),
+          },
+        }),
+      );
+    });
+  }
+
   #onResizeStaleDropper = new StaleDropper<PerspectiveCamera>();
 
+  async clearCanvas(): Promise<void> {
+    if (this.rendererIsShared) {
+      const canvasInfo = await this.canvasInfo();
+      canvasInfo.context.clearRect(
+        0,
+        0,
+        canvasInfo.canvas.width,
+        canvasInfo.canvas.height,
+      );
+    } else {
+      const renderer = await this.renderer();
+      const context = renderer.getContext();
+      context.clear(context.COLOR_BUFFER_BIT);
+    }
+  }
+
   // TODO: Why doesn't this work for the top-right back view height?
   #width: number = 0;
   #height: number = 0;
@@ -122,14 +159,17 @@ export class Twisty3DVantage extends ManagedCustomElement {
     camera.setViewOffset(w, h - excess, off, yoff, w, h);
     camera.updateProjectionMatrix(); // TODO
 
+    this.clearCanvas();
     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();
+      const canvasInfo = await this.canvasInfo();
+
+      canvasInfo.canvas.width = w * pixelRatio();
+      canvasInfo.canvas.height = h * pixelRatio();
+      canvasInfo.canvas.style.width = w.toString();
+      canvasInfo.canvas.style.height = w.toString();
     } else {
-      (await this.renderer()).setSize(w, h, true);
+      const renderer = await this.renderer();
+      renderer.setSize(w, h, true);
     }
 
     this.scheduleRender();
@@ -143,14 +183,31 @@ export class Twisty3DVantage extends ManagedCustomElement {
     return (this.#cachedRenderer ??= newRenderer());
   }
 
-  #cachedCanvas: Promise<HTMLCanvasElement> | null = null;
-  async canvas(): Promise<HTMLCanvasElement> {
+  #cachedCanvas: Promise<{
+    canvas: HTMLCanvasElement;
+    context: CanvasRenderingContext2D;
+  }> | null = null;
+  async canvasInfo(): Promise<{
+    canvas: HTMLCanvasElement;
+    context: CanvasRenderingContext2D;
+  }> {
     return (this.#cachedCanvas ??= (async () => {
+      let canvas: HTMLCanvasElement;
       if (this.rendererIsShared) {
-        return this.addElement(document.createElement("canvas"));
+        canvas = this.addElement(document.createElement("canvas"));
+      } else {
+        const renderer = await this.renderer();
+        canvas = this.addElement(renderer.domElement);
       }
-      const renderer = await this.renderer();
-      return this.addElement(renderer.domElement);
+      const context = canvas.getContext("2d")!;
+      return { canvas, context };
+    })());
+  }
+
+  #cachedDragTracker: Promise<DragTracker> | null = null;
+  async #dragTracker(): Promise<DragTracker> {
+    return (this.#cachedDragTracker ??= (async () => {
+      return new DragTracker((await this.canvasInfo()).canvas);
     })());
   }
 
@@ -174,19 +231,20 @@ export class Twisty3DVantage extends ManagedCustomElement {
     })());
   }
 
-  #cachedOrbitControls: Promise<TwistyOrbitControlsV2> | null = null;
-  async orbitControls(): Promise<TwistyOrbitControlsV2> {
+  #cachedOrbitControls: Promise<TwistyOrbitControls> | null = null;
+  async orbitControls(): Promise<TwistyOrbitControls> {
     return (this.#cachedOrbitControls ??= (async () => {
-      const orbitControls = new TwistyOrbitControlsV2(
+      const orbitControls = new TwistyOrbitControls(
         this.model!,
         !!this.options?.backView,
-        await this.canvas(),
+        (await this.canvasInfo()).canvas,
+        await this.#dragTracker(),
       );
 
       if (this.model) {
         this.addListener(
           this.model.orbitCoordinatesProp,
-          async (orbitCoordinates: OrbitCoordinatesV2) => {
+          async (orbitCoordinates: OrbitCoordinates) => {
             const camera = await this.camera();
             setCameraFromOrbitCoordinates(
               camera,
@@ -233,10 +291,10 @@ export class Twisty3DVantage extends ManagedCustomElement {
     const [scene, camera, canvas] = await Promise.all([
       this.scene.scene(),
       this.camera(),
-      this.canvas(),
+      this.canvasInfo(),
     ]);
     if (this.rendererIsShared) {
-      renderPooled(this.#width, this.#height, canvas, scene, camera);
+      renderPooled(this.#width, this.#height, canvas.canvas, scene, camera);
     } else {
       (await this.renderer()).render(scene, camera);
     }
@@ -251,4 +309,4 @@ export class Twisty3DVantage extends ManagedCustomElement {
   }
 }
 
-customElementsShim.define("twisty-3d-vantage-v2", Twisty3DVantage);
+customElementsShim.define("twisty-3d-vantage", Twisty3DVantage);

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

@@ -0,0 +1,213 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import {
+  PuzzleID,
+  PuzzleIDRequestProp,
+} from "../../model/props/puzzle/structure/PuzzleIDRequestProp";
+import type { TwistyPropParent } from "../../model/props/TwistyProp";
+import { LatitudeLimitProp } from "../../model/props/viewer/LatitudeLimit";
+import { OrbitCoordinatesProp } from "../../model/props/viewer/OrbitCoordinatesProp";
+import { OrbitCoordinatesRequestProp } from "../../model/props/viewer/OrbitCoordinatesRequestProp";
+import { VisualizationFormatProp } from "../../model/props/viewer/VisualizationProp";
+import { VisualizationStrategyProp } from "../../model/props/viewer/VisualizationStrategyProp";
+
+describe("TwistyOrbitControls", () => {
+  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,
+    });
+    // TODO
+
+    //   // 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 mockDragTracker = {} as DragTracker;
+
+    //   const orbitControls = new TwistyOrbitControls(
+    //     mockModel as TwistyPlayerModel,
+    //     false,
+    //     mockCanvas,
+    //     mockDragTracker,
+    //   );
+    //   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?
+  });
+});