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

package/dist/components/Nodes/task/TableNode.d.ts

@@ -0,0 +1,51 @@
+import { BaseNode, Group, Image, Rect, Text } from '@aloudata/ink-graph';
+import { INodeConfig } from '../types';
+import { Column } from './Column';
+export declare class TableNode extends BaseNode<INodeConfig> {
+    type: string;
+    headerGroup: Rect;
+    bgRect: Rect;
+    headerName: Text;
+    headerAssetPath: Text;
+    headerNodeType: Text;
+    tableRelatedGroup: Rect;
+    tableRelatedColumnsGroup: Group;
+    tableControlGroup: Rect;
+    columnCountText: Text;
+    toggleGroup: Group;
+    columnToggleText: Text;
+    columnToggleImage: Image;
+    tableContentGroup: Group;
+    colGroup: Rect;
+    paginationGroup: Group;
+    leftIcon: Image;
+    rightIcon: Image;
+    paginationPrevImage: Image;
+    paginationNextImage: Image;
+    children: Column[];
+    relatedColumns: Column[];
+    isHoverColumn: boolean;
+    get lineageMgr(): any;
+    render(config: INodeConfig): void;
+    renderHeader(): void;
+    renderRelatedContent(): void;
+    renderDirectionTag(): void;
+    renderDirectionBorder(): void;
+    renderControlBar(): void;
+    renderColumns(): void;
+    updateNodeHeight(): void;
+    calculatePaginationData(): void;
+    renderPagination(): void;
+    setActive(): void;
+    resetActive(): void;
+    setRelated(): void;
+    resetRelated(): void;
+    setHighLight(isSearch?: boolean): void;
+    resetHighLight(): void;
+    onHover(): void;
+    onLeave(): void;
+    initEvents(): void;
+    update(): void;
+    destroy(): void;
+}
+//# sourceMappingURL=TableNode.d.ts.map

package/dist/components/Nodes/task/TableNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableNode.d.ts","sourceRoot":"","sources":["../../../../src/components/Nodes/task/TableNode.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,QAAQ,EAER,KAAK,EACL,KAAK,EACL,IAAI,EACJ,IAAI,EACP,MAAM,qBAAqB,CAAC;AAyB7B,OAAO,EAAiB,WAAW,EAAE,MAAM,UAAU,CAAC;AAGtD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,qBACa,SAAU,SAAQ,QAAQ,CAAC,WAAW,CAAC;IAChD,IAAI,SAAM;IAEV,WAAW,EAAE,IAAI,CAAC;IAElB,MAAM,EAAE,IAAI,CAAC;IAEb,UAAU,EAAE,IAAI,CAAC;IAEjB,eAAe,EAAE,IAAI,CAAC;IAEtB,cAAc,EAAE,IAAI,CAAC;IAErB,iBAAiB,EAAE,IAAI,CAAC;IAExB,wBAAwB,EAAE,KAAK,CAAC;IAEhC,iBAAiB,EAAE,IAAI,CAAC;IAExB,eAAe,EAAE,IAAI,CAAC;IAEtB,WAAW,EAAE,KAAK,CAAC;IAEnB,gBAAgB,EAAE,IAAI,CAAC;IAEvB,iBAAiB,EAAE,KAAK,CAAC;IAEzB,iBAAiB,EAAE,KAAK,CAAC;IAEzB,QAAQ,EAAE,IAAI,CAAC;IAEf,eAAe,EAAE,KAAK,CAAC;IAEvB,QAAQ,EAAE,KAAK,CAAC;IAEhB,SAAS,EAAE,KAAK,CAAC;IAEjB,mBAAmB,EAAE,KAAK,CAAC;IAE3B,mBAAmB,EAAE,KAAK,CAAC;IAE3B,QAAQ,EAAE,MAAM,EAAE,CAAM;IAExB,cAAc,EAAE,MAAM,EAAE,CAAM;IAE9B,aAAa,EAAE,OAAO,CAAS;IAE/B,IAAI,UAAU,QAEb;IAED,MAAM,CAAC,MAAM,EAAE,WAAW;IA4B1B,YAAY;IAsHZ,oBAAoB;IAgDpB,kBAAkB;IAgElB,qBAAqB;IA2CrB,gBAAgB;IA2DhB,aAAa;IAqDb,gBAAgB;IAKhB,uBAAuB;IAYvB,gBAAgB;IAuGhB,SAAS;IAQT,WAAW;IASX,UAAU;IAaV,YAAY;IAaZ,YAAY,CAAC,QAAQ,UAAQ;IAY7B,cAAc;IAKd,OAAO;IASP,OAAO;IASP,UAAU;IA0DV,MAAM,IAAI,IAAI;IAYd,OAAO;CACV"}

