From 7b9d395fee3cd2ff28d6e8a50262fe2aff7b4802 Mon Sep 17 00:00:00 2001
From: Hypeism <jhnwllms236@gmail.com>
Date: Wed, 12 Jul 2023 15:49:31 +0900
Subject: [PATCH 1/4] fix canvas teleportation issue

---
 src/components/Instrument.tsx | 10 ++++++----
 src/pages/Workspace.tsx       | 10 ++++++++--
 src/types.ts                  |  2 ++
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/Instrument.tsx b/src/components/Instrument.tsx
index 0b9964e..06b7e17 100644
--- a/src/components/Instrument.tsx
+++ b/src/components/Instrument.tsx
@@ -54,10 +54,10 @@ const InstrumentFrame: React.FC<InstrumentFrameProps> = memo(forwardRef(
                 )}
             />
         );
-    }),
-);
+    },
+));
 
-export const Instrument: React.FC<Element> = ({ uuid, name, element, x, y, width, height }) => {
+export const Instrument: React.FC<Element> = ({ uuid, name, element, x, y, width, height, onMouseEnter, onMouseLeave }) => {
     const iframeRef = useRef<HTMLIFrameElement>(null);
     const containerRef = useRef<HTMLDivElement>(null);
 
@@ -122,7 +122,7 @@ export const Instrument: React.FC<Element> = ({ uuid, name, element, x, y, width
                 element={{ uuid, name, element, x, y, width, height }}
                 x={e.clientX}
                 y={e.clientY}
-            />
+            />,
         ))
     ), [dispatch]);
 
@@ -152,6 +152,8 @@ export const Instrument: React.FC<Element> = ({ uuid, name, element, x, y, width
                 width,
                 height,
             }}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
         >
             <div className="absolute bottom-full w-full box-content border-2 border-b-0 border-silver-800 bg-silver-800 rounded-t-xl">
                 <div className="absolute -top-0.5 w-full flex justify-center">
diff --git a/src/pages/Workspace.tsx b/src/pages/Workspace.tsx
index 9a0bb16..a310a4e 100644
--- a/src/pages/Workspace.tsx
+++ b/src/pages/Workspace.tsx
@@ -83,11 +83,13 @@ const CanvasLayer: React.FC = () => {
     const project = useWorkspaceSelector((state: WorkspaceState) => state.project.active);
     const dispatch = useWorkspaceDispatch();
 
+    const [transformDisabled, setTransformDisabled] = useState(false);
+
     const dndContext = useDndContext();
 
     return (
         <TransformWrapper
-            disabled={dndContext.active !== null}
+            disabled={transformDisabled}
             centerOnInit
             minScale={0.25}
             initialScale={0.5}
@@ -112,7 +114,11 @@ const CanvasLayer: React.FC = () => {
                     }}
                 >
                     {project?.config.elements?.map((props) => (
-                        <Instrument {...props} />
+                        <Instrument
+                            {...props}
+                            onMouseEnter={() => setTransformDisabled(true)}
+                            onMouseLeave={() => setTransformDisabled(false)}
+                        />
                     ))}
                 </div>
             </TransformComponent>
diff --git a/src/types.ts b/src/types.ts
index e2af403..9dee17e 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -8,6 +8,8 @@ export interface Element {
     height: number;
     x: number;
     y: number;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
 }
 
 export interface AceConfig {

From 87f79b2d513ee2d2e7b9916b799f5807b7b18471 Mon Sep 17 00:00:00 2001
From: Hypeism <jhnwllms236@gmail.com>
Date: Wed, 12 Jul 2023 15:50:04 +0900
Subject: [PATCH 2/4] remove unused dnd context

---
 src/pages/Workspace.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/Workspace.tsx b/src/pages/Workspace.tsx
index a310a4e..388403c 100644
--- a/src/pages/Workspace.tsx
+++ b/src/pages/Workspace.tsx
@@ -85,8 +85,6 @@ const CanvasLayer: React.FC = () => {
 
     const [transformDisabled, setTransformDisabled] = useState(false);
 
-    const dndContext = useDndContext();
-
     return (
         <TransformWrapper
             disabled={transformDisabled}

From 8a29584dda575a8c4ab7e1684db6c10e4eab1346 Mon Sep 17 00:00:00 2001
From: Hypeism <jhnwllms236@gmail.com>
Date: Wed, 12 Jul 2023 15:56:43 +0900
Subject: [PATCH 3/4] make mouse props optional

---
 src/types.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/types.ts b/src/types.ts
index 9dee17e..2a7100d 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -8,8 +8,8 @@ export interface Element {
     height: number;
     x: number;
     y: number;
-    onMouseEnter: () => void;
-    onMouseLeave: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
 }
 
 export interface AceConfig {

From c32a79c74010ffcd93382d74493dd54ebd040e15 Mon Sep 17 00:00:00 2001
From: Hypeism <jhnwllms236@gmail.com>
Date: Tue, 18 Jul 2023 13:54:33 +0900
Subject: [PATCH 4/4] re-add dndContext boolean for Transform wrapper

---
 src/pages/Workspace.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/Workspace.tsx b/src/pages/Workspace.tsx
index 388403c..889e8a0 100644
--- a/src/pages/Workspace.tsx
+++ b/src/pages/Workspace.tsx
@@ -85,9 +85,11 @@ const CanvasLayer: React.FC = () => {
 
     const [transformDisabled, setTransformDisabled] = useState(false);
 
+    const dndContext = useDndContext();
+
     return (
         <TransformWrapper
-            disabled={transformDisabled}
+            disabled={transformDisabled || dndContext.active !== null}
             centerOnInit
             minScale={0.25}
             initialScale={0.5}