cubing 0.21.2 → 0.23.0

package/src/cubing/twisty/old/dom/controls/buttons.ts

@@ -1,326 +0,0 @@
-import type { TimeRange } from "../../animation/cursor/AlgCursor";
-import {
-  BoundaryType,
-  Direction,
-  MillisecondTimestamp,
-} from "../../animation/cursor/CursorTypes";
-import {
-  Timeline,
-  TimelineAction,
-  TimelineActionEvent,
-  TimestampLocationType,
-} from "../../animation/Timeline";
-import { ClassListManager } from "../element/ClassListManager";
-import { ManagedCustomElement } from "../element/ManagedCustomElement";
-import { customElementsShim } from "../element/node-custom-element-shims";
-import type { ViewerLinkPage } from "../TwistyPlayerConfig";
-import { buttonCSS, buttonGridCSS } from "./buttons.css";
-import type { TwistyControlElement } from "./TwistyControlElement";
-
-type TimelineCommand =
-  | "fullscreen"
-  | "jump-to-start"
-  | "play-pause" // TODO: toggle-play?
-  // | "play"
-  // | "play-backwards"
-  | "play-step-backwards"
-  | "play-step"
-  | "jump-to-end"
-  | "twizzle-link";
-
-// TODO: combine this with disabled status and label in a state machine?
-type ButtonIconName =
-  | "skip-to-start"
-  | "skip-to-end"
-  | "step-forward"
-  | "step-backward"
-  | "pause"
-  | "play"
-  | "enter-fullscreen"
-  | "exit-fullscreen"
-  | "twizzle-tw";
-
-export class TwistyControlButton
-  extends ManagedCustomElement
-  implements TwistyControlElement
-{
-  private timeline: Timeline;
-  private timelineCommand: TimelineCommand;
-  private currentIconName: string | null = null;
-  protected button: HTMLButtonElement = document.createElement("button");
-  private fullscreenElement: Element | null = null;
-  private visitTwizzleLinkCallback: (() => void) | null = null;
-  constructor(
-    timeline?: Timeline,
-    timelineCommand?: TimelineCommand,
-    options?: {
-      fullscreenElement?: Element; // TODO: reflect as an element attribute?
-      visitTwizzleLinkCallback?: () => void;
-    },
-  ) {
-    super();
-
-    this.fullscreenElement = options?.fullscreenElement ?? null;
-    this.visitTwizzleLinkCallback = options?.visitTwizzleLinkCallback ?? null;
-
-    if (!timeline) {
-      console.warn("Must have timeline!"); // TODO
-    }
-    this.timeline = timeline!;
-    if (!timelineCommand) {
-      console.warn("Must have timelineCommand!"); // TODO
-    }
-    this.timelineCommand = timelineCommand!;
-
-    this.addCSS(buttonCSS);
-    this.setIcon(this.initialIcon());
-    this.setHoverTitle(this.initialHoverTitle());
-    this.addElement(this.button);
-    this.addEventListener("click", this.onPress.bind(this));
-
-    switch (this.timelineCommand) {
-      case "fullscreen":
-        if (!document.fullscreenEnabled) {
-          this.button.disabled = true;
-        }
-        break;
-      case "jump-to-start":
-      case "play-step-backwards":
-        this.button.disabled = true;
-        break;
-    }
-
-    if (this.timeline) {
-      // TODO
-      this.timeline.addActionListener(this);
-      switch (this.timelineCommand) {
-        case "play-pause":
-        case "play-step-backwards":
-        case "play-step":
-          this.timeline.addTimestampListener(this);
-          break;
-      }
-
-      this.autoSetTimelineBasedDisabled();
-    }
-  }
-
-  // TODO: Can we avoid duplicate calculations?
-  private autoSetTimelineBasedDisabled(): void {
-    switch (this.timelineCommand) {
-      case "jump-to-start":
-      case "play-pause":
-      case "play-step-backwards":
-      case "play-step":
-      case "jump-to-end": {
-        const timeRange = this.timeline.timeRange();
-        if (timeRange.start === timeRange.end) {
-          this.button.disabled = true;
-          return;
-        }
-        switch (this.timelineCommand) {
-          case "jump-to-start":
-          case "play-step-backwards":
-            this.button.disabled =
-              this.timeline.timestamp < this.timeline.maxTimestamp();
-            break;
-          case "jump-to-end":
-          case "play-step":
-            this.button.disabled =
-              this.timeline.timestamp > this.timeline.minTimestamp();
-            break;
-          default:
-            this.button.disabled = false;
-        }
-        break;
-      }
-    }
-  }
-
-  setIcon(buttonIconName: ButtonIconName): void {
-    if (this.currentIconName === buttonIconName) {
-      return;
-    }
-    if (this.currentIconName) {
-      this.button.classList.remove(`svg-${this.currentIconName}`);
-    }
-    this.button.classList.add(`svg-${buttonIconName}`);
-    this.currentIconName = buttonIconName;
-  }
-
-  private initialIcon(): ButtonIconName {
-    const map: Record<TimelineCommand, ButtonIconName> = {
-      "jump-to-start": "skip-to-start",
-      "play-pause": "play",
-      "play-step": "step-forward",
-      "play-step-backwards": "step-backward",
-      "jump-to-end": "skip-to-end",
-      "fullscreen": "enter-fullscreen",
-      "twizzle-link": "twizzle-tw",
-    };
-    return map[this.timelineCommand];
-  }
-
-  private initialHoverTitle(): string {
-    const map: Record<TimelineCommand, string> = {
-      "jump-to-start": "Restart",
-      "play-pause": "Play",
-      "play-step": "Step forward",
-      "play-step-backwards": "Step backward",
-      "jump-to-end": "Skip to End",
-      "fullscreen": "Enter fullscreen",
-      "twizzle-link": "View at Twizzle",
-    };
-    return map[this.timelineCommand];
-  }
-
-  private setHoverTitle(title: string): void {
-    this.button.title = title;
-  }
-
-  onPress(): void {
-    switch (this.timelineCommand) {
-      case "fullscreen":
-        if (document.fullscreenElement === this.fullscreenElement) {
-          document.exitFullscreen();
-          // this.setIcon("enter-fullscreen");
-        } else {
-          this.setIcon("exit-fullscreen");
-          this.fullscreenElement!.requestFullscreen().then(() => {
-            const onFullscreen = (): void => {
-              if (document.fullscreenElement !== this.fullscreenElement) {
-                this.setIcon("enter-fullscreen");
-                window.removeEventListener("fullscreenchange", onFullscreen);
-              }
-            };
-            window.addEventListener("fullscreenchange", onFullscreen);
-          });
-        }
-        break;
-      case "jump-to-start":
-        this.timeline.setTimestamp(0);
-        break;
-      case "jump-to-end":
-        this.timeline.jumpToEnd();
-        break;
-      case "play-pause":
-        this.timeline.playPause();
-        break;
-      case "play-step":
-        this.timeline.experimentalPlay(Direction.Forwards, BoundaryType.Move);
-        break;
-      case "play-step-backwards":
-        this.timeline.experimentalPlay(Direction.Backwards, BoundaryType.Move);
-        break;
-      case "twizzle-link":
-        if (this.visitTwizzleLinkCallback) {
-          this.visitTwizzleLinkCallback();
-        }
-        break;
-    }
-  }
-
-  onTimelineAction(actionEvent: TimelineActionEvent): void {
-    switch (this.timelineCommand) {
-      case "jump-to-start":
-        // TODO: what if you're already playing?
-        this.button.disabled =
-          actionEvent.locationType === TimestampLocationType.StartOfTimeline &&
-          actionEvent.action !== TimelineAction.StartingToPlay;
-        break;
-      case "jump-to-end":
-        this.button.disabled =
-          actionEvent.locationType === TimestampLocationType.EndOfTimeline &&
-          actionEvent.action !== TimelineAction.StartingToPlay;
-        break;
-      case "play-pause":
-        // Always enabled, since we will jump to the start if needed.
-        switch (actionEvent.action) {
-          case TimelineAction.Pausing:
-            this.setIcon("play");
-            this.setHoverTitle("Play");
-            break;
-          case TimelineAction.StartingToPlay:
-            this.setIcon("pause");
-            this.setHoverTitle("Pause");
-            break;
-          // TODO: does jumping mean pause?
-        }
-        break;
-      case "play-step":
-        // TODO: refine this
-        this.button.disabled =
-          actionEvent.locationType === TimestampLocationType.EndOfTimeline &&
-          actionEvent.action !== TimelineAction.StartingToPlay;
-        break;
-      case "play-step-backwards":
-        // TODO: refine this
-        this.button.disabled =
-          actionEvent.locationType === TimestampLocationType.StartOfTimeline &&
-          actionEvent.action !== TimelineAction.StartingToPlay;
-        break;
-    }
-  }
-
-  onTimelineTimestampChange(_timestamp: MillisecondTimestamp): void {
-    // Nothing
-  }
-
-  onTimeRangeChange(_timeRange: TimeRange): void {
-    // TODO
-    this.autoSetTimelineBasedDisabled();
-  }
-}
-
-customElementsShim.define("twisty-control-button", TwistyControlButton);
-
-// <twisty-control-button-grid>
-// Usually a horizontal line.
-export class TwistyControlButtonPanel
-  extends ManagedCustomElement
-  implements TwistyControlElement
-{
-  #viewerLinkClassListManager: ClassListManager<ViewerLinkPage> =
-    new ClassListManager(this, "viewer-link-", ["none", "twizzle"]);
-
-  constructor(
-    timeline?: Timeline,
-    options?: {
-      fullscreenElement?: Element;
-      viewerLinkCallback?: () => void;
-      viewerLink?: ViewerLinkPage;
-    },
-  ) {
-    super();
-    this.addCSS(buttonGridCSS);
-
-    this.#viewerLinkClassListManager.setValue(options?.viewerLink ?? "none");
-
-    // this.addElement(new TwistyControlButton(timeline!, fullscreenElement!));
-    this.addElement(
-      new TwistyControlButton(timeline, "fullscreen", {
-        fullscreenElement: options?.fullscreenElement,
-      }),
-    );
-    this.addElement(new TwistyControlButton(timeline, "jump-to-start"));
-    this.addElement(new TwistyControlButton(timeline, "play-step-backwards"));
-    this.addElement(new TwistyControlButton(timeline, "play-pause"));
-    this.addElement(new TwistyControlButton(timeline, "play-step"));
-    this.addElement(new TwistyControlButton(timeline, "jump-to-end"));
-    this.addElement(
-      new TwistyControlButton(timeline, "twizzle-link", {
-        visitTwizzleLinkCallback: options?.viewerLinkCallback,
-      }),
-    ).classList.add("twizzle-link-button");
-    /*...*/
-  }
-
-  setViewerLink(viewerLink: ViewerLinkPage): void {
-    this.#viewerLinkClassListManager.setValue(viewerLink);
-  }
-}
-
-customElementsShim.define(
-  "twisty-control-button-panel",
-  TwistyControlButtonPanel,
-);

