cubing 0.22.0 → 0.24.0-pre2

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

@@ -1,146 +0,0 @@
-import {
-  combineTransformations,
-  KPuzzleDefinition,
-  KPuzzleSVGWrapper,
-  transformationForMove,
-} from "../../../kpuzzle";
-import type { PuzzleLoader } from "../../../puzzles/PuzzleLoader";
-import type { PuzzleAppearance } from "../../../puzzles/stickerings/appearance";
-import {
-  Direction,
-  PositionListener,
-  PuzzlePosition,
-} 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 { twisty2DSVGCSS } from "./Twisty2DPuzzle.css";
-import type { ExperimentalStickering, PuzzleID } from "../..";
-
-export interface Twisty2DPuzzleOptions {
-  experimentalStickering?: ExperimentalStickering;
-}
-
-// <twisty-2d-svg>
-export class Twisty2DPuzzle
-  extends ManagedCustomElement
-  implements PositionListener
-{
-  private definition: KPuzzleDefinition;
-  public svg: KPuzzleSVGWrapper;
-  private scheduler = new RenderScheduler(this.render.bind(this));
-  #cachedPosition: PuzzlePosition | null = null; // TODO: pull when needed.
-  constructor(
-    private model?: TwistyPlayerModel,
-    def?: KPuzzleDefinition,
-    private svgSource?: string,
-    private options?: Twisty2DPuzzleOptions,
-    private puzzleLoader?: PuzzleLoader,
-  ) {
-    super();
-    this.addCSS(twisty2DSVGCSS);
-
-    this.definition = def!;
-    this.resetSVG(); // TODO: do this in `connectedCallback()`?
-
-    this.#freshListenerManager.addListener(
-      this.model!.puzzleIDProp,
-      (puzzleID: PuzzleID) => {
-        if (puzzleLoader?.id !== puzzleID) {
-          this.disconnect();
-        }
-      },
-    );
-
-    this.#freshListenerManager.addListener(
-      this.model!.legacyPositionProp,
-      this.onPositionChange.bind(this),
-    );
-
-    if (this.options?.experimentalStickering) {
-      this.experimentalSetStickering(this.options.experimentalStickering);
-    }
-  }
-
-  #freshListenerManager = new FreshListenerManager();
-  disconnect(): void {
-    this.#freshListenerManager.disconnect();
-  }
-
-  onPositionChange(position: PuzzlePosition): void {
-    try {
-      if (position.movesInProgress.length > 0) {
-        const move = position.movesInProgress[0].move;
-
-        const def = this.definition;
-        let partialMove = move;
-        if (position.movesInProgress[0].direction === Direction.Backwards) {
-          partialMove = move.invert();
-        }
-        const newState = combineTransformations(
-          def,
-          position.state,
-          transformationForMove(def, partialMove),
-        );
-        // TODO: move to render()
-        this.svg.draw(
-          this.definition,
-          position.state,
-          newState,
-          position.movesInProgress[0].fraction,
-        );
-      } else {
-        this.svg.draw(this.definition, position.state);
-        this.#cachedPosition = position;
-      }
-    } catch (e) {
-      console.warn(
-        "Bad position (this doesn't necessarily mean something is wrong). Pre-emptively disconnecting:",
-        this.puzzleLoader?.id,
-        e,
-      );
-      this.disconnect();
-    }
-  }
-
-  scheduleRender(): void {
-    this.scheduler.requestAnimFrame();
-  }
-
-  experimentalSetStickering(stickering: ExperimentalStickering): void {
-    (async () => {
-      if (!this.puzzleLoader?.appearance) {
-        return;
-      }
-      const appearance = await this.puzzleLoader.appearance(stickering);
-      this.resetSVG(appearance);
-    })();
-  }
-
-  // TODO: do this without constructing a new SVG.
-  private resetSVG(appearance?: PuzzleAppearance): void {
-    if (this.svg) {
-      this.removeElement(this.svg.element);
-    }
-    if (!this.definition) {
-      return; // TODO
-    }
-    this.svg = new KPuzzleSVGWrapper(
-      this.definition,
-      this.svgSource!,
-      appearance,
-    ); // TODO
-    this.addElement(this.svg.element);
-    if (this.#cachedPosition) {
-      this.onPositionChange(this.#cachedPosition);
-    }
-  }
-
-  private render(): void {
-    /*...*/
-  }
-}
-
-customElementsShim.define("twisty-2d-puzzle", Twisty2DPuzzle);

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

