cubing 0.20.2 → 0.21.0-pre12

package/src/cubing/twisty/views/control-panel/TwistyScrubberV2.ts

@@ -0,0 +1,145 @@
+import { twistyScrubberCSS } from "../../old/dom/controls/TwistyScrubber.css";
+import { ManagedCustomElement } from "../../old/dom/element/ManagedCustomElement";
+import { customElementsShim } from "../../old/dom/element/node-custom-element-shims";
+import type { DetailedTimelineInfo } from "../../model/props/timeline/DetailedTimelineInfoProp";
+import type { TwistyPlayerModel } from "../../model/TwistyPlayerModel";
+import { globalSafeDocument } from "../document";
+
+const SLOW_DOWN_SCRUBBING = false;
+
+let isMouseDown = false;
+
+globalSafeDocument?.addEventListener(
+  "mousedown",
+  function (event) {
+    if (event.which) isMouseDown = true;
+  },
+  true,
+);
+
+globalSafeDocument?.addEventListener(
+  "mouseup",
+  function (event) {
+    if (event.which) isMouseDown = false;
+  },
+  true,
+);
+
+// var x = 0;
+let y = 0;
+let clickNum = 0;
+
+globalSafeDocument?.addEventListener(
+  "mousedown",
+  () => {
+    clickNum++;
+  },
+  false,
+);
+
+globalSafeDocument?.addEventListener("mousemove", onMouseUpdate, false);
+globalSafeDocument?.addEventListener("mouseenter", onMouseUpdate, false);
+
+function onMouseUpdate(e: MouseEvent) {
+  // x = e.pageX;
+  y = e.pageY;
+  // console.log(x, y);
+}
+
+const lastVal = 0;
+let lastPreval = 0;
+let scaling: boolean = false;
+let currentClickNum = 0;
+
+// Values are integers.
+export class TwistyScrubberV2 extends ManagedCustomElement {
+  constructor(public model?: TwistyPlayerModel) {
+    super();
+  }
+
+  async onDetailedTimelineInfo(
+    detailedTimelineInfo: DetailedTimelineInfo,
+  ): Promise<void> {
+    // TODO: is this efficient enough?
+    const inputElem = await this.inputElem();
+    inputElem.min = detailedTimelineInfo.timeRange.start.toString();
+    inputElem.max = detailedTimelineInfo.timeRange.end.toString();
+    inputElem.value = detailedTimelineInfo.timestamp.toString();
+  }
+
+  async connectedCallback(): Promise<void> {
+    this.addCSS(twistyScrubberCSS);
+    this.addElement(await this.inputElem());
+  }
+
+  #inputElem: Promise<HTMLInputElement> | null = null;
+  async inputElem(): Promise<HTMLInputElement> {
+    // console.log("inputElem", this.#inputElem);
+    return (this.#inputElem ??= (async () => {
+      const elem = document.createElement("input");
+      elem.type = "range";
+
+      // console.log("1");
+      this.model?.detailedTimelineInfoProp.addFreshListener(
+        this.onDetailedTimelineInfo.bind(this),
+      );
+      // console.log("3");
+      elem.addEventListener("input", this.onInput.bind(this));
+
+      return elem;
+    })());
+  }
+
+  async onInput(e: Event): Promise<void> {
+    if (scaling) {
+      return; // TODO
+    }
+    const inputElem = await this.inputElem();
+    await this.slowDown(e, inputElem); // TODO
+
+    const value = parseInt(inputElem.value);
+    // console.log("on input", value);
+    this.model?.playingInfoProp.set({ playing: false });
+    this.model?.timestampRequestProp.set(value);
+  }
+
+  async slowDown(e: Event, inputElem: HTMLInputElement): Promise<void> {
+    if (!SLOW_DOWN_SCRUBBING) {
+      return; // TODO
+    }
+
+    if (isMouseDown) {
+      const rect = inputElem.getBoundingClientRect();
+      const sliderY = rect.top + rect.height / 2;
+      console.log(sliderY, e, y, isMouseDown);
+
+      const yDist = Math.abs(sliderY - y);
+      let scale = 1;
+      if (yDist > 64) {
+        scale = Math.max(Math.pow(2, -(yDist - 64) / 64), 1 / 32);
+      }
+      const preVal = parseInt(inputElem.value);
+      console.log("cl", currentClickNum, clickNum, preVal);
+      if (currentClickNum === clickNum) {
+        const delta = (preVal - lastPreval) * scale;
+        console.log("delta", delta, yDist);
+        scaling = true;
+        let newVal = preVal;
+        newVal =
+          lastVal +
+          delta * scale +
+          (preVal - lastVal) *
+            Math.min(1, Math.pow(1 / 2, (yDist * yDist) / 64));
+        inputElem.value = newVal.toString();
+        console.log(scale);
+        scaling = false;
+        this.contentWrapper.style.opacity = scale.toString();
+      } else {
+        currentClickNum = clickNum;
+      }
+      lastPreval = preVal;
+    }
+  }
+}
+
+customElementsShim.define("twisty-scrubber-v2", TwistyScrubberV2);

