cubing 0.21.3 → 0.22.0

package/src/cubing/twisty/old/animation/Timeline.ts

@@ -1,378 +0,0 @@
-import { RenderScheduler } from "./RenderScheduler";
-import type { AlgCursor, TimeRange } from "./cursor/AlgCursor";
-import {
-  BoundaryType,
-  Direction,
-  directionScalar,
-  MillisecondTimestamp,
-} from "./cursor/CursorTypes";
-
-// YouTube keeps playing on jump, but it also stays frozen while the cursor is
-// down. So I think it would be good for this to be false, but only if we
-// implement a "start jumping" event that pauses until "finish jumping" while
-// the scrubber is active.
-const PAUSE_ON_JUMP = true;
-
-// TODO: We use symbols to avoid exposing `number` values. Is this performant enough? Should/can we use symbols?
-export enum TimelineAction {
-  StartingToPlay = "StartingToPlay", // TODO playing backwards.
-  Pausing = "Pausing",
-  Jumping = "Jumping",
-}
-
-// TODO: We use symbols to avoid exposing `number` values. Is this performant enough? Should/can we use symbols?
-export enum TimestampLocationType {
-  StartOfTimeline = "Start",
-  EndOfTimeline = "End",
-  StartOfMove = "StartOfMove",
-  EndOfMove = "EndOfMove",
-  MiddleOfMove = "MiddleOfMove",
-  BetweenMoves = "BetweenMoves",
-}
-
-export interface TimelineActionEvent {
-  action: TimelineAction;
-  locationType: TimestampLocationType;
-}
-
-// This should be used by classes that (directly or indirectly) update puzzle
-// state based on a timestamp. It fires every time the timestamp is changed for
-// a new render (e.g. 60 times a second during animation), and only fires if the
-// timestamp has changed since the last call. This means you can use it as a
-// reliable callback telling you when to schedule a new render.
-export interface TimelineTimestampListener {
-  onTimelineTimestampChange(timestamp: MillisecondTimestamp): void;
-  onTimeRangeChange(timeRange: TimeRange): void;
-}
-
-// This should be used by classes that (directly or indirectly) update UI (e.g.
-// pause/play buttons).
-//
-// Note: the action events of a `Timeline` are not necessarily coordinated with
-// the timestamp events, since timestamp events are tied to animation frames.
-// For example, if you receive a "pausing" event, the final frame may already
-// have been drawn, or may be drawn in the near future.
-export interface TimelineActionListener {
-  onTimelineAction(actionEvent: TimelineActionEvent): void;
-}
-
-export interface TimelineTimestampDispatcher {
-  addTimestampListener(timestampListener: TimelineTimestampListener): void;
-}
-
-export interface TimelineActionDispatcher {
-  addActionListener(actionListener: TimelineActionListener): void;
-}
-
-// `performance.now()` is rounded for security concerns, so it's usually not
-// accurate to the millisecond. So we round it, which lets us work with whole ms
-// everywhere.
-function getNow(): MillisecondTimestamp {
-  return Math.round(performance.now());
-}
-
-export class Timeline
-  implements TimelineTimestampDispatcher, TimelineActionDispatcher
-{
-  animating: boolean = false;
-  tempoScale: number = 1;
-  private cursors: Set<AlgCursor> = new Set();
-  private timestampListeners: Set<TimelineTimestampListener> = new Set();
-  private actionListeners: Set<TimelineActionListener> = new Set();
-  timestamp: number = 0;
-  lastAnimFrameNow: DOMHighResTimeStamp = 0;
-  lastAnimFrameTimestamp: MillisecondTimestamp;
-  private scheduler: RenderScheduler;
-
-  direction: Direction.Backwards | Direction.Forwards = Direction.Forwards; // TODO: handle pausing here?
-
-  boundaryType: BoundaryType = BoundaryType.EntireTimeline;
-  cachedNextBoundary: MillisecondTimestamp;
-
-  constructor() {
-    const animFrame = (_now: MillisecondTimestamp): void => {
-      if (this.animating) {
-        const now = getNow(); // TODO: See if we can use the rAF value without monotonicity issues.;
-        this.timestamp =
-          this.timestamp +
-          this.tempoScale *
-            directionScalar(this.direction) *
-            (now - this.lastAnimFrameNow);
-        this.lastAnimFrameNow = now;
-
-        const atOrPastBoundary =
-          this.direction === Direction.Backwards
-            ? this.timestamp <= this.cachedNextBoundary
-            : this.timestamp >= this.cachedNextBoundary;
-        if (atOrPastBoundary) {
-          this.timestamp = this.cachedNextBoundary;
-          if (this.animating) {
-            this.animating = false;
-            this.dispatchAction(TimelineAction.Pausing);
-          }
-        }
-      }
-
-      if (this.timestamp !== this.lastAnimFrameTimestamp) {
-        this.dispatchTimestamp();
-        this.lastAnimFrameTimestamp = this.timestamp;
-      }
-
-      if (this.animating) {
-        this.scheduler.requestAnimFrame();
-      }
-    };
-    this.scheduler = new RenderScheduler(animFrame);
-  }
-
-  public addCursor(cursor: AlgCursor): void {
-    this.cursors.add(cursor);
-    this.dispatchTimeRange();
-  }
-
-  removeCursor(cursor: AlgCursor): void {
-    this.cursors.delete(cursor);
-    this.clampTimestampToRange();
-    this.dispatchTimeRange();
-  }
-
-  // TODO: test
-  private clampTimestampToRange(): void {
-    const timeRange = this.timeRange();
-    if (this.timestamp < timeRange.start) {
-      this.setTimestamp(timeRange.start);
-    }
-    if (this.timestamp > timeRange.end) {
-      this.setTimestamp(timeRange.end);
-    }
-  }
-
-  // In the future, this might do some calculations or caching.
-  public onCursorChange(_cursor: AlgCursor): void {
-    if (this.timestamp > this.maxTimestamp()) {
-      this.timestamp = this.maxTimestamp();
-    }
-    this.dispatchTimeRange();
-  }
-
-  timeRange(): TimeRange {
-    let start = 0;
-    let end = 0;
-    for (const cursor of this.cursors) {
-      const cursorTimeRange = cursor.timeRange();
-      start = Math.min(start, cursorTimeRange.start);
-      end = Math.max(end, cursorTimeRange.end);
-    }
-
-    return { start, end };
-  }
-
-  minTimestamp(): number {
-    // TODO: Calculate and cache this value every time there's a new cursor.
-    return this.timeRange().start;
-  }
-
-  maxTimestamp(): number {
-    // TODO: Calculate and cache this value every time there's a new cursor.
-    return this.timeRange().end;
-  }
-
-  private dispatchTimeRange(): void {
-    const timeRange = this.timeRange();
-    for (const listener of this.cursors) {
-      // TODO: dedup in case the timestamp hasn't changed sine last time.
-      listener.onTimeRangeChange(timeRange);
-    }
-    // TODO: Combine loops without extra memory?
-    for (const listener of this.timestampListeners) {
-      // TODO: dedup in case the timestamp hasn't changed sine last time.
-      listener.onTimeRangeChange(timeRange);
-    }
-  }
-
-  private dispatchTimestamp(): void {
-    for (const listener of this.cursors) {
-      // TODO: dedup in case the timestamp hasn't changed sine last time.
-      listener.onTimelineTimestampChange(this.timestamp);
-    }
-    // TODO: Combine loops without extra memory?
-    for (const listener of this.timestampListeners) {
-      // TODO: dedup in case the timestamp hasn't changed sine last time.
-      listener.onTimelineTimestampChange(this.timestamp);
-    }
-  }
-
-  addTimestampListener(timestampListener: TimelineTimestampListener): void {
-    this.timestampListeners.add(timestampListener);
-  }
-
-  removeTimestampListener(timestampListener: TimelineTimestampListener): void {
-    this.timestampListeners.delete(timestampListener);
-  }
-
-  addActionListener(actionListener: TimelineActionListener): void {
-    this.actionListeners.add(actionListener);
-  }
-
-  removeActionListener(actionListener: TimelineActionListener): void {
-    this.actionListeners.delete(actionListener);
-  }
-
-  play(): void {
-    this.experimentalPlay(Direction.Forwards, BoundaryType.EntireTimeline);
-  }
-
-  experimentalPlay(
-    direction: Direction.Backwards | Direction.Forwards,
-    boundaryType: BoundaryType = BoundaryType.EntireTimeline,
-  ): void {
-    this.direction = direction;
-    this.boundaryType = boundaryType;
-    const nextBoundary = this.nextBoundary(
-      this.timestamp,
-      direction,
-      this.boundaryType,
-    );
-    if (nextBoundary === null) {
-      return; // Nowhere to end, so we don't animate.
-    }
-    this.cachedNextBoundary = nextBoundary;
-    if (!this.animating) {
-      this.animating = true;
-      this.lastAnimFrameNow = getNow();
-      this.dispatchAction(TimelineAction.StartingToPlay);
-      this.scheduler.requestAnimFrame();
-    }
-  }
-
-  // Non-inclusive
-  private nextBoundary(
-    timestamp: MillisecondTimestamp,
-    direction: Direction.Backwards | Direction.Forwards,
-    boundaryType: BoundaryType = BoundaryType.EntireTimeline,
-  ): MillisecondTimestamp | null {
-    switch (boundaryType) {
-      case BoundaryType.EntireTimeline: {
-        switch (direction) {
-          case Direction.Backwards:
-            return timestamp <= this.minTimestamp()
-              ? null
-              : this.minTimestamp();
-          case Direction.Forwards:
-            return timestamp >= this.maxTimestamp()
-              ? null
-              : this.maxTimestamp();
-          default:
-            throw new Error("invalid direction");
-        }
-      }
-      case BoundaryType.Move: {
-        let result: null | MillisecondTimestamp = null;
-        for (const cursor of this.cursors) {
-          const boundaryTimestamp = cursor.moveBoundary(timestamp, direction);
-          if (boundaryTimestamp !== null) {
-            switch (direction) {
-              case Direction.Backwards: {
-                result = Math.min(
-                  result ?? boundaryTimestamp,
-                  boundaryTimestamp,
-                );
-                break;
-              }
-              case Direction.Forwards: {
-                result = Math.max(
-                  result ?? boundaryTimestamp,
-                  boundaryTimestamp,
-                );
-                break;
-              }
-              default:
-                throw new Error("invalid direction");
-            }
-          }
-        }
-        return result;
-      }
-      default:
-        throw new Error("invalid boundary type");
-    }
-  }
-
-  // One more render may be dispatched after this.
-  pause(): void {
-    // TODO: error if already paused?
-    if (this.animating) {
-      this.animating = false;
-      this.dispatchAction(TimelineAction.Pausing);
-      this.scheduler.requestAnimFrame();
-    }
-  }
-
-  playPause(): void {
-    if (this.animating) {
-      this.pause();
-    } else {
-      if (this.timestamp >= this.maxTimestamp()) {
-        this.timestamp = 0;
-      }
-      this.experimentalPlay(Direction.Forwards, BoundaryType.EntireTimeline);
-    }
-  }
-
-  setTimestamp(timestamp: MillisecondTimestamp): void {
-    const oldTimestamp = this.timestamp;
-    this.timestamp = timestamp;
-    this.lastAnimFrameNow = getNow();
-
-    if (oldTimestamp !== timestamp) {
-      this.dispatchAction(TimelineAction.Jumping);
-      this.scheduler.requestAnimFrame();
-    }
-
-    if (PAUSE_ON_JUMP) {
-      this.animating = false;
-      this.dispatchAction(TimelineAction.Pausing);
-    }
-  }
-
-  jumpToStart(): void {
-    this.setTimestamp(this.minTimestamp());
-  }
-
-  jumpToEnd(): void {
-    this.setTimestamp(this.maxTimestamp());
-  }
-
-  /** @deprecated */
-  experimentalJumpToLastMove(): void {
-    let max: MillisecondTimestamp = 0;
-    for (const cursor of this.cursors) {
-      max = Math.max(
-        max,
-        cursor.experimentalTimestampForStartOfLastMove() ?? 0,
-      );
-    }
-    this.setTimestamp(max);
-  }
-
-  private dispatchAction(event: TimelineAction): void {
-    let locationType = TimestampLocationType.MiddleOfMove; // TODO
-    switch (this.timestamp) {
-      // TODO
-      case this.minTimestamp():
-        locationType = TimestampLocationType.StartOfTimeline;
-        break;
-      case this.maxTimestamp():
-        locationType = TimestampLocationType.EndOfTimeline;
-        break;
-    }
-
-    const actionEvent: TimelineActionEvent = {
-      action: event,
-      locationType,
-    };
-    for (const listener of this.actionListeners) {
-      listener.onTimelineAction(actionEvent);
-    }
-  }
-}

