@visactor/vtable 1.19.0-alpha.0 → 1.19.1-alpha.0

package/dist/vtable.js

@@ -591,22 +591,22 @@
     class Application {}
     const application = new Application();
 
+    let idx = 0;
     class PerformanceRAF {
       constructor() {
-        this.nextAnimationFrameCbs = [], this._rafHandle = null, this.runAnimationFrame = time => {
+        this.nextAnimationFrameCbs = new Map(), this._rafHandle = null, this.runAnimationFrame = time => {
           this._rafHandle = null;
           const cbs = this.nextAnimationFrameCbs;
-          this.nextAnimationFrameCbs = [];
-          for (let i = 0; i < cbs.length; i++) cbs[i] && cbs[i](time);
+          this.nextAnimationFrameCbs = new Map(), cbs.forEach(cb => cb(time));
         }, this.tryRunAnimationFrameNextFrame = () => {
-          null === this._rafHandle && 0 !== this.nextAnimationFrameCbs.length && (this._rafHandle = application.global.getRequestAnimationFrame()(this.runAnimationFrame));
+          null === this._rafHandle && 0 !== this.nextAnimationFrameCbs.size && (this._rafHandle = application.global.getRequestAnimationFrame()(this.runAnimationFrame));
         };
       }
       addAnimationFrameCb(callback) {
-        return this.nextAnimationFrameCbs.push(callback), this.tryRunAnimationFrameNextFrame(), this.nextAnimationFrameCbs.length - 1;
+        return this.nextAnimationFrameCbs.set(++idx, callback), this.tryRunAnimationFrameNextFrame(), idx;
       }
       removeAnimationFrameCb(index) {
-        return index >= 0 && index < this.nextAnimationFrameCbs.length && (this.nextAnimationFrameCbs[index] = null, !0);
+        return !!this.nextAnimationFrameCbs.has(index) && (this.nextAnimationFrameCbs.delete(index), !0);
       }
     }
 
@@ -15029,8 +15029,10 @@
     DefaultCanvasTextRender = __decorate$M([injectable(), __param$r(0, inject(ContributionProvider)), __param$r(0, named(TextRenderContribution)), __metadata$B("design:paramtypes", [Object])], DefaultCanvasTextRender);
 
     function drawPolygon(path, points, x, y) {
-      path.moveTo(points[0].x + x, points[0].y + y);
-      for (let i = 1; i < points.length; i++) path.lineTo(points[i].x + x, points[i].y + y);
+      if (points && points.length) {
+        path.moveTo(points[0].x + x, points[0].y + y);
+        for (let i = 1; i < points.length; i++) path.lineTo(points[i].x + x, points[i].y + y);
+      }
     }
     function drawRoundedPolygon(path, points, x, y, cornerRadius, closePath = !0) {
       var _a;
@@ -17943,6 +17945,18 @@
         const changeEvent = new CustomEvent(eventName, details);
         changeEvent.manager = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.eventSystem.manager, this.dispatchEvent(changeEvent);
       }
+      eventPosToStagePos(e) {
+        var _a, _b;
+        const result = {
+            x: 0,
+            y: 0
+          },
+          stagePoints = null !== (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.eventPointTransform(e)) && void 0 !== _b ? _b : {
+            x: 0,
+            y: 0
+          };
+        return this.globalTransMatrix.transformPoint(stagePoints, result), result;
+      }
     }
 
     const MathPickerContribution = Symbol.for("MathPickerContribution");
