Tool bar size adjustment when contextually zooming out (#434)

codepod-io · Aug 4, 2023 · c415bc7 · c415bc7
1 parent d452eba
commit c415bc7
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 18 deletions.
diff --git a/ui/src/components/nodes/Code.tsx b/ui/src/components/nodes/Code.tsx
@@ -372,6 +372,9 @@ function MyFloatingToolbar({ id, layout, setLayout }) {
     [clonePod, id]
   );
 
+  const zoomLevel = useReactFlowStore((s) => s.transform[2]);
+  const iconFontSize = zoomLevel < 1 ? `${1.5 * (1 / zoomLevel)}rem` : `1.5rem`;
+
   const cutBegin = useStore(store, (state) => state.cutBegin);
 
   const onCut = useCallback(
@@ -390,7 +393,7 @@ function MyFloatingToolbar({ id, layout, setLayout }) {
         className="custom-drag-handle"
         sx={{
           cursor: "grab",
-          fontSize: "1.5rem",
+          fontSize: iconFontSize,
           padding: "8px",
           display: "inline-flex",
         }}
@@ -404,7 +407,7 @@ function MyFloatingToolbar({ id, layout, setLayout }) {
               wsRun(id);
             }}
           >
-            <PlayCircleOutlineIcon fontSize="inherit" />
+            <PlayCircleOutlineIcon style={{ fontSize: iconFontSize }} />
           </IconButton>
         </Tooltip>
       )}
@@ -415,7 +418,7 @@ function MyFloatingToolbar({ id, layout, setLayout }) {
               wsRunChain(id);
             }}
           >
-            <KeyboardDoubleArrowRightIcon fontSize="inherit" />
+            <KeyboardDoubleArrowRightIcon style={{ fontSize: iconFontSize }} />
           </IconButton>
         </Tooltip>
       )}
