feat: refactor selection flow and add approval branch-group business rules

Author: 1myuan

frontend/packages/web/src/components/business/crm-flow/components/canvas/flowCanvas.vue

@@ -41,23 +41,30 @@
     BranchClickPayload,
     FlowGraphController,
     FlowGraphNodeClickPayload,
+    FlowGraphNodeData,
     NodeClickPayload,
   } from '../../graph/types';
-  import type { FlowSchema } from '../../types';
+  import type { FlowSchema, NodeSelectionState } from '../../types';
 
   defineOptions({
     name: 'FlowCanvas',
   });
 
-  const props = defineProps<{
-    flow: FlowSchema;
-  }>();
+  const props = withDefaults(
+    defineProps<{
+      flow: FlowSchema;
+      selection: NodeSelectionState;
+    }>(),
+    {}
+  );
   const slots = useSlots();
   const hasInsertNodeContentSlot = computed(() => Boolean(slots.insertNodeContent));
 
   const emit = defineEmits<{
     (event: 'nodeClick', payload: NodeClickPayload): void;
     (event: 'branchClick', payload: BranchClickPayload): void;
+    (event: 'nodeDelete', payload: { nodeId: string }): void;
+    (event: 'branchDelete', payload: { groupId: string; branchId: string }): void;
     (event: 'addConditionBranch', groupId: string): void;
     (event: 'blankClick'): void;
   }>();
@@ -145,6 +152,18 @@
     }
   }
 
+  function resolveSelectedState(data: FlowGraphNodeData): boolean {
+    if (data.kind === 'condition-branch') {
+      return props.selection.type === 'branch' && data.branchId === props.selection.id;
+    }
+
+    if (data.kind === 'start' || data.kind === 'action' || data.kind === 'end') {
+      return props.selection.type === 'node' && data.nodeId === props.selection.id;
+    }
+
+    return false;
+  }
+
   function renderFlow() {
     if (!graphController.value) {
       return;
@@ -154,9 +173,59 @@
       cardHeight: viewMode.value === 'compact' ? 58 : 104,
       showNodeDescription: viewMode.value === 'detail',
     });
-    graphController.value.render(cells);
+
+    const cellsWithSelection = (cells as any[]).map((cell) => {
+      if (!cell?.data) {
+        return cell;
+      }
+
+      const data = cell.data as FlowGraphNodeData;
+      return {
+        ...cell,
+        data: {
+          ...data,
+          selected: resolveSelectedState(data),
+        },
+      };
+    });
+
+    graphController.value.render(cellsWithSelection);
+  }
+
+  function updateRenderedSelectionState() {
+    const graph = graphController.value?.getGraph();
+    if (!graph) {
+      return;
+    }
+
+    graph.getNodes().forEach((node) => {
+      const data = (node.getData?.() ?? null) as FlowGraphNodeData | null;
+      if (!data) {
+        return;
+      }
+
+      const nextSelected = resolveSelectedState(data);
+      if (data.selected === nextSelected) {
+        return;
+      }
+
+      node.setData({
+        ...data,
+        selected: nextSelected,
+      });
+    });
   }
 
+  watch(
+    () => props.selection,
+    () => {
+      updateRenderedSelectionState();
+    },
+    {
+      deep: true,
+    }
+  );
+
   function handleViewModeChange(mode: 'compact' | 'detail') {
     viewMode.value = mode;
     renderFlow();
@@ -239,6 +308,23 @@
           });
         }
       },