@@ -22989,7 +23003,7 @@
             var _a;
             if ("group" !== el.type && el.id) {
               const oldEl = prevInnerView[el.id];
-              if (el.setFinalAttribute(el.attribute), oldEl) {
+              if (el.setFinalAttributes(el.attribute), oldEl) {
                 oldEl.release();
                 const oldAttrs = oldEl.attribute,
                   finalAttrs = el.getFinalAttribute(),
@@ -23499,6 +23513,10 @@
           target.attribute.x = interpolateNumber$1(from, to, ratio), target.addUpdateBoundTag(), target.addUpdatePositionTag();
         }, this.y = (key, from, to, ratio, step, target) => {
           target.attribute.y = interpolateNumber$1(from, to, ratio), target.addUpdateBoundTag(), target.addUpdatePositionTag();
+        }, this.dx = (key, from, to, ratio, step, target) => {
+          target.attribute.dx = interpolateNumber$1(from, to, ratio), target.addUpdateBoundTag(), target.addUpdatePositionTag();
+        }, this.dy = (key, from, to, ratio, step, target) => {
+          target.attribute.dy = interpolateNumber$1(from, to, ratio), target.addUpdateBoundTag(), target.addUpdatePositionTag();
         }, this.angle = (key, from, to, ratio, step, target) => {
           target.attribute.angle = interpolateNumber$1(from, to, ratio), target.addUpdateBoundTag(), target.addUpdatePositionTag();
         }, this.scaleX = (key, from, to, ratio, step, target) => {
@@ -23547,9 +23565,10 @@
     function noop() {}
     class Step {
       constructor(type, props, duration, easing) {
+        var _a;
         this._startTime = 0, this._hasFirstRun = !1, this._syncAttributeUpdate = () => {
           this.target.setAttributes(this.target.attribute);
-        }, this.type = type, this.props = props, this.duration = duration, this.easing = easing ? "function" == typeof easing ? easing : Easing[easing] : Easing.linear, "wait" === type && (this.onUpdate = noop), this.id = Generator.GenAutoIncrementId(), this.syncAttributeUpdate = noop;
+        }, this.type = type, this.props = props, this.duration = duration, this.easing = easing ? "function" == typeof easing ? easing : null !== (_a = Easing[easing]) && void 0 !== _a ? _a : Easing.linear : Easing.linear, "wait" === type && (this.onUpdate = noop), this.id = Generator.GenAutoIncrementId(), this.syncAttributeUpdate = noop;
       }
       bind(target, animate) {
         this.target = target, this.animate = animate, this.onBind(), this.syncAttributeUpdate();
@@ -24214,7 +24233,10 @@
       _handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic) {
         var _a, _b, _c, _d;
         if (custom && customType) {
-          const customParams = this.resolveValue(customParameters, graphic, {}),
+          const customParams = this.resolveValue(customParameters, graphic, {
+              width: graphic.stage.width,
+              height: graphic.stage.height
+            }),
             objOptions = isFunction$7(options) ? options.call(null, null !== (_b = customParams && (null === (_a = customParams.data) || void 0 === _a ? void 0 : _a[0])) && void 0 !== _b ? _b : null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, customParams) : options;
           customParams.options = objOptions, customParams.controlOptions = controlOptions, 1 === customType ? this.createCustomAnimation(animate, custom, from, props, duration, easing, customParams) : 2 === customType && this.createCustomInterpolatorAnimation(animate, custom, props, duration, easing, customParams);
         } else "to" === type ? animate.to(props, duration, easing) : "from" === type && animate.from(props, duration, easing);
@@ -24894,7 +24916,7 @@
     const MIN_TICK_GAP = 12;
     const calculateFlushPos = (basePosition, size, rangePosition, otherEnd) => rangePosition < basePosition ? Math.max(basePosition - size / 2, rangePosition) : rangePosition > basePosition ? Math.min(basePosition - size / 2, rangePosition - size) : rangePosition < otherEnd ? rangePosition : rangePosition - size;
     const getCartesianLabelBounds = (scale, domain, op) => {
-      var _a;
+      var _a, _b, _c;
       const {
         labelStyle: labelStyle,
         axisOrientType: axisOrientType,
@@ -24910,27 +24932,32 @@
         scaleY = 0;
       isHorizontal || (isVertical ? (scaleX = 0, scaleY = 1) : startAngle && (scaleX = Math.cos(startAngle), scaleY = -Math.sin(startAngle)));
       const textMeasure = initTextMeasure$1(labelStyle),
-        range = scale.range(),
-        labelBoundsList = domain.map((v, i) => {
-          var _a, _b;
-          const str = labelFormatter ? labelFormatter(v) : `${v}`,
-            {
-              width: width,
-              height: height
-            } = textMeasure.quickMeasure(str),
-            textWidth = Math.max(width, 12),
-            textHeight = Math.max(height, 12),
-            pos = scale.scale(v),
-            baseTextX = scaleX * pos,
-            baseTextY = scaleY * pos;
-          let align,
-            baseline,
-            textX = baseTextX,
-            textY = baseTextY;
-          labelFlush && isHorizontal && 0 === i ? textX = calculateFlushPos(baseTextX, textWidth, range[0], range[range.length - 1]) : labelFlush && isHorizontal && i === domain.length - 1 ? textX = calculateFlushPos(baseTextX, textWidth, range[range.length - 1], range[0]) : align = null !== (_a = labelStyle.textAlign) && void 0 !== _a ? _a : "center", "right" === align ? textX -= textWidth : "center" === align && (textX -= textWidth / 2), labelFlush && isVertical && 0 === i ? textY = calculateFlushPos(baseTextY, textHeight, range[0], range[range.length - 1]) : labelFlush && isVertical && i === domain.length - 1 ? textY = calculateFlushPos(baseTextY, textHeight, range[range.length - 1], range[0]) : baseline = null !== (_b = labelStyle.textBaseline) && void 0 !== _b ? _b : "middle", "bottom" === baseline ? textY -= textHeight : "middle" === baseline && (textY -= textHeight / 2);
-          const bounds = new AABBBounds$1().set(textX, textY, textX + textWidth, textY + textHeight);
-          return labelAngle && bounds.rotate(labelAngle, baseTextX, baseTextY), bounds;
-        });
+        range = scale.range();
+      let labelBoundsList = [];
+      for (let i = 0; i < domain.length; i++) {
+        const v = domain[i],
+          str = labelFormatter ? labelFormatter(v) : `${v}`;
+        if (isPlainObject$5(str)) {
+          labelBoundsList = void 0;
+          break;
+        }
+        const {
+            width: width,
+            height: height
+          } = textMeasure.quickMeasure(str),
+          textWidth = Math.max(width, 12),
+          textHeight = Math.max(height, 12),
+          pos = scale.scale(v),
+          baseTextX = scaleX * pos,
+          baseTextY = scaleY * pos;
+        let align,
+          baseline,
+          textX = baseTextX,
+          textY = baseTextY;
+        labelFlush && isHorizontal && 0 === i ? textX = calculateFlushPos(baseTextX, textWidth, range[0], range[range.length - 1]) : labelFlush && isHorizontal && i === domain.length - 1 ? textX = calculateFlushPos(baseTextX, textWidth, range[range.length - 1], range[0]) : align = null !== (_b = labelStyle.textAlign) && void 0 !== _b ? _b : "center", "right" === align ? textX -= textWidth : "center" === align && (textX -= textWidth / 2), labelFlush && isVertical && 0 === i ? textY = calculateFlushPos(baseTextY, textHeight, range[0], range[range.length - 1]) : labelFlush && isVertical && i === domain.length - 1 ? textY = calculateFlushPos(baseTextY, textHeight, range[range.length - 1], range[0]) : baseline = null !== (_c = labelStyle.textBaseline) && void 0 !== _c ? _c : "middle", "bottom" === baseline ? textY -= textHeight : "middle" === baseline && (textY -= textHeight / 2);
+        const bounds = new AABBBounds$1().set(textX, textY, textX + textWidth, textY + textHeight);
+        labelAngle && bounds.rotate(labelAngle, baseTextX, baseTextY), labelBoundsList.push(bounds);
+      }
       return labelBoundsList;
     };
     const isAxisHorizontal = axisOrientType => ["bottom", "top", "z"].includes(axisOrientType);
@@ -25427,7 +25454,7 @@
       }
     }
     const continuousTicks = (scale, op) => {
-      var _a, _b;
+      var _a, _b, _c, _d;
       if (!isContinuous(scale.type)) return convertDomainToTickData(scale.domain());
       const range = scale.range(),
         rangeSize = Math.abs(range[range.length - 1] - range[0]);
@@ -25479,23 +25506,25 @@
             step = Math.floor(scaleTicks.length * MIN_FONT_SIZE / rangeSize);
           scaleTicks.forEach((tick, index) => {
             index % step != 0 && index !== scaleTicks.length - 1 || samplingScaleTicks.push(tick);
-          }), items = getCartesianLabelBounds(scale, samplingScaleTicks, op).map((bounds, i) => ({
+          }), items = null === (_c = getCartesianLabelBounds(scale, samplingScaleTicks, op)) || void 0 === _c ? void 0 : _c.map((bounds, i) => ({
             AABBBounds: bounds,
             value: samplingScaleTicks[i]
           }));
-        } else items = getCartesianLabelBounds(scale, scaleTicks, op).map((bounds, i) => ({
+        } else items = null === (_d = getCartesianLabelBounds(scale, scaleTicks, op)) || void 0 === _d ? void 0 : _d.map((bounds, i) => ({
           AABBBounds: bounds,
           value: scaleTicks[i]
         }));
-        const firstSourceItem = items[0],
-          lastSourceItem = last$1(items),
-          samplingMethod = breakData && breakData() ? methods.greedy : methods.parity;
-        for (; items.length >= 3 && hasOverlap(items, labelGap);) items = samplingMethod(items, labelGap);
-        const checkFirst = op.labelFirstVisible;
-        let checkLast = op.labelLastVisible;
-        textIntersect(firstSourceItem, lastSourceItem, labelGap) && items.includes(lastSourceItem) && items.length > 1 && checkFirst && checkLast && (items.splice(items.indexOf(lastSourceItem), 1), checkLast = !1), forceItemVisible(firstSourceItem, items, checkFirst, item => textIntersect(item, firstSourceItem, labelGap)), forceItemVisible(lastSourceItem, items, checkLast, item => textIntersect(item, lastSourceItem, labelGap) || !(!checkFirst || item === firstSourceItem) && textIntersect(item, firstSourceItem, labelGap), !0);
-        const ticks = items.map(item => item.value);
-        ticks.length < 3 && labelFlush && (ticks.length > 1 && ticks.pop(), last$1(ticks) !== last$1(scaleTicks) && ticks.push(last$1(scaleTicks))), scaleTicks = ticks;
+        if (items) {
+          const firstSourceItem = items[0],
+            lastSourceItem = last$1(items),
+            samplingMethod = breakData && breakData() ? methods.greedy : methods.parity;
+          for (; items.length >= 3 && hasOverlap(items, labelGap);) items = samplingMethod(items, labelGap);
+          const checkFirst = op.labelFirstVisible;
+          let checkLast = op.labelLastVisible;
+          textIntersect(firstSourceItem, lastSourceItem, labelGap) && items.includes(lastSourceItem) && items.length > 1 && checkFirst && checkLast && (items.splice(items.indexOf(lastSourceItem), 1), checkLast = !1), forceItemVisible(firstSourceItem, items, checkFirst, item => textIntersect(item, firstSourceItem, labelGap)), forceItemVisible(lastSourceItem, items, checkLast, item => textIntersect(item, lastSourceItem, labelGap) || !(!checkFirst || item === firstSourceItem) && textIntersect(item, firstSourceItem, labelGap), !0);
+          const ticks = items.map(item => item.value);
+          ticks.length < 3 && labelFlush && (ticks.length > 1 && ticks.pop(), last$1(ticks) !== last$1(scaleTicks) && ticks.push(last$1(scaleTicks))), scaleTicks = ticks;
+        }
       }
       return convertDomainToTickData(scaleTicks);
     };
@@ -25509,7 +25538,10 @@
       }
     };
 
-    const getOneDimensionalLabelBounds = (scale, domain, op, isHorizontal) => getCartesianLabelBounds(scale, domain, op).map(bounds => isHorizontal ? [bounds.x1, bounds.x2, bounds.width()] : [bounds.y1, bounds.y2, bounds.height()]),
+    const getOneDimensionalLabelBounds = (scale, domain, op, isHorizontal) => {
+        const labelBoundsList = getCartesianLabelBounds(scale, domain, op);
+        return labelBoundsList && labelBoundsList.map(bounds => isHorizontal ? [bounds.x1, bounds.x2, bounds.width()] : [bounds.y1, bounds.y2, bounds.height()]);
+      },
       boundsOverlap = (prevBounds, nextBounds, gap = 0) => Math.max(prevBounds[0], nextBounds[0]) - gap / 2 <= Math.min(prevBounds[1], nextBounds[1]) + gap / 2;
     const boundsDistance = (prevBounds, nextBounds) => prevBounds[1] < nextBounds[0] ? nextBounds[0] - prevBounds[1] : nextBounds[1] < prevBounds[0] ? prevBounds[0] - nextBounds[1] : 0;
     const linearDiscreteTicks = (scale, op) => {
@@ -25540,23 +25572,27 @@
           rangeStart = minInArray$1(range),
           rangeEnd = maxInArray$1(range);
         if (domain.length <= rangeSize / fontSize) {
-          const incrementUnit = (rangeEnd - rangeStart) / domain.length,
-            labelBoundsList = getOneDimensionalLabelBounds(scale, domain, op, isHorizontal),
-            minBoundsLength = Math.min(...labelBoundsList.map(bounds => bounds[2])),
-            stepResult = getStep$1(domain, labelBoundsList, labelGap, op.labelLastVisible, Math.floor(minBoundsLength / incrementUnit), !1);
-          scaleTicks = scale.stepTicks(stepResult.step), op.labelLastVisible && (stepResult.delCount && (scaleTicks = scaleTicks.slice(0, scaleTicks.length - stepResult.delCount)), scaleTicks.push(domain[domain.length - 1]));
+          const labelBoundsList = getOneDimensionalLabelBounds(scale, domain, op, isHorizontal);
+          if (labelBoundsList) {
+            const minBoundsLength = Math.min(...labelBoundsList.map(bounds => bounds[2])),
+              incrementUnit = (rangeEnd - rangeStart) / domain.length,
+              stepResult = getStep$1(domain, labelBoundsList, labelGap, op.labelLastVisible, Math.floor(minBoundsLength / incrementUnit), !1);
+            scaleTicks = scale.stepTicks(stepResult.step), op.labelLastVisible && (stepResult.delCount && (scaleTicks = scaleTicks.slice(0, scaleTicks.length - stepResult.delCount)), scaleTicks.push(domain[domain.length - 1]));
+          }
         } else {
           const tempDomain = [domain[0], domain[Math.floor(domain.length / 2)], domain[domain.length - 1]],
             tempList = getOneDimensionalLabelBounds(scale, tempDomain, op, isHorizontal);
-          let maxBounds = null;
-          tempList.forEach(current => {
-            maxBounds ? maxBounds[2] < current[2] && (maxBounds = current) : maxBounds = current;
-          });
-          const step = rangeEnd - rangeStart - labelGap > 0 ? Math.ceil(domain.length * (labelGap + maxBounds[2]) / (rangeEnd - rangeStart - labelGap)) : domain.length - 1;
-          scaleTicks = scale.stepTicks(step), !op.labelLastVisible || scaleTicks.length && scaleTicks[scaleTicks.length - 1] === domain[domain.length - 1] || (scaleTicks.length && Math.abs(scale.scale(scaleTicks[scaleTicks.length - 1]) - scale.scale(domain[domain.length - 1])) < maxBounds[2] && (scaleTicks = scaleTicks.slice(0, -1)), scaleTicks.push(domain[domain.length - 1]));
+          if (tempList) {
+            let maxBounds = null;
+            tempList.forEach(current => {
+              maxBounds ? maxBounds[2] < current[2] && (maxBounds = current) : maxBounds = current;
+            });
+            const step = rangeEnd - rangeStart - labelGap > 0 ? Math.ceil(domain.length * (labelGap + maxBounds[2]) / (rangeEnd - rangeStart - labelGap)) : domain.length - 1;
+            scaleTicks = scale.stepTicks(step), !op.labelLastVisible || scaleTicks.length && scaleTicks[scaleTicks.length - 1] === domain[domain.length - 1] || (scaleTicks.length && Math.abs(scale.scale(scaleTicks[scaleTicks.length - 1]) - scale.scale(domain[domain.length - 1])) < maxBounds[2] && (scaleTicks = scaleTicks.slice(0, -1)), scaleTicks.push(domain[domain.length - 1]));
+          }
         }
-      } else scaleTicks = scale.domain();
-      return convertDomainToTickData(scaleTicks);
+      }
+      return isNil$5(scaleTicks) && (scaleTicks = scale.domain()), convertDomainToTickData(scaleTicks);
     };
     const getStep$1 = (domain, labelBoundsList, labelGap, labelLastVisible, defaultStep, areAllBoundsSame) => {
       let resultDelCount = 0,
@@ -34270,6 +34306,9 @@
             this._sourceLength = this._source?.length || 0;
             this.sortedIndexMap.clear();
             this.currentIndexedData = Array.from({ length: this._sourceLength }, (_, i) => i);
+            if (this.rowHierarchyType === 'tree') {
+                this.initTreeHierarchyState();
+            }
             if (!this.userPagination) {
                 this.pagination.perPageCount = this._sourceLength;
                 this.pagination.totalCount = this._sourceLength;
@@ -40297,6 +40336,7 @@
         if (!addNew && oldCellGroup.parent) {
             oldCellGroup.parent.insertAfter(newCellGroup, oldCellGroup);
             oldCellGroup.parent.removeChild(oldCellGroup);
+            oldCellGroup.release(true);
             if (table.scenegraph?.proxy.cellCache.get(col)) {
                 table.scenegraph?.proxy.cellCache.set(col, newCellGroup);
             }
@@ -46403,7 +46443,9 @@
             computeColsWidth(table, 0, distColForCompute ?? distCol);
         }
         if (table.internalProps._heightResizedRowMap.size === 0) {
-            computeRowsHeight(table, 0, table.options.canvasHeight === 'auto' ? table.rowCount - 1 : distRowForCompute ?? distRow);
+            computeRowsHeight(table, 0, table.options.canvasHeight === 'auto' || table.options.customConfig?.forceComputeAllRowHeight
+                ? table.rowCount - 1
+                : distRowForCompute ?? distRow);
         }
         if (distCol < table.colCount - table.rightFrozenColCount) {
             if (table.colCount - table.rightFrozenColCount <= table.colCount - 1) {
@@ -51646,22 +51688,40 @@
             if (this.table.widthMode === 'adaptive' ||
                 this.table.heightMode === 'adaptive' ||
                 this.table.autoFillWidth ||
-                this.table.autoFillHeight) {
+                this.table.autoFillHeight ||
+                this.table.containerFit?.width ||
+                this.table.containerFit?.height) {
                 this.updateChartSizeForResizeColWidth(-1);
             }
             this.proxy.progress();
             this.updateNextFrame();
         }
         updateTableSize() {
+            const contentWidth = Math.max(this.colHeaderGroup.attribute.width, this.bodyGroup.attribute.width, this.bottomFrozenGroup.attribute.width, 0) +
+                Math.max(this.cornerHeaderGroup.attribute.width, this.rowHeaderGroup.attribute.width, this.leftBottomCornerGroup.attribute.width, 0) +
+                Math.max(this.rightTopCornerGroup.attribute.width, this.rightFrozenGroup.attribute.width, this.rightBottomCornerGroup.attribute.width, 0);
+            const contentHeight = Math.max(this.colHeaderGroup.attribute.height, this.cornerHeaderGroup.attribute.height, this.rightTopCornerGroup.attribute.height, 0) +
+                Math.max(this.rowHeaderGroup.attribute.height, this.bodyGroup.attribute.height, this.rightFrozenGroup.attribute.height, 0) +
+                Math.max(this.leftBottomCornerGroup.attribute.height, this.bottomFrozenGroup.attribute.height, this.rightBottomCornerGroup.attribute.height, 0);
+            let tableWidth = contentWidth;
+            let tableHeight = contentHeight;
+            if (this.table.containerFit?.width) {
+                tableWidth = this.table.tableNoFrameWidth;
+            }
+            else {
+                tableWidth = Math.min(this.table.tableNoFrameWidth, contentWidth);
+            }
+            if (this.table.containerFit?.height) {
+                tableHeight = this.table.tableNoFrameHeight;
+            }
+            else {
+                tableHeight = Math.min(this.table.tableNoFrameHeight, contentHeight);
+            }
             this.tableGroup.setAttributes({
                 x: this.table.tableX,
                 y: this.table.tableY,
-                width: Math.min(this.table.tableNoFrameWidth, Math.max(this.colHeaderGroup.attribute.width, this.bodyGroup.attribute.width, this.bottomFrozenGroup.attribute.width, 0) +
-                    Math.max(this.cornerHeaderGroup.attribute.width, this.rowHeaderGroup.attribute.width, this.leftBottomCornerGroup.attribute.width, 0) +
-                    Math.max(this.rightTopCornerGroup.attribute.width, this.rightFrozenGroup.attribute.width, this.rightBottomCornerGroup.attribute.width, 0)),
-                height: Math.min(this.table.tableNoFrameHeight, Math.max(this.colHeaderGroup.attribute.height, this.cornerHeaderGroup.attribute.height, this.rightTopCornerGroup.attribute.height, 0) +
-                    Math.max(this.rowHeaderGroup.attribute.height, this.bodyGroup.attribute.height, this.rightFrozenGroup.attribute.height, 0) +
-                    Math.max(this.leftBottomCornerGroup.attribute.height, this.bottomFrozenGroup.attribute.height, this.rightBottomCornerGroup.attribute.height, 0))
+                width: tableWidth,
+                height: tableHeight
             });
             if (this.tableGroup.border) {
                 const rectAttributes = this.tableGroup.border?.attribute;
@@ -55958,13 +56018,14 @@
                 state.updateInteractionState(InteractionState.scrolling);
             }
         }
+        const autoHide = state.table.options.theme?.scrollStyle?.visible === 'scrolling';
         if (optimizedDeltaX) {
             state.setScrollLeft(state.scroll.horizontalBarPos + optimizedDeltaX, event);
-            state.showHorizontalScrollBar(true);
+            state.showHorizontalScrollBar(autoHide);
         }
         if (optimizedDeltaY) {
             state.setScrollTop(state.scroll.verticalBarPos + optimizedDeltaY, event);
-            state.showVerticalScrollBar(true);
+            state.showVerticalScrollBar(autoHide);
         }
         isWheelEvent && state.resetInteractionState(state.interactionStateBeforeScroll);
         if (event.nativeEvent?.cancelable &&
@@ -56318,6 +56379,7 @@
                     event: e.nativeEvent
                 });
             }
+            table.internalProps.focusControl.focus();
             table.eventManager.isDown = true;
             table.eventManager.LastBodyPointerXY = { x: e.x, y: e.y };
             table.eventManager.LastPointerXY = { x: e.x, y: e.y };
@@ -56489,6 +56551,7 @@
                 }
             }
             setTimeout(() => {
+                eventManager.isDown = false;
                 eventManager.isTouchdown = false;
                 eventManager.isTouchMove = false;
                 eventManager.isDraging = false;
@@ -57658,6 +57721,7 @@
                     });
                 }
             }
