diff --git a/src/components/SelectRect/index.tsx b/src/components/SelectRect/index.tsx index c98c6e9..23d17bf 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,9 +61,10 @@ export function useSelectRectHandler() { }, options: { disableCapture: true, + pointerMoveOnWindow: true, }, }), - [], + [] ); return { diff --git a/src/utils/interactions/createDragHandler.ts b/src/utils/interactions/createDragHandler.ts index 65c9856..c2acd66 100644 --- a/src/utils/interactions/createDragHandler.ts +++ b/src/utils/interactions/createDragHandler.ts @@ -6,7 +6,7 @@ export type OnMoveHandler = ( dy: number; deltaX: number; deltaY: number; - }, + } ) => void; export function createDragHandler({ @@ -23,16 +23,18 @@ export function createDragHandler({ onUp?: (e: PointerEvent, ctx?: T, moveEvent?: PointerEvent) => void; options?: { disableCapture?: boolean; + pointerMoveOnWindow?: boolean; }; }) { const handlePointerDown = ( - downEvent: React.PointerEvent, + downEvent: React.PointerEvent ) => { if (downEvent.button !== 0) return; const el = downEvent.currentTarget; 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);