feat: 工作流编排应用记住节点的收起/展开状态 #1543

Author: shaohuzhang1

ui/src/workflow/common/NodeContainer.vue

@@ -26,19 +26,13 @@
             <h4 v-else>{{ nodeModel.properties.stepName }}</h4>
           </div>
 
-          <div
-            @mousemove.stop
-            @mousedown.stop
-            @keydown.stop
-            @click.stop
-            v-if="showOperate(nodeModel.type)"
-          >
+          <div @mousemove.stop @mousedown.stop @keydown.stop @click.stop>
             <el-button text @click="showNode = !showNode" class="mr-4">
               <el-icon class="arrow-icon" :class="showNode ? 'rotate-180' : ''"
                 ><ArrowDownBold />
               </el-icon>
             </el-button>
-            <el-dropdown :teleported="false" trigger="click">
+            <el-dropdown v-if="showOperate(nodeModel.type)" :teleported="false" trigger="click">
               <el-button text>
                 <el-icon class="color-secondary"><MoreFilled /></el-icon>
               </el-button>
@@ -130,7 +124,19 @@ const height = ref<{
 })
 const showAnchor = ref<boolean>(false)
 const anchorData = ref<any>()
-const showNode = ref<boolean>(true)
+// const showNode = ref<boolean>(true)
+const showNode = computed({
+  set: (v) => {
+    set(props.nodeModel.properties, 'showNode', v)
+  },
+  get: () => {
+    if (props.nodeModel.properties.showNode !== undefined) {
+      return props.nodeModel.properties.showNode
+    }
+    set(props.nodeModel.properties, 'showNode', true)
+    return true
+  }
+})
 const node_status = computed(() => {
   if (props.nodeModel.properties.status) {
     return props.nodeModel.properties.status

ui/src/workflow/common/app-node.ts

@@ -234,21 +234,22 @@ class AppNodeModel extends HtmlResize.model {
   }
   getDefaultAnchor() {
     const { id, x, y, width } = this
+    const showNode = this.properties.showNode === undefined ? true : this.properties.showNode
     const anchors: any = []
 
     if (this.type !== WorkflowType.Base) {
       if (this.type !== WorkflowType.Start) {
         anchors.push({
           x: x - width / 2 + 10,
-          y: y,
+          y: showNode ? y : y - 15,
           id: `${id}_left`,
           edgeAddable: false,
           type: 'left'
         })
       }
       anchors.push({
         x: x + width / 2 - 10,
-        y: y,
+        y: showNode ? y : y - 15,
         id: `${id}_right`,
         type: 'right'
       })

ui/src/workflow/nodes/condition-node/index.ts

@@ -35,10 +35,11 @@ class ConditionModel extends AppNodeModel {
     if (this.height === undefined) {
       this.height = 200
     }
+    const showNode = this.properties.showNode === undefined ? true : this.properties.showNode
     const anchors: any = []
     anchors.push({
       x: x - width / 2 + 10,
-      y: y,
+      y: showNode ? y : y - 15,
       id: `${id}_left`,
       edgeAddable: false,
       type: 'left'
@@ -50,7 +51,7 @@ class ConditionModel extends AppNodeModel {
         const h = get_up_index_height(branch_condition_list, index)
         anchors.push({
           x: x + width / 2 - 10,
-          y: y - height / 2 + 75 + h + element.height / 2,
+          y: showNode ? y - height / 2 + 75 + h + element.height / 2 : y - 15,
           id: `${id}_${element.id}_right`,
           type: 'right'
         })