cubing 0.20.2 → 0.21.0-pre12

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

@@ -0,0 +1,270 @@
+import { Spherical, Vector3 } from "three";
+import { DEGREES_PER_RADIAN } from "./TAU";
+import { RenderScheduler } from "../../old/animation/RenderScheduler";
+import type { OrbitCoordinatesV2 } from "../../model/props/viewer/OrbitCoordinatesRequestProp";
+import type { TwistyPlayerModel } from "../../model/TwistyPlayerModel";
+import type { CameraLatitudeLimits } from "../../old/dom/TwistyPlayerConfig";
+
+const INERTIA_DEFAULT: boolean = true;
+const LATITUDE_LIMITS_DEFAULT: CameraLatitudeLimits = "auto";
+
+const INERTIA_DURATION_MS = 500;
+// If the first inertial render is this long after the last move, we assume the
+// user has halted the cursor and we consider inertia to have "timed out". We
+// never begin animating the inertia.
+const INERTIA_TIMEOUT_MS = 50;
+
+const VERTICAL_MOVEMENT_BASE_SCALE = 0.75;
+
+// progress is from 0 to 1.
+function momentumScale(progress: number) {
+  // This is the exponential curve flipped so that
+  // - The slope at progress = 0 is 1 (this corresponds to "x = 1" on the normal
+  //   curve).
+  // - The scale exponentially "decays" until progress = 1.
+  // This means the scale at the end will be about 0.418
+  return (Math.exp(1 - progress) - (1 - progress)) / (1 - Math.E) + 1;
+}
+
+class Inertia {
+  private scheduler = new RenderScheduler(this.render.bind(this));
+  private lastTimestamp: number;
+  constructor(
+    private startTimestamp: number,
+    private momentumX: number,
+    private momentumY: number,
+    private callback: (movementX: number, movementY: number) => void,
+  ) {
+    this.scheduler.requestAnimFrame();
+    this.lastTimestamp = startTimestamp;
+  }
+
+  private render(now: DOMHighResTimeStamp) {
+    const progressBefore =
+      (this.lastTimestamp - this.startTimestamp) / INERTIA_DURATION_MS;
+    const progressAfter = Math.min(
+      1,
+      (now - this.startTimestamp) / INERTIA_DURATION_MS,
+    );
+
+    if (
+      progressBefore === 0 &&
+      progressAfter > INERTIA_TIMEOUT_MS / INERTIA_DURATION_MS
+    ) {
+      // The user has already paused for a while. Don't start any inertia.
+      return;
+    }
+
+    const delta = momentumScale(progressAfter) - momentumScale(progressBefore);
+
+    // TODO: For now, we only carry horizontal momentum. If this should stay, we
+    // can remove the plumbing for the Y dimension.
+    this.callback(this.momentumX * delta * 1000, this.momentumY * delta * 1000);
+
+    if (progressAfter < 1) {
+      this.scheduler.requestAnimFrame();
+    }
+    this.lastTimestamp = now;
+  }
+}
+
+// export interface OrbitCoordinates {
+//   latitude: number;
+//   longitude: number;
+//   distance: number;
+// }
+
+export function positionToOrbitCoordinates(
+  position: Vector3,
+): OrbitCoordinatesV2 {
+  const spherical = new Spherical();
+  spherical.setFromVector3(position);
+  return {
+    latitude: 90 - spherical.phi * DEGREES_PER_RADIAN,
+    longitude: spherical.theta * DEGREES_PER_RADIAN,
+    distance: spherical.radius,
+  };
+}
+
+// TODO: change mouse cursor while moving.
+export class TwistyOrbitControlsV2 {
+  /** @deprecated */
+  experimentalInertia: boolean = INERTIA_DEFAULT;
+  /** @deprecated */
+  experimentalLatitudeLimits: CameraLatitudeLimits = LATITUDE_LIMITS_DEFAULT;
+  private lastTouchClientX: number = 0;
+  private lastTouchClientY: number = 0;
+  private currentTouchID: number | null = null; // TODO: support multiple touches?
+  private onMoveBound = this.onMove.bind(this);
+  private onMouseMoveBound = this.onMouseMove.bind(this);
+  private onMouseEndBound = this.onMouseEnd.bind(this);
+  private onTouchMoveBound = this.onTouchMove.bind(this);
+  private onTouchEndBound = this.onTouchEnd.bind(this);
+  private lastTouchTimestamp: number = 0;
+  private lastTouchMoveMomentumX: number = 0;
+  private lastTouchMoveMomentumY: number = 0;
+  private lastMouseTimestamp: number = 0;
+  private lastMouseMoveMomentumX: number = 0;
+  private lastMouseMoveMomentumY: number = 0;
+  public experimentalHasBeenMoved: boolean = false;
+  constructor(
+    private model: TwistyPlayerModel,
+    private mirror: boolean,
+    private canvas: HTMLCanvasElement,
+  ) {
+    canvas.addEventListener("mousedown", this.onMouseStart.bind(this));
+    canvas.addEventListener("touchstart", this.onTouchStart.bind(this));
+  }
+
+  // f is the fraction of the canvas traversed per ms.
+  temperMovement(f: number): number {
+    // This is scaled to be linear for small values, but to reduce large values
+    // by a significant factor.
+    return (Math.sign(f) * Math.log(Math.abs(f * 10) + 1)) / 6;
+  }
+
+  onMouseStart(e: MouseEvent): void {
+    window.addEventListener("mousemove", this.onMouseMoveBound);
+    window.addEventListener("mouseup", this.onMouseEndBound);
+    this.onStart(e);
+
+    this.lastMouseTimestamp = e.timeStamp;
+  }
+
+  onMouseMove(e: MouseEvent): void {
+    if (e.buttons === 0) {
+      // Certain elements (e.g. disabled buttons) can capture the `mouseup`
+      // event. So if we notice that there are no mouse buttons pressed, we stop
+      // the movement.
+      this.onMouseEnd(e);
+      return;
+    }
+
+    if (e.movementX === 0 && e.movementY === 0) {
+      // Short-circuit
+      return;
+    }
+
+    const minDim = Math.min(this.canvas.offsetWidth, this.canvas.offsetHeight);
+    const movementX = this.temperMovement(e.movementX / minDim);
+    const movementY = this.temperMovement(
+      (e.movementY / minDim) * VERTICAL_MOVEMENT_BASE_SCALE,
+    );
+    this.onMove(movementX, movementY);
+
+    const deltaMs = e.timeStamp - this.lastMouseTimestamp;
+    if (deltaMs > 0) {
+      this.lastMouseMoveMomentumX = movementX / deltaMs;
+      this.lastMouseMoveMomentumY = movementY / deltaMs;
+      this.lastMouseTimestamp = e.timeStamp;
+    }
+  }
+
+  onMouseEnd(e: MouseEvent): void {
+    window.removeEventListener("mousemove", this.onMouseMoveBound);
+    window.removeEventListener("mouseup", this.onMouseEndBound);
+    this.onEnd(e);
+
+    if (this.experimentalInertia) {
+      new Inertia(
+        this.lastMouseTimestamp,
+        this.lastMouseMoveMomentumX,
+        this.lastMouseMoveMomentumY,
+        this.onMoveBound,
+      );
+    }
+  }
+
+  onTouchStart(e: TouchEvent): void {
+    if (this.currentTouchID === null) {
+      if (e.touches[0].clientX === 0 && e.touches[0].clientY === 0) {
+        // Short-circuit
+        return;
+      }
+      this.currentTouchID = e.changedTouches[0].identifier;
+      this.lastTouchClientX = e.touches[0].clientX;
+      this.lastTouchClientY = e.touches[0].clientY;
+      window.addEventListener("touchmove", this.onTouchMoveBound);
+      window.addEventListener("touchend", this.onTouchEndBound);
+      window.addEventListener("touchcancel", this.onTouchEndBound);
+      this.onStart(e);
+
+      this.lastTouchTimestamp = e.timeStamp;
+    }
+  }
+
+  onTouchMove(e: TouchEvent): void {
+    for (let i = 0; i < e.changedTouches.length; i++) {
+      const touch = e.changedTouches[i];
+      if (touch.identifier === this.currentTouchID) {
+        const minDim = Math.min(
+          this.canvas.offsetWidth,
+          this.canvas.offsetHeight,
+        );
+        const movementX = this.temperMovement(
+          (touch.clientX - this.lastTouchClientX) / minDim,
+        );
+        const movementY = this.temperMovement(
+          ((touch.clientY - this.lastTouchClientY) / minDim) *
+            VERTICAL_MOVEMENT_BASE_SCALE,
+        );
+        this.onMove(movementX, movementY);
+        this.lastTouchClientX = touch.clientX;
+        this.lastTouchClientY = touch.clientY;
+
+        const deltaMs = e.timeStamp - this.lastTouchTimestamp;
+        if (deltaMs > 0) {
+          this.lastTouchMoveMomentumX = movementX / deltaMs;
+          this.lastTouchMoveMomentumY = movementY / deltaMs;
+          this.lastTouchTimestamp = e.timeStamp;
+        }
+      }
+    }
+  }
+
+  onTouchEnd(e: TouchEvent): void {
+    for (let i = 0; i < e.changedTouches.length; i++) {
+      const touch = e.changedTouches[i];
+      if (touch.identifier === this.currentTouchID) {
+        this.currentTouchID = null;
+        window.removeEventListener("touchmove", this.onTouchMoveBound);
+        window.removeEventListener("touchend", this.onTouchEndBound);
+        window.removeEventListener("touchcancel", this.onTouchEndBound);
+        this.onEnd(e);
+      }
+    }
+
+    if (this.experimentalInertia) {
+      new Inertia(
+        this.lastTouchTimestamp,
+        this.lastTouchMoveMomentumX,
+        this.lastTouchMoveMomentumY,
+        this.onMoveBound,
+      );
+    }
+  }
+
+  onStart(e: MouseEvent | TouchEvent): void {
+    e.preventDefault();
+  }
+
+  async onMove(movementX: number, movementY: number): Promise<void> {
+    const scale = this.mirror ? -1 : 1;
+    this.model.orbitCoordinatesRequestProp.set(
+      (async () => {
+        const prevCoords = await this.model.orbitCoordinatesProp.get();
+        const newCoords = {
+          latitude:
+            prevCoords.latitude + 2 * movementY * DEGREES_PER_RADIAN * scale,
+          longitude: prevCoords.longitude - 2 * movementX * DEGREES_PER_RADIAN,
+        };
+        // console.log("coords", prevCoords, newCoords);
+        return newCoords;
+      })(),
+    );
+  }
+
+  onEnd(e: MouseEvent | TouchEvent): void {
+    e.preventDefault();
+  }
+}

