cubing 0.21.1 → 0.22.1

package/src/cubing/twisty/old/dom/viewers/TwistyViewerWrapper.ts

@@ -1,45 +0,0 @@
-import { ClassListManager } from "../element/ClassListManager";
-import { ManagedCustomElement } from "../element/ManagedCustomElement";
-import { customElementsShim } from "../element/node-custom-element-shims";
-import { twistyViewerWrapperCSS } from "./TwistyViewerWrapper.css";
-
-export const backViewLayouts = {
-  "none": true, // default
-  "side-by-side": true,
-  "top-right": true,
-};
-export type BackViewLayout = keyof typeof backViewLayouts;
-
-export interface TwistyViewerWrapperConfig {
-  backView?: BackViewLayout;
-}
-
-export class TwistyViewerWrapper extends ManagedCustomElement {
-  #backViewClassListManager: ClassListManager<BackViewLayout> =
-    new ClassListManager(this, "back-view-", [
-      "none",
-      "side-by-side",
-      "top-right",
-    ]);
-
-  constructor(config: TwistyViewerWrapperConfig = {}) {
-    super();
-    this.addCSS(twistyViewerWrapperCSS);
-
-    if (config.backView && config.backView in backViewLayouts) {
-      this.#backViewClassListManager.setValue(config.backView);
-    }
-  }
-
-  // Returns if the value changed
-  /** @deprecated */
-  setBackView(backView: BackViewLayout): boolean {
-    return this.#backViewClassListManager.setValue(backView);
-  }
-
-  clear(): void {
-    this.contentWrapper.innerHTML = "";
-  }
-}
-
-customElementsShim.define("twisty-viewer-wrapper", TwistyViewerWrapper);

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

@@ -1,209 +0,0 @@
-/**
- * @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?
-  });
-});

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

@@ -1,270 +0,0 @@
-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/views/3D/puzzles/TwistyTestBox.ts

@@ -1,22 +0,0 @@
-import type { Twisty3DPuzzle } from "./Twisty3DPuzzle";
-import { BoxGeometry, MeshBasicMaterial, Object3D, Mesh } from "three";
-import type { AlgCursor } from "../../../old/animation/cursor/AlgCursor";
-import type { PuzzlePosition } from "../../../old/animation/cursor/CursorTypes";
-
-export class TwistyTestBox extends Object3D implements Twisty3DPuzzle {
-  constructor(cursor: AlgCursor) {
-    super();
-    const geometry = new BoxGeometry(1, 1, 1);
-    const material = new MeshBasicMaterial({ color: 0x00ff00 });
-    const cube = new Mesh(geometry, material);
-
-    this.add(cube);
-
-    /*...*/
-    cursor.addPositionListener(this);
-  }
-
-  onPositionChange(_position: PuzzlePosition): void {
-    // nothing
-  }
-}