@aloudata/ink-lineage 0.0.1-beta.1 → 0.0.1-beta.11

package/src/components/Nodes/AssetNode.ts

@@ -1,438 +0,0 @@
-import { Group, Rect, Text, Image, Graph } from '@aloudata/ink-graph-new';
-import { DefaultNode } from './DefaultNode';
-import {
-  colorVar,
-  NODE_WIDTH,
-  RECT_LINE_WIDTH,
-  SIDE_ICON_SIZE,
-  TABLE_HEADER_HEIGHT,
-  TABLE_HEADER_NAME_WRAP_WIDTH,
-  TABLE_RECT_BORDER_RADIUS,
-  TABLE_TAG_HEIGHT,
-} from '../../constant';
-import {
-  AssetEventType,
-  EDashType,
-  EDirection,
-  EEntityType,
-  EEventEnum,
-  EExpandType,
-  IColResBase,
-  INodeConfig,
-  TDataBase,
-} from '../../types';
-import { hotspot } from '../../assets';
-import _ from 'lodash';
-
-export class AssetNode extends DefaultNode {
-  headerGroup: Rect;
-
-  headerName: Text;
-
-  isHoverColumn: boolean = false;
-
-  declare eventType: AssetEventType;
-
-  declare config: INodeConfig<TDataBase<IColResBase>, IColResBase>;
-
-  constructor(
-    graph: Graph,
-    config: INodeConfig<TDataBase<IColResBase>, IColResBase>,
-  ) {
-    super(graph, config);
-  }
-
-  renderAssetNode() {
-    const { isStartNode, visible, position } = this.config;
-
-    this.container.setPosition(position.x, position.y);
-
-    if (visible === false) return;
-
-    if (isStartNode) {
-      // render start node tag
-      this.renderStartNodeTag();
-    }
-
-    // render table header
-    this.renderHeader();
-
-    // init events
-    this.initEvents();
-  }
-
-  renderStartNodeTag() {
-    const { data } = this.config;
-    const tagGroup = new Group({
-      name: 'tag',
-    });
-
-    const color = data.type === EEntityType.CUSTOM ? '#475569' : '#14B8A6';
-    const tagRect = new Rect({
-      style: {
-        x: -1,
-        y: -TABLE_TAG_HEIGHT,
-        width: NODE_WIDTH + 2,
-        height: TABLE_TAG_HEIGHT,
-        stroke: color,
-        fill: color,
-        lineWidth: 1,
-        radius: [4, 4, 0, 0], // 0
-      },
-    });
-
-    const tagText = new Text({
-      style: {
-        x: 8,
-        y: -17,
-        lineHeight: 16,
-        text: '起始资产',
-        fontSize: 12,
-        fontWeight: 400,
-        fontFamily: 'PingFang SC',
-        textBaseline: 'top',
-        fill: '#FFF',
-      },
-    });
-
-    tagGroup.appendChild(tagRect);
-    tagGroup.appendChild(tagText);
-
-    this.container.appendChild(tagGroup);
-  }
-
-  renderHeader() {
-    const { data, isStartNode } = this.config;
-    const { name, typeCodeName } = data;
-
-    // table 整体
-    this.headerGroup = new Rect({
-      name: 'table-header-group',
-      style: {
-        x: -1,
-        y: 1,
-        width: NODE_WIDTH + 2,
-        height: TABLE_HEADER_HEIGHT,
-        stroke: this.config.style.stroke || colorVar.headerGroupBorderDefault,
-        zIndex: this.config.style.zIndex || 2,
-        lineWidth: RECT_LINE_WIDTH,
-        radius: isStartNode
-          ? [0, 0, TABLE_RECT_BORDER_RADIUS, TABLE_RECT_BORDER_RADIUS]
-          : TABLE_RECT_BORDER_RADIUS,
-      },
-    });
-
-    (this.headerGroup as any).node = this;
-
-    this.headerGroup.addEventListener('click', () => {
-      this.lineageManager.emit(this.eventType.HEADER_CLICK, this);
-    });
-
-    this.headerGroup.addEventListener('contextmenu', (e) => {
-      e.preventDefault();
-
-      this.contextmenuClick();
-    });
-
-    // header部分
-    this.bgRect = new Rect({
-      style: {
-        x: 1,
-        y: 1,
-        fill: this.config.style.fill || '#FFFFFF',
-        width: NODE_WIDTH,
-        height: TABLE_HEADER_HEIGHT,
-        radius: isStartNode
-          ? 0
-          : [TABLE_RECT_BORDER_RADIUS, TABLE_RECT_BORDER_RADIUS, 0, 0],
-      },
-    });
-
-    this.headerName = new Text({
-      style: {
-        x: 36,
-        y: 22,
-        text: name,
-        fontSize: 12,
-        fontWeight: 500,
-        lineHeight: 14,
-        fontFamily: 'PingFang SC',
-        textBaseline: 'middle',
-        wordWrap: true,
-        wordWrapWidth: TABLE_HEADER_NAME_WRAP_WIDTH,
-        maxLines: 2,
-        textOverflow: 'ellipsis',
-        fill: '#171717',
-      },
-    });
-
-    // 用于hover到sideIcon区域时也能显示sideIcon
-    const bgHideRect = new Rect({
-      name: 'column-bgRect-hide',
-      style: {
-        x: -20,
-        fill: '#0000',
-        stroke: '#0000',
-        width: NODE_WIDTH + 40,
-        height: TABLE_HEADER_HEIGHT,
-        zIndex: 9,
-      },
-    });
-
-    if (this.config.data.isHotspot) {
-      const hotspotIcon = new Image({
-        style: {
-          x: 270,
-          y: 14,
-          width: 20,
-          height: 20,
-          img: hotspot,
-          cursor: 'pointer',
-          zIndex: 99,
-        },
-      });
-
-      hotspotIcon?.addEventListener('mouseenter', () => {
-        const { x, y } = hotspotIcon.getBBox();
-        this.lineageManager.rightKeyMenuManager.updateHotspotTipState({
-          visible: true,
-          id: this.config.id,
-          data: this.config.data,
-          x,
-          y,
-        });
-      });
-
-      hotspotIcon?.addEventListener('mouseout', () => {
-        this.lineageManager.rightKeyMenuManager.updateHotspotTipState({
-          visible: false,
-          id: '',
-          data: {},
-          x: -999,
-          y: -999,
-        });
-      });
-
-      this.headerGroup.appendChild(hotspotIcon);
-    }
-
-    this.leftIcon = new Image({
-      name: `sideIcon-img-left`,
-      style: {
-        x: -SIDE_ICON_SIZE - 4,
-        y: TABLE_HEADER_HEIGHT / 2 - SIDE_ICON_SIZE / 2,
-        width: SIDE_ICON_SIZE,
-        height: SIDE_ICON_SIZE,
-        cursor: 'pointer',
-        zIndex: 99,
-        visibility: 'visible',
-      },
-    });
-
-    this.leftIcon.addEventListener('click', () => {
-      this.leftIconClick();
-    });
-
-    this.rightIcon = new Image({
-      name: `sideIcon-img-right`,
-      style: {
-        x: NODE_WIDTH + 6,
-        y: TABLE_HEADER_HEIGHT / 2 - SIDE_ICON_SIZE / 2,
-        width: SIDE_ICON_SIZE,
-        height: SIDE_ICON_SIZE,
-        cursor: 'pointer',
-        zIndex: 99,
-        visibility: 'visible',
-      },
-    });
-
-    this.rightIcon.addEventListener('click', () => {
-      this.rightIconClick();
-    });
-
-    this.headerGroup.appendChild(this.bgRect);
-    this.headerGroup.appendChild(this.headerName);
-    this.headerGroup.appendChild(bgHideRect);
-    this.headerGroup.appendChild(this.leftIcon);
-    this.headerGroup.appendChild(this.rightIcon);
-
-    this.container.appendChild(this.headerGroup);
-  }
-
-  updateNodeHeight() {
-    const tagHeight = this.config.isStartNode ? TABLE_TAG_HEIGHT : -1;
-    this.headerGroup.style.height = this.container.getBBox().height - tagHeight;
-  }
-
-  onHover() {
-    if (!this.config) return;
-    if (this.config.style.stroke === '#3271C9') return;
-    if (this.isHoverColumn) return;
-
-    this.headerGroup.setAttribute('stroke', '#3271C9');
-    this.container.setAttribute('zIndex', 3);
-  }
-
-  onLeave() {
-    if (!this.config) return;
-    if (this.config.style.stroke === '#3271C9') return;
-    if (this.isHoverColumn) return;
-
-    this.headerGroup.setAttribute('stroke', '#B1B1B1');
-    this.container.setAttribute('zIndex', 2);
-  }
-
-  onMouseLeave = () => {
-    this.onLeave();
-    // hide side icon
-    this.hideSideIcon();
-  };
-
-  onMouseEnter = () => {
-    this.onHover();
-    // show side icon
-    this.showSideIcon();
-  };
-
-  initEvents() {
-    this.container.addEventListener('mouseover', (e) => {
-      const target = e.target as any;
-      if (!target) return;
-
-      const targetParent = target.parentElement as any;
-      if (targetParent && targetParent.name === 'table-header-group') {
-        const targetNode = targetParent.node as any;
-        if (!targetNode) return;
-
-        targetNode.onMouseEnter();
-
-        const handleMouseLeave = () => {
-          targetNode.onMouseLeave();
-          targetNode.headerGroup.removeEventListener(
-            'mouseleave',
-            handleMouseLeave,
-          );
-        };
-
-        targetNode.headerGroup.addEventListener('mouseleave', handleMouseLeave);
-      }
-    });
-
-    this.container.addEventListener('mouseenter', () => {
-      this.onHover();
-    });
-
-    this.container.addEventListener('mouseleave', () => {
-      this.onLeave();
-    });
-  }
-
-  showSideIcon = () => {
-    const { config } = this;
-
-    const onlyShowRelated =
-      !!this.lineageManager?.rightKeyMenuManager?.onlyShowRelated;
-
-    const isColumnRelatedList =
-      !!this.lineageManager.activeNodes?.[0]?.tableName;
-    const inRelatedAndInColumnList = onlyShowRelated && isColumnRelatedList;
-
-    // check left
-    // show expand left side icon
-    if (config.canExpandInput && !inRelatedAndInColumnList)
-      // show left icon if not in column related list
-      this.showLeftIcon(EExpandType.EXPAND);
-    // show close left side icon
-    if (config.canFoldInput && !onlyShowRelated)
-      this.showLeftIcon(EExpandType.FOLD);
-
-    // check right
-    // show expand right side icon
-    if (config.canExpandOutput && !inRelatedAndInColumnList) {
-      // show right icon if not in column related list
-      this.showRightIcon(EExpandType.EXPAND);
-    }
-
-    // show close right side icon
-    if (config.canFoldOutput && !onlyShowRelated)
-      this.showRightIcon(EExpandType.FOLD);
-  };
-
-  handleHotspotExpand(data: { resData; params }) {
-    const { resData: parsedData, params } = data;
-
-    if (!parsedData) return;
-
-    // reset related nodes
-    this.lineageManager?.resetRelatedNodes();
-
-    const { nodes, edges } = parsedData;
-
-    // show no more linage
-    if (edges.length <= 0) {
-      this.lineageManager.emit(EEventEnum.INDIRECT_TIPS, {
-        message: `该节点无${
-          params.direction === EDirection.INPUT ? '上游' : '下游'
-        }血缘`,
-      });
-    } else {
-      // show indirect warning
-      if (
-        edges
-          .filter((e) =>
-            params.direction === EDirection.INPUT
-              ? e.target === params.guid
-              : e.source === params.guid,
-          )
-          .every((e) => e.relationType === EDashType.INDIRECT)
-      ) {
-        this.lineageManager.emit(EEventEnum.INDIRECT_TIPS, {
-          message: '当前字段只有间接血缘，请打开间接血缘开关后查看',
-        });
-      }
-
-      const prevNodesConfig = this.lineageManager.parsedData.nodes;
-      const prevEdgesConfig = this.lineageManager.parsedData.edges;
-
-      const newNodesConfig = _.unionBy([...prevNodesConfig, ...nodes], 'id');
-      const newEdgesConfig = _.unionBy([...prevEdgesConfig, ...edges], 'id');
-
-      // prevNodesConfig中和nodes中同id的node，如果node的isHotspot为true，则将prevNodesConfig中同id的node的isHotspot设置为node的isHotspot，hotspots设置为node的hotspots
-      nodes.forEach((node) => {
-        const newNode = newNodesConfig.find((n) => n.id === node.id);
-        if (newNode) {
-          newNode.data.isHotspot =
-            newNode.data.isHotspot || node.data.isHotspot;
-          newNode.data.hotspots = node.data.hotspots || newNode.data.hotspots;
-        }
-      });
-
-      this.lineageManager.setData({
-        nodes: newNodesConfig,
-        edges: newEdgesConfig,
-      });
-
-      const onlyShowRelated =
-        !!this.lineageManager?.rightKeyMenuManager?.onlyShowRelated;
-
-      if (!onlyShowRelated) {
-        // highlight curr node flow
-        this.lineageManager?.updateActiveNodes([this.config]);
-        // set related nodes & edges
-        this.lineageManager?.setRelatedNodesAndEdges(this.config);
-      } else {
-        // highlight curr node flow
-        this.lineageManager?.updateActiveNodes([
-          this.lineageManager.cachedRelatedNodeConfig,
-        ]);
-        // set related nodes & edges
-        this.lineageManager?.setRelatedNodesAndEdges(
-          this.lineageManager.cachedRelatedNodeConfig,
-        );
-      }
-
-      // update
-      this.lineageManager.update();
-    }
-  }
-}