@aloudata/ink-lineage 0.0.1-beta.1

package/src/components/Nodes/DowngradeNode.ts

@@ -0,0 +1,115 @@
+import { Graph, Image, Rect } from '@aloudata/ink-graph-new';
+import {
+  DOWNGRADE_TABLE_HEADER_HEIGHT,
+  NODE_WIDTH,
+  SIDE_ICON_SIZE,
+} from '../../constant';
+import {
+  EEntityType,
+  EElementType,
+  IColResBase,
+  INodeConfig,
+  TDataBase,
+  AssetEventType,
+} from '../../types';
+import { getEventTypeByNodeType } from '../../utils';
+import { getEventTypeByEntityType } from '../../utils/downgradeNode';
+import { AssetNode } from './AssetNode';
+
+export class DowngradeNode extends AssetNode {
+  declare config: INodeConfig<TDataBase<IColResBase>, IColResBase>;
+
+  constructor(
+    graph: Graph,
+    config: INodeConfig<TDataBase<IColResBase>, IColResBase>,
+  ) {
+    super(graph, config);
+    this.elementType = EElementType.TABLE;
+    this.eventType = getEventTypeByNodeType(
+      EElementType.TABLE,
+    ) as AssetEventType;
+  }
+
+  render() {
+    const { isStartNode, visible } = this.config;
+
+    if (visible === false) return;
+
+    if (isStartNode) {
+      this.renderStartNodeTag();
+    }
+
+    super.render(this.config, this.container);
+
+    this.renderBgHideRect();
+
+    this.renderIcon();
+
+    this.initEvents();
+  }
+
+  renderBgHideRect() {
+    // 用于hover到sideIcon区域时也能显示sideIcon
+    const bgHideRect = new Rect({
+      name: 'column-bgRect-hide',
+      style: {
+        x: -20,
+        fill: '#0000',
+        stroke: '#0000',
+        width: NODE_WIDTH + 40,
+        height: DOWNGRADE_TABLE_HEADER_HEIGHT,
+        zIndex: 9,
+      },
+    });
+    this.headerGroup.appendChild(bgHideRect);
+  }
+
+  renderIcon() {
+    const { data } = this.config;
+    const eventType = getEventTypeByEntityType(data.type as EEntityType);
+    if (!eventType) return null;
+
+    this.leftIcon = new Image({
+      name: `sideIcon-img-left`,
+      style: {
+        x: -SIDE_ICON_SIZE - 4,
+        y: DOWNGRADE_TABLE_HEADER_HEIGHT / 2 - SIDE_ICON_SIZE / 2,
+        width: SIDE_ICON_SIZE,
+        height: SIDE_ICON_SIZE,
+        cursor: 'pointer',
+        zIndex: 99,
+        visibility: 'visible',
+      },
+    });
+
+    this.rightIcon = new Image({
+      name: `sideIcon-img-right`,
+      style: {
+        x: NODE_WIDTH + 6,
+        y: DOWNGRADE_TABLE_HEADER_HEIGHT / 2 - SIDE_ICON_SIZE / 2,
+        width: SIDE_ICON_SIZE,
+        height: SIDE_ICON_SIZE,
+        cursor: 'pointer',
+        zIndex: 99,
+        visibility: 'visible',
+      },
+    });
+
+    this.headerGroup.addEventListener('click', () => {
+      this.lineageManager.emit(this.eventType.HEADER_CLICK, this);
+    });
+
+    this.leftIcon.addEventListener('click', () => {
+      this.leftIconClick();
+    });
+
+    this.rightIcon.addEventListener('click', () => {
+      this.rightIconClick();
+    });
+
+    this.headerGroup.appendChild(this.leftIcon);
+    this.headerGroup.appendChild(this.rightIcon);
+
+    this.container.appendChild(this.headerGroup);
+  }
+}

package/src/components/Nodes/TableNode.ts

