@visactor/vtable-plugins 1.17.7-alpha.1 → 1.18.0

package/dist/vtable-plugins.js

@@ -1,10 +1,29 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-    typeof define === 'function' && define.amd ? define(['exports'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.VTable = global.VTable || {}, global.VTable.plugins = {})));
-})(this, (function (exports) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@visactor/vtable')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@visactor/vtable'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.VTable = global.VTable || {}, global.VTable.plugins = {}), global.VTable));
+})(this, (function (exports, VTable) { 'use strict';
+
+    function _interopNamespaceDefault(e) {
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n.default = e;
+        return Object.freeze(n);
+    }
 
-    function isInteger(value) {
+    var VTable__namespace = /*#__PURE__*/_interopNamespaceDefault(VTable);
+
+    function isInteger$1(value) {
         return Math.floor(value) === value;
     }
     class CarouselAnimationPlugin {
@@ -92,11 +111,11 @@
                 this.row = customRow.distRow;
                 animation = customRow.animation ?? true;
             }
-            else if (isInteger(this.row) && this.table.scenegraph.proxy.screenTopRow !== this.row) {
+            else if (isInteger$1(this.row) && this.table.scenegraph.proxy.screenTopRow !== this.row) {
                 this.row = this.table.frozenRowCount;
                 animation = false;
             }
-            else if (!isInteger(this.row) && this.table.scenegraph.proxy.screenTopRow !== Math.floor(this.row)) {
+            else if (!isInteger$1(this.row) && this.table.scenegraph.proxy.screenTopRow !== Math.floor(this.row)) {
                 this.row = this.table.frozenRowCount;
                 animation = false;
             }
@@ -120,11 +139,11 @@
                 this.col = customCol.distCol;
                 animation = customCol.animation ?? true;
             }
-            else if (isInteger(this.col) && this.table.scenegraph.proxy.screenLeftCol !== this.col) {
+            else if (isInteger$1(this.col) && this.table.scenegraph.proxy.screenLeftCol !== this.col) {
                 this.col = this.table.frozenColCount;
                 animation = false;
             }
-            else if (!isInteger(this.col) && this.table.scenegraph.proxy.screenLeftCol !== Math.floor(this.col)) {
+            else if (!isInteger$1(this.col) && this.table.scenegraph.proxy.screenLeftCol !== Math.floor(this.col)) {
                 this.col = this.table.frozenColCount;
                 animation = false;
             }
@@ -902,6 +921,25 @@
       clone() {
         return new OBBBounds(this);
       }
+      getRotatedCorners() {
+        const originPoint = {
+          x: (this.x1 + this.x2) / 2,
+          y: (this.y1 + this.y2) / 2
+        };
+        return [rotatePoint({
+          x: this.x1,
+          y: this.y1
+        }, this.angle, originPoint), rotatePoint({
+          x: this.x2,
+          y: this.y1
+        }, this.angle, originPoint), rotatePoint({
+          x: this.x1,
+          y: this.y2
+        }, this.angle, originPoint), rotatePoint({
+          x: this.x2,
+          y: this.y2
+        }, this.angle, originPoint)];
+      }
     }
 
     class Matrix {
@@ -2954,7 +2992,8 @@
       filter: "",
       cursor: null,
       html: null,
-      react: null
+      react: null,
+      vue: null
     }, DefaultFillStyle), DefaultStrokeStyle), DefaultLayout), DefaultPickStyle);
     const DefaultConnectAttribute = {
       connectedType: "none",
@@ -3062,6 +3101,12 @@
       cornerRadius: 0,
       closePath: !0
     });
+    const DefaultStarAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
+      width: 100,
+      height: 100,
+      spikes: 5,
+      thickness: .5
+    });
     const DefaultRectAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
       width: 0,
       height: 0,
@@ -3154,6 +3199,7 @@
         text: DefaultTextAttribute,
         rect: DefaultRectAttribute,
         polygon: DefaultPolygonAttribute,
+        star: DefaultStarAttribute,
         richtext: DefaultRichTextAttribute,
         richtextIcon: DefaultRichTextIconAttribute,
         image: DefaultImageAttribute,
@@ -3172,6 +3218,7 @@
         text: Object.assign({}, defaultThemeObj.text),
         rect: Object.assign({}, defaultThemeObj.rect),
         polygon: Object.assign({}, defaultThemeObj.polygon),
+        star: Object.assign({}, defaultThemeObj.star),
         richtext: Object.assign({}, defaultThemeObj.richtext),
         richtextIcon: Object.assign({}, defaultThemeObj.richtextIcon),
         image: Object.assign({}, defaultThemeObj.image),
