@visactor/vtable 0.21.2-alpha.0 → 0.21.2

package/dist/vtable.js

@@ -36047,6 +36047,8 @@
         });
         image.name = 'image';
         image.keepAspectRatio = keepAspectRatio;
+        image.textAlign = textAlign;
+        image.textBaseline = textBaseline;
         if (keepAspectRatio || imageAutoSizing) {
             if (image.resources &&
                 image.resources.has(image.attribute.image) &&
@@ -36134,25 +36136,40 @@
         const textAlign = getProp('textAlign', headerStyle, col, row, table) ?? 'left';
         const textBaseline = getProp('textBaseline', headerStyle, col, row, table) ?? 'middle';
         const padding = getQuadProps(getProp('padding', headerStyle, col, row, table)) ?? [0, 0, 0, 0];
+        const { width: cellWidth, height: cellHeight, isMerge } = getCellRange(cellGroup, table);
+        const colStart = cellGroup.mergeStartCol ?? cellGroup.col;
+        const rowStart = cellGroup.mergeStartRow ?? cellGroup.row;
+        const colEnd = cellGroup.mergeEndCol ?? cellGroup.col;
+        const rowEnd = cellGroup.mergeEndCol ?? cellGroup.row;
         if (image.keepAspectRatio) {
-            const { width: cellWidth, height: cellHeight } = getCellRange(cellGroup, table);
             const { width: imageWidth, height: imageHeight } = calcKeepAspectRatioSize(originImage.width || originImage.videoWidth, originImage.height || originImage.videoHeight, cellWidth - (padding[1] + padding[3]), cellHeight - (padding[0] + padding[2]));
             const pos = calcStartPosition(0, 0, cellWidth, cellHeight, imageWidth, imageHeight, textAlign, textBaseline, padding);
-            image.setAttributes({
-                x: pos.x,
-                y: pos.y,
-                width: imageWidth,
-                height: imageHeight
-            });
+            for (let col = colStart; col <= colEnd; col++) {
+                for (let row = rowStart; row <= rowEnd; row++) {
+                    const cellGroup = table.scenegraph.getCell(col, row);
+                    const image = cellGroup.getChildByName('image');
+                    image?.setAttributes({
+                        x: pos.x,
+                        y: pos.y,
+                        width: imageWidth,
+                        height: imageHeight
+                    });
+                }
+            }
         }
         else {
-            const { width: cellWidth, height: cellHeight } = getCellRange(cellGroup, table);
-            image.setAttributes({
-                x: padding[3],
-                y: padding[0],
-                width: cellWidth - padding[1] - padding[3],
-                height: cellHeight - padding[0] - padding[2]
-            });
+            for (let col = colStart; col <= colEnd; col++) {
+                for (let row = rowStart; row <= rowEnd; row++) {
+                    const cellGroup = table.scenegraph.getCell(col, row);
+                    const image = cellGroup.getChildByName('image');
+                    image?.setAttributes({
+                        x: padding[3],
+                        y: padding[0],
+                        width: cellWidth - padding[1] - padding[3],
+                        height: cellHeight - padding[0] - padding[2]
+                    });
+                }
+            }
         }
         const playIcon = cellGroup.getChildByName('play-icon');
         if (playIcon) {
@@ -36162,12 +36179,21 @@
             const iconSize = Math.floor(Math.min(width - padding[1] - padding[3], height - padding[2] - padding[0]) / 2);
             const anchorX = left + (width > image.attribute.width ? image.attribute.x - left + image.attribute.width / 2 : width / 2);
             const anchorY = top + (height > image.attribute.height ? image.attribute.y - top + image.attribute.height / 2 : height / 2);
-            playIcon.setAttributes({
-                x: anchorX - iconSize / 2,
-                y: anchorY - iconSize / 2,
-                width: iconSize,
-                height: iconSize
-            });
+            for (let col = colStart; col <= colEnd; col++) {
+                for (let row = rowStart; row <= rowEnd; row++) {
+                    const cellGroup = table.scenegraph.getCell(col, row);
+                    const playIcon = cellGroup.getChildByName('play-icon');
+                    playIcon.setAttributes({
+                        x: anchorX - iconSize / 2,
+                        y: anchorY - iconSize / 2,
+                        width: iconSize,
+                        height: iconSize
+                    });
+                }
+            }
+        }
+        if (isMerge) {
+            updateImageDxDy(cellGroup.mergeStartCol, cellGroup.mergeEndCol, cellGroup.mergeStartRow, cellGroup.mergeEndRow, table);
         }
     }
     function getCellRange(cellGroup, table) {
@@ -36199,6 +36225,13 @@
                             dy: -table.getRowsHeight(cellGroup.mergeStartRow, row - 1)
                         });
                     }
+                    const playIcon = cellGroup.getChildByName('play-icon');
+                    if (playIcon) {
+                        playIcon.setAttributes({
+                            dx: -table.getColsWidth(cellGroup.mergeStartCol, col - 1),
+                            dy: -table.getRowsHeight(cellGroup.mergeStartRow, row - 1)
+                        });
+                    }
                 }
             }
         }
@@ -36268,18 +36301,12 @@
             return Number(v);
         });
         const borderWidth = getQuadProps(getProp('borderLineWidth', style, col, row, table));
-        let barPaddingTop = Math.max(barPadding[0], borderWidth[0]);
-        const barPaddingRight = Math.max(barPadding[1], borderWidth[1]);
-        const barPaddingBottom = Math.max(barPadding[2], borderWidth[2]);
-        let barPaddingLeft = Math.max(barPadding[3], borderWidth[3]);
+        const barPaddingTop = Math.max(barPadding[0], Math.ceil(borderWidth[0] / 2));
+        const barPaddingRight = Math.max(barPadding[1], Math.floor(borderWidth[1] / 2));
+        const barPaddingBottom = Math.max(barPadding[2], Math.floor(borderWidth[2] / 2));
+        const barPaddingLeft = Math.max(barPadding[3], Math.ceil(borderWidth[3] / 2));
         contentWidth -= barPaddingRight + barPaddingLeft;
         contentHeight -= barPaddingBottom + barPaddingTop;
-        if (barPaddingTop & 1) {
-            barPaddingTop += 0.5;
-        }
-        if (barPaddingLeft & 1) {
-            barPaddingLeft += 0.5;
-        }
         const top = barPaddingTop;
         const left = barPaddingLeft;
         const right = contentWidth;
@@ -37337,6 +37364,7 @@
                 };
                 const wrapText = new Text$1(cellTheme.text ? Object.assign({}, cellTheme.text, attribute) : attribute);
                 wrapText.name = 'text';
+                wrapText.textBaseline = textBaseline;
                 cellGroup.appendChild(wrapText);
                 contentWidth = wrapText.AABBBounds.width();
                 wrapText.AABBBounds.height();
@@ -37909,28 +37937,33 @@
             if (imageAutoSizing) {
                 _adjustWidthHeight(col, row, video.videoWidth, video.videoHeight, table.scenegraph, padding, cellGroup);
             }
