cubing 0.24.2 → 0.24.6

package/dist/esm/twisty/index.js

@@ -10,7 +10,7 @@ import {
   TwistyPropDerived,
   TwistyPropSource,
   proxy3D
-} from "../chunk-TOPMNZ57.js";
+} from "../chunk-OOIEAACO.js";
 import {
   countAnimatedLeaves,
   countMoves
@@ -20,8 +20,8 @@ import {
   cubeAppearance,
   customPGPuzzleLoader,
   puzzles
-} from "../chunk-2CGRUO5X.js";
-import "../chunk-B27E6KTE.js";
+} from "../chunk-MVJPIWT7.js";
+import "../chunk-Y32HHZUY.js";
 import {
   Alg,
   AlgBuilder,
@@ -490,6 +490,15 @@ svg {
   display: grid;
   min-height: 0;
 }
+
+svg {
+  animation: fade-in 0.25s ease-in;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
 `);
 
 // src/cubing/twisty/views/2D/KPuzzleSVGWrapper.ts
@@ -1106,12 +1115,45 @@ var twisty3DVantageCSS = new CSSSource(`
   height: 100%;
   display: grid;
   overflow: hidden;
+  place-content: center;
+}
+
+.loading {
+  width: 4em;
+  height: 4em;
+  border-radius: 2.5em;
+  border: 0.5em solid rgba(0, 0, 0, 0);
+  border-top: 0.5em solid rgba(0, 0, 0, 0.7);
+  border-right: 0.5em solid rgba(0, 0, 0, 0.7);
+  animation: fade-in-delayed 4s, rotate 1s linear infinite;
+}
+
+@keyframes fade-in-delayed {
+  0% { opacity: 0; }
+  25% {opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 
 /* TODO: This is due to stats hack. Replace with \`canvas\`. */
 .wrapper > canvas {
   max-width: 100%;
   max-height: 100%;
+  cursor: grab;
+  animation: fade-in 0.25s ease-in;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.wrapper > canvas:active {
+  cursor: grabbing;
 }
 
 .wrapper.invisible {
@@ -1385,6 +1427,7 @@ var Twisty3DVantage = class extends ManagedCustomElement {
     this.scene = null;
     this.stats = null;
     this.rendererIsShared = shareRenderer();
+    this.loadingElement = null;
     __privateAdd(this, _onResizeStaleDropper, new StaleDropper());
     __privateAdd(this, _width, 0);
     __privateAdd(this, _height, 0);
@@ -1396,6 +1439,8 @@ var Twisty3DVantage = class extends ManagedCustomElement {
     __privateAdd(this, _disconnectionFunctions, []);
     __privateAdd(this, _scheduler, new RenderScheduler(this.render.bind(this)));
     this.scene = scene ?? null;
+    this.loadingElement = this.addElement(document.createElement("div"));
+    this.loadingElement.classList.add("loading");
     if (SHOW_STATS) {
       this.stats = new Stats();
       this.stats.dom.style.position = "absolute";
@@ -1437,6 +1482,7 @@ var Twisty3DVantage = class extends ManagedCustomElement {
         const renderer = await this.renderer();
         canvas = this.addElement(renderer.domElement);
       }
+      this.loadingElement?.remove();
       const context = canvas.getContext("2d");
       return { canvas, context };
     })());
@@ -1686,7 +1732,7 @@ _currentTwisty3DPuzzleWrapper = new WeakMap();
 _twisty3DStaleDropper = new WeakMap();
 customElementsShim.define("twisty-3d-scene-wrapper", Twisty3DSceneWrapper);
 
-// src/cubing/twisty/views/control-panel/TwistyButtonsV2.css.ts
+// src/cubing/twisty/views/control-panel/TwistyButtons.css.ts
 var buttonGridCSS = new CSSSource(`
 :host {
   width: 384px;
@@ -1711,7 +1757,7 @@ var buttonGridCSS = new CSSSource(`
   display: none;
 }
 
-.wrapper twisty-button-v2,
+.wrapper twisty-button,
 .wrapper twisty-control-button {
   width: inherit;
   height: inherit;
@@ -1865,7 +1911,7 @@ var ButtonAppearanceProp = class extends TwistyPropDerived {
         title: "Step backward"
       },
       "play-pause": {
-        enabled: true,
+        enabled: !(inputs.coarseTimelineInfo.atStart && inputs.coarseTimelineInfo.atEnd),
         icon: inputs.coarseTimelineInfo.playing ? "pause" : "play",
         title: inputs.coarseTimelineInfo.playing ? "Pause" : "Play"
       },
@@ -1890,7 +1936,7 @@ var ButtonAppearanceProp = class extends TwistyPropDerived {
   }
 };
 
-// src/cubing/twisty/views/control-panel/TwistyButtonsV2.ts
+// src/cubing/twisty/views/control-panel/TwistyButtons.ts
 var buttonCommands = {
   "fullscreen": true,
   "jump-to-start": true,
@@ -1901,7 +1947,7 @@ var buttonCommands = {
   "twizzle-link": true
 };
 var _onCommand, onCommand_fn;
-var TwistyButtonsV2 = class extends ManagedCustomElement {
+var TwistyButtons = class extends ManagedCustomElement {
   constructor(model, controller, fullscreenElement) {
     super();
     this.model = model;
@@ -1914,7 +1960,7 @@ var TwistyButtonsV2 = class extends ManagedCustomElement {
     this.addCSS(buttonGridCSS);
     const buttons = {};
     for (const command in buttonCommands) {
-      const button = new TwistyButtonV2();
+      const button = new TwistyButton();
       buttons[command] = button;
       button.addEventListener("click", () => __privateMethod(this, _onCommand, onCommand_fn).call(this, command));
       this.addElement(button);
@@ -1985,9 +2031,9 @@ onCommand_fn = function(command) {
       throw new Error("Missing command");
   }
 };
-customElementsShim.define("twisty-buttons-v2", TwistyButtonsV2);
+customElementsShim.define("twisty-buttons", TwistyButtons);
 var _iconManager;
-var TwistyButtonV2 = class extends ManagedCustomElement {
+var TwistyButton = class extends ManagedCustomElement {
   constructor() {
     super(...arguments);
     this.button = document.createElement("button");
@@ -2002,7 +2048,7 @@ var TwistyButtonV2 = class extends ManagedCustomElement {
   }
 };
 _iconManager = new WeakMap();
-customElementsShim.define("twisty-button-v2", TwistyButtonV2);
+customElementsShim.define("twisty-button", TwistyButton);
 
 // src/cubing/twisty/views/control-panel/TwistyScrubber.css.ts
 var twistyScrubberCSS = new CSSSource(`
@@ -2019,40 +2065,15 @@ var twistyScrubberCSS = new CSSSource(`
   overflow: hidden;
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
+  background: rgba(196, 196, 196, 0.75)
 }
 
-input {
-  margin: 0; width: 100%;
-}
-
-input {
-  background: none;
-}
-
-::-moz-range-track {
-  background: rgba(0, 0, 0, 0.25);
-  height: 50%;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-::-webkit-slider-runnable-track {
-  background: rgba(0, 0, 0, 0.05);
-}
-
-::-moz-range-progress {
-  background: #3273F6;
-  height: 50%;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-::-ms-fill-lower {
-  background: #3273F6;
-  height: 50%;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+input:not(:disabled) {
+  cursor: ew-resize;
 }
 `);
 
-// src/cubing/twisty/views/control-panel/TwistyScrubberV2.ts
+// src/cubing/twisty/views/control-panel/TwistyScrubber.ts
 var SLOW_DOWN_SCRUBBING = false;
 var isMouseDown = false;
 globalSafeDocument?.addEventListener("mousedown", function(event) {
@@ -2080,7 +2101,7 @@ var lastPreval = 0;
 var scaling = false;
 var currentClickNum = 0;
 var _inputElem;
-var TwistyScrubberV2 = class extends ManagedCustomElement {
+var TwistyScrubber = class extends ManagedCustomElement {
   constructor(model) {
     super();
     this.model = model;
@@ -2150,7 +2171,7 @@ var TwistyScrubberV2 = class extends ManagedCustomElement {
   }
 };
 _inputElem = new WeakMap();
-customElementsShim.define("twisty-scrubber-v2", TwistyScrubberV2);
+customElementsShim.define("twisty-scrubber", TwistyScrubber);
 
 // src/cubing/twisty/views/screenshot.ts
 var cachedCamera = null;
@@ -2213,7 +2234,7 @@ var twistyPlayerCSS = new CSSSource(`
 .wrapper {
   display: grid;
   overflow: hidden;
-  grid-template-rows: 7fr 1em 1fr;
+  grid-template-rows: 7fr minmax(1.5em, 0.5fr) minmax(2em, 1fr);
 }
 
 .wrapper > * {
@@ -2228,8 +2249,8 @@ var twistyPlayerCSS = new CSSSource(`
 
 .wrapper.controls-none twisty-scrubber,
 .wrapper.controls-none twisty-control-button-panel ,
-.wrapper.controls-none twisty-scrubber-v2,
-.wrapper.controls-none twisty-buttons-v2 {
+.wrapper.controls-none twisty-scrubber,
+.wrapper.controls-none twisty-buttons {
   display: none;
 }
 
@@ -2883,7 +2904,7 @@ function simulMoves(a) {
   return l;
 }
 
-// src/cubing/twisty/controllers/indexer/simultaneous-moves/SimultaneousMoveIndexerV2.ts
+// src/cubing/twisty/controllers/indexer/simultaneous-moves/SimultaneousMoveIndexer.ts
 var demos = {
   "y' y' U' E D R2 r2 F2 B2 U E D' R2 L2' z2 S2 U U D D S2 F2' B2": [
     { animLeaf: new Move("y", -1), start: 0, end: 1e3 },
@@ -2930,7 +2951,7 @@ var demos = {
     { animLeaf: new Move("E"), start: 7e3, end: 8e3 }
   ]
 };
-var SimultaneousMoveIndexerV2 = class {
+var SimultaneousMoveIndexer = class {
   constructor(kpuzzle, alg) {
     this.kpuzzle = kpuzzle;
     this.animLeaves = demos[alg.toString()] ?? simulMoves(alg);
@@ -3424,7 +3445,7 @@ var IndexerConstructorProp = class extends TwistyPropDerived {
     switch (inputs.indexerConstructorRequest) {
       case "auto":
         if (countMoves(inputs.alg.alg) < 100 && inputs.puzzle === "3x3x3" && inputs.visualizationStrategy === "Cube3D") {
-          return SimultaneousMoveIndexerV2;
+          return SimultaneousMoveIndexer;
         } else {
           return TreeAlgIndexer;
         }
@@ -3433,7 +3454,7 @@ var IndexerConstructorProp = class extends TwistyPropDerived {
       case "simple":
         return SimpleAlgIndexer;
       case "simultaneous":
-        return SimultaneousMoveIndexerV2;
+        return SimultaneousMoveIndexer;
       default:
         throw new Error("Invalid indexer request!");
     }
@@ -3477,13 +3498,16 @@ var IndexerProp = class extends TwistyPropDerived {
 // src/cubing/twisty/model/props/puzzle/state/AnchorTransformationProp.ts
 var AnchorTransformationProp = class extends TwistyPropDerived {
   derive(inputs) {
+    if (inputs.setupTransformation) {
+      return inputs.setupTransformation;
+    }
     switch (inputs.setupAnchor) {
       case "start":
-        return inputs.setupTransformation;
+        return inputs.setupAlgTransformation;
       case "end": {
         const algTransformation = inputs.indexer.transformationAtIndex(inputs.indexer.numAnimatedLeaves());
         const inverseAlgTransformation = algTransformation.invert();
-        return inputs.setupTransformation.applyTransformation(inverseAlgTransformation);
+        return inputs.setupAlgTransformation.applyTransformation(inverseAlgTransformation);
       }
       default:
         throw new Error("Unimplemented!");
@@ -3714,6 +3738,13 @@ var FoundationDisplayProp = class extends SimpleTwistyPropSource {
   }
 };
 
+// src/cubing/twisty/model/props/puzzle/state/SetupTransformationProp.ts
+var SetupTransformationProp = class extends SimpleTwistyPropSource {
+  getDefaultValue() {
+    return null;
+  }
+};
+
 // src/cubing/twisty/model/TwistyPlayerModel.ts
 var TwistyPlayerModel = class {
   constructor() {
@@ -3736,6 +3767,7 @@ var TwistyPlayerModel = class {
     this.puzzleIDRequest = new PuzzleIDRequestProp();
     this.setupAnchor = new SetupAnchorProp();
     this.setupAlg = new AlgProp();
+    this.setupTransformation = new SetupTransformationProp();
     this.stickering = new StickeringProp();
     this.tempoScale = new TempoScaleProp();
     this.timestampRequest = new TimestampRequestProp();
@@ -3788,8 +3820,9 @@ var TwistyPlayerModel = class {
       kpuzzle: this.kpuzzle
     });
     this.anchorTransformation = new AnchorTransformationProp({
+      setupTransformation: this.setupTransformation,
       setupAnchor: this.setupAnchor,
-      setupTransformation: this.setupAlgTransformation,
+      setupAlgTransformation: this.setupAlgTransformation,
       indexer: this.indexer
     });
     this.timeRange = new TimeRangeProp({
@@ -4111,9 +4144,9 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
         __privateGet(this, _errorElem).textContent = errorString;
       }
     });
-    const scrubber = new TwistyScrubberV2(this.experimentalModel);
+    const scrubber = new TwistyScrubber(this.experimentalModel);
     this.contentWrapper.appendChild(scrubber);
-    this.buttons = new TwistyButtonsV2(this.experimentalModel, this.controller, this);
+    this.buttons = new TwistyButtons(this.experimentalModel, this.controller, this);
     this.contentWrapper.appendChild(this.buttons);
     this.experimentalModel.background.addFreshListener((backgroundTheme) => {
       this.contentWrapper.classList.toggle("checkered", backgroundTheme !== "none");