Merge pull request #1 from synapticsim/master

merge @synapticsim:master -> themes
nakajimayoshi · Aug 3, 2023 · cf96beb · cf96beb
2 parents fcefe0e + 8a56a11
commit cf96beb
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git 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-theme-pd bg-theme-pd 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
@@ -90,11 +90,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 || dndContext.active !== null}
             centerOnInit
             minScale={0.25}
             initialScale={0.5}
@@ -119,7 +121,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
@@ -8,6 +8,8 @@ export interface Element {
     height: number;
     x: number;
     y: number;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
 }
 
 export interface AceConfig {