-            const width = cellGroup.attribute.width;
-            const height = cellGroup.attribute.height;
+            const { width: cellWidth, height: cellHeight, isMerge } = getCellRange(cellGroup, table);
             if (keepAspectRatio) {
-                const { width: videoWidth, height: videoHeight } = calcKeepAspectRatioSize(video.videoWidth, video.videoHeight, width - padding[1] - padding[3], height - padding[0] - padding[2]);
-                const pos = calcStartPosition(0, 0, width, height, videoWidth, videoHeight, textAlign, textBaseline, padding);
+                const { width: videoWidth, height: videoHeight } = calcKeepAspectRatioSize(video.videoWidth, video.videoHeight, cellWidth - padding[1] - padding[3], cellHeight - padding[0] - padding[2]);
+                const pos = calcStartPosition(0, 0, cellWidth, cellHeight, videoWidth, videoHeight, textAlign, textBaseline, padding);
                 image.setAttributes({
                     width: videoWidth,
                     height: videoHeight,
                     x: pos.x,
-                    y: pos.y
+                    y: pos.y,
+                    dx: 0
                 });
             }
             else {
                 image.setAttributes({
                     x: padding[3],
                     y: padding[0],
-                    width: width - padding[1] - padding[3],
-                    height: height - padding[2] - padding[0]
+                    width: cellWidth - padding[1] - padding[3],
+                    height: cellHeight - padding[2] - padding[0],
+                    dy: 0
                 });
             }
+            if (isMerge) {
+                updateImageDxDy(cellGroup.mergeStartCol, cellGroup.mergeEndCol, cellGroup.mergeStartRow, cellGroup.mergeEndRow, table);
+            }
             const left = 0;
             const top = 0;
+            const { width, height } = getCellRange(cellGroup, table);
             const iconSize = Math.floor(Math.min(width - padding[1] - padding[3], height - padding[2] - padding[0]) / 2);
             const anchorX = left + (width > image.attribute.width ? image.attribute.x - left + image.attribute.width / 2 : width / 2);
             const anchorY = top + (height > image.attribute.height ? image.attribute.y - top + image.attribute.height / 2 : height / 2);
@@ -37960,6 +37993,9 @@
             cursor: 'pointer'
         });
         image.name = 'image';
+        image.keepAspectRatio = keepAspectRatio;
+        image.textAlign = textAlign;
+        image.textBaseline = textBaseline;
         cellGroup.appendChild(image);
         return cellGroup;
     }
@@ -40333,7 +40369,7 @@
         const oldColumnWidth = columnGroup?.attribute.width ?? 0;
         columnGroup?.setAttribute('width', oldColumnWidth + detaX);
         columnGroup?.forEachChildren((cell, index) => {
-            const isHeightChange = updateCellWidth(scene, cell, cell.col, cell.row, oldColumnWidth, oldColumnWidth + detaX, detaX, mode === 'row-body' ? cell.col < scene.table.rowHeaderLevelCount : true, autoRowHeight);
+            const isHeightChange = updateCellWidth(scene, cell, cell.col, cell.row, oldColumnWidth, oldColumnWidth + detaX, detaX, mode === 'row-body' ? cell.col < scene.table.rowHeaderLevelCount : true, autoRowHeight, scene.table.internalProps.autoWrapText);
             if (isHeightChange) {
                 const mergeInfo = getCellMergeInfo(scene.table, cell.col, cell.row);
                 if (mergeInfo && mergeInfo.end.row - mergeInfo.start.row) {
@@ -40420,7 +40456,7 @@
             }
         }
     }
-    function updateCellWidth(scene, cell, col, row, oldWidth, distWidth, detaX, isHeader, autoRowHeight) {
+    function updateCellWidth(scene, cell, col, row, oldWidth, distWidth, detaX, isHeader, autoRowHeight, autoWrapText) {
         if (cell.attribute.width === distWidth && !cell.needUpdateWidth) {
             return false;
         }
@@ -40512,7 +40548,7 @@
                 isHeightChange = updateMergeCellContentWidth(cellGroup, distWidth, detaX, autoRowHeight, getQuadProps(style.padding), style.textAlign, style.textBaseline, scene.table);
             }
         }
-        return autoRowHeight ? isHeightChange : false;
+        return autoRowHeight && autoWrapText ? isHeightChange : false;
     }
     function updateMergeCellContentWidth(cellGroup, distWidth, detaX, autoRowHeight, padding, textAlign, textBaseline, table) {
         if (isMergeCellGroup(cellGroup)) {
@@ -42829,6 +42865,248 @@
         }
     }
 
