@aloudata/ink-lineage 0.0.1-beta.1

package/src/manager/ExpandManager.ts

@@ -0,0 +1,93 @@
+import { Graph, Image } from '@aloudata/ink-graph-new';
+import { InkLineageManager } from './LineageManager';
+import { BaseManager } from './BaseManager';
+import { NODE_WIDTH, SIDE_ICON_SIZE, TABLE_HEADER_HEIGHT } from '../constant';
+import {
+  EDirection,
+  EExpandType,
+  EXPAND_BUTTON_TYPE,
+  INode,
+  IColResBase,
+  TDataBase,
+} from '../types';
+
+export class ExpandManager<
+  TTableData extends TDataBase<TColumnData>,
+  TColumnData extends IColResBase,
+> extends BaseManager<TTableData, TColumnData> {
+  expandingButton: Image;
+
+  isExpanding: boolean = false;
+
+  prevStartRelatedColumnId: string = '';
+  constructor(lineageManager: InkLineageManager<TTableData, TColumnData>) {
+    super(lineageManager);
+  }
+
+  init(graph: Graph): void {
+    this.graph = graph;
+    this.initExpandingButton();
+  }
+
+  initExpandingButton() {
+    this.expandingButton = new Image({
+      name: `control-img-loading`,
+      style: {
+        x: -Math.max(),
+        y: -Math.max(),
+        width: SIDE_ICON_SIZE,
+        height: SIDE_ICON_SIZE,
+        cursor: 'not-allowed',
+        zIndex: 11,
+        img: EXPAND_BUTTON_TYPE[EExpandType.LODING],
+        visibility: 'hidden',
+      },
+    });
+
+    this.graph.canvas.appendChild(this.expandingButton);
+  }
+
+  showExpandLoading(target: INode, direction: EDirection) {
+    if (!target) return;
+
+    this.isExpanding = true;
+    const nodePosition = target.config?.position;
+
+    const height = this.graph.mode === 'SIMPLE' ? 44 : TABLE_HEADER_HEIGHT;
+
+    const { x, y } = nodePosition;
+
+    if (direction === EDirection.INPUT) {
+      if (target.config.tableId) {
+        this.expandingButton.setPosition([-999, -999]);
+      } else {
+        // table
+        this.expandingButton.setPosition([
+          x - SIDE_ICON_SIZE - 5,
+          y + height / 2 - SIDE_ICON_SIZE / 2 + 1,
+        ]);
+      }
+
+      this.expandingButton.setAttribute('visibility', 'visible');
+    }
+
+    if (direction === EDirection.OUTPUT) {
+      if (target.config.tableId) {
+        this.expandingButton.setPosition([-999, -999]);
+      } else {
+        this.expandingButton.setPosition([
+          x + NODE_WIDTH + 5,
+          y + height / 2 - SIDE_ICON_SIZE / 2 + 1,
+        ]);
+      }
+
+      this.expandingButton.setAttribute('visibility', 'visible');
+    }
+  }
+
+  hideExpandLoading() {
+    this.isExpanding = false;
+
+    this.expandingButton.setAttribute('visibility', 'hidden');
+  }
+}

package/src/manager/FoldLineageManager.ts

