From 5f213b5f5178ec52d634d1f611528d7195df2bec Mon Sep 17 00:00:00 2001
From: "Yoan.liu" <usual2970@gmail.com>
Date: Wed, 22 Jan 2025 10:52:46 +0800
Subject: [PATCH] Adjustable scaling ratio

---
 ui/src/pages/workflows/WorkflowDetail.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/ui/src/pages/workflows/WorkflowDetail.tsx b/ui/src/pages/workflows/WorkflowDetail.tsx
index cbb4fc4b..cdc1379e 100644
--- a/ui/src/pages/workflows/WorkflowDetail.tsx
+++ b/ui/src/pages/workflows/WorkflowDetail.tsx
@@ -8,6 +8,9 @@ import {
   DownOutlined as DownOutlinedIcon,
   EllipsisOutlined as EllipsisOutlinedIcon,
   HistoryOutlined as HistoryOutlinedIcon,
+  MinusOutlined,
+  PlusCircleOutlined,
+  ReloadOutlined,
   UndoOutlined as UndoOutlinedIcon,
 } from "@ant-design/icons";
 import { PageHeader } from "@ant-design/pro-components";
@@ -37,6 +40,8 @@ const WorkflowDetail = () => {
   const [modalApi, ModalContextHolder] = Modal.useModal();
   const [notificationApi, NotificationContextHolder] = notification.useNotification();
 
+  const [scale, setScale] = useState(1);
+
   const { id: workflowId } = useParams();
   const { workflow, initialized, ...workflowState } = useWorkflowStore(
     useZustandShallowSelector(["workflow", "initialized", "init", "destroy", "setEnabled", "release", "discard"])
@@ -300,7 +305,14 @@ const WorkflowDetail = () => {
                   </Space>
                 </div>
               </div>
-              <div className="px-12 py-8 max-md:px-4">
+              <div className="fixed bottom-8 right-8 z-10 flex items-center gap-2 rounded-lg bg-white p-2 shadow-lg">
+                <Button icon={<MinusOutlined />} disabled={scale <= 0.5} onClick={() => setScale((s) => Math.max(0.5, s - 0.1))} />
+                <Typography.Text className="min-w-[3em] text-center">{Math.round(scale * 100)}%</Typography.Text>
+                <Button icon={<PlusCircleOutlined />} disabled={scale >= 2} onClick={() => setScale((s) => Math.min(2, s + 0.1))} />
+                <Button icon={<ReloadOutlined />} onClick={() => setScale(1)} />
+              </div>
+
+              <div className="size-full origin-top px-12 py-8 transition-transform duration-300 max-md:px-4" style={{ transform: `scale(${scale})` }}>
                 <WorkflowElements />
               </div>
             </div>