+    let customAlphabetCharSet = '';
+    const textMeasureModule = new ContainerModule((bind, unbind, isBound, rebind) => {
+        if (isBound(TextMeasureContribution)) {
+            rebind(TextMeasureContribution).to(FastTextMeasureContribution).inSingletonScope();
+        }
+        else {
+            bind(TextMeasureContribution).to(FastTextMeasureContribution).inSingletonScope();
+        }
+    });
+    const restoreTextMeasureModule = new ContainerModule((bind, unbind, isBound, rebind) => {
+        if (isBound(TextMeasureContribution)) {
+            rebind(TextMeasureContribution).to(DefaultTextMeasureContribution).inSingletonScope();
+        }
+        else {
+            bind(TextMeasureContribution).to(DefaultTextMeasureContribution).inSingletonScope();
+        }
+    });
+    const initTextMeasure = (textSpec, option, useNaiveCanvas) => {
+        return new TextMeasure$1({
+            defaultFontParams: {
+                fontFamily: DefaultTextStyle.fontFamily,
+                fontSize: DefaultTextStyle.fontSize
+            },
+            getTextBounds: useNaiveCanvas ? undefined : getTextBounds$1,
+            specialCharSet: `{}()//&-/: .,@%'"~…=${TextMeasure$1.ALPHABET_CHAR_SET}${TextMeasure$1.ALPHABET_CHAR_SET.toUpperCase()}0123456789${customAlphabetCharSet}`,
+            ...(option ?? {})
+        }, textSpec);
+    };
+    const fastTextMeasureCache = new Map();
+    function getFastTextMeasure(fontSize, fontWeight, fontFamily, fontStyle = 'normal') {
+        const key = `${fontSize}-${fontWeight}-${fontFamily}-${fontStyle}`;
+        const cache = fastTextMeasureCache.get(key);
+        if (cache) {
+            return cache;
+        }
+        const fastTextMeasure = initTextMeasure({
+            fontSize,
+            fontFamily,
+            fontWeight,
+            fontStyle
+        });
+        fastTextMeasureCache.set(key, fastTextMeasure);
+        return fastTextMeasure;
+    }
+    class FastTextMeasureContribution extends DefaultTextMeasureContribution {
+        measureTextWidth(text, options) {
+            const { fontSize, fontFamily = 'Arial,sans-serif', fontWeight = 'normal', fontStyle = 'normal' } = options;
+            const fastTextMeasure = getFastTextMeasure(fontSize, fontWeight, fontFamily, fontStyle);
+            const textMeasure = fastTextMeasure.measure(text);
+            return textMeasure.width;
+        }
+        measureText(text, options) {
+            const { fontSize, fontFamily = 'Arial,sans-serif', fontWeight = 'normal', fontStyle = 'normal' } = options;
+            const fastTextMeasure = getFastTextMeasure(fontSize, fontWeight, fontFamily, fontStyle);
+            const textMeasure = fastTextMeasure.measure(text);
+            return textMeasure;
+        }
+    }
+    class TextMeasureTool {
+        measureText(text, options) {
+            const { fontSize, fontFamily = 'Arial,sans-serif', fontWeight = 'normal', fontStyle = 'normal' } = options;
+            const fastTextMeasure = getFastTextMeasure(fontSize, fontWeight, fontFamily, fontStyle);
+            const textMeasure = fastTextMeasure.measure(text);
+            return textMeasure;
+        }
+        measureTextWidth(text, options) {
+            const { fontSize, fontFamily = 'Arial,sans-serif', fontWeight = 'normal', fontStyle = 'normal' } = options;
+            const fastTextMeasure = getFastTextMeasure(fontSize, fontWeight, fontFamily, fontStyle);
+            const textMeasure = fastTextMeasure.measure(text);
+            return textMeasure.width;
+        }
+        clipText(text, options, width) {
+            if (text.length === 0) {
+                return { str: '', width: 0 };
+            }
+            let length = this.measureTextWidth(text, options);
+            if (length <= width) {
+                return { str: text, width: length };
+            }
+            length = this.measureTextWidth(text[0], options);
+            if (length > width) {
+                return { str: '', width: 0 };
+            }
+            return this._clipText(text, options, width, 0, text.length - 1);
+        }
+        _clipText(text, options, width, leftIdx, rightIdx) {
+            const middleIdx = Math.floor((leftIdx + rightIdx) / 2);
+            const subText = text.substring(0, middleIdx + 1);
+            const strWidth = this.measureTextWidth(subText, options);
+            let length;
+            if (strWidth > width) {
+                if (subText.length <= 1) {
+                    return { str: '', width: 0 };
+                }
+                const str = text.substring(0, middleIdx);
+                length = this.measureTextWidth(str, options);
+                if (length <= width) {
+                    return { str, width: length };
+                }
+                return this._clipText(text, options, width, leftIdx, middleIdx);
+            }
+            else if (strWidth < width) {
+                if (middleIdx >= text.length - 1) {
+                    return { str: text, width: this.measureTextWidth(text, options) };
+                }
+                const str = text.substring(0, middleIdx + 2);
+                length = this.measureTextWidth(str, options);
+                if (length >= width) {
+                    return { str: subText, width: strWidth };
+                }
+                return this._clipText(text, options, width, middleIdx, rightIdx);
+            }
+            return { str: subText, width: strWidth };
+        }
+        clipTextWithSuffix(text, options, width, suffix) {
+            if (suffix === '') {
+                return this.clipText(text, options, width);
+            }
+            if (text.length === 0) {
+                return { str: '', width: 0 };
+            }
+            const length = this.measureTextWidth(text, options);
+            if (length <= width) {
+                return { str: text, width: length };
+            }
+            const suffixWidth = this.measureTextWidth(suffix, options);
+            if (suffixWidth > width) {
+                return { str: '', width: 0 };
+            }
+            width -= suffixWidth;
+            const data = this._clipText(text, options, width, 0, text.length - 1);
+            data.str += suffix;
+            data.width += suffixWidth;
+            return data;
+        }
+    }
+    const textMeasure = new TextMeasureTool();
+    function setCustomAlphabetCharSet(str) {
+        customAlphabetCharSet = str;
+        fastTextMeasureCache.clear();
+    }
+    function restoreMeasureText() {
+        container.load(restoreTextMeasureModule);
+    }
+
+    let SuffixTextBeforeRenderContribution = class SuffixTextBeforeRenderContribution {
+        time = BaseRenderContributionTime.afterFillStroke;
+        useStyle = true;
+        order = 0;
+        drawShape(text, context, x, y, doFill, doStroke, fVisible, sVisible, textAttribute, drawContext, fillCb, strokeCb, doFillOrStroke) {
+            const { text: str, underline = textAttribute.underline, lineThrough = textAttribute.lineThrough, direction = textAttribute.direction, whiteSpace = textAttribute.whiteSpace, fontSize = textAttribute.fontSize, verticalMode = textAttribute.verticalMode, ellipsis = textAttribute.ellipsis, textAlign = textAttribute.textAlign, textBaseline = textAttribute.textBaseline, x: originX = textAttribute.x, y: originY = textAttribute.y } = text.attribute;
+            let isEmpty = false;
+            if (Array.isArray(text)) {
+                const layoutData = text.cache?.layoutData;
+                if (ellipsis && layoutData && layoutData.lines.every(line => line.str === '')) {
+                    isEmpty = true;
+                }
+            }
+            else {
+                const { cache } = text;
+                if (ellipsis && cache && cache.clipedText === '' && cache.clipedWidth === 0) {
+                    isEmpty = true;
+                }
+            }
+            if (!isEmpty) {
+                return;
+            }
+            const textStr = isString$4(ellipsis) ? ellipsis : '...';
+            const lineHeight = calculateLineHeight(text.attribute.lineHeight, fontSize) ?? fontSize;
+            let dy = 0;
+            if (lineHeight !== fontSize) {
+                if (textBaseline === 'top') {
+                    dy = (lineHeight - fontSize) / 2;
+                }
+                else if (textBaseline === 'middle') ;
+                else if (textBaseline === 'bottom') {
+                    dy = -(lineHeight - fontSize) / 2;
+                }
+                else ;
+            }
+            if (doStroke) {
+                if (strokeCb) {
+                    strokeCb(context, text.attribute, textAttribute);
+                }
+                else if (sVisible) {
+                    context.setStrokeStyle(text, text.attribute, originX - x, originY - y, textAttribute);
+                    context.strokeText(textStr, originX, originY + dy);
+                }
+            }
+            if (doFill) {
+                if (fillCb) {
+                    fillCb(context, text.attribute, textAttribute);
+                }
+                else if (fVisible) {
+                    context.setCommonStyle(text, text.attribute, originX - x, originY - y, textAttribute);
+                    context.fillText(textStr, originX, originY + dy);
+                    this.drawUnderLine(underline, lineThrough, text, originX, originY + dy, 0, textAttribute, context, textStr);
+                }
+            }
+        }
+        drawUnderLine(underline, lineThrough, text, x, y, z, textAttribute, context, textStr) {
+            if (lineThrough + underline <= 0) {
+                return;
+            }
+            const { textAlign = textAttribute.textAlign, textBaseline = textAttribute.textBaseline, fontSize = textAttribute.fontSize, fontFamily = textAttribute.fontFamily, fontWeight = textAttribute.fontWeight, fontStyle = textAttribute.fontStyle, fill = textAttribute.fill, opacity = textAttribute.opacity, underlineOffset = textAttribute.underlineOffset, underlineDash = textAttribute.underlineDash, fillOpacity = textAttribute.fillOpacity } = text.attribute;
+            if (!underline && !lineThrough) {
+                return;
+            }
+            const w = textMeasure.measureTextWidth(textStr, {
+                fontSize,
+                fontFamily,
+                fontWeight,
+                fontStyle
+            });
+            const offsetX = textDrawOffsetX(textAlign, w);
+            const offsetY = textLayoutOffsetY(textBaseline, fontSize, fontSize);
+            const attribute = { lineWidth: 0, stroke: fill, opacity, strokeOpacity: fillOpacity };
+            if (underline) {
+                attribute.lineWidth = underline;
+                context.setStrokeStyle(text, attribute, x, y, textAttribute);
+                context.setLineDash(underlineDash);
+                context.beginPath();
+                const dy = y + offsetY + fontSize + underlineOffset;
+                context.moveTo(x + offsetX, dy, z);
+                context.lineTo(x + offsetX + w, dy, z);
+                context.stroke();
+            }
+            if (lineThrough) {
+                attribute.lineWidth = lineThrough;
+                context.setStrokeStyle(text, attribute, x, y, textAttribute);
+                context.beginPath();
+                const dy = y + offsetY + fontSize / 2;
+                context.moveTo(x + offsetX, dy, z);
+                context.lineTo(x + offsetX + w, dy, z);
+                context.stroke();
+            }
+        }
+    };
+    SuffixTextBeforeRenderContribution = __decorate([
+        injectable()
+    ], SuffixTextBeforeRenderContribution);
+
     var splitModule = new ContainerModule((bind, unbind, isBound, rebind) => {
         if (isBound(SplitRectBeforeRenderContribution$1)) {
             rebind(SplitRectBeforeRenderContribution$1).to(SplitRectBeforeRenderContribution).inSingletonScope();
@@ -42873,6 +43151,8 @@
         bind(GroupRenderContribution).toService(ClipBodyGroupAfterRenderContribution);
         bind(VTableDrawItemInterceptorContribution).toSelf().inSingletonScope();
         bind(DrawItemInterceptor).toService(VTableDrawItemInterceptorContribution);
+        bind(SuffixTextBeforeRenderContribution).toSelf().inSingletonScope();
+        bind(TextRenderContribution).toService(SuffixTextBeforeRenderContribution);
     });
 
     function computeColsWidth(table, colStart, colEnd, update) {
@@ -42966,7 +43246,7 @@
                     table.scenegraph.updateColWidth(col, newColWidth - oldColWidths[col], true, true);
                 }
             }
