@rxflow/bloodline 0.0.1-alpha.0

package/cjs/utils/_layoutCells.js

@@ -0,0 +1,483 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.layoutCells = void 0;
+var _hierarchy = _interopRequireDefault(require("@antv/hierarchy"));
+var _base = require("@rxflow/base");
+var _last = _interopRequireDefault(require("lodash/last"));
+var _constants = require("../constants");
+var _keys = require("./keys");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * @author: yanxianliang
+ * @date: 2025-07-03 13:20
+ * @desc: 血缘布局
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+
+// 支持 innerNodes 配置
+function getChildren(direction, origin) {
+  let children = [];
+  if (origin.innerNodes) {
+    origin.innerNodes.forEach(innerNode => {
+      const connectorState = direction === _constants.BloodlineDirection.downstream ? innerNode.downstream : innerNode.upstream;
+      if (connectorState?.state === 'expanded') {
+        const list = connectorState.list || [];
+        children.push(...list.map(child => {
+          return {
+            ...child,
+            [_constants.sideSymbol]: direction === _constants.BloodlineDirection.upstream ? _constants.SplitSide.left : _constants.SplitSide.right,
+            [_constants.parentIdSymbol]: innerNode.id
+          };
+        }));
+      }
+    });
+  } else {
+    const connectorState = direction === _constants.BloodlineDirection.downstream ? origin.downstream : origin.upstream;
+    if (connectorState?.state === 'expanded') {
+      const list = connectorState.list || [];
+      children.push(...list.map(child => {
+        return {
+          ...child,
+          [_constants.sideSymbol]: direction === _constants.BloodlineDirection.upstream ? _constants.SplitSide.left : _constants.SplitSide.right
+        };
+      }));
+    }
+  }
+  return children;
+}
+function getSiblings(node) {
+  const {
+    depth,
+    side,
+    parent
+  } = node;
+  if (!parent || !parent.children) {
+    return {
+      firstNode: null
+    };
+  }
+  let firstNode = null;
+  for (const child of parent.children) {
+    if (depth === 1 && child.side === side) {
+      !firstNode && (firstNode = child);
+    }
+    if (depth !== 1) {
+      !firstNode && (firstNode = child);
+    }
+  }
+  return {
+    firstNode
+  };
+}
+function getChildrenNodes(node, cycleCheckNodeSet) {
+  const side = node.side;
+  let children = [];
+  switch (side) {
+    case 'left':
+      children = getChildren(_constants.BloodlineDirection.upstream, node);
+      break;
+    case 'right':
+      children = getChildren(_constants.BloodlineDirection.downstream, node);
+      break;
+    default:
+      {
+        const leftChildren = getChildren(_constants.BloodlineDirection.upstream, node);
+        const rightChildren = getChildren(_constants.BloodlineDirection.downstream, node);
+        children = [...(leftChildren || []), ...(rightChildren || [])];
+      }
+  }
+
+  // 支持 nodeList 处理
+
+  if (cycleCheckNodeSet) {
+    // 剔除循环引用的列表
+    return children.filter(child => {
+      if (cycleCheckNodeSet.has(child.id)) {
+        return false;
+      }
+      cycleCheckNodeSet.add(child.id);
+      return true;
+    });
+  } else {
+    return children;
+  }
+}
+const layoutCells = config => {
+  const {
+    nodeTypes,
+    originNodes,
+    theme,
+    store,
+    flowProps
+  } = config;
+
+  // const {autoHideIntermediateNode} = flowProps as IBloodlineFlowProps;
+
+  const {
+    nodeLookup
+  } = store;
+  const innerNodeLookup = new Map();
+  if (originNodes.length === 0) {
+    return {
+      nodes: [],
+      edges: []
+    };
+  }
+
+  // 需不需要进行 clone ??? 需要设置 side 等属性，要回显回去吗？？不需要的吧
+  const root = originNodes[0]; // 根节点
+
+  const align = theme.align || _constants.Align.top;
+  const layoutType = theme.layout || 'compactBox';
+  const layoutUtil = layoutType === 'mindmap' ? _hierarchy.default.mindmap : _hierarchy.default.compactBox;
+
+  // let edges: Edge[] = [];
+
+  // split side
+  root?.upstream?.list?.forEach(item => {
+    item[_constants.sideSymbol] = _constants.SplitSide.left;
+  });
+  root?.downstream?.list?.forEach(item => {
+    item[_constants.sideSymbol] = _constants.SplitSide.right;
+  });
+  const cycleCheckNodeSet = new Set([root.id]); // 循环依赖节点检测
+
+  const layoutResult = layoutUtil(root, {
+    direction: 'H',
+    getHGap: () => {
+      return 40;
+    },
+    getVGap: () => {
+      return 20;
+    },
+    getWidth(node) {
+      const width = (0, _base.getNodeWidth)(node, nodeTypes, theme, nodeLookup);
+      node.measured ?? (node.measured = {});
+      node.measured.width = width;
+      return width;
+    },
+    getHeight(node) {
+      const height = (0, _base.getNodeHeight)(node, nodeTypes, theme, nodeLookup);
+      node.measured ?? (node.measured = {});
+      node.measured.height = height;
+      return height;
+    },
+    getSide: node => {
+      // side 计算，上下游需要区分左和右
+      return node.data[_constants.sideSymbol] || 'right';
+    },
+    getChildren: node => {
+      return getChildrenNodes(node, cycleCheckNodeSet);
+    }
+  });
+  let layoutNodes = [];
+  const {
+    x: rootX,
+    y: rootY
+  } = layoutResult;
+  // 开始节点x,y 以（0,0）进行修正，根节点需要能够被检测显示在画布区域
+
+  const loopCycleCheckNodeSet = new Set();
+  const edgesCount = {};
+  const edgesIndex = {};
+  const nodeHandles = {};
+  let edges = [];
+
+  // source 表示上游节点，target 表示下游节点
+  layoutResult.BFTraverse(node => {
+    const {
+      x,
+      y,
+      data,
+      side,
+      parent,
+      depth
+    } = node;
+    const {
+      id,
+      type,
+      measured
+    } = data;
+    if (loopCycleCheckNodeSet.has(id)) {
+      // 循环节点进行剔除
+      return;
+    }
+    loopCycleCheckNodeSet.add(id);
+    const {
+      firstNode
+    } = getSiblings(node); // 同级节点
+
+    const offsetY = firstNode ? firstNode.y - parent.position.y : 0;
+    const direction = side === 'left' ? _constants.BloodlineDirection.upstream : _constants.BloodlineDirection.downstream;
+    const adjustX = x - rootX;
+    // 是否居中， 可居中，可顶部对齐
+    const adjustY = align === _constants.Align.top ? y - (parent ? offsetY : rootY) : y - rootY;
+    const position = {
+      x: adjustX,
+      y: adjustY
+    };
+    node.position = position;
+    if (!innerNodeLookup.has(id)) {
+      // 已经存在相同的节点了，直接关联到之前的节点上
+      // 实例每次都是新的，使用 data 实例缓存，但是所有节点外面都需要包一层？？？？
+      const definition = nodeTypes?.[type];
+      const instance = {
+        id,
+        type,
+        measured: measured,
+        width: measured.width,
+        // 宽度固定，高度自动计算
+        height: measured.height,
+        // 血缘节点高度标准化模式为固定
+        data: {
+          isRoot: node.isRoot(),
+          depth,
+          id,
+          direction,
+          origin: data
+          // leaf 节点属性，当展开和折叠时需要处理对应的 leaf。
+        },
+        position: position,
+        zIndex: 10 // 节点默认 zIndex
+      };
+      const handles = definition?.measureHandles?.(instance);
+      instance.handles = (0, _base.parseHandles)(handles);
+
+      // 重复检测，如果已经存在相同节点，节点id相同，自动复用之前的节点。
+      layoutNodes.push(instance);
+      innerNodeLookup.set(id, instance);
+    }
+    const childrenNodes = getChildrenNodes(data);
+    childrenNodes.forEach(child => {
+      const side = child[_constants.sideSymbol] || 'right';
+      const {
+        innerNodes
+      } = child; // 如果有父级的子节点标记
+      // 连线是从 __parentId__ 到 child
+      const parentNodeId = child[_constants.parentIdSymbol] || id;
+      const childId = child.id;
+      if (!innerNodes) {
+        const sourceNode = side === 'left' ? childId : id; // 上游节点
+        const targetNode = side === 'left' ? id : childId; // 下游节点
+
+        const sourceHandleNode = side === 'left' ? childId : parentNodeId;
+        const targetHandleNode = side === 'left' ? parentNodeId : childId; // targetHandleNode 是
+
+        const sourceHandle = (0, _keys.getConnectorId)(_constants.BloodlineDirection.downstream, sourceHandleNode);
+        const targetHandle = (0, _keys.getConnectorId)(_constants.BloodlineDirection.upstream, targetHandleNode);
+        const _edge = {
+          id: `source.${sourceHandle}_target.${targetHandle}`,
+          type: 'smart',
+          // 'smart',
+          source: sourceNode,
+          target: targetNode,
+          sourceHandle: sourceHandle,
+          // 可能链接其中某个版本
+          targetHandle: targetHandle
+        };
+        edges.push(_edge);
+        const {
+          source,
+          target
+        } = _edge;
+        if (!edgesCount[sourceHandle]) {
+          edgesCount[sourceHandle] = 1;
+        } else {
+          edgesCount[sourceHandle] += 1;
+        }
+        if (!edgesCount[targetHandle]) {
+          edgesCount[targetHandle] = 1;
+        } else {
+          edgesCount[targetHandle] += 1;
+        }
+        if (!edgesCount[`source-${source}`]) {
+          edgesCount[`source-${source}`] = 1;
+        } else {
+          edgesCount[`source-${source}`] += 1;
+        }
+        if (!edgesCount[`target-${target}`]) {
+          edgesCount[`target-${target}`] = 1;
+        } else {
+          edgesCount[`target-${target}`] += 1;
+        }
+        edgesIndex[_edge.id] = {
+          source: edgesCount[sourceHandle] - 1,
+          target: edgesCount[targetHandle] - 1
+        };
+        if (!nodeHandles[source]) {
+          nodeHandles[source] = {
+            sourceHandles: {},
+            targetHandles: {}
+          };
+        }
+        if (!nodeHandles[target]) {
+          nodeHandles[target] = {
+            sourceHandles: {},
+            targetHandles: {}
+          };
+        }
+        if (!nodeHandles[source].sourceHandles[sourceHandle]) {
+          nodeHandles[source].sourceHandles[sourceHandle] = 1;
+        } else {
+          nodeHandles[source].sourceHandles[sourceHandle] += 1;
+        }
+        if (!nodeHandles[target].targetHandles[targetHandle]) {
+          nodeHandles[target].targetHandles[targetHandle] = 1;
+        } else {
+          nodeHandles[target].targetHandles[targetHandle] += 1;
+        }
+
+        //
+        // edges.push({
+        //   id: `source.${sourceHandle}_target.${targetHandle}`,
+        //   type: 'smart', // 'smart',
+        //   source: sourceNode,
+        //   target: targetNode,
+        //   sourceHandle: sourceHandle, // 可能链接其中某个版本
+        //   targetHandle: targetHandle,
+        //   data: {
+        //     sourcePort: {
+        //       edges: edgesCount[`source-${edge.source}`],
+        //       portIndex: parseInt(lastOf(edge.sourceHandle.split('#'))!, 10),
+        //       portCount: Object.keys(nodeHandles[edge.source].sourceHandles).length,
+        //       edgeIndex: edgesIndex[edge.id].source,
+        //       edgeCount: edgesCount[edge.sourceHandle],
+        //     },
+        //     targetPort: {
+        //       edges: edgesCount[`target-${edge.target}`],
+        //       portIndex: parseInt(lastOf(edge.targetHandle.split('#'))!, 10),
+        //       portCount: Object.keys(nodeHandles[edge.target].targetHandles).length,
+        //       edgeIndex: edgesIndex[edge.id].target,
+        //       edgeCount: edgesCount[edge.targetHandle],
+        //     },
+        //   },
+        // })
+      } else {
+        innerNodes.forEach(innerNode => {
+          const sourceNode = side === 'left' ? childId : id; // 上游节点
+          const targetNode = side === 'left' ? id : childId; // 下游节点
+
+          const sourceHandleNode = side === 'left' ? innerNode.id : parentNodeId;
+          const targetHandleNode = side === 'left' ? parentNodeId : innerNode.id; // targetHandleNode 是
+
+          const sourceHandle = (0, _keys.getConnectorId)(_constants.BloodlineDirection.downstream, sourceHandleNode);
+          const targetHandle = (0, _keys.getConnectorId)(_constants.BloodlineDirection.upstream, targetHandleNode);
+          const _edge = {
+            id: `source.${sourceHandle}_target.${targetHandle}`,
+            type: 'smart',
+            // 'smart',
+            source: sourceNode,
+            target: targetNode,
+            sourceHandle: sourceHandle,
+            // 可能链接其中某个版本
+            targetHandle: targetHandle
+          };
+          edges.push(_edge);
+          const {
+            source,
+            target
+          } = _edge;
+          if (!edgesCount[sourceHandle]) {
+            edgesCount[sourceHandle] = 1;
+          } else {
+            edgesCount[sourceHandle] += 1;
+          }
+          if (!edgesCount[targetHandle]) {
+            edgesCount[targetHandle] = 1;
+          } else {
+            edgesCount[targetHandle] += 1;
+          }
+          if (!edgesCount[`source-${source}`]) {
+            edgesCount[`source-${source}`] = 1;
+          } else {
+            edgesCount[`source-${source}`] += 1;
+          }
+          if (!edgesCount[`target-${target}`]) {
+            edgesCount[`target-${target}`] = 1;
+          } else {
+            edgesCount[`target-${target}`] += 1;
+          }
+          edgesIndex[_edge.id] = {
+            source: edgesCount[sourceHandle] - 1,
+            target: edgesCount[targetHandle] - 1
+          };
+          if (!nodeHandles[source]) {
+            nodeHandles[source] = {
+              sourceHandles: {},
+              targetHandles: {}
+            };
+          }
+          if (!nodeHandles[target]) {
+            nodeHandles[target] = {
+              sourceHandles: {},
+              targetHandles: {}
+            };
+          }
+          if (!nodeHandles[source].sourceHandles[sourceHandle]) {
+            nodeHandles[source].sourceHandles[sourceHandle] = 1;
+          } else {
+            nodeHandles[source].sourceHandles[sourceHandle] += 1;
+          }
+          if (!nodeHandles[target].targetHandles[targetHandle]) {
+            nodeHandles[target].targetHandles[targetHandle] = 1;
+          } else {
+            nodeHandles[target].targetHandles[targetHandle] += 1;
+          }
+
+          // edges.push({
+          //   id: `source.${sourceHandle}_target.${targetHandle}`,
+          //   type: 'smart', // 'smart',
+          //   source: sourceNode,
+          //   target: targetNode,
+          //   sourceHandle: sourceHandle, // 可能链接其中某个版本
+          //   targetHandle: targetHandle,
+          //   data: {
+          //     sourcePort: {
+          //       edges: edgesCount[`source-${edge.source}`],
+          //       portIndex: 1,
+          //       portCount: 1,
+          //       edgeIndex: edgesIndex[edge.id].source,
+          //       edgeCount: edgesCount[edge.sourceHandle],
+          //     },
+          //     targetPort: {
+          //       edges: edgesCount[`target-${edge.target}`],
+          //       portIndex: 1,
+          //       portCount: 1,
+          //       edgeIndex: edgesIndex[edge.id].target,
+          //       edgeCount: edgesCount[edge.targetHandle],
+          //     },
+          //   },
+          // })
+        });
+      }
+    });
+  });
+  edges = edges.map(edge => ({
+    ...edge,
+    data: {
+      sourcePort: {
+        edges: edgesCount[`source-${edge.source}`],
+        portIndex: parseInt((0, _last.default)(edge.sourceHandle.split('#')), 10),
+        portCount: Object.keys(nodeHandles[edge.source].sourceHandles).length,
+        edgeIndex: edgesIndex[edge.id].source,
+        edgeCount: edgesCount[edge.sourceHandle]
+      },
+      targetPort: {
+        edges: edgesCount[`target-${edge.target}`],
+        portIndex: parseInt((0, _last.default)(edge.targetHandle.split('#')), 10),
+        portCount: Object.keys(nodeHandles[edge.target].targetHandles).length,
+        edgeIndex: edgesIndex[edge.id].target,
+        edgeCount: edgesCount[edge.targetHandle]
+      }
+    }
+  }));
+  return {
+    nodes: layoutNodes,
+    edges: edges
+  };
+};
+exports.layoutCells = layoutCells;

