Merge pull request 'fix: 修复global_param为null时报错' (#35) from dev-zw into dev

react-ui/src/pages/Experiment/experimentText/paramsModal.tsx

@@ -12,7 +12,7 @@ import styles from './paramsModal.less';
 type ParamsModalProps = {
   open: boolean;
   onCancel: () => void;
-  globalParam?: PipelineGlobalParam[];
+  globalParam?: PipelineGlobalParam[] | null;
 };
 
 function ParamsModal({ open, onCancel, globalParam = [] }: ParamsModalProps) {
@@ -26,7 +26,7 @@ function ParamsModal({ open, onCancel, globalParam = [] }: ParamsModalProps) {
       cancelButtonProps={{ style: { display: 'none' } }}
     >
       <div className={styles.params_container}>
-        {globalParam.map((item) => (
+        {globalParam?.map((item) => (
           <div key={item.param_name} className={styles.params_container_line}>
             <span className={styles.params_container_line_label}>{getParamType(item)}</span>
             <span className={styles.params_container_line_value}>{item.param_value}</span>

react-ui/src/pages/Pipeline/editPipeline/globalParamsDrawer.tsx

@@ -14,7 +14,7 @@ import styles from './globalParamsDrawer.less';
 type GlobalParamsDrawerProps = {
   open: boolean;
   onClose: () => void;
-  globalParam: PipelineGlobalParam[];
+  globalParam: PipelineGlobalParam[] | null;
 };
 
 const GlobalParamsDrawer = forwardRef(

react-ui/src/pages/Pipeline/editPipeline/index.jsx

@@ -281,7 +281,7 @@ const EditPipeline = () => {
   const getFirstWorkflow = (val) => {
     getWorkflowById(val).then((ret) => {
       if (ret && ret.data) {
-        setGlobalParam(ret.data.global_param);
+        setGlobalParam(ret.data.global_param || []);
       }
       if (graph && ret.data && ret.data.dag) {
         getGraphData(JSON.parse(ret.data.dag));
@@ -393,6 +393,8 @@ const EditPipeline = () => {
               // 上下各3，左右各1
               [0.5, 0],
               [0.5, 1],
+              [0, 0.5],
+              [1, 0.5],
             ]
           );
         },
@@ -456,6 +458,7 @@ const EditPipeline = () => {
               anchorPointIdx: i, // flag the idx of the anchor-point circle
               links: 0, // cache the number of edges connected to this shape
               visible: false, // invisible by default, shows up when links > 1 or the node is in showAnchors state
+              draggable: true,
             });
           });
           return image;
@@ -503,7 +506,7 @@ const EditPipeline = () => {
           // config the shouldBegin and shouldEnd to make sure the create-edge is began and ended at anchor-point circles
           {
             type: 'create-edge',
-            // trigger: 'drag',
+            trigger: 'drag',
             shouldBegin: (e) => {
               // avoid beginning at other shapes on the node
               if (e.target && e.target.get('name') !== 'anchor-point') return false;
@@ -619,16 +622,24 @@ const EditPipeline = () => {
       fitView: true,
       fitViewPadding: [320, 320, 220, 320],
     });
-    graph.on('dblclick', (e) => {
-      console.log(e.item);
-      if (e.item) {
-        graph.setItemState(e.item, 'nodeClicked', true);
-        handlerClick(e);
+    // graph.on('dblclick', (e) => {
+    //   console.log(e.item);
+    //   if (e.item) {
+    //     graph.setItemState(e.item, 'nodeClicked', true);
+    //     handlerClick(e);
+    //   }
+    // });
+    graph.on('node:click', (e) => {
+      console.log(e.target.get('name'));
+      if (e.target.get('name') === 'anchor-point') {
+        // create edge
+      } else {
+        if (e.item) {
+          graph.setItemState(e.item, 'nodeClicked', true);
+          handlerClick(e);
+        }
       }
     });
-    graph.on('click', (e) => {
-      console.log(e.item);
-    });
     graph.on('aftercreateedge', (e) => {
       // update the sourceAnchor and targetAnchor for the newly added edge
       graph.updateItem(e.edge, {
@@ -666,6 +677,39 @@ const EditPipeline = () => {
         },
       });
     });
+    graph.on('node:dragenter', (e) => {
+      console.log(e.target.get('name'));
+      console.log('node:dragenter');
+      graph.setItemState(e.item, 'nodeSelected', true);
+      graph.updateItem(e.item, {
+        // 节点的样式
+        style: {
+          stroke: '#1664ff',
+        },
+      });
+    });
+    graph.on('node:dragleave', (e) => {
+      console.log(e.target.get('name'));
+      console.log('node:dragleave');
+      graph.setItemState(e.item, 'nodeSelected', false);
+      graph.updateItem(e.item, {
+        // 节点的样式
+        style: {
+          stroke: 'transparent',
+        },
+      });
+    });
+    graph.on('node:dragstart', (e) => {
+      console.log('node:dragstart');
+      graph.setItemState(e.item, 'nodeSelected', true);
+      graph.updateItem(e.item, {
+        // 节点的样式
+        style: {
+          stroke: '#1664ff',
+        },
+      });
+    });
+
     graph.on('afterremoveitem', (e) => {
       if (e.item && e.item.source && e.item.target) {
         const sourceNode = graph.findById(e.item.source);