-            table.scenegraph.updateContainer();
+            table.scenegraph.updateContainer(true);
         }
     }
     function computeColWidth(col, startRow, endRow, table, forceCompute = false) {
@@ -45580,9 +45860,10 @@
                 break;
             }
             [colStart, colEnd].forEach((col) => {
-                if (table._getCellStyle(col, row)?.textStick) {
+                const style = table._getCellStyle(col, row);
+                if (style?.textStick) {
                     const cellGroup = table.scenegraph.getCell(col, row);
-                    adjustCellContentHorizontalLayout(cellGroup, frozenColsWidth + table.tableX, table.tableNoFrameWidth - table.getRightFrozenColsWidth() + table.tableX, changedCells, table);
+                    adjustCellContentHorizontalLayout(cellGroup, frozenColsWidth + table.tableX, table.tableNoFrameWidth - table.getRightFrozenColsWidth() + table.tableX, changedCells, style?.textStickBaseOnAlign, table);
                 }
             });
         }
@@ -45591,10 +45872,10 @@
                 break;
             }
             [rowStart, rowEnd].forEach((row) => {
-                if (table._getCellStyle(col, row)?.textStick &&
-                    table.internalProps.layoutMap.rowHierarchyType !== 'tree') {
+                const style = table._getCellStyle(col, row);
+                if (style?.textStick && table.internalProps.layoutMap.rowHierarchyType !== 'tree') {
                     const cellGroup = table.scenegraph.getCell(col, row);
-                    adjustCellContentVerticalLayout(cellGroup, frozenRowsHeight + table.tableY, table.tableNoFrameHeight - table.getBottomFrozenRowsHeight() + table.tableY, changedCells, table);
+                    adjustCellContentVerticalLayout(cellGroup, frozenRowsHeight + table.tableY, table.tableNoFrameHeight - table.getBottomFrozenRowsHeight() + table.tableY, changedCells, style?.textStickBaseOnAlign, table);
                 }
             });
         }
@@ -45603,9 +45884,10 @@
                 break;
             }
             [rowStart, rowEnd].forEach((row) => {
-                if (table._getCellStyle(col, row)?.textStick) {
+                const style = table._getCellStyle(col, row);
+                if (style?.textStick) {
                     const cellGroup = table.scenegraph.getCell(col, row);
-                    adjustCellContentVerticalLayout(cellGroup, frozenRowsHeight + table.tableY, table.tableNoFrameHeight - table.getBottomFrozenRowsHeight() + table.tableY, changedCells, table);
+                    adjustCellContentVerticalLayout(cellGroup, frozenRowsHeight + table.tableY, table.tableNoFrameHeight - table.getBottomFrozenRowsHeight() + table.tableY, changedCells, style?.textStickBaseOnAlign, table);
                 }
             });
         }
@@ -45614,14 +45896,15 @@
                 break;
             }
             [colStart, colEnd].forEach((col) => {
+                const style = table._getCellStyle(col, row);
                 if (table._getCellStyle(col, row)?.textStick) {
                     const cellGroup = table.scenegraph.getCell(col, row);
-                    adjustCellContentHorizontalLayout(cellGroup, frozenColsWidth + table.tableX, table.tableNoFrameWidth - table.getRightFrozenColsWidth() + table.tableX, changedCells, table);
+                    adjustCellContentHorizontalLayout(cellGroup, frozenColsWidth + table.tableX, table.tableNoFrameWidth - table.getRightFrozenColsWidth() + table.tableX, changedCells, style?.textStickBaseOnAlign, table);
                 }
             });
         }
     }