package/src/cubing/twisty/old/dom/element/ElementConfig.ts

@@ -1,180 +0,0 @@
-// // type ConfigAttributes = Record<string, any>;
-
-import { Alg } from "../../../../alg";
-
-export class AlgAttribute {
-  string: string;
-  value: Alg;
-  constructor(initialValue?: Alg | string) {
-    if (initialValue) {
-      if (typeof initialValue === "string") {
-        this.setString(initialValue);
-      } else {
-        this.setValue(initialValue);
-      }
-    } else {
-      this.setValue(this.defaultValue());
-    }
-  }
-
-  // Return value indicates if the attribute changed.
-  setString(str: string): boolean {
-    if (this.string === str) {
-      return false;
-    }
-    this.string = str;
-    this.value = this.toValue(str);
-    return true;
-  }
-
-  // Return value indicates if the attribute changed.
-  setValue(val: Alg): boolean {
-    const str = this.toString(val);
-    if (this.string === str) {
-      return false;
-    }
-    this.string = str;
-    this.value = val;
-    return true;
-  }
-
-  private defaultValue(): Alg {
-    return new Alg([]);
-  }
-
-  private toValue(s: string): Alg {
-    return Alg.fromString(s);
-  }
-
-  private toString(val: Alg): string {
-    return val.toString();
-  }
-}
-
-// TODO: subset of string rather than `extends`
-export class StringEnumAttribute<E extends string> {
-  string: string;
-  value: E;
-  valid: boolean;
-  constructor(private enumVal: { [key: string]: boolean }, initialValue?: E) {
-    this.setString(initialValue ?? this.defaultValue());
-  }
-
-  // Return value indicates if the attribute changed.
-  setString(str: string): boolean {
-    if (this.string === str) {
-      return false;
-    }
-    if (!(str in this.enumVal)) {
-      throw new Error(`Invalid string for attribute!: ${str}`);
-    }
-    this.string = str;
-    this.value = this.toValue(str);
-    return true;
-  }
-
-  // Return value indicates if the attribute changed.
-  setValue(val: string): boolean {
-    return this.setString(val);
-  }
-
-  private defaultValue(): string {
-    return Object.keys(this.enumVal)[0]; // TODO
-  }
-
-  private toValue(s: string): E {
-    return s as E;
-  }
-
-  // private toString(s: string): string {
-  //   return s;
-  // }
-}
-
-// TODO: subset of string rather than `extends`
-export class StringFakeEnumAttribute<E extends string> {
-  string: string;
-  value: E;
-  valid: boolean;
-  constructor(private validStrings: string[], initialValue?: E) {
-    this.setString(initialValue ?? this.defaultValue());
-  }
-
-  // Return value indicates if the attribute changed.
-  setString(str: string): boolean {
-    if (this.string === str) {
-      return false;
-    }
-    if (!this.validStrings.includes(str)) {
-      throw new Error(`Invalid string for attribute!: ${str}`);
-    }
-    this.string = str;
-    this.value = this.toValue(str);
-    return true;
-  }
-
-  // Return value indicates if the attribute changed.
-  setValue(val: string): boolean {
-    return this.setString(val);
-  }
-
-  private defaultValue(): string {
-    return this.validStrings[0];
-  }
-
-  private toValue(s: string): E {
-    return s as E;
-  }
-
-  // private toString(s: string): string {
-  //   return s;
-  // }
-}
-
-export class RangedFloatAttribute {
-  string: string;
-  value: number | null;
-  #defaultValue: number | null;
-  constructor(
-    defaultValue: number | null,
-    private minValue: number,
-    private maxValue: number,
-    initialValue?: number | null,
-  ) {
-    this.#defaultValue =
-      defaultValue === null ? null : this.#clampValue(defaultValue);
-    this.setValue(initialValue ?? this.defaultValue());
-  }
-
-  #clampValue(val: number) {
-    return Math.max(Math.min(val, this.maxValue), this.minValue);
-  }
-
-  // Return value indicates if the attribute changed.
-  setString(str: string): boolean {
-    return this.setValue(str === "" ? null : this.toValue(str)); // TODO: test empty string
-  }
-
-  // Return value indicates if the attribute changed.
-  setValue(val: number | null): boolean {
-    const str = this.toString(val);
-    if (this.string === str) {
-      return false;
-    }
-    this.string = str;
-    this.value = val;
-    return true;
-  }
-
-  private defaultValue(): number | null {
-    return this.#defaultValue;
-  }
-
-  private toValue(s: string): number | null {
-    return parseFloat(s);
-  }
-
-  private toString(v: number | null): string {
-    return v === null ? "" : v.toString();
-  }
-}

