cubing 0.20.2 → 0.21.0-pre12

package/src/cubing/twisty/views/TwistyAlgEditor/model.ts

@@ -0,0 +1,179 @@
+// TODO: Move this?
+
+import type { Alg } from "../../../alg";
+import type { Parsed } from "../../../alg/parse";
+import {
+  AlgWithIssues,
+  algWithIssuesFromString,
+} from "../../model/props/puzzle/state/AlgProp";
+import {
+  SimpleTwistyPropSource,
+  TwistyPropDerived,
+  TwistyPropSource,
+} from "../../model/props/TwistyProp";
+import {
+  AnimatedLeafUnitInfo,
+  leafTokens,
+  OrderedLeafTokens,
+} from "./LeafTokens";
+
+export class TwistyAlgEditorValueProp extends SimpleTwistyPropSource<string> {
+  getDefaultValue(): string {
+    return "";
+  }
+}
+
+interface AlgEditorAlgWithIssuesPropInput {
+  value: string;
+}
+class AlgEditorAlgWithIssuesProp extends TwistyPropDerived<
+  AlgEditorAlgWithIssuesPropInput,
+  AlgWithIssues
+> {
+  derive(input: AlgEditorAlgWithIssuesPropInput): AlgWithIssues {
+    return algWithIssuesFromString(input.value);
+  }
+
+  // TODO: canReuse needs to take the source string into account.
+}
+
+interface SelectionInfoPropInput {
+  selectionStart: number;
+  selectionEnd: number;
+}
+interface SelectionInfo extends SelectionInfoPropInput {
+  endChangedMostRecently: boolean;
+}
+export class TwistyAlgEditorSelectionProp extends TwistyPropSource<
+  SelectionInfo,
+  SelectionInfoPropInput
+> {
+  getDefaultValue() {
+    return {
+      selectionStart: 0,
+      selectionEnd: 0,
+      endChangedMostRecently: false,
+    };
+  }
+
+  async derive(
+    input: SelectionInfoPropInput,
+    oldValue: Promise<SelectionInfo>,
+  ): Promise<SelectionInfo> {
+    const { selectionStart, selectionEnd } = input;
+    const lastResult = await oldValue;
+    const endChangedMostRecently =
+      input.selectionStart === lastResult.selectionStart &&
+      input.selectionEnd !== (await oldValue).selectionEnd;
+    return {
+      selectionStart,
+      selectionEnd,
+      endChangedMostRecently,
+    };
+  }
+}
+
+interface TargetCharPropInputs {
+  selectionInfo: SelectionInfo;
+}
+
+export class TargetCharProp extends TwistyPropDerived<
+  TargetCharPropInputs,
+  number
+> {
+  derive(inputs: TargetCharPropInputs) {
+    return inputs.selectionInfo.endChangedMostRecently
+      ? inputs.selectionInfo.selectionEnd
+      : inputs.selectionInfo.selectionStart;
+  }
+}
+
+interface LeafTokensPropInputs {
+  algWithIssues: AlgWithIssues;
+}
+class LeafTokensProp extends TwistyPropDerived<
+  LeafTokensPropInputs,
+  OrderedLeafTokens
+> {
+  derive(inputs: LeafTokensPropInputs): OrderedLeafTokens {
+    return leafTokens(inputs.algWithIssues.alg as Parsed<Alg>, {
+      numMovesSofar: 0,
+    }).tokens;
+  }
+}
+
+interface LeafToHighlightPropInputs {
+  targetChar: number;
+  leafTokens: OrderedLeafTokens;
+}
+type HighlightWhere = "before" | "start" | "inside" | "end" | "after";
+export interface HighlightInfo {
+  leafInfo: AnimatedLeafUnitInfo;
+  where: HighlightWhere;
+}
+class LeafToHighlightProp extends TwistyPropDerived<
+  LeafToHighlightPropInputs,
+  HighlightInfo | null
+> {
+  derive(inputs: LeafToHighlightPropInputs): HighlightInfo | null {
+    function withWhere(
+      leafInfo: AnimatedLeafUnitInfo | null,
+    ): HighlightInfo | null {
+      if (leafInfo === null) {
+        return null;
+      }
+      let where: HighlightWhere;
+      if (inputs.targetChar < leafInfo.leaf.startCharIndex) {
+        where = "before";
+      } else if (inputs.targetChar === leafInfo.leaf.startCharIndex) {
+        where = "start";
+      } else if (inputs.targetChar < leafInfo.leaf.endCharIndex) {
+        where = "inside";
+      } else if (inputs.targetChar === leafInfo.leaf.endCharIndex) {
+        where = "end";
+      } else {
+        where = "after";
+      }
+      return {
+        leafInfo,
+        where,
+      };
+    }
+
+    let lastLeafInfo: AnimatedLeafUnitInfo | null = null;
+    // TODO: binary search
+    for (const leafInfo of inputs.leafTokens) {
+      if (
+        inputs.targetChar < leafInfo.leaf.startCharIndex &&
+        lastLeafInfo !== null
+      ) {
+        return withWhere(lastLeafInfo);
+      }
+      if (inputs.targetChar <= leafInfo.leaf.endCharIndex) {
+        return withWhere(leafInfo);
+      }
+      lastLeafInfo = leafInfo;
+    }
+
+    return withWhere(lastLeafInfo);
+  }
+}
+
+export class TwistyAlgEditorModel {
+  valueProp = new TwistyAlgEditorValueProp();
+  selectionProp = new TwistyAlgEditorSelectionProp();
+  targetCharProp = new TargetCharProp({ selectionInfo: this.selectionProp });
+
+  algEditorAlgWithIssues = new AlgEditorAlgWithIssuesProp({
+    value: this.valueProp,
+  });
+
+  leafTokensProp = new LeafTokensProp({
+    algWithIssues: this.algEditorAlgWithIssues,
+  });
+
+  leafToHighlight = new LeafToHighlightProp({
+    leafTokens: this.leafTokensProp,
+    targetChar: this.targetCharProp,
+  });
+}

