@aloudata/ink-lineage 0.0.1-beta.8 → 0.0.2-beta.3

package/dist/components/Nodes/DefaultNode.js

@@ -11,8 +11,8 @@ var DefaultNode = /** @class */ (function (_super) {
         _this.isHoverColumn = false;
         _this.hideSideIcon = function () {
             var _a, _b;
-            (_a = _this.leftIcon) === null || _a === void 0 ? void 0 : _a.setAttribute('visibility', 'hidden');
-            (_b = _this.rightIcon) === null || _b === void 0 ? void 0 : _b.setAttribute('visibility', 'hidden');
+            (_a = _this.leftIcon) === null || _a === void 0 ? void 0 : _a.updateStyle({ visible: false });
+            (_b = _this.rightIcon) === null || _b === void 0 ? void 0 : _b.updateStyle({ visible: false });
         };
         return _this;
     }
@@ -58,7 +58,7 @@ var DefaultNode = /** @class */ (function (_super) {
                 height: SIDE_ICON_SIZE,
                 cursor: 'pointer',
                 zIndex: 99,
-                visibility: 'visible',
+                visible: true,
             },
         });
         this.rightIcon = new Image({
@@ -70,7 +70,7 @@ var DefaultNode = /** @class */ (function (_super) {
                 height: SIDE_ICON_SIZE,
                 cursor: 'pointer',
                 zIndex: 99,
-                visibility: 'visible',
+                visible: true,
             },
         });
         // 用于hover到sideIcon区域时也能显示sideIcon
@@ -85,12 +85,12 @@ var DefaultNode = /** @class */ (function (_super) {
                 zIndex: 9,
             },
         });