@@ -0,0 +1,196 @@
+import { IEdgeConfig, INodeConfig, TDataBase } from '../types';
+import { InkLineageManager } from './LineageManager';
+import _ from 'lodash';
+
+import { BaseManager } from './BaseManager';
+import {
+  getFoldNodes,
+  getFoldNodesGroup,
+  getFoldNodesGroupMap,
+} from '../utils';
+import { LINEAGE_EDGE } from '../constant';
+import {
+  IColResBase,
+} from '../types';
+export interface IFoldGroup<
+  TTableData extends TDataBase<TColumnData>,
+  TColumnData extends IColResBase,
+> {
+  foldNodes: INodeConfig<TTableData, TColumnData>[];
+  foldEdges: IEdgeConfig[];
+  foldNodeEdgeConfig: {
+    [key: string]: unknown;
+  };
+  foldColumnEdgeConfig: {
+    [key: string]: unknown;
+  };
+}
+
+export class FoldLineageManager<
+  TTableData extends TDataBase<TColumnData>,
+  TColumnData extends IColResBase,
+> extends BaseManager<TTableData, TColumnData> {
+  constructor(lineageManager: InkLineageManager<TTableData, TColumnData>) {
+    super(lineageManager);
+  }
+
+  isFoldChecked: boolean = true;
+
+  foldNodesGroupMap = new Map<string, IFoldGroup<TTableData, TColumnData>>(); // 用来记录折叠的节点和边信息
+
+  foldStatusMap = new Map<string, boolean>(); // 用来记录分组折叠的状态
+
+  updateFoldStatus(checked: boolean) {
+    this.handleNodesFold(checked);
+
+    this.lineageManager.update();
+  }
+
+  handleNodesFold(checked: boolean) {
+    this.isFoldChecked = checked;
+    if (checked) {
+      const foldStatusMap = this.foldStatusMap;
+      for (const key of foldStatusMap.keys()) {
+        this.setFoldStatus(key, true);
+      }
+    }
+
+    this.unfoldNodes();
+
+    this.lineageManager.layout();
+
+    if (this.isFoldChecked) {
+      this.foldNodes();
+    }
+  }
+
+  unfoldNodes() {
+    for (const key of this.foldNodesGroupMap.keys()) {
+      this.unfoldNodeGroup(key);
+    }
+  }
+
+  unfoldNodeGroup(foldGroupKey: string, saveStatus?: boolean) {
+    const foldInfo = this.foldNodesGroupMap.get(foldGroupKey);
+    if (!foldInfo) return;
+
+    if (saveStatus === false) {
+      this.setFoldStatus(foldGroupKey, false);
+    }
+
+    // 将删除的边重新添加到edges中
+    const { foldNodes, foldEdges, foldNodeEdgeConfig, foldColumnEdgeConfig } =
+      foldInfo;
+
+    // 将添加的边剔除
+    // remove table -> table edge & column -> column edge
+    const edgesToRemove = [foldNodeEdgeConfig.id, foldColumnEdgeConfig.id];
+    const pureEdgesConfig = _.reject(
+      this.lineageManager.parsedData.edges,
+      (obj) => edgesToRemove.includes(obj.id),
+    );
+
+    // 将隐藏的节点重新显示出来
+    foldNodes.forEach((node) => {
+      node.canBeFold = false;
+    });
+
+    // 将隐藏的边重新显示出来
+    foldEdges.forEach((edge) => {
+      edge.canBeFold = false;
+      if (
+        this.isFoldChecked &&
+        edge.inFoldLink &&
+        edge.data.relationTypeCode.includes('Column')
+      ) {
+        edge.style.fill = '#0000';
+        edge.style.stroke = '#FFB01F';
+      }
+
+      // 合并链路关闭
+      if (!this.isFoldChecked) {
+        edge.type = LINEAGE_EDGE;
+      }
+    });
+
+    this.lineageManager.setData({
+      ...this.lineageManager.parsedData,
+      edges: pureEdgesConfig,
+    });
+  }
+
+  foldNodes() {
+    if (!this.lineageManager) return;
+
+    const { nodes, edges } = this.lineageManager.parsedData;
+
+    // 获取所有可以被合并的node
+    const foldNodes = getFoldNodes<TTableData, TColumnData>(nodes, edges, this.lineageManager);
+
+    // 根据originEdgeMap中的上下游关系，将可合并的node分组，最终生成一个二维数组
+    const foldNodesGroup = getFoldNodesGroup<TTableData, TColumnData>(foldNodes, edges);
+
+    // 根据foldNodeGroups，生成一个可收起的节点集合"foldMap"
+    const foldNodesGroupMap = getFoldNodesGroupMap<TTableData, TColumnData>(
+      this.lineageManager,
+      foldNodesGroup,
+      edges,
+    );
+    this.foldNodesGroupMap = foldNodesGroupMap;
+
+    for (const key of this.foldNodesGroupMap.keys()) {
+      this.foldNodeGroup(key);
+    }
+  }
+
+  foldNodeGroup(foldGroupKey: string, saveStatus?: boolean) {
+    const foldInfo = this.foldNodesGroupMap.get(foldGroupKey);
+    if (!foldInfo) return;
+
+    if (saveStatus === true) {
+      this.setFoldStatus(foldGroupKey, true);
+    }
+
+    const { foldNodes, foldEdges, foldNodeEdgeConfig, foldColumnEdgeConfig } =
+      foldInfo;
+
+    const edgesToAdd = [
+      foldNodeEdgeConfig,
+      foldColumnEdgeConfig,
+    ] as IEdgeConfig[];
+
+    // add table -> table edge & column -> column edge
+    const newEdgesConfig = [
+      ...this.lineageManager.parsedData.edges,
+      ...edgesToAdd,
+    ];
+
+    foldNodes.forEach((node) => {
+      node.canBeFold = true;
+    });
+
+    foldEdges.forEach((edge) => {
+      edge.canBeFold = true;
+    });
+
+    // this.graph.setData({
+    //   ...this.lineageManager.parsedData,
+    //   edges: newEdgesConfig,
+    // });
+
+    this.lineageManager.setData({
+      ...this.lineageManager.parsedData,
+      edges: newEdgesConfig,
+    });
+
+    // this.lineageManager.update();
+  }
+
+  setFoldStatus(key: string, value: boolean) {
+    return this.foldStatusMap.set(key, value);
+  }
+
+  resetFoldCheck() {
+    this.isFoldChecked = true;
+  }
+}