package/src/cubing/twisty/{3D → views/3D}/puzzles/Cube3D.ts

@@ -16,24 +16,21 @@ import {
   Vector2,
   Vector3,
 } from "three";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import { BlockMove } from "../../../alg";
-import type { KPuzzleDefinition, Transformation } from "../../../kpuzzle";
-import { puzzles } from "../../../puzzles";
+import type { KPuzzleDefinition } from "../../../../kpuzzle";
+import { puzzles } from "../../../../puzzles";
 import type {
   FaceletMeshAppearance,
   PuzzleAppearance,
-} from "../../../puzzles/stickerings/appearance";
-import type { AlgCursor } from "../../animation/cursor/AlgCursor";
-import type { PuzzlePosition } from "../../animation/cursor/CursorTypes";
-import { smootherStep } from "../../animation/easing";
+} from "../../../../puzzles/stickerings/appearance";
+import type { AlgCursor } from "../../../old/animation/cursor/AlgCursor";
+import type { PuzzlePosition } from "../../../old/animation/cursor/CursorTypes";
+import { smootherStep } from "../../../old/animation/easing";
 import {
   ExperimentalStickering,
   experimentalStickerings,
   HintFaceletStyle,
   hintFaceletStyles,
-} from "../../dom/TwistyPlayerConfig";
+} from "../../../old/dom/TwistyPlayerConfig";
 import { TAU } from "../TAU";
 import type { Twisty3DPuzzle } from "./Twisty3DPuzzle";
 
