refactor(plugin-workflow): adjust branch styles (#2922)

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

@@ -9,11 +9,13 @@ export function Branch({
   entry = null,
   branchIndex = null,
   controller = null,
+  className,
 }: {
   from?: any;
   entry?: any;
   branchIndex?: number | null;
-  controller?: any;
+  controller?: React.ReactNode;
+  className?: string;
 }) {
   const { styles } = useStyles();
 
@@ -23,7 +25,7 @@ export function Branch({
   }
 
   return (
-    <div className={cx(styles.branchClass)}>
+    <div className={cx(styles.branchClass, className)}>
       <div className="workflow-branch-lines" />
       {controller}
       <AddButton upstream={from} branchIndex={branchIndex} />

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

@@ -1,5 +1,8 @@
 import { Alert } from 'antd';
 import React from 'react';
+
+import { cx, css } from '@nocobase/client';
+
 import { Branch } from './Branch';
 import { lang } from './locale';
 import useStyles from './style';
@@ -16,7 +19,14 @@ export function CanvasContent({ entry }) {
         <Alert type="warning" message={lang('Executed workflow cannot be modified')} showIcon />
       ) : null}
       <TriggerConfig />
-      <div className={styles.branchBlockClass}>
+      <div
+        className={cx(
+          styles.branchBlockClass,
+          css`
+            margin-top: 0 !important;
+          `,
+        )}
+      >
         <Branch entry={entry} />
       </div>
       <div className={styles.terminalClass}>{lang('End')}</div>

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

@@ -4,6 +4,7 @@ export * from './FlowContext';
 export * from './nodes';
 export { triggers, useTrigger, getTriggersOptions } from './triggers';
 export { useWorkflowVariableOptions, getCollectionFieldOptions } from './variable';
+export { default as useStyles } from './style';
 
 import { Plugin } from '@nocobase/client';
 import React from 'react';

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

@@ -423,19 +423,8 @@ export default {
     return (
       <NodeDefaultView data={data}>
         {rejectOnFalse ? null : (
-          <div className={cx(styles.nodeSubtreeClass)}>
+          <div className={styles.nodeSubtreeClass}>
-            <div
+            <div className={styles.branchBlockClass}>
-              className={cx(
-                styles.branchBlockClass,
-                css`
-                  > * > .workflow-branch-lines {
-                    > button {
-                      display: none;
-                    }
-                  }
-                `,
-              )}
-            >
               <Branch from={data} entry={falseEntry} branchIndex={0} />
               <Branch from={data} entry={trueEntry} branchIndex={1} />
             </div>

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

@@ -91,12 +91,6 @@ export default {
               </div>
             </div>
           </div>
-          <div
-            className={css`
-              position: relative;
-              height: 2em;
-            `}
-          />
         </div>
       </NodeDefaultView>
     );

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

@@ -65,8 +65,8 @@ export default {
 
     return (
       <NodeDefaultView data={data}>
-        <div className={cx(styles.nodeSubtreeClass)}>
+        <div className={styles.nodeSubtreeClass}>
-          <div className={cx(styles.branchBlockClass)}>
+          <div className={styles.branchBlockClass}>
             {branches.map((branch) => (
               <Branch key={branch.id} from={data} entry={branch} branchIndex={branch.branchIndex} />
             ))}
@@ -100,12 +100,6 @@ export default {
               />
             ))}
           </div>
-          <div
-            className={css`
-              position: relative;
-              height: 2em;
-            `}
-          >
           <Tooltip
             title={lang('Add branch')}
             className={css`
@@ -115,11 +109,13 @@ export default {
             <Button
               icon={<PlusOutlined />}
               className={css`
-                  position: absolute;
+                position: relative;
-                  top: calc(50% - 1px);
+                top: 1em;
-                  transform: translateX(-50%) rotate(45deg);
+                transform-origin: center;
+                transform: rotate(45deg);
 
                 .anticon {
+                  transform-origin: center;
                   transform: rotate(-45deg);
                 }
               `}
@@ -128,7 +124,6 @@ export default {
             />
           </Tooltip>
         </div>
-        </div>
       </NodeDefaultView>
     );
   },

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

@@ -110,6 +110,7 @@ const useStyles = createStyles(({ css, token }) => {
     branchBlockClass: css`
       display: flex;
       position: relative;
+      margin-top: 2em;
 
       :before {
         content: '';
@@ -330,7 +331,6 @@ const useStyles = createStyles(({ css, token }) => {
 
     conditionClass: css`
       position: relative;
-      height: 2em;
       overflow: visible;
 
       > span {