cubing 0.20.2 → 0.21.0-pre12

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

@@ -0,0 +1,10 @@
+import type { BackgroundTheme } from "../../../old/dom/TwistyPlayerConfig";
+import { SimpleTwistyPropSource } from "../TwistyProp";
+
+export type BackgroundThemeWithAuto = BackgroundTheme | "auto";
+
+export class BackgroundProp extends SimpleTwistyPropSource<BackgroundThemeWithAuto> {
+  getDefaultValue(): BackgroundThemeWithAuto {
+    return "auto";
+  }
+}

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

@@ -0,0 +1,86 @@
+import type { ButtonCommand } from "../../../views/control-panel/TwistyButtonsV2";
+import { fullscreenEnabled } from "../../../views/control-panel/webkit-fullscreen";
+import type { ViewerLinkPageWithAuto } from "./ViewerLinkProp";
+import type { CoarseTimelineInfo as CoarseTimelineInfo } from "../timeline/CoarseTimelineInfoProp";
+import { TwistyPropDerived } from "../TwistyProp";
+
+export const buttonIcons = [
+  "skip-to-start",
+  "skip-to-end",
+  "step-forward",
+  "step-backward",
+  "pause",
+  "play",
+  "enter-fullscreen",
+  "exit-fullscreen",
+  "twizzle-tw",
+];
+export type ButtonIcon = typeof buttonIcons[number];
+
+interface ButtonAppearance {
+  enabled: boolean;
+  icon: ButtonIcon;
+  title: string;
+  hidden?: boolean;
+}
+export type ButtonAppearances = Record<ButtonCommand, ButtonAppearance>;
+
+// TODO: reduce inputs to avoid unnecessary updates.
+interface ButtonAppearancePropInputs {
+  coarseTimelineInfo: CoarseTimelineInfo;
+  viewerLink: ViewerLinkPageWithAuto;
+}
+
+export class ButtonAppearanceProp extends TwistyPropDerived<
+  ButtonAppearancePropInputs,
+  ButtonAppearances
+> {
+  // TODO: This still seems to fire twice for play/pause?
+  derive(inputs: ButtonAppearancePropInputs): ButtonAppearances {
+    const buttonAppearances = {
+      "fullscreen": {
+        // TODO: Cache?// TODO: Cache?
+        enabled: fullscreenEnabled,
+        icon:
+          // TODO: Check against the expected element?
+          // TODO: This will *not* update when we enter/leave fullscreen. We need to work more closely with the controller.
+          document.fullscreenElement === null
+            ? "enter-fullscreen"
+            : "exit-fullscreen",
+        title: "Enter fullscreen",
+      },
+      "jump-to-start": {
+        enabled: !inputs.coarseTimelineInfo.atStart,
+        icon: "skip-to-start",
+        title: "Restart",
+      },
+      "play-step-backwards": {
+        enabled: !inputs.coarseTimelineInfo.atStart,
+        icon: "step-backward",
+        title: "Step backward",
+      },
+      "play-pause": {
+        enabled: true,
+        icon: inputs.coarseTimelineInfo.playing ? "pause" : "play",
+        title: inputs.coarseTimelineInfo.playing ? "Pause" : "Play",
+      },
+      "play-step": {
+        enabled: !inputs.coarseTimelineInfo.atEnd,
+        icon: "step-forward",
+        title: "Step forward",
+      },
+      "jump-to-end": {
+        enabled: !inputs.coarseTimelineInfo.atEnd,
+        icon: "skip-to-end",
+        title: "Skip to End",
+      },
+      "twizzle-link": {
+        enabled: true,
+        icon: "twizzle-tw",
+        title: "View at Twizzle",
+        hidden: inputs.viewerLink === "none",
+      },
+    };
+    return buttonAppearances;
+  }
+}

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

@@ -0,0 +1,10 @@
+import type { ControlsLocation } from "../../../old/dom/TwistyPlayerConfig";
+import { SimpleTwistyPropSource } from "../TwistyProp";
+
+export type ControlPanelThemeWithAuto = ControlsLocation | "auto";
+
+export class ControlPanelProp extends SimpleTwistyPropSource<ControlPanelThemeWithAuto> {
+  getDefaultValue(): ControlPanelThemeWithAuto {
+    return "auto";
+  }
+}

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