@@ -0,0 +1,534 @@
+import {
+  Group,
+  Rect,
+  Text,
+  Image,
+  Graph,
+  getTextDomWidth,
+} from '@aloudata/ink-graph-new';
+import {
+  PAGINATION_IMAGE_SIZE,
+  TABLE_CONTROL_BAR_HEIGHT,
+  TABLE_HEADER_HEIGHT,
+  TABLE_RECT_BORDER_RADIUS,
+  NODE_WIDTH,
+  TABLE_OPERATE_ICON_X,
+  COL_HEIGHT,
+  TABLE_HEADER_DESC_WRAP_WIDTH,
+} from '../../constant';
+import {
+  tableShowLess,
+  tablePaginationNextClick,
+  tablePaginationNextHover,
+  tablePaginationNext,
+  tablePaginationPrevClick,
+  tablePaginationPrevHover,
+  tablePaginationPrev,
+  tableShowMore,
+} from '../../assets';
+import { ColumnNode } from './ColumnNode';
+import { AssetNode } from './AssetNode';
+import {
+  AssetEventType,
+  EElementType,
+  ETableEvents,
+  IColResBase,
+  IColumnConfig,
+  INodeConfig,
+  TDataBase,
+} from '../../types';
+import {
+  getDataSourceTypeIcon,
+  getEntityTypeIcon,
+  getEventTypeByNodeType,
+} from '../../utils';
+
+export class TableNode extends AssetNode {
+  declare config: INodeConfig<TDataBase<IColResBase>, IColResBase>;
+
+  tableRelatedGroup: Rect;
+
+  tableContentGroup: Group;
+
+  colGroup: Rect;
+
+  paginationPrevImage: Image;
+
+  paginationNextImage: Image;
+
+  children: ColumnNode[] = [];
+
+  relatedColumns: ColumnNode[] = [];
+
+  constructor(
+    graph: Graph,
+    config: INodeConfig<TDataBase<IColResBase>, IColResBase>,
+  ) {
+    super(graph, config);
+    this.elementType = EElementType.TABLE;
+    this.eventType = getEventTypeByNodeType(
+      EElementType.TABLE,
+    ) as AssetEventType;
+  }
+
+  render(config: INodeConfig<TDataBase<IColResBase>, IColResBase>) {
+    this.renderAssetNode();
+
+    const { isOpen } = config;
+
+    this.renderTableHeader();
+
+    // render table related content
+    this.renderRelatedContent();
+
+    // // render table control bar
+    this.renderControlBar();
+
+    // render table content
+    if (isOpen) {
+      this.renderColumns();
+      this.calculatePaginationData();
+      this.renderPagination();
+    }
+
+    // refresh table height
+    this.updateNodeHeight();
+  }
+
+  renderTableHeader() {
+    const { data } = this.config;
+    const { assetPath, datasourceType, typeCode } = data;
+    const entityTypeIcon = new Image({
+      style: {
+        x: 12,
+        y: 14,
+        width: 20,
+        height: 20,
+        zIndex: 99,
+        img: getEntityTypeIcon(typeCode, data.type) as string,
+        cursor: 'pointer',
+      },
+    });
+
+    const headerDesc = new Text({
+      style: {
+        x: 36,
+        y: 47,
+        lineHeight: 16,
+        textOverflow: 'ellipsis',
+        text:
+          this.config?.data.displayName || this.config?.data.description || '-',
+        fontSize: 12,
+        fontWeight: 400,
+        fontFamily: 'PingFang SC',
+        textBaseline: 'top',
+        wordWrap: true,
+        wordWrapWidth: TABLE_HEADER_DESC_WRAP_WIDTH,
+        maxLines: 1,
+        textAlign: 'start',
+        fill: '#111827',
+      },
+    });
+    const sourceTypeIcon = new Image({
+      style: {
+        x: 12,
+        y: 67,
+        width: 16,
+        height: 16,
+        zIndex: 99,
+        img: getDataSourceTypeIcon(datasourceType) as string,
+        cursor: 'pointer',
+      },
+    });
+    // 表才有
+    const headerAssetPath = new Text({
+      style: {
+        x: 36,
+        y: 70,
+        zIndex: 99,
+        lineHeight: 16,
+        textOverflow: 'ellipsis',
+        text: assetPath,
+        fontSize: 12,
+        fontWeight: 400,
+        fontFamily: 'PingFang SC',
+        textBaseline: 'top',
+        wordWrap: true,
+        wordWrapWidth: TABLE_HEADER_DESC_WRAP_WIDTH,
+        maxLines: 1,
+        textAlign: 'start',
+        fill: '#858585',
+      },
+    });
+    this.headerGroup.appendChild(entityTypeIcon);
+    this.headerGroup.appendChild(headerDesc);
+    this.headerGroup.appendChild(sourceTypeIcon);
+    this.headerGroup.appendChild(headerAssetPath);
+    this.container.appendChild(this.headerGroup);
+  }
+
+  renderRelatedContent() {
+    const { relatedColumns, isActive, isRelated, style } = this.config;
+
+    const visibleColumns = relatedColumns.filter(
+      (col: IColumnConfig<IColResBase>) => col.visible,
+    );
+
+    // table related group
+    this.tableRelatedGroup = new Rect({
+      style: {
+        y: TABLE_HEADER_HEIGHT,
+        width: NODE_WIDTH,
+        height:
+          visibleColumns.length > 0
+            ? visibleColumns.length * COL_HEIGHT + 16
+            : 0,
+        fill: '#F4F4F4',
+        zIndex: 2,
+      },
+    });
+
+    const tableRelatedColumnsGroup = new Group({
+      style: {
+        y: 8,
+      },
+    });
+
+    visibleColumns
+      .sort((i, j) => {
+        return i.data.position - j.data.position;
+      })
+      .forEach((colConfig: IColumnConfig<IColResBase>, i) => {
+        const col = new ColumnNode(this.graph, colConfig, this, i);
+
+        // add or replace column DOM
+        const colIndex = this.relatedColumns.findIndex((c) => c.id === col.id);
+
+        if (colIndex === -1) {
+          this.relatedColumns.push(col);
+        } else {
+          this.relatedColumns[colIndex] = col;
+        }
+        tableRelatedColumnsGroup.appendChild(col.container);
+      });
+
+    this.tableRelatedGroup.appendChild(tableRelatedColumnsGroup);
+    this.container.appendChild(this.tableRelatedGroup);
+  }
+
+  renderControlBar() {
+    const { lineageManager } = this;
+    const { data, isOpen, isActive, isRelated, style } = this.config;
+    const { columnCount = 0 } = data;
+
+    // column count
+    const columnCountStr = '' + columnCount;
+    const tableRelatedGroupHeight = this.tableRelatedGroup?.getBBox()?.height;
+    const relatedColsHeight = tableRelatedGroupHeight;
+
+    // table content group
+    const tableControlGroup = new Rect({
+      name: 'table-control-group',
+      style: {
+        x: 0,
+        y: TABLE_HEADER_HEIGHT + relatedColsHeight,
+        zIndex: 1,
+        width: NODE_WIDTH,
+        height: 32,
+        fill: '#F4F4F4',
+        radius: isOpen
+          ? [0]
+          : [0, 0, TABLE_RECT_BORDER_RADIUS, TABLE_RECT_BORDER_RADIUS],
+      },
+    });
+
+    const columnCountText = new Text({
+      style: {
+        x: 12,
+        y: 22,
+        text: `全部 ${columnCountStr} 列`,
+        fill: '#575757',
+        fontSize: 12,
+        fontWeight: 400,
+        fontFamily: 'PingFang SC',
+      },
+    });
+
+    const columnToggleImage = new Image({
+      name: 'table-control-toggle-group',
+      style: {
+        x: TABLE_OPERATE_ICON_X,
+        y: 10,
+        width: 44,
+        height: 16,
+        img: isOpen ? tableShowLess : tableShowMore,
+        zIndex: 1,
+        cursor: 'pointer',
+      },
+    });
+
+    columnToggleImage.addEventListener('click', () => {
+      lineageManager.emit(ETableEvents.CONTROL_TOGGLE_GROUP, this);
+    });
+
+    tableControlGroup.appendChild(columnCountText);
+    tableControlGroup.appendChild(columnToggleImage);
+    this.container.appendChild(tableControlGroup);
+  }
+
+  calculatePaginationData() {
+    const { data, pagination } = this.config;
+    const { columnCount = 0 } = data;
+
+    const totalPage = Math.ceil(columnCount / pagination.pageSize);
+    this.config.pagination = {
+      ...pagination,
+      totalPage,
+      total: columnCount,
+    };
+  }
+
+  renderColumns() {
+    const { children, pagination, isActive, style, isRelated } = this.config;
+    // const { columnCount = 0 } = data;
+
+    const tableRelatedGroupHeight = this.tableRelatedGroup?.getBBox()?.height;
+    const relatedColsHeight = tableRelatedGroupHeight;
+
+    // table content group
+    this.tableContentGroup = new Group({
+      style: {
+        y: TABLE_HEADER_HEIGHT + relatedColsHeight + TABLE_CONTROL_BAR_HEIGHT,
+        zIndex: 3,
+      },
+    });
+
+    const sortVisibleColumns = children.sort((i, j) => {
+      return i.data.position - j.data.position;
+    });
+
+    const { pageNum, pageSize } = pagination;
+    const renderVisibleColumns = sortVisibleColumns.slice(
+      (pageNum - 1) * pageSize,
+      pageNum * pageSize,
+    );
+
+    // table columns group
+    this.colGroup = new Rect({
+      style: {
+        width: NODE_WIDTH,
+        height: renderVisibleColumns.length * COL_HEIGHT,
+        fill: '#F4F4F4',
+        zIndex: 2,
+      },
+    });
+
+    renderVisibleColumns.forEach((colConfig: IColumnConfig<IColResBase>, i) => {
+      const col = new ColumnNode(this.graph, colConfig, this, i);
+
+      // add or replace column DOM
+      const colIndex = this.children.findIndex((c) => c.id === col.id);
+      if (colIndex === -1) {
+        this.children.push(col);
+      } else {
+        this.children[colIndex] = col;
+      }
+
+      this.colGroup.appendChild(col.container);
+    });
+
+    this.tableContentGroup.appendChild(this.colGroup);
+    this.container.appendChild(this.tableContentGroup);
+  }
+
+  renderPagination() {
+    const { pagination } = this.config;
+    const { pageNum, totalPage } = pagination;
+
+    const colGroupHeight = this.colGroup.getBBox().height;
+
+    // pagination content group
+    const paginationGroup = new Group({
+      name: 'pagination-wrapper',
+      style: {
+        y: colGroupHeight,
+        zIndex: -1,
+      },
+    });
+
+    const paginationBgRect = new Rect({
+      name: 'pagination-bgRect',
+      style: {
+        fill: '#F4F4F4',
+        width: NODE_WIDTH,
+        radius: [0, 0, TABLE_RECT_BORDER_RADIUS, TABLE_RECT_BORDER_RADIUS],
+        height: 32,
+      },
+    });
+
+    const paginationTotalPage = new Text({
+      name: 'pagination-totalPage-text',
+      style: {
+        x: 12,
+        y: 20,
+        text: `共 ${totalPage} 页`,
+        fill: '#575757',
+        fontSize: 12,
+        fontWeight: 400,
+        fontFamily: 'PingFang SC',
+        zIndex: 2,
+      },
+    });
+    const textWidth = getTextDomWidth(pageNum + '', 12, 'Tahoma');
+
+    const middleX = 260 - textWidth;
+    const leftX = middleX - 23;
+    const rightX = middleX + textWidth + 7;
+
+    this.paginationPrevImage = new Image({
+      name: 'pagination-prev-image',
+      style: {
+        x: leftX,
+        y: 6,
+        width: PAGINATION_IMAGE_SIZE,
+        height: PAGINATION_IMAGE_SIZE,
+        img: tablePaginationPrev,
+        cursor: this.config.pagination.pageNum > 1 ? 'pointer' : 'not-allowed',
+        zIndex: 2,
+        opacity: this.config.pagination.pageNum > 1 ? 1 : 0.5,
+      },
+    });
+
+    this.paginationPrevImage.addEventListener('click', () => {
+      this.onPaginationPrev();
+    });
+
+    this.paginationPrevImage?.addEventListener('mousedown', () => {
+      if (this.config.pagination.pageNum > 1)
+        this.paginationPrevImage.setAttribute('img', tablePaginationPrevClick);
+    });
+
+    this.paginationPrevImage?.addEventListener('mouseup', () => {
+      if (this.config.pagination.pageNum > 1)
+        this.paginationPrevImage.setAttribute('img', tablePaginationPrev);
+    });
+
+    this.paginationPrevImage?.addEventListener('mouseenter', () => {
+      if (this.config.pagination.pageNum > 1)
+        this.paginationPrevImage.setAttribute('img', tablePaginationPrevHover);
+    });
+
+    this.paginationPrevImage?.addEventListener('mouseleave', () => {
+      if (this.config.pagination.pageNum > 1)
+        this.paginationPrevImage.setAttribute('img', tablePaginationPrev);
+    });
+
+    const paginationPageNum = new Text({
+      style: {
+        // x: 300 / 2 - textWidth / 2,
+        x: middleX,
+        y: 20,
+        text: pageNum,
+        fill: '#000',
+        fontSize: 12,
+        fontWeight: 400,
+        fontFamily: 'Tahoma',
+        cursor: 'pointer',
+        zIndex: 2,
+      },
+    });
+
+    this.paginationNextImage = new Image({
+      name: 'pagination-next-image',
+      style: {
+        x: rightX,
+        y: 6,
+        width: PAGINATION_IMAGE_SIZE,
+        height: PAGINATION_IMAGE_SIZE,
+        img: tablePaginationNext,
+        cursor:
+          this.config.pagination.pageNum < this.config.pagination.totalPage
+            ? 'pointer'
+            : 'not-allowed',
+        zIndex: 2,
+        opacity:
+          this.config.pagination.pageNum < this.config.pagination.totalPage
+            ? 1
+            : 0.5,
+      },
+    });
+
+    this.paginationNextImage.addEventListener('click', () => {
+      this.onPaginationNext();
+    });
+
+    this.paginationNextImage?.addEventListener('mousedown', () => {
+      if (this.config.pagination.pageNum < this.config.pagination.totalPage)
+        this.paginationNextImage.setAttribute('img', tablePaginationNextClick);
+    });
+
+    this.paginationNextImage?.addEventListener('mouseup', () => {
+      if (this.config.pagination.pageNum < this.config.pagination.totalPage)
+        this.paginationNextImage.setAttribute('img', tablePaginationNext);
+    });
+
+    this.paginationNextImage?.addEventListener('mouseenter', () => {
+      if (this.config.pagination.pageNum < this.config.pagination.totalPage)
+        this.paginationNextImage.setAttribute('img', tablePaginationNextHover);
+    });
+
+    this.paginationNextImage?.addEventListener('mouseleave', () => {
+      if (this.config.pagination.pageNum < this.config.pagination.totalPage)
+        this.paginationNextImage.setAttribute('img', tablePaginationNext);
+    });
+
+    paginationGroup.appendChild(paginationBgRect);
+    paginationGroup.appendChild(paginationTotalPage);
+    paginationGroup.appendChild(this.paginationPrevImage);
+    paginationGroup.appendChild(paginationPageNum);
+    paginationGroup.appendChild(this.paginationNextImage);
+
+    this.tableContentGroup.appendChild(paginationGroup);
+  }
+
+  onPaginationPrev() {
+    const onlyShowRelated =
+      !!this.lineageManager?.rightKeyMenuManager?.onlyShowRelated;
+
+    if (!onlyShowRelated) {
+      this.lineageManager?.resetActiveNodes();
+      this.lineageManager?.resetRelatedNodes();
+    }
+
+    const { pagination } = this.config;
+    const { pageNum } = pagination;
+    if (pageNum === 1) return;
+
+    this.config.pagination = {
+      ...pagination,
+      pageNum: pageNum - 1,
+    };
+
+    this.graph.update();
+  }
+
+  onPaginationNext() {
+    const onlyShowRelated =
+      !!this.lineageManager?.rightKeyMenuManager?.onlyShowRelated;
+
+    if (!onlyShowRelated) {
+      this.lineageManager?.resetActiveNodes();
+      this.lineageManager?.resetRelatedNodes();
+    }
+
+    const { pagination } = this.config;
+    const { pageNum, totalPage } = pagination;
+    if (pageNum === totalPage) return;
+    this.config.pagination = {
+      ...pagination,
+      pageNum: pageNum + 1,
+    };
+
+    this.graph.update();
+  }
+}

package/src/components/Nodes/index.ts

@@ -0,0 +1,4 @@
+export * from './TableNode';
+export * from './CustomNode';
+export * from './ColumnNode';
+export * from './DowngradeNode';

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './Nodes';
+export * from './Edges';

package/src/constant/index.ts

@@ -0,0 +1 @@
+export * from './nodeStyle';