npm - @umicat/three-sdk - Versions diffs - 0.7.0 → 0.7.1 - Mend

@umicat/three-sdk 0.7.0 → 0.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/dist/Input3D.js +51 -1
package/package.json +1 -1

package/dist/Input3D.js CHANGED Viewed

@@ -6,6 +6,21 @@
  *  and makes a quick tap always count. */
 const MIN_PRESS_MS = 80;
 const now = () => (typeof performance !== 'undefined' ? performance.now() : Date.now());
+/**
+ * Everything needed to stop a long press from being read as "select this text".
+ *
+ * A thumbstick REQUIRES holding still, which is exactly the gesture iOS uses to
+ * start a selection — so on a phone the Copy / Look Up / Translate callout came
+ * up over the game the first time anyone tried to walk. `user-select` alone is
+ * not enough: `-webkit-touch-callout` is a separate switch, and neither is
+ * implied by `touch-action: none`.
+ */
+const NO_SELECTION = {
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+    WebkitTouchCallout: 'none',
+    WebkitTapHighlightColor: 'transparent',
+};
 const isTouchDevice = () => typeof matchMedia === 'function' &&
     matchMedia('(pointer: coarse)').matches &&
     !matchMedia('(pointer: fine)').matches;
@@ -155,8 +170,9 @@ export class Input3D {
             // some ancestor happens to be positioned, and "happens to be" is not a
             // layout strategy.
             position: 'fixed', inset: '0', pointerEvents: 'none',
-            touchAction: 'none', userSelect: 'none', zIndex: '10',
+            touchAction: 'none', zIndex: '10',
         });
+        Object.assign(root.style, NO_SELECTION);
         const floating = this.stickMode === 'floating';
         // The zone a thumb may land on to summon the stick. It is the LEFT HALF,
         // not the pad: the whole point is that the player does not have to find
@@ -166,6 +182,7 @@ export class Input3D {
             position: 'absolute', left: '0', top: '0', width: '50%', height: '100%',
             pointerEvents: floating ? 'auto' : 'none',
         });
+        Object.assign(zone.style, NO_SELECTION);
         const pad = document.createElement('div');
         Object.assign(pad.style, floating ? {
             position: 'absolute', width: '30vmin', height: '30vmin',
@@ -213,6 +230,11 @@ export class Input3D {
                 color: 'rgba(255,255,255,0.85)', font: '600 4vmin/1 system-ui, sans-serif',
             });
             el.textContent = label;
+            // Explicitly, not by inheritance. The label IS text -- a glyph in a div
+            // -- and long-pressing the attack button is how the iOS Copy / Look Up /
+            // Translate callout came up mid-fight, with the selection handles
+            // clamped around the little crossed swords.
+            Object.assign(el.style, NO_SELECTION);
             return el;
         };
         const btn = makeButton('▲');
@@ -225,6 +247,30 @@ export class Input3D {
         root.append(zone, pad, cluster);
         container.appendChild(root);
         this.root = root;
+        // And the page underneath. The overlay covers the controls, but a press
+        // that lands on the HUD or the canvas would still summon the callout — and
+        // a game is not a document; there is nothing here to select.
+        //
+        // A stylesheet rather than inline styles, so form fields can opt back IN:
+        // blanket `user-select: none` on <body> can stop a player selecting text
+        // inside their own name field, and a game that takes typed input would
+        // have inherited a bug from its movement controls.
+        const doc = container.ownerDocument;
+        const style = doc.createElement('style');
+        style.dataset.umicatTouch = '';
+        style.textContent = `
+      html, body { -webkit-user-select: none; user-select: none;
+                   -webkit-touch-callout: none;
+                   -webkit-tap-highlight-color: transparent; }
+      input, textarea, select, [contenteditable] {
+                   -webkit-user-select: text; user-select: text;
+                   -webkit-touch-callout: default; }
+    `;
+        doc.head.appendChild(style);
+        this.cleanups.push(() => style.remove());
+        const noMenu = (e) => e.preventDefault();
+        doc.addEventListener('contextmenu', noMenu);
+        this.cleanups.push(() => doc.removeEventListener('contextmenu', noMenu));
         // Track by pointerId so a thumb on the stick and a thumb on the button do
         // not fight over one piece of state.
         let stickId = null;
@@ -281,6 +327,9 @@ export class Input3D {
         // not — which is the point: `direction()` reads the same either way.
         const grip = floating ? zone : pad;
         on(grip, 'pointerdown', (e) => {
+            // Cancel the default gesture: on iOS, holding still on the screen is how
+            // a text selection begins, and holding still is the entire thumbstick.
+            e.preventDefault();
             // One thumb drives the stick. A second finger landing in the zone must
             // not move the origin out from under the first.
             if (stickId !== null)
@@ -315,6 +364,7 @@ export class Input3D {
             this.cleanups.push(() => el.removeEventListener(ev, h));
         };
         on('pointerdown', (e) => {
+            // Cancels the selection gesture as well as the default press behaviour.
             e.preventDefault();
             el.setPointerCapture(e.pointerId);
             this.touchHeld.add(id);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@umicat/three-sdk",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Three.js runtime for Umicat games: the scene3d design format, its loader with physics, a kinematic character controller, and the Umicat platform via @umicat/platform-sdk.",
   "type": "module",
   "main": "dist/index.js",