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

package/src/components/Nodes/ColumnNode.ts

@@ -1,491 +0,0 @@
-import {
-  Rect,
-  Text,
-  Image,
-  getTextDomWidth,
-  getNodeHeight,
-  Graph,
-} from '@aloudata/ink-graph-new';
-import _ from 'lodash';
-import { DefaultNode } from './DefaultNode';
-import {
-  COL_HEIGHT,
-  COL_ORDER_TEXT_X,
-  COL_ORDER_TEXT_Y,
-  COL_PK_FK_Y,
-  COL_TEXT_X,
-  COL_TEXT_Y,
-  NODE_WIDTH,
-  RECT_LINE_WIDTH,
-  SIDE_ICON_SIZE,
-} from '../../constant';
-import { fkIcon, pkIcon } from '../../assets';
-import {
-  EDashType,
-  EElementType,
-  EExpandType,
-  IColumnConfig,
-  IColResBase,
-  INodeConfig,
-  TDataBase,
-  EColumnEvents,
-  EEventEnum,
-} from '../../types';
-import { TableNode } from '.';
-import { getEventTypeByNodeType } from '../../utils';
-
-export class ColumnNode extends DefaultNode {
-  prevStartRelatedColumnId: string = '';
-
-  declare config: IColumnConfig<IColResBase>;
-
-  colText: Text;
-
-  colDesc: Text;
-
-  isForbidden: boolean;
-
-  constructor(
-    graph: Graph,
-    config: IColumnConfig<IColResBase>,
-    public node: TableNode,
-    public position: number,
-  ) {
-    super(graph, config);
-    this.elementType = EElementType.TABLE;
-    this.eventType = getEventTypeByNodeType(EElementType.COLUMN);
-
-    this.render();
-  }
-
-  render() {
-    if (!this.config.data) return;
-
-    this.container.name = 'column-group';
-    this.container.style.y = this.position * COL_HEIGHT;
-    this.container.style.cursor = 'default';
-
-    const { position, name, constraint } = this.config.data;
-
-    this.isForbidden = this.isForbiddenColumn();
-
-    this.container.style.zIndex = this.config.style.zIndex;
-
-    this.bgRect = new Rect({
-      name: 'column-bgRect',
-      style: {
-        x: 8,
-        fill: this.isForbidden ? '#fff' : this.config?.style?.fill || '#fff',
-        stroke: this.isForbidden
-          ? '#DBDBDB'
-          : this.config?.style?.stroke || '#DBDBDB',
-        lineWidth: RECT_LINE_WIDTH,
-        width: NODE_WIDTH - 16,
-        height: COL_HEIGHT,
-        zIndex: 0,
-      },
-    });
-
-    this.container.addEventListener('click', () => {
-      this.lineageManager.emit(EColumnEvents.CLICK, this);
-    });
-
-    this.container.addEventListener('contextmenu', (e) => {
-      e.preventDefault();
-      this.contextmenuClick();
-    });
-
-    this.container.addEventListener('mouseenter', () => {
-      if (this.isForbidden) return;
-
-      this.node.isHoverColumn = true;
-      // show side icon
-      this.onHover();
-      this.node.onLeave();
-      this.showSideIcon();
-    });
-
-    this.container.addEventListener('mouseleave', () => {
-      this.node.isHoverColumn = false;
-      // hide side icon
-      this.onLeave();
-      // this.node.onHover();
-      this.hideSideIcon();
-    });
-
-    // 用于hover到sideIcon区域时也能显示sideIcon
-    const colHideRect = new Rect({
-      name: 'column-bgRect-hide',
-      style: {
-        x: -20,
-        fill: '#0000',
-        stroke: '#0000',
-        lineWidth: RECT_LINE_WIDTH,
-        width: NODE_WIDTH + 40,
-        height: COL_HEIGHT - 1,
-        zIndex: 9,
-        cursor: this.isForbidden ? 'not-allowed' : 'default',
-      },
-    });
-
-    const colOrderText = new Text({
-      style: {
-        x: COL_ORDER_TEXT_X + 8,
-        y: COL_ORDER_TEXT_Y,
-        text: position || '-',
-        fill: '#A2A2A2',
-        fontSize: 12,
-        fontWeight: 400,
-        fontFamily: 'Tahoma',
-        zIndex: 2,
-        opacity: this.isForbidden ? 0.5 : 1,
-      },
-    });
-
-    const desc =
-      this.config.data?.displayName || this.config.data?.description || '';
-    const descLengh = getTextDomWidth(desc, 12, 'Tahoma');
-    const isDescExist = desc && descLengh > 0;
-
-    this.colText = new Text({
-      name: 'column-text',
-      style: {
-        x: COL_TEXT_X + 8,
-        y: COL_TEXT_Y,
-        wordWrap: true,
-        wordWrapWidth: isDescExist ? 150 : 240,
-        textOverflow: 'ellipsis',
-        maxLines: 1,
-        text: name,
-        fill: '#171717',
-        fontSize: 12,
-        fontWeight: 400,
-        fontFamily: 'PingFang SC',
-        zIndex: 2,
-        opacity: this.isForbidden ? 0.5 : 1,
-      },
-    });
-
-    this.container.appendChild(colHideRect);
-    this.container.appendChild(this.bgRect);
-    this.container.appendChild(colOrderText);
-    this.container.appendChild(this.colText);
-
-    // desc
-    if (isDescExist) {
-      this.colDesc = new Text({
-        name: 'column-desc-text',
-        style: {
-          x: 300 - 20,
-          y: COL_TEXT_Y,
-          wordWrap: true,
-          wordWrapWidth: 85,
-          textOverflow: 'ellipsis',
-          textAlign: 'right',
-          maxLines: 1,
-          text: desc,
-          fill: '#4B5563',
-          fontSize: 12,
-          fontWeight: 400,
-          fontFamily: 'PingFang SC',
-          zIndex: 2,
-          opacity: this.isForbidden ? 0.5 : 1,
-        },
-      });
-      this.container.appendChild(this.colDesc);
-    }
-
-    // PK、FK
-    if (!_.isNil(constraint) && ['PK', 'FK'].includes(constraint)) {
-      const columnType = new Image({
-        style: {
-          x: 190, // FIXME @yk
-          y: COL_PK_FK_Y,
-          width: 12,
-          height: 12,
-          img: constraint === 'PK' ? pkIcon : fkIcon,
-          cursor: 'pointer',
-          zIndex: 2,
-        },
-      });
-      this.container.appendChild(columnType);
-    }
-
-    if (
-      !this.isForbidden &&
-      (this.config.isRelatedColumn || this.config.isStartNode)
-    ) {
-      this.leftIcon = new Image({
-        name: `sideIcon-img-left`,
-        style: {
-          x: -SIDE_ICON_SIZE - 5,
-          y: COL_HEIGHT / 2 - SIDE_ICON_SIZE / 2,
-          width: SIDE_ICON_SIZE,
-          height: SIDE_ICON_SIZE,
-          cursor: 'pointer',
-          zIndex: 99,
-          visibility: 'visible',
-        },
-      });
-
-      this.leftIcon.addEventListener('click', (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        this.leftIconClick();
-      });
-
-      this.rightIcon = new Image({
-        name: `sideIcon-img-right`,
-        style: {
-          x: NODE_WIDTH + 6,
-          y: COL_HEIGHT / 2 - SIDE_ICON_SIZE / 2,
-          width: SIDE_ICON_SIZE,
-          height: SIDE_ICON_SIZE,
-          cursor: 'pointer',
-          zIndex: 99,
-          visibility: 'visible',
-        },
-      });
-
-      this.rightIcon.addEventListener('click', (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        this.rightIconClick();
-      });
-
-      this.container.appendChild(this.leftIcon);
-      this.container.appendChild(this.rightIcon);
-    }
-  }
-
-  onHover() {
-    if (!this.config) return;
-    if (this.config.style.stroke === '#3271C9') return;
-
-    this.bgRect.setAttribute('stroke', '#3271C9');
-    this.container.setAttribute('zIndex', 3);
-  }
-
-  onLeave() {
-    if (!this.config) return;
-    if (this.config.style.stroke === '#3271C9') return;
-
-    this.bgRect.setAttribute('stroke', '#DBDBDB');
-    this.container.setAttribute('zIndex', 2);
-  }
-
-  destroy(): void {
-    const filteredArray = _.reject(this.node.config.relatedColumns, {
-      id: this.id,
-    });
-
-    this.node.config.relatedColumns = filteredArray;
-
-    if (filteredArray.length === 0) {
-      this.node.config.isRelated = false;
-    }
-
-    this.config = null;
-
-    this.node.update(this.node.config, this.node.container);
-  }
-
-  isForbiddenColumn() {
-    return (
-      !this.config.isRelatedColumn &&
-      this.node.config.relatedColumns.some((c) => c.id === this.id && c.visible)
-    );
-  }
-
-  showSideIcon = () => {
-    const { config } = this;
-
-    const onlyShowRelated =
-      !!this.lineageManager?.rightKeyMenuManager?.onlyShowRelated;
-
-    // check left
-    // show expand left side icon
-    if (config.canExpandInput) {
-      if (onlyShowRelated && config.isStartNode && !config.isRelatedColumn) {
-      } else {
-        this.showLeftIcon(EExpandType.EXPAND);
-      }
-    }
-
-    // show close left side icon
-    if (config.canFoldInput) {
-      if (onlyShowRelated) {
-      } else {
-        this.showLeftIcon(EExpandType.FOLD);
-      }
-    }
-
-    // check right
-    // show expand right side icon
-    if (config.canExpandOutput) {
-      if (onlyShowRelated && config.isStartNode && !config.isRelatedColumn)
-        return;
-
-      this.showRightIcon(EExpandType.EXPAND);
-    }
-
-    // show close right side icon
-    if (config.canFoldOutput && !onlyShowRelated) {
-      this.showRightIcon(EExpandType.FOLD);
-    }
-  };
-
-  handleHotspotExpand(data: { resData }) {
-    const { resData: parsedData } = data;
-
-    if (parsedData.nodes.length > 1) {
-      // save prev start related column id
-      this.lineageManager.expandManager.prevStartRelatedColumnId =
-        this.config.id;
-    }
-
-    const { nodes: newNodes, edges: newEdges } = parsedData;
-
-    if (
-      newEdges.every((edge) => edge.relationType === EDashType.INDIRECT) &&
-      this.lineageManager?.rightKeyMenuManager?.edgeDashVisible ===
-      EDashType.DIRECT
-    ) {
-      this.lineageManager.emit(EEventEnum.INDIRECT_TIPS, {
-        message: '当前字段只有间接血缘，请打开间接血缘开关后查看',
-      });
-    }
-
-    const prevNodesConfig = this.lineageManager.parsedData.nodes;
-    let prevEdgesConfig = this.lineageManager.parsedData.edges;
-
-    // 如果是从起始列往下扩展并且不是同一个列，先清空之前所有节点下的的relatedColumns，再把新的parse后的列赋值给每一个表下
-    // 展开列是起始资产的列且展开列不是起始资产的第一个列
-    if (
-      this.config.isStartNode &&
-      this.prevStartRelatedColumnId !== this.config?.id
-    ) {
-      // find related nodes and edges
-      // 获取起始资产首列的上下游列，包含间接血缘
-      if (this.prevStartRelatedColumnId) {
-        prevEdgesConfig = prevEdgesConfig.filter((e) => {
-          return !e.data.relationTypeCode.includes('Column');
-        });
-      }
-
-      // clear all related columns
-      prevNodesConfig.forEach((n) => {
-        // clear related edges
-        n.relatedColumns = [];
-      });
-    }
-
-    // difference nodes
-    // 去除nodes中id等于prevNodesConfig.id中的节点，得到改变深度后的额外节点
-    const differentObjects = _.differenceBy(
-      newNodes,
-      prevNodesConfig,
-      'id',
-    ) as unknown as INodeConfig<TDataBase<IColResBase>, IColResBase>[];
-
-    // common nodes
-    // 找出prevNodesConfig中id等于nodes中id的节点
-    const commonObjects = _.intersectionBy(prevNodesConfig, newNodes, 'id');
-
-    differentObjects.forEach((n) => {
-      n.relatedColumns = n.children;
-      n.relatedColumns.forEach((col) => {
-        col.isRelatedColumn = true;
-      });
-      n.children = [];
-      n.isFolded = false;
-      n.style.height = getNodeHeight(n);
-    });
-
-    commonObjects.forEach((n) => {
-      n.isFolded = false;
-      // 展开后得到的所有节点中找到第一个交集节点
-      const sameNodeNew = newNodes.find((node) => node.id === n.id);
-      if (sameNodeNew) {
-        n.relatedColumns = _.unionBy(
-          [...n.relatedColumns, ...sameNodeNew.children],
-          'id',
-        );
-        n.relatedColumns.forEach((col) => {
-          col.isRelatedColumn = true;
-        });
-        n.style.height = getNodeHeight(n);
-      }
-
-      sameNodeNew.data.isHotspot =
-        n.data.isHotspot || sameNodeNew.data.isHotspot;
-    });
-
-    // show related edges
-    newEdges.forEach((e) => {
-      const prevEdge = prevEdgesConfig.find((edge) => edge.id === e.id);
-      if (prevEdge) {
-        prevEdge.isFolded = false;
-        //
-        if (e.relationType !== prevEdge.relationType) {
-          prevEdge.relationType = EDashType.ALL;
-          prevEdge.style.strokeDasharray = [0];
-        }
-      } else {
-        e.isFolded = false;
-      }
-    });
-
-    const newNodesConfig = _.concat(prevNodesConfig, differentObjects);
-    //
-    const newEdgesConfig = _.unionBy([...prevEdgesConfig, ...newEdges], 'id');
-
-    // update related column position
-    newNodesConfig.forEach((n) => {
-      n.relatedColumns
-        .sort((a, b) => {
-          return a.data?.position - b.data?.position;
-        })
-        .forEach((col, i) => {
-          col.position = {
-            x: 0,
-            y: i * COL_HEIGHT,
-          };
-        });
-    });
-
-    this.lineageManager.setData({
-      nodes: newNodesConfig,
-      edges: newEdgesConfig,
-    });
-
-    const onlyShowRelated =
-      !!this.lineageManager?.rightKeyMenuManager?.onlyShowRelated;
-    if (!onlyShowRelated) {
-      const currRelatedColumn = this.node.config.relatedColumns.find(
-        (col) => col.id === this.config.id,
-      );
-
-      // update active nodes
-      this.lineageManager?.updateActiveNodes([currRelatedColumn]);
-
-      // cache related edges
-      this.lineageManager?.setRelatedNodesAndEdges(this.config, false);
-    } else {
-      // update active nodes
-      this.lineageManager?.updateActiveNodes([
-        this.lineageManager.cachedRelatedNodeConfig,
-      ]);
-
-      // cache related edges
-      this.lineageManager?.setRelatedNodesAndEdges(
-        this.lineageManager.cachedRelatedNodeConfig,
-      );
-    }
-
-    // calc fold nodes
-    this.lineageManager?.updateFoldStatus(
-      this.lineageManager.foldLineageManager.isFoldChecked,
-    );
-  }
-}