package/src/cubing/twisty/old/animation/cursor/AlgCursor.ts

@@ -1,252 +0,0 @@
-/* eslint-disable no-case-declarations */
-// TODO: private vs. public properties/methods.
-// TODO: optional construtor arguments for DOM elements
-// TODO: figure out what can be moved into a worker using OffscreenCanvas https://developers.google.com/web/updates/2018/08/offscreen-canvas
-
-/* eslint-disable @typescript-eslint/no-empty-interface */
-
-// start of imports
-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";
-import {
-  Direction,
-  directionScalar,
-  MillisecondTimestamp,
-  PuzzlePosition,
-} from "./CursorTypes";
-// end of imports
-
-// Model
-
-export interface PositionListener {
-  onPositionChange(position: PuzzlePosition): void;
-}
-
-export interface PositionDispatcher {
-  addPositionListener(positionListener: PositionListener): void;
-}
-
-export interface TimeRange {
-  start: MillisecondTimestamp;
-  end: MillisecondTimestamp;
-}
-
-export type IndexerConstructor = new (
-  puzzle: KPuzzleWrapper,
-  alg: Alg,
-) => AlgIndexer<KPuzzleWrapper>;
-
-export class AlgCursor
-  implements TimelineTimestampListener, PositionDispatcher
-{
-  private indexer: AlgIndexer<KPuzzleWrapper>;
-  private positionListeners: Set<PositionListener> = new Set(); // TODO: accessor instead of direct access
-  private ksolvePuzzle: KPuzzleWrapper;
-  private startState: Transformation;
-  private indexerConstructor: IndexerConstructor = TreeAlgIndexer;
-  constructor(
-    private timeline: Timeline,
-    private def: KPuzzleDefinition,
-    private alg: Alg,
-    startStateAlg?: Alg, // TODO: accept actual start state
-    indexerConstructor?: IndexerConstructor,
-  ) {
-    this.ksolvePuzzle = new KPuzzleWrapper(def);
-    if (indexerConstructor) {
-      this.indexerConstructor = indexerConstructor;
-    }
-    this.instantiateIndexer(alg);
-    this.startState = startStateAlg
-      ? this.algToState(startStateAlg)
-      : this.ksolvePuzzle.startState();
-    timeline.addTimestampListener(this);
-  }
-
-  setStartState(startState: Transformation): void {
-    this.startState = startState;
-    this.dispatchPositionForTimestamp(this.timeline.timestamp);
-  }
-
-  /** @deprecated */
-  public experimentalSetIndexer(indexerConstructor: IndexerConstructor): void {
-    this.indexerConstructor = indexerConstructor;
-    this.instantiateIndexer(this.alg);
-    this.timeline.onCursorChange(this);
-    this.dispatchPositionForTimestamp(this.timeline.timestamp);
-  }
-
-  private instantiateIndexer(alg: Alg): void {
-    this.indexer = new this.indexerConstructor(this.ksolvePuzzle, alg);
-  }
-
-  /** @deprecated */
-  algToState(s: Alg): Transformation {
-    const kpuzzle = new KPuzzle(this.def);
-    kpuzzle.applyAlg(s);
-    return this.ksolvePuzzle.combine(this.def.startPieces, kpuzzle.state);
-  }
-
-  timeRange(): TimeRange {
-    return {
-      start: 0,
-      end: this.indexer.algDuration(),
-    };
-  }
-
-  /** @deprecated */
-  experimentalTimestampForStartOfLastMove(): MillisecondTimestamp {
-    const numMoves = this.indexer.numAnimatedLeaves();
-    if (numMoves > 0) {
-      return this.indexer.indexToMoveStartTimestamp(numMoves - 1);
-    }
-    return 0;
-  }
-
-  addPositionListener(positionListener: PositionListener): void {
-    this.positionListeners.add(positionListener);
-    this.dispatchPositionForTimestamp(this.timeline.timestamp, [
-      positionListener,
-    ]); // TODO: should this be a separate dispatch, or should the listener manually ask for the position?
-  }
-
-  removePositionListener(positionListener: PositionListener): void {
-    this.positionListeners.delete(positionListener);
-  }
-
-  onTimelineTimestampChange(timestamp: MillisecondTimestamp): void {
-    this.dispatchPositionForTimestamp(timestamp);
-  }
-
-  private dispatchPositionForTimestamp(
-    timestamp: MillisecondTimestamp,
-    listeners: PositionListener[] | Set<PositionListener> = this
-      .positionListeners,
-  ): void {
-    let position: PuzzlePosition;
-    if (this.indexer.timestampToPosition) {
-      position = this.indexer.timestampToPosition(timestamp, this.startState);
-    } else {
-      const idx = this.indexer.timestampToIndex(timestamp);
-      const state = this.indexer.stateAtIndex(
-        idx,
-        this.startState,
-      ) as Transformation; // TODO
-      position = {
-        state,
-        movesInProgress: [],
-      };
-
-      if (this.indexer.numAnimatedLeaves() > 0) {
-        const move = this.indexer.getAnimLeaf(idx)?.as(Move);
-        if (!move) {
-          return; // TODO
-        }
-        const fraction =
-          (timestamp - this.indexer.indexToMoveStartTimestamp(idx)) /
-          this.indexer.moveDuration(idx);
-        if (fraction === 1) {
-          // TODO: push this into the indexer
-          position.state = this.ksolvePuzzle.combine(
-            state,
-            this.ksolvePuzzle.stateFromMove(move),
-          ) as Transformation;
-        } else if (fraction > 0) {
-          if (move) {
-            position.movesInProgress.push({
-              move,
-              direction: Direction.Forwards,
-              fraction,
-            });
-          }
-        }
-      }
-    }
-
-    for (const listener of listeners) {
-      listener.onPositionChange(position);
-    }
-  }
-
-  onTimeRangeChange(_timeRange: TimeRange): void {
-    // nothing to do
-  }
-
-  setAlg(alg: Alg, indexerConstructor?: IndexerConstructor): void {
-    indexerConstructor ??= this.indexerConstructor;
-    if (
-      alg.isIdentical(this.alg) &&
-      this.indexerConstructor === indexerConstructor
-    ) {
-      // TODO: this is a hacky optimization.
-      return;
-    }
-    this.indexerConstructor = indexerConstructor;
-    this.alg = alg;
-    this.instantiateIndexer(alg);
-    this.timeline.onCursorChange(this);
-    this.dispatchPositionForTimestamp(this.timeline.timestamp);
-    // TODO: Handle state change.
-  }
-
-  moveBoundary(
-    timestamp: MillisecondTimestamp,
-    direction: Direction.Backwards | Direction.Forwards,
-  ): MillisecondTimestamp | null {
-    if (this.indexer.numAnimatedLeaves() === 0) {
-      return null;
-    }
-    // TODO: define semantics of indexing edge cases and remove this hack.
-    const offsetHack = directionScalar(direction) * 0.001;
-    const idx = this.indexer.timestampToIndex(timestamp + offsetHack);
-    const moveStart = this.indexer.indexToMoveStartTimestamp(idx);
-
-    if (direction === Direction.Backwards) {
-      return timestamp >= moveStart ? moveStart : null;
-    } else {
-      const moveEnd = moveStart + this.indexer.moveDuration(idx);
-      return timestamp <= moveEnd ? moveEnd : null;
-    }
-  }
-
-  setPuzzle(
-    def: KPuzzleDefinition,
-    alg: Alg = this.alg,
-    startStateAlg?: Alg,
-  ): void {
-    this.ksolvePuzzle = new KPuzzleWrapper(def);
-    this.def = def;
-    this.indexer = new this.indexerConstructor(this.ksolvePuzzle, alg);
-    if (alg !== this.alg) {
-      this.timeline.onCursorChange(this);
-    }
-    this.setStartState(
-      startStateAlg
-        ? this.algToState(startStateAlg)
-        : this.ksolvePuzzle.startState(),
-    );
-    this.alg = alg;
-  }
-
-  /** @deprecated */
-  experimentalTimestampFromIndex(index: number): MillisecondTimestamp {
-    return this.indexer.indexToMoveStartTimestamp(index);
-  }
-
-  /** @deprecated */
-  experimentalIndexFromTimestamp(timestamp: MillisecondTimestamp): number {
-    return this.indexer.timestampToIndex(timestamp);
-  }
-
-  /** @deprecated */
-  experimentalLeafAtIndex(index: number): Move | Pause | null {
-    return this.indexer.getAnimLeaf(index);
-  }
-}

package/src/cubing/twisty/old/dom/TwistyAlgViewerV1.css.ts

@@ -1,25 +0,0 @@
-import { CSSSource } from "./element/ManagedCustomElement";
-
-export const twistyAlgViewerCSS = new CSSSource(`
-:host {
-  display: inline-grid;
-}
-
-a:not(:hover) {
-  color: inherit;
-  text-decoration: none;
-}
-
-twisty-alg-leaf-elem.twisty-alg-comment {
-  color: rgba(0, 0, 0, 0.4);
-}
-
-.wrapper.current-move {
-  background: rgba(66, 133, 244, 0.3);
-  margin-left: -0.1em;
-  margin-right: -0.1em;
-  padding-left: 0.1em;
-  padding-right: 0.1em;
-  border-radius: 0.1em;
-}
-`);