From 2b8b00a7f63a4ef92813abafb8e3865f8cf5b56a Mon Sep 17 00:00:00 2001
From: toshusai <toshusai.net@gmail.com>
Date: Sat, 3 Aug 2024 20:29:12 +0900
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20Bug:=20SelectRect=E3=81=AE=E9=81=B8?=
 =?UTF-8?q?=E6=8A=9E=E3=81=8C=E8=A6=81=E7=B4=A0=E5=A4=96=E3=81=AE=E3=83=9D?=
 =?UTF-8?q?=E3=82=A4=E3=83=B3=E3=82=BF=E3=83=BC=E7=A7=BB=E5=8B=95=E3=82=92?=
 =?UTF-8?q?=E5=8F=8D=E6=98=A0=E3=81=97=E3=81=AA=E3=81=84=20#8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SelectRect/index.tsx         |  4 +++-
 src/utils/interactions/createDragHandler.ts | 10 ++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

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<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);

From f630815609a62739142d76ad17437865c62b3158 Mon Sep 17 00:00:00 2001
From: toshusai <toshusai.net@gmail.com>
Date: Sat, 3 Aug 2024 20:36:48 +0900
Subject: [PATCH 2/2] style: format

---
 src/components/SelectRect/index.tsx         | 2 +-
 src/utils/interactions/createDragHandler.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/SelectRect/index.tsx b/src/components/SelectRect/index.tsx
index 23d17bf..29597e6 100644
--- a/src/components/SelectRect/index.tsx
+++ b/src/components/SelectRect/index.tsx
@@ -64,7 +64,7 @@ export function useSelectRectHandler() {
           pointerMoveOnWindow: true,
         },
       }),
-    []
+    [],
   );
 
   return {
diff --git a/src/utils/interactions/createDragHandler.ts b/src/utils/interactions/createDragHandler.ts
index c2acd66..8c09ea3 100644
--- 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>({
@@ -27,7 +27,7 @@ export function createDragHandler<T>({
   };
 }) {
   const handlePointerDown = (
-    downEvent: React.PointerEvent<HTMLElement | SVGElement>
+    downEvent: React.PointerEvent<HTMLElement | SVGElement>,
   ) => {
     if (downEvent.button !== 0) return;
     const el = downEvent.currentTarget;