feat: 实现选中部分节点创建规则链

@@ -13,6 +13,9 @@ import { EntryCategoryComponentEnum } from '../enum/category';
 
 const ignoreNodeKeys: string[] = [EntryCategoryComponentEnum.INPUT];
 
+export const SOURCE_HANDLE = '__handle-right';
+export const TARGET_HANDLE = '__handle-left';
+
 export function useBasicDataTransform() {
   const nodeConfigMap = new Map<string, NodeData>();
 
@@ -21,7 +24,7 @@ export function useBasicDataTransform() {
       const category = allComponents[key as RuleNodeTypeEnum];
       for (const nodeConfig of category.components) {
         const { clazz } = nodeConfig;
-        nodeConfigMap.set(clazz, { config: nodeConfig, category: category.category });
+        nodeConfigMap.set(clazz, { config: nodeConfig, categoryConfig: category.category });
       }
     }
   }
@@ -49,8 +52,7 @@ export function useBasicDataTransform() {
     const { connections, nodes, firstNodeIndex } = unref(ruleChain);
     const indexMap = new Map<number, BasicNodeBindData>();
     const groupByConnections = new Map<string, string[]>();
-    const SOURCE_HANDLE = '__handle-right';
-    const TARGET_HANDLE = '__handle-left';
+
     const SEPARATOR = ',';
     const edges: Elements = [];
     const { getAddedgesParams } = useAddEdges();
@@ -207,6 +209,8 @@ export function useBasicDataTransform() {
   function getNodes(nodesRef: Ref<GraphNode[]> | GraphNode[], removeId: boolean) {
     const nodes: BasicNodeBindData[] = [];
 
+    let offsetX = 0;
+    let offsetY = 0;
     for (const node of unref(nodesRef)) {
       const nodeData = node.data as NodeData;
 
@@ -214,16 +218,31 @@ export function useBasicDataTransform() {
 
       const data = nodeData.data;
 
-      nodes.push(
-        Object.assign(
-          mergeData(data, nodeData, node),
-          nodeData.created && !removeId
-            ? ({
-                id: { id: node.id, entityType: RuleChainEntityType.RULE_NODE },
-              } as BasicNodeBindData)
-            : {}
-        )
+      const resultNode = Object.assign(
+        mergeData(data, nodeData, node),
+        nodeData.created && !removeId
+          ? ({
+              id: { id: node.id, entityType: RuleChainEntityType.RULE_NODE },
+            } as BasicNodeBindData)
+          : {}
       );
+
+      if (resultNode.additionalInfo.layoutX < offsetX) offsetX = resultNode.additionalInfo.layoutX;
+      if (resultNode.additionalInfo.layoutY < offsetY) offsetY = resultNode.additionalInfo.layoutY;
+
+      nodes.push(resultNode);
+    }
+
+    /**
+     * compatible thingsboard rule chain designer.
+     * thingsboard rule chain designer does not have negative coordinated.
+     */
+    if (offsetX < 0 || offsetY < 0) {
+      nodes.forEach((node) => {
+        const { layoutX = 0, layoutY = 0 } = node.additionalInfo || {};
+        node.additionalInfo!.layoutX = layoutX + Math.abs(offsetX);
+        node.additionalInfo!.layoutY = layoutY + Math.abs(offsetY);
+      });
     }
 
     return nodes;
@@ -266,9 +285,22 @@ export function useBasicDataTransform() {
     nodes: Ref<GraphNode[]> | GraphNode[] = [],
     edges: Ref<GraphEdge[]> | GraphEdge[] = []
   ) {
+    let flag = true;
+
+    if (unref(nodes).length <= 1) flag = false;
+
     const rootNode: GraphNode[] = [];
 
-    let flag = true;
+    for (const edge of unref(edges)) {
+      if (!unref(nodes).find((node) => node.id === edge.source)) rootNode.push(edge.targetNode);
+    }
+
+    for (const node of unref(nodes)) {
+      if (!unref(edges).some((edge) => edge.target === node.id)) rootNode.push(node);
+    }
+
+    if (rootNode.length > 1) return { flag: false, firstNode: null };
+
     for (const node of unref(nodes)) {
       const list = unref(edges).filter(
         (edge) => edge.source === node.id || edge.target === node.id
@@ -278,14 +310,6 @@ export function useBasicDataTransform() {
         flag = false;
         break;
       }
-
-      if (!list.filter((edge) => edge.target === node.id).length) {
-        if (!rootNode.length) rootNode.push(node);
-        else {
-          flag = false;
-          break;
-        }
-      }
     }
 
     return { flag, firstNode: rootNode[0] || null };

@@ -5,7 +5,7 @@ import { useAddNodes } from './useAddNodes';
 import { buildUUID } from '/@/utils/uuid';
 import { Ref, toRaw, unref } from 'vue';
 import { useSaveAndRedo } from './useSaveAndRedo';
-import { isUnDef } from '/@/utils/is';
+import { isNullOrUnDef, isUnDef } from '/@/utils/is';
 import { useAddEdges } from './useAddEdges';
 import { EdgeData } from '../types/node';
 import { CreateNodeModal } from '../src/components/CreateNodeModal';
@@ -13,9 +13,11 @@ import { CreateEdgeModal } from '../src/components/CreateEdgeModal';
 import { UpdateNodeDrawer } from '../src/components/UpdateNodeDrawer';
 import { UpdateEdgeDrawer } from '../src/components/UpdateEdgeDrawer';
 import { CreateRuleChainModal } from '../src/components/CreateRuleChainModal';
-import { useBasicDataTransform } from './useBasicDataTransform';
+import { SOURCE_HANDLE, TARGET_HANDLE, useBasicDataTransform } from './useBasicDataTransform';
 import { cloneDeep } from 'lodash-es';
 import { useNewNode } from './useNewNode';
+import { RuleChainDetail } from '../types/ruleNode';
+import { saveRuleChainData, saveRuleChainDetail } from '/@/api/ruleDesigner';
 
 interface HandleContextMenuActionParamsType {
   menuType: RuleContextMenuEnum;
@@ -47,11 +49,15 @@ export function transformToRuleChain(
   const outputEdges = unref(edgesRef).filter((edge) => !nodeMap.has(edge.target));
   const outputEdgesId = outputEdges.map((edge) => edge.id);
 
+  const inputEdges = unref(edgesRef).filter((edge) => !nodeMap.has(edge.source));
+  const inputEdgesId = inputEdges.map((edge) => edge.id);
+
   const { getOutputNodeConfig } = useNewNode();
   const outputNode = outputEdges.map((edge) => {
     const id = buildUUID();
     const name = (edge.data as EdgeData).data?.type?.join(' / ') || '';
     edge.target = id;
+    edge.targetHandle = `${id}${TARGET_HANDLE}`;
     return getOutputNodeConfig(name, edge.targetNode.position, id);
   });
 
@@ -61,9 +67,9 @@ export function transformToRuleChain(
 
   const { firstNode } = validateCanCreateRuleChain(nodesRef, edgesRef);
 
-  const firstNodeIndex = nodesRef.findIndex((node) => node.id === firstNode.id);
+  const firstNodeIndex = nodesRef.findIndex((node) => node.id === firstNode?.id);
 
-  return { connections, nodes, firstNodeIndex, outputEdgesId };
+  return { connections, nodes, firstNodeIndex, outputEdgesId, inputEdgesId };
 }
 
 export const NODE_WIDTH = 176;
@@ -87,20 +93,13 @@ function getElementsCenter(nodes: Ref<GraphNode[]> | GraphNode[] = []) {
       continue;
     }
 
-    if (x < leftTopX!) {
-      leftTopX = x;
-      if (y < leftTopY!) {
-        leftTopY = y;
-      }
-      continue;
-    }
+    if (x < leftTopX!) leftTopX = x;
 
-    if (x + NODE_WIDTH > rightBottomX!) {
-      rightBottomX = x + NODE_WIDTH;
-      if (y + NODE_HEIGHT > rightBottomY!) {
-        rightBottomY = y + NODE_HEIGHT;
-      }
-    }
+    if (y < leftTopY!) leftTopY = y;
+
+    if (x + NODE_WIDTH > rightBottomX!) rightBottomX = x + NODE_WIDTH;
+
+    if (y + NODE_HEIGHT > rightBottomY!) rightBottomY = y + NODE_HEIGHT;
   }
 
   return {
@@ -109,6 +108,60 @@ function getElementsCenter(nodes: Ref<GraphNode[]> | GraphNode[] = []) {
   };
 }
 
+function createRuleChainNode({
+  originX,
+  originY,
+  outputEdges,
+  inputEdges,
+  ruleChainDetail,
+}: {
+  originX: number;
+  originY: number;
+  ruleChainDetail: RuleChainDetail;
+  outputEdges: Ref<(GraphEdge | undefined)[]> | (GraphEdge | undefined)[];
+  inputEdges: Ref<(GraphEdge | undefined)[]> | (GraphEdge | undefined)[];
+}) {
+  const { getRuleChainNodeConfig } = useNewNode();
+  const { getAddedgesParams } = useAddEdges();
+  const nodeId = buildUUID();
+
+  const ruleChainNode = getRuleChainNodeConfig({
+    name: ruleChainDetail.name,
+    position: { x: originX - NODE_WIDTH / 2, y: originY - NODE_HEIGHT / 2 },
+    ruleChainId: ruleChainDetail.id.id,
+    id: nodeId,
+  });
+
+  const newInputEdges = unref(inputEdges).map((edge) =>
+    getAddedgesParams(
+      {
+        source: edge!.source,
+        target: nodeId,
+        sourceHandle: `${edge?.source}${SOURCE_HANDLE}`,
+        targetHandle: `${nodeId}${TARGET_HANDLE}`,
+      },
+      toRaw(unref(edge!.data as EdgeData).data)
+    )
+  );
+
+  const newOutputEdges = unref(outputEdges).map((edge) =>
+    getAddedgesParams(
+      {
+        source: nodeId,
+        target: edge!.target,
+        sourceHandle: `${nodeId}${SOURCE_HANDLE}`,
+        targetHandle: `${edge?.target}${TARGET_HANDLE}`,
+      },
+      toRaw(unref(edge!.data as EdgeData).data)
+    )
+  );
+
+  return {
+    nodes: [ruleChainNode],
+    edges: [...newInputEdges, ...newOutputEdges],
+  };
+}
+
 export function useContextMenuAction() {
   const copy = (params: HandleContextMenuActionParamsType) => {
     const { node } = params;
@@ -248,35 +301,51 @@ export function useContextMenuAction() {
     useSaveAndRedoActionType?.handleRedoChange(flowActionType!);
   };
 
-  const createRuleChain = async (_params: HandleContextMenuActionParamsType) => {
-    // const { useSaveAndRedoActionType, modalActionType, flowActionType } = params;
-    // const { createRuleChainModalActionType } = modalActionType;
-    // const result = (await unref(createRuleChainModalActionType)?.openCreateRuleChainModal()) as {
-    //   name: string;
-    //   additionalInfo: { description: string };
-    // };
-    // const ruleChainDetail = await saveRuleChainDetail(
-    //   Object.assign(result, { debugger: false, type: 'CORE' }) as Partial<RuleChainDetail>
-    // );
-    // const selectedNodes = unref(flowActionType?.getSelectedNodes);
-    // const selectedEdges = unref(flowActionType?.getSelectedEdges);
-    // const { firstNodeIndex, connections, nodes, outputEdgesId } = transformToRuleChain(
-    //   selectedNodes,
-    //   selectedEdges
-    // );
-    // await saveRuleChainData({
-    //   firstNodeIndex,
-    //   connections,
-    //   nodes,
-    //   ruleChainId: ruleChainDetail.id,
-    // });
-    // const outputEdges = outputEdgesId.map((id) => flowActionType?.findEdge(id));
-    // console.log(getElementsCenter(unref(selectedNodes)));
-    // const { originX, originY } = getElementsCenter(unref(selectedNodes));
-    // const {} = useNewNode();
-    // flowActionType?.removeNodes(selectedNodes || []);
-    // flowActionType?.removeEdges(selectedEdges || []);
-    // useSaveAndRedoActionType?.triggerChange();
+  const createRuleChain = async (params: HandleContextMenuActionParamsType) => {
+    const { useSaveAndRedoActionType, modalActionType, flowActionType } = params;
+    const { createRuleChainModalActionType } = modalActionType;
+    const result = (await unref(createRuleChainModalActionType)?.openCreateRuleChainModal()) as {
+      name: string;
+      additionalInfo: { description: string };
+    };
+
+    const ruleChainDetail = await saveRuleChainDetail(
+      Object.assign(result, { debugger: false, type: 'CORE' }) as Partial<RuleChainDetail>
+    );
+
+    const selectedNodes = unref(flowActionType?.getSelectedNodes);
+    const selectedEdges = unref(flowActionType?.getSelectedEdges);
+    const { firstNodeIndex, connections, nodes, outputEdgesId, inputEdgesId } =
+      transformToRuleChain(selectedNodes, selectedEdges);
+
+    await saveRuleChainData({
+      firstNodeIndex,
+      connections: connections.filter(
+        (connection) => !isNullOrUnDef(connection.fromIndex) && !isNullOrUnDef(connection.toIndex)
+      ),
+      nodes,
+      ruleChainId: ruleChainDetail.id,
+    });
+
+    const outputEdges = outputEdgesId.map((id) => flowActionType?.findEdge(id));
+    const inputEdges = inputEdgesId.map((id) => flowActionType?.findEdge(id));
+
+    const { originX, originY } = getElementsCenter(unref(selectedNodes));
+
+    flowActionType?.removeNodes(selectedNodes || []);
+    flowActionType?.removeEdges(selectedEdges || []);
+
+    const { nodes: newNode, edges: newEdges } = createRuleChainNode({
+      originX,
+      originY,
+      outputEdges,
+      inputEdges,
+      ruleChainDetail,
+    });
+
+    flowActionType?.addNodes(newNode);
+    flowActionType?.addEdges(newEdges);
+    useSaveAndRedoActionType?.triggerChange();
   };
 
   const handleContextMenuAction = (params: HandleContextMenuActionParamsType) => {

@@ -40,13 +40,23 @@ export function useNewNode() {
     return newNode;
   };
 
-  const getRuleChainNodeConfig = (name: string, position: XYPosition, id?: string) => {
+  const getRuleChainNodeConfig = ({
+    name,
+    position,
+    ruleChainId,
+    id,
+  }: {
+    name: string;
+    position: XYPosition;
+    ruleChainId: string;
+    id?: string;
+  }) => {
     const { getAddNodesParams } = useAddNodes();
     const newNode = getAddNodesParams(
       position,
       {
         ...new RuleChainConfig(),
-        data: { name },
+        data: { name, configuration: { ruleChainId } },
       },
       {
         id,

@@ -65,6 +65,7 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) {
     minZoom: 1,
     panOnScroll: true,
     selectionMode: SelectionMode.Partial,
+
     nodeTypes: {
       [NodeTypeEnum.CUSTOM]: markRaw(BasicNode) as NodeComponent,
     },
@@ -79,14 +80,16 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) {
       y: 0,
     },
     isValidConnection(connection, elements) {
+      if (!elements.targetNode || !elements.sourceNode) return false;
+
       const validateList = [validateInputAndOutput];
       const targetData = elements.targetNode.data as NodeData;
 
       if (
-        targetData.category?.validateConnection &&
-        isFunction(targetData.category.validateConnection)
+        targetData.categoryConfig?.validateConnection &&
+        isFunction(targetData.categoryConfig.validateConnection)
       )
-        validateList.push(targetData.category?.validateConnection);
+        validateList.push(targetData.categoryConfig?.validateConnection);
 
       if (targetData.config?.validateConnection && isFunction(targetData.config.validateConnection))
         validateList.push(targetData.config.validateConnection);

@@ -47,7 +47,6 @@
 
   const setValue: CreateModalDefineExposeType['setFieldsValue'] = (value) => {
     resetFields();
-    console.log(value);
     setFieldsValue({
       ...value,
       ...(value?.[RelatedDeviceAttributeFieldsEnum.DEVICE_RELATIONS_QUERY] || {}),

@@ -14,6 +14,7 @@ export const RuleChainConfig: NodeItemConfigType = {
   clazz: 'org.thingsboard.rule.engine.flow.TbRuleChainInputNode',
   categoryType: RuleNodeTypeEnum.FLOW,
   name: 'rule chain',
+  // backgroundColor: '#d6c4f1',
   configurationDescriptor: {
     nodeDefinition: {
       details:

@@ -14,7 +14,7 @@
   const handleClick = () => {
     const { data } = props.nodeProps?.data || ({} as NodeData);
     const { configuration } = (data || {}) as { configuration: Record<'ruleChainId', string> };
-    if (configuration.ruleChainId) {
+    if (configuration?.ruleChainId) {
       ROUTER.push(`/rule/chain/${configuration.ruleChainId}`);
     }
   };

@@ -36,8 +36,8 @@
 
   const getIcon = computed(() => {
     const { icon } = unref(getNodeDefinition);
-    const { category } = unref(getData);
-    const { icon: categoryIcon } = category || {};
+    const { categoryConfig } = unref(getData);
+    const { icon: categoryIcon } = categoryConfig || {};
     return icon || categoryIcon || 'tabler:circuit-ground';
   });
 
@@ -47,8 +47,8 @@
   });
 
   const getBackgroundColor = computed(() => {
-    const { config, category } = unref(getData);
-    const { backgroundColor: categoryBackgroundColor } = category || {};
+    const { config, categoryConfig } = unref(getData);
+    const { backgroundColor: categoryBackgroundColor } = categoryConfig || {};
     const { backgroundColor } = config || {};
     return backgroundColor || categoryBackgroundColor;
   });
@@ -60,8 +60,8 @@
       <section class="text-dark-900 text-xs">
         <p class="mb-0 font-bold"> {{ getData?.data?.name }} </p>
         <p class="mb-0 mt-2 text-gray-500 italic">
-          {{ getData.category?.title }}
-          {{ getData?.category?.title && getData.config?.name ? '-' : '' }}
+          {{ getData.categoryConfig?.title }}
+          {{ getData?.categoryConfig?.title && getData.config?.name ? '-' : '' }}
           {{ getData.config?.name }}
         </p>
         <p class="mt-1 mb-0 text-gray-500">{{ getData.data?.description }}</p>

@@ -48,7 +48,7 @@
         v-for="config in getCurrentCategoryNode.components"
         :key="config.clazz"
         :config="config"
-        :category="getCurrentCategoryNode.category"
+        :categoryConfig="getCurrentCategoryNode.category"
       />
     </body>
   </section>

@@ -5,7 +5,7 @@
   import { CategoryConfigType, NodeItemConfigType } from '../../../types/node';
 
   const props = defineProps<{
-    category?: CategoryConfigType;
+    categoryConfig?: CategoryConfigType;
     config?: NodeItemConfigType;
   }>();
 
@@ -20,7 +20,7 @@
 
   const getIcon = computed(() => {
     const { icon } = unref(getNodeDefinition);
-    const { icon: categoryIcon } = props.category || {};
+    const { icon: categoryIcon } = props.categoryConfig || {};
     return icon || categoryIcon || 'tabler:circuit-ground';
   });
 
@@ -30,9 +30,9 @@
   });
 
   const getBackgroundColor = computed(() => {
-    const { config, category } = props;
+    const { config, categoryConfig } = props;
     const { backgroundColor } = config || {};
-    const { backgroundColor: categoryBackgroundColor } = category || {};
+    const { backgroundColor: categoryBackgroundColor } = categoryConfig || {};
     return backgroundColor || categoryBackgroundColor;
   });
 
@@ -87,8 +87,8 @@
           {{ config?.name }}
         </span>
       </div>
-      <div class="w-4 h-4 bg-dark-50 rounded-1 border absolute -left-2 border-light-50"></div>
-      <div class="w-4 h-4 bg-dark-50 rounded-1 border absolute -right-2 border-light-50"></div>
+      <div class="w-4 h-4 bg-gray-300 rounded-md border absolute -left-3 border-gray-500"></div>
+      <div class="w-4 h-4 bg-gray-300 rounded-md border absolute -right-3 border-gray-500"></div>
     </main>
   </Tooltip>
 </template>

@@ -64,8 +64,8 @@
 
   const getNodeIcon = computed(() => {
     const { nodeData } = props;
-    const { category, config } = nodeData;
-    const { icon: categoryIcon } = category || {};
+    const { categoryConfig, config } = nodeData;
+    const { icon: categoryIcon } = categoryConfig || {};
     const { configurationDescriptor } = config || {};
     const { nodeDefinition } = configurationDescriptor || {};
     const { icon } = nodeDefinition || {};
@@ -74,8 +74,8 @@
   });
 
   const getTitleBackgroundColor = computed(() => {
-    const { category, config } = props.nodeData;
-    const { backgroundColor: categoryBackgroundColor } = category || {};
+    const { categoryConfig, config } = props.nodeData;
+    const { backgroundColor: categoryBackgroundColor } = categoryConfig || {};
     const { backgroundColor } = config || {};
     return categoryBackgroundColor || backgroundColor;
   });

@@ -90,7 +90,7 @@
     <template #title>
       <h2 class="font-bold text-2xl truncate">{{ nodeData?.data?.name }}</h2>
       <p class="mb-0 text-gray-700">
-        <span> {{ nodeData?.category?.title }}</span>
+        <span> {{ nodeData?.categoryConfig?.title }}</span>
         <span class="mx-1">-</span>
         <span>{{ nodeData?.config?.name }}</span>
       </p>

 .vue-flow__handle {
   width: 16px;
   height: 16px;
+  border-radius: 6px;
+  background-color: #d1d5db;
+  border-color: #6b7280;
+}
+
+.vue-flow__handle:hover{
+  background-color: #000;
 }
 
 .vue-flow__handle-right {
-  right: -8px;
+  right: -12px;
 }
 
 .vue-flow__handle-left {
-  left: -8px; 
+  left: -12px; 
 }
 
 .vue-flow__background.vue-flow__container {

@@ -134,7 +134,7 @@ export interface DragTransferData {
 }
 
 export interface NodeData<T = BasicNodeFormData> {
-  category?: CategoryConfigType;
+  categoryConfig?: CategoryConfigType;
   config?: NodeItemConfigType;
   data?: T;
   created?: boolean;