-    function adjustCellContentVerticalLayout(cellGroup, minTop, maxTop, changedCells, table) {
+    function adjustCellContentVerticalLayout(cellGroup, minTop, maxTop, changedCells, textStickBaseOnAlign, table) {
         if (isNumber$4(cellGroup.mergeStartCol) &&
             isNumber$4(cellGroup.mergeStartRow) &&
             isNumber$4(cellGroup.mergeEndCol) &&
@@ -45630,15 +45913,15 @@
             for (let col = colStart; col <= colEnd; col++) {
                 for (let row = rowStart; row <= rowEnd; row++) {
                     const singleCellGroup = table.scenegraph.getCell(col, row);
-                    dealVertical(singleCellGroup, minTop, maxTop, changedCells);
+                    dealVertical(singleCellGroup, minTop, maxTop, changedCells, textStickBaseOnAlign);
                 }
             }
         }
         else {
-            dealVertical(cellGroup, minTop, maxTop, changedCells);
+            dealVertical(cellGroup, minTop, maxTop, changedCells, textStickBaseOnAlign);
         }
     }
-    function dealVertical(cellGroup, minTop, maxTop, changedCells) {
+    function dealVertical(cellGroup, minTop, maxTop, changedCells, textStickBaseOnAlign) {
         const graphic = cellGroup.getChildByName('text', true) || cellGroup.getChildByName('image', true);
         if (!graphic) {
             return;
@@ -45653,10 +45936,30 @@
                 return;
             }
         }
+        const textBaseline = graphic.textBaseline ?? 'top';
         graphic.AABBBounds.width();
         const textTop = graphic.globalAABBBounds.y1;
         const textBottom = graphic.globalAABBBounds.y2;
-        if (textTop < minTop) {
+        if (textBaseline === 'middle' && textStickBaseOnAlign) {
+            const cellTop = cellGroup.globalAABBBounds.y1 + (cellGroup.firstChild?.attribute.dy ?? 0);
+            const cellBottom = cellTop + (cellGroup.contentHeight ?? cellGroup.attribute.height ?? 0);
+            if (cellTop < minTop || cellBottom > maxTop) {
+                const visibleCellTop = Math.max(cellTop, minTop);
+                const visibleCellBottom = Math.min(cellBottom, maxTop);
+                const delta = graphic.globalTransMatrix.f - (visibleCellBottom + visibleCellTop) / 2;
+                !changedCells.has(`${cellGroup.col}-${cellGroup.row}`) &&
+                    changedCells.set(`${cellGroup.col}-${cellGroup.row}`, {
+                        col: cellGroup.col,
+                        row: cellGroup.row,
+                        dx: cellGroup.firstChild?.attribute.dx ?? 0,
+                        dy: cellGroup.firstChild?.attribute.dy ?? 0
+                    });
+                cellGroup.forEachChildren((child) => {
+                    child.setAttribute('dy', (child.attribute.dy ?? 0) - delta + 2);
+                });
+            }
+        }
+        else if (textTop < minTop) {
             const deltaHeight = textTop - minTop;
             !changedCells.has(`${cellGroup.col}-${cellGroup.row}`) &&
                 changedCells.set(`${cellGroup.col}-${cellGroup.row}`, {
@@ -45683,7 +45986,7 @@
             });
         }
     }
-    function adjustCellContentHorizontalLayout(cellGroup, minLeft, maxLeft, changedCells, table) {
+    function adjustCellContentHorizontalLayout(cellGroup, minLeft, maxLeft, changedCells, textStickBaseOnAlign, table) {
         if (isNumber$4(cellGroup.mergeStartCol) &&
             isNumber$4(cellGroup.mergeStartRow) &&
             isNumber$4(cellGroup.mergeEndCol) &&
@@ -45692,23 +45995,53 @@
             for (let col = colStart; col <= colEnd; col++) {
                 for (let row = rowStart; row <= rowEnd; row++) {
                     const singleCellGroup = table.scenegraph.getCell(col, row);
-                    dealHorizontal(singleCellGroup, minLeft, maxLeft, changedCells);
+                    dealHorizontal(singleCellGroup, minLeft, maxLeft, changedCells, textStickBaseOnAlign);
                 }
             }
         }
         else {
-            dealHorizontal(cellGroup, minLeft, maxLeft, changedCells);
+            dealHorizontal(cellGroup, minLeft, maxLeft, changedCells, textStickBaseOnAlign);
         }
     }
-    function dealHorizontal(cellGroup, minLeft, maxLeft, changedCells) {
-        const text = cellGroup.getChildByName('text', true);
-        if (!text) {
+    function dealHorizontal(cellGroup, minLeft, maxLeft, changedCells, textStickBaseOnAlign) {
+        const graphic = cellGroup.getChildByName('text', true) || cellGroup.getChildByName('image', true);
+        if (!graphic) {
             return;
         }
-        text.AABBBounds.width();
-        const textLeft = text.globalAABBBounds.x1;
-        const textRight = text.globalAABBBounds.x2;
-        if (textLeft < minLeft) {
+        if (graphic.type === 'image') {
+            const { image: url } = graphic.attribute;
+            if (!url || !graphic.resources) {
+                return;
+            }
+            const res = graphic.resources.get(url);
+            if (res.state !== 'success') {
+                return;
+            }
+        }
+        const textAlign = graphic.attribute.textAlign ?? graphic.textAlign ?? 'left';
+        graphic.AABBBounds.width();
+        const textLeft = graphic.globalAABBBounds.x1;
+        const textRight = graphic.globalAABBBounds.x2;
+        if (textAlign === 'center' && textStickBaseOnAlign) {
+            const cellLeft = cellGroup.globalAABBBounds.x1 + (cellGroup.firstChild?.attribute.dx ?? 0);
+            const cellRight = cellLeft + (cellGroup.contentWidth ?? cellGroup.attribute.width ?? 0);
+            if (cellLeft < minLeft || cellRight > maxLeft) {
+                const visibleCellLeft = Math.max(cellLeft, minLeft);
+                const visibleCellRight = Math.min(cellRight, maxLeft);
+                const delta = graphic.globalTransMatrix.e - (visibleCellRight + visibleCellLeft) / 2;
+                !changedCells.has(`${cellGroup.col}-${cellGroup.row}`) &&
+                    changedCells.set(`${cellGroup.col}-${cellGroup.row}`, {
+                        col: cellGroup.col,
+                        row: cellGroup.row,
+                        dx: cellGroup.firstChild?.attribute.dx ?? 0,
+                        dy: cellGroup.firstChild?.attribute.dy ?? 0
+                    });
+                cellGroup.forEachChildren((child) => {
+                    child.setAttribute('dx', (child.attribute.dx ?? 0) - delta + 2);
+                });
+            }
+        }
+        else if (textLeft < minLeft) {
             const deltaWidth = textLeft - minLeft;
             !changedCells.has(`${cellGroup.col}-${cellGroup.row}`) &&
                 changedCells.set(`${cellGroup.col}-${cellGroup.row}`, {
@@ -45775,7 +46108,7 @@
         scene.colHeaderGroup.setAttribute('x', scene.cornerHeaderGroup.attribute.width);
         scene.updateContainer();
         scene.updateBorderSizeAndPosition();
-        if (!scene.isPivot && !scene.transpose) {
+        if (!scene.isPivot && !scene.table.transpose) {
             scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1);
         }
         scene.hasFrozen = true;
@@ -45811,7 +46144,7 @@
         scene.colHeaderGroup.setAttribute('x', scene.cornerHeaderGroup.attribute.width);
         scene.updateContainer();
         scene.updateBorderSizeAndPosition();
-        if (!scene.isPivot && !scene.transpose) {
+        if (!scene.isPivot && !scene.table.transpose) {
             scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1);
         }
         scene.hasFrozen = true;
@@ -46270,151 +46603,6 @@
         return x;
     }
 
-    let customAlphabetCharSet = '';
-    const textMeasureModule = new ContainerModule((bind, unbind, isBound, rebind) => {
-        if (isBound(TextMeasureContribution)) {
-            rebind(TextMeasureContribution).to(FastTextMeasureContribution).inSingletonScope();
-        }
-        else {
-            bind(TextMeasureContribution).to(FastTextMeasureContribution).inSingletonScope();
-        }
-    });
-    const restoreTextMeasureModule = new ContainerModule((bind, unbind, isBound, rebind) => {
-        if (isBound(TextMeasureContribution)) {
-            rebind(TextMeasureContribution).to(DefaultTextMeasureContribution).inSingletonScope();
-        }
-        else {
-            bind(TextMeasureContribution).to(DefaultTextMeasureContribution).inSingletonScope();
-        }
-    });
-    const initTextMeasure = (textSpec, option, useNaiveCanvas) => {
-        return new TextMeasure$1({
-            defaultFontParams: {
-                fontFamily: DefaultTextStyle.fontFamily,
-                fontSize: DefaultTextStyle.fontSize
-            },
-            getTextBounds: useNaiveCanvas ? undefined : getTextBounds$1,
-            specialCharSet: `{}()//&-/: .,@%'"~…=${TextMeasure$1.ALPHABET_CHAR_SET}${TextMeasure$1.ALPHABET_CHAR_SET.toUpperCase()}0123456789${customAlphabetCharSet}`,
-            ...(option ?? {})
-        }, textSpec);
-    };
-    const fastTextMeasureCache = new Map();
-    function getFastTextMeasure(fontSize, fontWeight, fontFamily, fontStyle = 'normal') {
-        const key = `${fontSize}-${fontWeight}-${fontFamily}-${fontStyle}`;
-        const cache = fastTextMeasureCache.get(key);
-        if (cache) {
-            return cache;
-        }
-        const fastTextMeasure = initTextMeasure({
-            fontSize,
-            fontFamily,
-            fontWeight,
-            fontStyle
-        });
-        fastTextMeasureCache.set(key, fastTextMeasure);
-        return fastTextMeasure;
-    }
-    class FastTextMeasureContribution extends DefaultTextMeasureContribution {
-        measureTextWidth(text, options) {
-            const { fontSize, fontFamily = 'Arial,sans-serif', fontWeight = 'normal', fontStyle = 'normal' } = options;
-            const fastTextMeasure = getFastTextMeasure(fontSize, fontWeight, fontFamily, fontStyle);
-            const textMeasure = fastTextMeasure.measure(text);
-            return textMeasure.width;
-        }
-        measureText(text, options) {
-            const { fontSize, fontFamily = 'Arial,sans-serif', fontWeight = 'normal', fontStyle = 'normal' } = options;
-            const fastTextMeasure = getFastTextMeasure(fontSize, fontWeight, fontFamily, fontStyle);
-            const textMeasure = fastTextMeasure.measure(text);
-            return textMeasure;
-        }
-    }
-    class TextMeasureTool {
-        measureText(text, options) {
-            const { fontSize, fontFamily = 'Arial,sans-serif', fontWeight = 'normal', fontStyle = 'normal' } = options;
-            const fastTextMeasure = getFastTextMeasure(fontSize, fontWeight, fontFamily, fontStyle);
-            const textMeasure = fastTextMeasure.measure(text);
-            return textMeasure;
-        }
-        measureTextWidth(text, options) {
-            const { fontSize, fontFamily = 'Arial,sans-serif', fontWeight = 'normal', fontStyle = 'normal' } = options;
-            const fastTextMeasure = getFastTextMeasure(fontSize, fontWeight, fontFamily, fontStyle);
-            const textMeasure = fastTextMeasure.measure(text);
-            return textMeasure.width;
-        }
-        clipText(text, options, width) {
-            if (text.length === 0) {
-                return { str: '', width: 0 };
-            }
-            let length = this.measureTextWidth(text, options);
-            if (length <= width) {
-                return { str: text, width: length };
-            }
-            length = this.measureTextWidth(text[0], options);
-            if (length > width) {
-                return { str: '', width: 0 };
-            }
-            return this._clipText(text, options, width, 0, text.length - 1);
-        }
-        _clipText(text, options, width, leftIdx, rightIdx) {
-            const middleIdx = Math.floor((leftIdx + rightIdx) / 2);
-            const subText = text.substring(0, middleIdx + 1);
-            const strWidth = this.measureTextWidth(subText, options);
-            let length;
-            if (strWidth > width) {
-                if (subText.length <= 1) {
-                    return { str: '', width: 0 };
-                }
-                const str = text.substring(0, middleIdx);
-                length = this.measureTextWidth(str, options);
-                if (length <= width) {
-                    return { str, width: length };
-                }
-                return this._clipText(text, options, width, leftIdx, middleIdx);
-            }
-            else if (strWidth < width) {
-                if (middleIdx >= text.length - 1) {
-                    return { str: text, width: this.measureTextWidth(text, options) };
-                }
-                const str = text.substring(0, middleIdx + 2);
-                length = this.measureTextWidth(str, options);
-                if (length >= width) {
-                    return { str: subText, width: strWidth };
-                }
-                return this._clipText(text, options, width, middleIdx, rightIdx);
-            }
-            return { str: subText, width: strWidth };
-        }
-        clipTextWithSuffix(text, options, width, suffix) {
-            if (suffix === '') {
-                return this.clipText(text, options, width);
-            }
-            if (text.length === 0) {
-                return { str: '', width: 0 };
-            }
-            const length = this.measureTextWidth(text, options);
-            if (length <= width) {
-                return { str: text, width: length };
-            }
-            const suffixWidth = this.measureTextWidth(suffix, options);
-            if (suffixWidth > width) {
-                return { str: '', width: 0 };
-            }
-            width -= suffixWidth;
-            const data = this._clipText(text, options, width, 0, text.length - 1);
-            data.str += suffix;
-            data.width += suffixWidth;
-            return data;
-        }
-    }
-    const textMeasure = new TextMeasureTool();
-    function setCustomAlphabetCharSet(str) {
-        customAlphabetCharSet = str;
-        fastTextMeasureCache.clear();
-    }
-    function restoreMeasureText() {
-        container.load(restoreTextMeasureModule);
-    }
-
     function hideHoverIcon(col, row, scene) {
         if (col === -1 || row === -1) {
             return;
@@ -47064,13 +47252,13 @@
         stage;
         table;
         isPivot;
-        transpose;
         hasFrozen;
         frozenColCount;
         frozenRowCount;
         clear;
         mergeMap;
         _dealAutoFillHeightOriginRowsHeight;
+        _needUpdateContainer = false;
         constructor(table) {
             this.table = table;
             this.hasFrozen = false;
@@ -47142,7 +47330,6 @@
         }
         initSceneGraph() {
             this.isPivot = this.table.isPivotTable();
-            this.transpose = this.table.options.transpose;
             initSceneGraph(this);
         }
         clearCells() {
@@ -47460,7 +47647,7 @@
         updateColWidth(col, detaX, skipUpdateContainer, skipTableWidthMap) {
             updateColWidth(this, col, Math.round(detaX), skipTableWidthMap);
             if (!skipUpdateContainer) {
-                this.updateContainer();
+                this.updateContainer(true);
             }
         }
         updateChartSize(col) {
@@ -47470,7 +47657,7 @@
             this.table.isPivotChart() && updateChartState(this, datum);
         }
         updateCheckboxCellState(col, row, checked) {
-            if (this.transpose) {
+            if (this.table.transpose) {
                 this.bodyGroup.children?.forEach((columnGroup) => {
                     columnGroup
                         .getChildAt(row)
@@ -47494,7 +47681,7 @@
             }
         }
         updateHeaderCheckboxCellState(col, row, checked) {
-            if (this.transpose) {
+            if (this.table.transpose) {
                 this.rowHeaderGroup.children?.forEach((columnGroup) => {
                     columnGroup
                         .getChildAt(row)
@@ -47805,7 +47992,7 @@
             this.updateNextFrame();
         }
         afterScenegraphCreated() {
-            if (!this.isPivot && !this.transpose) {
+            if (!this.isPivot && !this.table.transpose) {
                 this.component.setFrozenColumnShadow(this.table.frozenColCount - 1);
             }
             this.table.stateManager.checkFrozen();
@@ -48021,11 +48208,26 @@
             this.bottomFrozenGroup.setAttribute('x', this.table.getFrozenColsWidth());
             this.bodyGroup.setAttribute('x', this.rowHeaderGroup.attribute.width);
         }
-        updateContainer() {
-            this.updateContainerAttrWidthAndX();
-            this.updateTableSize();
-            this.component.updateScrollBar();
-            this.updateNextFrame();
+        updateContainer(async = false) {
+            if (async) {
+                if (!this._needUpdateContainer) {
+                    this._needUpdateContainer = true;
+                    setTimeout(() => {
+                        this.updateContainerAttrWidthAndX();
+                        this.updateTableSize();
+                        this.component.updateScrollBar();
+                        this.updateNextFrame();
+                        this._needUpdateContainer = false;
+                    }, 0);
+                }
+            }
+            else {
+                this.updateContainerAttrWidthAndX();
+                this.updateTableSize();
+                this.component.updateScrollBar();
+                this.updateNextFrame();
+                this._needUpdateContainer = false;
+            }
         }
         updateCellContentWhileResize(col, row) {
             const type = this.table.getBodyColumnType(col, row);
@@ -48127,7 +48329,7 @@
         }
         sortCell() {
             if (this.isPivot) ;
-            else if (this.transpose) {
+            else if (this.table.transpose) {
                 this.proxy.sortCellHorizontal();
             }
             else {
@@ -48206,7 +48408,7 @@
                 }
             }
             this.table.stateManager.checkFrozen();
-            if (!this.isPivot && !this.transpose) {
+            if (!this.isPivot && !this.table.transpose) {
                 this.component.setFrozenColumnShadow(this.table.frozenColCount - 1);
             }
             this.component.updateScrollBar();
@@ -48217,7 +48419,7 @@
             this.recalculateColWidths();
             this.recalculateRowHeights();
             this.table.stateManager.checkFrozen();
-            if (!this.isPivot && !this.transpose) {
+            if (!this.isPivot && !this.table.transpose) {
                 this.component.setFrozenColumnShadow(this.table.frozenColCount - 1);
             }
             this.component.updateScrollBar();
@@ -50241,39 +50443,6 @@
     function bindTableGroupListener(eventManager) {
         const table = eventManager.table;
         const stateManager = table.stateManager;
-        document.body.addEventListener('pointerdown', e => {
-            table.eventManager.LastBodyPointerXY = { x: e.x, y: e.y };
-            table.eventManager.isDown = true;
-        });
-        document.addEventListener('pointerup', e => {
-            table.eventManager.LastBodyPointerXY = null;
-            table.eventManager.isDown = false;
-            table.eventManager.isDraging = false;
-        });
-        document.body.addEventListener('pointermove', (e) => {
-            if (table.eventManager.isDown && table.eventManager.LastBodyPointerXY) {
-                const lastX = table.eventManager.LastBodyPointerXY?.x ?? e.x;
-                const lastY = table.eventManager.LastBodyPointerXY?.y ?? e.y;
-                if (Math.abs(lastX - e.x) > 1 || Math.abs(lastY - e.y) > 1) {
-                    table.eventManager.isDraging = true;
-                }
-            }
-            const { x, y } = table._getMouseAbstractPoint(e, false);
-            if (stateManager.interactionState === InteractionState.scrolling) {
-                return;
-            }
-            if (stateManager.interactionState === InteractionState.grabing) {
-                if (stateManager.isResizeCol()) {
-                    eventManager.dealColumnResize(x, y);
-                    if (table.hasListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN)) {
-                        table.fireListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN, {
-                            col: table.stateManager.columnResize.col,
-                            colWidth: table.getColWidth(table.stateManager.columnResize.col)
-                        });
-                    }
-                }
-            }
-        });
         table.scenegraph.tableGroup.addEventListener('pointermove', (e) => {
             const lastX = table.eventManager.LastPointerXY?.x ?? e.x;
             const lastY = table.eventManager.LastPointerXY?.y ?? e.y;
@@ -51184,12 +51353,12 @@
                     const ranges = table.stateManager.select.ranges;
                     const col = Math.min(ranges[0].start.col, ranges[0].end.col);
                     const row = Math.min(ranges[0].start.row, ranges[0].end.row);
+                    const values = [];
                     navigator.clipboard.read().then(clipboardItems => {
                         for (const item of clipboardItems) {
                             if (item.types.includes('text/html')) {
                                 item.getType('text/html').then(blob => {
                                     blob.text().then(pastedData => {
-                                        const values = [];
                                         if (pastedData && /(<table)|(<TABLE)/g.test(pastedData)) {
                                             const regex = /<tr[^>]*>(.*?)<\/tr>/gs;
                                             const matches = Array.from(pastedData.matchAll(regex));
@@ -51209,22 +51378,33 @@
                                                 });
                                                 values.push(rowValues);
                                             }
+                                            table.changeCellValues(col, row, values, true);
                                         }
                                         else {
-                                            const rows = pastedData.split('\n');
-                                            rows.forEach(function (rowCells, rowIndex) {
-                                                const cells = rowCells.split('\t');
-                                                const rowValues = [];
-                                                values.push(rowValues);
-                                                cells.forEach(function (cell, cellIndex) {
-                                                    if (cellIndex === cells.length - 1) {
-                                                        cell = cell.trim();
+                                            navigator.clipboard.read().then(clipboardItems => {
+                                                for (const item of clipboardItems) {
+                                                    if (item.types.includes('text/plain')) {
+                                                        item.getType('text/plain').then(blob => {
+                                                            blob.text().then(pastedData => {
+                                                                const rows = pastedData.split('\n');
+                                                                rows.forEach(function (rowCells, rowIndex) {
+                                                                    const cells = rowCells.split('\t');
+                                                                    const rowValues = [];
+                                                                    values.push(rowValues);
+                                                                    cells.forEach(function (cell, cellIndex) {
+                                                                        if (cellIndex === cells.length - 1) {
+                                                                            cell = cell.trim();
+                                                                        }
+                                                                        rowValues.push(cell);
+                                                                    });
+                                                                });
+                                                                table.changeCellValues(col, row, values, true);
+                                                            });
+                                                        });
                                                     }
-                                                    rowValues.push(cell);
-                                                });
+                                                }
                                             });
                                         }
-                                        table.changeCellValues(col, row, values, true);
                                     });
                                 });
                             }
@@ -51232,26 +51412,22 @@
                                 item.getType('text/plain').then(blob => {
                                     blob.text().then(pastedData => {
                                         const rows = pastedData.replace(/\r(?!\n)/g, '\r\n').split('\r\n');
-                                        const values = [];
                                         if (rows.length > 1 && rows[rows.length - 1] === '') {
                                             rows.pop();
                                         }
                                         rows.forEach(function (rowCells, rowIndex) {
                                             const cells = rowCells.split('\t');
-                                            const rowValues = [];
-                                            values.push(rowValues);
                                             cells.forEach(function (cell, cellIndex) {
                                                 if (cell.includes('\n')) {
                                                     cell = cell
                                                         .replace(/^"(.*)"$/, '$1')
                                                         .replace(/["]*/g, match => new Array(Math.floor(match.length / 2)).fill('"').join(''));
                                                 }
-                                                rowValues.push(cell);
                                             });
                                         });
-                                        table.changeCellValues(col, row, values, true);
                                     });
                                 });
+                                table.changeCellValues(col, row, values, true);
                             }
                             else ;
                         }
@@ -51270,6 +51446,57 @@
             }
             table.resize();
         });
+        const globalPointerdownCallback = (e) => {
+            table.eventManager.LastBodyPointerXY = { x: e.x, y: e.y };
+            table.eventManager.isDown = true;
+        };
+        eventManager.globalEventListeners.push({
+            name: 'pointerdown',
+            env: 'body',
+            callback: globalPointerdownCallback
+        });
+        document.body.addEventListener('pointerdown', globalPointerdownCallback);
+        const globalPointerupCallback = (e) => {
+            table.eventManager.LastBodyPointerXY = null;
+            table.eventManager.isDown = false;
+            table.eventManager.isDraging = false;
+        };
+        eventManager.globalEventListeners.push({
+            name: 'pointerup',
+            env: 'document',
+            callback: globalPointerupCallback
+        });
+        document.addEventListener('pointerup', globalPointerupCallback);
+        const globalPointermoveCallback = (e) => {
+            if (table.eventManager.isDown && table.eventManager.LastBodyPointerXY) {
+                const lastX = table.eventManager.LastBodyPointerXY?.x ?? e.x;
+                const lastY = table.eventManager.LastBodyPointerXY?.y ?? e.y;
+                if (Math.abs(lastX - e.x) > 1 || Math.abs(lastY - e.y) > 1) {
+                    table.eventManager.isDraging = true;
+                }
+            }
+            const { x, y } = table._getMouseAbstractPoint(e, false);
+            if (stateManager.interactionState === InteractionState.scrolling) {
+                return;
+            }
+            if (stateManager.interactionState === InteractionState.grabing) {
+                if (stateManager.isResizeCol()) {
+                    eventManager.dealColumnResize(x, y);
+                    if (table.hasListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN)) {
+                        table.fireListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN, {
+                            col: table.stateManager.columnResize.col,
+                            colWidth: table.getColWidth(table.stateManager.columnResize.col)
+                        });
+                    }
+                }
+            }
+        };
+        eventManager.globalEventListeners.push({
+            name: 'pointermove',
+            env: 'body',
+            callback: globalPointermoveCallback
+        });
+        document.body.addEventListener('pointermove', globalPointermoveCallback);
     }
 
     function bindTouchListener(eventManager) {
@@ -51288,7 +51515,7 @@
                 timestamp: Date.now()
             });
         });
-        window.addEventListener('touchmove', (e) => {
+        const globalTouchMoveCallback = (e) => {
             if (eventManager.touchMove) {
                 e.preventDefault();
             }
@@ -51314,8 +51541,14 @@
                     (Math.abs(deltaY) <= Math.abs(deltaX) && deltaX !== 0 && isHorizontalScrollable(deltaX, stateManager)))) {
                 e.preventDefault();
             }
-        }, { passive: false });
-        window.addEventListener('touchend', (e) => {
+        };
+        window.addEventListener('touchmove', globalTouchMoveCallback, { passive: false });
+        eventManager.globalEventListeners.push({
+            name: 'touchmove',
+            env: 'window',
+            callback: globalTouchMoveCallback
+        });
+        const globalTouchEndCallback = (e) => {
             eventManager.touchEnd = true;
             eventManager.touchMove = false;
             if (!eventManager.isTouchdown || !isTouchEvent$1(e)) {
@@ -51338,8 +51571,14 @@
             }
             eventManager.isTouchdown = false;
             eventManager.touchMovePoints = [];
+        };
+        window.addEventListener('touchend', globalTouchEndCallback);
+        eventManager.globalEventListeners.push({
+            name: 'touchend',
+            env: 'window',
+            callback: globalTouchEndCallback
         });
-        window.addEventListener('touchcancel', (e) => {
+        const globalTouchCancelCallback = (e) => {
             eventManager.touchEnd = true;
             eventManager.touchMove = false;
             if (!eventManager.isTouchdown) {
@@ -51347,6 +51586,12 @@
             }
             eventManager.isTouchdown = false;
             eventManager.touchMovePoints = [];
+        };
+        window.addEventListener('touchcancel', globalTouchCancelCallback);
+        eventManager.globalEventListeners.push({
+            name: 'touchcancel',
+            env: 'window',
+            callback: globalTouchCancelCallback
         });
     }
     function isTouchEvent$1(e) {
@@ -51522,6 +51767,7 @@
         LastBodyPointerXY;
         isDown = false;
         isDraging = false;
+        globalEventListeners = [];
         constructor(table) {
             this.table = table;
             if (Env.mode === 'node') {
@@ -51748,6 +51994,18 @@
         }
         release() {
             this.gesture.release();
+            this.globalEventListeners.forEach(item => {
+                if (item.env === 'document') {
+                    document.removeEventListener(item.name, item.callback);
+                }
+                else if (item.env === 'body') {
+                    document.body.removeEventListener(item.name, item.callback);
+                }
+                else if (item.env === 'window') {
+                    window.removeEventListener(item.name, item.callback);
+                }
+            });
+            this.globalEventListeners = [];
         }
     }
 
@@ -51795,7 +52053,7 @@
             this._barHeight = style.barHeight ?? 3;
             this._barHeight = style.barHeight ?? 3;
             this._barBottom = style.barBottom ?? 0;
-            this._barPadding = style.barPadding ?? [1, 1, 1, 1];
+            this._barPadding = style.barPadding ?? [0, 0, 0, 0];
             this._showBarMark = style.showBarMark ?? false;
             this._barMarkPositiveColor = style.barMarkPositiveColor ?? '#4dbd74';
             this._barMarkNegativeColor = style.barMarkNegativeColor ?? '#f86c6b';
@@ -54949,7 +55207,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.21.2-alpha.0";
+        version = "0.21.2";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -66537,7 +66795,7 @@
     }
 
     registerForVrender();
-    const version = "0.21.2-alpha.0";
+    const version = "0.21.2";
     function getIcons() {
         return get$2();
     }