-        this.leftIcon.addEventListener('click', function (e) {
+        this.leftIcon.on('click', function (e) {
             e.preventDefault();
             e.stopPropagation();
             _this.lineageManager.emit(_this.eventType.LEFT_ICON_CLICK, _this);
         });
-        this.rightIcon.addEventListener('click', function (e) {
+        this.rightIcon.on('click', function (e) {
             e.preventDefault();
             e.stopPropagation();
             _this.lineageManager.emit(_this.eventType.RIGHT_ICON_CLICK, _this);
@@ -98,16 +98,16 @@ var DefaultNode = /** @class */ (function (_super) {
     };
     DefaultNode.prototype.initEvents = function () {
         var _this = this;
-        this.container.addEventListener('mouseenter', function () {
+        this.container.on('mouseenter', function () {
             _this.containerMouseEnter();
         });
-        this.container.addEventListener('mouseleave', function () {
+        this.container.on('mouseleave', function () {
             _this.containerMouseLeave();
         });
-        this.headerGroup.addEventListener('click', function () {
+        this.headerGroup.on('click', function () {
             _this.headerClick();
         });
-        this.headerGroup.addEventListener('contextmenu', function (e) {
+        this.headerGroup.on('contextmenu', function (e) {
             e.preventDefault();
             _this.contextmenuClick();
         });
@@ -125,35 +125,43 @@ var DefaultNode = /** @class */ (function (_super) {
         this.onLeave();
     };
     DefaultNode.prototype.onHover = function () {
+        var _a;
         if (!this.config)
             return;
         if (this.config.style.stroke === '#3271C9')
             return;
         if (this.isHoverColumn)
             return;
-        this.bgRect.setAttribute('stroke', '#3271C9');
-        this.container.setAttribute('zIndex', 3);
+        (_a = this.bgRect) === null || _a === void 0 ? void 0 : _a.updateStyle({ stroke: '#3271C9' });
+        this.container.updateStyle({ zIndex: 3 });
     };
     DefaultNode.prototype.onLeave = function () {
+        var _a;
         if (!this.config)
             return;
         if (this.config.style.stroke === '#3271C9')
             return;
-        this.bgRect.setAttribute('stroke', this.elementType === EElementType.COLUMN ? '#DBDBDB' : '#B1B1B1');
-        this.container.setAttribute('zIndex', 2);
+        (_a = this.bgRect) === null || _a === void 0 ? void 0 : _a.updateStyle({
+            stroke: this.elementType === EElementType.COLUMN ? '#DBDBDB' : '#B1B1B1',
+        });
+        this.container.updateStyle({ zIndex: 2 });
     };
     DefaultNode.prototype.showLeftIcon = function (type) {
         if (!this.leftIcon)
             return;
-        this.leftIcon.style.img = EXPAND_BUTTON_TYPE[type];
-        this.leftIcon.setAttribute('visibility', 'visible');
+        this.leftIcon.updateStyle({
+            img: EXPAND_BUTTON_TYPE[type],
+            visible: true,
+        });
         this.leftIcon.iconType = type;
     };
     DefaultNode.prototype.showRightIcon = function (type) {
         if (!this.rightIcon)
             return;
-        this.rightIcon.style.img = EXPAND_BUTTON_TYPE[type];
-        this.rightIcon.setAttribute('visibility', 'visible');
+        this.rightIcon.updateStyle({
+            img: EXPAND_BUTTON_TYPE[type],
+            visible: true,
+        });
         this.rightIcon.iconType = type;
     };
     return DefaultNode;

package/dist/components/Nodes/DefaultNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultNode.js","sourceRoot":"","sources":["../../../src/components/Nodes/DefaultNode.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"DefaultNode.js","sourceRoot":"","sources":["../../../src/components/Nodes/DefaultNode.ts"],"names":[],"mappings":"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"}

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

@@ -1,12 +1,12 @@
-import { Group, Rect } from '@aloudata/ink-graph-new';
+import { Group } from '@aloudata/ink-graph-new';
 import { ColumnNode } from './ColumnNode';
 import { AssetNode } from './AssetNode';
 import { EElementType, ETableEvents, IColResBase, INodeConfig, ITableResBase } from '../../types';
 export declare class TableNode extends AssetNode {
     config: INodeConfig<ITableResBase<IColResBase>, IColResBase>;
-    tableRelatedGroup: Rect;
+    tableRelatedGroup: Group;
     tableContentGroup: Group;
-    colGroup: Rect;
+    colGroup: Group;
     children: ColumnNode[];
     relatedColumns: ColumnNode[];
     get elementType(): EElementType;

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

@@ -1 +1 @@
-{"version":3,"file":"TableNode.d.ts","sourceRoot":"","sources":["../../../src/components/Nodes/TableNode.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,IAAI,EAKL,MAAM,yBAAyB,CAAC;AAqBjC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,WAAW,EAEX,WAAW,EACX,aAAa,EACd,MAAM,aAAa,CAAC;AAKrB,qBAAa,SAAU,SAAQ,SAAS;IAC9B,MAAM,EAAE,WAAW,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC,CAAC;IAErE,iBAAiB,EAAE,IAAI,CAAC;IAExB,iBAAiB,EAAE,KAAK,CAAC;IAEzB,QAAQ,EAAE,IAAI,CAAC;IAEf,QAAQ,EAAE,UAAU,EAAE,CAAM;IAE5B,cAAc,EAAE,UAAU,EAAE,CAAM;IAElC,IAAI,WAAW,IAAI,YAAY,CAE9B;IAED,IAAI,SAAS,IAAI,OAAO,YAAY,CAEnC;IAED,MAAM;IAwBN,iBAAiB;IA6DjB,oBAAoB;IAkDpB,gBAAgB;IA2DhB,aAAa;IAqDb,gBAAgB;IAqJhB,uBAAuB;IAYvB,gBAAgB;IAIhB,gBAAgB;CAGjB"}
+{"version":3,"file":"TableNode.d.ts","sourceRoot":"","sources":["../../../src/components/Nodes/TableNode.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EAQN,MAAM,yBAAyB,CAAC;AAYjC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,WAAW,EAEX,WAAW,EACX,aAAa,EACd,MAAM,aAAa,CAAC;AAGrB,qBAAa,SAAU,SAAQ,SAAS;IAC9B,MAAM,EAAE,WAAW,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC,CAAC;IAErE,iBAAiB,EAAE,KAAK,CAAC;IAEzB,iBAAiB,EAAE,KAAK,CAAC;IAEzB,QAAQ,EAAE,KAAK,CAAC;IAEhB,QAAQ,EAAE,UAAU,EAAE,CAAM;IAE5B,cAAc,EAAE,UAAU,EAAE,CAAM;IAElC,IAAI,WAAW,IAAI,YAAY,CAE9B;IAED,IAAI,SAAS,IAAI,OAAO,YAAY,CAEnC;IAED,MAAM;IAwBN,iBAAiB;IA0DjB,oBAAoB;IA8DpB,gBAAgB;IAqFhB,aAAa;IAyEb,gBAAgB;IAgMhB,uBAAuB;IAYvB,gBAAgB;IAIhB,gBAAgB;CAGjB"}

package/dist/components/Nodes/TableNode.js

@@ -1,11 +1,11 @@
 import { __assign, __extends, __read, __spreadArray } from "tslib";
-import { Group, Rect, Text, Image, getTextDomWidth, } from '@aloudata/ink-graph-new';
+import { Group, Rect, Text, Image, getTextDomWidth, Path, Transform, } 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 { tablePaginationNext, tablePaginationPrev } from '../../assets';
 import { ColumnNode } from './ColumnNode';
 import { AssetNode } from './AssetNode';
 import { EElementType, ETableEvents, } from '../../types';
-import { getDataSourceTypeIcon, } from '../../utils';
+import { getDataSourceTypeIcon } from '../../utils';
 var TableNode = /** @class */ (function (_super) {
     __extends(TableNode, _super);
     function TableNode() {
@@ -52,16 +52,14 @@ var TableNode = /** @class */ (function (_super) {
         var headerDesc = new Text({
             style: {
                 x: 36,
-                y: 47,
+                y: 42,
                 lineHeight: 16,
                 textOverflow: 'ellipsis',
                 text: ((_a = this.config) === null || _a === void 0 ? void 0 : _a.data.displayName) || ((_b = this.config) === null || _b === void 0 ? void 0 : _b.data.description) || '-',
                 fontSize: 12,
                 fontWeight: 400,
                 fontFamily: 'PingFang SC',
-                textBaseline: 'top',
-                wordWrap: true,
-                wordWrapWidth: TABLE_HEADER_DESC_WRAP_WIDTH,
+                maxWidth: TABLE_HEADER_DESC_WRAP_WIDTH,
                 maxLines: 1,
                 textAlign: 'start',
                 fill: '#111827',
@@ -81,7 +79,7 @@ var TableNode = /** @class */ (function (_super) {
         var headerAssetPath = new Text({
             style: {
                 x: 36,
-                y: 70,
+                y: 65,
                 zIndex: 99,
                 lineHeight: 16,
                 textOverflow: 'ellipsis',
@@ -89,35 +87,39 @@ var TableNode = /** @class */ (function (_super) {
                 fontSize: 12,
                 fontWeight: 400,
                 fontFamily: 'PingFang SC',
-                textBaseline: 'top',
-                wordWrap: true,
-                wordWrapWidth: TABLE_HEADER_DESC_WRAP_WIDTH,
+                maxWidth: TABLE_HEADER_DESC_WRAP_WIDTH,
                 maxLines: 1,
                 textAlign: 'start',
                 fill: '#858585',
             },
         });
-        this.headerGroup.appendChild(headerDesc);
-        this.headerGroup.appendChild(sourceTypeIcon);
-        this.headerGroup.appendChild(headerAssetPath);
+        this.headerGroup.addChild(headerDesc);
+        this.headerGroup.addChild(sourceTypeIcon);
+        this.headerGroup.addChild(headerAssetPath);
     };
+    // TODO: 渲染效果check
     TableNode.prototype.renderRelatedContent = function () {
         var _this = this;
         var relatedColumns = this.config.relatedColumns;
         var visibleColumns = relatedColumns.filter(function (col) { return col.visible; });
         // table related group
-        this.tableRelatedGroup = new Rect({
+        this.tableRelatedGroup = new Group({
+            name: 'table-related-group',
+            x: 1,
+            y: TABLE_HEADER_HEIGHT,
+            style: {
+                zIndex: 2,
+            },
+        });
+        this.tableRelatedGroup.addChild(new Rect({
             style: {
-                x: 1,
-                y: TABLE_HEADER_HEIGHT,
                 width: NODE_WIDTH,
                 height: visibleColumns.length > 0
                     ? visibleColumns.length * COL_HEIGHT + 16
                     : 0,
                 fill: '#F4F4F4',
-                zIndex: 2,
             },
-        });
+        }));
         var tableRelatedColumnsGroup = new Group({
             style: {
                 y: 8,
@@ -137,10 +139,10 @@ var TableNode = /** @class */ (function (_super) {
             else {
                 _this.relatedColumns[colIndex] = col;
             }
-            tableRelatedColumnsGroup.appendChild(col.container);
+            tableRelatedColumnsGroup.addChild(col.container);
         });
-        this.tableRelatedGroup.appendChild(tableRelatedColumnsGroup);
-        this.bgRect.appendChild(this.tableRelatedGroup);
+        this.tableRelatedGroup.addChild(tableRelatedColumnsGroup);
+        this.bgGroup.addChild(this.tableRelatedGroup);
     };
     TableNode.prototype.renderControlBar = function () {
         var _this = this;
@@ -152,24 +154,33 @@ var TableNode = /** @class */ (function (_super) {
         var columnCountStr = '' + columnCount;
         var relatedColsHeight = (_b = (_a = this.tableRelatedGroup) === null || _a === void 0 ? void 0 : _a.getBBox()) === null || _b === void 0 ? void 0 : _b.height;
         // table content group
-        var tableControlGroup = new Rect({
-            name: 'table-control-group',
+        var tableControlGroup = new Group({
+            x: 1,
+            y: TABLE_HEADER_HEIGHT + relatedColsHeight,
             style: {
-                x: 1,
-                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],
             },
+            children: [
+                new Rect({
+                    name: 'table-control-group',
+                    style: {
+                        x: 0,
+                        y: 0,
+                        width: NODE_WIDTH,
+                        height: 32,
+                        fill: '#F4F4F4',
+                        radius: isOpen
+                            ? [0]
+                            : [0, 0, TABLE_RECT_BORDER_RADIUS, TABLE_RECT_BORDER_RADIUS],
+                    },
+                }),
+            ],
         });
         var columnCountText = new Text({
             style: {
                 x: 12,
-                y: 22,
+                y: 8,
+                lineHeight: 16,
                 text: "\u5168\u90E8 ".concat(columnCountStr, " \u5217"),
                 fill: '#575757',
                 fontSize: 12,
@@ -177,24 +188,41 @@ var TableNode = /** @class */ (function (_super) {
                 fontFamily: 'PingFang SC',
             },
         });
-        var columnToggleImage = new Image({
-            name: 'table-control-toggle-group',
+        var columnToggle = new Group({
+            x: TABLE_OPERATE_ICON_X,
+            y: 8,
             style: {
-                x: TABLE_OPERATE_ICON_X,
-                y: 10,
-                width: 44,
-                height: 16,
-                img: isOpen ? tableShowLess : tableShowMore,
-                zIndex: 1,
                 cursor: 'pointer',
+                zIndex: 1,
             },
+            children: [
+                new Text({
+                    style: {
+                        text: isOpen ? '收起' : '展开',
+                        lineHeight: 16,
+                        fontSize: 12,
+                        fill: '#3769AD',
+                    },
+                }),
+                new Path({
+                    style: {
+                        d: isOpen
+                            ? 'M36 5.33331C36.0935 5.33331 36.1826 5.37253 36.2457 5.4414L39.9124 9.4414L39.421 9.89189L36 6.15994L32.5791 9.89189L32.0876 9.4414L35.7543 5.4414C35.8175 5.37253 35.9066 5.33331 36 5.33331Z'
+                            : 'M35.9999 10.6666C36.0933 10.6666 36.1825 10.6273 36.2456 10.5585L39.9123 6.55847L39.4209 6.10799L35.9999 9.83993L32.579 6.10799L32.0875 6.55847L35.7542 10.5585C35.8173 10.6273 35.9065 10.6666 35.9999 10.6666Z',
+                        fill: '#3769AD',
+                        // TODO: 调整文字对齐后重新check
+                        transform: Transform.translate(0, 2),
+                    },
+                }),
+            ],
         });
-        columnToggleImage.addEventListener('click', function () {
+        columnToggle.on('click', function () {
             lineageManager.emit(ETableEvents.CONTROL_TOGGLE_GROUP, _this);
         });
-        tableControlGroup.appendChild(columnCountText);
-        tableControlGroup.appendChild(columnToggleImage);
-        this.bgRect.appendChild(tableControlGroup);
+        tableControlGroup.addChild(columnCountText);
+        // tableControlGroup.addChild(columnToggleImage);
+        tableControlGroup.addChild(columnToggle);
+        this.bgGroup.addChild(tableControlGroup);
     };
     TableNode.prototype.renderColumns = function () {
         var _this = this;
@@ -216,15 +244,29 @@ var TableNode = /** @class */ (function (_super) {
         var pageNum = pagination.pageNum, pageSize = pagination.pageSize;
         var renderVisibleColumns = sortVisibleColumns.slice((pageNum - 1) * pageSize, pageNum * pageSize);
         // table columns group
-        this.colGroup = new Rect({
+        this.colGroup = new Group({
+            x: 0,
+            y: 0,
             style: {
-                width: NODE_WIDTH,
-                height: renderVisibleColumns.length * COL_HEIGHT,
-                fill: '#F4F4F4',
                 zIndex: 2,
             },
+            children: [
+                new Rect({
+                    name: 'col-group-bg',
+                    style: {
+                        x: 0,
+                        y: 0,
+                        width: NODE_WIDTH,
+                        height: renderVisibleColumns.length * COL_HEIGHT,
+                        fill: '#F4F4F4',
+                        zIndex: -1,
+                    },
+                }),
+            ],
         });
         renderVisibleColumns.forEach(function (colConfig, i) {
+            // FIXME: 列渲染向右偏移了8px，因为colConfig的position.x == 8。这里先强制重置为0，待排查原因
+            colConfig.position.x = 0;
             var col = new ColumnNode(_this.lineageManager.getGraph(), colConfig, _this, i);
             // add or replace column DOM
             var colIndex = _this.children.findIndex(function (c) { return c.id === col.id; });
@@ -234,10 +276,10 @@ var TableNode = /** @class */ (function (_super) {
             else {
                 _this.children[colIndex] = col;
             }
-            _this.colGroup.appendChild(col.container);
+            _this.colGroup.addChild(col.container);
         });
-        this.tableContentGroup.appendChild(this.colGroup);
-        this.bgRect.appendChild(this.tableContentGroup);
+        this.tableContentGroup.addChild(this.colGroup);
+        this.bgGroup.addChild(this.tableContentGroup);
     };
     TableNode.prototype.renderPagination = function () {
         var _this = this;
@@ -265,7 +307,7 @@ var TableNode = /** @class */ (function (_super) {
             name: 'pagination-totalPage-text',
             style: {
                 x: 12,
-                y: 20,
+                y: 6,
                 text: "\u5171 ".concat(totalPage, " \u9875"),
                 fill: '#575757',
                 fontSize: 12,
@@ -278,43 +320,64 @@ var TableNode = /** @class */ (function (_super) {
         var middleX = 260 - textWidth;
         var leftX = middleX - 23;
         var rightX = middleX + textWidth + 7;
-        var paginationPrevImage = new Image({
+        var paginationPrevImage = new Group({
             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,
             },
+            children: [
+                new Rect({
+                    style: {
+                        width: PAGINATION_IMAGE_SIZE,
+                        height: PAGINATION_IMAGE_SIZE,
+                        fill: null,
+                    },
+                }),
+                new Image({
+                    style: {
+                        width: PAGINATION_IMAGE_SIZE,
+                        height: PAGINATION_IMAGE_SIZE,
+                        img: tablePaginationPrev,
+                        cursor: this.config.pagination.pageNum > 1 ? 'pointer' : 'not-allowed',
+                        opacity: this.config.pagination.pageNum > 1 ? 1 : 0.5,
+                    },
+                }),
+            ],
         });
-        paginationPrevImage.addEventListener('click', function () {
+        paginationPrevImage.on('click', function () {
             _this.onPaginationPrev();
         });
-        paginationPrevImage === null || paginationPrevImage === void 0 ? void 0 : paginationPrevImage.addEventListener('mousedown', function () {
+        paginationPrevImage === null || paginationPrevImage === void 0 ? void 0 : paginationPrevImage.on('mousedown', function () {
             if (_this.config.pagination.pageNum > 1)
-                paginationPrevImage.setAttribute('img', tablePaginationPrevClick);
+                paginationPrevImage.children[0].updateStyle({
+                    fill: '#E3E3E3',
+                });
         });
-        paginationPrevImage === null || paginationPrevImage === void 0 ? void 0 : paginationPrevImage.addEventListener('mouseup', function () {
+        paginationPrevImage === null || paginationPrevImage === void 0 ? void 0 : paginationPrevImage.on('mouseup', function () {
             if (_this.config.pagination.pageNum > 1)
-                paginationPrevImage.setAttribute('img', tablePaginationPrev);
+                paginationPrevImage.children[0].updateStyle({
+                    fill: null,
+                });
         });
-        paginationPrevImage === null || paginationPrevImage === void 0 ? void 0 : paginationPrevImage.addEventListener('mouseenter', function () {
+        paginationPrevImage === null || paginationPrevImage === void 0 ? void 0 : paginationPrevImage.on('mouseenter', function () {
             if (_this.config.pagination.pageNum > 1)
-                paginationPrevImage.setAttribute('img', tablePaginationPrevHover);
+                paginationPrevImage.children[0].updateStyle({
+                    fill: '#E9E9E9',
+                });
         });
-        paginationPrevImage === null || paginationPrevImage === void 0 ? void 0 : paginationPrevImage.addEventListener('mouseleave', function () {
+        paginationPrevImage === null || paginationPrevImage === void 0 ? void 0 : paginationPrevImage.on('mouseleave', function () {
             if (_this.config.pagination.pageNum > 1)
-                paginationPrevImage.setAttribute('img', tablePaginationPrev);
+                paginationPrevImage.children[0].updateStyle({
+                    fill: null,
+                });
         });
         var paginationPageNum = new Text({
             style: {
                 x: middleX,
-                y: 20,
-                text: pageNum,
+                y: 6,
+                text: String(pageNum),
                 fill: '#000',
                 fontSize: 12,
                 fontWeight: 400,
@@ -323,48 +386,69 @@ var TableNode = /** @class */ (function (_super) {
                 zIndex: 2,
             },
         });
-        var paginationNextImage = new Image({
+        var paginationNextImage = new Group({
             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,
             },
+            children: [
+                new Rect({
+                    style: {
+                        width: PAGINATION_IMAGE_SIZE,
+                        height: PAGINATION_IMAGE_SIZE,
+                        fill: null,
+                    },
+                }),
+                new Image({
+                    style: {
+                        width: PAGINATION_IMAGE_SIZE,
+                        height: PAGINATION_IMAGE_SIZE,
+                        img: tablePaginationNext,
+                        cursor: this.config.pagination.pageNum < this.config.pagination.totalPage
+                            ? 'pointer'
+                            : 'not-allowed',
+                        opacity: this.config.pagination.pageNum < this.config.pagination.totalPage
+                            ? 1
+                            : 0.5,
+                    },
+                }),
+            ],
         });
-        paginationNextImage.addEventListener('click', function () {
+        paginationNextImage.on('click', function () {
             _this.onPaginationNext();
         });
-        paginationNextImage === null || paginationNextImage === void 0 ? void 0 : paginationNextImage.addEventListener('mousedown', function () {
+        paginationNextImage === null || paginationNextImage === void 0 ? void 0 : paginationNextImage.on('mousedown', function () {
             if (_this.config.pagination.pageNum < _this.config.pagination.totalPage)
-                paginationNextImage.setAttribute('img', tablePaginationNextClick);
+                paginationNextImage.children[0].updateStyle({
+                    fill: '#E3E3E3',
+                });
         });
-        paginationNextImage === null || paginationNextImage === void 0 ? void 0 : paginationNextImage.addEventListener('mouseup', function () {
+        paginationNextImage === null || paginationNextImage === void 0 ? void 0 : paginationNextImage.on('mouseup', function () {
             if (_this.config.pagination.pageNum < _this.config.pagination.totalPage)
-                paginationNextImage.setAttribute('img', tablePaginationNext);
+                paginationNextImage.children[0].updateStyle({
+                    fill: null,
+                });
         });
-        paginationNextImage === null || paginationNextImage === void 0 ? void 0 : paginationNextImage.addEventListener('mouseenter', function () {
+        paginationNextImage === null || paginationNextImage === void 0 ? void 0 : paginationNextImage.on('mouseenter', function () {
             if (_this.config.pagination.pageNum < _this.config.pagination.totalPage)
-                paginationNextImage.setAttribute('img', tablePaginationNextHover);
+                paginationNextImage.children[0].updateStyle({
+                    fill: '#E9E9E9',
+                });
         });
-        paginationNextImage === null || paginationNextImage === void 0 ? void 0 : paginationNextImage.addEventListener('mouseleave', function () {
+        paginationNextImage === null || paginationNextImage === void 0 ? void 0 : paginationNextImage.on('mouseleave', function () {
             if (_this.config.pagination.pageNum < _this.config.pagination.totalPage)
-                paginationNextImage.setAttribute('img', tablePaginationNext);
+                paginationNextImage.children[0].updateStyle({
+                    fill: null,
+                });
         });
-        paginationGroup.appendChild(paginationBgRect);
-        paginationGroup.appendChild(paginationTotalPage);
-        paginationGroup.appendChild(paginationPrevImage);
-        paginationGroup.appendChild(paginationPageNum);
-        paginationGroup.appendChild(paginationNextImage);
-        this.tableContentGroup.appendChild(paginationGroup);
+        paginationGroup.addChild(paginationBgRect);
+        paginationGroup.addChild(paginationTotalPage);
+        paginationGroup.addChild(paginationPrevImage);
+        paginationGroup.addChild(paginationPageNum);
+        paginationGroup.addChild(paginationNextImage);
+        this.tableContentGroup.addChild(paginationGroup);
     };
     TableNode.prototype.calculatePaginationData = function () {
         var _a = this.config, data = _a.data, pagination = _a.pagination;