@@ -1,52 +0,0 @@
-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 "../../controllers/RenderScheduler";
-import { Twisty2DPuzzle } from "./Twisty2DPuzzle";
-
-export class Twisty2DPuzzleWrapper implements Schedulable {
-  constructor(
-    private model: TwistyPlayerModel,
-    public schedulable: Schedulable,
-    private puzzleLoader: PuzzleLoader,
-    private effectiveVisualization: "2D" | "experimental-2D-LL",
-  ) {
-    this.twisty2DPuzzle(); // Start constructing.
-
-    this.#freshListenerManager.addListener(
-      this.model.stickeringProp,
-      async (stickering: ExperimentalStickering) => {
-        (await this.twisty2DPuzzle()).experimentalSetStickering(stickering);
-      },
-    );
-  }
-
-  #freshListenerManager = new FreshListenerManager();
-  disconnect(): void {
-    this.#freshListenerManager.disconnect();
-  }
-
-  // TODO: Hook this up nicely.
-  scheduleRender(): void {
-    // Nothing
-  }
-
-  #cachedTwisty2DPuzzle: Promise<Twisty2DPuzzle> | null = null;
-  // TODO: Stale dropper?
-  async twisty2DPuzzle(): Promise<Twisty2DPuzzle> {
-    return (this.#cachedTwisty2DPuzzle ??= (async () => {
-      const svgPromise =
-        this.effectiveVisualization === "experimental-2D-LL"
-          ? this.puzzleLoader.llSVG!()
-          : this.puzzleLoader.svg();
-      return new Twisty2DPuzzle(
-        this.model,
-        await this.puzzleLoader.def(),
-        await svgPromise,
-        {},
-        this.puzzleLoader,
-      );
-    })());
-  }
-}

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

@@ -1,77 +0,0 @@
-import type { Scene as ThreeScene } from "three";
-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 "../../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
-  extends ManagedCustomElement
-  implements Schedulable
-{
-  #freshListenerManager = new FreshListenerManager();
-  disconnect(): void {
-    this.#freshListenerManager.disconnect();
-  }
-
-  constructor(
-    public model?: TwistyPlayerModel,
-    private effectiveVisualization?: "2D" | "experimental-2D-LL",
-  ) {
-    super();
-  }
-
-  async connectedCallback(): Promise<void> {
-    this.addCSS(twistyViewerWrapperCSS);
-    if (this.model) {
-      this.#freshListenerManager.addListener(
-        this.model.puzzleLoaderProp,
-        this.onPuzzleLoader.bind(this),
-      );
-    }
-  }
-
-  #cachedScene: Promise<ThreeScene> | null;
-  async scene(): Promise<ThreeScene> {
-    return (this.#cachedScene ??= (async () => new (await THREEJS).Scene())());
-  }
-
-  scheduleRender(): void {
-    this.#currentTwisty2DPuzzleWrapper?.scheduleRender();
-  }
-
-  #currentTwisty2DPuzzleWrapper: Twisty2DPuzzleWrapper | null = null;
-  currentTwisty2DPuzzleWrapper(): Twisty2DPuzzleWrapper | null {
-    return this.#currentTwisty2DPuzzleWrapper;
-  }
-
-  // #oldTwisty3DPuzzleWrappers: Twisty3DPuzzleWrapper[] = []; // TODO: Animate these out.
-  async setCurrentTwisty2DPuzzleWrapper(
-    twisty2DPuzzleWrapper: Twisty2DPuzzleWrapper,
-  ): Promise<void> {
-    const old = this.#currentTwisty2DPuzzleWrapper;
-    this.#currentTwisty2DPuzzleWrapper = twisty2DPuzzleWrapper;
-    old?.disconnect(); // TODO: Disconnect properly.
-    const twisty2DPuzzlePromise = twisty2DPuzzleWrapper.twisty2DPuzzle();
-    this.contentWrapper.textContent = ""; // Clear existing ones.
-    this.addElement(await twisty2DPuzzlePromise);
-  }
-
-  async onPuzzleLoader(puzzleLoader: PuzzleLoader): Promise<void> {
-    this.#currentTwisty2DPuzzleWrapper?.disconnect();
-    const twisty2DPuzzleWrapper = new Twisty2DPuzzleWrapper(
-      this.model!,
-      this,
-      puzzleLoader,
-      this.effectiveVisualization!,
-    );
-
-    this.setCurrentTwisty2DPuzzleWrapper(twisty2DPuzzleWrapper);
-  }
-}
-
-customElementsShim.define("twisty-2d-scene-wrapper", Twisty2DSceneWrapper);

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

@@ -1,184 +0,0 @@
-// 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

@@ -1,54 +0,0 @@
-// TODO: https://stackoverflow.com/a/40443642
-
-// let shareAllNewRenderers: boolean = false;
-
-// // 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;
-// }
-
-// const sharedRenderer: WebGLRenderer | null = null;
-
-import { THREEJS } from "../../heavy-code-imports/3d";
-import type { Camera, Scene, WebGLRenderer } from "three";
-import { pixelRatio } from "../canvas";
-
-const renderers: Promise<WebGLRenderer>[] = [];
-
-// let haveSet = false;
-export async function renderPooled(
-  width: number,
-  height: number,
-  canvas: HTMLCanvasElement,
-  scene: Scene,
-  camera: Camera,
-): Promise<void> {
-  if (width === 0 || height === 0) {
-    return;
-  }
-  // At most one in the pool for now.
-  if (renderers.length === 0) {
-    renderers.push(newRenderer());
-  }
-  const renderer = await renderers[0];
-  // TODO: scissoring
-  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);
-}
-
-export async function newRenderer(): Promise<WebGLRenderer> {
-  const rendererConstructor = (await THREEJS).WebGLRenderer;
-  const renderer = new rendererConstructor({
-    antialias: true,
-    alpha: true,
-  });
-  renderer.setPixelRatio(pixelRatio());
-  return renderer;
-}

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

@@ -1,2 +0,0 @@
-export const TAU = Math.PI * 2;
-export const DEGREES_PER_RADIAN = 360 / TAU;