@@ -0,0 +1,11 @@
+import { SimpleTwistyPropSource } from "../TwistyProp";
+import type { CoordinateDegrees } from "./OrbitCoordinatesRequestProp";
+
+// Similar to https://alg.cubing.net/
+const DEFAULT_LATITUDE_LIMIT = 35;
+
+export class LatitudeLimitProp extends SimpleTwistyPropSource<CoordinateDegrees> {
+  getDefaultValue(): CoordinateDegrees {
+    return DEFAULT_LATITUDE_LIMIT;
+  }
+}

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

@@ -0,0 +1,56 @@
+import {
+  defaultCameraOrbitCoordinates,
+  PuzzleID,
+} from "../../../old/dom/TwistyPlayerConfig";
+import {
+  CoordinateDegrees,
+  orbitCoordinatesEqual,
+  OrbitCoordinatesRequest,
+  OrbitCoordinatesV2,
+} from "./OrbitCoordinatesRequestProp";
+import { TwistyPropDerived } from "../TwistyProp";
+import type { VisualizationStrategy } from "./VisualizationStrategyProp";
+
+interface OrbitCoordinatesPropInputs {
+  orbitCoordinatesRequest: OrbitCoordinatesRequest;
+  latitudeLimit: CoordinateDegrees;
+  puzzleID: PuzzleID;
+  strategy: VisualizationStrategy;
+}
+
+export class OrbitCoordinatesProp extends TwistyPropDerived<
+  OrbitCoordinatesPropInputs,
+  OrbitCoordinatesV2
+> {
+  canReuseValue(v1: OrbitCoordinatesV2, v2: OrbitCoordinatesV2) {
+    return orbitCoordinatesEqual(v1, v2);
+  }
+
+  async derive(
+    inputs: OrbitCoordinatesPropInputs,
+  ): Promise<OrbitCoordinatesV2> {
+    if (inputs.orbitCoordinatesRequest === "auto") {
+      return defaultCameraOrbitCoordinates(inputs.puzzleID, inputs.strategy);
+    }
+
+    const req: OrbitCoordinatesV2 = Object.assign(
+      Object.assign(
+        {},
+        defaultCameraOrbitCoordinates(inputs.puzzleID, inputs.strategy),
+        inputs.orbitCoordinatesRequest,
+      ),
+    );
+
+    if (Math.abs(req.latitude) <= inputs.latitudeLimit) {
+      return req;
+    } else {
+      const { latitude, longitude, distance } = req;
+      // TODO: Should we re-normalize the request, so we don't depend on normalization in the input?
+      return {
+        latitude: inputs.latitudeLimit * Math.sign(latitude),
+        longitude,
+        distance,
+      };
+    }
+  }
+}

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

@@ -0,0 +1,69 @@
+import { mod } from "../../helpers";
+import { TwistyPropSource } from "../TwistyProp";
+
+export type CoordinateDegrees = number;
+
+export interface OrbitCoordinatesV2 {
+  latitude: CoordinateDegrees;
+  longitude: CoordinateDegrees;
+  distance: number;
+}
+
+export function orbitCoordinatesEqual(
+  c1: OrbitCoordinatesV2,
+  c2: OrbitCoordinatesV2,
+): boolean {
+  return (
+    c1.latitude === c2.latitude &&
+    c1.longitude === c2.longitude &&
+    c1.distance === c2.distance
+  );
+}
+
+// TOOD: Check if freezing affects perf.
+// const DEFAULT_COORDINATES = Object.freeze({
+//   latitude: 35,
+//   longitude: 30,
+//   distance: 6,
+// });
+
+export type OrbitCoordinatesRequest = Partial<OrbitCoordinatesV2> | "auto";
+
+// TODO: Put the "auto" calculations in a separate place.
+export class OrbitCoordinatesRequestProp extends TwistyPropSource<
+  OrbitCoordinatesRequest,
+  Partial<OrbitCoordinatesV2> | "auto"
+> {
+  getDefaultValue(): OrbitCoordinatesRequest {
+    return "auto";
+  }
+
+  canReuseValue(v1: OrbitCoordinatesV2, v2: OrbitCoordinatesV2) {
+    return v1 === v2 || orbitCoordinatesEqual(v1, v2);
+  }
+
+  async derive(
+    newCoordinates: Partial<OrbitCoordinatesV2> | "auto",
+    oldValuePromise: Promise<OrbitCoordinatesRequest>,
+  ): Promise<OrbitCoordinatesRequest> {
+    if (newCoordinates === "auto") {
+      return "auto";
+    }
+
+    let oldValue = await oldValuePromise;
+    if (oldValue === "auto") {
+      oldValue = {};
+    }
+
+    const newValue: Partial<OrbitCoordinatesV2> = Object.assign({}, oldValue);
+    Object.assign(newValue, newCoordinates);
+
+    if (typeof newValue.latitude !== "undefined") {
+      newValue.latitude = Math.min(Math.max(newValue.latitude, -90), 90);
+    }
+    if (typeof newValue.longitude !== "undefined") {
+      newValue.longitude = mod(newValue.longitude, 360, 180);
+    }
+    return newValue;
+  }
+}

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