+      onNodeDelete({ data }) {
+        if (isPanMode.value) {
+          return;
+        }
+        if (data.kind === 'condition-branch' && data.groupId && data.branchId) {
+          emit('branchDelete', {
+            groupId: data.groupId,
+            branchId: data.branchId,
+          });
+          return;
+        }
+        if (data.nodeId) {
+          emit('nodeDelete', {
+            nodeId: data.nodeId,
+          });
+        }
+      },
       onBlankClick() {
         if (isPanMode.value) {
           return;

frontend/packages/web/src/components/business/crm-flow/components/canvas/flowCanvasToolbar.vue

@@ -47,7 +47,13 @@
 
       <n-tooltip trigger="hover">
         <template #trigger>
-          <CrmIcon class="flow-canvas-toolbar__icon" type="iconicon_zoom_out1" :size="16" @click="zoomOut" />
+          <CrmIcon
+            class="flow-canvas-toolbar__icon"
+            :class="{ 'is-disabled': !canZoomOut }"
+            type="iconicon_zoom_out1"
+            :size="16"
+            @click="zoomOut"
+          />
         </template>
         <span>{{ t('crmFlow.zoomOut') }}</span>
       </n-tooltip>
@@ -65,7 +71,13 @@
 
       <n-tooltip trigger="hover">
         <template #trigger>
-          <CrmIcon class="flow-canvas-toolbar__icon" type="iconicon_zoom_in1" :size="18" @click="zoomIn" />
+          <CrmIcon
+            class="flow-canvas-toolbar__icon"
+            :class="{ 'is-disabled': !canZoomIn }"
+            type="iconicon_zoom_in1"
+            :size="18"
+            @click="zoomIn"
+          />
         </template>
         <span>{{ t('crmFlow.zoomIn') }}</span>
       </n-tooltip>
@@ -126,6 +138,8 @@
 
   const zoomPercent = ref(100);
   const zoomLevels = [50, 75, 100, 125, 150, 200] as const;
+  const canZoomOut = computed(() => zoomPercent.value > 50);
+  const canZoomIn = computed(() => zoomPercent.value < 200);
 
   const selectedZoomOptionKey = computed(() => {
     const key = `zoom-${zoomPercent.value}`;
@@ -153,11 +167,17 @@
   }
 
   function zoomIn() {
+    if (!canZoomIn.value) {
+      return;
+    }
     props.graphController?.zoomIn();
     syncZoomPercent();
   }
 
   function zoomOut() {
+    if (!canZoomOut.value) {
+      return;
+    }
     props.graphController?.zoomOut();
     syncZoomPercent();
   }
@@ -249,6 +269,13 @@
     &.is-active {
       color: var(--primary-8);
     }
+    &.is-disabled {
+      color: var(--text-n6);
+      cursor: not-allowed;
+      &:hover {
+        color: var(--text-n6);
+      }
+    }
   }
 </style>
 

frontend/packages/web/src/components/business/crm-flow/components/nodes/actionNode.vue

@@ -12,10 +12,11 @@
 </template>
 
 <script setup lang="ts">
-  import { computed } from 'vue';
+  import { computed, toRef } from 'vue';
 
   import BaseFlowNode from './baseFlowNode.vue';
 
+  import useX6NodeData from '../../composables/useX6NodeData';
   import type { Node } from '@antv/x6';
 
   defineOptions({
@@ -42,16 +43,14 @@
     (event: 'delete'): void;
   }>();
 
-  const nodeData = computed(
-    () =>
-      (props.node?.getData?.() ?? {}) as {
-        name?: string;
-        description?: string;
-        actionType?: string;
-        showContent?: boolean;
-        selected?: boolean;
-      }
-  );
+  const { nodeData } = useX6NodeData<{
+    name?: string;
+    description?: string;
+    actionType?: string;
+    showContent?: boolean;
+    selected?: boolean;
+  }>(toRef(props, 'node'));
+
   const iconConfig = computed<ActionIconConfig>(() => {
     const { actionType } = nodeData.value;
     return ACTION_TYPE_ICON_MAP[actionType ?? 'approval'];

frontend/packages/web/src/components/business/crm-flow/components/nodes/baseFlowNode.vue

@@ -16,8 +16,8 @@
             <CrmIcon
               type="iconicon_close"
               :size="16"
-              class="cursor-pointer text-[var(--text-n4)] hover:text-[var(--primary-8)]"
-              @click.stop="handleDelete"
+              class="base-flow-node__delete-icon cursor-pointer text-[var(--text-n4)] hover:text-[var(--primary-8)]"
+              @click="handleDelete"
             />
           </template>
           <span> {{ t('crmFlow.deleteNode') }} </span>

frontend/packages/web/src/components/business/crm-flow/components/nodes/conditionBranchNode.vue

@@ -15,10 +15,11 @@
 </template>
 
 <script setup lang="ts">
-  import { computed } from 'vue';
+  import { computed, toRef } from 'vue';
 
   import BaseFlowNode from './baseFlowNode.vue';
 
+  import useX6NodeData from '../../composables/useX6NodeData';
   import type { Node } from '@antv/x6';
 
   defineOptions({
@@ -33,16 +34,14 @@
     (event: 'delete'): void;
   }>();
 
-  const nodeData = computed(
-    () =>
-      (props.node?.getData?.() ?? {}) as {
-        name?: string;
-        description?: string;
-        showContent?: boolean;
-        isElse?: boolean;
-        selected?: boolean;
-      }
-  );
+  const { nodeData } = useX6NodeData<{
+    name?: string;
+    description?: string;
+    showContent?: boolean;
+    isElse?: boolean;
+    selected?: boolean;
+  }>(toRef(props, 'node'));
+
   const displayIsElse = computed(() => nodeData.value.isElse ?? false);
 
   function handleDelete() {

frontend/packages/web/src/components/business/crm-flow/components/nodes/endNode.vue

@@ -11,10 +11,11 @@
 </template>
 
 <script setup lang="ts">
-  import { computed } from 'vue';
+  import { toRef } from 'vue';
 
   import BaseFlowNode from './baseFlowNode.vue';
 
+  import useX6NodeData from '../../composables/useX6NodeData';
   import type { Node } from '@antv/x6';
 
   defineOptions({
@@ -25,5 +26,5 @@
     node?: Node;
   }>();
 
-  const nodeData = computed(() => (props.node?.getData?.() ?? {}) as { name?: string; selected?: boolean });
+  const { nodeData } = useX6NodeData<{ name?: string; selected?: boolean }>(toRef(props, 'node'));
 </script>

frontend/packages/web/src/components/business/crm-flow/components/nodes/startNode.vue

@@ -13,10 +13,11 @@
 </template>
 
 <script setup lang="ts">
-  import { computed } from 'vue';
+  import { toRef } from 'vue';
 
   import BaseFlowNode from './baseFlowNode.vue';
 
+  import useX6NodeData from '../../composables/useX6NodeData';
   import type { Node } from '@antv/x6';
 
   defineOptions({
@@ -27,13 +28,10 @@
     node?: Node;
   }>();
 
-  const nodeData = computed(
-    () =>
-      (props.node?.getData?.() ?? {}) as {
-        name?: string;
-        description?: string;
-        showContent?: boolean;
-        selected?: boolean;
-      }
-  );
+  const { nodeData } = useX6NodeData<{
+    name?: string;
+    description?: string;
+    showContent?: boolean;
+    selected?: boolean;
+  }>(toRef(props, 'node'));
 </script>