package/src/manager/GraphEventManager.ts

@@ -0,0 +1,90 @@
+import { Graph } from '@aloudata/ink-graph-new';
+import { InkLineageManager } from './LineageManager';
+import { IColResBase, TDataBase } from '../types';
+
+export class GraphEventManager<
+  TTableData extends TDataBase<TColumnData>,
+  TColumnData extends IColResBase,
+> {
+  lineageManager: InkLineageManager<TTableData, TColumnData>;
+
+  graph: Graph;
+
+  isDragging: boolean;
+
+  constructor(lineageManager: InkLineageManager<TTableData, TColumnData>) {
+    this.lineageManager = lineageManager;
+  }
+
+  init(graph: Graph) {
+    this.graph = graph;
+    this.initEvents();
+  }
+
+  initEvents() {
+    this.initGlobalEvent();
+  }
+
+  initGlobalEvent() {
+    // 调整屏幕尺寸，触发resize
+    const handleResizeCanvas = () => {
+      if (this.lineageManager.canvasDomRoot) {
+        this.graph?.canvas?.resize(
+          this.lineageManager.canvasDomRoot.clientWidth,
+          this.lineageManager.canvasDomRoot.clientHeight,
+        );
+      }
+    };
+
+    window.addEventListener('resize', handleResizeCanvas);
+
+    this.graph?.canvas
+      .addEventListener('click', (e: Event) => {
+        // 判断当前点击对象是否为画布 ｜ 右键菜单是否处于显示状态
+        if (
+          e.target === this.graph?.canvas?.document ||
+          this.lineageManager?.rightKeyMenuManager?.contextMenuState?.visible
+        ) {
+          this.lineageManager?.hideContextMenu();
+        }
+      })
+      .addEventListener('drag', () => {
+        // 判断是否开始拖拽
+        this.isDragging = true;
+        // 判断是否滚动
+        if (
+          this.lineageManager?.rightKeyMenuManager?.contextMenuState?.visible
+        ) {
+          this.lineageManager?.hideContextMenu();
+        }
+      })
+      .addEventListener('dragend', () => {
+        // 判断是否结束拖拽
+        this.isDragging = false;
+      })
+      .addEventListener('wheel', () => {
+        // 判断是否滚动
+        if (
+          this.lineageManager?.rightKeyMenuManager?.contextMenuState?.visible
+        ) {
+          this.lineageManager?.hideContextMenu();
+        }
+      })
+      .addEventListener('contextmenu', (e: Event) => {
+        // 判断是否右键菜单，是则阻止默认事件
+        e.preventDefault();
+      })
+      .addEventListener('dblclick', () => {
+        // 双击事件，清空选中节点和相关节点
+        this.lineageManager?.hideContextMenu();
+        const onlyShowRelated =
+          !!this.lineageManager?.rightKeyMenuManager?.onlyShowRelated;
+
+        if (!onlyShowRelated) {
+          this.lineageManager?.resetActiveNodes();
+          this.lineageManager?.resetRelatedNodes();
+          this.lineageManager?.resetHighLight();
+        }
+      });
+  }
+}