package/src/cubing/twisty/views/TwistyAlgViewer.css.ts

@@ -0,0 +1,25 @@
+import { CSSSource } from "../old/dom/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;
+}
+`);

package/src/cubing/twisty/views/TwistyAlgViewer.ts

@@ -0,0 +1,502 @@
+import {
+  Alg,
+  Commutator,
+  Conjugate,
+  experimentalDirect,
+  ExperimentalIterationDirection,
+  Grouping,
+  LineComment,
+  Move,
+  Newline,
+  Pause,
+  TraversalDownUp,
+  Unit,
+} from "../../alg";
+import type { Parsed } from "../../alg/parse";
+import type { AlgWithIssues } from "../model/props/puzzle/state/AlgProp";
+import type { DetailedTimelineInfo } from "../model/props/timeline/DetailedTimelineInfoProp";
+import type { MillisecondTimestamp } from "../old/animation/cursor/CursorTypes";
+import type { CurrentMoveInfo } from "../old/animation/indexer/AlgIndexer";
+import { ManagedCustomElement } from "../old/dom/element/ManagedCustomElement";
+import {
+  customElementsShim,
+  HTMLElementShim,
+} from "../old/dom/element/node-custom-element-shims";
+import { twistyAlgViewerCSS } from "./TwistyAlgViewer.css";
+import { TwistyPlayer } from "./TwistyPlayer";
+
+const DEFAULT_OFFSET_MS = 250; // TODO: make this a fraction?
+
+class DataDown {
+  earliestMoveIndex: number;
+  twistyAlgViewer: TwistyAlgViewer;
+  direction: ExperimentalIterationDirection;
+}
+
+class DataUp {
+  moveCount: number;
+  element: TwistyAlgWrapperElem | TwistyAlgLeafElem;
+}
+
+class TwistyAlgLeafElem extends ManagedCustomElement {
+  constructor(
+    className: string,
+    text: string,
+    dataDown: DataDown,
+    public algOrUnit: Alg | Unit,
+    offsetIntoMove: boolean,
+    clickable: boolean,
+  ) {
+    super({ mode: "open" });
+    this.classList.add(className);
+
+    this.addCSS(twistyAlgViewerCSS);
+    if (clickable) {
+      const anchor = this.contentWrapper.appendChild(
+        document.createElement("a"),
+      );
+      anchor.href = "#";
+      anchor.textContent = text;
+
+      anchor.addEventListener("click", (e) => {
+        e.preventDefault();
+        dataDown.twistyAlgViewer.jumpToIndex(
+          dataDown.earliestMoveIndex,
+          offsetIntoMove,
+        );
+      });
+    } else {
+      this.contentWrapper.appendChild(
+        document.createElement("span"),
+      ).textContent = text;
+    }
+  }
+
+  pathToIndex(_index: number): (TwistyAlgWrapperElem | TwistyAlgLeafElem)[] {
+    return [];
+  }
+
+  setCurrentMove(current: boolean) {
+    this.contentWrapper.classList.toggle("current-move", current);
+  }
+}
+
+customElementsShim.define("twisty-alg-leaf-elem", TwistyAlgLeafElem);
+
+class TwistyAlgWrapperElem extends HTMLElementShim {
+  private queue: (Element | Text)[] = [];
+
+  constructor(className: string, public algOrUnit: Alg | Unit) {
+    super();
+    this.classList.add(className);
+  }
+
+  addString(str: string) {
+    this.queue.push(document.createTextNode(str));
+  }
+
+  addElem(dataUp: DataUp): number {
+    this.queue.push(dataUp.element);
+    return dataUp.moveCount;
+  }
+
+  flushQueue(
+    direction: ExperimentalIterationDirection = ExperimentalIterationDirection.Forwards,
+  ): void {
+    for (const node of maybeReverseList(this.queue, direction)) {
+      this.append(node);
+    }
+    this.queue = [];
+  }
+
+  pathToIndex(_index: number): (TwistyAlgWrapperElem | TwistyAlgLeafElem)[] {
+    return [];
+  }
+}
+
+customElementsShim.define("twisty-alg-wrapper-elem", TwistyAlgWrapperElem);
+
+function oppositeDirection(
+  direction: ExperimentalIterationDirection,
+): ExperimentalIterationDirection {
+  return direction === ExperimentalIterationDirection.Forwards
+    ? ExperimentalIterationDirection.Backwards
+    : ExperimentalIterationDirection.Forwards;
+}
+
+function updateDirectionByAmount(
+  currentDirection: ExperimentalIterationDirection,
+  amount: number,
+): ExperimentalIterationDirection {
+  return amount < 0 ? oppositeDirection(currentDirection) : currentDirection;
+}
+
+function maybeReverseList<T>(
+  l: T[],
+  direction: ExperimentalIterationDirection,
+): T[] {
+  if (direction === ExperimentalIterationDirection.Forwards) {
+    return l;
+  }
+  // console.log("rev", Array.from(l).reverse());
+  // return Array.from(l).reverse();
+  const copy = Array.from(l);
+  copy.reverse();
+  return copy;
+}
+
+class AlgToDOMTree extends TraversalDownUp<DataDown, DataUp, DataUp> {
+  public traverseAlg(alg: Alg, dataDown: DataDown): DataUp {
+    let moveCount = 0;
+    const element = new TwistyAlgWrapperElem("twisty-alg-alg", alg); // TODO: pick a better class name.
+    let first = true;
+    for (const unit of experimentalDirect(alg.units(), dataDown.direction)) {
+      if (!first) {
+        element.addString(" ");
+      }
+      first = false;
+      moveCount += element.addElem(
+        this.traverseUnit(unit, {
+          earliestMoveIndex: dataDown.earliestMoveIndex + moveCount,
+          twistyAlgViewer: dataDown.twistyAlgViewer,
+          direction: dataDown.direction,
+        }),
+      );
+    }
+    element.flushQueue(dataDown.direction);
+    return {
+      moveCount: moveCount,
+      element,
+    };
+  }
+
+  public traverseGrouping(grouping: Grouping, dataDown: DataDown): DataUp {
+    const square1Tuple = grouping.experimentalAsSquare1Tuple();
+    // if (square1Tuplle) {
+
+    // }
+
+    const direction = updateDirectionByAmount(
+      dataDown.direction,
+      grouping.amount,
+    );
+    let moveCount = 0;
+    const element = new TwistyAlgWrapperElem("twisty-alg-grouping", grouping);
+    element.addString("(");
+
+    if (square1Tuple) {
+      moveCount += element.addElem({
+        moveCount: 1,
+        element: new TwistyAlgLeafElem(
+          "twisty-alg-move", // TODO: Mark the tuple with a special class?
+          square1Tuple[0].amount.toString(),
+          dataDown,
+          square1Tuple[0],
+          true,
+          true,
+        ),
+      });
+      element.addString(", ");
+      moveCount += element.addElem({
+        moveCount: 1,
+        element: new TwistyAlgLeafElem(
+          "twisty-alg-move", // TODO: Mark the tuple with a special class?
+          square1Tuple[1].amount.toString(),
+          dataDown,
+          square1Tuple[1],
+          true,
+          true,
+        ),
+      });
+    } else {
+      moveCount += element.addElem(
+        this.traverseAlg(grouping.alg, {
+          earliestMoveIndex: dataDown.earliestMoveIndex + moveCount,
+          twistyAlgViewer: dataDown.twistyAlgViewer,
+          direction,
+        }),
+      );
+    }
+
+    element.addString(")" + grouping.experimentalRepetitionSuffix);
+    element.flushQueue();
+    return {
+      moveCount: moveCount * Math.abs(grouping.amount),
+      element,
+    };
+  }
+
+  public traverseMove(move: Move, dataDown: DataDown): DataUp {
+    const element = new TwistyAlgLeafElem(
+      "twisty-alg-move",
+      move.toString(),
+      dataDown,
+      move,
+      true,
+      true,
+    );
+    dataDown.twistyAlgViewer.highlighter.addMove(
+      (move as Parsed<Move>).startCharIndex,
+      element,
+    );
+    return {
+      moveCount: 1,
+      element,
+    };
+  }
+
+  public traverseCommutator(
+    commutator: Commutator,
+    dataDown: DataDown,
+  ): DataUp {
+    let moveCount = 0;
+    const element = new TwistyAlgWrapperElem(
+      "twisty-alg-commutator",
+      commutator,
+    );
+    element.addString("[");
+    element.flushQueue();
+    const [first, second]: Alg[] = maybeReverseList(
+      [commutator.A, commutator.B],
+      dataDown.direction,
+    );
+    moveCount += element.addElem(
+      this.traverseAlg(first, {
+        earliestMoveIndex: dataDown.earliestMoveIndex + moveCount,
+        twistyAlgViewer: dataDown.twistyAlgViewer,
+        direction: dataDown.direction,
+      }),
+    );
+    element.addString(", ");
+    moveCount += element.addElem(
+      this.traverseAlg(second, {
+        earliestMoveIndex: dataDown.earliestMoveIndex + moveCount,
+        twistyAlgViewer: dataDown.twistyAlgViewer,
+        direction: dataDown.direction,
+      }),
+    );
+    element.flushQueue(dataDown.direction);
+    element.addString("]");
+    element.flushQueue();
+    return {
+      moveCount: moveCount * 2,
+      element,
+    };
+  }
+
+  public traverseConjugate(conjugate: Conjugate, dataDown: DataDown): DataUp {
+    let moveCount = 0;
+    const element = new TwistyAlgWrapperElem("twisty-alg-conjugate", conjugate);
+    element.addString("[");
+    const aLen = element.addElem(
+      this.traverseAlg(conjugate.A, {
+        earliestMoveIndex: dataDown.earliestMoveIndex + moveCount,
+        twistyAlgViewer: dataDown.twistyAlgViewer,
+        direction: dataDown.direction,
+      }),
+    );
+    moveCount += aLen;
+    element.addString(": ");
+    moveCount += element.addElem(
+      this.traverseAlg(conjugate.B, {
+        earliestMoveIndex: dataDown.earliestMoveIndex + moveCount,
+        twistyAlgViewer: dataDown.twistyAlgViewer,
+        direction: dataDown.direction,
+      }),
+    );
+    element.addString("]");
+    element.flushQueue();
+    return {
+      moveCount: moveCount + aLen,
+      element,
+    };
+  }
+
+  public traversePause(pause: Pause, dataDown: DataDown): DataUp {
+    return {
+      moveCount: 1,
+      element: new TwistyAlgLeafElem(
+        "twisty-alg-pause",
+        ".",
+        dataDown,
+        pause,
+        true,
+        true,
+      ),
+    };
+  }
+
+  public traverseNewline(newline: Newline, _dataDown: DataDown): DataUp {
+    const element = new TwistyAlgWrapperElem("twisty-alg-newline", newline);
+    element.append(document.createElement("br"));
+    return {
+      moveCount: 0,
+      element,
+    };
+  }
+
+  public traverseLineComment(
+    lineComment: LineComment,
+    dataDown: DataDown,
+  ): DataUp {
+    return {
+      moveCount: 0,
+      element: new TwistyAlgLeafElem(
+        "twisty-alg-line-comment",
+        `//${lineComment.text}`,
+        dataDown,
+        lineComment,
+        false,
+        false,
+      ),
+    };
+  }
+}
+
+const algToDOMTreeInstance = new AlgToDOMTree();
+const algToDOMTree = algToDOMTreeInstance.traverseAlg.bind(
+  algToDOMTreeInstance,
+) as (alg: Alg, dataDown: DataDown) => DataUp;
+
+class MoveHighlighter {
+  moveCharIndexMap: Map<number, TwistyAlgLeafElem> = new Map();
+  currentElem: TwistyAlgLeafElem | null = null;
+
+  addMove(charIndex: number, elem: TwistyAlgLeafElem): void {
+    this.moveCharIndexMap.set(charIndex, elem);
+  }
+
+  set(move: Parsed<Move> | null): void {
+    const newElem = move
+      ? this.moveCharIndexMap.get(move.startCharIndex) ?? null
+      : null;
+    if (this.currentElem === newElem) {
+      return;
+    }
+    this.currentElem?.classList.remove("twisty-alg-current-move");
+    this.currentElem?.setCurrentMove(false);
+    newElem?.classList.add("twisty-alg-current-move");
+    newElem?.setCurrentMove(true);
+    this.currentElem = newElem;
+  }
+}
+
+export class TwistyAlgViewer extends HTMLElementShim {
+  highlighter: MoveHighlighter = new MoveHighlighter();
+  #domTree: TwistyAlgWrapperElem | TwistyAlgLeafElem;
+  twistyPlayer: TwistyPlayer | null = null;
+  lastClickTimestamp: number | null = null;
+  constructor(options?: { twistyPlayer?: TwistyPlayer }) {
+    super();
+    if (options?.twistyPlayer) {
+      this.setTwistyPlayer(options?.twistyPlayer);
+    }
+  }
+
+  protected connectedCallback(): void {
+    // nothing to do?
+  }
+
+  private setAlg(alg: Alg): void {
+    this.#domTree = algToDOMTree(alg, {
+      earliestMoveIndex: 0,
+      twistyAlgViewer: this,
+      direction: ExperimentalIterationDirection.Forwards,
+    }).element;
+    this.textContent = "";
+    this.appendChild(this.#domTree);
+  }
+
+  async setTwistyPlayer(twistyPlayer: TwistyPlayer): Promise<void> {
+    if (this.twistyPlayer) {
+      console.warn("twisty-player reassignment is not supported");
+      return;
+    }
+    this.twistyPlayer = twistyPlayer;
+
+    this.twistyPlayer.experimentalModel.algProp.addFreshListener(
+      (algWithIssues: AlgWithIssues) => {
+        this.setAlg(algWithIssues.alg);
+      },
+    );
+
+    const sourceAlg = (await this.twistyPlayer.experimentalModel.algProp.get())
+      .alg;
+    // TODO: Use proper architecture instead of a heuristic to ensure we have a parsed alg annotated with char indices.
+    const parsedAlg =
+      "startCharIndex" in (sourceAlg as Partial<Parsed<Alg>>)
+        ? sourceAlg
+        : Alg.fromString(sourceAlg.toString());
+    this.setAlg(parsedAlg);
+
+    twistyPlayer.experimentalModel.currentLeavesProp.addFreshListener(
+      (currentMoveInfo: CurrentMoveInfo) => {
+        let moveInfo = currentMoveInfo.currentMoves[0];
+        moveInfo ??= currentMoveInfo.movesStarting[0];
+        moveInfo ??= currentMoveInfo.movesFinishing[0];
+        if (!moveInfo) {
+          this.highlighter.set(null);
+        } else {
+          const mainCurrentMove = moveInfo.move; // TODO
+          this.highlighter.set(mainCurrentMove as Parsed<Move>);
+        }
+      },
+    );
+
+    twistyPlayer.experimentalModel.detailedTimelineInfoProp.addFreshListener(
+      (detailedTimelineInfo: DetailedTimelineInfo) => {
+        if (detailedTimelineInfo.timestamp !== this.lastClickTimestamp) {
+          this.lastClickTimestamp = null;
+        }
+      },
+    );
+  }
+
+  async jumpToIndex(index: number, offsetIntoMove: boolean): Promise<void> {
+    // TODO: Fix async issues.
+    const twistyPlayer = this.twistyPlayer;
+    if (twistyPlayer) {
+      twistyPlayer.pause();
+      const timestampPromise = (async (): Promise<MillisecondTimestamp> => {
+        const indexer = await twistyPlayer.experimentalModel.indexerProp.get();
+        const offset = offsetIntoMove ? DEFAULT_OFFSET_MS : 0;
+        return (indexer.indexToMoveStartTimestamp(index) ?? -offset) + offset;
+      })();
+      twistyPlayer.experimentalModel.timestampRequestProp.set(
+        await timestampPromise, // TODO
+      );
+      if (this.lastClickTimestamp === (await timestampPromise)) {
+        twistyPlayer.play();
+        this.lastClickTimestamp = null;
+      } else {
+        this.lastClickTimestamp = await timestampPromise;
+      }
+    }
+  }
+
+  protected async attributeChangedCallback(
+    attributeName: string,
+    _oldValue: string,
+    newValue: string,
+  ): Promise<void> {
+    if (attributeName === "for") {
+      const elem = document.getElementById(newValue);
+      if (!elem) {
+        console.warn("for= elem does not exist");
+        return;
+      }
+      await customElements.whenDefined("twisty-player");
+      if (!(elem instanceof TwistyPlayer)) {
+        console.warn("for= elem is not a twisty-player");
+        return;
+      }
+      this.setTwistyPlayer(elem);
+    }
+  }
+
+  static get observedAttributes(): string[] {
+    return ["for"];
+  }
+}
+
+customElementsShim.define("twisty-alg-viewer", TwistyAlgViewer);