cubing 0.26.1 → 0.26.4

package/dist/esm/twisty/index.js

@@ -10,18 +10,19 @@ import {
   TwistyPropDerived,
   TwistyPropSource,
   proxy3D
-} from "../chunk-PDVAUAMY.js";
+} from "../chunk-YRXW6WCD.js";
+import "../chunk-YBDBUTYE.js";
 import {
   countAnimatedLeaves,
   countMoves
-} from "../chunk-5Q4SJSNY.js";
+} from "../chunk-TKUB3UH6.js";
 import {
   cube3x3x3,
   cubeAppearance,
   customPGPuzzleLoader,
   puzzles
-} from "../chunk-XQKTAWAA.js";
-import "../chunk-HUCMGBEC.js";
+} from "../chunk-IW4IMXS5.js";
+import "../chunk-2KNZ3W2X.js";
 import {
   Alg,
   AlgBuilder,
@@ -33,7 +34,7 @@ import {
   direct,
   directedGenerator,
   experimentalAppendMove
-} from "../chunk-QZOJPCN5.js";
+} from "../chunk-ZNQAOJ4A.js";
 import {
   __privateAdd,
   __privateGet,
@@ -1135,7 +1136,6 @@ var twisty3DVantageCSS = new CSSSource(`
 .wrapper > canvas {
   max-width: 100%;
   max-height: 100%;
-  cursor: grab;
   animation: fade-in 0.25s ease-in;
 }
 
@@ -1144,18 +1144,22 @@ var twisty3DVantageCSS = new CSSSource(`
   to { opacity: 1; }
 }
 
-.wrapper > canvas:active {
-  cursor: grabbing;
-}
-
 .wrapper.invisible {
   opacity: 0;
 }
+
+.wrapper.drag-input-enabled > canvas {
+  cursor: grab;
+}
+
+.wrapper.drag-input-enabled > canvas:active {
+  cursor: grabbing;
+}
 `);
 
 // src/cubing/twisty/views/3D/DragTracker.ts
 var MOVEMENT_EPSILON = 0.1;
-var _dragInfoMap, _lazyListenersRegistered, _registerLazyListeners, registerLazyListeners_fn, _clear, clear_fn, _trackDrag, trackDrag_fn;
+var _dragInfoMap, _targetListeners, _lazyListenersRegistered, _registerLazyListeners, registerLazyListeners_fn, _clear, clear_fn, _trackDrag, trackDrag_fn;
 var DragTracker = class extends EventTarget {
   constructor(target) {
     super();
@@ -1164,13 +1168,29 @@ var DragTracker = class extends EventTarget {
     __privateAdd(this, _clear);
     __privateAdd(this, _trackDrag);
     __privateAdd(this, _dragInfoMap, /* @__PURE__ */ new Map());
+    __privateAdd(this, _targetListeners, /* @__PURE__ */ new Map());
     __privateAdd(this, _lazyListenersRegistered, false);
-    target.addEventListener("pointerdown", this.onPointerDown.bind(this));
-    this.target.addEventListener("contextmenu", (e) => {
+  }
+  start() {
+    this.addTargetListener("pointerdown", this.onPointerDown.bind(this));
+    this.addTargetListener("contextmenu", (e) => {
       e.preventDefault();
     });
-    this.target.addEventListener("touchmove", (e) => e.preventDefault());
-    this.target.addEventListener("dblclick", (e) => e.preventDefault());
+    this.addTargetListener("touchmove", (e) => e.preventDefault());
+    this.addTargetListener("dblclick", (e) => e.preventDefault());
+  }
+  stop() {
+    for (const [eventType, listener] of __privateGet(this, _targetListeners).entries()) {
+      this.target.removeEventListener(eventType, listener);
+    }
+    __privateGet(this, _targetListeners).clear();
+    __privateSet(this, _lazyListenersRegistered, false);
+  }
+  addTargetListener(eventType, listener) {
+    if (!__privateGet(this, _targetListeners).has(eventType)) {
+      this.target.addEventListener(eventType, listener);
+      __privateGet(this, _targetListeners).set(eventType, listener);
+    }
   }
   onPointerDown(e) {
     __privateMethod(this, _registerLazyListeners, registerLazyListeners_fn).call(this);
@@ -1222,14 +1242,15 @@ var DragTracker = class extends EventTarget {
   }
 };
 _dragInfoMap = new WeakMap();
+_targetListeners = new WeakMap();
 _lazyListenersRegistered = new WeakMap();
 _registerLazyListeners = new WeakSet();
 registerLazyListeners_fn = function() {
   if (__privateGet(this, _lazyListenersRegistered)) {
     return;
   }
-  this.target.addEventListener("pointermove", this.onPointerMove.bind(this));
-  this.target.addEventListener("pointerup", this.onPointerUp.bind(this));
+  this.addTargetListener("pointermove", this.onPointerMove.bind(this));
+  this.addTargetListener("pointerup", this.onPointerUp.bind(this));
   __privateSet(this, _lazyListenersRegistered, true);
 };
 _clear = new WeakSet();
@@ -1586,7 +1607,21 @@ _cachedDragTracker = new WeakMap();
 _dragTracker = new WeakSet();
 dragTracker_fn = async function() {
   return __privateGet(this, _cachedDragTracker) ?? __privateSet(this, _cachedDragTracker, (async () => {
-    return new DragTracker((await this.canvasInfo()).canvas);
+    const dragTracker = new DragTracker((await this.canvasInfo()).canvas);
+    this.model?.twistySceneModel.dragInput.addFreshListener((dragInputMode) => {
+      let dragInputEnabled = false;
+      switch (dragInputMode) {
+        case "auto":
+          dragTracker.start();
+          dragInputEnabled = true;
+          break;
+        case "none":
+          dragTracker.stop();
+          break;
+      }
+      this.contentWrapper.classList.toggle("drag-input-enabled", dragInputEnabled);
+    });
+    return dragTracker;
   })());
 };
 _cachedCamera = new WeakMap();
@@ -1955,7 +1990,7 @@ var TwistyButtons = class extends ManagedCustomElement {
     for (const command in buttonCommands) {
       const button = new TwistyButton();
       buttons[command] = button;
-      button.addEventListener("click", () => __privateMethod(this, _onCommand, onCommand_fn).call(this, command));
+      button.htmlButton.addEventListener("click", () => __privateMethod(this, _onCommand, onCommand_fn).call(this, command));
       this.addElement(button);
     }
     this.buttons = buttons;
@@ -1983,8 +2018,8 @@ var TwistyButtons = class extends ManagedCustomElement {
     for (const command in buttonCommands) {
       const button = this.buttons[command];
       const info = buttonAppearances[command];
-      button.button.disabled = !info.enabled;
-      button.button.title = info.title;
+      button.htmlButton.disabled = !info.enabled;
+      button.htmlButton.title = info.title;
       button.setIcon(info.icon);
       button.hidden = !!info.hidden;
     }
@@ -2029,12 +2064,12 @@ var _iconManager;
 var TwistyButton = class extends ManagedCustomElement {
   constructor() {
     super(...arguments);
-    this.button = document.createElement("button");
+    this.htmlButton = document.createElement("button");
     __privateAdd(this, _iconManager, new ClassListManager(this, "svg-", buttonIcons));
   }
   connectedCallback() {
     this.addCSS(buttonCSS);
-    this.addElement(this.button);
+    this.addElement(this.htmlButton);
   }
   setIcon(iconName) {
     __privateGet(this, _iconManager).setValue(iconName);
@@ -2456,7 +2491,7 @@ var CurrentMoveInfoProp = class extends TwistyPropDerived {
         }
         const start = inputs.indexer.indexToMoveStartTimestamp(idx);
         const duration = inputs.indexer.moveDuration(idx);
-        const fraction = (inputs.detailedTimelineInfo.timestamp - start) / duration;
+        const fraction = duration ? (inputs.detailedTimelineInfo.timestamp - start) / duration : 0;
         const end = start + duration;
         const currentMove = {
           move,
@@ -3610,6 +3645,13 @@ var SpriteProp = class extends TwistyPropDerived {
   }
 };
 
+// src/cubing/twisty/model/props/puzzle/state/DragInputProp.ts
+var DragInputProp = class extends SimpleTwistyPropSource {
+  getDefaultValue() {
+    return "auto";
+  }
+};
+
 // src/cubing/twisty/model/props/puzzle/state/MovePressInputProp.ts
 var MovePressInputProp = class extends SimpleTwistyPropSource {
   getDefaultValue() {
@@ -3738,6 +3780,7 @@ var TwistySceneModel = class {
   constructor(twistyPlayerModel) {
     this.twistyPlayerModel = twistyPlayerModel;
     this.background = new BackgroundProp();
+    this.dragInput = new DragInputProp();
     this.foundationDisplay = new FoundationDisplayProp();
     this.foundationStickerSpriteURL = new URLProp();
     this.hintFacelet = new HintFaceletProp();
@@ -3891,7 +3934,6 @@ var TwistyPlayerModel = class {
       this.twistySceneModel.stickering.get()
     ]);
     const isExplorer = viewerLink === "experimental-twizzle-explorer";
-    console.log({ isExplorer, viewerLink });
     const url = new URL(`https://alpha.twizzle.net/${isExplorer ? "explore" : "edit"}/`);
     if (!alg.alg.experimentalIsEmpty()) {
       url.searchParams.set("alg", alg.alg.toString());
@@ -4094,6 +4136,12 @@ var TwistyPlayerSettable = class extends ManagedCustomElement {
   get experimentalHintSprite() {
     throw err("experimentalHintSprite");
   }
+  set experimentalDragInput(dragInputMode) {
+    this.experimentalModel.twistySceneModel.dragInput.set(dragInputMode);
+  }
+  get experimentalDragInput() {
+    throw err("experimentalDragInput");
+  }
 };
 var ExperimentalGetters = class {
   constructor(model) {
@@ -4129,6 +4177,7 @@ var twistyPlayerAttributeMap = {
   "back-view": "backView",
   "viewer-link": "viewerLink",
   "experimental-move-press-input": "experimentalMovePressInput",
+  "experimental-drag-input": "experimentalDragInput",
   "experimental-title": "experimentalTitle",
   "experimental-video-url": "experimentalVideoURL",
   "experimental-competition-id": "experimentalCompetitionID",
@@ -4199,7 +4248,8 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
   flash() {
     if (__privateGet(this, _flashLevel) === "auto") {
       __privateGet(this, _visualizationWrapper)?.animate([{ opacity: 0.25 }, { opacity: 1 }], {
-        duration: 250
+        duration: 250,
+        easing: "ease-out"
       });
     }
   }
@@ -4628,7 +4678,6 @@ setTwistyPlayer_fn = async function(twistyPlayer) {
   }
   __privateSet(this, _twistyPlayer, twistyPlayer);
   __privateGet(this, _twistyPlayer).experimentalModel.alg.addFreshListener((algWithIssues) => {
-    console.log("setting alg from ", algWithIssues);
     this.setAlg(algWithIssues.alg);
   });
   const sourceAlg = (await __privateGet(this, _twistyPlayer).experimentalModel.alg.get()).alg;
@@ -5183,6 +5232,7 @@ var URLParamUpdater = class {
     this.listenToAlgProp(model.setupAlg, "setup-alg");
     this.listenToStringSourceProp(model.twistySceneModel.stickering, "stickering");
     this.listenToStringSourceProp(model.setupAnchor, "setup-anchor");
+    this.listenToStringOrNullProp(model.title, "title");
     this.listenToStringOrNoValueProp(model.puzzleIDRequest, "puzzle", NO_VALUE);
     this.listenToStringOrNoValueProp(model.puzzleDescriptionRequest, "puzzle-description", NO_VALUE);
   }
@@ -5202,6 +5252,11 @@ var URLParamUpdater = class {
       this.setURLParam(key, s, actualDefaultString);
     });
   }
+  async listenToStringOrNullProp(prop, key, defaultString = "") {
+    prop.addFreshListener((s) => {
+      this.setURLParam(key, s ?? defaultString, defaultString);
+    });
+  }
   async listenToStringOrNoValueProp(prop, key, defaultString) {
     prop.addFreshListener((s) => {
       if (s === NO_VALUE) {