feat(plugin-workflow): add zoomer for workflow canvas (#2951)

* feat(plugin-workflow): add zoomer for workflow canvas

* fix(plugin-workflow): fix zoomer position

packages/core/client/src/schema-component/antd/input/Input.tsx

@@ -6,6 +6,8 @@ import React from 'react';
 import { JSONTextAreaProps, Json } from './Json';
 import { ReadPretty } from './ReadPretty';
 
+export { ReadPretty as InputReadPretty } from './ReadPretty';
+
 type ComposedInput = React.FC<InputProps> & {
   ReadPretty: React.FC<InputProps | { ellipsis?: boolean }>;
   TextArea: React.FC<TextAreaProps>;

packages/plugins/@nocobase/plugin-workflow/src/client/CanvasContent.tsx

@@ -1,4 +1,4 @@
-import { Alert } from 'antd';
+import { Alert, Slider } from 'antd';
 import React from 'react';
 
 import { cx, css } from '@nocobase/client';
@@ -12,24 +12,41 @@ import { TriggerConfig } from './triggers';
 export function CanvasContent({ entry }) {
   const { styles } = useStyles();
   const { workflow } = useFlowContext();
+  const [zoom, setZoom] = React.useState(100);
 
   return (
-    <div className="workflow-canvas">
-      {workflow?.executed ? (
-        <Alert type="warning" message={lang('Executed workflow cannot be modified')} showIcon />
-      ) : null}
-      <TriggerConfig />
-      <div
-        className={cx(
-          styles.branchBlockClass,
-          css`
-            margin-top: 0 !important;
-          `,
-        )}
-      >
-        <Branch entry={entry} />
+    <div className="workflow-canvas-wrapper">
+      <div className="workflow-canvas" style={{ zoom: zoom / 100 }}>
+        <div
+          className={cx(
+            styles.branchBlockClass,
+            css`
+              margin-top: 0 !important;
+            `,
+          )}
+        >
+          <div className={styles.branchClass}>
+            {workflow?.executed ? (
+              <Alert type="warning" message={lang('Executed workflow cannot be modified')} showIcon />
+            ) : null}
+            <TriggerConfig />
+            <div
+              className={cx(
+                styles.branchBlockClass,
+                css`
+                  margin-top: 0 !important;
+                `,
+              )}
+            >
+              <Branch entry={entry} />
+            </div>
+            <div className={styles.terminalClass}>{lang('End')}</div>
+          </div>
+        </div>
+      </div>
+      <div className="workflow-canvas-zoomer">
+        <Slider vertical reverse defaultValue={100} step={10} min={10} value={zoom} onChange={setZoom} />
       </div>
-      <div className={styles.terminalClass}>{lang('End')}</div>
     </div>
   );
 }

packages/plugins/@nocobase/plugin-workflow/src/client/style.tsx

@@ -35,9 +35,27 @@ const useStyles = createStyles(({ css, token }) => {
         }
       }
 
-      .workflow-canvas {
+      .workflow-canvas-wrapper {
         flex-grow: 1;
+        overflow: hidden;
+        position: relative;
+      }
+
+      .workflow-canvas-zoomer {
+        display: flex;
+        align-items: center;
+        position: absolute;
+        top: 2em;
+        right: 2em;
+        height: 10em;
+        padding: 1em 0;
+        border-radius: 0.5em;
+        background: ${token.colorBgContainer};
+      }
+
+      .workflow-canvas {
         overflow: auto;
+        height: 100%;
         width: 100%;
         display: flex;
         flex-direction: column;
@@ -48,14 +66,6 @@ const useStyles = createStyles(({ css, token }) => {
           margin-bottom: 2em;
           font-size: 85%;
         }
-
-        .end {
-          cursor: default;
-
-          &:hover {
-            box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
-          }
-        }
       }
     `,
 
@@ -110,7 +120,7 @@ const useStyles = createStyles(({ css, token }) => {
     branchBlockClass: css`
       display: flex;
       position: relative;
-      margin-top: 2em;
+      margin: 2em auto auto auto;
 
       :before {
         content: '';
@@ -327,6 +337,7 @@ const useStyles = createStyles(({ css, token }) => {
       display: flex;
       flex-direction: column-reverse;
       align-items: center;
+      margin: auto;
     `,
 
     nodeJobResultClass: css`