package/dist/components/Nodes/task/TableNode.js

@@ -0,0 +1,642 @@
+import { __assign, __decorate, __extends, __read, __spreadArray } from "tslib";
+import { BaseNode, getTextDomWidth, Group, Image, Rect, Text, } from '@aloudata/ink-graph';
+import { getDataSourceTypeIcon } from '@/components/DataSourceTypeIcon/getDataSourceTypeIcon';
+import { RECT_LINE_WIDTH } from '@/components/TaskLineageView/constants';
+import { EDirection } from '@/typings';
+import { COL_HEIGHT } from '../ constants/column';
+import { PAGINATION_IMAGE_SIZE, TABLE_CONTROL_BAR_HEIGHT, TABLE_HEADER_HEIGHT, TABLE_RECT_BORDER_RADIUS, TABLE_TAG_HEIGHT, TABLE_WIDTH, } from '../ constants/table';
+import tableShowLess from '../assets/showLess.svg';
+import tableShowMore from '../assets/showMore.svg';
+import tablePaginationNext from '../assets/tablePaginationNext.svg';
+import tablePaginationNextClick from '../assets/tablePaginationNextClick.svg';
+import tablePaginationNextHover from '../assets/tablePaginationNextHover.svg';
+import tablePaginationPrev from '../assets/tablePaginationPrev.svg';
+import tablePaginationPrevClick from '../assets/tablePaginationPrevClick.svg';
+import tablePaginationPrevHover from '../assets/tablePaginationPrevHover.svg';
+import { TableNodeEvents } from '../events/TableNodeEvents';
+import { EEntityType } from '../types/table';
+import { getEntityTypeIcon } from '../utils/table';
+import { Column } from './Column';
+var TableNode = /** @class */ (function (_super) {
+    __extends(TableNode, _super);
+    function TableNode() {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        _this.type = '';
+        _this.children = [];
+        _this.relatedColumns = [];
+        _this.isHoverColumn = false;
+        return _this;
+    }
+    Object.defineProperty(TableNode.prototype, "lineageMgr", {
+        get: function () {
+            return this.graph.lineageManager;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    TableNode.prototype.render = function (config) {
+        var isOpen = config.isOpen, isStartNode = config.isStartNode, visible = config.visible;
+        if (visible === false)
+            return;
+        if (isStartNode) {
+            // render start node tag
+            this.renderDirectionTag();
+            // this.renderDirectionBorder();
+        }
+        this.renderHeader();
+        this.renderRelatedContent();
+        this.renderControlBar();
+        if (isOpen) {
+            this.renderColumns();
+            this.calculatePaginationData();
+            this.renderPagination();
+        }
+        this.updateNodeHeight();
+        // init events
+        this.initEvents();
+    };
+    TableNode.prototype.renderHeader = function () {
+        var _a = this.config, data = _a.data, isStartNode = _a.isStartNode;
+        var name = data.name, assetPath = data.assetPath, datasourceType = data.datasourceType, typeCode = data.typeCode;
+        // table header 的group
+        this.headerGroup = new Rect({
+            name: 'table-header-group',
+            style: {
+                x: -1,
+                y: 1,
+                width: TABLE_WIDTH + 2,
+                height: TABLE_HEADER_HEIGHT,
+                stroke: this.config.style.stroke || '#B1B1B1',
+                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.node = this;
+        this.bgRect = new Rect({
+            style: {
+                x: 1,
+                y: 1,
+                fill: this.config.style.fill || '#FFFFFF',
+                width: TABLE_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: 172,
+                maxLines: 2,
+                textOverflow: 'ellipsis',
+                fill: '#171717',
+            },
+        });
+        var entityTypeIcon = new Image({
+            style: {
+                x: 12,
+                y: 12,
+                width: 20,
+                height: 20,
+                img: getEntityTypeIcon(typeCode, data.type),
+                cursor: 'pointer',
+            },
+        });
+        var sourceTypeIcon = new Image({
+            style: {
+                x: 12,
+                y: 36,
+                width: 16,
+                height: 16,
+                img: getDataSourceTypeIcon(datasourceType),
+                cursor: 'pointer',
+            },
+        });
+        this.headerAssetPath = new Text({
+            style: {
+                x: 36,
+                y: 40,
+                lineHeight: 16,
+                textOverflow: 'ellipsis',
+                text: assetPath,
+                fontSize: 12,
+                fontWeight: 400,
+                fontFamily: 'PingFang SC',
+                textBaseline: 'top',
+                wordWrap: true,
+                wordWrapWidth: 172,
+                maxLines: 1,
+                textAlign: 'start',
+                fill: '#858585',
+            },
+        });
+        // 用于hover到sideIcon区域时也能显示sideIcon
+        var bgHideRect = new Rect({
+            name: 'column-bgRect-hide',
+            style: {
+                x: -20,
+                fill: '#0000',
+                stroke: '#0000',
+                width: TABLE_WIDTH + 40,
+                height: TABLE_HEADER_HEIGHT,
+                zIndex: 9,
+            },
+        });
+        this.headerGroup.appendChild(bgHideRect);
+        this.headerGroup.appendChild(this.bgRect);
+        this.headerGroup.appendChild(this.headerName);
+        this.headerGroup.appendChild(entityTypeIcon);
+        this.headerGroup.appendChild(sourceTypeIcon);
+        this.headerGroup.appendChild(this.headerAssetPath);
+        this.container.appendChild(this.headerGroup);
+    };
+    TableNode.prototype.renderRelatedContent = function () {
+        var _this = this;
+        var _a = this.config, relatedColumns = _a.relatedColumns, isActive = _a.isActive, isRelated = _a.isRelated;
+        var visibleColumns = relatedColumns.filter(function (col) { return col.visible; });
+        // table related group
+        this.tableRelatedGroup = new Rect({
+            style: {
+                y: TABLE_HEADER_HEIGHT,
+                width: TABLE_WIDTH,
+                height: visibleColumns.length > 0
+                    ? visibleColumns.length * COL_HEIGHT + 16
+                    : 0,
+                // fill: isActive || isRelated ? style.fill : '#F4F4F4',
+                fill: isActive || isRelated ? '#fff' : '#F4F4F4',
+                zIndex: 2,
+            },
+        });
+        this.tableRelatedColumnsGroup = new Group({
+            style: {
+                y: 8,
+            },
+        });
+        visibleColumns
+            .sort(function (i, j) {
+            return i.data.position - j.data.position;
+        })
+            .forEach(function (colConfig, i) {
+            var col = new Column(_this.graph, colConfig, _this, i);
+            // add or replace column DOM
+            var colIndex = _this.relatedColumns.findIndex(function (c) { return c.id === col.id; });
+            if (colIndex === -1) {
+                _this.relatedColumns.push(col);
+            }
+            else {
+                _this.relatedColumns[colIndex] = col;
+            }
+            _this.tableRelatedColumnsGroup.appendChild(col.container);
+        });
+        this.tableRelatedGroup.appendChild(this.tableRelatedColumnsGroup);
+        this.container.appendChild(this.tableRelatedGroup);
+    };
+    TableNode.prototype.renderDirectionTag = function () {
+        var directionWord = '';
+        var tagBgColor = '#fff';
+        var textColor = '#171717';
+        var _a = this.config.data, type = _a.type, direction = _a.direction;
+        if (type === EEntityType.TEMP_TABLE)
+            return;
+        switch (direction) {
+            case EDirection.INPUT:
+                directionWord = '输入资产';
+                tagBgColor = '#E4F1F9';
+                textColor = '#228CCE';
+                break;
+            case EDirection.OUTPUT:
+                directionWord = '输出资产';
+                tagBgColor = '#D1FAE5';
+                textColor = '#059669';
+                break;
+            case EDirection.BOTH:
+                directionWord = '输入/输出资产';
+                tagBgColor = '#FFEDD5';
+                textColor = '#EA580C';
+                break;
+        }
+        if (!directionWord)
+            return;
+        var tagGroup = new Group({
+            name: 'tag',
+        });
+        var tagRect = new Rect({
+            style: {
+                x: -1,
+                y: -TABLE_TAG_HEIGHT,
+                width: TABLE_WIDTH + 2,
+                height: TABLE_TAG_HEIGHT,
+                stroke: tagBgColor,
+                fill: tagBgColor,
+                lineWidth: 1,
+                // radius: [4, 4, 0, 0],
+            },
+        });
+        var tagText = new Text({
+            style: {
+                x: 8,
+                y: -17,
+                lineHeight: 16,
+                text: directionWord,
+                fontSize: 12,
+                fontWeight: 400,
+                fontFamily: 'PingFang SC',
+                textBaseline: 'top',
+                fill: textColor,
+            },
+        });
+        tagGroup.appendChild(tagRect);
+        tagGroup.appendChild(tagText);
+        this.container.appendChild(tagGroup);
+    };
+    TableNode.prototype.renderDirectionBorder = function () {
+        var direction = this.config.data.direction;
+        var tagGroup = new Group({
+            name: 'tag',
+        });
+        var inputTagRect = new Rect({
+            style: {
+                x: -1,
+                y: -3,
+                width: direction === EDirection.BOTH
+                    ? (TABLE_WIDTH + 2) / 2
+                    : TABLE_WIDTH + 2,
+                height: 3,
+                fill: '#EFA912',
+                lineWidth: 1,
+            },
+        });
+        var outputTagRect = new Rect({
+            style: {
+                x: direction === EDirection.BOTH ? -1 + (TABLE_WIDTH + 2) / 2 : -1,
+                y: -3,
+                width: direction === EDirection.BOTH
+                    ? (TABLE_WIDTH + 2) / 2
+                    : TABLE_WIDTH + 2,
+                height: 3,
+                fill: '#22C55E',
+                lineWidth: 1,
+            },
+        });
+        if (direction === EDirection.INPUT)
+            tagGroup.appendChild(inputTagRect);
+        else if (direction === EDirection.OUTPUT) {
+            tagGroup.appendChild(outputTagRect);
+        }
+        else if (direction === EDirection.BOTH) {
+            tagGroup.appendChild(inputTagRect);
+            tagGroup.appendChild(outputTagRect);
+        }
+        this.container.appendChild(tagGroup);
+    };
+    TableNode.prototype.renderControlBar = function () {
+        var _a, _b;
+        var _c = this.config, data = _c.data, isOpen = _c.isOpen, isActive = _c.isActive, isRelated = _c.isRelated;
+        var _d = data.columnCount, columnCount = _d === void 0 ? 0 : _d;
+        // column count
+        var columnCountStr = "".concat(columnCount);
+        var tableRelatedGroupHeight = (_b = (_a = this.tableRelatedGroup) === null || _a === void 0 ? void 0 : _a.getBBox()) === null || _b === void 0 ? void 0 : _b.height;
+        var relatedColsHeight = tableRelatedGroupHeight;
+        // table content group
+        this.tableControlGroup = new Rect({
+            name: 'table-control-group',
+            style: {
+                x: 0,
+                y: TABLE_HEADER_HEIGHT + relatedColsHeight,
+                zIndex: 1,
+                width: TABLE_WIDTH,
+                height: 32,
+                // fill: isActive || isRelated ? style.fill : '#F4F4F4',
+                fill: isActive || isRelated ? '#fff' : '#F4F4F4',
+                // fill: '#F4F4F4',
+                radius: isOpen
+                    ? [0]
+                    : [0, 0, TABLE_RECT_BORDER_RADIUS, TABLE_RECT_BORDER_RADIUS],
+            },
+        });
+        this.tableControlGroup.node = this;
+        this.columnCountText = new Text({
+            style: {
+                x: 12,
+                y: 20,
+                text: "\u5168\u90E8 ".concat(columnCountStr, " \u5217"),
+                fill: '#575757',
+                fontSize: 12,
+                fontWeight: 400,
+                fontFamily: 'PingFang SC',
+            },
+        });
+        this.columnToggleImage = new Image({
+            name: 'table-control-toggle-group',
+            style: {
+                x: 165,
+                y: 8,
+                width: 44,
+                height: 16,
+                img: isOpen ? tableShowLess : tableShowMore,
+                zIndex: 1,
+                cursor: 'pointer',
+            },
+        });
+        this.tableControlGroup.appendChild(this.columnCountText);
+        this.tableControlGroup.appendChild(this.columnToggleImage);
+        this.container.appendChild(this.tableControlGroup);
+    };
+    TableNode.prototype.renderColumns = function () {
+        var _this = this;
+        var _a, _b;
+        var _c = this.config, children = _c.children, pagination = _c.pagination, isActive = _c.isActive, isRelated = _c.isRelated;
+        var tableRelatedGroupHeight = (_b = (_a = this.tableRelatedGroup) === null || _a === void 0 ? void 0 : _a.getBBox()) === null || _b === void 0 ? void 0 : _b.height;
+        var relatedColsHeight = tableRelatedGroupHeight;
+        // table content group
+        this.tableContentGroup = new Group({
+            style: {
+                y: TABLE_HEADER_HEIGHT + relatedColsHeight + TABLE_CONTROL_BAR_HEIGHT,
+                zIndex: 3,
+            },
+        });
+        var sortVisibleColumns = children.sort(function (i, j) {
+            return i.data.position - j.data.position;
+        });
+        var pageNum = pagination.pageNum, pageSize = pagination.pageSize;
+        var renderVisibleColumns = sortVisibleColumns.slice((pageNum - 1) * pageSize, pageNum * pageSize);
+        // table columns group
+        this.colGroup = new Rect({
+            style: {
+                width: TABLE_WIDTH,
+                height: renderVisibleColumns.length * COL_HEIGHT,
+                // fill: isActive || isRelated ? style.fill : '#F4F4F4',
+                fill: isActive || isRelated ? '#fff' : '#F4F4F4',
+                zIndex: 2,
+            },
+        });
+        renderVisibleColumns.forEach(function (colConfig, i) {
+            var col = new Column(_this.graph, colConfig, _this, i);
+            // add or replace column DOM
+            var colIndex = _this.children.findIndex(function (c) { return 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);
+    };
+    TableNode.prototype.updateNodeHeight = function () {
+        var tagHeight = this.config.isStartNode ? TABLE_TAG_HEIGHT : -1;
+        this.headerGroup.style.height = this.container.getBBox().height - tagHeight;
+    };
+    TableNode.prototype.calculatePaginationData = function () {
+        var _a = this.config, data = _a.data, pagination = _a.pagination;
+        var _b = data.columnCount, columnCount = _b === void 0 ? 0 : _b;
+        var totalPage = Math.ceil(columnCount / pagination.pageSize);
+        this.config.pagination = __assign(__assign({}, pagination), { totalPage: totalPage, total: columnCount });
+    };
+    TableNode.prototype.renderPagination = function () {
+        var _a = this.config, isActive = _a.isActive, pagination = _a.pagination, isRelated = _a.isRelated;
+        var totalPage = pagination.totalPage, pageNum = pagination.pageNum;
+        var colGroupHeight = this.colGroup.getBBox().height;
+        // pagination content group
+        this.paginationGroup = new Group({
+            name: 'pagination-wrapper',
+            style: {
+                y: colGroupHeight,
+                zIndex: -1,
+            },
+        });
+        this.paginationGroup.node = this;
+        var paginationBgRect = new Rect({
+            name: 'pagination-bgRect',
+            style: {
+                // fill: isActive || isRelated ? style.fill : '#F4F4F4',
+                fill: isActive || isRelated ? '#fff' : '#F4F4F4',
+                // stroke: '#E8E8E8',
+                width: TABLE_WIDTH,
+                radius: [0, 0, 4, 4],
+                height: 32,
+                zIndex: 2,
+            },
+        });
+        paginationBgRect.node = this;
+        var paginationTotalPage = new Text({
+            name: 'pagination-totalPage-text',
+            style: {
+                x: 12,
+                y: 20,
+                text: "\u5171 ".concat(totalPage, " \u9875"),
+                fill: '#575757',
+                fontSize: 12,
+                fontWeight: 400,
+                fontFamily: 'PingFang SC',
+                zIndex: 2,
+            },
+        });
+        this.paginationPrevImage = new Image({
+            name: 'pagination-prev-image',
+            style: {
+                x: 144,
+                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,
+            },
+        });
+        var textWidth = getTextDomWidth("".concat(pageNum), 12, 'Tahoma');
+        var paginationPageNum = new Text({
+            style: {
+                x: 168 + (16 - textWidth) / 2,
+                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: 188,
+                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.paginationGroup.appendChild(paginationBgRect);
+        this.paginationGroup.appendChild(paginationTotalPage);
+        this.paginationGroup.appendChild(this.paginationPrevImage);
+        this.paginationGroup.appendChild(paginationPageNum);
+        this.paginationGroup.appendChild(this.paginationNextImage);
+        this.tableContentGroup.appendChild(this.paginationGroup);
+    };
+    TableNode.prototype.setActive = function () {
+        if (!this.config)
+            return;
+        this.config.isActive = true;
+        this.config.style.stroke = '#3271C9';
+        this.config.style.fill = '#A9CFFB';
+        this.config.style.zIndex = 3;
+    };
+    TableNode.prototype.resetActive = function () {
+        if (!this.config)
+            return;
+        this.config.isActive = false;
+        this.config.style.stroke = '#B1B1B1';
+        this.config.style.fill = '#fff';
+        this.config.style.zIndex = 2;
+    };
+    TableNode.prototype.setRelated = function () {
+        if (!this.config)
+            return;
+        this.config.isRelated = true;
+        this.config.style.stroke = '#3271C9';
+        if (!this.config.isActive) {
+            this.config.style.fill = '#E4EFFF';
+        }
+        this.config.style.zIndex = 3;
+    };
+    TableNode.prototype.resetRelated = function () {
+        if (!this.config)
+            return;
+        this.config.isRelated = false;
+        this.config.style.stroke = '#B1B1B1';
+        if (!this.config.isActive) {
+            this.config.style.fill = '#fff';
+        }
+        this.config.style.zIndex = 1;
+    };
+    TableNode.prototype.setHighLight = function (isSearch) {
+        var _a, _b;
+        if (isSearch === void 0) { isSearch = false; }
+        if (isSearch) {
+            (_a = this.bgRect) === null || _a === void 0 ? void 0 : _a.setAttribute('stroke', '#FFC04D');
+            (_b = this.bgRect) === null || _b === void 0 ? void 0 : _b.setAttribute('fill', '#FFD180');
+        }
+        else if (this.lineageMgr.currentClickId.includes(this.id)) {
+            this.config.style.stroke = '#FFC04D';
+            this.config.style.fill = '#FFD180';
+        }
+        else {
+            return this.config.isActive ? this.setActive() : this.setRelated();
+        }
+    };
+    TableNode.prototype.resetHighLight = function () {
+        var _a, _b;
+        (_a = this.bgRect) === null || _a === void 0 ? void 0 : _a.setAttribute('stroke', '#E8E8E8');
+        (_b = this.bgRect) === null || _b === void 0 ? void 0 : _b.setAttribute('fill', '#FFF');
+    };
+    TableNode.prototype.onHover = function () {
+        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);
+    };
+    TableNode.prototype.onLeave = function () {
+        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);
+    };
+    TableNode.prototype.initEvents = function () {
+        var _this = this;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        this.container.addEventListener('mouseenter', function () {
+            _this.onHover();
+        });
+        this.container.addEventListener('mouseleave', function () {
+            _this.onLeave();
+        });
+        (_a = this.paginationPrevImage) === null || _a === void 0 ? void 0 : _a.addEventListener('mousedown', function () {
+            if (_this.config.pagination.pageNum > 1) {
+                _this.paginationPrevImage.setAttribute('img', tablePaginationPrevClick);
+            }
+        });
+        (_b = this.paginationPrevImage) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseup', function () {
+            if (_this.config.pagination.pageNum > 1) {
+                _this.paginationPrevImage.setAttribute('img', tablePaginationPrev);
+            }
+        });
+        (_c = this.paginationPrevImage) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseenter', function () {
+            if (_this.config.pagination.pageNum > 1) {
+                _this.paginationPrevImage.setAttribute('img', tablePaginationPrevHover);
+            }
+        });
+        (_d = this.paginationPrevImage) === null || _d === void 0 ? void 0 : _d.addEventListener('mouseleave', function () {
+            if (_this.config.pagination.pageNum > 1) {
+                _this.paginationPrevImage.setAttribute('img', tablePaginationPrev);
+            }
+        });
+        (_e = this.paginationNextImage) === null || _e === void 0 ? void 0 : _e.addEventListener('mousedown', function () {
+            if (_this.config.pagination.pageNum < _this.config.pagination.totalPage) {
+                _this.paginationNextImage.setAttribute('img', tablePaginationNextClick);
+            }
+        });
+        (_f = this.paginationNextImage) === null || _f === void 0 ? void 0 : _f.addEventListener('mouseup', function () {
+            if (_this.config.pagination.pageNum < _this.config.pagination.totalPage) {
+                _this.paginationNextImage.setAttribute('img', tablePaginationNext);
+            }
+        });
+        (_g = this.paginationNextImage) === null || _g === void 0 ? void 0 : _g.addEventListener('mouseenter', function () {
+            if (_this.config.pagination.pageNum < _this.config.pagination.totalPage) {
+                _this.paginationNextImage.setAttribute('img', tablePaginationNextHover);
+            }
+        });
+        (_h = this.paginationNextImage) === null || _h === void 0 ? void 0 : _h.addEventListener('mouseleave', function () {
+            if (_this.config.pagination.pageNum < _this.config.pagination.totalPage) {
+                _this.paginationNextImage.setAttribute('img', tablePaginationNext);
+            }
+        });
+    };
+    TableNode.prototype.update = function () {
+        var parentNode = this.container.parentNode;
+        this.container.removeChildren();
+        parentNode === null || parentNode === void 0 ? void 0 : parentNode.removeChild(this.container);
+        this.render(this.config);
+        parentNode === null || parentNode === void 0 ? void 0 : parentNode.appendChild(this.container);
+        // update position
+        this.container.setPosition(this.config.position.x, this.config.position.y);
+    };
+    TableNode.prototype.destroy = function () { };
+    TableNode = __decorate([
+        TableNodeEvents
+    ], TableNode);
+    return TableNode;
+}(BaseNode));
+export { TableNode };
+//# sourceMappingURL=TableNode.js.map