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

package/src/components/Nodes/DowngradeNode.ts

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

@@ -1,534 +0,0 @@
-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/index.ts

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

package/src/constant/index.ts

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