cubing 0.21.2 → 0.23.0

package/src/cubing/twisty/model/props/puzzle/state/SetupAnchorProp.ts

@@ -1,6 +1,12 @@
-import type { SetupToLocation } from "../../../../old/dom/TwistyPlayerConfig";
 import { SimpleTwistyPropSource } from "../../TwistyProp";
 
+// TODO: turn these maps into lists?
+export const setupToLocations = {
+  start: true, // default // TODO: "beginning"
+  end: true,
+};
+export type SetupToLocation = keyof typeof setupToLocations;
+
 export class SetupAnchorProp extends SimpleTwistyPropSource<SetupToLocation> {
   getDefaultValue(): SetupToLocation {
     return "start";

package/src/cubing/twisty/model/props/puzzle/structure/PuzzleIDProp.ts

@@ -1,6 +1,6 @@
 import type { PuzzleLoader } from "../../../../../puzzles";
-import type { PuzzleID } from "../../../../old/dom/TwistyPlayerConfig";
 import { TwistyPropDerived } from "../../TwistyProp";
+import type { PuzzleID } from "./PuzzleIDRequestProp";
 
 export class PuzzleIDProp extends TwistyPropDerived<
   { puzzleLoader: PuzzleLoader },

package/src/cubing/twisty/model/props/puzzle/structure/PuzzleIDRequestProp.ts

@@ -1,10 +1,29 @@
-import type { PuzzleID } from "../../../../old/dom/TwistyPlayerConfig";
 import {
   NoValueType,
   NO_VALUE,
   SimpleTwistyPropSource,
 } from "../../TwistyProp";
 
+export const puzzleIDs = {
+  "3x3x3": true, // default
+  "custom": true,
+  "2x2x2": true,
+  "4x4x4": true,
+  "5x5x5": true,
+  "6x6x6": true,
+  "7x7x7": true,
+  "40x40x40": true,
+  "megaminx": true,
+  "pyraminx": true,
+  "square1": true,
+  "clock": true,
+  "skewb": true,
+  "fto": true,
+  "gigaminx": true,
+  "master_tetraminx": true,
+};
+export type PuzzleID = keyof typeof puzzleIDs;
+
 // TODO: Ideally we'd use `null` to mean "no value", but `null` has a special meaning
 // for `TwistyProp` and might mess with caching.
 // https://github.com/cubing/cubing.js/blob/63b0a55b83963f68410bb117a2e481052a07e086/src/cubing/twisty/model/TwistyProp.ts#L189-L189

package/src/cubing/twisty/model/props/puzzle/structure/PuzzleLoaderProp.ts

@@ -5,8 +5,8 @@ import {
   PuzzleLoader,
   puzzles,
 } from "../../../../../puzzles";
-import type { PuzzleID } from "../../../../old/dom/TwistyPlayerConfig";
 import { NoValueType, NO_VALUE, TwistyPropDerived } from "../../TwistyProp";
+import type { PuzzleID } from "./PuzzleIDRequestProp";
 8;
 interface PuzzleLoaderPropInputs {
   puzzleIDRequest: PuzzleID | NoValueType;

package/src/cubing/twisty/model/props/timeline/DetailedTimelineInfoProp.ts

@@ -1,8 +1,10 @@
-import type { TimeRange } from "../../../old/animation/cursor/AlgCursor";
-import type { MillisecondTimestamp } from "../../../old/animation/cursor/CursorTypes";
-import type { SetupToLocation } from "../../../old/dom/TwistyPlayerConfig";
+import type {
+  MillisecondTimestamp,
+  TimeRange,
+} from "../../../controllers/AnimationTypes";
 import type { TimestampRequest } from "./TimestampRequestProp";
 import { TwistyPropDerived } from "../TwistyProp";
+import type { SetupToLocation } from "../puzzle/state/SetupAnchorProp";
 
 interface DetailedTimelineInfoInputs {
   timestampRequest: TimestampRequest;

package/src/cubing/twisty/model/props/timeline/PlayingInfoProp.ts

@@ -1,7 +1,4 @@
-import {
-  BoundaryType,
-  Direction,
-} from "../../../old/animation/cursor/CursorTypes";
+import { BoundaryType, Direction } from "../../../controllers/AnimationTypes";
 import { TwistyPropSource } from "../TwistyProp";
 
 export type SimpleDirection = Direction.Forwards | Direction.Backwards;

package/src/cubing/twisty/model/props/timeline/TimestampRequestProp.ts

@@ -1,4 +1,4 @@
-import type { MillisecondTimestamp } from "../../../old/animation/cursor/CursorTypes";
+import type { MillisecondTimestamp } from "../../../controllers/AnimationTypes";
 import { SimpleTwistyPropSource } from "../TwistyProp";
 
 const smartTimestamps = {

package/src/cubing/twisty/model/props/viewer/BackViewProp.ts

@@ -1,6 +1,12 @@
-import type { BackViewLayout } from "../../../old/dom/viewers/TwistyViewerWrapper";
 import { SimpleTwistyPropSource } from "../TwistyProp";
 
+export const backViewLayouts = {
+  "none": true, // default
+  "side-by-side": true,
+  "top-right": true,
+};
+export type BackViewLayout = keyof typeof backViewLayouts;
+
 export type BackViewLayoutWithAuto = BackViewLayout | "auto";
 
 export class BackViewProp extends SimpleTwistyPropSource<BackViewLayoutWithAuto> {

package/src/cubing/twisty/model/props/viewer/BackgroundProp.ts

@@ -1,6 +1,11 @@
-import type { BackgroundTheme } from "../../../old/dom/TwistyPlayerConfig";
 import { SimpleTwistyPropSource } from "../TwistyProp";
 
+export const backgroundThemes = {
+  checkered: true, // default
+  none: true,
+};
+export type BackgroundTheme = keyof typeof backgroundThemes;
+
 export type BackgroundThemeWithAuto = BackgroundTheme | "auto";
 
 export class BackgroundProp extends SimpleTwistyPropSource<BackgroundThemeWithAuto> {

package/src/cubing/twisty/model/props/viewer/ControlPanelProp.ts

@@ -1,6 +1,10 @@
-import type { ControlsLocation } from "../../../old/dom/TwistyPlayerConfig";
 import { SimpleTwistyPropSource } from "../TwistyProp";
 
+export const controlsLocations = {
+  "bottom-row": true, // default
+  "none": true,
+};
+export type ControlsLocation = keyof typeof controlsLocations;
 export type ControlPanelThemeWithAuto = ControlsLocation | "auto";
 
 export class ControlPanelProp extends SimpleTwistyPropSource<ControlPanelThemeWithAuto> {

package/src/cubing/twisty/model/props/viewer/OrbitCoordinatesProp.ts

@@ -1,14 +1,12 @@
-import {
-  defaultCameraOrbitCoordinates,
-  PuzzleID,
-} from "../../../old/dom/TwistyPlayerConfig";
+import { DEGREES_PER_RADIAN } from "../../../views/3D/TAU";
+import type { PuzzleID } from "../puzzle/structure/PuzzleIDRequestProp";
+import { TwistyPropDerived } from "../TwistyProp";
 import {
   CoordinateDegrees,
+  OrbitCoordinates,
   orbitCoordinatesEqual,
   OrbitCoordinatesRequest,
-  OrbitCoordinatesV2,
 } from "./OrbitCoordinatesRequestProp";
-import { TwistyPropDerived } from "../TwistyProp";
 import type { VisualizationStrategy } from "./VisualizationStrategyProp";
 
 interface OrbitCoordinatesPropInputs {
@@ -20,20 +18,18 @@ interface OrbitCoordinatesPropInputs {
 
 export class OrbitCoordinatesProp extends TwistyPropDerived<
   OrbitCoordinatesPropInputs,
-  OrbitCoordinatesV2
+  OrbitCoordinates
 > {
-  canReuseValue(v1: OrbitCoordinatesV2, v2: OrbitCoordinatesV2) {
+  canReuseValue(v1: OrbitCoordinates, v2: OrbitCoordinates) {
     return orbitCoordinatesEqual(v1, v2);
   }
 
-  async derive(
-    inputs: OrbitCoordinatesPropInputs,
-  ): Promise<OrbitCoordinatesV2> {
+  async derive(inputs: OrbitCoordinatesPropInputs): Promise<OrbitCoordinates> {
     if (inputs.orbitCoordinatesRequest === "auto") {
       return defaultCameraOrbitCoordinates(inputs.puzzleID, inputs.strategy);
     }
 
-    const req: OrbitCoordinatesV2 = Object.assign(
+    const req: OrbitCoordinates = Object.assign(
       Object.assign(
         {},
         defaultCameraOrbitCoordinates(inputs.puzzleID, inputs.strategy),
@@ -54,3 +50,78 @@ export class OrbitCoordinatesProp extends TwistyPropDerived<
     }
   }
 }
+
+// const DEFAULT_CAMERA_Z = 5;
+// // Golden ratio is perfect for FTO and Megaminx.
+// const DEFAULT_CAMERA_Y = DEFAULT_CAMERA_Z * (2 / (1 + Math.sqrt(5)));
+export const centeredCameraOrbitCoordinates: OrbitCoordinates = {
+  latitude: 31.717474411461005,
+  longitude: 0,
+  distance: 5.877852522924731,
+};
+
+// This is tuned so that the hint facelets for 3x3x3 always fit in the canvas.
+export const cubeCube3DCameraOrbitCoordinates: OrbitCoordinates = {
+  latitude: 35,
+  longitude: 30,
+  distance: 6,
+};
+
+// This is tuned so that the hint facelets always fit in the canvas.
+export const cubePG3DCameraOrbitCoordinates: OrbitCoordinates = {
+  latitude: 35,
+  longitude: 30,
+  distance: 6.25,
+};
+
+export const megaminxCameraOrbitCoordinates: OrbitCoordinates = {
+  latitude: Math.atan(1 / 2) * DEGREES_PER_RADIAN,
+  longitude: 0,
+  distance: 6.7,
+};
+
+export const pyraminxCameraOrbitCoordinates: OrbitCoordinates = {
+  latitude: 26.56505117707799,
+  longitude: 0,
+  distance: 6,
+};
+
+export const cornerCameraOrbitCoordinates: OrbitCoordinates = {
+  latitude: 35.264389682754654,
+  longitude: 45,
+  distance: 6.928203230275509,
+};
+
+// TODO
+export function defaultCameraOrbitCoordinates(
+  puzzleID: PuzzleID,
+  strategy: VisualizationStrategy,
+): OrbitCoordinates {
+  if (puzzleID[1] === "x") {
+    if (strategy === "Cube3D") {
+      return cubeCube3DCameraOrbitCoordinates;
+    } else {
+      return cubePG3DCameraOrbitCoordinates;
+    }
+  } else {
+    switch (puzzleID) {
+      case "megaminx":
+      case "gigaminx":
+        return megaminxCameraOrbitCoordinates;
+      case "pyraminx":
+      case "master_tetraminx":
+        return pyraminxCameraOrbitCoordinates;
+      case "skewb":
+        return cubePG3DCameraOrbitCoordinates;
+      default:
+        return centeredCameraOrbitCoordinates;
+    }
+  }
+}
+// TODO: templatize
+export interface ManagedAttribute<K> {
+  string: string;
+  value: K;
+  setString(s: string): boolean;
+  setValue(v: K): boolean;
+}

package/src/cubing/twisty/model/props/viewer/OrbitCoordinatesRequestProp.ts

@@ -3,15 +3,15 @@ import { TwistyPropSource } from "../TwistyProp";
 
 export type CoordinateDegrees = number;
 
-export interface OrbitCoordinatesV2 {
+export interface OrbitCoordinates {
   latitude: CoordinateDegrees;
   longitude: CoordinateDegrees;
   distance: number;
 }
 
 export function orbitCoordinatesEqual(
-  c1: OrbitCoordinatesV2,
-  c2: OrbitCoordinatesV2,
+  c1: OrbitCoordinates,
+  c2: OrbitCoordinates,
 ): boolean {
   return (
     c1.latitude === c2.latitude &&
@@ -27,23 +27,23 @@ export function orbitCoordinatesEqual(
 //   distance: 6,
 // });
 
-export type OrbitCoordinatesRequest = Partial<OrbitCoordinatesV2> | "auto";
+export type OrbitCoordinatesRequest = Partial<OrbitCoordinates> | "auto";
 
 // TODO: Put the "auto" calculations in a separate place.
 export class OrbitCoordinatesRequestProp extends TwistyPropSource<
   OrbitCoordinatesRequest,
-  Partial<OrbitCoordinatesV2> | "auto"
+  Partial<OrbitCoordinates> | "auto"
 > {
   getDefaultValue(): OrbitCoordinatesRequest {
     return "auto";
   }
 
-  canReuseValue(v1: OrbitCoordinatesV2, v2: OrbitCoordinatesV2) {
+  canReuseValue(v1: OrbitCoordinates, v2: OrbitCoordinates) {
     return v1 === v2 || orbitCoordinatesEqual(v1, v2);
   }
 
   async derive(
-    newCoordinates: Partial<OrbitCoordinatesV2> | "auto",
+    newCoordinates: Partial<OrbitCoordinates> | "auto",
     oldValuePromise: Promise<OrbitCoordinatesRequest>,
   ): Promise<OrbitCoordinatesRequest> {
     if (newCoordinates === "auto") {
@@ -55,7 +55,7 @@ export class OrbitCoordinatesRequestProp extends TwistyPropSource<
       oldValue = {};
     }
 
-    const newValue: Partial<OrbitCoordinatesV2> = Object.assign({}, oldValue);
+    const newValue: Partial<OrbitCoordinates> = Object.assign({}, oldValue);
     Object.assign(newValue, newCoordinates);
 
     if (typeof newValue.latitude !== "undefined") {

package/src/cubing/twisty/model/props/viewer/TimeRangeProp.ts

@@ -1,5 +1,5 @@
-import type { TimeRange } from "../../../old/animation/cursor/AlgCursor";
-import type { AlgIndexer } from "../../../old/animation/indexer/AlgIndexer";
+import type { TimeRange } from "../../../controllers/AnimationTypes";
+import type { AlgIndexer } from "../../../controllers/indexer/AlgIndexer";
 import { TwistyPropDerived } from "../TwistyProp";
 
 export class TimeRangeProp extends TwistyPropDerived<

package/src/cubing/twisty/model/props/viewer/ViewerLinkProp.ts

@@ -1,6 +1,10 @@
-import type { ViewerLinkPage } from "../../../old/dom/TwistyPlayerConfig";
 import { SimpleTwistyPropSource } from "../TwistyProp";
 
+export const viewerLinkPages = {
+  twizzle: true, // default
+  none: true,
+};
+export type ViewerLinkPage = keyof typeof viewerLinkPages;
 export type ViewerLinkPageWithAuto = ViewerLinkPage | "auto";
 
 export class ViewerLinkProp extends SimpleTwistyPropSource<ViewerLinkPageWithAuto> {

package/src/cubing/twisty/model/props/viewer/VisualizationProp.ts

@@ -1,6 +1,13 @@
-import type { VisualizationFormat } from "../../../old/dom/TwistyPlayerConfig";
 import { SimpleTwistyPropSource } from "../TwistyProp";
 
+// TODO: turn these maps into lists?
+export const visualizationFormats = {
+  "3D": true, // default
+  "2D": true,
+  "experimental-2D-LL": true, // TODO
+  "PG3D": true,
+};
+export type VisualizationFormat = keyof typeof visualizationFormats;
 export type VisualizationFormatWithAuto = VisualizationFormat | "auto";
 
 export class VisualizationFormatProp extends SimpleTwistyPropSource<VisualizationFormatWithAuto> {

package/src/cubing/twisty/model/props/viewer/VisualizationStrategyProp.ts

@@ -1,6 +1,6 @@
-import type { PuzzleID } from "../../../old/dom/TwistyPlayerConfig";
 import type { VisualizationFormatWithAuto } from "./VisualizationProp";
 import { TwistyPropDerived } from "../TwistyProp";
+import type { PuzzleID } from "../../..";
 
 type VisualizationStrategyPropInputs = {
   visualizationRequest: VisualizationFormatWithAuto;

package/src/cubing/twisty/{old/dom/viewers/Twisty2DSVGView.css.ts → views/2D/Twisty2DPuzzle.css.ts}

@@ -1,4 +1,4 @@
-import { CSSSource } from "../element/ManagedCustomElement";
+import { CSSSource } from "../ManagedCustomElement";
 
 // TODO: Can we do this without so much nesting, and styling all the nested elems?
 export const twisty2DSVGCSS = new CSSSource(`

package/src/cubing/twisty/views/2D/Twisty2DPuzzle.ts

@@ -6,22 +6,18 @@ import {
 } from "../../../kpuzzle";
 import type { PuzzleLoader } from "../../../puzzles/PuzzleLoader";
 import type { PuzzleAppearance } from "../../../puzzles/stickerings/appearance";
-import type { PositionListener } from "../../old/animation/cursor/AlgCursor";
 import {
   Direction,
+  PositionListener,
   PuzzlePosition,
-} from "../../old/animation/cursor/CursorTypes";
-import { RenderScheduler } from "../../old/animation/RenderScheduler";
-import { ManagedCustomElement } from "../../old/dom/element/ManagedCustomElement";
-import { customElementsShim } from "../../old/dom/element/node-custom-element-shims";
+} from "../../controllers/AnimationTypes";
+import { RenderScheduler } from "../../controllers/RenderScheduler";
+import { ManagedCustomElement } from "../ManagedCustomElement";
+import { customElementsShim } from "../node-custom-element-shims";
 import type { TwistyPlayerModel } from "../../model/TwistyPlayerModel";
 import { FreshListenerManager } from "../../model/props/TwistyProp";
-import type {
-  ExperimentalStickering,
-  PuzzleID,
-} from "../../old/dom/TwistyPlayerConfig";
-import { twisty2DSVGCSS } from "../../old/dom/viewers/Twisty2DSVGView.css";
-import type { TwistyViewerElement } from "../../old/dom/viewers/TwistyViewerElement";
+import { twisty2DSVGCSS } from "./Twisty2DPuzzle.css";
+import type { ExperimentalStickering, PuzzleID } from "../..";
 
 export interface Twisty2DPuzzleOptions {
   experimentalStickering?: ExperimentalStickering;
@@ -30,7 +26,7 @@ export interface Twisty2DPuzzleOptions {
 // <twisty-2d-svg>
 export class Twisty2DPuzzle
   extends ManagedCustomElement
-  implements TwistyViewerElement, PositionListener
+  implements PositionListener
 {
   private definition: KPuzzleDefinition;
   public svg: KPuzzleSVGWrapper;

package/src/cubing/twisty/views/2D/Twisty2DPuzzleWrapper.ts

@@ -2,7 +2,7 @@ import type { PuzzleLoader } from "../../../puzzles";
 import type { ExperimentalStickering } from "../../../twisty";
 import type { TwistyPlayerModel } from "../../model/TwistyPlayerModel";
 import { FreshListenerManager } from "../../model/props/TwistyProp";
-import type { Schedulable } from "../../old/animation/RenderScheduler";
+import type { Schedulable } from "../../controllers/RenderScheduler";
 import { Twisty2DPuzzle } from "./Twisty2DPuzzle";
 
 export class Twisty2DPuzzleWrapper implements Schedulable {

package/src/cubing/twisty/views/2D/Twisty2DSceneWrapper.ts

@@ -3,10 +3,10 @@ import type { PuzzleLoader } from "../../../puzzles";
 import { THREEJS } from "../../heavy-code-imports/3d";
 import type { TwistyPlayerModel } from "../../model/TwistyPlayerModel";
 import { FreshListenerManager } from "../../model/props/TwistyProp";
-import type { Schedulable } from "../../old/animation/RenderScheduler";
-import { ManagedCustomElement } from "../../old/dom/element/ManagedCustomElement";
-import { customElementsShim } from "../../old/dom/element/node-custom-element-shims";
-import { twistyViewerWrapperCSS } from "../../old/dom/viewers/TwistyViewerWrapper.css";
+import type { Schedulable } from "../../controllers/RenderScheduler";
+import { ManagedCustomElement } from "../ManagedCustomElement";
+import { customElementsShim } from "../node-custom-element-shims";
+import { twistyViewerWrapperCSS } from "../TwistyViewerWrapper.css";
 import { Twisty2DPuzzleWrapper } from "./Twisty2DPuzzleWrapper";
 
 export class Twisty2DSceneWrapper

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

@@ -0,0 +1,184 @@
+// export class Drag() {
+
+// }
+
+interface DragInfo {
+  attachedInfo: Record<any, any>;
+  hasMoved: boolean;
+  lastClientX: number;
+  lastClientY: number;
+  lastTimeStamp: number;
+}
+
+type PointerID = number;
+
+export interface DragMovementInfo {
+  attachedInfo: Record<any, any>;
+  movementX: number;
+  movementY: number;
+  elapsedMs: number;
+}
+
+export interface UpInfo {
+  attachedInfo: Record<any, any>;
+}
+
+export interface PressInfo {
+  normalizedX: number;
+  normalizedY: number;
+  rightClick: boolean;
+  keys: {
+    // TODO: group these
+    altKey: boolean;
+    ctrlOrMetaKey: boolean;
+    shiftKey: boolean;
+  };
+}
+
+// Chrome can report movements as low as `0.0000152587890625` even if the cursor did not move at all. So we need a treshold insteadl.
+const MOVEMENT_EPSILON = 0.1; // px
+
+export class DragTracker extends EventTarget {
+  #dragInfoMap: Map<PointerID, DragInfo> = new Map();
+
+  constructor(public readonly target: HTMLElement) {
+    super();
+    target.addEventListener("pointerdown", this.onPointerDown.bind(this));
+    // Prevent right-click on desktop (only tested on macOS Chrome/Safari/Firefox) so we can detect right-click moves.
+    // TODO: Can we do this selectively, e.g. only on the puzzle? That way we could allow right-click to download the canvas. Unfortunately, it would probably require a sync calculation.
+    this.target.addEventListener("contextmenu", (e) => {
+      if (e.buttons & 2) {
+        e.preventDefault();
+      }
+    });
+    // Prevent touch scrolling (preventing default on `pointermove` doesn't work).
+    this.target.addEventListener("touchmove", (e) => e.preventDefault());
+    // Prevent zooming on double-tap (iOS).
+    // This is because `dblclick` works to zoom in, but does *not* work to zoom out. So the user can get stuck zoomed into the player without a way to zoom out.
+    this.target.addEventListener("dblclick", (e) => e.preventDefault());
+  }
+
+  // This allows us to avoid getting a callback every time the pointer moves over the canvas, until we have a down event.
+  // TODO: Ideally we'd also support unregistering when we're certain there are no more active touches. But this means we need to properly handle every way a pointer "click" can end, which is tricky across environments (due to e.g. mouse vs. touch vs. stylues, canvas/viewport/window/scroll boundaries, right-click and other ways of losing focus, etc.), so we conservatively leave the listeners on.
+  #lazyListenersRegistered: boolean = false;
+  #registerLazyListeners(): void {
+    if (this.#lazyListenersRegistered) {
+      return;
+    }
+    this.target.addEventListener("pointermove", this.onPointerMove.bind(this)); // TODO: only register this after pointer down.
+    this.target.addEventListener("pointerup", this.onPointerUp.bind(this));
+    this.#lazyListenersRegistered = true;
+  }
+
+  #clear(e: PointerEvent): void {
+    this.#dragInfoMap.delete(e.pointerId);
+  }
+
+  // `null`: means: ignore this result (no movement, or not
+  #trackDrag(e: PointerEvent): {
+    movementInfo: DragMovementInfo | null;
+    hasMoved: boolean;
+  } {
+    // TODO: Find a way to detect if this is an active press, in a way that works cross-platform.
+    // if (e.buttons === 0) {
+    //   return { movementInfo: null, hasMoved: false };
+    // }
+    const existing = this.#dragInfoMap.get(e.pointerId);
+    if (!existing) {
+      return { movementInfo: null, hasMoved: false };
+    }
+    // We would try to use `e.movementX`/`e.movementY`, except Safari:
+    // - Does not have those values on i[Pad]OS.
+    // - Will always report `0` for these values on macOS.
+    // https://bugs.webkit.org/show_bug.cgi?id=220194
+    //
+    // The following are all insufficiently powerful for detecting the Safari `0` bug:
+    // - `"movementX" in e`
+    // - `e.movementX !== "undefined"`
+    // - `e.hasOwnProperty("movementX")`
+
+    let movementInfo: DragMovementInfo;
+    if ((e.movementX ?? 0) !== 0 || (e.movementY ?? 0) !== 0) {
+      // We optimistically try to catch sub-pixel movements in Chrome.
+      movementInfo = {
+        attachedInfo: existing.attachedInfo,
+        movementX: e.movementX,
+        movementY: e.movementY,
+        elapsedMs: e.timeStamp - existing.lastTimeStamp,
+      };
+    } else {
+      movementInfo = {
+        attachedInfo: existing.attachedInfo,
+        movementX: e.clientX - existing.lastClientX,
+        movementY: e.clientY - existing.lastClientY,
+        elapsedMs: e.timeStamp - existing.lastTimeStamp,
+      };
+    }
+    existing.lastClientX = e.clientX;
+    existing.lastClientY = e.clientY;
+    existing.lastTimeStamp = e.timeStamp;
+    if (
+      Math.abs(movementInfo.movementX) < MOVEMENT_EPSILON &&
+      Math.abs(movementInfo.movementY) < MOVEMENT_EPSILON
+    ) {
+      return { movementInfo: null, hasMoved: existing.hasMoved };
+    } else {
+      existing.hasMoved = true;
+      return { movementInfo, hasMoved: existing.hasMoved };
+    }
+  }
+
+  private onPointerDown(e: PointerEvent) {
+    this.#registerLazyListeners();
+    const newDragInfo: DragInfo = {
+      attachedInfo: {},
+      hasMoved: false,
+      lastClientX: e.clientX,
+      lastClientY: e.clientY,
+      lastTimeStamp: e.timeStamp,
+    };
+    this.#dragInfoMap.set(e.pointerId, newDragInfo);
+    this.target.setPointerCapture(e.pointerId);
+  }
+
+  private onPointerMove(e: PointerEvent) {
+    const movementInfo = this.#trackDrag(e).movementInfo;
+    if (movementInfo) {
+      e.preventDefault();
+      this.dispatchEvent(
+        new CustomEvent("move", {
+          detail: movementInfo,
+        }),
+      );
+    }
+  }
+
+  private onPointerUp(e: PointerEvent) {
+    const trackDragResult = this.#trackDrag(e);
+    const existing = this.#dragInfoMap.get(e.pointerId)!; // TODO
+    this.#clear(e);
+    this.target.releasePointerCapture(e.pointerId); // TODO: unnecessary?
+    let event: CustomEvent;
+    if (trackDragResult.hasMoved) {
+      // TODO: send proper movement/momentum since last move event.
+      event = new CustomEvent<UpInfo>("up", {
+        detail: { attachedInfo: existing.attachedInfo },
+      });
+    } else {
+      const { altKey, ctrlKey, metaKey, shiftKey } = e;
+      event = new CustomEvent<PressInfo>("press", {
+        detail: {
+          normalizedX: (e.offsetX / this.target.offsetWidth) * 2 - 1,
+          normalizedY: 1 - (e.offsetY / this.target.offsetHeight) * 2,
+          rightClick: !!(e.button & 2),
+          keys: {
+            altKey,
+            ctrlOrMetaKey: ctrlKey || metaKey,
+            shiftKey,
+          },
+        },
+      });
+    }
+    this.dispatchEvent(event);
+  }
+}

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

@@ -13,7 +13,7 @@
 
 import { THREEJS } from "../../heavy-code-imports/3d";
 import type { Camera, Scene, WebGLRenderer } from "three";
-import { pixelRatio } from "../../old/dom/viewers/canvas";
+import { pixelRatio } from "../canvas";
 
 const renderers: Promise<WebGLRenderer>[] = [];
 
@@ -37,6 +37,7 @@ export async function renderPooled(
   renderer.setSize(width, height); // TODO: is it faster if we cache values and only call this when necessary?
   renderer.render(scene, camera);
 
+  // TODO: Should we cache this? Seems to take about 0.0001ms to get.
   const context = canvas.getContext("2d")!;
   context.clearRect(0, 0, canvas.width, canvas.height);
   context.drawImage(renderer.domElement, 0, 0);