feat: 工作流画布支持一键展开，一件收起节点

1Panel-dev · Nov 18, 2024 · 8bbfed7 · 8bbfed7
1 parent 832d2a2
commit 8bbfed7
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 24 deletions.
diff --git a/ui/src/components/icons/index.ts b/ui/src/components/icons/index.ts
@@ -1249,26 +1249,63 @@ export const iconMap: any = {
         )
       ])
     }
+  },
+  'app-retract': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 16 16',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M5.44661 0.747985C5.55509 0.639506 5.73097 0.639506 5.83945 0.747985L8.00004 2.90858L10.1606 0.748004C10.2691 0.639525 10.445 0.639525 10.5534 0.748004L11.1034 1.29798C11.2119 1.40645 11.2119 1.58233 11.1034 1.69081L8.7488 4.04544L8.74644 4.04782L8.19647 4.59779C8.16892 4.62534 8.13703 4.64589 8.10299 4.65945C8.003 4.6993 7.88453 4.67875 7.80359 4.59781L7.25362 4.04784L7.25003 4.04419L4.89664 1.69079C4.78816 1.58232 4.78816 1.40644 4.89664 1.29796L5.44661 0.747985Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M1.99999 5.82774C1.63181 5.82774 1.33333 6.12622 1.33333 6.49441V9.16107C1.33333 9.52926 1.63181 9.82774 2 9.82774H14C14.3682 9.82774 14.6667 9.52926 14.6667 9.16107V6.49441C14.6667 6.12622 14.3682 5.82774 14 5.82774H1.99999ZM13.3333 7.16108V8.49441H2.66666V7.16108H13.3333Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M10.1605 14.9075C10.269 15.016 10.4449 15.016 10.5534 14.9075L11.1033 14.3575C11.2118 14.249 11.2118 14.0732 11.1033 13.9647L8.75 11.6113L8.74637 11.6076L8.1964 11.0577C8.11546 10.9767 7.99699 10.9562 7.897 10.996C7.86296 11.0096 7.83107 11.0301 7.80352 11.0577L7.25354 11.6077L7.25117 11.6101L4.89657 13.9647C4.78809 14.0731 4.78809 14.249 4.89657 14.3575L5.44654 14.9075C5.55502 15.016 5.7309 15.016 5.83938 14.9075L7.99995 12.7469L10.1605 14.9075Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+  'app-extend': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 16 16',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M10.5534 5.07974C10.4449 5.18822 10.269 5.18822 10.1605 5.07974L7.99992 2.91915L5.83935 5.07972C5.73087 5.1882 5.555 5.1882 5.44652 5.07972L4.89654 4.52975C4.78807 4.42127 4.78807 4.24539 4.89654 4.13691L7.25117 1.78229L7.25352 1.77991L7.80349 1.22994C7.83019 1.20324 7.86098 1.18311 7.89384 1.16955C7.99448 1.12801 8.11459 1.14813 8.19638 1.22992L8.74635 1.77989L8.74998 1.78359L11.1033 4.13693C11.2118 4.24541 11.2118 4.42129 11.1033 4.52977L10.5534 5.07974Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M5.83943 10.9202C5.73095 10.8118 5.55507 10.8118 5.44659 10.9202L4.89662 11.4702C4.78814 11.5787 4.78814 11.7546 4.89662 11.863L7.24997 14.2164L7.25359 14.2201L7.80357 14.7701C7.8862 14.8527 8.00795 14.8724 8.10922 14.8291C8.14091 14.8156 8.17059 14.7959 8.19645 14.77L8.74642 14.2201L8.74873 14.2177L11.1034 11.8631C11.2119 11.7546 11.2119 11.5787 11.1034 11.4702L10.5534 10.9202C10.4449 10.8118 10.2691 10.8118 10.1606 10.9202L8.00002 13.0808L5.83943 10.9202Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M2.00004 6C1.63185 6 1.33337 6.29848 1.33337 6.66667V9.33333C1.33337 9.70152 1.63185 10 2.00004 10H14C14.3682 10 14.6667 9.70152 14.6667 9.33333V6.66667C14.6667 6.29848 14.3682 6 14 6H2.00004ZM13.3334 7.33333V8.66667H2.66671V7.33333H13.3334Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
   }
