work

Author: dmail

packages/frontend/dom/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/dom",
-  "version": "0.17.53",
+  "version": "0.17.54",
   "type": "module",
   "description": "DOM utilities for writing frontend code",
   "repository": {

packages/frontend/dom/src/interaction/drag/drag_after_intent.js

@@ -106,7 +106,10 @@ const css = /* css */ `
        still is answered by nobody but the browser, whose long press selects the
        word under the thumb (see the top of this file). Everywhere else the
        selection is only refused for the length of the gesture, from the gesture
-       itself (see the selectstart refused in drag_gesture.js).
+       itself (see the selectstart refused in drag_gesture.js) — which a mouse is
+       in time for and a finger is not: the browser answers the held finger AFTER
+       the wait, so a source whose label must not be picked out says
+       user-select: none in its own stylesheet (see interactions.md).
        Prefixed too: Safari only took the property unprefixed at 17, and an older
        iPhone is exactly what this long press comes from. */
     user-select: none;

packages/frontend/dom/src/interaction/press_held.js

@@ -65,6 +65,20 @@ export const waitForPressHeld = (
 ) => {
   const { pointerId, clientX, clientY } = pressEvent;
 
+  /* The one capture that says nothing about the press. A pointer that cannot
+     hover is given a capture the moment it lands, by the browser and to the
+     element it landed on, without anybody asking — and it is announced like any
+     other, just before the first pointer event that follows. EVERY touch press
+     has it, so it cannot be read as this one having been settled: read that way,
+     the wait dies at the first pixel of a finger that was only resting on the
+     glass, which is what a finger does. That is the hold that fails one time in
+     two, on the pointer this whole module exists for.
+     Asked rather than assumed, and asked HERE: the press is the one moment where
+     a capture can only be the browser's, since nothing has taken one yet. */
+  const implicitCaptureHolder = pressEvent.target.hasPointerCapture?.(pointerId)
+    ? pressEvent.target
+    : null;
+
   const pressCleanupCallbacks = [];
   // Who is still holding the refusal. The finger holds it because the finger is
   // what the system's menu answers; the caller holds it from the moment the press
@@ -188,6 +202,12 @@ export const waitForPressHeld = (
     if (captureEvent.pointerId !== pointerId) {
       return;
     }
+    if (captureEvent.target === implicitCaptureHolder) {
+      // The capture the press was born with, not one somebody took (see above).
+      // A gesture taking that same element instead changes nothing for the
+      // browser, so it announces nothing, and there is nothing to miss here.
+      return;
+    }
     cancelPress(captureEvent);
   };
   // On window rather than on the element: the finger can leave it, and the

packages/frontend/navi/docs/interactions.md

@@ -951,14 +951,43 @@ Almost nothing, on purpose. A **handle** (`data-drag-handle`) exists only to dra
 so it shows the hand; a **source** does not — it drags only once the intent shows,
 a plain click on it stays a click, and it is usually something else FIRST (a link,
 a card one opens). The cursor says what an element IS, and the gesture is not the
-one who knows, so it leaves it alone (`default`, not an I-beam: the text inside
-cannot be selected either).
+one who knows, so it leaves it alone (`default`, not an I-beam: with a mouse the
+text inside cannot be selected either — a finger is another matter, see below).
 
 So on a board where a piece is also clickable, the cursor is already spoken for and
 the affordance has to be said in the piece itself — a grip mark in a corner, a
 shadow appearing under the pointer, a handle. It is worth deciding, not defaulting:
 a board one may drag on is worth nothing if nobody tries.
 
+### The text inside: `user-select: none`
+
+A press on a source belongs to the drag, and the selection that press would have
+made is refused for as long as it lasts — so with a mouse, dragging across the
+label of a card never paints it blue.
+
+A finger is another matter. It is asked to hold still, and the browser answers
+that same held finger a moment later with a gesture of its own: it picks out the
+word under the thumb and keeps the touch for the handles it puts around it. The
+grab is then lost, and nothing done at the end of the wait takes it back —
+whether a finger MAY select is settled when it lands. Like the iOS callout, it is
+a stylesheet, and it has to be true before the press:
+
+```css
+.token {
+  user-select: none;
+  -webkit-user-select: none; /* Safari only took it unprefixed at 17 */
+}
+```
+
+**Most of the time that is what you want.** What can be picked up carries a
+label rather than a text to read — a token, a row, a card one moves — and the
+press is there for the drag: nobody selects the word inside a thing they are
+carrying. Keep the selection where the text IS the point (a note one copies from)
+and give that one a `data-drag-handle`: the grip drags, the text stays text.
+
+navi says it on its own in one place only, inside `[data-drag-on-contact]`, where
+there is no wait left to answer the finger with.
+
 ## Tuning
 
 Read off the element or any ancestor carrying the attribute, so a whole list is

packages/frontend/navi/src/control/demos/38_interactions_demo.html

@@ -322,6 +322,14 @@
       .token[data-grabbed] {
         box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
       }
+      /* The word inside is not text to read, it is the label of a thing one
+         carries — see the "user-select: none" section. Prefixed too: Safari only
+         took the property unprefixed at 17, and an older iPhone is exactly the
+         phone this matters on. */
+      .token_unselectable {
+        user-select: none;
+        -webkit-user-select: none;
+      }
 
       /* A surface drawn from three numbers the hand writes: where it has been
          panned to and how far it is zoomed. The grid is the surface's own
@@ -1510,6 +1518,50 @@ <h2 style="margin: 0 0 4px">Contents</h2>
               </Box>
             </Box>
 
+            <Heading level={4} id="move-selection">
+              user-select: none
+            </Heading>
+            <p class="legend">
+              A finger held on a word is the browser's own gesture too: it picks
+              the word out, keeps the touch for its selection handles, and the
+              grab never happens. Whether it may is settled when the finger
+              LANDS, so nothing the gesture does at the end of the wait takes it
+              back — it is a stylesheet, written before the press, exactly like
+              the callout iOS raises. The second token says so; the first is
+              left to the browser. A mouse sees no difference between the two:
+              there the selection is already refused for the length of the
+              press.
+            </p>
+            <Box flex="x" spacing="l" alignY="start">
+              <Box flex="y" spacing="xs">
+                <Text size="s" color="#666">
+                  left to the browser
+                </Text>
+                <Box className="board board_small">
+                  <Token
+                    id="token_selectable"
+                    label="text"
+                    style={{ left: "16px", top: "16px" }}
+                    interactions={{ move: logMove("selectable") }}
+                  />
+                </Box>
+              </Box>
+              <Box flex="y" spacing="xs">
+                <Text size="s" color="#666">
+                  user-select: none
+                </Text>
+                <Box className="board board_small">
+                  <Token
+                    id="token_unselectable"
+                    className="token token_unselectable"
+                    label="text"
+                    style={{ left: "16px", top: "16px" }}
+                    interactions={{ move: logMove("unselectable") }}
+                  />
+                </Box>
+              </Box>
+            </Box>
+
             <Heading level={4} id="move-on-contact">
               data-drag-on-contact
             </Heading>