@antv/layout 0.3.11 → 1.0.0-alpha.0

package/src/layout/dagreCompound.ts

@@ -1,518 +0,0 @@
-import { Base } from './base';
-import { Combo, DagreCompoundLayoutOptions, OutNode, Point, PointTuple } from './types';
-import {
-    buildGraph,
-    DeepPartial,
-    flatGraph,
-    getEdges,
-    HierarchyBaseEdgeInfo,
-    HierarchyBaseNodeInfo,
-    HierarchyFlattenedGraphInfo,
-    HierarchyGraphCompoundDef,
-    HierarchyGraphDef,
-    HierarchyGraphNodeInfo,
-    HierarchyGraphOption,
-    HierarchyNodeType,
-    LAYOUT_CONFIG,
-    LayoutConfig,
-    mergeConfig,
-    NodeType,
-    ROOT_NAME
-} from 'dagre-compound';
-import { isArray, isObject } from '../util';
-
-interface IPoint {
-    x: number;
-    y: number;
-    anchorIndex?: number;
-    [key: string]: number | undefined;
-}
-
-interface Edge {
-    source: string;
-    target: string;
-    type?: string;
-    startPoint?: IPoint;
-    endPoint?: IPoint;
-    controlPoints?: IPoint[];
-    sourceAnchor?: number;
-    targetAnchor?: number;
-    layoutOrder?: number; // 用于描述用户输入数据顺序，确保按照用户原始数据顺序排序
-    [key: string]: unknown;
-}
-
-type ComboType = Combo & {
-    x?: number;
-    y?: number;
-    label?: string;
-    type: string;
-    size?: number | number[] | undefined;
-    fixSize?: number[];
-    fixCollapseSize?: number[];
-    // combo 入边与出边，收起时优化连线
-    inEdges?: Edge[];
-    outEdges?: Edge[];
-    padding?: number[];
-    collapsed?: boolean;
-    // 手动指定偏移量
-    offsetX?: number;
-    offsetY?: number;
-    [key: string]: unknown;
-};
-
-type Node = OutNode & {
-    label?: string;
-    width?: number;
-    height?: number;
-    type?: string;
-    anchorPoints?: [number, number][];
-    layoutOrder?: number; // 用于描述用户输入数据顺序，确保按照用户原始数据顺序排序
-};
-
-type ModelType = {
-    nodes?: Node[];
-    edges?: Edge[];
-    comboEdges?: Edge[];
-    combos?: ComboType[];
-    hiddenNodes?: Node[];
-    hiddenEdges?: Edge[];
-    hiddenCombos?: ComboType[];
-};
-
-export class DagreCompoundLayout extends Base {
-    /** layout 方向, 可选 TB, BT, LR, RL */
-    public rankdir: 'TB' | 'BT' | 'LR' | 'RL' = 'TB';
-
-    /** 节点对齐方式，可选 UL, UR, DL, DR */
-    public align: undefined | 'UL' | 'UR' | 'DL' | 'DR';
-
-    /** 布局的起始（左上角）位置 */
-    public begin: PointTuple | undefined;
-
-    /** 节点大小 */
-    public nodeSize: number | number[] | undefined;
-
-    /** 节点水平间距(px) */
-    public nodesep: number = 50;
-
-    /** 边水平间距(px) */
-    public edgesep: number = 5;
-
-    /** 每一层节点之间间距 */
-    public ranksep: number = 50;
-
-    /** 是否保留布局连线的控制点 */
-    public controlPoints: boolean = true;
-
-    /** 是否保留使用布局计算的锚点 */
-    public anchorPoint: boolean = true;
-
-    /** 全局布局配置，优先级最高 */
-    public settings?: DeepPartial<LayoutConfig>;
-
-    public nodes: Node[] = [];
-    public edges: Edge[] = [];
-    public combos: ComboType[] = [];
-
-    /** 当前生命周期内布局配置信息 */
-    private graphSettings: DeepPartial<LayoutConfig> | undefined;
-
-    /** 迭代结束的回调函数 */
-    public onLayoutEnd: () => void = () => {};
-    constructor(options?: DagreCompoundLayoutOptions) {
-        super();
-        this.updateCfg(options);
-    }
-
-    public getDefaultCfg() {
-        return {
-            rankdir: 'TB', // layout 方向, 可选 TB, BT, LR, RL
-            align: undefined, // 节点对齐方式，可选 UL, UR, DL, DR
-            begin: undefined, // 布局的起始（左上角）位置
-            nodeSize: undefined, // 节点大小
-            nodesep: 50, // 节点水平间距(px)
-            ranksep: 50, // 每一层节点之间间距
-            controlPoints: true, // 是否保留布局连线的控制点
-            anchorPoint: true // 是否使用布局计算的锚点
-        };
-    }
-
-    public init(data: ModelType) {
-        const hiddenNodes = data.hiddenNodes || []; // 被隐藏的节点
-        const hiddenEdges = data.hiddenEdges || []; // 被隐藏的边
-        const hiddenCombos = data.hiddenCombos || []; // 赋值 hiddenCombos
-        // 确保此次排序按照用户输入顺序
-        this.nodes = this.getDataByOrder((data.nodes || []).concat(hiddenNodes));
-        this.edges = this.getDataByOrder((data.edges || []).concat(hiddenEdges));
-        this.combos = (data.combos || []).concat(hiddenCombos.map((hc) => ({ ...hc, collapsed: true })));
-    }
-
-    public execute() {
-        const self = this;
-        const { nodes, edges } = self;
-        if (!nodes) return;
-
-        const { graphDef, graphOption, graphSettings } = self.getLayoutConfig();
-        const renderInfo = buildGraph(graphDef, graphOption, graphSettings);
-        const flattenedRenderInfo = flatGraph(renderInfo, true); // 打平数据进行遍历
-        this.updatePosition(flattenedRenderInfo);
-
-        if (self.onLayoutEnd) self.onLayoutEnd();
-
-        return {
-            nodes,
-            edges
-        };
-    }
-
-    /**
-     * combo 模式下查找节点完整路径
-     * @param nodeId
-     * @private
-     */
-    private getNodePath(nodeId: string): string[] {
-        const self = this;
-        const { nodes, combos } = self;
-        const targetNode = nodes.find((n) => n.id === nodeId);
-        const findPath = (comboId: string, fullPath: string[] = []): string[] => {
-            const combo = combos.find((c) => c.id === comboId);
-            if (combo) {
-                fullPath.unshift(comboId);
-                if (combo.parentId) {
-                    return findPath(combo.parentId, fullPath);
-                }
-                return fullPath;
-            }
-            return fullPath;
-        };
-        if (targetNode && targetNode.comboId) {
-            return findPath(targetNode.comboId, [nodeId]);
-        }
-        return [nodeId];
-    }
-
-    /** 准备 dagre-compound 布局参数 */
-    private getLayoutConfig(): { graphDef: HierarchyGraphDef; graphOption: HierarchyGraphOption; graphSettings: DeepPartial<LayoutConfig> } {
-        const self = this;
-        const { nodes, edges, combos, nodeSize, rankdir, align, edgesep, nodesep, ranksep, settings } = self;
-        const compound = (combos || []).reduce((pre: HierarchyGraphCompoundDef, cur) => {
-            const matchedNodes = nodes.filter((n) => n.comboId === cur.id).map((n) => n.id);
-            const matchedCombos = (combos || []).filter((n) => n.parentId === cur.id).map((n) => n.id);
-            if (matchedNodes.length || matchedCombos.length) {
-                pre[cur.id] = [...matchedNodes, ...matchedCombos];
-            }
-            return pre;
-        }, {});
-
-        /** 计算 nodeSize */
-        let nodeSizeFunc: (d?: Node) => number[];
-        if (!nodeSize) {
-            nodeSizeFunc = (d?: Node) => {
-                if (d && d.size) {
-                    if (isArray(d.size)) {
-                        return d.size;
-                    }
-                    if (isObject(d.size)) {
-                        return [d.size.width || 40, d.size.height || 40];
-                    }
-                    return [d.size, d.size];
-                }
-                return [40, 40];
-            };
-        } else if (isArray(nodeSize)) {
-            nodeSizeFunc = () => nodeSize;
-        } else {
-            nodeSizeFunc = () => [nodeSize, nodeSize];
-        }
-
-        /** 计算 comboSize */
-        const comboSizeFunc: (d?: ComboType) => number[] = (d?: ComboType): number[] => {
-            if (d && d.size) {
-                if (isArray(d.size)) {
-                    return d.size;
-                }
-                return [d.size, d.size];
-            }
-            return [80, 40];
-        };
-
-        // 接受 defaultCombo 设置的 size
-        const [metaWidth, metaHeight] = comboSizeFunc(combos?.[0]);
-        // 初始化 padding
-        const subSceneMeta = self.graphSettings?.subScene?.meta;
-        const [paddingTop, paddingRight, paddingBottom, paddingLeft] = combos.find((c) => !c.collapsed)?.padding || [20, 20, 20, 20];
-        const graphDef = {
-            compound,
-            nodes: [
-                ...(nodes || []).map((n) => {
-                    const size = nodeSizeFunc(n);
-                    const width = size[0];
-                    const height = size[1];
-                    return { ...n, width, height };
-                })
-            ],
-            edges: [...(edges || []).map((e) => ({ ...e, v: e.source, w: e.target }))]
-        };
-
-        // 需要展开的节点
-        const graphOption = {
-            expanded: (combos || []).filter((c) => !c.collapsed).map((c) => c.id)
-        };
-
-        // dagre-compound 布局参数
-        const graphMetaConfig: DeepPartial<LayoutConfig> = {
-            graph: {
-                meta: {
-                    align,
-                    rankDir: rankdir,
-                    nodeSep: nodesep,
-                    edgeSep: edgesep,
-                    rankSep: ranksep
-                }
-            },
-            subScene: {
-                meta: {
-                    paddingTop: paddingTop || subSceneMeta?.paddingTop || 20,
-                    paddingRight: paddingRight || subSceneMeta?.paddingRight || 20,
-                    paddingBottom: paddingBottom || subSceneMeta?.paddingBottom || 20,
-                    paddingLeft: paddingLeft || subSceneMeta?.paddingLeft || 20,
-                    labelHeight: 0
-                }
-            },
-            nodeSize: {
-                meta: {
-                    width: metaWidth,
-                    height: metaHeight
-                }
-            }
-        };
-
-        // 合并用户输入的内容
-        const graphSettings = mergeConfig(settings, {
-            ...mergeConfig(graphMetaConfig, LAYOUT_CONFIG)
-        });
-        self.graphSettings = graphSettings;
-
-        return {
-            graphDef,
-            graphOption,
-            graphSettings
-        };
-    }
-
-    /** 更新节点与边位置 */
-    private updatePosition(flattenedGraph: HierarchyFlattenedGraphInfo): void {
-        const { nodes, edges } = flattenedGraph;
-        this.updateNodePosition(nodes, edges);
-        this.updateEdgePosition(nodes, edges);
-    }
-
-    private getBegin(
-        flattenedNodes: (HierarchyBaseNodeInfo | HierarchyGraphNodeInfo)[],
-        flattenedEdges: HierarchyBaseEdgeInfo[]
-    ): PointTuple {
-        const self = this;
-        const { begin } = self;
-
-        const dBegin: PointTuple = [0, 0];
-        if (begin) {
-            let minX = Infinity;
-            let minY = Infinity;
-            flattenedNodes.forEach((node) => {
-                if (minX > node.x) minX = node.x;
-                if (minY > node.y) minY = node.y;
-            });
-            flattenedEdges.forEach((edge) => {
-                edge.points.forEach((point) => {
-                    if (minX > point.x) minX = point.x;
-                    if (minY > point.y) minY = point.y;
-                });
-            });
-            dBegin[0] = begin[0] - minX;
-            dBegin[1] = begin[1] - minY;
-        }
-        return dBegin;
-    }
-
-    private updateNodePosition(
-        flattenedNodes: (HierarchyBaseNodeInfo | HierarchyGraphNodeInfo)[],
-        flattenedEdges: HierarchyBaseEdgeInfo[]
-    ): void {
-        const self = this;
-        const { combos, nodes, edges, anchorPoint, graphSettings } = self;
-        const dBegin = this.getBegin(flattenedNodes, flattenedEdges);
-
-        flattenedNodes.forEach((node) => {
-            const { x, y, id, type, coreBox } = node;
-            if (type === HierarchyNodeType.META && id !== ROOT_NAME) {
-                const i = combos.findIndex((item) => item.id === id);
-                const subSceneMeta = graphSettings?.subScene?.meta;
-                // 将布局生成的 combo 位置暂存至 offsetX offsetY
-                combos[i].offsetX = x + dBegin[0];
-                combos[i].offsetY = y + dBegin[1];
-                combos[i].fixSize = [coreBox.width, coreBox.height];
-                combos[i].fixCollapseSize = [coreBox.width, coreBox.height];
-                // 如果设置了收起时隐藏 padding，则手动优化 combo padding 信息，展开的话则恢复
-                if (!node.expanded) {
-                    combos[i].padding = [0, 0, 0, 0];
-                } else {
-                    combos[i].padding = [
-                        subSceneMeta?.paddingTop!,
-                        subSceneMeta?.paddingRight!,
-                        subSceneMeta?.paddingBottom!,
-                        subSceneMeta?.paddingLeft!
-                    ];
-                }
-            } else if (type === HierarchyNodeType.OP) {
-                const i = nodes.findIndex((item) => item.id === id);
-                nodes[i].x = x + dBegin[0];
-                nodes[i].y = y + dBegin[1];
-
-                if (anchorPoint) {
-                    const anchorPoints: [number, number][] = [];
-                    const outEdges = flattenedEdges.filter((e) => e.v === id);
-                    const inEdges = flattenedEdges.filter((e) => e.w === id);
-                    // 指定出边锚点，锚点中心点为 [0.5, 0.5]
-                    if (outEdges.length > 0) {
-                        outEdges.forEach((outEdge) => {
-                            const firstPoint = outEdge.points[0];
-                            const anchorPointX = (firstPoint.x - x) / node.width + 0.5;
-                            const anchorPointY = (firstPoint.y - y) / node.height + 0.5;
-                            anchorPoints.push([anchorPointX, anchorPointY]);
-                            // 出边对应 source 边锚点
-                            outEdge.baseEdgeList.forEach((baseEdge) => {
-                                const edge = edges.find((e) => e.source === baseEdge.v && e.target === baseEdge.w);
-                                if (edge) {
-                                    edge.sourceAnchor = anchorPoints.length - 1;
-                                }
-                            });
-                        });
-                    }
-                    // 指定入边锚点
-                    if (inEdges.length > 0) {
-                        inEdges.forEach((inEdge) => {
-                            const lastPoint = inEdge.points[inEdge.points.length - 1];
-                            const anchorPointX = (lastPoint.x - x) / node.width + 0.5;
-                            const anchorPointY = (lastPoint.y - y) / node.height + 0.5;
-                            anchorPoints.push([anchorPointX, anchorPointY]);
-                            // 出边对应 source 锚点
-                            inEdge.baseEdgeList.forEach((baseEdge) => {
-                                const edge = edges.find((e) => e.source === baseEdge.v && e.target === baseEdge.w);
-                                if (edge) {
-                                    edge.targetAnchor = anchorPoints.length - 1;
-                                }
-                            });
-                        });
-                    }
-                    nodes[i].anchorPoints = anchorPoints.length > 0 ? anchorPoints : nodes[i].anchorPoints || [];
-                }
-            }
-        });
-    }
-
-    private updateEdgePosition(
-        flattenedNodes: (HierarchyBaseNodeInfo | HierarchyGraphNodeInfo)[],
-        flattenedEdges: HierarchyBaseEdgeInfo[]
-    ): void {
-        const self = this;
-        const { combos, edges, controlPoints } = self;
-        const dBegin = this.getBegin(flattenedNodes, flattenedEdges);
-
-        if (controlPoints) {
-            combos.forEach((combo) => {
-                combo.inEdges = [];
-                combo.outEdges = [];
-            });
-            edges.forEach((sourceEdge) => {
-                let sourceNode = flattenedNodes.find((v) => v.id === sourceEdge.source);
-                let targetNode = flattenedNodes.find((v) => v.id === sourceEdge.target);
-                // Combo 收起状态，dagre-compound 不会渲染该节点，边需要使用到 group 的边作为补充
-                let points: Point[] = [];
-                let sortedEdges: HierarchyBaseEdgeInfo[] = [];
-                if (sourceNode && targetNode) {
-                    sortedEdges = getEdges(sourceNode?.id, targetNode?.id, flattenedNodes);
-                } else if (!sourceNode || !targetNode) {
-                    /** 存在收起节点时，需要重新计算边的 controlPoints，确保线正常 */
-                        // 情况1：目标节点被收起了，向上寻找该节点最近一个存在的父节点
-                    const sourceNodePath = self.getNodePath(sourceEdge.source);
-                    const targetNodePath = self.getNodePath(sourceEdge.target);
-
-                    const lastExistingSource = sourceNodePath
-                        .reverse()
-                        .slice(!sourceNode ? 1 : 0)
-                        .find((parentId) => flattenedNodes.find((fNode) => fNode.id === parentId));
-                    const lastExistingTarget = targetNodePath
-                        .reverse()
-                        .slice(!targetNode ? 1 : 0)
-                        .find((parentId) => flattenedNodes.find((fNode) => fNode.id === parentId));
-                    sourceNode = flattenedNodes.find((v) => v.id === lastExistingSource);
-                    targetNode = flattenedNodes.find((v) => v.id === lastExistingTarget);
-                    sortedEdges = getEdges(sourceNode?.id, targetNode?.id, flattenedNodes, { v: sourceEdge.source, w: sourceEdge.target });
-                }
-
-                points = sortedEdges.reduce((pre, cur) => {
-                    return [
-                        ...pre,
-                        ...cur.points.map((p) => {
-                            return {
-                                ...p,
-                                x: p.x + dBegin[0],
-                                y: p.y + dBegin[1]
-                            };
-                        })
-                    ];
-                }, [] as IPoint[]);
-                // 取消首尾节点
-                points = points.slice(1, -1);
-                sourceEdge.controlPoints = points;
-
-                if (targetNode?.type === NodeType.META) {
-                    // combo 节点控制点
-                    const i = combos.findIndex((item) => item.id === targetNode?.id);
-                    if (!combos[i] || combos[i].inEdges?.some((inEdge) => inEdge.source === sourceNode!.id && inEdge.target === targetNode!.id)) {
-                        return;
-                    }
-                    combos[i].inEdges?.push({
-                        source: sourceNode!.id,
-                        target: targetNode!.id,
-                        controlPoints: points
-                    });
-                }
-                if (sourceNode?.type === NodeType.META) {
-                    const i = combos.findIndex((item) => item.id === sourceNode?.id);
-                    if (!combos[i] || combos[i].outEdges?.some((oedge) => oedge.source === sourceNode!.id && oedge.target === targetNode!.id)) {
-                        return;
-                    }
-                    combos[i].outEdges?.push({
-                        source: sourceNode!.id,
-                        target: targetNode!.id,
-                        controlPoints: points
-                    });
-                }
-            });
-        }
-    }
-
-    public getType() {
-        return 'dagreCompound';
-    }
-
-    /**
-     * 确保布局使用的数据与用户输入数据顺序一致
-     * 通过 layoutOrder 排序 节点 与 边
-     * @param list
-     * @private
-     */
-    private getDataByOrder(list: any[]):  any[] {
-        if (list.every((n) => n.layoutOrder !== undefined)) {
-            // 所有数据均设置过索引，表示仅布局，数据未变化，无需处理
-        } else {
-            // 首次布局或动态添加删减节点时重新赋值
-            list.forEach((n, i) => {
-                n.layoutOrder = i;
-            });
-        }
-        // 按照 layoutOrder 排序
-        return list.sort((pre, cur) => pre.layoutOrder - cur.layoutOrder);
-    }
-}