package/src/cubing/twisty/views/control-panel/webkit-fullscreen.ts

@@ -0,0 +1,44 @@
+// Ponyfills for prefixing in Safari.
+
+import { globalSafeDocument } from "../document";
+
+declare global {
+  interface Document {
+    webkitFullscreenEnabled?: boolean;
+    webkitExitFullscreen?: () => Promise<void>;
+    webkitFullscreenElement?: Element | null;
+  }
+
+  interface Element {
+    webkitRequestFullscreen: () => Promise<void>;
+  }
+}
+
+// TODO: Can `webkitFullscreenEnabled` change after it's cached at page load?
+export const fullscreenEnabled: boolean =
+  globalSafeDocument?.fullscreenEnabled ||
+  !!globalSafeDocument?.webkitFullscreenEnabled;
+
+export function documentExitFullscreen(): Promise<void> {
+  if (document.exitFullscreen) {
+    return document.exitFullscreen();
+  } else {
+    return document.webkitExitFullscreen!(); // YOLO
+  }
+}
+
+export function documentFullscreenElement(): Element | null {
+  if (document.fullscreenElement) {
+    return document.fullscreenElement;
+  } else {
+    return document.webkitFullscreenElement ?? null;
+  }
+}
+
+export function requestFullscreen(element: Element): Promise<void> {
+  if (element.requestFullscreen) {
+    return element.requestFullscreen();
+  } else {
+    return element.webkitRequestFullscreen();
+  }
+}

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

@@ -0,0 +1,4 @@
+// Use like this:
+// const enabled = globalSafeDocument?.fullscreenEnabled;
+export const globalSafeDocument: Document | null =
+  typeof document === "undefined" ? null : document;

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

@@ -0,0 +1,90 @@
+import { PerspectiveCamera, WebGLRenderer } from "three";
+import { THREEJS } from "../heavy-code-imports/3d";
+import type { TwistyPlayerModel } from "../model/TwistyPlayerModel";
+import { Twisty3DPuzzleWrapper } from "./3D/Twisty3DPuzzleWrapper";
+import { setCameraFromOrbitCoordinates } from "./3D/Twisty3DVantage";
+
+export interface TwistyPlayerScreenshot {
+  dataURL: string;
+  download: (filename?: string) => Promise<void>;
+}
+
+// TODO: cache
+let cachedCamera: PerspectiveCamera | null = null;
+export async function screenshot(
+  model: TwistyPlayerModel,
+  options?: { width: number; height: number },
+): Promise<TwistyPlayerScreenshot> {
+  // TODO: improve async caching
+
+  const width = options?.width ?? 2048;
+  const height = options?.height ?? 2048;
+  const aspectRatio = width / height;
+  const camera = (cachedCamera ??= await (async () => {
+    return new (await THREEJS).PerspectiveCamera(20, aspectRatio, 0.1, 20);
+  })());
+
+  const scene = new (await THREEJS).Scene();
+
+  const twisty3DWrapper = new Twisty3DPuzzleWrapper(
+    model,
+    { scheduleRender: () => {} },
+    await model.puzzleLoaderProp.get(),
+    await model.visualizationStrategyProp.get(),
+  );
+
+  // TODO: Pass the stickering to the constructor so we don't have to wait..
+  await model.stickeringProp.get();
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+
+  // TODO: Find a more robust way to do this.
+  await model.legacyPositionProp.get(); // Force the 3D puzzle listeners for the state to fire.
+
+  scene.add(await twisty3DWrapper.twisty3DPuzzle());
+
+  const orbitCoordinates = await model.orbitCoordinatesProp.get();
+  await setCameraFromOrbitCoordinates(camera, orbitCoordinates);
+
+  const renderer = new WebGLRenderer({
+    antialias: true,
+    alpha: true,
+  });
+  renderer.setSize(width, height);
+
+  renderer.render(scene, camera);
+  const dataURL = renderer.domElement.toDataURL();
+
+  const defaultFilename = await getDefaultFilename(model);
+
+  return {
+    dataURL,
+    download: async (filename?: string) => {
+      downloadURL(dataURL, filename ?? defaultFilename);
+    },
+  };
+}
+
+export async function getDefaultFilename(
+  model: TwistyPlayerModel,
+): Promise<string> {
+  const [puzzleID, algWithIssues] = await Promise.all([
+    model.puzzleIDProp.get(),
+    model.algProp.get(),
+  ]);
+  return `[${puzzleID}]${
+    algWithIssues.alg.experimentalNumUnits() === 0
+      ? ""
+      : " " + algWithIssues.alg.toString()
+  }`;
+}
+
+export function downloadURL(
+  url: string,
+  name: string,
+  extension: string = "png",
+): void {
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = `${name}.${extension}`;
+  a.click();
+}