package/cjs/utils/keys.d.ts

@@ -0,0 +1,3 @@
+import { BloodlineDirection } from "../constants";
+export declare const getConnectorId: (direction: BloodlineDirection, id: string) => string;
+//# sourceMappingURL=keys.d.ts.map

package/cjs/utils/keys.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keys.d.ts","sourceRoot":"","sources":["keys.ts"],"names":[],"mappings":"AAQA,OAAO,EAAC,kBAAkB,EAAC,MAAM,cAAc,CAAC;AAGhD,eAAO,MAAM,cAAc,cAAe,kBAAkB,MAAM,MAAM,WAEvE,CAAA"}

package/cjs/utils/keys.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getConnectorId = void 0;
+/*
+ * @author: yanxianliang
+ * @date: 2025-06-02 16:57
+ * @desc: keys 生成
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+
+const getConnectorId = (direction, id) => {
+  return `${id}.${direction}`;
+};
+exports.getConnectorId = getConnectorId;

package/cjs/utils/layoutCells.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @author: yanxianliang
+ * @date: 2025-07-03 13:20
+ * @desc: 血缘布局
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+import { Edge, Node } from "@xyflow/react";
+import { LayoutConfig } from "@rxflow/base";
+export declare const layoutCells: <NodeType extends Node = Node, EdgeType extends Edge = Edge>(config: LayoutConfig<NodeType, EdgeType>) => {
+    nodes: NodeType[];
+    edges: EdgeType[];
+};
+//# sourceMappingURL=layoutCells.d.ts.map

package/cjs/utils/layoutCells.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layoutCells.d.ts","sourceRoot":"","sources":["layoutCells.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,EAAC,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AACzC,OAAO,EAA8B,YAAY,EAAgB,MAAM,cAAc,CAAC;AAqGtF,eAAO,MAAM,WAAW,uEACd,aAAa,QAAQ,EAAE,QAAQ,CAAC;;;CA+LzC,CAAA"}