package/src/cubing/twisty/old/dom/viewers/Twisty2DSVG.ts

@@ -1,118 +0,0 @@
-import {
-  combineTransformations,
-  KPuzzleDefinition,
-  KPuzzleSVGWrapper,
-  transformationForMove,
-} from "../../../../kpuzzle";
-import type { PuzzleLoader } from "../../../../puzzles/PuzzleLoader";
-import type { PuzzleAppearance } from "../../../../puzzles/stickerings/appearance";
-import type {
-  PositionDispatcher,
-  PositionListener,
-} from "../../animation/cursor/AlgCursor";
-import { Direction, PuzzlePosition } from "../../animation/cursor/CursorTypes";
-import { RenderScheduler } from "../../animation/RenderScheduler";
-import { ManagedCustomElement } from "../element/ManagedCustomElement";
-import { customElementsShim } from "../element/node-custom-element-shims";
-import type { ExperimentalStickering } from "../TwistyPlayerConfig";
-import { twisty2DSVGCSS } from "./Twisty2DSVGView.css";
-import type { TwistyViewerElement } from "./TwistyViewerElement";
-
-export interface Twisty2DSVGOptions {
-  experimentalStickering?: ExperimentalStickering;
-}
-
-// <twisty-2d-svg>
-export class Twisty2DSVG
-  extends ManagedCustomElement
-  implements TwistyViewerElement, PositionListener
-{
-  private definition: KPuzzleDefinition;
-  private svg: KPuzzleSVGWrapper;
-  private scheduler = new RenderScheduler(this.render.bind(this));
-  #cachedPosition: PuzzlePosition | null = null; // TODO: pull when needed.
-  constructor(
-    cursor?: PositionDispatcher,
-    def?: KPuzzleDefinition,
-    private svgSource?: string,
-    private options?: Twisty2DSVGOptions,
-    private puzzleLoader?: PuzzleLoader,
-  ) {
-    super();
-    this.addCSS(twisty2DSVGCSS);
-
-    this.definition = def!;
-    this.resetSVG(); // TODO
-    cursor?.addPositionListener(this); // TODO
-
-    if (this.options?.experimentalStickering) {
-      this.experimentalSetStickering(this.options.experimentalStickering);
-    }
-  }
-
-  onPositionChange(position: PuzzlePosition): void {
-    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;
-    }
-  }
-
-  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-svg", Twisty2DSVG);