perf: One click beautification within the loop node

Author: wangdan-fit2cloud

ui/src/workflow/common/NodeControl.vue

@@ -9,7 +9,7 @@
     </el-button>
     <el-button
       @click="changeCursor(false)"
-      style="border: none; padding: 4px; height: 24px;margin-left: 8px;"
+      style="border: none; padding: 4px; height: 24px; margin-left: 8px"
       :class="{ 'is-drag-active': !isDrag }"
     >
       <AppIcon iconName="app-raisehand" :size="16"></AppIcon>
@@ -113,6 +113,12 @@ function fitView() {
 }
 const layout = () => {
   props.lf?.extension.dagre.layout()
+  console.log(props.lf)
+  props.lf?.graphModel.nodes.forEach((node: any) => {
+    if (node.type === 'loop-body-node') {
+      node?.loopLayout?.()
+    }
+  })
 }
 const retract = () => {
   props.lf?.graphModel.nodes.forEach((element: any) => {

ui/src/workflow/index.vue

@@ -108,8 +108,6 @@ const renderGraphData = (data?: any) => {
       // 清除当前节点下面的子节点的所有缓存
       data.nodeModel.clear_next_node_field(false)
     })
-    // lf.value.openSelectionSelect()
-    // lf.value.extension.selectionSelect.setSelectionSense(true, false)
     setTimeout(() => {
       lf.value?.fitView()
     }, 500)

ui/src/workflow/nodes/loop-body-node/LoopBodyContainer.vue

@@ -16,6 +16,7 @@
             />
             <h4 class="ellipsis-1 break-all">{{ nodeModel.properties.stepName }}</h4>
           </div>
+
           <!-- 放大缩小按钮 -->
           <el-button link @click="enlargeHandle">
             <AppIcon
@@ -121,6 +122,10 @@ import { WorkflowMode } from '@/enums/application'
 
 provide('workflowMode', WorkflowMode.ApplicationLoop)
 
+const props = defineProps<{
+  nodeModel: any
+}>()
+
 const titleFormRef = ref()
 const nodeNameDialogVisible = ref<boolean>(false)
 const form = ref<any>({
@@ -176,9 +181,6 @@ const showicon = ref<number | null>(null)
 
 const height = ref<number>(600)
 
-const props = defineProps<{
-  nodeModel: any
-}>()
 const nodeFields = computed(() => {
   if (props.nodeModel.properties.config.fields) {
     const fields = props.nodeModel.properties.config.fields?.map((field: any) => {

ui/src/workflow/nodes/loop-body-node/index.vue

@@ -156,14 +156,27 @@ const renderGraphData = (data?: any) => {
     }, 500)
   }
 }
+
+const loopLayout = () => {
+  lf.value?.extension?.dagre.layout()
+}
 onMounted(() => {
   renderGraphData(cloneDeep(props.nodeModel.properties.workflow))
   set(props.nodeModel, 'validate', validate)
   set(props.nodeModel, 'set_loop_body', set_loop_body)
+  set(props.nodeModel, 'loopLayout', loopLayout)
 })
 onUnmounted(() => {
   disconnectByFlow(lf.value.graphModel.flowId)
   lf.value = null
 })
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.loop-beautify-button {
+  position: absolute;
+  top: 35px;
+  right: 70px;
+  border: none;
+  z-index: 10;
+}
+</style>