package/src/cubing/vendor/p-lazy/license

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/src/cubing/vendor/p-lazy/p-lazy.ts

@@ -0,0 +1,52 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+// TODO: Use private class fields when ESLint support it.
+
+export class PLazy<T> extends Promise<T> {
+  constructor(executor) {
+    super((resolve) => {
+      resolve();
+    });
+
+    this._executor = executor;
+  }
+
+  static from(function_) {
+    return new PLazy((resolve) => {
+      resolve(function_());
+    });
+  }
+
+  static resolve(value) {
+    return new PLazy((resolve) => {
+      resolve(value);
+    });
+  }
+
+  static reject(error) {
+    return new PLazy((_resolve, reject) => {
+      reject(error);
+    });
+  }
+
+  then(onFulfilled, onRejected) {
+    this._promise = this._promise || new Promise(this._executor);
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    return this._promise.then(onFulfilled, onRejected);
+  }
+
+  catch(onRejected) {
+    this._promise = this._promise || new Promise(this._executor);
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    return this._promise.catch(onRejected);
+  }
+}
+
+export function from<T>(function_): Promise<T> {
+  return new PLazy((resolve) => {
+    resolve(function_());
+  });
+}

package/src/cubing/vendor/p-lazy/readme.md

@@ -0,0 +1,54 @@
+# p-lazy
+
+> Create a lazy promise that defers execution until it's awaited or when `.then()` or `.catch()` is called
+
+Useful if you're doing some heavy operations and would like to only do it when the promise is actually used.
+
+## Install
+
+```
+$ npm install p-lazy
+```
+
+## Usage
+
+```js
+import PLazy from "p-lazy";
+
+const lazyPromise = new PLazy((resolve) => {
+  someHeavyOperation(resolve);
+});
+
+// `someHeavyOperation` is not yet called
+
+await doSomethingFun;
+
+// `someHeavyOperation` is called
+console.log(await lazyPromise);
+```
+
+## API
+
+### new PLazy(executor)
+
+Same as the [`Promise` constructor](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise). `PLazy` is a subclass of `Promise`.
+
+### PLazy.from(fn)
+
+Create a `PLazy` promise from a promise-returning or async function.
+
+### PLazy.resolve(value)
+
+Create a `PLazy` promise that is resolved with the given `value`, or the promise passed as `value`.
+
+### PLazy.reject(reason)
+
+Create a `PLazy` promise that is rejected with the given `reason`.
+
+## Related
+
+- [p-cancelable](https://github.com/sindresorhus/p-cancelable) - Create a promise that can be canceled
+- [p-defer](https://github.com/sindresorhus/p-defer) - Create a deferred promise
+- [lazy-value](https://github.com/sindresorhus/lazy-value) - Create a lazily evaluated value
+- [define-lazy-prop](https://github.com/sindresorhus/define-lazy-prop) - Define a lazily evaluated property on an object
+- [More…](https://github.com/sindresorhus/promise-fun)

package/src/cubing/vendor/three/examples/jsm/libs/stats.modified.module.ts

@@ -0,0 +1,179 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ * ESM conversion by Lucas Garron, 2021-12-21
+ */
+
+const performance:
+  | null
+  | (Performance & {
+      memory?: {
+        usedJSHeapSize: number;
+        jsHeapSizeLimit: number;
+      };
+    }) = globalThis.performance;
+
+export class Stats {
+  mode = 0;
+
+  dom = document.createElement("div");
+
+  constructor() {
+    this.dom.style.cssText =
+      "position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000";
+    this.dom.addEventListener(
+      "click",
+      (event) => {
+        event.preventDefault();
+        this.showPanel(++this.mode % this.dom.children.length);
+      },
+      false,
+    );
+
+    this.showPanel(0);
+  }
+
+  addPanel(panel: StatsPanel): StatsPanel {
+    this.dom.appendChild(panel.dom);
+    return panel;
+  }
+
+  showPanel(id: number): void {
+    for (let i = 0; i < this.dom.children.length; i++) {
+      (this.dom.children[i] as HTMLElement).style.display =
+        i === id ? "block" : "none";
+    }
+
+    this.mode = id;
+  }
+
+  beginTime = (performance || Date).now();
+  prevTime = this.beginTime;
+  frames = 0;
+
+  fpsPanel = this.addPanel(new StatsPanel("FPS", "#0ff", "#002"));
+  msPanel = this.addPanel(new StatsPanel("MS", "#0f0", "#020"));
+  memPanel = performance?.memory
+    ? this.addPanel(new StatsPanel("MB", "#f08", "#201"))
+    : null;
+  REVISION = 16;
+
+  begin() {
+    this.beginTime = (performance || Date).now();
+  }
+
+  end() {
+    this.frames++;
+
+    const time = (performance || Date).now();
+
+    this.msPanel.update(time - this.beginTime, 200);
+
+    if (time >= this.prevTime + 1000) {
+      this.fpsPanel.update((this.frames * 1000) / (time - this.prevTime), 100);
+
+      this.prevTime = time;
+      this.frames = 0;
+
+      if (this.memPanel) {
+        const memory = performance!.memory!;
+        this.memPanel.update(
+          memory.usedJSHeapSize / 1048576,
+          memory.jsHeapSizeLimit / 1048576,
+        );
+      }
+    }
+
+    return time;
+  }
+
+  update() {
+    this.beginTime = this.end();
+  }
+}
+
+const PR = Math.round(globalThis?.window?.devicePixelRatio ?? 1);
+
+const WIDTH = 80 * PR,
+  HEIGHT = 48 * PR,
+  TEXT_X = 3 * PR,
+  TEXT_Y = 2 * PR,
+  GRAPH_X = 3 * PR,
+  GRAPH_Y = 15 * PR,
+  GRAPH_WIDTH = 74 * PR,
+  GRAPH_HEIGHT = 30 * PR;
+
+export class StatsPanel {
+  min = Infinity;
+  max = 0;
+  dom = document.createElement("canvas");
+  context = this.dom.getContext("2d")!;
+  constructor(private name: string, private fg: string, private bg: string) {
+    this.dom.width = WIDTH;
+    this.dom.height = HEIGHT;
+    this.dom.style.cssText = "width:80px;height:48px";
+
+    this.context.font = `bold ${9 * PR}px Helvetica,Arial,sans-serif`;
+    this.context.textBaseline = "top";
+
+    this.context.fillStyle = bg;
+    this.context.fillRect(0, 0, WIDTH, HEIGHT);
+
+    this.context.fillStyle = fg;
+    this.context.fillText(name, TEXT_X, TEXT_Y);
+    this.context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);
+
+    this.context.fillStyle = bg;
+    this.context.globalAlpha = 0.9;
+    this.context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);
+  }
+
+  update(value: number, maxValue: number) {
+    this.min = Math.min(this.min, value);
+    this.max = Math.max(this.max, value);
+
+    this.context.fillStyle = this.bg;
+    this.context.globalAlpha = 1;
+    this.context.fillRect(0, 0, WIDTH, GRAPH_Y);
+    this.context.fillStyle = this.fg;
+    this.context.fillText(
+      Math.round(value) +
+        " " +
+        this.name +
+        " (" +
+        Math.round(this.min) +
+        "-" +
+        Math.round(this.max) +
+        ")",
+      TEXT_X,
+      TEXT_Y,
+    );
+
+    this.context.drawImage(
+      this.dom,
+      GRAPH_X + PR,
+      GRAPH_Y,
+      GRAPH_WIDTH - PR,
+      GRAPH_HEIGHT,
+      GRAPH_X,
+      GRAPH_Y,
+      GRAPH_WIDTH - PR,
+      GRAPH_HEIGHT,
+    );
+
+    this.context.fillRect(
+      GRAPH_X + GRAPH_WIDTH - PR,
+      GRAPH_Y,
+      PR,
+      GRAPH_HEIGHT,
+    );
+
+    this.context.fillStyle = this.bg;
+    this.context.globalAlpha = 0.9;
+    this.context.fillRect(
+      GRAPH_X + GRAPH_WIDTH - PR,
+      GRAPH_Y,
+      PR,
+      Math.round((1 - value / maxValue) * GRAPH_HEIGHT),
+    );
+  }
+}