feature: add seatunnel shape

flowerfine · Jan 6, 2024 · b6a4da0 · b6a4da0
1 parent 3c29e15
commit b6a4da0
Show file tree

Hide file tree

Showing 4 changed files with 160 additions and 27 deletions.
diff --git a/scaleph-ui-react2/src/locales/zh-CN/pages/project.ts b/scaleph-ui-react2/src/locales/zh-CN/pages/project.ts
@@ -82,6 +82,7 @@ export default {
   'pages.project.di.flow.dag.stop': '停止',
   'pages.project.di.flow.dag.save': '保存',
   'pages.project.di.flow.dag.publish': '发布',
+  'pages.project.di.flow.dag.debug': 'Debug',
   'pages.project.di.flow.dag.preview': '预览',
   'pages.project.di.flow.dag.submit': '提交',
   'pages.project.di.flow.dag.port.in': '输入桩',
@@ -91,6 +92,11 @@ export default {
   'pages.project.di.flow.dag.prop.jobProp': '作业属性',
   'pages.project.di.flow.dag.prop.engineProp': '引擎属性',
   'pages.project.di.flow.dag.prop.placeholder': '按照key=value格式配置属性,每个属性一行',
+  'pages.project.di.flow.dag.undo': '撤销',
+  'pages.project.di.flow.dag.redo': '恢复',
+  'pages.project.di.flow.dag.copy': '复制',
+  'pages.project.di.flow.dag.paste': '粘贴',
+  'pages.project.di.flow.dag.delete': '删除',
   'pages.project.di.flow.dag.help': '帮助',
   'pages.project.di.flow.dag.help.key': '快捷键',
   'pages.project.di.flow.dag.help.key.ctrlc': '复制',

diff --git a/scaleph-ui-react2/src/pages/Project/Workspace/Artifact/DI/DiJobFlow/Dag/menubar/index.tsx b/scaleph-ui-react2/src/pages/Project/Workspace/Artifact/DI/DiJobFlow/Dag/menubar/index.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import {Button, Space, Tooltip} from 'antd';
+import {CalculatorOutlined, EyeOutlined, SaveOutlined} from '@ant-design/icons';
+import {useIntl} from "@umijs/max";
+import type {Edge} from '@antv/xflow';
+import {useGraphEvent, useGraphInstance, useGraphStore,} from '@antv/xflow';
+import {Menubar} from "@antv/x6-react-components";
+
+const CustomMenubar: React.FC = () => {
+  const intl = useIntl();
+  const graph = useGraphInstance();
+  const nodes = useGraphStore((state) => state.nodes);
+  const updateEdge = useGraphStore((state) => state.updateEdge);
+  const removeNodes = useGraphStore((state) => state.removeNodes);
+
+  useGraphEvent('node:change:data', ({node}) => {
+    if (graph) {
+      const edges = graph.getIncomingEdges(node);
+      const {status} = node.data;
+      edges?.forEach((edge: Edge) => {
+        if (status === 'running') {
+          updateEdge(edge.id, {
+            animated: true,
+          });
+        } else {
+          updateEdge(edge.id, {
+            animated: false,
+          });
+        }
+      });
+    }
+  });
+
+  const onPreview = () => {
+    console.log('onPreview', graph)
+  };
+
+  const onDebug = () => {
+    console.log('onDebug', graph)
+  };
+
+  const onSave = () => {
+    console.log('onSave', graph)
+  };
+
+  return (
+    <Menubar extra={<Space>
+      <Tooltip title={intl.formatMessage({id: 'pages.project.di.flow.dag.debug'})}>
+        <Button
+          size="small"
+          icon={<CalculatorOutlined/>}
+          onClick={onDebug}
+        />
+      </Tooltip>
+      <Tooltip title={intl.formatMessage({id: 'pages.project.di.flow.dag.preview'})}>
+        <Button
+          size="small"
+          icon={<EyeOutlined/>}
+          onClick={onPreview}
+        />
+      </Tooltip>
+      <Tooltip title={intl.formatMessage({id: 'pages.project.di.flow.dag.save'})}>
+        <Button
+          size="small"
+          icon={<SaveOutlined/>}
+          onClick={onSave}
+        />
+      </Tooltip>
+
+    </Space>}/>
+  );
+};
+
+export {CustomMenubar};
diff --git a/scaleph-ui-react2/src/pages/Project/Workspace/Artifact/DI/DiJobFlow/Dag/toolbar/index.tsx b/scaleph-ui-react2/src/pages/Project/Workspace/Artifact/DI/DiJobFlow/Dag/toolbar/index.tsx
@@ -1,10 +1,20 @@
 import React from 'react';
-import {Button, Space} from 'antd';
-import {CopyOutlined, PlayCircleOutlined} from '@ant-design/icons';
+import {Button, Space, Tooltip} from 'antd';
+import {
+  CopyOutlined,
+  DeleteOutlined,
+  QuestionCircleOutlined,
+  RedoOutlined,
+  SnippetsOutlined,
+  UndoOutlined
+} from '@ant-design/icons';
+import {useIntl} from "@umijs/max";
 import type {Edge, Node, NodeOptions} from '@antv/xflow';
 import {useClipboard, useGraphEvent, useGraphInstance, useGraphStore, useKeyboard,} from '@antv/xflow';
+import {Toolbar} from "@antv/x6-react-components";
 
-const Toolbar: React.FC = () => {
+const CustomToolbar: React.FC = () => {
+  const intl = useIntl();
   const graph = useGraphInstance();
   const {copy, paste} = useClipboard();
   const nodes = useGraphStore((state) => state.nodes);
@@ -67,6 +77,14 @@ const Toolbar: React.FC = () => {
     }
   };
 
+  const onUndo = () => {
+    console.log('onUndo', graph)
+  };
+
+  const onRedo = () => {
+    console.log('onRedo', graph)
+  };
+
   const onCopy = () => {
     const selected = nodes.filter((node) => node.selected);
     const ids: string[] = selected.map((node) => node.id || '');
@@ -77,27 +95,61 @@ const Toolbar: React.FC = () => {
     paste();
   };
 
+  const onDelete = () => {
+    console.log('onDelete', graph)
+  };
+
+  const onHelp = () => {
+    console.log('onHelp', graph)
+  };
+
   return (
-    <Space>
-      <Button
-        type="primary"
-        size="small"
-        style={{fontSize: 12}}
-        onClick={handleExcute}
-      >
-        <PlayCircleOutlined/>
-        全部执行
-      </Button>
-      <Button type="primary" size="small" style={{fontSize: 12}} onClick={onCopy}>
-        <CopyOutlined/>
-        复制
-      </Button>
-      <Button type="primary" size="small" style={{fontSize: 12}} onClick={onPaste}>
-        <CopyOutlined/>
-        粘贴
-      </Button>
-    </Space>
+    <Toolbar extra={<Space>
+      <Tooltip title={intl.formatMessage({id: 'pages.project.di.flow.dag.undo'})}>
+        <Button
+          size="small"
+          icon={<UndoOutlined/>}
+          onClick={onUndo}
+        />
+      </Tooltip>
+      <Tooltip title={intl.formatMessage({id: 'pages.project.di.flow.dag.redo'})}>
+        <Button
+          size="small"
+          icon={<RedoOutlined/>}
+          onClick={onRedo}
+        />
+      </Tooltip>
+
+      <Tooltip title={intl.formatMessage({id: 'pages.project.di.flow.dag.copy'})}>
+        <Button
+          size="small"
+          icon={<CopyOutlined/>}
+          onClick={onCopy}
+        />
+      </Tooltip>
+      <Tooltip title={intl.formatMessage({id: 'pages.project.di.flow.dag.paste'})}>
+        <Button
+          size="small"
+          icon={<SnippetsOutlined />}
+          onClick={onPaste}
+        />
+      </Tooltip>
+      <Tooltip title={intl.formatMessage({id: 'pages.project.di.flow.dag.delete'})}>
+        <Button
+          size="small"
+          icon={<DeleteOutlined/>}
+          onClick={onDelete}
+        />
+      </Tooltip>
+      <Tooltip title={intl.formatMessage({id: 'pages.project.di.flow.dag.help'})}>
+        <Button
+          size="small"
+          icon={<QuestionCircleOutlined/>}
+          onClick={onHelp}
+        />
+      </Tooltip>
+    </Space>}/>
   );
 };
 
-export {Toolbar};
+export {CustomToolbar};
diff --git a/scaleph-ui-react2/src/pages/Project/Workspace/Artifact/DI/DiJobFlow/index.tsx b/scaleph-ui-react2/src/pages/Project/Workspace/Artifact/DI/DiJobFlow/index.tsx
@@ -7,7 +7,9 @@ import {DAG_CONNECTOR, DAG_EDGE} from "./Dag/shape/connector-shape";
 import {InitShape} from "./Dag/shape/node";
 import {Dnd} from "./Dag/dnd/dnd";
 import {WsDiJob} from "@/services/project/typings";
-import {Menubar, Toolbar} from '@antv/x6-react-components';
+import {Toolbar} from '@antv/x6-react-components';
+import {CustomMenubar} from "@/pages/Project/Workspace/Artifact/DI/DiJobFlow/Dag/menubar";
+import {CustomToolbar} from "@/pages/Project/Workspace/Artifact/DI/DiJobFlow/Dag/toolbar";
 
 interface DiJobFlowPorps {
   data: WsDiJob;
@@ -27,9 +29,8 @@ const DiJobFlow: React.FC = () => {
             </div>
             <div className={styles.center}>
               <div className={styles.toolbar}>
-                <Toolbar extra={<div>Toolbar按钮</div>}
-                />
-                <Menubar extra={<div>Menubar按钮</div>}/>
+                <CustomToolbar/>
+                <CustomMenubar/>
               </div>
 
               <div className={styles.graph}>