@@ -0,0 +1,15 @@
+import type { TimeRange } from "../../../old/animation/cursor/AlgCursor";
+import type { AlgIndexer } from "../../../old/animation/indexer/AlgIndexer";
+import { TwistyPropDerived } from "../TwistyProp";
+
+export class TimeRangeProp extends TwistyPropDerived<
+  { indexer: AlgIndexer<any> },
+  TimeRange
+> {
+  derive(inputs: { indexer: AlgIndexer<any> }): TimeRange {
+    return {
+      start: 0,
+      end: inputs.indexer.algDuration(),
+    };
+  }
+}

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

@@ -0,0 +1,10 @@
+import type { ViewerLinkPage } from "../../../old/dom/TwistyPlayerConfig";
+import { SimpleTwistyPropSource } from "../TwistyProp";
+
+export type ViewerLinkPageWithAuto = ViewerLinkPage | "auto";
+
+export class ViewerLinkProp extends SimpleTwistyPropSource<ViewerLinkPageWithAuto> {
+  getDefaultValue(): ViewerLinkPageWithAuto {
+    return "auto";
+  }
+}

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

@@ -0,0 +1,10 @@
+import type { VisualizationFormat } from "../../../old/dom/TwistyPlayerConfig";
+import { SimpleTwistyPropSource } from "../TwistyProp";
+
+export type VisualizationFormatWithAuto = VisualizationFormat | "auto";
+
+export class VisualizationFormatProp extends SimpleTwistyPropSource<VisualizationFormatWithAuto> {
+  getDefaultValue(): VisualizationFormatWithAuto {
+    return "auto";
+  }
+}

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

@@ -0,0 +1,45 @@
+import type { PuzzleID } from "../../../old/dom/TwistyPlayerConfig";
+import type { VisualizationFormatWithAuto } from "./VisualizationProp";
+import { TwistyPropDerived } from "../TwistyProp";
+
+type VisualizationStrategyPropInputs = {
+  visualizationRequest: VisualizationFormatWithAuto;
+  puzzleID: PuzzleID;
+};
+
+export type VisualizationStrategy =
+  | "Cube3D"
+  | "2D"
+  | "experimental-2D-LL"
+  | "PG3D";
+
+export class VisualizationStrategyProp extends TwistyPropDerived<
+  VisualizationStrategyPropInputs,
+  VisualizationStrategy
+> {
+  derive(inputs: VisualizationStrategyPropInputs): VisualizationStrategy {
+    switch (inputs.puzzleID) {
+      case "clock":
+      case "square1":
+        return "2D";
+      case "3x3x3":
+        switch (inputs.visualizationRequest) {
+          case "auto":
+          case "3D":
+            return "Cube3D";
+          default:
+            return inputs.visualizationRequest;
+        }
+      default:
+        switch (inputs.visualizationRequest) {
+          case "auto":
+          case "3D":
+            return "PG3D";
+          case "experimental-2D-LL":
+            return "2D";
+          default:
+            return inputs.visualizationRequest;
+        }
+    }
+  }
+}

package/src/cubing/twisty/{animation → old/animation}/RenderScheduler.ts

@@ -21,3 +21,8 @@ export class RenderScheduler {
     this.callback(timestamp);
   }
 }
+
+// An interface for classes to use to expose their scheduling.
+export interface Schedulable {
+  scheduleRender(): void;
+}

package/src/cubing/twisty/{animation → old/animation}/cursor/AlgCursor.ts

@@ -6,9 +6,13 @@
 /* eslint-disable @typescript-eslint/no-empty-interface */
 
 // start of imports