+            stateManager.updateInteractionState(InteractionState.default);
         };
         eventManager.globalEventListeners.push({
             name: 'pointerup',
@@ -58383,7 +58447,14 @@
             if (ranges.length > 0) {
                 for (let i = 0; i < ranges.length; i++) {
                     const range = ranges[i];
-                    if (col >= range.start.col && col <= range.end.col && row >= range.start.row && row <= range.end.row) {
+                    const startCol = range.start.col;
+                    const endCol = range.end.col;
+                    const startRow = range.start.row;
+                    const endRow = range.end.row;
+                    if ((col >= startCol && col <= endCol && row >= startRow && row <= endRow) ||
+                        (col >= endCol && col <= startCol && row >= endRow && row <= startRow) ||
+                        (col >= startCol && col <= endCol && row >= endRow && row <= startRow) ||
+                        (col >= endCol && col <= startCol && row >= startRow && row <= endRow)) {
                         cellInRange = true;
                         break;
                     }
@@ -59625,8 +59696,8 @@
             const secondElement = this._secondElement;
             const rootElement = this._rootElement;
             const element = table.internalProps.menu.parentElement ?? table.getElement();
-            const { width: containerWidth, left: containerLeft, top: containerTop } = element.getBoundingClientRect();
-            const { x: rootLeft, y: rootTop, width: rootWidth } = rootElement.getBoundingClientRect();
+            const { width: containerWidth, height: containerHeight, left: containerLeft, top: containerTop } = element.getBoundingClientRect();
+            const { x: rootLeft, y: rootTop, width: rootWidth, height: rootHeight } = rootElement.getBoundingClientRect();
             if (secondElement) {
                 if (secondElement.parentElement !== element) {
                     element.appendChild(secondElement);
@@ -59635,9 +59706,15 @@
                 const maxWidth = containerWidth * 0.8;
                 secondElement.style.maxWidth = `${maxWidth}px`;
                 const secondElementWidth = secondElement.clientWidth;
+                const secondElementHeight = secondElement.clientHeight;
                 const secondElementTop = y - 4 - containerTop;
                 const secondElementLeft = x - containerLeft;
-                secondElement.style.top = `${secondElementTop}px`;
+                let topStyle = secondElementTop;
+                if (topStyle + secondElementHeight > containerHeight) {
+                    const secondElementItem = secondElement.firstElementChild;
+                    topStyle = topStyle - secondElementHeight + secondElementItem.clientHeight + 4;
+                }
+                secondElement.style.top = `${topStyle}px`;
                 let leftStyle = secondElementLeft;
                 if (leftStyle + secondElementWidth > containerWidth) {
                     leftStyle = leftStyle - secondElementWidth - rootWidth;
@@ -63386,6 +63463,7 @@
         _heightMode;
         _autoFillWidth;
         _autoFillHeight;
+        _containerFit;
         _widthAdaptiveMode;
         _heightAdaptiveMode;
         customRender;
@@ -63403,7 +63481,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "1.19.0-alpha.0";
+        version = "1.19.1-alpha.0";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -63443,7 +63521,7 @@
             if (options.customConfig?.imageAnonymous === false) {
                 vglobal.isImageAnonymous = false;
             }
-            const { frozenColCount = 0, unfreezeAllOnExceedsMaxWidth, frozenRowCount, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth, widthMode = 'standard', heightMode = 'standard', autoFillWidth = false, autoFillHeight = false, widthAdaptiveMode = 'only-body', heightAdaptiveMode = 'only-body', keyboardOptions, eventOptions, rowSeriesNumber, enableCheckboxCascade, columnResizeMode, rowResizeMode = 'none', resize, dragHeaderMode, dragOrder, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, customRender, pixelRatio = defaultPixelRatio, renderChartAsync, renderChartAsyncBatchCount, mode, modeParams, canvasWidth, canvasHeight, overscrollBehavior, limitMinWidth, limitMinHeight, clearDOM = true } = options;
+            const { frozenColCount = 0, unfreezeAllOnExceedsMaxWidth, frozenRowCount, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth, widthMode = 'standard', heightMode = 'standard', autoFillWidth = false, autoFillHeight = false, containerFit = { width: false, height: false }, widthAdaptiveMode = 'only-body', heightAdaptiveMode = 'only-body', keyboardOptions, eventOptions, rowSeriesNumber, enableCheckboxCascade, columnResizeMode, rowResizeMode = 'none', resize, dragHeaderMode, dragOrder, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, customRender, pixelRatio = defaultPixelRatio, renderChartAsync, renderChartAsyncBatchCount, mode, modeParams, canvasWidth, canvasHeight, overscrollBehavior, limitMinWidth, limitMinHeight, clearDOM = true } = options;
             this.container = container;
             this.options = options;
             this._widthMode = widthMode;
@@ -63452,6 +63530,20 @@
             this._heightAdaptiveMode = heightAdaptiveMode;
             this._autoFillWidth = autoFillWidth;
             this._autoFillHeight = autoFillHeight;
+            if (containerFit !== undefined) {
+                if (typeof containerFit === 'boolean') {
+                    this._containerFit = { width: containerFit, height: containerFit };
+                }
+                else if (containerFit && typeof containerFit === 'object') {
+                    this._containerFit = {
+                        width: containerFit.width ?? true,
+                        height: containerFit.height ?? true
+                    };
+                }
+                else {
+                    this._containerFit = { width: false, height: false };
+                }
+            }
             this.customRender = customRender;
             this.padding = { top: 0, right: 0, left: 0, bottom: 0 };
             if (padding) {
@@ -64836,7 +64928,7 @@
             this.editorManager?.cancelEdit();
             this.options = options;
             this._hasAutoImageColumn = undefined;
-            const { frozenColCount = 0, unfreezeAllOnExceedsMaxWidth, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth = 80, keyboardOptions, eventOptions, rowSeriesNumber, enableCheckboxCascade, columnResizeMode, rowResizeMode = 'none', resize, dragHeaderMode, dragOrder, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, pixelRatio, widthMode, heightMode, autoFillWidth, autoFillHeight, widthAdaptiveMode, heightAdaptiveMode, customRender, renderChartAsync, renderChartAsyncBatchCount, canvasWidth, canvasHeight, overscrollBehavior, limitMinWidth, limitMinHeight } = options;
+            const { frozenColCount = 0, unfreezeAllOnExceedsMaxWidth, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth = 80, keyboardOptions, eventOptions, rowSeriesNumber, enableCheckboxCascade, columnResizeMode, rowResizeMode = 'none', resize, dragHeaderMode, dragOrder, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, pixelRatio, widthMode, heightMode, autoFillWidth, autoFillHeight, containerFit, widthAdaptiveMode, heightAdaptiveMode, customRender, renderChartAsync, renderChartAsyncBatchCount, canvasWidth, canvasHeight, overscrollBehavior, limitMinWidth, limitMinHeight } = options;
             if (pixelRatio && pixelRatio !== this.internalProps.pixelRatio) {
                 this.internalProps.pixelRatio = pixelRatio;
             }
@@ -64864,6 +64956,20 @@
             this._heightAdaptiveMode = heightAdaptiveMode ?? 'only-body';
             this.autoFillWidth = autoFillWidth ?? false;
             this.autoFillHeight = autoFillHeight ?? false;
+            if (containerFit !== undefined) {
+                if (typeof containerFit === 'boolean') {
+                    this._containerFit = { width: containerFit, height: containerFit };
+                }
+                else if (containerFit && typeof containerFit === 'object') {
+                    this._containerFit = {
+                        width: containerFit.width ?? true,
+                        height: containerFit.height ?? true
+                    };
+                }
+                else {
+                    this._containerFit = { width: false, height: false };
+                }
+            }
             this.customRender = customRender;
             this.canvasWidth = isNumber$4(canvasWidth) ? canvasWidth : undefined;
             this.canvasHeight = isNumber$4(canvasHeight) ? canvasHeight : undefined;
@@ -66084,8 +66190,26 @@
             this.render();
             const stage = this.scenegraph.stage;
             if (stage) {
-                const contentWidth = this.tableX + this.getAllColsWidth();
-                const contentHeight = this.tableY + this.getAllRowsHeight();
+                let contentWidth = this.tableX + this.getAllColsWidth();
+                let contentHeight = this.tableY + this.getAllRowsHeight();
+                if (this.internalProps.legends) {
+                    this.internalProps.legends.forEach(legend => {
+                        if (legend.orient === 'right') {
+                            contentWidth = Math.max(contentWidth, legend.legendComponent.globalAABBBounds.x2);
+                        }
+                        else if (legend.orient === 'bottom') {
+                            contentHeight = Math.max(contentHeight, legend.legendComponent.globalAABBBounds.y2);
+                        }
+                    });
+                }
+                if (this.internalProps.title) {
+                    if (this.internalProps.title._titleOption.orient === 'right') {
+                        contentWidth = Math.max(contentWidth, this.internalProps.title.getComponentGraphic().globalAABBBounds.x2);
+                    }
+                    else if (this.internalProps.title._titleOption.orient === 'bottom') {
+                        contentHeight = Math.max(contentHeight, this.internalProps.title.getComponentGraphic().globalAABBBounds.y2);
+                    }
+                }
                 if (contentWidth >= this.canvasWidth && contentHeight >= this.canvasHeight) {
                     stage.render();
                     const buffer = stage.window.getImageBuffer(type);
@@ -66272,6 +66396,23 @@
         checkHasColumnAutoWidth() {
             return checkHasColumnAutoWidth(this);
         }
+        get containerFit() {
+            return this._containerFit;
+        }
+        set containerFit(containerFit) {
+            if (typeof containerFit === 'boolean') {
+                this._containerFit = { width: containerFit, height: containerFit };
+            }
+            else if (containerFit && typeof containerFit === 'object') {
+                this._containerFit = {
+                    width: containerFit.width ?? true,
+                    height: containerFit.height ?? true
+                };
+            }
+            else {
+                this._containerFit = { width: false, height: false };
+            }
+        }
     }
 
     var core = /*#__PURE__*/Object.freeze({
@@ -68305,7 +68446,7 @@
                             style: rowSeriesNumber.style,
                             width: rowSeriesNumber.width,
                             format: rowSeriesNumber.format,
-                            field: rowSeriesNumber.field,
+                            field: rowSeriesNumber.field ?? '_vtable_rowSeries_number',
                             icon: rowSeriesNumber.icon,
                             headerIcon: rowSeriesNumber.headerIcon,
                             isChildNode: false
@@ -70510,11 +70651,14 @@
         get recordsCount() {
             return this.dataSource.records.length;
         }
-        updateColumns(columns) {
+        updateColumns(columns, options) {
             this.scenegraph.clearCells();
             const oldHoverState = { col: this.stateManager.hover.cellPos.col, row: this.stateManager.hover.cellPos.row };
             this.internalProps.columns = cloneDeepSpec(columns, ['children']);
             generateAggregationForColumn(this);
+            if (options?.clearColWidthCache) {
+                this.internalProps._widthResizedColMap.clear();
+            }
             this.options.columns = columns;
             this.internalProps.headerHelper.setTableColumnsEditor();
             this._hasAutoImageColumn = undefined;
@@ -86474,7 +86618,7 @@
     }
 
     registerForVrender();
-    const version = "1.19.0-alpha.0";
+    const version = "1.19.1-alpha.0";
     function getIcons() {
         return get$2();
     }