@@ -215,11 +212,13 @@ export function experimentalSetDefaultStickerElevation(
   cubieDimensions.stickerElevation = stickerElevation;
 }
 
-interface Cube3DOptions {
+export interface Cube3DOptions {
   showMainStickers?: boolean;
   hintFacelets?: HintFaceletStyle;
   showFoundation?: boolean; // TODO: better name
   experimentalStickering?: ExperimentalStickering;
+  foundationSprite?: Texture | null;
+  hintSprite?: Texture | null;
 }
 
 const cube3DOptionsDefaults: Cube3DOptions = {
@@ -227,6 +226,8 @@ const cube3DOptionsDefaults: Cube3DOptions = {
   hintFacelets: "floating",
   showFoundation: true,
   experimentalStickering: "full",
+  foundationSprite: null,
+  hintSprite: null,
 };
 
 // TODO: Make internal foundation faces one-sided, facing to the outside of the cube.
@@ -528,19 +529,31 @@ export class Cube3D extends Object3D implements Twisty3DPuzzle {
   private experimentalFoundationMeshes: Mesh[] = [];
 
   private setSpriteURL: (url: string) => void;
-  private sprite: Promise<Texture> = new Promise((resolve) => {
+  private sprite: Texture | Promise<Texture> = new Promise((resolve) => {
     this.setSpriteURL = (url: string): void => {
       svgLoader.load(url, resolve);
     };
   });
 
+  // TODO: Don't overwrite the static function.
+  // TODO: This doesn't work dynamically yet.
+  setSprite(texture: Texture): void {
+    this.sprite = texture;
+  }
+
   private setHintSpriteURL: (url: string) => void;
-  private hintSprite: Promise<Texture> = new Promise((resolve) => {
+  private hintSprite: Texture | Promise<Texture> = new Promise((resolve) => {
     this.setHintSpriteURL = (url: string): void => {
       svgLoader.load(url, resolve);
     };
   });
 
+  // TODO: Don't overwrite the static function.
+  // TODO: This doesn't work dynamically yet.
+  setHintSprite(texture: Texture): void {
+    this.hintSprite = texture;
+  }
+
   constructor(
     private def: KPuzzleDefinition,
     cursor?: AlgCursor,
@@ -557,6 +570,14 @@ export class Cube3D extends Object3D implements Twisty3DPuzzle {
         `Invalid puzzle for this Cube3D implementation: ${this.def.name}`,
       );
     }
+
+    if (options.foundationSprite) {
+      this.setSprite(options.foundationSprite);
+    }
+    if (options.hintSprite) {
+      this.setHintSprite(options.hintSprite);
+    }
+
     this.kpuzzleFaceletInfo = {};
     for (const orbit in pieceDefs) {
       const orbitFaceletInfo: FaceletInfo[][] = [];
@@ -695,7 +716,7 @@ export class Cube3D extends Object3D implements Twisty3DPuzzle {
   }
 
   public onPositionChange(p: PuzzlePosition): void {
-    const reid333 = p.state as Transformation;
+    const reid333 = p.state;
     for (const orbit in pieceDefs) {
       const pieces = pieceDefs[orbit];
       for (let i = 0; i < pieces.length; i++) {
@@ -815,7 +836,7 @@ export class Cube3D extends Object3D implements Twisty3DPuzzle {
                 [v1, v2, v3, v4] = [v4, v1, v2, v3];
                 break;
             }
-            (mesh.geometry as BufferGeometry).setAttribute(
+            mesh.geometry.setAttribute(
               "uv",
               new BufferAttribute(
                 new Float32Array([

package/src/cubing/twisty/{3D → views/3D}/puzzles/KPuzzleWrapper.ts

@@ -1,4 +1,4 @@
-import type { Move } from "../../../alg";
+import type { Move } from "../../../../alg";
 import {
   combineTransformations,
   areStatesEquivalent,
@@ -7,8 +7,8 @@ import {
   KPuzzleDefinition,
   transformationForMove,
   Transformation,
-} from "../../../kpuzzle";
-import { puzzles } from "../../../puzzles";
+} from "../../../../kpuzzle";
+import { puzzles } from "../../../../puzzles";
 
 export type MoveName = string;
 
@@ -17,8 +17,7 @@ export interface MoveProgress {
   fraction: number;
 }
 
-// tslint:disable-next-line no-empty-interfaces
-// eslint-disable-next-line @typescript-eslint/no-empty-interface, @typescript-eslint/no-unused-vars-experimental
+// eslint-disable-next-line @typescript-eslint/no-empty-interface, @typescript-eslint/no-unused-vars
 export interface State<T extends PuzzleWrapper> {}
 
 export abstract class PuzzleWrapper {