@jsenv/dom 0.17.81 → 0.17.83

package/dist/jsenv_dom.js

@@ -10147,6 +10147,11 @@ const dragSourceThatStoodDown = (pressEvent) => {
   return pressEvent[STOOD_DOWN] || null;
 };
 
+// How far (px) a press travels before it means drag. Also how far a carry that
+// was handed over must go before it has gone anywhere (see handedOver in
+// drag_to.js): that is the same question, asked of the hand holding it.
+const DRAG_INTENT_THRESHOLD = 5;
+
 /**
  * Waits for the user to mean it, then starts a drag gesture.
  *
@@ -10183,12 +10188,16 @@ const dragSourceThatStoodDown = (pressEvent) => {
  *   drag_gesture.js). `"manual"` leaves the press to the browser until the
  *   caller's own gesture says otherwise. A long press waits without refusing
  *   anything either way (see the stylesheet above).
+ * @param {boolean} [options.handedOver=false]
+ *   The press was held on something else, which handed it to this drag (see
+ *   `handedOver` in drag_to.js): the hold that did so established the intent,
+ *   so the gesture starts at once, as it does from a dedicated handle.
  */
 const dragAfterIntent = (
   grabEvent,
   dragGestureInitializer,
   {
-    threshold = 5,
+    threshold = DRAG_INTENT_THRESHOLD,
     longPress = "if-touch",
     longPressDelay = 400,
     longPressSlop = 8,
@@ -10196,6 +10205,7 @@ const dragAfterIntent = (
     onPressCancel,
     onPress,
     selection = "auto",
+    handedOver = false,
   } = {},
 ) => {
   if (!isPrimaryButtonEvent(grabEvent)) {
@@ -10204,7 +10214,7 @@ const dragAfterIntent = (
   const target = grabEvent.target;
   const isDedicatedHandle =
     target.closest && target.closest("[data-drag-handle]");
-  if (isDedicatedHandle) {
+  if (isDedicatedHandle || handedOver) {
     startDragGesture(dragGestureInitializer);
     return;
   }
@@ -10836,6 +10846,82 @@ const getDragCoordinates = (
   return [leftRelativeToScrollContainer, topRelativeToScrollContainer];
 };
 
+/**
+ * Which presses are still down, and where each one is now.
+ *
+ * A press is read by whoever it landed on, from its `pointerdown` to its
+ * `pointerup`. Some are handed over halfway: a hold opens a popup, and
+ * something inside it takes the press the finger is still making (see
+ * `handedOver` in drag_to.js). Whoever receives it was not listening when it
+ * began, so it cannot know whether the pointer has let go since, nor where it
+ * is now — the `pointerdown` it is handed says where the finger WAS. Listened
+ * for from the start instead, on the window in capture so that nothing lower
+ * can hide a press from it.
+ *
+ * Keyed by the `pointerdown` itself and not by the pointer: the same finger
+ * lifted and put down again is another press, and a press handed over late
+ * must not be answered by the next one.
+ */
+
+const pressDownByPointerId = new Map();
+
+/**
+ * Where the pointer of `pressEvent` is now, while that press is still down.
+ *
+ * @param {PointerEvent} pressEvent A `pointerdown`.
+ * @returns {{ clientX: number, clientY: number } | null} `null` once that press
+ *   has ended — let go of, or cancelled by the browser.
+ */
+const readPressDown = (pressEvent) => {
+  const pressDown = pressDownByPointerId.get(pressEvent.pointerId);
+  if (!pressDown || pressDown.pressEvent !== pressEvent) {
+    return null;
+  }
+  return { clientX: pressDown.clientX, clientY: pressDown.clientY };
+};
+
+const onPointerMove = (pointerMoveEvent) => {
+  const pressDown = pressDownByPointerId.get(pointerMoveEvent.pointerId);
+  if (!pressDown) {
+    return;
+  }
+  pressDown.clientX = pointerMoveEvent.clientX;
+  pressDown.clientY = pointerMoveEvent.clientY;
+};
+const onPointerEnd = (pointerEndEvent) => {
+  pressDownByPointerId.delete(pointerEndEvent.pointerId);
+  if (pressDownByPointerId.size === 0) {
+    // A mouse moves all the time without being pressed: nothing is read from
+    // it between presses.
+    window.removeEventListener("pointermove", onPointerMove, true);
+  }
+};
+window.addEventListener(
+  "pointerdown",
+  (pointerDownEvent) => {
+    if (pressDownByPointerId.size === 0) {
+      window.addEventListener("pointermove", onPointerMove, {
+        capture: true,
+        passive: true,
+      });
+    }
+    pressDownByPointerId.set(pointerDownEvent.pointerId, {
+      pressEvent: pointerDownEvent,
+      clientX: pointerDownEvent.clientX,
+      clientY: pointerDownEvent.clientY,
+    });
+  },
+  { capture: true, passive: true },
+);
+window.addEventListener("pointerup", onPointerEnd, {
+  capture: true,
+  passive: true,
+});
+window.addEventListener("pointercancel", onPointerEnd, {
+  capture: true,
+  passive: true,
+});
+
 installImportMetaCssBuild(import.meta);
 
 const css$4 = /* css */ `.navi_constraint_feedback_line {
@@ -14324,6 +14410,16 @@ const css$1 = /* css */ `.navi_drop_hint {
   opacity: 0;
 }
 
+[navi-drag-clone-wrapper][data-reaching] {
+  transition: translate .2s ease-out;
+}
+
+@starting-style {
+  [navi-drag-clone-wrapper][data-reaching] {
+    translate: var(--clone-reach-from);
+  }
+}
+
 [navi-drag-clone] {
   box-shadow: var(--drag-clone-shadow, 0 12px 28px #00000038);
   transform: scale(var(--drag-clone-scale, 1.03));
@@ -14740,6 +14836,11 @@ const createDragToMoveGestureController = ({
     element,
     referenceElement,
     elementToMove,
+    // How far from `element` what moves starts, when it does not start over it
+    // (a copy brought to a hand that pressed elsewhere, see handedOver). The
+    // layout is then the box the hand holds, so constraints and auto-scroll
+    // read what is seen; the translate is unaffected, it counts from the grab.
+    grabOffset,
     event,
     ...rest
   } = {}) => {
@@ -14752,8 +14853,12 @@ const createDragToMoveGestureController = ({
     const dragGesture = grab({
       element,
       scrollContainer,
-      layoutScrollableLeft: elementScrollableLeft,
-      layoutScrollableTop: elementScrollableTop,
+      layoutScrollableLeft: grabOffset
+        ? elementScrollableLeft + grabOffset.x
+        : elementScrollableLeft,
+      layoutScrollableTop: grabOffset
+        ? elementScrollableTop + grabOffset.y
+        : elementScrollableTop,
       event,
       ...rest,
     });
@@ -14847,6 +14952,27 @@ const createDragToMoveGestureController = ({
  *   for: one without the other is moving the thing while hesitating, and nothing is
  *   thrown away on a hesitation. A throw is judged before any landing; a release
  *   with no place under it is `leave`'s, not a toss — there is no speed to it.
+ * @param {boolean} [options.handedOver=false]
+ *   `event` is a press held on something ELSE, handed to this element: a hold
+ *   opened a popup, and what the popup holds is to be carried by the finger
+ *   still down (see HANDED OVER below). Nothing happens when that press has
+ *   ended in the meantime.
+ *
+ * HANDED OVER. The press did not land on the element, and the element may not
+ * have existed when it did, so the three things a press on it would have said
+ * are said otherwise. Where it landed is none of the element's business (no
+ * opted-out area is looked for). Whether the hand means it was proved by the
+ * hold that handed it over, so the carry starts at once. And where the hand is
+ * has nothing to do with where the element stands, so the copy is brought to
+ * the hand — centred on the finger, flying there from the element's box —
+ * rather than following it from a distance. Where it was brought then stands
+ * for the element's own place: over whatever the finger happened to be on, so
+ * nothing counts as under it until the hand has taken it further than
+ * `threshold`, and a release before that is a hand that changed its mind. The
+ * pointer is taken on the element, away from what the finger first touched.
+ * Only a copy can be brought
+ * like that: `move` carries the element itself, which would leave its place
+ * just by being handed a press, and is not started.
  *
  * Everything else is forwarded to `createDragToMoveGestureController`
  * (`areaConstraint`, `autoScrollAreaPadding`, `direction`…) and to `dragAfterIntent`
@@ -14868,8 +14994,9 @@ const startDragTo = (
   { draggedElement = event.currentTarget, ...options } = {},
 ) => {
   // An area that opted out of dragging (a text one wants to select, a control that
-  // owns the gesture, a callout): the press there is none of our business.
-  if (isPressIgnored(event.target, draggedElement)) {
+  // owns the gesture, a callout): the press there is none of our business. A
+  // press handed over landed outside the element by construction.
+  if (!options.handedOver && isPressIgnored(event.target, draggedElement)) {
     return undefined;
   }
   // A secondary button (right click and friends) is a context menu, not a grab.
@@ -14896,6 +15023,9 @@ const startDragTo = (
       ...options,
     });
   }
+  if (options.handedOver) {
+    return undefined;
+  }
   return startDragToMoveElement(event, {
     draggedElement,
     canMove,
@@ -15195,6 +15325,10 @@ const resolveDropMeaning = ({
   canLeave,
   tossDistance = TOSS_DISTANCE_TO_COMMIT,
   tossSpeed = TOSS_SPEED_TO_COMMIT,
+  // How far it may have been taken and still have been taken nowhere: not at
+  // all for a carry that starts over its own place, the drag threshold for one
+  // brought to a hand (see handedOver).
+  stillWithin = 0,
 }) => {
   if (gestureInfo.cancelled) {
     // Nobody let go of anything: the gesture was taken away mid-air (the
@@ -15220,7 +15354,7 @@ const resolveDropMeaning = ({
   // It has to have gone somewhere to be put anywhere, or away from anything:
   // picked up and put straight back down is a hand that changed its mind.
   const { xDelta, yDelta } = gestureInfo.layout;
-  if (!xDelta && !yDelta) {
+  if (Math.hypot(xDelta, yDelta) <= stillWithin) {
     return "cancel";
   }
   if (canLeave && releasedOutside) {
@@ -15278,30 +15412,44 @@ const startDragToCarryCopy = (
     direction = canLand || canLeave
       ? { x: true, y: true }
       : { x: false, y: true },
-    threshold,
+    // Defaulted here rather than left to dragAfterIntent: a carry handed over
+    // reads it too (see stillWithin).
+    threshold = DRAG_INTENT_THRESHOLD,
     longPress,
     longPressDelay,
     longPressSlop,
     onPressStart,
     onPressCancel,
     onPress,
+    handedOver,
     ...options
   },
 ) => {
   // An area that opted out of dragging (a text one wants to select, a control
   // that owns the gesture, a callout): the press there is none of our business.
-  if (isPressIgnored(event.target, draggedElement)) {
+  if (!handedOver && isPressIgnored(event.target, draggedElement)) {
     return undefined;
   }
   // A secondary button (right click and friends) is a context menu, not a grab.
   if (!isPrimaryButtonEvent(event)) {
     return undefined;
   }
+  // Where the hand is, for a press handed over: its `pointerdown` says where it
+  // WAS, before the hold and whatever the hold opened. Let go of meanwhile, it
+  // is not picked up after the fact.
+  const handedPointer = handedOver ? readPressDown(event) : null;
+  if (handedOver && !handedPointer) {
+    return undefined;
+  }
   // One press, one carry — and the same carry over again when the hand comes back
   // for the copy while it is still flying home (see settleCloneBack). Nothing is
   // made twice in that case: it is the same copy, taken in hand again where it
-  // had got to.
-  const startCarry = (pointerEvent, cloneWrapperCaught, onCarryStart) => {
+  // had got to — by a press ON it, so never a press handed over.
+  const startCarry = (
+    pointerEvent,
+    { cloneWrapperCaught, onCarryStart } = {},
+  ) => {
+    const handedTo = cloneWrapperCaught ? null : handedPointer;
     pointerEvent.preventDefault();
     return dragAfterIntent(
       pointerEvent,
@@ -15310,8 +15458,21 @@ const startDragToCarryCopy = (
         // one moment both ways in (a finger held still, a mouse travelled)
         // agree on.
         onCarryStart?.();
+        // From the element's centre to the finger: the copy is brought that far,
+        // since the hand that pressed elsewhere has nothing to follow it from.
+        const reach = handedTo
+          ? measureReach(draggedElement, handedTo)
+          : undefined;
+        // …and has been taken nowhere until it is further from there than a
+        // press travels to mean drag.
+        const stillWithin = handedTo ? threshold : 0;
+        const hasNotLeftHand = (gestureInfo) =>
+          Boolean(handedTo) &&
+          Math.hypot(gestureInfo.layout.xDelta, gestureInfo.layout.yDelta) <=
+            stillWithin;
         const cloneWrapper =
-          cloneWrapperCaught || createDragClone(draggedElement, pointerEvent);
+          cloneWrapperCaught ||
+          createDragClone(draggedElement, handedTo || pointerEvent, reach);
         if (cloneWrapperCaught) {
           liftDragClone(cloneWrapperCaught, pointerEvent);
         }
@@ -15323,10 +15484,26 @@ const startDragToCarryCopy = (
           areaConstraint,
           ...options,
         });
-        const dragGesture = gestureController.grabViaPointer(pointerEvent, {
-          element: draggedElement,
-          elementToMove: cloneWrapper,
-        });
+        const dragGesture = gestureController.grabViaPointer(
+          pointerEvent,
+          handedTo
+            ? {
+                element: draggedElement,
+                elementToMove: cloneWrapper,
+                // Counted from where the finger is now, so a release that
+                // never moved it is still a hand that changed its mind.
+                grabX: handedTo.clientX,
+                grabY: handedTo.clientY,
+                grabOffset: reach,
+                // Off what the finger first touched, which the popup now
+                // covers: the pointer is the carry's from here.
+                pointerCaptureElement: draggedElement,
+              }
+            : {
+                element: draggedElement,
+                elementToMove: cloneWrapper,
+              },
+        );
         // getDropTargetInfo uses gestureInfo.elementImpacted to compute the dragged rect.
         // Point it at the clone so drop detection tracks the clone's current position.
         dragGesture.gestureInfo.elementImpacted = cloneWrapper;
@@ -15385,6 +15562,16 @@ const startDragToCarryCopy = (
           if (!dropHintEl) {
             return;
           }
+          // Brought to the hand, the copy starts over whatever the finger is on,
+          // and a place found there is one it was never taken to — the release
+          // frame included, which is how a hold let go of without moving would
+          // land. Around where it was brought is its own place, as the element's
+          // box is for a carry that starts there: nothing is under it yet.
+          if (hasNotLeftHand(gestureInfo)) {
+            clearDropHint();
+            gestureInfo.dropTargetInfo = null;
+            return;
+          }
           const allItems = [];
           const items = [];
           for (const el of containerElement.querySelectorAll(itemSelector)) {
@@ -15500,6 +15687,10 @@ const startDragToCarryCopy = (
         dragGesture.addReleaseCallback(async (gestureInfo) => {
           clearDropHintDOM();
           dropHintEl?.remove();
+          // Let go of on its way to the hand: it is where the hand is, and from
+          // there it goes wherever the answer sends it — on a translate of its
+          // own, which the flight to the hand must not be holding.
+          cloneWrapper.removeAttribute("data-reaching");
 
           // What THIS release means, from what the element said it can answer. A
           // throw is asked about first: it is the more insistent of the two, and a
@@ -15527,6 +15718,7 @@ const startDragToCarryCopy = (
             canLeave,
             tossDistance,
             tossSpeed,
+            stillWithin,
           });
           // The hand has let go, and what that means is already known — the
           // answer to it has not run yet. Told, not asked: nothing here waits on
@@ -15544,7 +15736,10 @@ const startDragToCarryCopy = (
           const copyLetGoOf = letCopyBeCaught(
             cloneWrapper,
             (pointerDownEvent, whenCarried) =>
-              startCarry(pointerDownEvent, cloneWrapper, whenCarried),
+              startCarry(pointerDownEvent, {
+                cloneWrapperCaught: cloneWrapper,
+                onCarryStart: whenCarried,
+              }),
           );
 
           // The copy stops where the hand left it, and the answer is given a way to
@@ -15648,6 +15843,7 @@ const startDragToCarryCopy = (
         onPressStart,
         onPressCancel,
         onPress,
+        handedOver: Boolean(handedTo),
       },
     );
   };
@@ -15951,9 +16147,23 @@ const liftDragClone = (cloneWrapper, pointerEvent) => {
   cloneWrapper.firstElementChild.setAttribute("navi-drag-clone", "");
 };
 
+// From the centre of the element to the pointer, for a copy brought to a hand
+// that pressed elsewhere (see handedOver): centred rather than held at the point
+// the finger had on what it pressed, since that was another box.
+const measureReach = (element, pointer) => {
+  const rect = element.getBoundingClientRect();
+  return {
+    x: pointer.clientX - (rect.left + rect.width / 2),
+    y: pointer.clientY - (rect.top + rect.height / 2),
+  };
+};
+
 let dragCloneCount = 0;
-const createDragClone = (element, pointerEvent) => {
+const createDragClone = (element, grabPoint, reach) => {
   const rect = element.getBoundingClientRect();
+  // Over the element, or shifted to where the hand is (see measureReach).
+  const left = reach ? rect.left + reach.x : rect.left;
+  const top = reach ? rect.top + reach.y : rect.top;
 
   const wrapper = document.createElement("div");
   wrapper.setAttribute("navi-drag-clone-wrapper", "");
@@ -15965,13 +16175,26 @@ const createDragClone = (element, pointerEvent) => {
   // Manual: it is opened and closed with the drag, and must survive an Escape
   // or a click elsewhere (light dismiss would take it away mid-gesture).
   wrapper.setAttribute("popover", "manual");
-  setCloneViewportRect(wrapper, element);
-  // Grab point within the element — used as transform-origin so the
+  wrapper.style.setProperty("--clone-top", `${top}px`);
+  wrapper.style.setProperty("--clone-left", `${left}px`);
+  wrapper.style.setProperty("--clone-width", `${rect.width}px`);
+  wrapper.style.setProperty("--clone-height", `${rect.height}px`);
+  if (reach) {
+    // It flies there from the element's box, so the eye follows what was
+    // picked up rather than seeing it appear under the finger (see the
+    // stylesheet).
+    wrapper.style.setProperty(
+      "--clone-reach-from",
+      `${-reach.x}px ${-reach.y}px`,
+    );
+    wrapper.setAttribute("data-reaching", "");
+  }
+  // Grab point within the copy — used as transform-origin so the
   // scale expands from where the user clicked, not the element center.
-  // These offsets are element-relative so viewport coords are correct here.
+  // These offsets are copy-relative so viewport coords are correct here.
   wrapper.style.setProperty(
     "--drag-origin",
-    `${pointerEvent.clientX - rect.left}px ${pointerEvent.clientY - rect.top}px`,
+    `${grabPoint.clientX - left}px ${grabPoint.clientY - top}px`,
   );
   const elementClone = element.cloneNode(true);
   // A deep copy copies the ids too, and two elements answering to one id is a
@@ -21996,33 +22219,45 @@ const measureWidestChildRow = (el) => {
   const borderLeft = parseFloat(containerStyle.borderLeftWidth);
   const borderRight = parseFloat(containerStyle.borderRightWidth);
 
-  // Group children by row using their top position
-  const rowsByTop = new Map();
+  // Rows are found by vertical overlap, not by top: in an "align-items: center"
+  // row, a child taller than its neighbours (a 1px border is enough) starts
+  // higher than them and would open a row of its own.
+  const rows = [];
   for (const child of children) {
     const rect = child.getBoundingClientRect();
     if (rect.width === 0 && rect.height === 0) {
       continue;
     }
-    const top = Math.round(rect.top);
-    const existing = rowsByTop.get(top);
-    if (existing === undefined) {
-      rowsByTop.set(top, { left: rect.left, right: rect.right });
-    } else {
-      if (rect.left < existing.left) {
-        existing.left = rect.left;
-      }
-      if (rect.right > existing.right) {
-        existing.right = rect.right;
-      }
+    const row = rows.find((candidate) => sharesLine(candidate, rect));
+    if (row === undefined) {
+      rows.push({
+        top: rect.top,
+        bottom: rect.bottom,
+        left: rect.left,
+        right: rect.right,
+      });
+      continue;
+    }
+    if (rect.top < row.top) {
+      row.top = rect.top;
+    }
+    if (rect.bottom > row.bottom) {
+      row.bottom = rect.bottom;
+    }
+    if (rect.left < row.left) {
+      row.left = rect.left;
+    }
+    if (rect.right > row.right) {
+      row.right = rect.right;
     }
   }
 
-  if (rowsByTop.size <= 1) {
+  if (rows.length <= 1) {
     return null;
   }
 
   let widestRowWidth = 0;
-  for (const { left, right } of rowsByTop.values()) {
+  for (const { left, right } of rows) {
     const rowWidth = right - left;
     if (rowWidth > widestRowWidth) {
       widestRowWidth = rowWidth;

package/package.json

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