@@ -3651,7 +3698,7 @@
       }
       _composedDetailPath(params) {
         if (params && params.graphic) {
-          const g = this.pickParams.graphic;
+          const g = params.graphic;
           if (g.stage) {
             const path = g.stage.eventSystem.manager.propagationPath(g);
             this.detailPath.push(path), this._composedDetailPath(params.params);
@@ -5237,6 +5284,7 @@
     genNumberType();
     genNumberType();
     genNumberType();
+    genNumberType();
     const SVG_PARSE_ATTRIBUTE_MAP = {
       "stroke-linecap": "lineCap",
       "stroke-linejoin": "lineJoin",
@@ -5487,6 +5535,9 @@
           y: y
         });
       }
+      setWidthHeightWithoutTransform(aabbBounds) {
+        this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
+      }
       setAttributes(params) {
         let forceUpdateTag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
         let context = arguments.length > 2 ? arguments[2] : undefined;
@@ -5775,16 +5826,17 @@
             const {
               scaleX: scaleX,
               scaleY: scaleY,
-              angle: angle
+              angle: angle,
+              scaleCenter: scaleCenter
             } = this.attribute;
             return tempBounds.copy(this._AABBBounds), this.setAttributes({
-              scaleX: 1,
-              scaleY: 1,
-              angle: 0
+              angle: 0,
+              scaleCenter: null
             }), params.b = this.AABBBounds.clone(), this._AABBBounds.copy(tempBounds), this.setAttributes({
               scaleX: scaleX,
               scaleY: scaleY,
-              angle: angle
+              angle: angle,
+              scaleCenter: scaleCenter
             }), params.b;
           };
         if ("string" == typeof anchor[0]) {
@@ -5812,7 +5864,7 @@
         } = this.attribute;
         let _anchor = [0, 0];
         const params = {};
-        if (anchor && (_anchor = this.getAnchor(anchor, params)), !scaleCenter || 1 === scaleX && 1 === scaleY) normalTransform(this._transMatrix, this._transMatrix.reset(), x, y, scaleX, scaleY, angle, anchor && _anchor);else {
+        if (anchor && angle && (_anchor = this.getAnchor(anchor, params)), !scaleCenter || 1 === scaleX && 1 === scaleY) normalTransform(this._transMatrix, this._transMatrix.reset(), x, y, scaleX, scaleY, angle, anchor && _anchor);else {
           const m = this._transMatrix;
           m.reset(), m.translate(_anchor[0], _anchor[1]), m.rotate(angle), m.translate(-_anchor[0], -_anchor[1]), m.translate(x, y), _anchor = this.getAnchor(scaleCenter, params), application.transformUtil.fromMatrix(m, m).scale(scaleX, scaleY, {
             x: _anchor[0],
@@ -6060,7 +6112,7 @@
           tb1: tb1,
           tb2: tb2
         } = application.graphicService.updateTempAABBBounds(aabbBounds);
-        return updateBoundsOfCommonOuterBorder(attribute, rectTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), application.graphicService.transformAABBBounds(attribute, aabbBounds, rectTheme, !1, this), aabbBounds;
+        return updateBoundsOfCommonOuterBorder(attribute, rectTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, application.graphicService.transformAABBBounds(attribute, aabbBounds, rectTheme, !1, this), aabbBounds;
       }
       needUpdateTags(keys) {
         return super.needUpdateTags(keys, RECT_UPDATE_TAG_KEY);
@@ -6091,8 +6143,9 @@
       return new Rect(attributes);
     }
 
-    function isSameRange$1(range1, range2) {
-      return !range1 && !range2 || !(!range1 || !range2) && range1.start.col === range2.start.col && range1.start.row === range2.start.row && range1.end.col === range2.end.col && range1.end.row === range2.end.row;
+    function isSameRange$2(range1, range2) {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      return !range1 && !range2 || !(!range1 || !range2) && (null === (_a = range1.start) || void 0 === _a ? void 0 : _a.col) === (null === (_b = range2.start) || void 0 === _b ? void 0 : _b.col) && (null === (_c = range1.start) || void 0 === _c ? void 0 : _c.row) === (null === (_d = range2.start) || void 0 === _d ? void 0 : _d.row) && (null === (_e = range1.end) || void 0 === _e ? void 0 : _e.col) === (null === (_f = range2.end) || void 0 === _f ? void 0 : _f.col) && (null === (_g = range1.end) || void 0 === _g ? void 0 : _g.row) === (null === (_h = range2.end) || void 0 === _h ? void 0 : _h.row);
     }
 
     const isNode = "undefined" == typeof window || void 0 === window.window;
@@ -6129,7 +6182,7 @@
             this._opacity = options?.opacity ?? 0.5;
         }
         setInvertHighlightRange(range) {
-            if (isSameRange$1(this.range, range)) {
+            if (isSameRange$2(this.range, range)) {
                 return;
             }
             this.range = range;
@@ -6310,18 +6363,629 @@
                     };
                 }
             }
-            if (this.options?.colHighlight !== false && !isSameRange(this.colHeaderRange, colHeaderRange)) {
+            if (this.options?.colHighlight !== false && !isSameRange$1(this.colHeaderRange, colHeaderRange)) {
                 this.colHeaderRange && this.table.arrangeCustomCellStyle({ range: this.colHeaderRange }, undefined);
                 colHeaderRange && this.table.arrangeCustomCellStyle({ range: colHeaderRange }, 'col-highlight');
                 this.colHeaderRange = colHeaderRange;
             }
-            if (this.options?.rowHighlight !== false && !isSameRange(this.rowHeaderRange, rowHeaderRange)) {
+            if (this.options?.rowHighlight !== false && !isSameRange$1(this.rowHeaderRange, rowHeaderRange)) {
                 this.rowHeaderRange && this.table.arrangeCustomCellStyle({ range: this.rowHeaderRange }, undefined);
                 rowHeaderRange && this.table.arrangeCustomCellStyle({ range: rowHeaderRange }, 'row-highlight');
                 this.rowHeaderRange = rowHeaderRange;
             }
         }
     }
+    function isSameRange$1(a, b) {
+        if (a === undefined && b === undefined) {
+            return true;
+        }
+        if (a === undefined || b === undefined) {
+            return false;
+        }
+        return (a.start.col === b.start.col && a.start.row === b.start.row && a.end.col === b.end.col && a.end.row === b.end.row);
+    }
+
+    class AddRowColumnPlugin {
+        id = 'add-row-column';
+        runTime = [
+            VTable__namespace.TABLE_EVENT_TYPE.MOUSEENTER_CELL,
+            VTable__namespace.TABLE_EVENT_TYPE.MOUSELEAVE_CELL,
+            VTable__namespace.TABLE_EVENT_TYPE.MOUSELEAVE_TABLE
+        ];
+        pluginOptions;
+        table;
+        hoverCell;
+        hideAllTimeoutId_addColumn;
+        hideAllTimeoutId_addRow;
+        leftDotForAddColumn;
+        rightDotForAddColumn;
+        addIconForAddColumn;
+        addLineForAddColumn;
+        topDotForAddRow;
+        bottomDotForAddRow;
+        addIconForAddRow;
+        addLineForAddRow;
+        constructor(pluginOptions = {
+            addColumnEnable: true,
+            addRowEnable: true
+        }) {
+            this.pluginOptions = pluginOptions;
+            this.pluginOptions.addColumnEnable = this.pluginOptions.addColumnEnable ?? true;
+            this.pluginOptions.addRowEnable = this.pluginOptions.addRowEnable ?? true;
+            if (this.pluginOptions.addColumnEnable) {
+                this.initAddColumnDomElement();
+                this.bindEventForAddColumn();
+            }
+            if (this.pluginOptions.addRowEnable) {
+                this.initAddRowDomElement();
+                this.bindEventForAddRow();
+            }
+        }
+        run(...args) {
+            const eventArgs = args[0];
+            const runTime = args[1];
+            const table = args[2];
+            this.table = table;
+            if (runTime === VTable__namespace.TABLE_EVENT_TYPE.MOUSEENTER_CELL) {
+                clearTimeout(this.hideAllTimeoutId_addColumn);
+                clearTimeout(this.hideAllTimeoutId_addRow);
+                const canvasBounds = table.canvas.getBoundingClientRect();
+                const cell = table.getCellAtRelativePosition(eventArgs.event.clientX - canvasBounds.left, eventArgs.event.clientY - canvasBounds.top);
+                this.hoverCell = cell;
+                const cellRect = table.getCellRelativeRect(cell.col, cell.row);
+                if (this.pluginOptions.addColumnEnable) {
+                    const isRowSerierNumberCol = table.isSeriesNumber(cell.col, 0);
+                    this.showDotForAddColumn(canvasBounds.top - 6, cellRect.left + canvasBounds.left, cellRect.right + canvasBounds.left, !isRowSerierNumberCol);
+                }
+                if (this.pluginOptions.addRowEnable) {
+                    const isHeader = table.isHeader(cell.col, cell.row);
+                    this.showDotForAddRow(cellRect.top + canvasBounds.top, canvasBounds.left - 6, cellRect.bottom + canvasBounds.top, !isHeader, !isHeader);
+                }
+            }
+            else if (runTime === VTable__namespace.TABLE_EVENT_TYPE.MOUSELEAVE_CELL) ;
+            else if (runTime === VTable__namespace.TABLE_EVENT_TYPE.MOUSELEAVE_TABLE) {
+                if (this.pluginOptions.addColumnEnable) {
+                    this.delayHideAllForAddColumn();
+                }
+                if (this.pluginOptions.addRowEnable) {
+                    this.delayHideAllForAddRow();
+                }
+            }
+        }
+        initAddColumnDomElement() {
+            this.leftDotForAddColumn = document.createElement('div');
+            this.leftDotForAddColumn.style.width = '6px';
+            this.leftDotForAddColumn.style.height = '6px';
+            this.leftDotForAddColumn.style.backgroundColor = '#4A90E2';
+            this.leftDotForAddColumn.style.position = 'absolute';
+            this.leftDotForAddColumn.style.cursor = 'pointer';
+            this.leftDotForAddColumn.style.zIndex = '1000';
+            this.leftDotForAddColumn.style.borderRadius = '50%';
+            this.leftDotForAddColumn.style.border = '1px solid white';
+            this.leftDotForAddColumn.style.boxShadow = '0 1px 3px rgba(0,0,0,0.2)';
+            document.body.appendChild(this.leftDotForAddColumn);
+            this.rightDotForAddColumn = document.createElement('div');
+            this.rightDotForAddColumn.style.width = '6px';
+            this.rightDotForAddColumn.style.height = '6px';
+            this.rightDotForAddColumn.style.backgroundColor = '#4A90E2';
+            this.rightDotForAddColumn.style.position = 'absolute';
+            this.rightDotForAddColumn.style.cursor = 'pointer';
+            this.rightDotForAddColumn.style.zIndex = '1000';
+            this.rightDotForAddColumn.style.borderRadius = '50%';
+            this.rightDotForAddColumn.style.border = '1px solid white';
+            this.rightDotForAddColumn.style.boxShadow = '0 1px 3px rgba(0,0,0,0.2)';
+            document.body.appendChild(this.rightDotForAddColumn);
+            this.addIconForAddColumn = document.createElement('div');
+            this.addIconForAddColumn.style.width = '18px';
+            this.addIconForAddColumn.style.height = '18px';
+            this.addIconForAddColumn.style.backgroundColor = '#4A90E2';
+            this.addIconForAddColumn.style.position = 'absolute';
+            this.addIconForAddColumn.style.zIndex = '1001';
+            this.addIconForAddColumn.style.display = 'none';
+            this.addIconForAddColumn.style.borderRadius = '50%';
+            this.addIconForAddColumn.style.boxShadow = '0 2px 5px rgba(0,0,0,0.2)';
+            this.addIconForAddColumn.style.display = 'flex';
+            this.addIconForAddColumn.style.justifyContent = 'center';
+            this.addIconForAddColumn.style.alignItems = 'center';
+            this.addIconForAddColumn.style.border = '1px solid white';
+            document.body.appendChild(this.addIconForAddColumn);
+            const addIconText = document.createElement('div');
+            addIconText.textContent = '+';
+            addIconText.style.color = 'white';
+            addIconText.style.fontSize = '18px';
+            addIconText.style.fontWeight = 'bold';
+            addIconText.style.lineHeight = '15px';
+            addIconText.style.userSelect = 'none';
+            addIconText.style.cursor = 'pointer';
+            addIconText.style.verticalAlign = 'top';
+            addIconText.style.textAlign = 'center';
+            this.addIconForAddColumn.appendChild(addIconText);
+            this.addLineForAddColumn = document.createElement('div');
+            this.addLineForAddColumn.style.width = '2px';
+            this.addLineForAddColumn.style.height = '10px';
+            this.addLineForAddColumn.style.backgroundColor = '#4A90E2';
+            this.addLineForAddColumn.style.position = 'absolute';
+            this.addLineForAddColumn.style.zIndex = '1001';
+            this.addLineForAddColumn.style.display = 'none';
+            document.body.appendChild(this.addLineForAddColumn);
+        }
+        bindEventForAddColumn() {
+            this.leftDotForAddColumn.addEventListener('mouseenter', () => {
+                clearTimeout(this.hideAllTimeoutId_addColumn);
+                this.addIconForAddColumn.style.display = 'block';
+                const dotWidth = this.leftDotForAddColumn.offsetWidth;
+                const dotHeight = this.leftDotForAddColumn.offsetHeight;
+                this.showAddIconForAddColumn(this.leftDotForAddColumn.offsetLeft + dotWidth / 2, this.leftDotForAddColumn.offsetTop + dotHeight / 2, true);
+                this.showSplitLineForAddColumn(this.leftDotForAddColumn.offsetLeft + dotWidth / 2 - 1, this.leftDotForAddColumn.offsetTop + dotHeight / 2 + 2, this.table.getDrawRange().height);
+            });
+            this.rightDotForAddColumn.addEventListener('mouseenter', () => {
+                clearTimeout(this.hideAllTimeoutId_addColumn);
+                this.addIconForAddColumn.style.display = 'block';
+                const dotWidth = this.rightDotForAddColumn.offsetWidth;
+                const dotHeight = this.rightDotForAddColumn.offsetHeight;
+                this.showAddIconForAddColumn(this.rightDotForAddColumn.offsetLeft + dotWidth / 2, this.rightDotForAddColumn.offsetTop + dotHeight / 2, false);
+                this.showSplitLineForAddColumn(this.rightDotForAddColumn.offsetLeft + dotWidth / 2 - 1, this.rightDotForAddColumn.offsetTop + dotHeight / 2 + 2, this.table.getDrawRange().height);
+            });
+            this.addIconForAddColumn.addEventListener('mouseleave', () => {
+                this.addIconForAddColumn.style.display = 'none';
+                this.addLineForAddColumn.style.display = 'none';
+                this.delayHideAllForAddColumn();
+            });
+            this.addIconForAddColumn.addEventListener('click', (e) => {
+                const isLeft = this.addIconForAddColumn.dataset.addIconType === 'left';
+                const columns = this.table.options.columns;
+                const col = this.hoverCell.col;
+                const addColIndex = isLeft ? col : col + 1;
+                if (this.pluginOptions.addColumnCallback) {
+                    this.pluginOptions.addColumnCallback(addColIndex);
+                }
+                else {
+                    columns.splice(addColIndex, 0, {
+                        field: ``,
+                        title: `New Column ${col}`,
+                        width: 100
+                    });
+                    this.table.updateColumns(columns);
+                }
+                this.delayHideAllForAddColumn(0);
+            });
+        }
+        showDotForAddColumn(top, left, right, isShowLeft = true, isShowRight = true) {
+            const dotWidth = this.leftDotForAddColumn.offsetWidth;
+            const dotHeight = this.leftDotForAddColumn.offsetHeight;
+            this.leftDotForAddColumn.style.left = `${left - dotWidth / 2}px`;
+            this.leftDotForAddColumn.style.top = `${top - dotHeight / 2}px`;
+            this.rightDotForAddColumn.style.left = `${right - dotWidth / 2}px`;
+            this.rightDotForAddColumn.style.top = `${top - dotHeight / 2}px`;
+            this.leftDotForAddColumn.style.display = isShowLeft ? 'block' : 'none';
+            this.rightDotForAddColumn.style.display = isShowRight ? 'block' : 'none';
+        }
+        showAddIconForAddColumn(left, top, isLeft) {
+            const iconWidth = this.addIconForAddColumn.offsetWidth;
+            const iconHeight = this.addIconForAddColumn.offsetHeight;
+            const dotHeight = this.leftDotForAddColumn.offsetHeight;
+            this.addIconForAddColumn.style.left = `${left - iconWidth / 2}px`;
+            this.addIconForAddColumn.style.top = `${top - iconHeight / 2 - dotHeight / 2}px`;
+            if (isLeft) {
+                this.addIconForAddColumn.dataset.addIconType = 'left';
+            }
+            else {
+                this.addIconForAddColumn.dataset.addIconType = 'right';
+            }
+        }
+        showSplitLineForAddColumn(left, top, height) {
+            this.addLineForAddColumn.style.left = `${left}px`;
+            this.addLineForAddColumn.style.top = `${top}px`;
+            this.addLineForAddColumn.style.height = `${height}px`;
+            this.addLineForAddColumn.style.display = 'block';
+        }
+        delayHideAllForAddColumn(delay = 1000) {
+            this.hideAllTimeoutId_addColumn = setTimeout(() => {
+                this.addIconForAddColumn.style.display = 'none';
+                this.addLineForAddColumn.style.display = 'none';
+                this.leftDotForAddColumn.style.display = 'none';
+                this.rightDotForAddColumn.style.display = 'none';
+            }, delay);
+        }
+        initAddRowDomElement() {
+            this.topDotForAddRow = document.createElement('div');
+            this.topDotForAddRow.style.width = '6px';
+            this.topDotForAddRow.style.height = '6px';
+            this.topDotForAddRow.style.backgroundColor = '#4A90E2';
+            this.topDotForAddRow.style.position = 'absolute';
+            this.topDotForAddRow.style.cursor = 'pointer';
+            this.topDotForAddRow.style.zIndex = '1000';
+            this.topDotForAddRow.style.borderRadius = '50%';
+            this.topDotForAddRow.style.border = '1px solid white';
+            this.topDotForAddRow.style.boxShadow = '0 1px 3px rgba(0,0,0,0.2)';
+            document.body.appendChild(this.topDotForAddRow);
+            this.bottomDotForAddRow = document.createElement('div');
+            this.bottomDotForAddRow.style.width = '6px';
+            this.bottomDotForAddRow.style.height = '6px';
+            this.bottomDotForAddRow.style.backgroundColor = '#4A90E2';
+            this.bottomDotForAddRow.style.position = 'absolute';
+            this.bottomDotForAddRow.style.cursor = 'pointer';
+            this.bottomDotForAddRow.style.zIndex = '1000';
+            this.bottomDotForAddRow.style.borderRadius = '50%';
+            this.bottomDotForAddRow.style.border = '1px solid white';
+            this.bottomDotForAddRow.style.boxShadow = '0 1px 3px rgba(0,0,0,0.2)';
+            document.body.appendChild(this.bottomDotForAddRow);
+            this.addIconForAddRow = document.createElement('div');
+            this.addIconForAddRow.style.width = '18px';
+            this.addIconForAddRow.style.height = '18px';
+            this.addIconForAddRow.style.backgroundColor = '#4A90E2';
+            this.addIconForAddRow.style.position = 'absolute';
+            this.addIconForAddRow.style.zIndex = '1001';
+            this.addIconForAddRow.style.display = 'none';
+            this.addIconForAddRow.style.borderRadius = '50%';
+            this.addIconForAddRow.style.boxShadow = '0 2px 5px rgba(0,0,0,0.2)';
+            this.addIconForAddRow.style.display = 'flex';
+            this.addIconForAddRow.style.justifyContent = 'center';
+            this.addIconForAddRow.style.alignItems = 'center';
+            this.addIconForAddRow.style.border = '1px solid white';
+            document.body.appendChild(this.addIconForAddRow);
+            const addIconText = document.createElement('div');
+            addIconText.textContent = '+';
+            addIconText.style.color = 'white';
+            addIconText.style.fontSize = '18px';
+            addIconText.style.fontWeight = 'bold';
+            addIconText.style.lineHeight = '15px';
+            addIconText.style.userSelect = 'none';
+            addIconText.style.cursor = 'pointer';
+            addIconText.style.verticalAlign = 'top';
+            addIconText.style.textAlign = 'center';
+            this.addIconForAddRow.appendChild(addIconText);
+            this.addLineForAddRow = document.createElement('div');
+            this.addLineForAddRow.style.width = '10px';
+            this.addLineForAddRow.style.height = '2px';
+            this.addLineForAddRow.style.backgroundColor = '#4A90E2';
+            this.addLineForAddRow.style.position = 'absolute';
+            this.addLineForAddRow.style.zIndex = '1001';
+            this.addLineForAddRow.style.display = 'none';
+            document.body.appendChild(this.addLineForAddRow);
+        }
+        bindEventForAddRow() {
+            this.topDotForAddRow.addEventListener('mouseenter', () => {
+                clearTimeout(this.hideAllTimeoutId_addRow);
+                this.addIconForAddRow.style.display = 'block';
+                const dotWidth = this.topDotForAddRow.offsetWidth;
+                const dotHeight = this.topDotForAddRow.offsetHeight;
+                this.showAddIconForAddRow(this.topDotForAddRow.offsetLeft + dotWidth / 2, this.topDotForAddRow.offsetTop + dotHeight / 2, true);
+                this.showSplitLineForAddRow(this.topDotForAddRow.offsetLeft + dotWidth + 2, this.topDotForAddRow.offsetTop + dotHeight / 2 - 1, this.table.getDrawRange().width);
+            });
+            this.bottomDotForAddRow.addEventListener('mouseenter', () => {
+                clearTimeout(this.hideAllTimeoutId_addRow);
+                this.addIconForAddRow.style.display = 'block';
+                const dotWidth = this.bottomDotForAddRow.offsetWidth;
+                const dotHeight = this.bottomDotForAddRow.offsetHeight;
+                this.showAddIconForAddRow(this.bottomDotForAddRow.offsetLeft + dotWidth / 2, this.bottomDotForAddRow.offsetTop + dotHeight / 2, false);
+                this.showSplitLineForAddRow(this.bottomDotForAddRow.offsetLeft + dotWidth + 2, this.bottomDotForAddRow.offsetTop + dotHeight / 2 - 1, this.table.getDrawRange().height);
+            });
+            this.addIconForAddRow.addEventListener('mouseleave', () => {
+                this.addIconForAddRow.style.display = 'none';
+                this.addLineForAddRow.style.display = 'none';
+                this.delayHideAllForAddRow();
+            });
+            this.addIconForAddRow.addEventListener('click', (e) => {
+                const isTop = this.addIconForAddRow.dataset.addIconType === 'top';
+                const row = this.hoverCell.row;
+                const addRowIndex = isTop ? row : row + 1;
+                if (this.pluginOptions.addRowCallback) {
+                    this.pluginOptions.addRowCallback(addRowIndex);
+                }
+                else {
+                    const recordIndex = this.table.getRecordIndexByCell(0, addRowIndex);
+                    this.table.addRecord({}, recordIndex);
+                }
+                this.delayHideAllForAddRow(0);
+            });
+        }
+        showDotForAddRow(top, left, bottom, isShowTop = true, isShowBottom = true) {
+            const dotWidth = this.topDotForAddRow.offsetWidth;
+            const dotHeight = this.topDotForAddRow.offsetHeight;
+            this.topDotForAddRow.style.left = `${left - dotWidth / 2}px`;
+            this.topDotForAddRow.style.top = `${top - dotHeight / 2}px`;
+            this.bottomDotForAddRow.style.left = `${left - dotWidth / 2}px`;
+            this.bottomDotForAddRow.style.top = `${bottom - dotHeight / 2}px`;
+            this.topDotForAddRow.style.display = isShowTop ? 'block' : 'none';
+            this.bottomDotForAddRow.style.display = isShowBottom ? 'block' : 'none';
+        }
+        showAddIconForAddRow(left, top, isTop) {
+            const iconWidth = this.addIconForAddRow.offsetWidth;
+            const iconHeight = this.addIconForAddRow.offsetHeight;
+            const dotWidth = this.topDotForAddRow.offsetWidth;
+            this.addIconForAddRow.style.left = `${left - iconWidth / 2 - dotWidth / 2}px`;
+            this.addIconForAddRow.style.top = `${top - iconHeight / 2}px`;
+            if (isTop) {
+                this.addIconForAddRow.dataset.addIconType = 'top';
+            }
+            else {
+                this.addIconForAddRow.dataset.addIconType = 'bottom';
+            }
+        }
+        showSplitLineForAddRow(left, top, width) {
+            this.addLineForAddRow.style.left = `${left}px`;
+            this.addLineForAddRow.style.top = `${top}px`;
+            this.addLineForAddRow.style.width = `${width}px`;
+            this.addLineForAddRow.style.display = 'block';
+        }
+        delayHideAllForAddRow(delay = 1000) {
+            this.hideAllTimeoutId_addRow = setTimeout(() => {
+                this.addIconForAddRow.style.display = 'none';
+                this.addLineForAddRow.style.display = 'none';
+                this.topDotForAddRow.style.display = 'none';
+                this.bottomDotForAddRow.style.display = 'none';
+            }, delay);
+        }
+        release() {
+            this.leftDotForAddColumn.remove();
+            this.rightDotForAddColumn.remove();
+            this.addIconForAddColumn.remove();
+            this.addLineForAddColumn.remove();
+            this.topDotForAddRow.remove();
+            this.bottomDotForAddRow.remove();
+            this.addIconForAddRow.remove();
+            this.addLineForAddRow.remove();
+        }
+    }
+
+    class ColumnSeriesPlugin {
+        id = 'column-series';
+        runTime = [VTable__namespace.TABLE_EVENT_TYPE.BEFORE_INIT, VTable__namespace.TABLE_EVENT_TYPE.BEFORE_KEYDOWN];
+        pluginOptions;
+        table;
+        columns = [];
+        constructor(pluginOptions) {
+            this.pluginOptions = Object.assign({ columnCount: 100, autoExtendColumn: true }, pluginOptions);
+        }
+        run(...args) {
+            if (args[1] === VTable__namespace.TABLE_EVENT_TYPE.BEFORE_INIT) {
+                const eventArgs = args[0];
+                const table = args[2];
+                this.table = table;
+                const options = eventArgs.options;
+                this.columns = this.generateColumns(this.pluginOptions.columnCount);
+                options.columns = this.columns;
+            }
+            else if (args[1] === VTable__namespace.TABLE_EVENT_TYPE.BEFORE_KEYDOWN) {
+                const eventArgs = args[0];
+                const e = eventArgs.event;
+                if (e.key === 'ArrowRight') {
+                    if (this.pluginOptions.autoExtendColumn &&
+                        this.table.stateManager.select.cellPos.col === this.table.colCount - 1) {
+                        this.table.addColumn(this.generateColumn(this.table.colCount - 1));
+                    }
+                }
+            }
+        }
+        generateColumns(columnCount) {
+            const columnFields = [];
+            for (let i = 0; i < columnCount; i++) {
+                columnFields.push(this.generateColumn(i));
+            }
+            return columnFields;
+        }
+        generateColumn(index) {
+            const column = {
+                title: this.pluginOptions.generateColumnTitle
+                    ? this.pluginOptions.generateColumnTitle(index)
+                    : this.generateColumnField(index)
+            };
+            return column;
+        }
+        generateColumnField(index) {
+            if (index < 26) {
+                return String.fromCharCode(65 + index);
+            }
+            const title = [];
+            index++;
+            while (index > 0) {
+                index--;
+                title.unshift(String.fromCharCode(65 + (index % 26)));
+                index = Math.floor(index / 26);
+            }
+            return title.join('');
+        }
+        resetColumnCount(columnCount) {
+            this.pluginOptions.columnCount = columnCount;
+            this.columns = this.generateColumns(columnCount);
+            this.table.updateColumns(this.columns);
+        }
+    }
+
+    class RowSeriesPlugin {
+        id = 'row-series';
+        runTime = [VTable.TABLE_EVENT_TYPE.BEFORE_INIT, VTable.TABLE_EVENT_TYPE.BEFORE_KEYDOWN];
+        pluginOptions;
+        table;
+        constructor(pluginOptions) {
+            this.pluginOptions = Object.assign({ rowCount: 100, autoExtendRow: true }, pluginOptions);
+        }
+        run(...args) {
+            if (args[1] === VTable.TABLE_EVENT_TYPE.BEFORE_INIT) {
+                const eventArgs = args[0];
+                const table = args[2];
+                this.table = table;
+                const options = eventArgs.options;
+                const records = options.records ?? [];
+                for (let i = records.length; i < this.pluginOptions.rowCount; i++) {
+                    records.push(this.pluginOptions.fillRowRecord ? this.pluginOptions.fillRowRecord(i) : {});
+                }
+                options.records = records;
+                if (this.pluginOptions.rowSeriesNumber) {
+                    options.rowSeriesNumber = this.pluginOptions.rowSeriesNumber;
+                    if (!this.pluginOptions.rowSeriesNumber.width) {
+                        options.rowSeriesNumber.width = 'auto';
+                    }
+                }
+                else if (!options.rowSeriesNumber) {
+                    options.rowSeriesNumber = {
+                        width: 'auto'
+                    };
+                }
+            }
+            else if (args[1] === VTable.TABLE_EVENT_TYPE.BEFORE_KEYDOWN) {
+                const eventArgs = args[0];
+                const e = eventArgs.event;
+                if (e.key === 'ArrowDown') {
+                    if (this.pluginOptions.autoExtendRow &&
+                        this.table.stateManager.select.cellPos.row === this.table.rowCount - 1) {
+                        this.table.addRecord(this.pluginOptions.fillRowRecord
+                            ? this.pluginOptions.fillRowRecord(this.table.rowCount - this.table.columnHeaderLevelCount)
+                            : {});
+                    }
+                }
+            }
+        }
+    }
+
+    class HighlightHeaderWhenSelectCellPlugin {
+        id = 'highlight-header-when-select-cell';
+        runTime = [
+            VTable.TABLE_EVENT_TYPE.INITIALIZED,
+            VTable.TABLE_EVENT_TYPE.SELECTED_CLEAR,
+            VTable.TABLE_EVENT_TYPE.SELECTED_CELL,
+            VTable.TABLE_EVENT_TYPE.MOUSEMOVE_TABLE
+        ];
+        table;
+        pluginOptions;
+        colHeaderRanges = [];
+        rowHeaderRanges = [];
+        constructor(pluginOptions) {
+            this.pluginOptions = pluginOptions;
+        }
+        run(...args) {
+            const runTime = args[1];
+            const table = args[2];
+            this.table = table;
+            if (runTime === VTable.TABLE_EVENT_TYPE.SELECTED_CLEAR) {
+                this.clearHighlight();
+            }
+            else if (runTime === VTable.TABLE_EVENT_TYPE.SELECTED_CELL) {
+                this.updateHighlight();
+            }
+            else if (runTime === VTable.TABLE_EVENT_TYPE.MOUSEMOVE_TABLE) {
+                this.updateHighlight();
+            }
+            else if (runTime === VTable.TABLE_EVENT_TYPE.INITIALIZED) {
+                this.registerStyle();
+            }
+        }
+        registerStyle() {
+            this.table.registerCustomCellStyle('col-highlight', {
+                bgColor: this.pluginOptions?.colHighlightBGColor ?? '#82b2f5',
+                color: this.pluginOptions?.colHighlightColor ?? '#FFF'
+            });
+            this.table.registerCustomCellStyle('row-highlight', {
+                bgColor: this.pluginOptions?.rowHighlightBGColor ?? '#82b2f5',
+                color: this.pluginOptions?.rowHighlightColor ?? 'yellow'
+            });
+        }
+        clearHighlight() {
+            if (this.colHeaderRanges) {
+                this.colHeaderRanges.forEach(range => {
+                    this.table.arrangeCustomCellStyle({ range }, undefined);
+                });
+            }
+            if (this.rowHeaderRanges) {
+                this.rowHeaderRanges.forEach(range => {
+                    this.table.arrangeCustomCellStyle({ range }, undefined);
+                });
+            }
+            this.colHeaderRanges = [];
+            this.rowHeaderRanges = [];
+        }
+        updateHighlight() {
+            if (this.pluginOptions?.colHighlight === false && this.pluginOptions?.rowHighlight === false) {
+                return;
+            }
+            const selectRanges = this.table.getSelectedCellRanges();
+            if (selectRanges.length < 2) {
+                this.clearHighlight();
+            }
+            for (let i = 0; i < selectRanges.length; i++) {
+                const selectRange = selectRanges[i];
+                const rowSelectRange = [selectRange.start.row, selectRange.end.row];
+                rowSelectRange.sort((a, b) => a - b);
+                const colSelectRange = [selectRange.start.col, selectRange.end.col];
+                colSelectRange.sort((a, b) => a - b);
+                let colHeaderRange;
+                let rowHeaderRange;
+                if (this.table.isPivotTable()) {
+                    colHeaderRange = {
+                        start: {
+                            col: colSelectRange[0],
+                            row: 0
+                        },
+                        end: {
+                            col: colSelectRange[1],
+                            row: this.table.columnHeaderLevelCount - 1
+                        }
+                    };
+                    rowHeaderRange = {
+                        start: {
+                            col: 0,
+                            row: rowSelectRange[0]
+                        },
+                        end: {
+                            col: this.table.rowHeaderLevelCount - 1,
+                            row: rowSelectRange[1]
+                        }
+                    };
+                }
+                else if (this.table.internalProps.transpose) {
+                    rowHeaderRange = {
+                        start: {
+                            col: 0,
+                            row: rowSelectRange[0]
+                        },
+                        end: {
+                            col: this.table.rowHeaderLevelCount - 1,
+                            row: rowSelectRange[1]
+                        }
+                    };
+                }
+                else {
+                    colHeaderRange = {
+                        start: {
+                            col: colSelectRange[0],
+                            row: 0
+                        },
+                        end: {
+                            col: colSelectRange[1],
+                            row: this.table.columnHeaderLevelCount - 1
+                        }
+                    };
+                    if (this.table.internalProps.rowSeriesNumber) {
+                        rowHeaderRange = {
+                            start: {
+                                col: 0,
+                                row: rowSelectRange[0]
+                            },
+                            end: {
+                                col: 0,
+                                row: rowSelectRange[1]
+                            }
+                        };
+                    }
+                }
+                if (this.pluginOptions?.colHighlight !== false &&
+                    !this.colHeaderRanges.find(range => isSameRange(range, colHeaderRange))) {
+                    colHeaderRange && this.table.arrangeCustomCellStyle({ range: colHeaderRange }, 'col-highlight');
+                    this.colHeaderRanges.push(colHeaderRange);
+                }
+                if (this.pluginOptions?.rowHighlight !== false &&
+                    !this.rowHeaderRanges.find(range => isSameRange(range, rowHeaderRange))) {
+                    rowHeaderRange && this.table.arrangeCustomCellStyle({ range: rowHeaderRange }, 'row-highlight');
+                    this.rowHeaderRanges.push(rowHeaderRange);
+                }
+            }
+        }
+        release() {
+            this.rowHeaderRanges = [];
+            this.colHeaderRanges = [];
+        }
+    }
     function isSameRange(a, b) {
         if (a === undefined && b === undefined) {
             return true;
@@ -6332,8 +6996,363 @@
         return (a.start.col === b.start.col && a.start.row === b.start.row && a.end.col === b.end.col && a.end.row === b.end.row);
     }
 
+    class ExcelEditCellKeyboardPlugin {
+        id = 'excel-edit-cell-keyboard';
+        runTime = [VTable__namespace.TABLE_EVENT_TYPE.INITIALIZED];
+        table;
+        pluginOptions;
+        constructor(pluginOptions) {
+            this.pluginOptions = pluginOptions;
+            this.bindEvent();
+        }
+        run(...args) {
+            const table = args[2];
+            this.table = table;
+        }
+        bindEvent() {
+            document.addEventListener('keydown', this.handleKeyDown.bind(this), true);
+        }
+        handleKeyDown(event) {
+            if (this.table.editorManager) {
+                if (this.table.editorManager.beginTriggerEditCellMode === 'keydown') {
+                    if (this.table.editorManager.editingEditor && this.isExcelShortcutKey(event)) {
+                        const { col, row } = this.table.editorManager.editCell;
+                        this.table.editorManager.completeEdit();
+                        this.table.getElement().focus();
+                        if (!event.shiftKey && !event.ctrlKey && !event.metaKey) {
+                            if (event.key === 'Enter') {
+                                this.table.selectCell(col, row + 1);
+                            }
+                            else if (event.key === 'Tab') {
+                                this.table.selectCell(col + 1, row);
+                            }
+                            else if (event.key === 'ArrowLeft') {
+                                this.table.selectCell(col - 1, row);
+                            }
+                            else if (event.key === 'ArrowRight') {
+                                this.table.selectCell(col + 1, row);
+                            }
+                            else if (event.key === 'ArrowDown') {
+                                this.table.selectCell(col, row + 1);
+                            }
+                            else if (event.key === 'ArrowUp') {
+                                this.table.selectCell(col, row - 1);
+                            }
+                            event.stopPropagation();
+                            event.preventDefault();
+                        }
+                    }
+                }
+                else {
+                    const { col, row } = this.table.stateManager.select.cellPos;
+                    if (this.table.editorManager.editingEditor && (event.key === 'Enter' || event.key === 'Tab')) {
+                        this.table.editorManager.completeEdit();
+                        this.table.getElement().focus();
+                        if (event.key === 'Enter') {
+                            this.table.selectCell(col, row + 1);
+                        }
+                        else if (event.key === 'Tab') {
+                            this.table.selectCell(col + 1, row);
+                        }
+                        event.stopPropagation();
+                        event.preventDefault();
+                    }
+                    else if (event.key === 'Delete') {
+                        const selectCells = this.table.getSelectedCellInfos();
+                        if (selectCells?.length > 0) {
+                            deleteSelectRange(selectCells, this.table);
+                        }
+                        event.stopPropagation();
+                        event.preventDefault();
+                    }
+                }
+            }
+        }
+        isExcelShortcutKey(event) {
+            return (event.key === 'Enter' ||
+                event.key === 'Tab' ||
+                event.key === 'ArrowLeft' ||
+                event.key === 'ArrowRight' ||
+                event.key === 'ArrowDown' ||
+                event.key === 'ArrowUp');
+        }
+        release() {
+            document.removeEventListener('keydown', this.handleKeyDown, true);
+        }
+    }
+    function deleteSelectRange(selectCells, tableInstance) {
+        for (let i = 0; i < selectCells.length; i++) {
+            for (let j = 0; j < selectCells[i].length; j++) {
+                tableInstance.changeCellValue(selectCells[i][j].col, selectCells[i][j].row, '');
+            }
+        }
+    }
+
+    class FocusHighlightPlugin {
+        id = 'focus-highlight';
+        name = 'Focus Highlight';
+        runTime = [VTable.TABLE_EVENT_TYPE.INITIALIZED, VTable.TABLE_EVENT_TYPE.SELECTED_CELL, VTable.TABLE_EVENT_TYPE.SELECTED_CLEAR];
+        table;
+        range;
+        pluginOptions;
+        constructor(options = {
+            fill: '#000',
+            opacity: 0.5,
+            highlightRange: undefined
+        }) {
+            this.pluginOptions = Object.assign({
+                fill: '#000',
+                opacity: 0.5
+            }, options);
+        }
+        run(...args) {
+            if (!this.table) {
+                this.table = args[2];
+            }
+            if (args[1] === VTable.TABLE_EVENT_TYPE.INITIALIZED) {
+                this.pluginOptions.highlightRange && this.setFocusHighlightRange(this.pluginOptions.highlightRange);
+            }
+            else if (args[1] === VTable.TABLE_EVENT_TYPE.SELECTED_CELL) {
+                const posCell = this.table.stateManager.select.cellPos;
+                if (this.table.isHeader(posCell.col, posCell.row)) {
+                    this.setFocusHighlightRange(undefined);
+                }
+                else {
+                    const ranges = this.table.stateManager.select.ranges;
+                    const min_col = 0;
+                    const max_col = this.table.colCount - 1;
+                    const min_row = Math.min(ranges[0].start.row, ranges[0].end.row);
+                    const max_row = Math.max(ranges[0].start.row, ranges[0].end.row);
+                    this.setFocusHighlightRange({
+                        start: { col: min_col, row: min_row },
+                        end: { col: max_col, row: max_row }
+                    });
+                }
+            }
+            else if (args[1] === VTable.TABLE_EVENT_TYPE.SELECTED_CLEAR) {
+                this.setFocusHighlightRange(undefined);
+            }
+        }
+        setFocusHighlightRange(range) {
+            let cellRange;
+            if (range && 'start' in range && 'end' in range) {
+                cellRange = range;
+            }
+            else if (range) {
+                cellRange = {
+                    start: range,
+                    end: range
+                };
+            }
+            if (isSameRange$2(this.range, cellRange)) {
+                return;
+            }
+            this.range = cellRange;
+            if (!range) {
+                this.deleteAllCellGroupShadow();
+            }
+            else {
+                this.updateCellGroupShadow();
+            }
+            this.table.scenegraph.updateNextFrame();
+        }
+        deleteAllCellGroupShadow() {
+            if (!this.table.isPivotTable()) {
+                this.updateCellGroupShadowInContainer(this.table.scenegraph.rowHeaderGroup);
+                this.updateCellGroupShadowInContainer(this.table.scenegraph.leftBottomCornerGroup);
+            }
+            this.updateCellGroupShadowInContainer(this.table.scenegraph.bodyGroup);
+            this.updateCellGroupShadowInContainer(this.table.scenegraph.rightFrozenGroup);
+            this.updateCellGroupShadowInContainer(this.table.scenegraph.bottomFrozenGroup);
+            this.updateCellGroupShadowInContainer(this.table.scenegraph.rightBottomCornerGroup);
+        }
+        updateCellGroupShadow() {
+            if (!this.table.isPivotTable()) {
+                this.updateCellGroupShadowInContainer(this.table.scenegraph.rowHeaderGroup, this.range);
+                this.updateCellGroupShadowInContainer(this.table.scenegraph.leftBottomCornerGroup, this.range);
+            }
+            this.updateCellGroupShadowInContainer(this.table.scenegraph.bodyGroup, this.range);
+            this.updateCellGroupShadowInContainer(this.table.scenegraph.rightFrozenGroup, this.range);
+            this.updateCellGroupShadowInContainer(this.table.scenegraph.bottomFrozenGroup), this.range;
+            this.updateCellGroupShadowInContainer(this.table.scenegraph.rightBottomCornerGroup, this.range);
+        }
+        updateCellGroupShadowInContainer(container, range) {
+            let cellRange;
+            if (range && 'start' in range && 'end' in range) {
+                cellRange = range;
+            }
+            else if (range) {
+                cellRange = {
+                    start: range,
+                    end: range
+                };
+            }
+            container.forEachChildrenSkipChild((item) => {
+                const column = item;
+                if (column.role === 'column') {
+                    column.forEachChildrenSkipChild((item) => {
+                        const cell = item;
+                        if (cell.role !== 'cell') {
+                            return;
+                        }
+                        cell.attachShadow(cell.shadowRoot);
+                        const shadowGroup = cell.shadowRoot;
+                        if (!cellRange) {
+                            shadowGroup.removeAllChild();
+                        }
+                        else if (cellInRange(cellRange, cell.col, cell.row)) {
+                            shadowGroup.removeAllChild();
+                        }
+                        else if (!shadowGroup.firstChild) {
+                            const shadowRect = createRect({
+                                x: 0,
+                                y: 0,
+                                width: cell.attribute.width,
+                                height: cell.attribute.height,
+                                fill: this.pluginOptions.fill,
+                                opacity: this.pluginOptions.opacity
+                            });
+                            shadowRect.name = 'shadow-rect';
+                            shadowGroup.appendChild(shadowRect);
+                        }
+                    });
+                }
+            });
+        }
+    }
+
+    function isInteger(value) {
+        return Math.floor(value) === value;
+    }
+    class TableCarouselAnimationPlugin {
+        id = 'table-carousel-animation';
+        runTime = [VTable.TABLE_EVENT_TYPE.INITIALIZED];
+        table;
+        rowCount;
+        colCount;
+        animationDuration;
+        animationDelay;
+        animationEasing;
+        playing;
+        row;
+        col;
+        willUpdateRow = false;
+        willUpdateCol = false;
+        autoPlay;
+        autoPlayDelay;
+        customDistRowFunction;
+        customDistColFunction;
+        constructor(options = {}) {
+            this.rowCount = options?.rowCount ?? undefined;
+            this.colCount = options?.colCount ?? undefined;
+            this.animationDuration = options?.animationDuration ?? 500;
+            this.animationDelay = options?.animationDelay ?? 1000;
+            this.animationEasing = options?.animationEasing ?? 'linear';
+            this.autoPlay = options?.autoPlay ?? false;
+            this.autoPlayDelay = options?.autoPlayDelay ?? 0;
+            this.customDistColFunction = options.customDistColFunction;
+            this.customDistRowFunction = options.customDistRowFunction;
+        }
+        run(...args) {
+            if (!this.table) {
+                this.table = args[2];
+            }
+            this.reset();
+            if (this.autoPlay) {
+                setTimeout(() => {
+                    this.play();
+                }, this.autoPlayDelay);
+            }
+        }
+        reset() {
+            this.playing = false;
+            this.row = this.table.frozenRowCount;
+            this.col = this.table.frozenColCount;
+        }
+        play() {
+            if (!this.table) {
+                throw new Error('table is not initialized');
+            }
+            this.playing = true;
+            if (this.rowCount && !this.willUpdateRow) {
+                this.updateRow();
+            }
+            else if (this.colCount && !this.willUpdateCol) {
+                this.updateCol();
+            }
+        }
+        pause() {
+            this.playing = false;
+        }
+        updateRow() {
+            if (!this.playing || this.table.isReleased) {
+                return;
+            }
+            let animation = true;
+            const customRow = this.customDistRowFunction && this.customDistRowFunction(this.row, this.table);
+            if (customRow) {
+                this.row = customRow.distRow;
+                animation = customRow.animation ?? true;
+            }
+            else if (isInteger(this.row) && this.table.scenegraph.proxy.screenTopRow !== this.row) {
+                this.row = this.table.frozenRowCount;
+                animation = false;
+            }
+            else if (!isInteger(this.row) && this.table.scenegraph.proxy.screenTopRow !== Math.floor(this.row)) {
+                this.row = this.table.frozenRowCount;
+                animation = false;
+            }
+            else {
+                this.row += this.rowCount;
+            }
+            this.table.scrollToRow(this.row, animation ? { duration: this.animationDuration, easing: this.animationEasing } : undefined);
+            this.willUpdateRow = true;
+            setTimeout(() => {
+                this.willUpdateRow = false;
+                this.updateRow();
+            }, this.animationDuration + this.animationDelay);
+        }
+        updateCol() {
+            if (!this.playing || this.table.isReleased) {
+                return;
+            }
+            let animation = true;
+            const customCol = this.customDistColFunction && this.customDistColFunction(this.col, this.table);
+            if (customCol) {
+                this.col = customCol.distCol;
+                animation = customCol.animation ?? true;
+            }
+            else if (isInteger(this.col) && this.table.scenegraph.proxy.screenLeftCol !== this.col) {
+                this.col = this.table.frozenColCount;
+                animation = false;
+            }
+            else if (!isInteger(this.col) && this.table.scenegraph.proxy.screenLeftCol !== Math.floor(this.col)) {
+                this.col = this.table.frozenColCount;
+                animation = false;
+            }
+            else {
+                this.col += this.colCount;
+            }
+            this.table.scrollToCol(this.col, animation ? { duration: this.animationDuration, easing: this.animationEasing } : undefined);
+            this.willUpdateCol = true;
+            setTimeout(() => {
+                this.willUpdateCol = false;
+                this.updateCol();
+            }, this.animationDuration + this.animationDelay);
+        }
+        release() {
+        }
+    }
+
+    exports.AddRowColumnPlugin = AddRowColumnPlugin;
     exports.CarouselAnimationPlugin = CarouselAnimationPlugin;
+    exports.ColumnSeriesPlugin = ColumnSeriesPlugin;
+    exports.ExcelEditCellKeyboardPlugin = ExcelEditCellKeyboardPlugin;
+    exports.FocusHighlightPlugin = FocusHighlightPlugin;
     exports.HeaderHighlightPlugin = HeaderHighlightPlugin;
+    exports.HighlightHeaderWhenSelectCellPlugin = HighlightHeaderWhenSelectCellPlugin;
     exports.InvertHighlightPlugin = InvertHighlightPlugin;
+    exports.RowSeriesPlugin = RowSeriesPlugin;
+    exports.TableCarouselAnimationPlugin = TableCarouselAnimationPlugin;
 
 }));