feat(entities-plugins): datakit bottom-up auto layout

Author: sumimakito

packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/FlowCanvas.vue

@@ -74,14 +74,13 @@
 </template>
 
 <script setup lang="ts">
-import { AddIcon, AutoLayoutIcon, RemoveIcon, FullscreenIcon } from '@kong/icons'
+import { AddIcon, AutoLayoutIcon, FullscreenIcon, RemoveIcon } from '@kong/icons'
 import { KTooltip } from '@kong/kongponents'
 import { Background } from '@vue-flow/background'
 import { ControlButton, Controls } from '@vue-flow/controls'
 import { VueFlow } from '@vue-flow/core'
-import type { NodeMouseEvent } from '@vue-flow/core'
 import { useElementBounding, useEventListener, useTimeoutFn } from '@vueuse/core'
-import { computed, nextTick, ref, useTemplateRef } from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'
 
 import useI18n from '../../../../composables/useI18n'
 import { DK_DATA_TRANSFER_MIME_TYPE } from '../constants'
@@ -95,6 +94,7 @@ import '@vue-flow/controls/dist/style.css'
 import '@vue-flow/core/dist/style.css'
 import '@vue-flow/core/dist/theme-default.css'
 
+import type { NodeMouseEvent } from '@vue-flow/core'
 import type { Component } from 'vue'
 
 import type { DragPayload, NodePhase } from '../types'
@@ -203,9 +203,9 @@ function onDrop(e: DragEvent) {
   propertiesPanelOpen.value = true
 }
 
-function onClickAutoLayout() {
-  autoLayout()
-  nextTick(() => fitView())
+async function onClickAutoLayout() {
+  await autoLayout()
+  setTimeout(() => fitView(), 0) // Have to use `setTimeout` here
 }
 
 type ControlAction = 'zoom_in' | 'zoom_out' | 'fit_view' | 'auto_layout'

packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/FlowPanels.vue

@@ -243,18 +243,18 @@ watch(
       setPendingFitView(false)
 
     // Wait for VueFlow internal layout measurements. nextTick does not work here.
-    setTimeout(() => {
+    setTimeout(async () => {
       if (pendingLayout) {
-        requestFlow.value?.autoLayout(false)
-        responseFlow.value?.autoLayout(false)
+        await requestFlow.value?.autoLayout(false)
+        await responseFlow.value?.autoLayout(false)
         commit('*')
 
         if (pendingLayout === 'clearHistory')
           clear()
       }
 
       if (pendingFitView) {
-        fitView()
+        setTimeout(() => fitView(), 0) // Have to use `setTimeout` here
       }
     }, 0)
   },

packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/composables/useBranchLayout.ts

@@ -179,7 +179,7 @@ export function useBranchLayout({ phase, readonly, flowId }: { phase: NodePhase,
   })
 
   const pendingGroupLayouts = new Map<GroupId, GroupLayout>()
-  const pendingParentUpdates = new Set<GroupId>()
+  const pendingParentUpdates = new Map<GroupId, { commit: boolean }>()
   let layoutFlushPromise: Promise<void> | undefined
 
   /**
@@ -200,7 +200,7 @@ export function useBranchLayout({ phase, readonly, flowId }: { phase: NodePhase,
    *   - Any member node lacks valid dimensions
    *   - The calculated bounds are invalid (infinite values)
    */
-  function calculateGroupLayout(group: GroupInstance): GroupLayout | undefined {
+  function calculateGroupLayout(group: GroupInstance, commit = true): GroupLayout | undefined {
     if (group.phase !== phase) return undefined
 
     const members = getGroupMembers(group).filter(member => member.phase === phase && !member.hidden)
@@ -260,6 +260,7 @@ export function useBranchLayout({ phase, readonly, flowId }: { phase: NodePhase,
         width: Math.round(paddedWidth),
         height: Math.round(paddedHeight),
       },
+      commit,
     }
   }
 
@@ -269,39 +270,39 @@ export function useBranchLayout({ phase, readonly, flowId }: { phase: NodePhase,
       return
     }
 
-    const applied: Array<{ id: GroupId, changed: boolean }> = []
-    let hasChanges = false
+    const applied: Array<{ id: GroupId, changed: boolean, commit: boolean }> = []
+    let scheduleCommit = false
 
     pendingGroupLayouts.forEach((layout, id) => {
       const changed = setGroupLayout(id, layout, false)
-      applied.push({ id, changed })
-      if (changed && !hasChanges) {
-        hasChanges = true
+      applied.push({ id, changed, commit: layout.commit })
+      if (layout.commit && changed && !scheduleCommit) {
+        scheduleCommit = true
       }
     })
 
     pendingGroupLayouts.clear()
     layoutFlushPromise = undefined
 
-    for (const { id, changed } of applied) {
+    for (const { id, changed, commit } of applied) {
       if (!changed) continue
       const group = groupMapById.value.get(id)
       if (!group) continue
       const parent = memberGroupMap.value.get(group.ownerId)
       if (parent) {
-        pendingParentUpdates.add(parent.id)
+        pendingParentUpdates.set(parent.id, { commit })
       }
     }
 
     if (pendingParentUpdates.size > 0) {
       const parentIds = Array.from(pendingParentUpdates)
       pendingParentUpdates.clear()
-      for (const parentId of parentIds) {
-        updateGroupLayout(parentId)
+      for (const [parentId, { commit }] of parentIds) {
+        updateGroupLayout(parentId, commit)
       }
     }
 
-    if (hasChanges) {
+    if (scheduleCommit) {
       commit('*')
     }
   }
@@ -323,11 +324,11 @@ export function useBranchLayout({ phase, readonly, flowId }: { phase: NodePhase,
    *
    * @param groupId - The ID of the group to update.
    */
-  function updateGroupLayout(groupId: GroupId) {
+  function updateGroupLayout(groupId: GroupId, commit = true) {
     const group = groupMapById.value.get(groupId)
     if (!group) return
 
-    const layout = calculateGroupLayout(group)
+    const layout = calculateGroupLayout(group, commit)
     if (!layout) return
 
     pendingGroupLayouts.set(groupId, layout)
@@ -473,6 +474,7 @@ export function useBranchLayout({ phase, readonly, flowId }: { phase: NodePhase,
 
   return {
     groupMapById,
+    groupsByOwner,
     memberGroupMap,
     groupNodes,
     branchEdges,

packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node/node.ts

@@ -10,6 +10,7 @@ import type {
   ConfigNodeType,
   IOMeta,
   NextMeta,
+  GroupInstance,
 } from '../../types'
 
 import { createI18n } from '@kong-ui-public/i18n'
@@ -222,3 +223,6 @@ export const isNodeId = (id?: string): id is NodeId =>
 
 export const isFieldId = (id?: string): id is FieldId =>
   !!id?.startsWith('field:')
+
+export const isGroupInstance = (obj: NodeInstance | GroupInstance): obj is GroupInstance =>
+  Object.prototype.hasOwnProperty.call(obj, 'ownerId')