@jsenv/dom 0.17.17 → 0.17.19

package/dist/jsenv_dom.js

@@ -8244,7 +8244,12 @@ const createDragGestureController = (options = {}) => {
       // metadata about interaction sources
       grabEvent: event,
       dragEvent: null,
-      releaseEvent: null
+      releaseEvent: null,
+      // The gesture ended without the hand ever letting go: the browser took
+      // the touch to scroll with, another gesture took the pointer. Whoever
+      // reads it must not commit anything — a release that was not asked for
+      // says nothing about where things belong.
+      cancelled: false
     };
     definePropertyAsReadOnly(gestureInfo, "name");
     definePropertyAsReadOnly(gestureInfo, "direction");
@@ -8556,9 +8561,13 @@ const createDragGestureController = (options = {}) => {
     };
     const release = ({
       event = new CustomEvent("programmatic"),
+      cancelled = event.type === "pointercancel",
       releaseX = gestureInfo.dragX,
       releaseY = gestureInfo.dragY
     } = {}) => {
+      // Written before the last drag is reported, so the callbacks reading the
+      // end of the gesture all see the same one.
+      gestureInfo.cancelled = cancelled;
       drag(releaseX, releaseY, {
         event,
         isRelease: true
@@ -8613,10 +8622,13 @@ const createDragGestureController = (options = {}) => {
         event: dragEvent
       });
     };
-    const releaseViaPointer = mouseupEvent => {
-      const [mouseReleaseX, mouseReleaseY] = mouseEventCoords(mouseupEvent);
+    const releaseViaPointer = (pointerEvent, {
+      cancelled
+    } = {}) => {
+      const [mouseReleaseX, mouseReleaseY] = mouseEventCoords(pointerEvent);
       dragGesture.release({
-        event: mouseupEvent,
+        event: pointerEvent,
+        cancelled,
         releaseX: mouseReleaseX,
         releaseY: mouseReleaseY
       });
@@ -8651,48 +8663,70 @@ const createDragGestureController = (options = {}) => {
       document.removeEventListener("selectstart", preventSelectStart);
     });
     /*
-     * Refusing every selection also refuses the one a press is entitled to
-     * make: a double click selects the word under it, and that selection is
-     * over before the pointer has gone anywhere. It is made here instead,
-     * spelled out (see selectWordAtPoint) rather than left to a browser
+     * Refusing every selection also refuses the ones a press is entitled to
+     * make: a double click selects the word under it, a triple click the
+     * paragraph around it, and both are over before the pointer has gone
+     * anywhere. They are made here instead, spelled out (see
+     * selectWordAtPoint, selectParagraphAtPoint) rather than left to a browser
      * heuristic that cannot tell a drag from a click.
      *
+     * Read from `click` rather than `dblclick`, because a triple click has no
+     * event of its own: what tells the clicks apart is `detail`, the count the
+     * browser keeps of how many presses landed in the same place in a row — 2
+     * for a word, 3 and beyond for a paragraph (a fourth click keeps the
+     * paragraph, the way the browser does).
+     *
      * On the document and outliving the gesture, because the gesture is
-     * already over when the second click completes: dblclick comes after
-     * mouseup, the gesture ends at pointerup. It is dropped when it fires, and
-     * otherwise when the next press installs its own — a listener waiting for
-     * a double click that never comes costs nothing until then.
+     * already over when the second click completes: click comes after mouseup,
+     * the gesture ends at pointerup. Kept installed after it fires, since the
+     * click that selects a word is also the one the next click turns into a
+     * paragraph; it goes when the next press installs its own — a listener
+     * waiting for a click that never comes costs nothing until then.
      */
-    removePendingDoubleClickListener();
-    const onDoubleClick = dblclickEvent => {
-      removePendingDoubleClickListener = NOOP;
+    removePendingMultiClickListener();
+    const onClick = clickEvent => {
+      const clickCount = clickEvent.detail;
+      if (clickCount < 2) {
+        return;
+      }
       // A drag that happened is a gesture, not a click: the second press of a
       // double click can be the one that drags, and what it drags must not end
       // up selected too.
       if (dragGesture.gestureInfo.started) {
         return;
       }
+      // Only the clicks that continue THIS press: the listener outlives the
+      // gesture and the page keeps being clicked elsewhere, where the browser
+      // is doing its own selecting — a second opinion there would only fight
+      // it.
+      const clickTarget = clickEvent.target;
+      if (clickTarget !== grabEvent.target && !clickTarget.contains(grabEvent.target)) {
+        return;
+      }
       // Text the page says is not selectable stays not selectable: a
       // programmatic selection goes through `user-select: none` in every
       // engine — it is a rule about what the USER may start, and the browser
       // does not read it back when asked directly. Read here so that doing the
       // browser's work does not also undo what the page asked of it.
-      if (!isSelectable(dblclickEvent.target)) {
+      if (!isSelectable(clickEvent.target)) {
+        return;
+      }
+      if (clickCount === 2) {
+        selectWordAtPoint(clickEvent.clientX, clickEvent.clientY);
         return;
       }
-      selectWordAtPoint(dblclickEvent.clientX, dblclickEvent.clientY);
+      selectParagraphAtPoint(clickEvent.clientX, clickEvent.clientY);
     };
-    document.addEventListener("dblclick", onDoubleClick, {
-      once: true
-    });
-    removePendingDoubleClickListener = () => {
-      removePendingDoubleClickListener = NOOP;
-      document.removeEventListener("dblclick", onDoubleClick);
+    document.addEventListener("click", onClick);
+    removePendingMultiClickListener = () => {
+      removePendingMultiClickListener = NOOP;
+      document.removeEventListener("click", onClick);
     };
     const cleanup = initializer({
       onMove: dragViaPointer,
       onRelease: releaseViaPointer,
-      gestureInfo: dragGesture.gestureInfo
+      gestureInfo: dragGesture.gestureInfo,
+      dragGesture
     });
     dragGesture.addReleaseCallback(() => {
       cleanup();
@@ -8704,7 +8738,8 @@ const createDragGestureController = (options = {}) => {
       return initDragByPointer(grabEvent, options, ({
         onMove,
         onRelease,
-        gestureInfo
+        gestureInfo,
+        dragGesture
       }) => {
         // Captured on something that will still be there at the end of the
         // gesture: the browser releases the capture when its element leaves the
@@ -8712,7 +8747,21 @@ const createDragGestureController = (options = {}) => {
         // finger would lose the pointer at its first move. Callers whose target
         // is stable have nothing to say and keep it.
         const target = options?.pointerCaptureElement || grabEvent.target;
-        target.setPointerCapture(grabEvent.pointerId);
+        // The capture is ONE per pointer for the whole document: taking it is
+        // taking it away from whoever had it, who is then told the exact same
+        // thing it is told when its own gesture ends. So it is taken when this
+        // gesture is established and not a moment earlier — for most callers
+        // that is the grab itself (the intent was settled before, by a handle
+        // or a long press), and for a caller that is still deciding what the
+        // press means, it is whenever it says so (see capturePointer).
+        let captured = false;
+        dragGesture.capturePointer = () => {
+          captured = true;
+          target.setPointerCapture(grabEvent.pointerId);
+        };
+        if (!options?.pointerCaptureDeferred) {
+          dragGesture.capturePointer();
+        }
         /*
          * A touchmove left alone is the browser deciding the touch belongs to
          * it: it takes it to scroll with, and a touch it has taken is a pointer
@@ -8746,7 +8795,7 @@ const createDragGestureController = (options = {}) => {
         grabTarget.addEventListener("touchmove", preventTouchScroll, {
           passive: false
         });
-        // Only OUR capture ending means this gesture is over:
+        // Only OUR capture ending is this gesture's business:
         // lostpointercapture bubbles, so a descendant giving up its own capture
         // walks straight into this listener. That is not a rare shape — it is
         // exactly what happens when a gesture hands over to another one (a
@@ -8754,16 +8803,37 @@ const createDragGestureController = (options = {}) => {
         // the pressed element, while the real one is being held on a container
         // above it), and taken as our own it kills the new gesture one
         // millisecond after it started.
+        //
+        // And when it IS ours, it is a loss, never an end: the ends a gesture
+        // has are the pointer going up and the pointer being cancelled, both
+        // listened for below. A capture that goes while the pointer is still
+        // down was taken — by another gesture, or by the element it was held
+        // on leaving the document — and what was being carried must go back
+        // rather than land wherever the hand happened to be.
         const onCaptureLost = pointerEvent => {
-          if (pointerEvent.target !== target) {
+          if (!captured || pointerEvent.target !== target) {
             return;
           }
-          onRelease(pointerEvent);
+          onRelease(pointerEvent, {
+            cancelled: true
+          });
         };
         target.addEventListener("lostpointercapture", onCaptureLost);
         target.addEventListener("pointercancel", onRelease);
-        target.addEventListener("pointermove", onMove);
         target.addEventListener("pointerup", onRelease);
+        // Read from the window rather than from the element while the pointer
+        // is not this gesture's: without a capture a move is delivered to
+        // whatever is under the pointer, and a hand that has left the element
+        // is exactly the hand this gesture is trying to make sense of. The
+        // capture phase reaches the window before anything else, captured or
+        // not, so there is one place to read whichever way the gesture ends up.
+        const onPointerMove = pointerEvent => {
+          if (pointerEvent.pointerId !== grabEvent.pointerId) {
+            return;
+          }
+          onMove(pointerEvent);
+        };
+        window.addEventListener("pointermove", onPointerMove, true);
         // The end of the pointer is also listened for on the window, because
         // the end is the one event a gesture cannot afford to miss and the
         // element it is captured on is not always on its way: a pointer can
@@ -8793,15 +8863,17 @@ const createDragGestureController = (options = {}) => {
           grabTarget.removeEventListener("touchmove", preventTouchScroll);
           target.removeEventListener("lostpointercapture", onCaptureLost);
           target.removeEventListener("pointercancel", onRelease);
-          target.removeEventListener("pointermove", onMove);
+          window.removeEventListener("pointermove", onPointerMove, true);
           target.removeEventListener("pointerup", onRelease);
           window.removeEventListener("pointerup", onPointerEnd, true);
           window.removeEventListener("pointercancel", onPointerEnd, true);
-          // Asked for only while there is something to give back: a pointer
-          // that is up no longer exists, the browser has already dropped the
+          // Only what this gesture took, and only while there is something to
+          // give back: a capture on that element may be someone else's (two
+          // gestures reading the same press hold the same node), and a pointer
+          // that is up no longer exists — the browser has already dropped the
           // capture with it, and asking again throws ("No active pointer with
-          // the given id is found") — on the most ordinary release there is.
-          if (target.hasPointerCapture(grabEvent.pointerId)) {
+          // the given id is found") on the most ordinary release there is.
+          if (captured && target.hasPointerCapture(grabEvent.pointerId)) {
             target.releasePointerCapture(grabEvent.pointerId);
           }
         };
@@ -8882,7 +8954,7 @@ const definePropertyAsReadOnly = (object, propertyName) => {
   });
 };
 const NOOP = () => {};
-let removePendingDoubleClickListener = NOOP;
+let removePendingMultiClickListener = NOOP;
 
 // What a double click selects when the browser is allowed to do it itself: the
 // word around the caret the click lands on.
@@ -8902,6 +8974,46 @@ const selectWordAtPoint = (x, y) => {
     selection.modify("extend", "forward", "word");
   }
 };
+
+// What a triple click selects when the browser is allowed to do it itself: the
+// paragraph around the caret the click lands on — in the DOM, the contents of
+// the closest block the caret sits in.
+//
+// Drawn from the box tree rather than from `selection.modify("extend",
+// "forward", "paragraph")`: "paragraph" is a granularity Gecko never
+// implemented (it stops at word and line), so the modify route would select a
+// line in Firefox and a paragraph in Chrome.
+const selectParagraphAtPoint = (x, y) => {
+  const caretRange = createCaretRange(x, y);
+  if (!caretRange) {
+    return;
+  }
+  const block = getClosestBlock(caretRange.startContainer);
+  if (!block) {
+    return;
+  }
+  const selection = window.getSelection();
+  selection.removeAllRanges();
+  const paragraphRange = document.createRange();
+  paragraphRange.selectNodeContents(block);
+  selection.addRange(paragraphRange);
+};
+const getClosestBlock = node => {
+  let element = node.nodeType === 1 ? node : node.parentElement;
+  while (element) {
+    const {
+      display
+    } = window.getComputedStyle(element);
+    // Everything that is not laid out as a line inside another line: the first
+    // ancestor that breaks the flow is the one whose text reads as a paragraph
+    // of its own.
+    if (!display.startsWith("inline") && display !== "contents") {
+      return element;
+    }
+    element = element.parentElement;
+  }
+  return null;
+};
 const createCaretRange = (x, y) => {
   if (document.caretPositionFromPoint) {
     const caretPosition = document.caretPositionFromPoint(x, y);
@@ -9162,7 +9274,13 @@ const dragAfterDistance = (grabEvent, dragGestureInitializer, threshold) => {
     }
   });
   const significantDragGesture = significantDragGestureController.grabViaPointer(grabEvent, {
-    element: grabEvent.target
+    element: grabEvent.target,
+    // This one owns nothing: it measures a distance to find out whether there
+    // is a gesture at all, and it is over the moment there is. Taking the
+    // pointer for that would take it from whoever is already holding this same
+    // element for a gesture of their own — and giving it back at the threshold
+    // would tell them theirs is over.
+    pointerCaptureDeferred: true
   });
 };
 const dragAfterLongPress = (grabEvent, dragGestureInitializer, {
@@ -12091,6 +12209,12 @@ const resolveDropMeaning = ({
   tossDistance = TOSS_DISTANCE_TO_COMMIT,
   tossSpeed = TOSS_SPEED_TO_COMMIT
 }) => {
+  if (gestureInfo.cancelled) {
+    // Nobody let go of anything: the gesture was taken away mid-air (the
+    // pointer cancelled, another gesture taking it). Where the thing happened
+    // to be at that moment is not a place it was put.
+    return "cancel";
+  }
   if (canToss) {
     const {
       xDelta,
@@ -12884,8 +13008,10 @@ const DRAG_RESISTANCE = 0.3;
 
 // What a drag must not start on: something that reads the pointer itself. A
 // button or a link is not in the list — dragging from one travels, and the
-// click it would have made is swallowed on the way out.
-const DRAG_EXCLUDED_SELECTOR = ["input", "textarea", "select", '[contenteditable=""]', '[contenteditable="true"]', "[data-no-drag-travel]"].join(",");
+// click it would have made is swallowed on the way out. A drag source is: it
+// answers the same press, and a travel starting there takes the pointer capture
+// away from a gesture already carrying something.
+const DRAG_EXCLUDED_SELECTOR = ["input", "textarea", "select", '[contenteditable=""]', '[contenteditable="true"]', "[data-drag-source]", "[data-drag-handle]", "[data-no-drag-travel]"].join(",");
 
 // Which axes a box travels on, one attribute per gesture, said in the DOM by
 // whoever owns the box: it is what a box ABOVE another reads to know the
@@ -13278,6 +13404,9 @@ const startDragToTravel = (pointerDownEvent, {
           pulled: started.slack || 0
         };
         document.documentElement.setAttribute(WALKING_ATTRIBUTE, axis);
+        // The travel exists: from here the pointer is this box's, and it is
+        // followed wherever it goes.
+        dragGesture.capturePointer();
       }
       const {
         axis
@@ -13349,9 +13478,12 @@ const startDragToTravel = (pointerDownEvent, {
       const towardsSomething = pulled > 0 ? travel.travelBack : travel.travelOn;
       const velocity = axis === "x" ? gestureInfo.velocityX : gestureInfo.velocityY;
       // A gesture taken away rather than let go of (the browser scrolling
-      // something else, a call coming in) said nothing: things go back.
+      // something else, a call coming in, another gesture taking the pointer)
+      // said nothing: things go back.
       const releaseEvent = gestureInfo.releaseEvent || gestureInfo.dragEvent;
-      const cancelled = releaseEvent?.type === "pointercancel";
+      const {
+        cancelled
+      } = gestureInfo;
       onEnd({
         axis,
         pulled,
@@ -13382,7 +13514,15 @@ const startDragToTravel = (pointerDownEvent, {
       // gesture may take that away (a page that travels navigates, and the
       // router unmounts the page being left), and a capture whose element
       // leaves the document is a capture the browser drops.
-      pointerCaptureElement: element
+      pointerCaptureElement: element,
+      // A travel is established in two steps, and the pointer is only owned
+      // after the second: the distance below says the press is not a click, and
+      // the first move says which axis it leans on — which this box may not
+      // walk, or the caller may refuse. Taken at the first step, the capture
+      // would be taken away from whoever else is reading the same press for
+      // gestures that give themselves up one event later. It is claimed once
+      // the travel exists, in onDrag below.
+      pointerCaptureDeferred: true
     });
     return dragGesture;
   };

package/package.json

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