package/src/layout/er/core.ts

@@ -1,117 +0,0 @@
-import * as d3Force from 'd3-force';
-import forceGrid from './forceGrid';
-import mysqlWorkbench from './mysqlWorkbench';
-import { DagreLayout } from '../dagre';
-import { INode, IEdge, } from "./type";
-
-export default function layout(data: any, options: any): Promise<void> {
-  
-  const { nodes, edges } = data;
-  const width = options.width;
-  const height = options.height;
-  if (!nodes?.length) return Promise.resolve();
-
-  // 筛选非叶子节点，做Dagre布局
-  const noLeafNodes : INode[] = [];
-  nodes.forEach((node: any) => {
-    const relateEdges = edges.filter((edge: IEdge) => {
-      return edge.source === node.id || edge.target === node.id;
-    });
-    if (relateEdges.length > 1) {
-      const temp = { ...node };
-      delete temp.size;
-      noLeafNodes.push(temp);
-    }
-  });
-  const noLeafEdge: IEdge[] = [];
-  edges.forEach((edge: IEdge) => {
-    const sourceNode = noLeafNodes.find((node: INode) => node.id === edge.source );
-    const targetNode = noLeafNodes.find((node: INode) => node.id === edge.target );
-    if (sourceNode && targetNode) {
-      noLeafEdge.push(edge);
-    }
-  });
-  const graphLayout = new DagreLayout({
-    type: 'dagre',
-    ranksep: options.nodeMinGap,
-    nodesep: options.nodeMinGap,
-  });
-  
-  const { nodes: nodesTmp } = graphLayout.layout({
-    nodes: noLeafNodes,
-    edges: noLeafEdge,
-  });
-
-  // 布局后，坐标同步
-  nodes.forEach((n: INode) => {
-    const found = ((nodesTmp || []) as INode[]).find((temp: any) => temp.id === n.id);
-    n.x = found?.x || width / 2;
-    n.y = found?.y || height / 2;
-  });
-  
-  const copyNodes: INode[] = JSON.parse(JSON.stringify(nodes));
-  const copyEdges: IEdge[] = JSON.parse(JSON.stringify(edges));
-  const simulation = d3Force.forceSimulation().nodes(copyNodes)
-  .force("link", d3Force.forceLink(copyEdges).id((d: any) => d.id).distance((d) => {
-    const edgeInfo = noLeafEdge.find((edge) => edge.source === d.source && edge.target === d.target);
-    if (edgeInfo) {
-      return 30;
-    }
-    return 20;
-  }))
-  .force("charge", d3Force.forceManyBody())
-  .force("center", d3Force.forceCenter(width / 2, height / 2))
-  .force("x", d3Force.forceX(width / 2))
-  .force("y", d3Force.forceY( height / 2))
-  .alpha(0.3)
-  .alphaDecay(0.08)
-  .alphaMin(0.001);
-
-  const layoutPromise = new Promise<void>((resolve) => {
-    simulation.on('end', () => {
-      // 坐标信息同步到nodes,edges中
-      nodes.forEach((node: INode) => {
-        const nodeInfo = copyNodes.find((item) => item.id === node.id);
-        if (nodeInfo) {
-          node.x = nodeInfo.x;
-          node.y = nodeInfo.y;
-        }
-      });
-      
-      const minX = Math.min(...nodes.map((node: INode) => node.x));
-      const maxX = Math.max(...nodes.map((node: INode) => node.x));
-      const minY = Math.min(...nodes.map((node: INode) => node.y));
-      const maxY = Math.max(...nodes.map((node: INode) => node.y));
-      const scalex = width / (maxX - minX);
-      const scaley = height / (maxY - minY);
-      nodes.forEach((node: INode) => {
-        if (node.x !== undefined && scalex < 1) {
-          node.x = (node.x - minX) * scalex;
-        }
-        if (node.y !== undefined && scaley < 1) {
-          node.y = (node.y - minY) * scaley;
-        }
-      });
-
-      // 这一步就执行缩小空间。且不考虑节点size
-      nodes.forEach((node: INode) => {
-        node.sizeTemp = node.size;
-        node.size = [10, 10];
-      });
-     
-      mysqlWorkbench(nodes, edges);
-      nodes.forEach((node: INode) => {
-        node.size = node.sizeTemp || [];
-        delete node.sizeTemp;
-      });
-      // 进行网格对齐+节点大小扩增
-      forceGrid({
-        nodes,
-        edges,
-      }, options);
-
-      resolve();
-    });
-  });
-  return layoutPromise;
-}