@weasel-js/labkit 1.4.0 → 1.4.1

package/src/primitives/FloatingPanel.tsx

@@ -1,3 +1,4 @@
+import { openPointerSession, type PointerSession } from '@weasel-js/core';
 import type React from 'react';
 import { type CSSProperties, type ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 import {
@@ -130,67 +131,84 @@ export function FloatingPanel({
     .placements.get(ITEM_ID);
 
   const dragging = useRef<{ x: number; y: number } | null>(null);
-  /** Pressed but not yet moved far enough to be a drag. */
-  const pending = useRef<{ x: number; y: number; pointerId: number } | null>(null);
+  const session = useRef<PointerSession | null>(null);
   const [isDragging, setDragging] = useState(false);
+  // A drag outlives the render that started it, so the reducer's inputs are
+  // read here and not from that render's closure — a container resized
+  // mid-drag would otherwise place the panel against its old box.
+  const layout = useRef({ container, options, item });
+  layout.current = { container, options, item };
+
+  useEffect(() => () => session.current?.cancel(), []);
 
   const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
     if (isInteractive(e.target)) return;
     // The canvas stack underneath owns pan/zoom on the same pointer events.
     e.stopPropagation();
+    const origin = e.currentTarget;
+    const pointerId = e.pointerId;
+    const start = { x: e.clientX, y: e.clientY };
+
+    const end = () => {
+      session.current = null;
+      if (!dragging.current) return;
+      dragging.current = null;
+      setDragging(false);
+      try {
+        origin.releasePointerCapture?.(pointerId);
+      } catch {
+        // Capture is already gone whenever the session ended by losing it.
+      }
+    };
+
     // Armed, not capturing. Capture retargets mouseup to this element, and the
     // browser then synthesizes no `click` on the child under the cursor — so
     // capturing on press makes every non-native control in the panel dead to a
     // real mouse, silently. `isInteractive` only exempts the names it lists; a
     // `role="button"` span, a react-aria control or a canvas is not among them.
-    pending.current = { x: e.clientX, y: e.clientY, pointerId: e.pointerId };
-  };
-
-  const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
-    const armed = pending.current;
-    if (armed && armed.pointerId === e.pointerId && !dragging.current) {
-      if (Math.hypot(e.clientX - armed.x, e.clientY - armed.y) < DRAG_THRESHOLD) return;
-      dragging.current = { x: armed.x, y: armed.y };
-      setDragging(true);
-      e.currentTarget.setPointerCapture?.(e.pointerId);
-    }
-    const from = dragging.current;
-    if (!from) return;
-    const dx = e.clientX - from.x;
-    const dy = e.clientY - from.y;
-    if (dx === 0 && dy === 0) return;
-    dragging.current = { x: e.clientX, y: e.clientY };
-    setPlace(
-      (prev) =>
-        strategy.reduce?.(
-          { at: { [ITEM_ID]: prev }, inner: undefined },
-          {
-            affordanceId: `${FLOATING_DRAG_PREFIX}${ITEM_ID}`,
-            kind: 'drag',
-            payload: { dx, dy },
-          },
-          { container, options, items: [item] },
-        ).at[ITEM_ID] ?? prev,
+    session.current = openPointerSession(
+      origin,
+      e,
+      {
+        onMove: (ev) => {
+          if (!dragging.current) {
+            if (Math.hypot(ev.clientX - start.x, ev.clientY - start.y) < DRAG_THRESHOLD) return;
+            dragging.current = { ...start };
+            setDragging(true);
+            origin.setPointerCapture?.(pointerId);
+          }
+          const from = dragging.current;
+          const dx = ev.clientX - from.x;
+          const dy = ev.clientY - from.y;
+          if (dx === 0 && dy === 0) return;
+          dragging.current = { x: ev.clientX, y: ev.clientY };
+          const { container: box, options: opts, item: only } = layout.current;
+          setPlace(
+            (prev) =>
+              strategy.reduce?.(
+                { at: { [ITEM_ID]: prev }, inner: undefined },
+                {
+                  affordanceId: `${FLOATING_DRAG_PREFIX}${ITEM_ID}`,
+                  kind: 'drag',
+                  payload: { dx, dy },
+                },
+                { container: box, options: opts, items: [only] },
+              ).at[ITEM_ID] ?? prev,
+          );
+        },
+        onEnd: end,
+        onCancel: end,
+      },
+      { capture: false },
     );
   };
 
-  const endDrag = (e: React.PointerEvent<HTMLDivElement>) => {
-    pending.current = null;
-    if (!dragging.current) return;
-    dragging.current = null;
-    setDragging(false);
-    e.currentTarget.releasePointerCapture?.(e.pointerId);
-  };
-
   return (
     <div
       className={className ? `lk-floating-panel ${className}` : 'lk-floating-panel'}
       data-dragging={isDragging ? 'true' : undefined}
       data-placed={rect ? 'true' : undefined}
-      onPointerCancel={endDrag}
       onPointerDown={onPointerDown}
-      onPointerMove={onPointerMove}
-      onPointerUp={endDrag}
       ref={ref}
       style={
         {