diff --git a/src/components/SelectRect/index.tsx b/src/components/SelectRect/index.tsx index c98c6e9..29597e6 100644 --- a/src/components/SelectRect/index.tsx +++ b/src/components/SelectRect/index.tsx @@ -25,6 +25,7 @@ export function useSelectRectHandler() { () => createDragHandler({ onDown: (e) => { + e.preventDefault(); const el = e.currentTarget as HTMLElement; const rect = el.getBoundingClientRect(); return { @@ -60,6 +61,7 @@ export function useSelectRectHandler() { }, options: { disableCapture: true, + pointerMoveOnWindow: true, }, }), [], diff --git a/src/utils/interactions/createDragHandler.ts b/src/utils/interactions/createDragHandler.ts index 65c9856..8c09ea3 100644 --- a/src/utils/interactions/createDragHandler.ts +++ b/src/utils/interactions/createDragHandler.ts @@ -23,6 +23,7 @@ export function createDragHandler({ onUp?: (e: PointerEvent, ctx?: T, moveEvent?: PointerEvent) => void; options?: { disableCapture?: boolean; + pointerMoveOnWindow?: boolean; }; }) { const handlePointerDown = ( @@ -33,6 +34,7 @@ export function createDragHandler({ const result = onDown?.(downEvent); let prevEvent: PointerEvent | undefined = undefined; + const moveTarget = options?.pointerMoveOnWindow ? window : el; const handlePointerMove = (e: Event) => { if (!(e instanceof PointerEvent)) return; if (result === false) return; @@ -50,7 +52,7 @@ export function createDragHandler({ const handlePointerUp = (e: Event) => { if (!(e instanceof PointerEvent)) return; if (result === false) return; - el.removeEventListener("pointermove", handlePointerMove); + moveTarget.removeEventListener("pointermove", handlePointerMove); window.removeEventListener("pointerup", handlePointerUp); if (options?.disableCapture !== true) { el.releasePointerCapture(e.pointerId); @@ -63,7 +65,7 @@ export function createDragHandler({ if (options?.disableCapture !== true) { el.setPointerCapture(downEvent.pointerId); } - el.addEventListener("pointermove", handlePointerMove, { + moveTarget.addEventListener("pointermove", handlePointerMove, { passive: false, }); window.addEventListener("pointerup", handlePointerUp);