@visactor/vtable 0.9.0-alpha.0-alpha.0 → 0.9.1-alpha.2

package/es/scenegraph/scenegraph.js

@@ -18,7 +18,7 @@ import { updateImageCellContentWhileResize } from "./group-creater/cell-type/ima
 
 import { getPadding } from "./utils/padding";
 
-import { createFrameBorder } from "./style/frame-border";
+import { createFrameBorder, updateFrameBorder, updateFrameBorderSize } from "./style/frame-border";
 
 import { ResizeColumnHotSpotSize } from "../tools/global";
 
@@ -30,19 +30,25 @@ import { dealWithIcon } from "./utils/text-icon-layout";
 
 import { SceneProxy } from "./group-creater/progress/proxy";
 
-import { SortOrder } from "../state/state";
-
 import { computeColWidth, computeColsWidth } from "./layout/compute-col-width";
 
 import { moveHeaderPosition } from "./layout/move-cell";
 
 import { updateCell } from "./group-creater/cell-helper";
 
+import { updateAllSelectComponent, updateCellSelectBorder } from "./select/update-select-border";
+
+import { createCellSelectBorder } from "./select/create-select-border";
+
+import { moveSelectingRangeComponentsToSelectedRangeComponents } from "./select/move-select-border";
+
+import { deleteAllSelectBorder, deleteLastSelectedRangeComponents } from "./select/delete-select-border";
+
 container.load(splitModule);
 
-const groupForDebug = new Group({});
+export const emptyGroup = new Group({});
 
