work

Author: dmail

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

@@ -4,6 +4,13 @@ import { createDragToMoveGestureController } from "./drag_to_move.js";
 import { getDropTargetInfo } from "./drop_target_detection.js";
 import { moveCSSVars } from "./move_css_vars.js";
 
+// How long the copy takes to leave the screen, and to come back. Written into the
+// CSS below from here: the flight has to be waited for, and a duration living only
+// in a stylesheet is a timing JS cannot read reliably.
+const TOSS_DURATION_MS = 320;
+// Far enough to be off any screen, in the direction the hand was going.
+const TOSS_DISTANCE = 900;
+
 const css = /* css */ `
   /* IN THE PAGE, NOT IN THE LIST: the hint lands on the edge of a row, which
      for the last one is the very bottom of the scroll area — drawn inside it,
@@ -105,13 +112,6 @@ const css = /* css */ `
   }
 
   [navi-drag-clone-wrapper] {
-    /* Nothing in a copy being carried by a pointer is text to select: the
-       selection belongs to the original, which is still in the page. This is the
-       one place the rule is unconditional — an element that can be dragged is
-       usually selectable too (a link is both), and forcing it there would take
-       away a selection made from outside the element.  */
-    user-select: none;
-
     /* Also a popover (see .navi_drop_hint): in the top layer it is over the
        page whatever the page's own stacking is, and the coordinates it is
        given are viewport ones — which is what the pointer carrying it works
@@ -132,9 +132,26 @@ const css = /* css */ `
     opacity: 0.95;
     transition: box-shadow 0.15s ease;
     pointer-events: none;
+    /* Nothing in a copy being carried by a pointer is text to select: the
+       selection belongs to the original, which is still in the page. This is the
+       one place the rule is unconditional — an element that can be dragged is
+       usually selectable too (a link is both), and forcing it there would take
+       away a selection made from outside the element.  */
+    user-select: none;
     overflow: visible;
   }
 
+  /* Ce qui a été lancé: il continue dans la direction du geste jusqu'à sortir de
+     l'écran, et revient par le même chemin si la réponse refuse. */
+  [navi-drag-clone-wrapper][data-tossed] {
+    transition:
+      translate ${TOSS_DURATION_MS}ms ease-out,
+      opacity ${TOSS_DURATION_MS}ms ease-out;
+  }
+  [navi-drag-clone-wrapper][data-tossed="away"] {
+    opacity: 0;
+  }
+
   [navi-drag-clone] {
     transform: scale(var(--drag-clone-scale, 1.03));
     transform-origin: var(--drag-origin);
@@ -206,9 +223,11 @@ const dragCSSVars = [
  *   The list item to drag.
  * @param {Element} [options.containerElement=draggedElement.parentElement]
  *   Element searched with `itemSelector` to find the items to drop between.
- * @param {string} options.itemSelector
+ * @param {string} [options.itemSelector]
  *   CSS selector that matches all list items inside `containerElement`.
- *   Used for drop-target detection and no-op filtering.
+ *   Used for drop-target detection and no-op filtering. Left out, nothing is a
+ *   drop target: no hint is drawn and no reorder can be answered — which is what
+ *   a drag that only ever throws the thing away asks for.
  * @param {function} options.getItemId
  *   Returns the stable ID for a given DOM element.
  *   Signature: `getItemId(element) → id`.
@@ -220,6 +239,15 @@ const dragCSSVars = [
  *   - `syncCloneWithDropTarget`: call it synchronously inside a
  *     `document.startViewTransition` callback, next to the DOM mutation, so the
  *     clone is captured at its landing position.
+ * @param {(detail: {gestureInfo: object, dropTarget: Element|null}) => "reorder"|"toss"|"cancel"} [options.resolveDrop]
+ *   What THIS release means, when the answer is not simply "a target was found or
+ *   not": the same grab can be meant to reorder or to get rid of the thing, and
+ *   only the caller knows which — far and fast is a throw, over a row is a move.
+ *   Left out, a drop target reorders and anything else is cancelled.
+ * @param {(detail: {gestureInfo: object}) => Promise|void} [options.onToss]
+ *   The release was a throw. The clone leaves the screen the way it was thrown
+ *   while this runs; it comes back if the promise rejects, because the thing still
+ *   exists and the screen has to say so.
  * @param {object} [options.direction={ x: false, y: true }]
  *   Axes along which dragging is allowed. Passed to `createDragToMoveGestureController`.
  * @param {number} [options.threshold=5]
@@ -245,6 +273,8 @@ export const startDragToReorder = (
     itemSelector,
     getItemId,
     onReorder,
+    resolveDrop,
+    onToss,
     direction = { x: false, y: true },
     threshold,
     longPress,
@@ -319,6 +349,11 @@ export const startDragToReorder = (
       };
 
       dragGesture.addDragCallback((gestureInfo) => {
+        if (!itemSelector) {
+          // Nothing is a drop target: there is no hint to draw and no landing to
+          // look for (see itemSelector).
+          return;
+        }
         const allItems = [];
         const items = [];
         for (const el of containerElement.querySelectorAll(itemSelector)) {
@@ -397,7 +432,29 @@ export const startDragToReorder = (
         dropHintEl.remove();
         restoreCSSVars();
 
-        if (currentBeforeElement !== undefined) {
+        const hasDropTarget = currentBeforeElement !== undefined;
+        const dropMeans = resolveDrop
+          ? resolveDrop({
+              gestureInfo,
+              dropTarget: hasDropTarget ? currentReleaseElement : null,
+            })
+          : hasDropTarget
+            ? "reorder"
+            : "cancel";
+
+        if (dropMeans === "toss") {
+          // Bake the position the hand left it at, so the flight starts from
+          // there rather than from where the clone was declared.
+          setCloneViewportRect(cloneWrapper, cloneWrapper);
+          gestureInfo.cancelPosition();
+          const gone = await tossCloneAway(cloneWrapper, gestureInfo, onToss);
+          if (!gone) {
+            // It still exists, so the screen has to say so: the copy comes back
+            // over the original, and taking it away then reveals the row in
+            // place.
+            await settleCloneBack(cloneWrapper, draggedElement);
+          }
+        } else if (dropMeans === "reorder" && hasDropTarget) {
           const clone = cloneWrapper.firstElementChild;
           // Bake the current visual position (transform included) into the CSS vars
           // so the clone stays where the user released it when we clear the transform.
@@ -491,6 +548,54 @@ const createDropHint = () => {
   return div.firstElementChild;
 };
 
+/**
+ * The copy leaves the screen the way it was thrown, and the caller says what that
+ * meant. Resolves true when it is really gone.
+ *
+ * The answer is asked for WHILE it flies rather than after: the thing is already
+ * far away by the time the request lands, which is the whole point of a gesture
+ * that means "get rid of this" — nobody waits to watch it go.
+ */
+const tossCloneAway = async (cloneWrapper, gestureInfo, onToss) => {
+  const { xDelta, yDelta } = gestureInfo.layout;
+  const distance = Math.hypot(xDelta, yDelta) || 1;
+  cloneWrapper.dataset.tossed = "away";
+  cloneWrapper.style.translate = `${(xDelta / distance) * TOSS_DISTANCE}px ${
+    (yDelta / distance) * TOSS_DISTANCE
+  }px`;
+  try {
+    await onToss?.({ gestureInfo });
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+/**
+ * It comes back where it came from, and only then is taken away — which is what
+ * makes the original reappear in place rather than blink back into it.
+ *
+ * Flown home on `translate` rather than by rewriting the position vars: the vars
+ * hold where the hand let go, the transition is on translate, and moving the vars
+ * would put the copy there instantly instead of taking it there.
+ */
+const settleCloneBack = (cloneWrapper, sourceElement) => {
+  const sourceRect = sourceElement.getBoundingClientRect();
+  const releaseLeft = parseFloat(
+    cloneWrapper.style.getPropertyValue("--clone-left"),
+  );
+  const releaseTop = parseFloat(
+    cloneWrapper.style.getPropertyValue("--clone-top"),
+  );
+  cloneWrapper.dataset.tossed = "back";
+  cloneWrapper.style.translate = `${sourceRect.left - releaseLeft}px ${
+    sourceRect.top - releaseTop
+  }px`;
+  return new Promise((resolve) => {
+    setTimeout(resolve, TOSS_DURATION_MS);
+  });
+};
+
 const createDragClone = (element, pointerEvent) => {
   const rect = element.getBoundingClientRect();
 

packages/frontend/navi/docs/interactions.md

@@ -57,13 +57,13 @@ condition: `{ swipe_right: canArchive && archive }`.
 
 ### The interactions navi detects
 
-| Key                                                    | Read from                                  |
-| ------------------------------------------------------ | ------------------------------------------ |
-| `mousedown` `mouseup` `click` `dblclick` `contextmenu` | the browser's own events                   |
-| `swipe_left` `swipe_right` `swipe_up` `swipe_down`     | a press that travels                       |
-| `longpress`                                            | a press held still                         |
-| `drag_to_reorder`                                      | a row carried to another place in its list |
-| `"keyboard:<shortcut>"`                                | keys, e.g. `"keyboard:ctrl+backspace"`     |
+| Key                                                    | Read from                                            |
+| ------------------------------------------------------ | ---------------------------------------------------- |
+| `mousedown` `mouseup` `click` `dblclick` `contextmenu` | the browser's own events                             |
+| `swipe_left` `swipe_right` `swipe_up` `swipe_down`     | a press that travels                                 |
+| `longpress`                                            | a press held still                                   |
+| `reorder` `toss`                                       | a row carried, then dropped somewhere or thrown away |
+| `"keyboard:<shortcut>"`                                | keys, e.g. `"keyboard:ctrl+backspace"`               |
 
 A name nothing knows how to detect produces a dev warning naming the detectors
 that exist.
@@ -140,41 +140,86 @@ comes back once it settles — a failure leaves the row in place so it can be tr
 again. What a success does to the element is yours (a list that redemands its
 rows, a row that leaves): navi does not make it disappear.
 
-## Reordering a list
+## Reordering, and throwing away
 
-`drag_to_reorder` is `startDragToReorder`'s gesture, whole — a clone carried above
-the page while the original keeps its place, a drop hint, drop targets found by
-intersection, no-op drops filtered out. Every element declaring it marks itself, so
-the set of items IS the set of elements that declared it: no selector to pass, and
-an item that must not move simply does not declare it. Items are identified by
-their `id`.
+`reorder` and `toss` are the same gesture — the element is picked up and carried —
+and they combine. What differs is the release: dropped on another item it changes
+places, thrown far and fast it is gotten rid of. One detector reads both, because
+it is one press.
 
 ```jsx
 <List.Item
   id={task.id}
   data-view-transition-name={`task_${task.id}`}
   interactions={{
-    drag_to_reorder: (event) => {
+    reorder: (event) => {
       const { fromId, toId, syncCloneWithDropTarget } = event.detail;
       return document.startViewTransition(() => {
         syncCloneWithDropTarget();
         setOrder(moveBefore(order, fromId, toId));
       }).finished;
     },
+    toss: (event) => remove(event.detail.id),
   }}
 />
 ```
 
+The gesture is `startDragToReorder`'s, whole: a copy carried above the page while
+the original keeps its place, a drop hint, drop targets found by intersection,
+no-op drops filtered out, the flight of a thrown copy and its return when the
+answer refuses.
+
+Every element declaring `reorder` marks itself, so the set of items IS the set of
+elements that declared it — no selector to pass, and an item that must not move
+simply does not declare it. An element declaring only `toss` marks nothing: it is
+not a place anything lands. Items are named by their `id`.
+
 `toId` is null for a drop at the end. `syncCloneWithDropTarget` must be called
-synchronously inside the transition callback, next to the state change, so the
-clone is captured where it lands rather than where it was let go of — and
-returning the transition is what makes the landing continuous, since the gesture
-keeps its clone until the answer settles.
+synchronously inside the transition callback, next to the state change, so the copy
+is captured where it lands rather than where it was let go of.
+
+**The promise matters in both cases**: the gesture holds its copy until the answer
+settles. Returning the transition is what makes a landing continuous; a `toss` that
+rejects brings the copy back, because the thing still exists and the screen has to
+say so.
+
+A throw is asked about before a landing: a hand that sent something across the
+screen has not asked for it to swap places with whatever it flew over.
 
-Starting the document transition is the application's call, not navi's: a
+Starting a document transition is the application's call, not navi's: a
 `view-transition-name` must be unique per document, so only the application can
 name what moves.
 
+| Attribute                                                | Meaning                                |
+| -------------------------------------------------------- | -------------------------------------- |
+| `data-reorder-axis="x"`                                  | the list runs sideways                 |
+| `data-drag-delay` `data-drag-slop` `data-drag-threshold` | when the press becomes a grab          |
+| `data-toss-distance` `data-toss-speed`                   | how far and how fast counts as a throw |
+
+### Dressing the clone
+
+What the pointer carries is a copy, and a copy of a transparent element is
+invisible — an element has no background unless something gave it one, and a row
+usually gets its own from the list around it, which the copy has left. So the
+clone's look is the page's to declare, through the attributes the gesture puts on
+it:
+
+| Attribute                 | On                                                     |
+| ------------------------- | ------------------------------------------------------ |
+| `navi-drag-clone`         | the copy being carried                                 |
+| `navi-drag-clone-wrapper` | what positions it (already shadowed, in the top layer) |
+| `navi-drag-clone-source`  | the original, still in place (already hidden)          |
+
+```css
+.task[navi-drag-clone] {
+  background: white;
+  border-radius: 6px;
+}
+```
+
+Reusing the item's own class is the point: the copy is that item, so it is styled
+as that item plus whatever being carried changes.
+
 `data-reorder-axis="x"` for a list that runs sideways. `data-reorder-delay`,
 `data-reorder-slop`, `data-reorder-threshold` tune when the press becomes a grab.
 

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

@@ -221,6 +221,15 @@
         font-size: 14px;
         background: white;
       }
+      /* Ce qui est porté par le pointeur. navi pose `navi-drag-clone` sur la
+         copie et `navi-drag-clone-source` sur l'original resté en place — c'est
+         par là qu'on habille l'un et l'autre. Un élément est transparent par
+         défaut, et une copie transparente ne se voit pas : le fond est un choix
+         de la page, pas du geste. */
+      .task[navi-drag-clone] {
+        background: white;
+        border-radius: 6px;
+      }
       .task_handle {
         color: #9aa6b6;
         font-size: 16px;
@@ -921,6 +930,11 @@ <h2 style="margin: 0 0 4px">Sommaire</h2>
 
       const ReorderDemo = () => {
         const [order, setOrder] = useState(TASKS.map((task) => task.id));
+        const toss = (event) => {
+          setOrder((previous) =>
+            previous.filter((id) => id !== event.detail.id),
+          );
+        };
         const reorder = (event) => {
           const { fromId, toId, syncCloneWithDropTarget } = event.detail;
           // Le nom de transition est unique par document, donc c'est l'appli qui
@@ -944,10 +958,11 @@ <h2 style="margin: 0 0 4px">Sommaire</h2>
         };
         return (
           <div class="demo-section">
-            <Heading id="reorder">Réordonner</Heading>
+            <Heading id="reorder">Réordonner, ou jeter</Heading>
             <p class="legend">
-              Attraper une tâche par sa poignée et la déposer ailleurs. À la
-              souris quelques pixels suffisent, au doigt il faut la tenir.
+              Attraper une tâche par sa poignée : la déposer sur une autre les
+              échange, l'envoyer loin et vite la jette. Un même geste, deux
+              réponses.
             </p>
             <Box className="rows" width="320px">
               <List>
@@ -959,7 +974,7 @@ <h2 style="margin: 0 0 4px">Sommaire</h2>
                       id={id}
                       className="task"
                       data-view-transition-name={`task_${id}`}
-                      interactions={{ drag_to_reorder: reorder }}
+                      interactions={{ reorder, toss }}
                     >
                       <Box flex="x" spacing="s" alignY="center">
                         <span className="task_handle" data-drag-handle>
@@ -972,6 +987,13 @@ <h2 style="margin: 0 0 4px">Sommaire</h2>
                 })}
               </List>
             </Box>
+            {order.length < TASKS.length ? (
+              <Box paddingY="s">
+                <Button action={() => setOrder(TASKS.map((task) => task.id))}>
+                  Rétablir {TASKS.length - order.length}
+                </Button>
+              </Box>
+            ) : null}
           </div>
         );
       };