-  // 'app-history-outlined': {
-  //   iconReader: () => {
-  //     return h('i', [
-  //       h(
-  //         'svg',
-  //         {
-  //           style: { height: '100%', width: '100%' },
-  //           viewBox: '0 0 1024 1024',
-  //           version: '1.1',
-  //           xmlns: 'http://www.w3.org/2000/svg'
-  //         },
-  //         [
-  //           h('path', {
-  //             d: 'M955.733333 512c0 235.648-191.018667 426.666667-426.666666 426.666667a425.898667 425.898667 0 0 1-334.677334-162.005334l67.797334-51.84a341.333333 341.333333 0 1 0-69.717334-269.653333h30.08c18.176-0.042667 29.013333 20.181333 18.944 35.328L170.24 597.333333a22.741333 22.741333 0 0 1-37.888 0l-71.253333-106.88a22.741333 22.741333 0 0 1 18.944-35.413333h26.112C133.973333 246.4 312.746667 85.333333 529.066667 85.333333c235.648 0 426.666667 191.018667 426.666666 426.666667z" p-id="16742"></path><path d="M554.666667 497.792V364.074667A22.741333 22.741333 0 0 0 531.925333 341.333333h-39.850666a22.741333 22.741333 0 0 0-22.741334 22.741334v196.266666c0 12.586667 10.197333 22.784 22.741334 22.784H674.133333a22.741333 22.741333 0 0 0 22.741334-22.784V520.533333a22.741333 22.741333 0 0 0-22.741334-22.741333H554.666667z',
-  //             fill: 'currentColor'
-  //           })
-  //         ]
-  //       )
-  //     ])
-  //   }
-  // }
 }
diff --git a/ui/src/workflow/common/NodeControl.vue b/ui/src/workflow/common/NodeControl.vue
@@ -6,13 +6,24 @@
     <el-button link @click="zoomIn">
       <el-icon :size="16" title="放大"><ZoomIn /></el-icon>
     </el-button>
-
-    <el-divider direction="vertical" />
     <el-button link @click="fitView">
       <AppIcon iconName="app-fitview" title="适应"></AppIcon>
     </el-button>
+    <el-divider direction="vertical" />
+    <el-button link @click="retract">
+      <el-tooltip class="box-item" effect="dark" content="收起全部节点" placement="top">
+        <AppIcon iconName="app-retract" title="收起全部节点"></AppIcon>
+      </el-tooltip>
+    </el-button>
+    <el-button link @click="extend">
+      <el-tooltip class="box-item" effect="dark" content="展开全部节点" placement="top">
+        <AppIcon iconName="app-extend" title="展开全部节点"></AppIcon>
+      </el-tooltip>
+    </el-button>
     <el-button link @click="layout">
-      <AppIcon iconName="app-beautify" title="美化"></AppIcon>
+      <el-tooltip class="box-item" effect="dark" content="一键美化" placement="top">
+        <AppIcon iconName="app-beautify" title="一键美化"></AppIcon>
+      </el-tooltip>
     </el-button>
   </el-card>
 </template>
@@ -36,5 +47,15 @@ function fitView() {
 const layout = () => {
   props.lf?.extension.dagre.layout()
 }
+const retract = () => {
+  props.lf?.graphModel.nodes.forEach((element: any) => {
+    element.properties.showNode = false
+  })
+}
+const extend = () => {
+  props.lf?.graphModel.nodes.forEach((element: any) => {
+    element.properties.showNode = true
+  })
+}
 </script>
 <style scoped></style>