package/src/components/Nodes/CustomNode.ts

@@ -1,63 +0,0 @@
-import { Text, Image, Graph } from '@aloudata/ink-graph-new';
-import { AssetNode } from './AssetNode';
-import { EElementType, EEntityType, INodeConfig, IColResBase, TDataBase, AssetEventType } from '../../types';
-import { entityDefaultType } from '../../assets';
-import { getEntityTypeIcon, getEventTypeByNodeType } from '../../utils';
-import { TABLE_HEADER_NAME_WRAP_WIDTH } from '../../constant';
-
-export class CustomNode extends AssetNode {
-  declare config: INodeConfig<TDataBase<IColResBase>, IColResBase>;
-
-  constructor(graph: Graph, config: INodeConfig<TDataBase<IColResBase>, IColResBase>) {
-    super(graph, config);
-    this.elementType = EElementType.CUSTOM;
-    this.eventType = getEventTypeByNodeType(EElementType.CUSTOM) as AssetEventType;
-  }
-
-  render(config: INodeConfig<TDataBase<IColResBase>, IColResBase>) {
-    this.renderAssetNode();
-
-    this.renderCustomHeader();
-
-    // refresh table height
-    this.updateNodeHeight();
-  }
-
-  renderCustomHeader() {
-    const { data } = this.config;
-    const { typeCode, typeCodeName, icon } = data;
-    const img =
-      data.type === EEntityType.CUSTOM
-        ? icon || entityDefaultType
-        : (getEntityTypeIcon(typeCode, data.type) as string);
-    const entityTypeIcon = new Image({
-      style: {
-        x: 12,
-        y: 12,
-        width: 20,
-        height: 20,
-        img,
-        cursor: 'pointer',
-      },
-    });
-
-    const typeCodeNameText = new Text({
-      style: {
-        x: 36,
-        y: 43,
-        text: typeCodeName,
-        fontSize: 12,
-        fontWeight: 400,
-        lineHeight: 16,
-        fontFamily: 'PingFang SC',
-        textBaseline: 'middle',
-        wordWrap: true,
-        wordWrapWidth: TABLE_HEADER_NAME_WRAP_WIDTH,
-        fill: '#4B5563',
-      },
-    });
-
-    this.headerGroup.appendChild(typeCodeNameText);
-    this.headerGroup.appendChild(entityTypeIcon);
-  }
-}

