fix: Bug: SelectRectの選択が要素外のポインター移動を反映しない #8

toshusai · Aug 3, 2024 · 2b8b00a · 2b8b00a
1 parent de6a176
commit 2b8b00a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git 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
@@ -6,7 +6,7 @@ export type OnMoveHandler<T = undefined> = (
     dy: number;
     deltaX: number;
     deltaY: number;
-  },
+  }
 ) => void;
 
 export function createDragHandler<T>({
@@ -23,16 +23,18 @@ export function createDragHandler<T>({
   onUp?: (e: PointerEvent, ctx?: T, moveEvent?: PointerEvent) => void;
   options?: {
     disableCapture?: boolean;
+    pointerMoveOnWindow?: boolean;
   };
 }) {
   const handlePointerDown = (
-    downEvent: React.PointerEvent<HTMLElement | SVGElement>,
+    downEvent: React.PointerEvent<HTMLElement | SVGElement>
   ) => {
     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<T>({
     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<T>({
     if (options?.disableCapture !== true) {
       el.setPointerCapture(downEvent.pointerId);
     }
-    el.addEventListener("pointermove", handlePointerMove, {
+    moveTarget.addEventListener("pointermove", handlePointerMove, {
       passive: false,
     });
     window.addEventListener("pointerup", handlePointerUp);