-groupForDebug.role = "empty";
+emptyGroup.role = "empty";
 
 export class Scenegraph {
     constructor(table) {
@@ -51,7 +57,8 @@ export class Scenegraph {
             width: table.canvas.width,
             height: table.canvas.height,
             disableDirtyBounds: !1,
-            background: table.theme.underlayBackgroundColor
+            background: table.theme.underlayBackgroundColor,
+            dpr: table.internalProps.pixelRatio
         }), this.stage.defaultLayer.setTheme({
             group: {
                 boundsPadding: 0,
@@ -197,7 +204,10 @@ export class Scenegraph {
             const range = this.table.getCellRange(col, row);
             cell = this.getCell(range.start.col, range.start.row);
         }
-        return cell || groupForDebug;
+        return cell || emptyGroup;
+    }
+    highPerformanceGetCell(col, row) {
+        return this.isPivot || this.transpose || this.table.isHeader(col, row) ? this.getCell(col, row) : this.proxy.highPerformanceGetCell(col, row);
     }
     getColGroup(col, isCornerOrColHeader = !1) {
         let element;
@@ -217,64 +227,7 @@ export class Scenegraph {
         this.resetAllSelectComponent(), this.stage.renderNextFrame();
     }
     resetAllSelectComponent() {
-        this.selectingRangeComponents.forEach(((selectComp, key) => {
-            const [startCol, startRow, endCol, endRow] = key.split("-");
-            let cellsBounds;
-            for (let i = parseInt(startCol, 10); i <= parseInt(endCol, 10); i++) for (let j = parseInt(startRow, 10); j <= parseInt(endRow, 10); j++) {
-                const cellGroup = this.getCell(i, j);
-                cellGroup.AABBBounds.width();
-                const bounds = cellGroup.globalAABBBounds;
-                cellsBounds ? cellsBounds.union(bounds) : cellsBounds = bounds;
-            }
-            selectComp.rect.setAttributes({
-                x: cellsBounds.x1 - this.tableGroup.attribute.x,
-                y: cellsBounds.y1 - this.tableGroup.attribute.y,
-                width: cellsBounds.width(),
-                height: cellsBounds.height(),
-                visible: !0
-            });
-            const isNearRowHeader = parseInt(startCol, 10) === this.table.frozenColCount, isNearColHeader = parseInt(startRow, 10) === this.table.frozenRowCount;
-            isNearRowHeader && selectComp.rect.attribute.stroke[3] || isNearColHeader && selectComp.rect.attribute.stroke[0] ? (isNearRowHeader && this.tableGroup.insertAfter(selectComp.rect, "columnHeader" === selectComp.role ? this.cornerHeaderGroup : this.rowHeaderGroup), 
-            isNearColHeader && this.tableGroup.insertAfter(selectComp.rect, "rowHeader" === selectComp.role ? this.cornerHeaderGroup : this.colHeaderGroup), 
-            selectComp.rect.attribute.x < this.rowHeaderGroup.attribute.width && this.table.scrollLeft > 0 && ("body" === selectComp.role || "columnHeader" === selectComp.role) && selectComp.rect.setAttributes({
-                x: selectComp.rect.attribute.x + (this.rowHeaderGroup.attribute.width - selectComp.rect.attribute.x),
-                width: selectComp.rect.attribute.width - (this.rowHeaderGroup.attribute.width - selectComp.rect.attribute.x)
-            }), selectComp.rect.attribute.y < this.colHeaderGroup.attribute.height && this.table.scrollTop > 0 && ("body" === selectComp.role || "rowHeader" === selectComp.role) && selectComp.rect.setAttributes({
-                y: selectComp.rect.attribute.y + (this.colHeaderGroup.attribute.height - selectComp.rect.attribute.y),
-                height: selectComp.rect.attribute.height - (this.colHeaderGroup.attribute.height - selectComp.rect.attribute.y)
-            })) : this.tableGroup.insertAfter(selectComp.rect, "body" === selectComp.role ? this.bodyGroup : "columnHeader" === selectComp.role ? this.colHeaderGroup : "rowHeader" === selectComp.role ? this.rowHeaderGroup : this.cornerHeaderGroup);
-        })), this.selectedRangeComponents.forEach(((selectComp, key) => {
-            const [startCol, startRow, endCol, endRow] = key.split("-");
-            let cellsBounds;
-            for (let i = parseInt(startCol, 10); i <= parseInt(endCol, 10); i++) for (let j = parseInt(startRow, 10); j <= parseInt(endRow, 10); j++) {
-                const cellGroup = this.getCell(i, j);
-                cellGroup.AABBBounds.width();
-                const bounds = cellGroup.globalAABBBounds;
-                cellsBounds ? cellsBounds.union(bounds) : cellsBounds = bounds;
-            }
-            selectComp.rect.setAttributes({
-                x: cellsBounds.x1 - this.tableGroup.attribute.x,
-                y: cellsBounds.y1 - this.tableGroup.attribute.y,
-                width: cellsBounds.width(),
-                height: cellsBounds.height(),
-                visible: !0
-            });
-            const isNearRowHeader = parseInt(startCol, 10) === this.table.frozenColCount, isNearColHeader = parseInt(startRow, 10) === this.table.frozenRowCount;
-            isNearRowHeader && selectComp.rect.attribute.stroke[3] || isNearColHeader && selectComp.rect.attribute.stroke[0] ? (isNearRowHeader && this.tableGroup.insertAfter(selectComp.rect, "columnHeader" === selectComp.role ? this.cornerHeaderGroup : this.rowHeaderGroup), 
-            isNearColHeader && this.tableGroup.insertAfter(selectComp.rect, "rowHeader" === selectComp.role ? this.cornerHeaderGroup : this.colHeaderGroup), 
-            selectComp.rect.attribute.x < this.rowHeaderGroup.attribute.width && this.table.scrollLeft > 0 && ("body" === selectComp.role || "columnHeader" === selectComp.role) && selectComp.rect.setAttributes({
-                x: selectComp.rect.attribute.x + (this.rowHeaderGroup.attribute.width - selectComp.rect.attribute.x),
-                width: selectComp.rect.attribute.width - (this.rowHeaderGroup.attribute.width - selectComp.rect.attribute.x)
-            }), selectComp.rect.attribute.y < this.colHeaderGroup.attribute.height && this.table.scrollTop > 0 && ("body" === selectComp.role || "rowHeader" === selectComp.role) && selectComp.rect.setAttributes({
-                y: selectComp.rect.attribute.y + (this.colHeaderGroup.attribute.height - selectComp.rect.attribute.y),
-                height: selectComp.rect.attribute.height - (this.colHeaderGroup.attribute.height - selectComp.rect.attribute.y)
-            })) : this.tableGroup.insertAfter(selectComp.rect, "body" === selectComp.role ? this.bodyGroup : "columnHeader" === selectComp.role ? this.colHeaderGroup : "rowHeader" === selectComp.role ? this.rowHeaderGroup : this.cornerHeaderGroup);
-        }));
-    }
-    removeInteractionBorder(col, row) {
-        const cellGroup = this.getCell(col, row);
-        cellGroup.setAttribute("highlightStroke", void 0), cellGroup.setAttribute("highlightStrokeArrayWidth", void 0), 
-        cellGroup.setAttribute("highlightStrokeArrayColor", void 0);
+        updateAllSelectComponent(this);
     }
     hideHoverIcon(col, row) {
         if (-1 === col || -1 === row) return;
@@ -304,114 +257,25 @@ export class Scenegraph {
         const cellGroup = this.getCell(col, row);
         null === (_b = null === (_a = null == cellGroup ? void 0 : cellGroup.firstChild) || void 0 === _a ? void 0 : _a.activate) || void 0 === _b || _b.call(_a, this.table);
     }
+    removeInteractionBorder(col, row) {
+        const cellGroup = this.getCell(col, row);
+        cellGroup.setAttribute("highlightStroke", void 0), cellGroup.setAttribute("highlightStrokeArrayWidth", void 0), 
+        cellGroup.setAttribute("highlightStrokeArrayColor", void 0);
+    }
     createCellSelectBorder(start_Col, start_Row, end_Col, end_Row, selectRangeType, selectId, strokes) {
-        var _a, _b, _c, _d;
-        const startCol = Math.min(start_Col, end_Col), startRow = Math.min(start_Row, end_Row), endCol = Math.max(start_Col, end_Col), endRow = Math.max(start_Row, end_Row);
-        let cellsBounds;
-        for (let i = startCol; i <= endCol; i++) for (let j = startRow; j <= endRow; j++) {
-            const cellGroup = this.getCell(i, j);
-            if ("shadow-cell" === cellGroup.role) continue;
-            const bounds = cellGroup.globalAABBBounds;
-            cellsBounds ? cellsBounds.union(bounds) : cellsBounds = bounds;
-        }
-        const theme = this.table.theme, bodyClickBorderColor = null === (_a = theme.selectionStyle) || void 0 === _a ? void 0 : _a.cellBorderColor, bodyClickLineWidth = null === (_b = theme.selectionStyle) || void 0 === _b ? void 0 : _b.cellBorderLineWidth, rect = createRect({
-            pickable: !1,
-            fill: !0,
-            fillColor: null !== (_d = null === (_c = theme.selectionStyle) || void 0 === _c ? void 0 : _c.cellBgColor) && void 0 !== _d ? _d : "rgba(0, 0, 255,0.1)",
-            strokeColor: bodyClickBorderColor,
-            lineWidth: bodyClickLineWidth,
-            stroke: strokes,
-            x: cellsBounds.x1 - this.tableGroup.attribute.x,
-            y: cellsBounds.y1 - this.tableGroup.attribute.y,
-            width: cellsBounds.width(),
-            height: cellsBounds.height(),
-            visible: !0
-        });
-        this.lastSelectId = selectId, this.selectingRangeComponents.set(`${startCol}-${startRow}-${endCol}-${endRow}-${selectId}`, {
-            rect: rect,
-            role: selectRangeType
-        }), this.tableGroup.insertAfter(rect, "body" === selectRangeType ? this.bodyGroup : "columnHeader" === selectRangeType ? this.colHeaderGroup : "rowHeader" === selectRangeType ? this.rowHeaderGroup : this.cornerHeaderGroup);
+        createCellSelectBorder(this, start_Col, start_Row, end_Col, end_Row, selectRangeType, selectId, strokes);
     }
     moveSelectingRangeComponentsToSelectedRangeComponents() {
-        this.selectingRangeComponents.forEach(((rangeComponent, key) => {
-            this.selectedRangeComponents.get(key) && this.selectedRangeComponents.get(key).rect.delete(), 
-            this.selectedRangeComponents.set(key, rangeComponent);
-        })), this.selectingRangeComponents = new Map, this.updateNextFrame();
+        moveSelectingRangeComponentsToSelectedRangeComponents(this);
     }
     deleteLastSelectedRangeComponents() {
-        this.selectedRangeComponents.forEach(((selectComp, key) => {
-            key.split("-")[4] === this.lastSelectId && (selectComp.rect.delete(), this.selectedRangeComponents.delete(key));
-        }));
+        deleteLastSelectedRangeComponents(this);
     }
     deleteAllSelectBorder() {
-        this.selectedRangeComponents.forEach(((selectComp, key) => {
-            selectComp.rect.delete();
-        })), this.selectedRangeComponents = new Map;
+        deleteAllSelectBorder(this);
     }
     updateCellSelectBorder(newStartCol, newStartRow, newEndCol, newEndRow) {
-        let startCol = Math.min(newEndCol, newStartCol), startRow = Math.min(newEndRow, newStartRow), endCol = Math.max(newEndCol, newStartCol), endRow = Math.max(newEndRow, newStartRow);
-        const extendSelectRange = () => {
-            let isExtend = !1;
-            for (let col = startCol; col <= endCol; col++) {
-                if (col === startCol) for (let row = startRow; row <= endRow; row++) {
-                    const mergeInfo = getCellMergeInfo(this.table, col, row);
-                    if (mergeInfo && mergeInfo.start.col < startCol) {
-                        startCol = mergeInfo.start.col, isExtend = !0;
-                        break;
-                    }
-                }
-                if (!isExtend && col === endCol) for (let row = startRow; row <= endRow; row++) {
-                    const mergeInfo = getCellMergeInfo(this.table, col, row);
-                    if (mergeInfo && mergeInfo.end.col > endCol) {
-                        endCol = mergeInfo.end.col, isExtend = !0;
-                        break;
-                    }
-                }
-                if (isExtend) break;
-            }
-            if (!isExtend) for (let row = startRow; row <= endRow; row++) {
-                if (row === startRow) for (let col = startCol; col <= endCol; col++) {
-                    const mergeInfo = getCellMergeInfo(this.table, col, row);
-                    if (mergeInfo && mergeInfo.start.row < startRow) {
-                        startRow = mergeInfo.start.row, isExtend = !0;
-                        break;
-                    }
-                }
-                if (!isExtend && row === endRow) for (let col = startCol; col <= endCol; col++) {
-                    const mergeInfo = getCellMergeInfo(this.table, col, row);
-                    if (mergeInfo && mergeInfo.end.row > endRow) {
-                        endRow = mergeInfo.end.row, isExtend = !0;
-                        break;
-                    }
-                }
-                if (isExtend) break;
-            }
-            isExtend && extendSelectRange();
-        };
-        extendSelectRange(), this.selectingRangeComponents.forEach(((selectComp, key) => {
-            selectComp.rect.delete();
-        })), this.selectingRangeComponents = new Map;
-        let needRowHeader = !1, needColumnHeader = !1, needBody = !1, needCornerHeader = !1;
-        if (startCol <= this.table.frozenColCount - 1 && startRow <= this.table.frozenRowCount - 1 && (needCornerHeader = !0), 
-        startCol <= this.table.frozenColCount - 1 && endRow >= this.table.frozenRowCount && (needRowHeader = !0), 
-        startRow <= this.table.frozenRowCount - 1 && endCol >= this.table.frozenColCount && (needColumnHeader = !0), 
-        endCol >= this.table.frozenColCount && endRow >= this.table.frozenRowCount && (needBody = !0), 
-        needCornerHeader) {
-            const cornerEndCol = Math.min(endCol, this.table.frozenColCount - 1), cornerEndRow = Math.min(endRow, this.table.frozenRowCount - 1), strokeArray = [ !0, !needColumnHeader, !needRowHeader, !0 ];
-            this.createCellSelectBorder(startCol, startRow, cornerEndCol, cornerEndRow, "cornerHeader", `${startCol}${startRow}${endCol}${endRow}`, strokeArray);
-        }
-        if (needColumnHeader) {
-            const columnHeaderStartCol = Math.max(startCol, this.table.frozenColCount), columnHeaderEndRow = Math.min(endRow, this.table.frozenRowCount - 1), strokeArray = [ !0, !0, !needBody, !needCornerHeader ];
-            this.createCellSelectBorder(columnHeaderStartCol, startRow, endCol, columnHeaderEndRow, "columnHeader", `${startCol}${startRow}${endCol}${endRow}`, strokeArray);
-        }
-        if (needRowHeader) {
-            const columnHeaderStartRow = Math.max(startRow, this.table.frozenRowCount), columnHeaderEndCol = Math.min(endCol, this.table.frozenColCount - 1), strokeArray = [ !needCornerHeader, !needBody, !0, !0 ];
-            this.createCellSelectBorder(startCol, columnHeaderStartRow, columnHeaderEndCol, endRow, "rowHeader", `${startCol}${startRow}${endCol}${endRow}`, strokeArray);
-        }
-        if (needBody) {
-            const columnHeaderStartCol = Math.max(startCol, this.table.frozenColCount), columnHeaderStartRow = Math.max(startRow, this.table.frozenRowCount), strokeArray = [ !needColumnHeader, !0, !0, !needRowHeader ];
-            this.createCellSelectBorder(columnHeaderStartCol, columnHeaderStartRow, endCol, endRow, "body", `${startCol}${startRow}${endCol}${endRow}`, strokeArray);
-        }
+        updateCellSelectBorder(this, newStartCol, newStartRow, newEndCol, newEndRow);
     }
     getIcon(col, row, x, y) {
         let pickMark;
@@ -428,7 +292,7 @@ export class Scenegraph {
                 y: (null !== (_c = icon.attribute.y) && void 0 !== _c ? _c : 0) + (icon.AABBBounds.height() - icon.backgroundHeight) / 2,
                 width: icon.backgroundWidth,
                 height: icon.backgroundHeight,
-                fillColor: icon.attribute.backgroundColor,
+                fill: icon.attribute.backgroundColor,
                 borderRadius: 5,
                 visible: !0
             }) : (iconBack = createRect({
@@ -436,7 +300,7 @@ export class Scenegraph {
                 y: (null !== (_f = icon.attribute.y) && void 0 !== _f ? _f : 0) + (icon.AABBBounds.height() - icon.backgroundHeight) / 2,
                 width: icon.backgroundWidth,
                 height: icon.backgroundHeight,
-                fillColor: icon.attribute.backgroundColor,
+                fill: icon.attribute.backgroundColor,
                 borderRadius: 5,
                 pickable: !1,
                 visible: !0
@@ -526,7 +390,7 @@ export class Scenegraph {
     afterScenegraphCreated() {
         const {autoRowHeight: autoRowHeight} = this.table.internalProps;
         autoRowHeight && updateAutoRowHeight(this), this.dealWidthMode(), this.dealFrozen(), 
-        this.createFrameBorder(), this.component.updateScrollBar();
+        this.createFrameBorder(), this.component.updateScrollBar(), this.updateNextFrame();
     }
     dealWidthMode() {
         const table = this.table;
@@ -706,9 +570,9 @@ export class Scenegraph {
         this.updateTableSize();
         const isListTableWithFrozen = !this.isPivot && this.rowHeaderGroup.attribute.width;
         createFrameBorder(this.bodyGroup, this.table.theme.bodyStyle.frameStyle, this.bodyGroup.role, isListTableWithFrozen ? [ !0, !0, !0, !1 ] : void 0), 
-        createFrameBorder(this.rowHeaderGroup, this.isPivot ? this.table.theme.rowHeaderStyle.frameStyle : this.table.theme.bodyStyle.frameStyle, this.rowHeaderGroup.role, isListTableWithFrozen ? [ !0, !1, !0, !0 ] : void 0), 
+        createFrameBorder(this.rowHeaderGroup, this.isPivot ? this.table.theme.rowHeaderStyle.frameStyle : this.table.theme.bodyStyle.frameStyle, this.rowHeaderGroup.role, [ !0, !1, !0, !0 ]), 
         createFrameBorder(this.colHeaderGroup, this.table.theme.headerStyle.frameStyle, this.colHeaderGroup.role, isListTableWithFrozen ? [ !0, !0, !0, !1 ] : void 0), 
-        createFrameBorder(this.cornerHeaderGroup, this.isPivot ? this.table.theme.cornerHeaderStyle.frameStyle : this.table.theme.headerStyle.frameStyle, this.cornerHeaderGroup.role, isListTableWithFrozen ? [ !0, !1, !0, !0 ] : void 0), 
+        createFrameBorder(this.cornerHeaderGroup, this.isPivot ? this.table.theme.cornerHeaderStyle.frameStyle : this.table.theme.headerStyle.frameStyle, this.cornerHeaderGroup.role, [ !0, !1, !0, !0 ]), 
         createFrameBorder(this.tableGroup, this.table.theme.frameStyle, this.tableGroup.role);
     }
     getResizeColAt(abstractX, abstractY, cellGroup, offset = ResizeColumnHotSpotSize / 2) {
@@ -736,21 +600,18 @@ export class Scenegraph {
         this.clear || (this.resetFrozen(), this.dealFrozen(), this.component.updateScrollBar());
     }
     updateBorderSizeAndPosition() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        this.bodyGroup.border && (this.bodyGroup.appendChild(this.bodyGroup.border), null === (_a = this.bodyGroup.border) || void 0 === _a || _a.setAttribute("width", this.bodyGroup.attribute.width - (null !== (_b = this.bodyGroup.border.attribute.lineWidth) && void 0 !== _b ? _b : 0)), 
-        0 === this.rowHeaderGroup.attribute.width ? null === (_c = this.bodyGroup.border) || void 0 === _c || _c.setAttribute("stroke", [ !0, !0, !0, !0 ]) : null === (_d = this.bodyGroup.border) || void 0 === _d || _d.setAttribute("stroke", [ !0, !0, !0, !1 ])), 
+        this.bodyGroup.border && (this.bodyGroup.appendChild(this.bodyGroup.border), updateFrameBorderSize(this.bodyGroup), 
+        0 === this.rowHeaderGroup.attribute.width ? updateFrameBorder(this.bodyGroup, this.table.theme.bodyStyle.frameStyle, [ !0, !0, !0, !0 ]) : updateFrameBorder(this.bodyGroup, this.table.theme.bodyStyle.frameStyle, [ !0, !0, !0, !1 ])), 
         this.colHeaderGroup.border && (this.colHeaderGroup.appendChild(this.colHeaderGroup.border), 
-        null === (_e = this.colHeaderGroup.border) || void 0 === _e || _e.setAttribute("width", this.colHeaderGroup.attribute.width - (null !== (_f = this.colHeaderGroup.border.attribute.lineWidth) && void 0 !== _f ? _f : 0)), 
-        0 === this.cornerHeaderGroup.attribute.width ? null === (_g = this.colHeaderGroup.border) || void 0 === _g || _g.setAttribute("stroke", [ !0, !0, !0, !0 ]) : null === (_h = this.colHeaderGroup.border) || void 0 === _h || _h.setAttribute("stroke", [ !0, !0, !0, !1 ])), 
+        updateFrameBorderSize(this.colHeaderGroup), 0 === this.cornerHeaderGroup.attribute.width ? updateFrameBorder(this.colHeaderGroup, this.table.theme.headerStyle.frameStyle, [ !0, !0, !0, !0 ]) : updateFrameBorder(this.colHeaderGroup, this.table.theme.headerStyle.frameStyle, [ !0, !0, !0, !1 ])), 
         this.rowHeaderGroup.border && (this.rowHeaderGroup.appendChild(this.rowHeaderGroup.border), 
-        null === (_j = this.rowHeaderGroup.border) || void 0 === _j || _j.setAttribute("width", this.rowHeaderGroup.attribute.width - (null !== (_k = this.rowHeaderGroup.border.attribute.lineWidth) && void 0 !== _k ? _k : 0))), 
-        this.cornerHeaderGroup.border && (this.cornerHeaderGroup.appendChild(this.cornerHeaderGroup.border), 
-        null === (_l = this.cornerHeaderGroup.border) || void 0 === _l || _l.setAttribute("width", this.cornerHeaderGroup.attribute.width - (null !== (_m = this.cornerHeaderGroup.border.attribute.lineWidth) && void 0 !== _m ? _m : 0)));
+        updateFrameBorderSize(this.rowHeaderGroup)), this.cornerHeaderGroup.border && (this.cornerHeaderGroup.appendChild(this.cornerHeaderGroup.border), 
+        updateFrameBorderSize(this.cornerHeaderGroup));
     }
     updateSortIcon(col, row, iconMark, order, oldSortCol, oldSortRow, oldIconMark) {
         const icon = this.table.internalProps.headerHelper.getSortIcon(order, this.table, col, row);
         if (iconMark && this.updateIcon(iconMark, icon), oldIconMark !== iconMark) {
-            const oldIcon = this.table.internalProps.headerHelper.getSortIcon(SortOrder.normal, this.table, oldSortCol, oldSortRow);
+            const oldIcon = this.table.internalProps.headerHelper.getSortIcon("normal", this.table, oldSortCol, oldSortRow);
             if (oldIconMark) this.updateIcon(oldIconMark, oldIcon); else {
                 let oldIconMark;
                 this.getCell(oldSortCol, oldSortRow).forEachChildren((mark => "sort" === mark.attribute.funcType && (oldIconMark = mark, 
@@ -800,6 +661,10 @@ export class Scenegraph {
     updateCellContent(col, row) {
         this.clear || updateCell(col, row, this.table);
     }
+    setPixelRatio(pixelRatio) {
+        this.stage.disableDirtyBounds(), this.stage.window.setDpr(pixelRatio), this.stage.render(), 
+        this.stage.enableDirtyBounds();
+    }
 }
 
 function showIcon(scene, cellGroup, visibleTime) {