package/src/components/Nodes/DefaultNode.ts

@@ -1,74 +0,0 @@
-import { BaseNode, Graph, Image } from '@aloudata/ink-graph-new';
-import {
-  EElementType,
-  EExpandType,
-  EXPAND_BUTTON_TYPE,
-  IColumnConfig,
-  INodeConfig,
-  IColResBase,
-  TDataBase,
-  EventEnumType,
-} from '../../types';
-import { InkLineageManager } from '../../manager';
-
-export class DefaultNode extends BaseNode<
-  INodeConfig<TDataBase<IColResBase>, IColResBase> | IColumnConfig<IColResBase>
-> {
-  static lineageManager: InkLineageManager<TDataBase<IColResBase>, IColResBase>;
-
-  eventType: EventEnumType;
-
-  elementType: EElementType;
-
-  leftIcon: Image;
-
-  rightIcon: Image;
-
-  isHoverColumn?: boolean;
-
-  get lineageManager(): InkLineageManager<TDataBase<IColResBase>, IColResBase> {
-    return DefaultNode.lineageManager;
-  }
-
-  constructor(
-    graph: Graph,
-    config:
-      | INodeConfig<TDataBase<IColResBase>, IColResBase>
-      | IColumnConfig<IColResBase>,
-  ) {
-    super(graph, config);
-  }
-
-  rightIconClick() {
-    this.lineageManager.emit(this.eventType.RIGHT_ICON_CLICK, this);
-  }
-
-  leftIconClick() {
-    this.lineageManager.emit(this.eventType.LEFT_ICON_CLICK, this);
-  }
-
-  contextmenuClick() {
-    this.lineageManager.emit(this.eventType.CONTEXT_MENU, this);
-  }
-
-  hideSideIcon = () => {
-    this.leftIcon?.setAttribute('visibility', 'hidden');
-    this.rightIcon?.setAttribute('visibility', 'hidden');
-  };
-
-  showLeftIcon(type: EExpandType) {
-    if (!this.leftIcon) return;
-
-    this.leftIcon.style.img = EXPAND_BUTTON_TYPE[type];
-    this.leftIcon.setAttribute('visibility', 'visible');
-    (this.leftIcon as any).iconType = type;
-  }
-
-  showRightIcon(type: EExpandType) {
-    if (!this.rightIcon) return;
-
-    this.rightIcon.style.img = EXPAND_BUTTON_TYPE[type];
-    this.rightIcon.setAttribute('visibility', 'visible');
-    (this.rightIcon as any).iconType = type;
-  }
-}