feat(entities-plugins): add branch node support for datakit flow editor

packages/entities/entities-plugins/src/components/free-form/Datakit/constants.ts

@@ -1,6 +1,6 @@
 import type { KeySpec } from './flow-editor/utils'
 
-import { KUI_SPACE_40 } from '@kong/design-tokens'
+import { KUI_SPACE_40, KUI_SPACE_90 } from '@kong/design-tokens'
 
 export const DK_HEADER_HEIGHT = 44
 export const DK_SIDE_PANEL_WIDTH = 220
@@ -63,3 +63,11 @@ export const HOTKEYS = {
   paste: ['Mod', 'V'],
   duplicate: ['Mod', 'D'],
 } as const satisfies Record<string, KeySpec>
+
+export const DK_FLOW_Z_LAYER_STEP = 1
+export const DK_FLOW_GROUP_Z_OFFSET = 0
+export const DK_FLOW_EDGE_Z_OFFSET = 1
+export const DK_FLOW_BRANCH_EDGE_Z_OFFSET = 2
+export const DK_FLOW_NODE_Z_OFFSET = 3
+
+export const DK_BRANCH_GROUP_PADDING = parseInt(KUI_SPACE_90, 10)

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

@@ -52,13 +52,16 @@
       </Controls>
 
       <!-- To not use the default node style -->
-      <template #node-flow="node">
+      <template #node-flow="{ data }">
         <FlowNode
-          :data="node.data"
-          :error="invalidConfigNodeIds.has(node.data.id)"
+          :data
+          :error="invalidConfigNodeIds.has(data.id)"
           :readonly="mode !== 'edit'"
         />
       </template>
+      <template #node-group="{ data }">
+        <GroupNode :data />
+      </template>
     </VueFlow>
 
     <div
@@ -76,6 +79,7 @@ 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'
 
@@ -84,6 +88,7 @@ import { DK_DATA_TRANSFER_MIME_TYPE } from '../constants'
 import { useHotkeys } from './composables/useHotkeys'
 import { MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL } from './constants'
 import FlowNode from './node/FlowNode.vue'
+import GroupNode from './node/GroupNode.vue'
 import { provideFlowStore } from './store/flow'
 
 import '@vue-flow/controls/dist/style.css'
@@ -141,8 +146,16 @@ const { project, vueFlowRef, zoomIn, zoomOut, viewport, maxZoom, minZoom } = vue
 
 const disableDrop = ref(false)
 
-function onNodeClick() {
-  if (mode !== 'edit') return
+function onNodeClick(event: NodeMouseEvent) {
+  if (mode !== 'edit') {
+    return
+  }
+
+  if (event?.node?.type === 'group') {
+    selectNode(undefined)
+    return
+  }
+
   propertiesPanelOpen.value = true
 }
 
@@ -289,11 +302,11 @@ defineExpose({ autoLayout, fitView })
 
     &:not(.readonly) {
       :deep(.vue-flow__node) {
-        &:hover:not(:has(.value-indicator:hover)) .flow-node {
+        &:hover:not(:has(.value-indicator:hover)) .dk-flow-node {
           border-color: $kui-color-border-primary-weak;
         }
 
-        &.selected .flow-node {
+        &.selected .dk-flow-node {
           border-color: $kui-color-border-primary;
         }
       }

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

@@ -34,7 +34,7 @@ import { provideEditorStore } from '../composables'
 import FlowPanels from './FlowPanels.vue'
 import EditorModal from './modal/EditorModal.vue'
 
-import type { ConfigNode, DatakitConfig, DatakitPluginData, DatakitUIData, UINode } from '../types'
+import type { ConfigNode, DatakitConfig, DatakitPluginData, DatakitUIData } from '../types'
 
 const { t } = createI18n<typeof english>('en-us', english)
 
@@ -49,10 +49,13 @@ const emit = defineEmits<{
   error: [msg: string]
 }>()
 
-function onChange(configNodes: ConfigNode[], uiNodes: UINode[], resources: DatakitConfig['resources']) {
+function onChange(configNodes: ConfigNode[], uiData: DatakitUIData, resources: DatakitConfig['resources']) {
   const nextConfig = { ...formData.config, nodes: configNodes }
   if (resources !== undefined) nextConfig.resources = resources
-  const nextUIData = { ...formData.__ui_data, nodes: uiNodes }
+  const nextUIData: DatakitUIData = {
+    ...formData.__ui_data,
+    ...uiData,
+  }
   formData.config = nextConfig
   formData.__ui_data = nextUIData
   emit('change', nextConfig, nextUIData)