@aloudata/ink-lineage 0.0.1-beta.1

package/src/components/Nodes/AssetNode.ts

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