-import { Alg, Move } from "../../../alg";
-import { KPuzzle, KPuzzleDefinition, Transformation } from "../../../kpuzzle";
-import { KPuzzleWrapper } from "../../3D/puzzles/KPuzzleWrapper";
+import { Alg, Move, Pause } from "../../../../alg";
+import {
+  KPuzzle,
+  KPuzzleDefinition,
+  Transformation,
+} from "../../../../kpuzzle";
+import { KPuzzleWrapper } from "../../../views/3D/puzzles/KPuzzleWrapper";
 import type { AlgIndexer } from "../indexer/AlgIndexer";
 import { TreeAlgIndexer } from "../indexer/tree/TreeAlgIndexer";
 import type { Timeline, TimelineTimestampListener } from "../Timeline";
@@ -57,7 +61,7 @@ export class AlgCursor
   ) {
     this.ksolvePuzzle = new KPuzzleWrapper(def);
     if (indexerConstructor) {
-      this.indexerConstructor = this.indexerConstructor;
+      this.indexerConstructor = indexerConstructor;
     }
     this.instantiateIndexer(alg);
     this.startState = startStateAlg
@@ -131,14 +135,17 @@ export class AlgCursor
       position = this.indexer.timestampToPosition(timestamp, this.startState);
     } else {
       const idx = this.indexer.timestampToIndex(timestamp);
-      const state = this.indexer.stateAtIndex(idx, this.startState) as any; // TODO
+      const state = this.indexer.stateAtIndex(
+        idx,
+        this.startState,
+      ) as Transformation; // TODO
       position = {
         state,
         movesInProgress: [],
       };
 
       if (this.indexer.numAnimatedLeaves() > 0) {
-        const move = this.indexer.getMove(idx)?.as(Move);
+        const move = this.indexer.getAnimLeaf(idx)?.as(Move);
         if (!move) {
           return; // TODO
         }
@@ -239,7 +246,7 @@ export class AlgCursor
   }
 
   /** @deprecated */
-  experimentalMoveAtIndex(index: number): Move | null {
-    return this.indexer.getMove(index);
+  experimentalLeafAtIndex(index: number): Move | Pause | null {
+    return this.indexer.getAnimLeaf(index);
   }
 }

package/src/cubing/twisty/{animation → old/animation}/cursor/CursorTypes.ts

@@ -1,5 +1,5 @@
-import type { Move } from "../../../alg";
-import type { Transformation as KPuzzleState } from "../../../kpuzzle";
+import type { Move } from "../../../../alg";
+import type { Transformation as KPuzzleState } from "../../../../kpuzzle";
 
 export type MillisecondTimestamp = number;
 
@@ -34,8 +34,8 @@ export type PuzzlePosition = {
 };
 
 export enum BoundaryType {
-  Move,
-  EntireTimeline,
+  Move = "move",
+  EntireTimeline = "entire-timeline",
 }
 
 // export type DurationForAmount = (amount: number) => Duration;

package/src/cubing/twisty/{animation → old/animation}/indexer/AlgDuration.ts

@@ -8,7 +8,7 @@ import {
   Newline,
   Pause,
   TraversalUp,
-} from "../../../alg";
+} from "../../../../alg";
 import type { Duration } from "../cursor/CursorTypes";
 
 export function constantDurationForAmount(_amount: number): Duration {

package/src/cubing/twisty/old/animation/indexer/AlgIndexer.ts

@@ -0,0 +1,86 @@
+import type { Move } from "../../../../alg/units";
+import { arrayEqualsCompare } from "../../../model/helpers";
+import type {
+  PuzzleWrapper,
+  State,
+} from "../../../views/3D/puzzles/KPuzzleWrapper";
+import type {
+  Direction,
+  Duration,
+  MillisecondTimestamp,
+  PuzzlePosition,
+  Timestamp,
+} from "../cursor/CursorTypes";
+import type { AnimatedLeafUnit } from "./simultaneous-moves/simul-moves";
+
+export interface CurrentMove {
+  move: Move;
+  direction: Direction; // TODO: `animationDirection`?
+  fraction: number; // TODO: Figure out how to separate this field to make this whole object easier to cache?
+  startTimestamp: MillisecondTimestamp;
+  endTimestamp: MillisecondTimestamp;
+}
+
+export function currentMoveEquals(cm1: CurrentMove, cm2: CurrentMove): boolean {
+  return (
+    cm1 === cm2 ||
+    (cm1.move.isIdentical(cm2.move) &&
+      cm1.direction === cm2.direction &&
+      cm1.fraction === cm2.fraction &&
+      cm1.startTimestamp === cm2.startTimestamp &&
+      cm1.endTimestamp === cm2.endTimestamp)
+  );
+}
+
+export function currentMoveArrayEquals(
+  cma1: CurrentMove[],
+  cma2: CurrentMove[],
+): boolean {
+  return arrayEqualsCompare(cma1, cma2, currentMoveEquals);
+}
+
+export interface CurrentMoveInfo {
+  stateIndex: number;
+  currentMoves: CurrentMove[];
+  // Moves that are reaching a fraction of 1 at this exact timestamp.
+  movesFinishing: CurrentMove[];
+  // Moves that are reached a fraction of 1 in the past, but are needed to
+  // handle simultaneous move animation (e.g. because a move that started
+  // earlier is still not done).
+  movesFinished: CurrentMove[];
+  movesStarting: CurrentMove[];
+  latestStart: number;
+  earliestEnd: number;
+}
+
+// TODO: Write tests fore this before using.
+export function currentMoveInfoEquals(
+  c1: CurrentMoveInfo,
+  c2: CurrentMoveInfo,
+): boolean {
+  const eq =
+    c1 === c2 ||
+    (c1.stateIndex === c2.stateIndex &&
+      currentMoveArrayEquals(c1.currentMoves, c2.currentMoves) &&
+      currentMoveArrayEquals(c1.movesFinishing, c2.movesFinishing) &&
+      currentMoveArrayEquals(c1.movesStarting, c2.movesStarting) &&
+      c1.latestStart === c2.latestStart &&
+      c2.earliestEnd === c2.earliestEnd);
+  return eq;
+}
+
+export interface AlgIndexer<P extends PuzzleWrapper> {
+  getAnimLeaf(index: number): AnimatedLeafUnit | null;
+  indexToMoveStartTimestamp(index: number): Timestamp;
+  stateAtIndex(index: number, startTransformation?: State<P>): State<P>;
+  transformAtIndex(index: number): State<P>;
+  numAnimatedLeaves(): number;
+  timestampToIndex(timestamp: Timestamp): number;
+  algDuration(): Duration;
+  moveDuration(index: number): number;
+  timestampToPosition?: (
+    timestamp: Timestamp,
+    startTransformation?: State<P>,
+  ) => PuzzlePosition;
+  currentMoveInfo?: (timestamp: Timestamp) => CurrentMoveInfo;
+}

package/src/cubing/twisty/{animation → old/animation}/indexer/SimpleAlgIndexer.ts

@@ -1,6 +1,9 @@
-import { Alg, Move, TraversalUp } from "../../../alg";
-import { countAnimatedLeaves } from "../../../notation";
-import type { PuzzleWrapper, State } from "../../3D/puzzles/KPuzzleWrapper";
+import { Alg, Move, TraversalUp } from "../../../../alg";
+import { countAnimatedLeaves } from "../../../../notation";
+import type {
+  PuzzleWrapper,
+  State,
+} from "../../../views/3D/puzzles/KPuzzleWrapper";
 import type { Duration, Timestamp } from "../cursor/CursorTypes";
 import { AlgDuration, defaultDurationForAmount } from "./AlgDuration";
 import type { AlgIndexer } from "./AlgIndexer";
@@ -19,7 +22,7 @@ export class SimpleAlgIndexer<P extends PuzzleWrapper>
     this.moves = new Alg(alg.experimentalExpand());
   }
 
-  public getMove(index: number): Move {
+  public getAnimLeaf(index: number): Move {
     return Array.from(this.moves.units())[index] as Move; // TODO: perf
   }
 
@@ -32,7 +35,7 @@ export class SimpleAlgIndexer<P extends PuzzleWrapper>
     let cumulativeTime = 0;
     let i;
     for (i = 0; i < this.numAnimatedLeaves(); i++) {
-      cumulativeTime += this.durationFn.traverseMove(this.getMove(i));
+      cumulativeTime += this.durationFn.traverseMove(this.getAnimLeaf(i));
       if (cumulativeTime >= timestamp) {
         return i;
       }
@@ -68,6 +71,6 @@ export class SimpleAlgIndexer<P extends PuzzleWrapper>
   }
 
   public moveDuration(index: number): number {
-    return this.durationFn.traverseMove(this.getMove(index));
+    return this.durationFn.traverseMove(this.getAnimLeaf(index));
   }
 }