@aloudata/ink-lineage 0.0.1-beta.2 → 0.0.1-beta.21

package/src/manager/ExpandManager.ts

@@ -1,93 +0,0 @@
-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

@@ -1,196 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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();
-        }
-      });
-  }
-}