@jbrowse/plugin-linear-genome-view 5.0.0-beta.1 → 5.0.0-beta.10

package/esm/MultiLevelRubberband/useRangeSelect.js

@@ -1,6 +1,7 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { getRelativeX } from '@jbrowse/core/util/getRelativeX';
 import { transaction } from 'mobx';
+import { useWindowDrag } from '../shared/useWindowDrag.js';
 export function useRangeSelect(ref, model) {
     const [startX, setStartX] = useState();
     const [currentX, setCurrentX] = useState(0);
@@ -18,8 +19,15 @@ export function useRangeSelect(ref, model) {
         });
     }, [model]);
     // releases the committed offsets too, since mouseOut no longer does while the
-    // menu is open — closing the menu (button, Escape, or a bare click) is the
-    // point the selection is actually finished with
+    // menu is open — dismissing the menu, by its backdrop or Escape, is the point
+    // the selection is actually finished with. A bare click on the strip no longer
+    // comes through here: it opens the click menu instead.
+    //
+    // `CascadingMenu` dismisses BEFORE it runs the clicked row's callback, so this
+    // clears the offsets out from under it. Every menu built here captures them
+    // when the rows are built, which is why that works — the plain linear genome
+    // view's host never clears, so a row written to read them live works there
+    // and silently no-ops from a stacked row.
     const handleClose = useCallback(() => {
         setAnchorPosition(undefined);
         setStartX(undefined);
@@ -27,54 +35,27 @@ export function useRangeSelect(ref, model) {
         setGuideX(undefined);
         clearOffsets();
     }, [clearOffsets]);
-    useEffect(() => {
-        const el = ref.current;
-        if (!mouseDragging || !el) {
-            return;
-        }
-        // the container's left edge is fixed for the duration of a drag, so measure
-        // it once here rather than calling getBoundingClientRect on every mousemove
-        const { left } = el.getBoundingClientRect();
-        function globalMouseMove(event) {
-            setCurrentX(event.clientX - left);
-        }
-        function globalMouseUp(event) {
-            if (startX === undefined) {
-                return;
-            }
-            const offsetX = event.clientX - left;
-            if (Math.abs(offsetX - startX) <= 3) {
-                handleClose();
+    useWindowDrag(ref, mouseDragging ? startX : undefined, {
+        onMove: setCurrentX,
+        onEnd: ({ startX, endX, isClick, clientX, clientY }) => {
+            setAnchorPosition({ offsetX: endX, clientX, clientY, isClick });
+            if (isClick) {
+                // the click menu names a coordinate, not a span, so nothing is
+                // committed; the guide stays at the click so the menu says where
+                setGuideX(endX);
                 return;
             }
-            setAnchorPosition({
-                offsetX,
-                clientX: event.clientX,
-                clientY: event.clientY,
-            });
-            const leftPx = Math.min(startX, offsetX);
-            const rightPx = Math.max(startX, offsetX);
+            const leftPx = Math.min(startX, endX);
+            const rightPx = Math.max(startX, endX);
             transaction(() => {
                 for (const view of model.views) {
                     view.setOffsets(view.pxToBp(leftPx), view.pxToBp(rightPx));
                 }
             });
             setGuideX(undefined);
-        }
-        function globalKeyDown(event) {
-            if (event.key === 'Escape') {
-                handleClose();
-            }
-        }
-        window.addEventListener('mousemove', globalMouseMove);
-        window.addEventListener('mouseup', globalMouseUp);
-        window.addEventListener('keydown', globalKeyDown);
-        return () => {
-            window.removeEventListener('mousemove', globalMouseMove);
-            window.removeEventListener('mouseup', globalMouseUp);
-            window.removeEventListener('keydown', globalKeyDown);
-        };
-    }, [startX, mouseDragging, model, ref, handleClose]);
+        },
+        onCancel: handleClose,
+    });
     function mouseDown(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -90,8 +71,10 @@ export function useRangeSelect(ref, model) {
         setCurrentX(relativeX);
     }
     function mouseMove(event) {
-        // Don't update guideX while the menu is open (rubberband locked) or while a
-        // drag-selection is in progress (the rubberband should show, not the guide)
+        // Don't update guideX while a menu is open — the guide is what the click
+        // menu's rows refer to, so it stays at the click rather than following the
+        // pointer to the menu — or while a drag-selection is in progress (the
+        // rubberband should show, not the guide)
         if (anchorPosition || mouseDragging) {
             return;
         }
@@ -112,13 +95,14 @@ export function useRangeSelect(ref, model) {
         callback();
         handleClose();
     }
-    const rubberbandOn = startX !== undefined;
+    const isClick = anchorPosition?.isClick;
+    const rubberbandOn = startX !== undefined && !isClick;
     const right = anchorPosition?.offsetX ?? currentX;
     const left = rubberbandOn ? Math.min(right, startX) : 0;
     const width = rubberbandOn ? Math.abs(right - startX) : 0;
     const views = rubberbandOn ? model.views : [];
     return {
-        open: Boolean(anchorPosition),
+        isClick,
         rubberbandOn,
         guideX,
         anchorPosition,