@@ -425,7 +428,10 @@ function MyFloatingToolbar({ id, layout, setLayout }) {
       >
         <Tooltip title="Copy">
           <IconButton className="copy-button">
-            <ContentCopyIcon fontSize="inherit" className="copy-button" />
+            <ContentCopyIcon
+              style={{ fontSize: iconFontSize }}
+              className="copy-button"
+            />
           </IconButton>
         </Tooltip>
       </CopyToClipboard>
@@ -436,13 +442,13 @@ function MyFloatingToolbar({ id, layout, setLayout }) {
         >
           <Tooltip title="Cut">
             <IconButton>
-              <ContentCutIcon fontSize="inherit" />
+              <ContentCutIcon style={{ fontSize: iconFontSize }} />
             </IconButton>
           </Tooltip>
         </CopyToClipboard>
       )}
       {!isGuest && (
-        <Tooltip title="Delete">
+        <Tooltip style={{ fontSize: iconFontSize }} title="Delete">
           <ConfirmDeleteButton
             handleConfirm={() => {
               // Delete all edges connected to the node.
@@ -457,14 +463,14 @@ function MyFloatingToolbar({ id, layout, setLayout }) {
             setLayout(layout === "bottom" ? "right" : "bottom");
           }}
         >
-          <ViewComfyIcon fontSize="inherit" />
+          <ViewComfyIcon style={{ fontSize: iconFontSize }} />
         </IconButton>
       </Tooltip>
       <Box
         className="custom-drag-handle"
         sx={{
           cursor: "grab",
-          fontSize: "1.5rem",
+          fontSize: iconFontSize,
           padding: "8px",
           display: "inline-flex",
         }}

diff --git a/ui/src/components/nodes/Rich.tsx b/ui/src/components/nodes/Rich.tsx
@@ -447,13 +447,16 @@ function MyFloatingToolbar({ id }: { id: string }) {
   if (!store) throw new Error("Missing BearContext.Provider in the tree");
   const reactFlowInstance = useReactFlow();
   const isGuest = useStore(store, (state) => state.role === "GUEST");
+  const zoomLevel = useReactFlowStore((s) => s.transform[2]);
+  const iconFontSize = zoomLevel < 1 ? `${1.5 * (1 / zoomLevel)}rem` : `1.5rem`;
+
   return (
     <>
       <Box
         className="custom-drag-handle"
         sx={{
           cursor: "grab",
-          fontSize: "1.5rem",
+          fontSize: iconFontSize,
           padding: "8px",
           display: "inline-flex",
         }}
@@ -474,7 +477,7 @@ function MyFloatingToolbar({ id }: { id: string }) {
         className="custom-drag-handle"
         sx={{
           cursor: "grab",
-          fontSize: "1.5rem",
+          fontSize: iconFontSize,
           padding: "8px",
           display: "inline-flex",
         }}

diff --git a/ui/src/components/nodes/Scope.tsx b/ui/src/components/nodes/Scope.tsx
@@ -90,6 +90,10 @@ function MyFloatingToolbar({ id }: { id: string }) {
     [onCopy, cutBegin, id]
   );
   const autoLayout = useStore(store, (state) => state.autoLayout);
+
+  const zoomLevel = useReactFlowStore((s) => s.transform[2]);
+  const iconFontSize = zoomLevel < 1 ? `${1.5 * (1 / zoomLevel)}rem` : `1.5rem`;
+
   return (
     <Box
       sx={{
@@ -101,7 +105,7 @@ function MyFloatingToolbar({ id }: { id: string }) {
         className="custom-drag-handle"
         sx={{
           cursor: "grab",
-          fontSize: "1.5rem",
+          fontSize: iconFontSize,
           padding: "8px",
           display: "inline-flex",
         }}
@@ -115,7 +119,7 @@ function MyFloatingToolbar({ id }: { id: string }) {
               wsRunScope(id);
             }}
           >
-            <PlayCircleOutlineIcon fontSize="inherit" />
+            <PlayCircleOutlineIcon style={{ fontSize: iconFontSize }} />
           </IconButton>
         </Tooltip>
       )}
@@ -127,7 +131,7 @@ function MyFloatingToolbar({ id }: { id: string }) {
               autoLayout(id);
             }}
           >
-            <ViewTimelineOutlinedIcon fontSize="inherit" />
+            <ViewTimelineOutlinedIcon style={{ fontSize: iconFontSize }} />
           </IconButton>
         </Tooltip>
       )}
@@ -138,7 +142,10 @@ function MyFloatingToolbar({ id }: { id: string }) {
       >
         <Tooltip title="Copy">
           <IconButton className="copy-button">
-            <ContentCopyIcon fontSize="inherit" className="copy-button" />
+            <ContentCopyIcon
+              style={{ fontSize: iconFontSize }}
+              className="copy-button"
+            />
           </IconButton>
         </Tooltip>
       </CopyToClipboard>
@@ -150,13 +157,17 @@ function MyFloatingToolbar({ id }: { id: string }) {
         >
           <Tooltip title="Cut">
             <IconButton>
-              <ContentCutIcon fontSize="inherit" />
+              <ContentCutIcon style={{ fontSize: iconFontSize }} />
             </IconButton>
           </Tooltip>
         </CopyToClipboard>
       )}
       {!isGuest && (
-        <Tooltip title="Delete" className="nodrag">
+        <Tooltip
+          style={{ fontSize: iconFontSize }}
+          title="Delete"
+          className="nodrag"
+        >
           <ConfirmDeleteButton
             handleConfirm={(e: any) => {
               // This does not work, will throw "Parent node
@@ -174,7 +185,7 @@ function MyFloatingToolbar({ id }: { id: string }) {
         className="custom-drag-handle"
         sx={{
           cursor: "grab",
-          fontSize: "1.5rem",
+          fontSize: iconFontSize,
           padding: "8px",
           display: "inline-flex",
         }}
@@ -315,7 +326,7 @@ export const ScopeNode = memo<NodeProps>(function ScopeNode({
           position: "absolute",
           border: "solid 1px #d6dee6",
           right: "25px",
-          top: "-45px",
+          top: "-60px",
           background: "white",
           zIndex: 250,
           justifyContent: "center",