e-virt-table 1.2.29 → 1.2.31

package/dist/index.es.js

@@ -66,13 +66,13 @@ function Ht() {
     return (c === "x" ? t : t & 3 | 8).toString(16);
   });
 }
-function xt(c, t) {
+function Z(c, t) {
   let e = 0, i;
   return function(...s) {
-    const o = (/* @__PURE__ */ new Date()).getTime(), r = o - e;
-    !e || r >= t ? (c.apply(this, s), e = o) : i || (i = setTimeout(() => {
+    const o = (/* @__PURE__ */ new Date()).getTime(), r = o - e, a = typeof t == "function" ? t() : t;
+    !e || r >= a ? (c.apply(this, s), e = o) : i || (i = setTimeout(() => {
       c.apply(this, s), e = (/* @__PURE__ */ new Date()).getTime(), i = void 0;
-    }, t - r));
+    }, a - r));
   };
 }
 function Dt(c = []) {
@@ -115,10 +115,10 @@ function Nt(c = [], t = 1, e = 0) {
     };
   });
 }
-function et(c = []) {
+function it(c = []) {
   let t = [];
   return c.forEach((e) => {
-    e.children ? t = t.concat(et(e.children)) : t.push(e);
+    e.children ? t = t.concat(it(e.children)) : t.push(e);
   }), t;
 }
 const Ct = /^(\r\n|\n\r|\r|\n)/, ae = /^[^\t\r\n]+/, bt = /^\t/;
@@ -401,7 +401,7 @@ class ut extends Yt {
     n(this, "overflowTooltipMaxWidth", 500);
     n(this, "overflowTooltipPlacement", "top");
     n(this, "maxLineClamp", "auto");
-    this.visibleWidth = this.width, this.visibleHeight = this.height, this.colIndex = s, this.rowIndex = i, this.key = l.key, this.type = l.type || "", this.editorType = l.editorType || "text", this.selectorCellValueType = l.selectorCellValueType || this.ctx.config.SELECTOR_CELL_VALUE_TYPE || "value", this.editorProps = l.editorProps || {}, this.cellType = f, this.align = l.align || this.ctx.config.COLUMNS_ALIGN, this.verticalAlign = l.verticalAlign || this.ctx.config.COLUMNS_VERTICAL_ALIGN, this.fixed = l.fixed, this.level = l.level || 0, this.operation = l.operation || !1, this.column = l, this.rules = l.rules || [], this.row = d, this.rowKey = this.cellType === "body" ? this.ctx.database.getRowKeyForRowIndex(i) : `${this.cellType}_${this.rowIndex}`, this.value = this.getValue(), this.render = l.render, this.overflowTooltipShow = l.overflowTooltipShow !== !1, this.autoRowHeight = l.autoRowHeight || this.ctx.config.AUTO_ROW_HEIGHT, this.overflowTooltipMaxWidth = l.overflowTooltipMaxWidth || 500, this.overflowTooltipPlacement = l.overflowTooltipPlacement || "top", this.renderFooter = l.renderFooter, this.hoverIconName = l.hoverIconName, this.formatter = l.formatter, this.formatterFooter = l.formatterFooter, this.maxLineClamp = l.maxLineClamp || "auto", this.update();
+    this.visibleWidth = this.width, this.visibleHeight = this.height, this.colIndex = s, this.rowIndex = i, this.key = l.key, this.type = l.type || "", this.editorType = l.editorType || "text", this.selectorCellValueType = l.selectorCellValueType || this.ctx.config.SELECTOR_CELL_VALUE_TYPE || "value", this.editorProps = l.editorProps || {}, this.cellType = f, this.align = l.align || this.ctx.config.COLUMNS_ALIGN, this.verticalAlign = l.verticalAlign || this.ctx.config.COLUMNS_VERTICAL_ALIGN, this.fixed = l.fixed, this.level = l.level || 0, this.operation = l.operation || !1, this.column = l, this.rules = l.rules || [], this.row = d, this.rowKey = this.cellType === "body" ? this.ctx.database.getRowKeyForRowIndex(i) : `${this.cellType}_${this.rowIndex}`, this.value = this.getValue(), this.render = l.render, this.overflowTooltipShow = l.overflowTooltipShow !== !1, this.autoRowHeight = l.autoRowHeight !== void 0 ? l.autoRowHeight : this.ctx.config.AUTO_ROW_HEIGHT, this.overflowTooltipMaxWidth = l.overflowTooltipMaxWidth || 500, this.overflowTooltipPlacement = l.overflowTooltipPlacement || "top", this.renderFooter = l.renderFooter, this.hoverIconName = l.hoverIconName, this.formatter = l.formatter, this.formatterFooter = l.formatterFooter, this.maxLineClamp = l.maxLineClamp || "auto", this.update();
   }
   setWidthHeight(e, i) {
     this.width = e, this.height = i;
@@ -691,12 +691,12 @@ class ut extends Yt {
     if (this.cellType !== "body" || !this.autoRowHeight || this.rowspan === 0)
       return 0;
     if (this.render) {
-      const r = this.ctx.database.getOverlayerAutoHeight(this.rowIndex, this.colIndex);
-      return this.rowspan > 1 ? r < this.visibleHeight ? 0 : Math.round(r - (this.visibleHeight - this.height)) : Math.round(r);
+      const a = this.ctx.database.getOverlayerAutoHeight(this.rowIndex, this.colIndex);
+      return this.rowspan > 1 ? a < this.visibleHeight ? 0 : Math.round(a - (this.visibleHeight - this.height)) : Math.round(a);
     }
     if (!(this.displayText && typeof this.displayText == "string"))
       return 0;
-    const { BODY_FONT: e, CELL_PADDING: i, CELL_LINE_HEIGHT: s } = this.ctx.config, o = this.ctx.paint.calculateTextHeight(this.displayText, this.drawTextWidth, {
+    const { BODY_FONT: e, CELL_PADDING: i, CELL_LINE_HEIGHT: s } = this.ctx.config, o = `${this.displayText}_${this.drawTextWidth}`, r = this.ctx.paint.calculateTextHeight(this.displayText, this.drawTextWidth, {
       font: e,
       padding: i,
       align: this.align,
@@ -704,9 +704,10 @@ class ut extends Yt {
       color: this.drawTextColor,
       autoRowHeight: this.autoRowHeight,
       lineHeight: s,
-      maxLineClamp: this.maxLineClamp
+      maxLineClamp: this.maxLineClamp,
+      cacheTextKey: o
     });
-    return this.rowspan > 1 ? o < this.visibleHeight ? 0 : Math.round(o - (this.visibleHeight - this.height)) : Math.round(o);
+    return this.rowspan > 1 ? r < this.visibleHeight ? 0 : Math.round(r - (this.visibleHeight - this.height)) : Math.round(r);
   }
   // 过去跨度配置
   getSpanInfo() {
@@ -831,7 +832,11 @@ class ut extends Yt {
   drawText() {
     const { CELL_PADDING: e, BODY_FONT: i, PLACEHOLDER_COLOR: s, CELL_LINE_HEIGHT: o } = this.ctx.config, { placeholder: r } = this.column;
     let a = this.displayText, h = this.drawTextColor;
-    return !this.ctx.database.getReadonly(this.rowKey, this.key) && r && ["", null, void 0].includes(this.text) && this.cellType === "body" && !(this.rowspan === 0 || this.colspan === 0) && (a = r, h = s), a ? (this.ellipsis = this.ctx.paint.drawText(
+    if (!this.ctx.database.getReadonly(this.rowKey, this.key) && r && ["", null, void 0].includes(this.text) && this.cellType === "body" && !(this.rowspan === 0 || this.colspan === 0) && (a = r, h = s), !a)
+      return !1;
+    typeof a != "string" && (a = `${a}`);
+    const d = `${a}_${this.drawTextWidth}`;
+    return this.ellipsis = this.ctx.paint.drawText(
       a,
       this.drawTextX,
       this.drawTextY,
@@ -845,9 +850,10 @@ class ut extends Yt {
         color: h,
         autoRowHeight: this.autoRowHeight,
         lineHeight: o,
-        maxLineClamp: this.maxLineClamp
+        maxLineClamp: this.maxLineClamp,
+        cacheTextKey: d
       }
-    ), this.ellipsis) : !1;
+    ), this.ellipsis;
   }
   drawImage() {
     if (this.drawSelectionImageSource && this.ctx.paint.drawImage(
@@ -1028,8 +1034,8 @@ class ue {
   }
   // 初始化默认不忽略清空改变值和校验map
   init(t = !0) {
-    this.clearBufferData(), this.rowKeyMap.clear(), this.checkboxKeyMap.clear(), this.colIndexKeyMap.clear(), this.rowIndexRowKeyMap.clear(), this.rowKeyRowIndexMap.clear();
-    const e = this.getColumns(), i = et(e);
+    this.ctx.paint.clearTextCache(), this.clearBufferData(), this.rowKeyMap.clear(), this.checkboxKeyMap.clear(), this.colIndexKeyMap.clear(), this.rowIndexRowKeyMap.clear(), this.rowKeyRowIndexMap.clear();
+    const e = this.getColumns(), i = it(e);
     if (this.ctx.hasSelection = i.some((s) => s.type === "selection"), this.ctx.hasTree = i.some((s) => s.type === "tree"), t) {
       this.originalDataMap.clear(), this.changedDataMap.clear(), this.validationErrorMap.clear();
       const { ROW_KEY: s } = this.ctx.config;
@@ -2295,10 +2301,14 @@ class me {
 class pe {
   constructor(t) {
     n(this, "ctx");
+    n(this, "textCacheMap", /* @__PURE__ */ new Map());
     const e = t.getContext("2d");
     if (!e) throw new Error("canvas context not found");
     this.ctx = e;
   }
+  clearTextCache() {
+    this.textCacheMap.clear();
+  }
   scale(t) {
     this.ctx.setTransform(1, 0, 0, 1, 0, 0), this.ctx.scale(t, t);
   }
@@ -2403,7 +2413,7 @@ class pe {
     if (s <= E + d * 2 + w + m)
       return this.ctx.restore(), R = !0, R;
     const C = Math.round((o - 2 * d) / p);
-    let I = this.wrapText(t, y), S = Math.min(I.length, Math.max(C, 1));
+    let I = this.wrapText(t, y, r.cacheTextKey), S = Math.min(I.length, Math.max(C, 1));
     u === "auto" && x ? S = I.length : typeof u == "number" && u < C ? S = u : (u === 1 && !x && (I = [t], S = 1), u === "auto" && C === 1 && (I = [t], S = 1));
     let _ = i + d;
     const v = Math.round(S * p);
@@ -2443,31 +2453,34 @@ class pe {
    * @param maxWidth
    * @returns
    */
-  wrapText(t, e) {
+  wrapText(t, e, i = "") {
     if (!t) return [""];
-    const i = [], s = t.split(`
+    if (i && this.textCacheMap.has(i))
+      return this.textCacheMap.get(i) || [""];
+    const s = [], o = t.split(`
 `);
-    for (const o of s) {
-      if (o === "") {
-        i.push("");
+    for (const a of o) {
+      if (a === "") {
+        s.push("");
         continue;
       }
-      const r = o.split("");
-      let a = "";
-      for (const h of r) {
-        const l = a + h;
-        this.ctx.measureText(l).width <= e ? a = l : a ? (i.push(a), a = h) : (i.push(h), a = "");
+      const h = a.split("");
+      let l = "";
+      for (const d of h) {
+        const f = l + d;
+        this.ctx.measureText(f).width <= e ? l = f : l ? (s.push(l), l = d) : (s.push(d), l = "");
       }
-      a && i.push(a);
+      l && s.push(l);
     }
-    if (i.length >= 1) {
-      const o = i[i.length - 1], { ellipsis: r } = this.handleEllipsis(o, e, 0, this.ctx.font);
-      if (r) {
-        const a = o.slice(0, -1);
-        i[i.length - 1] = a, i.push(o.slice(-1));
+    if (s.length >= 1) {
+      const a = s[s.length - 1], { ellipsis: h } = this.handleEllipsis(a, e, 0, this.ctx.font);
+      if (h) {
+        const l = a.slice(0, -1);
+        s[s.length - 1] = l, s.push(a.slice(-1));
       }
     }
-    return i.length > 0 ? i : [""];
+    const r = s.length > 0 ? s : [""];
+    return i && this.textCacheMap.set(i, r), r;
   }
   /**
    * 计算文本自适应高度
@@ -2477,12 +2490,19 @@ class pe {
    * @returns 计算出的高度
    */
   calculateTextHeight(t = "", e, i = {}) {
-    var w;
-    const { font: s = "12px Arial", padding: o = 0, align: r = "center", color: a = "#495060", maxLineClamp: h = 1 } = i;
+    var m;
+    const {
+      font: s = "12px Arial",
+      padding: o = 0,
+      align: r = "center",
+      color: a = "#495060",
+      maxLineClamp: h = 1,
+      cacheTextKey: l = ""
+    } = i;
     this.ctx.save(), this.ctx.font = s, this.ctx.fillStyle = a, this.ctx.textAlign = r;
-    const l = parseInt(((w = s.match(/\d+/)) == null ? void 0 : w[0]) || "12"), d = l * (i.lineHeight || 1.2), f = e - o * 2, u = this.wrapText(t, f);
-    let x = 1;
-    return h === "auto" ? x = u.length : u.length > h ? x = h : x = u.length, this.ctx.restore(), Math.max(Math.floor(x * d + o * 2), Math.floor(l + o * 2));
+    const d = parseInt(((m = s.match(/\d+/)) == null ? void 0 : m[0]) || "12"), f = d * (i.lineHeight || 1.2), u = e - o * 2, x = this.wrapText(t, u, l);
+    let w = 1;
+    return h === "auto" ? w = x.length : x.length > h ? w = h : w = x.length, this.ctx.restore(), Math.max(Math.floor(w * f + o * 2), Math.floor(d + o * 2));
   }
   handleEllipsis(t, e, i = 0, s = "12px Arial") {
     this.ctx.save();
@@ -2519,6 +2539,8 @@ class It {
     n(this, "_config", {});
     /** CSS 类名前缀 */
     n(this, "CSS_PREFIX", "e-virt-table");
+    /** 绘制时间 */
+    n(this, "DRAW_TIME_MULTIPLIER", 2);
     /** 图标集合 */
     n(this, "ICONS", []);
     /** 行的唯一标识键 */
@@ -2975,7 +2997,7 @@ class Ce {
     return this.icons.get(t);
   }
 }
-class lt extends Yt {
+class ct extends Yt {
   constructor(e, i, s, o, r, a, h) {
     super(e, s, o, r, a, "header", h.fixed);
     n(this, "align");
@@ -3083,7 +3105,7 @@ class lt extends Yt {
     const {
       paint: e,
       config: { HEADER_FONT: i, CELL_PADDING: s }
-    } = this.ctx;
+    } = this.ctx, o = `${this.displayText}_${this.drawTextWidth}`;
     this.ellipsis = e.drawText(
       this.displayText,
       this.drawTextX,
@@ -3101,11 +3123,12 @@ class lt extends Yt {
         // 排序图标占位
         offsetLeft: this.required ? 12 : 0,
         // 必填星号占位
-        textCallback: (o) => {
-          this.column.sortBy && (this.drawSortImageX = o.right + 4, this.drawSortImageY = o.top + (o.height - 16) / 2), this.required && e.drawText(
+        cacheTextKey: o,
+        textCallback: (r) => {
+          this.column.sortBy && (this.drawSortImageX = r.right + 4, this.drawSortImageY = r.top + (r.height - 16) / 2), this.required && e.drawText(
             "*",
-            o.left - 18,
-            o.top + (o.height - 12) / 2,
+            r.left - 18,
+            r.top + (r.height - 12) / 2,
             24,
             24,
             {
@@ -3162,7 +3185,7 @@ class lt extends Yt {
     ));
   }
   getText() {
-    return this.render ? "" : this.text;
+    return this.render ? "" : `${this.text}`;
   }
   /**
    * 获取样式
@@ -3300,7 +3323,7 @@ class be {
       t.drawSelectionImageWidth,
       t.drawSelectionImageHeight
     ))
-      if (t instanceof lt)
+      if (t instanceof ct)
         t.drawSelectionImageName === "checkbox-uncheck" || t.drawSelectionImageName === "checkbox-indeterminate" ? this.ctx.database.toggleAllSelection() : t.drawSelectionImageName === "checkbox-check" && this.ctx.database.clearSelection(!0);
       else {
         if (!this.ctx.database.getRowSelectable(t.rowKey))
@@ -3365,7 +3388,7 @@ class be {
    */
   imageEnterAndLeave(t, e) {
     const { offsetY: i, offsetX: s } = this.ctx.getOffset(e), o = i, r = s;
-    if (t instanceof lt) {
+    if (t instanceof ct) {
       if (t.drawSelectionImageSource && this.isInsideElement(
         r,
         o,
@@ -3580,6 +3603,7 @@ class Re {
     n(this, "database");
     n(this, "history");
     n(this, "config");
+    n(this, "drawTime", 0);
     const {
       containerElement: i,
       stageElement: s,
@@ -3950,7 +3974,7 @@ class ve {
     n(this, "renderFixedCellHeaders", []);
     this.ctx = t, this.ctx.on(
       "resetHeader",
-      xt(() => {
+      Z(() => {
         this.init(), this.ctx.emit("draw");
       }, 100)
     ), this.init(), this.initResizeColumn();
@@ -3960,7 +3984,7 @@ class ve {
       config: { HEADER_HEIGHT: t, SCROLLER_TRACK_SIZE: e }
     } = this.ctx, i = this.ctx.database.getColumns();
     this.columns = i, this.allCellHeaders = [], this.leafCellHeaders = [], this.fixedLeftCellHeaders = [], this.fixedRightCellHeaders = [], this.centerCellHeaders = [];
-    const s = Dt(i), o = et(i);
+    const s = Dt(i), o = it(i);
     this.height = t * s, this.width = o.reduce((f, u) => {
       const x = u.width || 100, { maxWidth: w, minWidth: m } = u;
       return w && x > w ? f + w : m && x < m ? f + m : f + x;
@@ -4066,8 +4090,8 @@ class ve {
     for (let r = 0; r < i; r++) {
       const a = t[r], h = o * (a.rowspan || 0), l = o * (a.level || 0);
       let { minWidth: d, maxWidth: f } = a, u = a.width || 100;
-      d && u < d && (u = d), f && u > f && (u = f), a.children && (u = et(a.children).reduce((m, g) => m + ((g == null ? void 0 : g.width) || 100), 0));
-      const x = new lt(this.ctx, this.columnIndex, s, l, u, h, a);
+      d && u < d && (u = d), f && u > f && (u = f), a.children && (u = it(a.children).reduce((m, g) => m + ((g == null ? void 0 : g.width) || 100), 0));
+      const x = new ct(this.ctx, this.columnIndex, s, l, u, h, a);
       this.ctx.database.setHeader(a.key, x), this.allCellHeaders.push(x), a.children || (this.leafCellHeaders.push(x), x.column.widthFillDisable || this.resizeNum++), a.fixed === "left" ? this.fixedLeftCellHeaders.push(x) : a.fixed === "right" ? this.fixedRightCellHeaders.push(x) : this.centerCellHeaders.push(x), !a.children && this.columnIndex++, a.children && this.render(a.children, s), s += u;
     }
   }
@@ -4534,7 +4558,7 @@ class Te {
       this.moveFocus(t);
     }), this.ctx.on(
       "mousemove",
-      xt((t) => {
+      Z((t) => {
         const { offsetY: e, offsetX: i } = this.ctx.getOffset(t), s = this.ctx.isTarget(t) && i > 0 && i < this.ctx.body.visibleWidth && e > this.ctx.header.visibleHeight && e < this.ctx.header.visibleHeight + this.ctx.body.visibleHeight;
         (this.ctx.selectorMove || this.ctx.autofillMove) && (!s && !this.mousedownHeader ? this.startAdjustPosition(t) : this.stopAdjustPosition());
       }, 100)
@@ -5189,7 +5213,7 @@ class Oe {
   destroy() {
   }
 }
-const j = Math.min, $ = Math.max, it = Math.round, B = (c) => ({
+const j = Math.min, $ = Math.max, st = Math.round, B = (c) => ({
   x: c,
   y: c
 }), Le = {
@@ -5201,16 +5225,16 @@ const j = Math.min, $ = Math.max, it = Math.round, B = (c) => ({
   start: "end",
   end: "start"
 };
-function ct(c, t, e) {
+function dt(c, t, e) {
   return $(c, j(t, e));
 }
-function J(c, t) {
+function Q(c, t) {
   return typeof c == "function" ? c(t) : c;
 }
 function z(c) {
   return c.split("-")[0];
 }
-function Q(c) {
+function tt(c) {
   return c.split("-")[1];
 }
 function Kt(c) {
@@ -5228,15 +5252,15 @@ function mt(c) {
 }
 function He(c, t, e) {
   e === void 0 && (e = !1);
-  const i = Q(c), s = mt(c), o = wt(s);
+  const i = tt(c), s = mt(c), o = wt(s);
   let r = s === "x" ? i === (e ? "end" : "start") ? "right" : "left" : i === "start" ? "bottom" : "top";
-  return t.reference[o] > t.floating[o] && (r = st(r)), [r, st(r)];
+  return t.reference[o] > t.floating[o] && (r = ot(r)), [r, ot(r)];
 }
 function De(c) {
-  const t = st(c);
-  return [dt(c), t, dt(t)];
+  const t = ot(c);
+  return [ft(c), t, ft(t)];
 }
-function dt(c) {
+function ft(c) {
   return c.replace(/start|end/g, (t) => Me[t]);
 }
 const _t = ["left", "right"], Tt = ["right", "left"], Ne = ["top", "bottom"], ke = ["bottom", "top"];
@@ -5253,11 +5277,11 @@ function Xe(c, t, e) {
   }
 }
 function Ye(c, t, e, i) {
-  const s = Q(c);
+  const s = tt(c);
   let o = Xe(z(c), e === "start", i);
-  return s && (o = o.map((r) => r + "-" + s), t && (o = o.concat(o.map(dt)))), o;
+  return s && (o = o.map((r) => r + "-" + s), t && (o = o.concat(o.map(ft)))), o;
 }
-function st(c) {
+function ot(c) {
   return c.replace(/left|right|bottom|top/g, (t) => Le[t]);
 }
 function Be(c) {
@@ -5277,7 +5301,7 @@ function Wt(c) {
     left: c
   };
 }
-function ot(c) {
+function rt(c) {
   const {
     x: t,
     y: e,
@@ -5333,7 +5357,7 @@ function Ot(c, t, e) {
         y: i.y
       };
   }
-  switch (Q(t)) {
+  switch (tt(t)) {
     case "start":
       x[r] -= u * (e && l ? -1 : 1);
       break;
@@ -5420,7 +5444,7 @@ async function Ft(c, t) {
     elementContext: f = "floating",
     altBoundary: u = !1,
     padding: x = 0
-  } = J(t, c), w = Wt(x), g = a[u ? f === "floating" ? "reference" : "floating" : f], p = ot(await o.getClippingRect({
+  } = Q(t, c), w = Wt(x), g = a[u ? f === "floating" ? "reference" : "floating" : f], p = rt(await o.getClippingRect({
     element: (e = await (o.isElement == null ? void 0 : o.isElement(g))) == null || e ? g : g.contextElement || await (o.getDocumentElement == null ? void 0 : o.getDocumentElement(a.floating)),
     boundary: l,
     rootBoundary: d,
@@ -5436,7 +5460,7 @@ async function Ft(c, t) {
   } : {
     x: 1,
     y: 1
-  }, C = ot(o.convertOffsetParentRelativeRectToViewportRelativeRect ? await o.convertOffsetParentRelativeRectToViewportRelativeRect({
+  }, C = rt(o.convertOffsetParentRelativeRectToViewportRelativeRect ? await o.convertOffsetParentRelativeRectToViewportRelativeRect({
     elements: a,
     rect: y,
     offsetParent: E,
@@ -5464,7 +5488,7 @@ const We = (c) => ({
     } = t, {
       element: l,
       padding: d = 0
-    } = J(c, t) || {};
+    } = Q(c, t) || {};
     if (l == null)
       return {};
     const f = Wt(d), u = {
@@ -5473,7 +5497,7 @@ const We = (c) => ({
     }, x = mt(s), w = wt(x), m = await r.getDimensions(l), g = x === "y", p = g ? "top" : "left", y = g ? "bottom" : "right", E = g ? "clientHeight" : "clientWidth", R = o.reference[w] + o.reference[x] - u[x] - o.floating[w], C = u[x] - o.reference[x], I = await (r.getOffsetParent == null ? void 0 : r.getOffsetParent(l));
     let S = I ? I[E] : 0;
     (!S || !await (r.isElement == null ? void 0 : r.isElement(I))) && (S = a.floating[E] || o.floating[w]);
-    const _ = R / 2 - C / 2, v = S / 2 - m[w] / 2 - 1, b = j(f[p], v), O = j(f[y], v), T = b, M = S - m[w] - O, L = S / 2 - m[w] / 2 + _, A = ct(T, L, M), D = !h.arrow && Q(s) != null && L !== A && o.reference[w] / 2 - (L < T ? b : O) - m[w] / 2 < 0, N = D ? L < T ? L - T : L - M : 0;
+    const _ = R / 2 - C / 2, v = S / 2 - m[w] / 2 - 1, b = j(f[p], v), O = j(f[y], v), T = b, M = S - m[w] - O, L = S / 2 - m[w] / 2 + _, A = dt(T, L, M), D = !h.arrow && tt(s) != null && L !== A && o.reference[w] / 2 - (L < T ? b : O) - m[w] / 2 < 0, N = D ? L < T ? L - T : L - M : 0;
     return {
       [x]: u[x] + N,
       data: {
@@ -5507,10 +5531,10 @@ const We = (c) => ({
         fallbackAxisSideDirection: w = "none",
         flipAlignment: m = !0,
         ...g
-      } = J(c, t);
+      } = Q(c, t);
       if ((e = o.arrow) != null && e.alignmentOffset)
         return {};
-      const p = z(s), y = V(a), E = z(a) === a, R = await (h.isRTL == null ? void 0 : h.isRTL(l.floating)), C = u || (E || !m ? [st(a)] : De(a)), I = w !== "none";
+      const p = z(s), y = V(a), E = z(a) === a, R = await (h.isRTL == null ? void 0 : h.isRTL(l.floating)), C = u || (E || !m ? [ot(a)] : De(a)), I = w !== "none";
       !u && I && C.push(...Ye(a, m, w, R));
       const S = [a, ...C], _ = await Ft(t, g), v = [];
       let b = ((i = o.flip) == null ? void 0 : i.overflows) || [];
@@ -5573,7 +5597,7 @@ async function Pe(c, t) {
     placement: e,
     platform: i,
     elements: s
-  } = c, o = await (i.isRTL == null ? void 0 : i.isRTL(s.floating)), r = z(e), a = Q(e), h = V(e) === "y", l = Ve.has(r) ? -1 : 1, d = o && h ? -1 : 1, f = J(t, c);
+  } = c, o = await (i.isRTL == null ? void 0 : i.isRTL(s.floating)), r = z(e), a = tt(e), h = V(e) === "y", l = Ve.has(r) ? -1 : 1, d = o && h ? -1 : 1, f = Q(t, c);
   let {
     mainAxis: u,
     crossAxis: x,
@@ -5642,18 +5666,18 @@ const ze = function(c) {
           }
         },
         ...h
-      } = J(c, t), l = {
+      } = Q(c, t), l = {
         x: e,
         y: i
       }, d = await Ft(t, h), f = V(z(s)), u = Kt(f);
       let x = l[u], w = l[f];
       if (o) {
         const g = u === "y" ? "top" : "left", p = u === "y" ? "bottom" : "right", y = x + d[g], E = x - d[p];
-        x = ct(y, x, E);
+        x = dt(y, x, E);
       }
       if (r) {
         const g = f === "y" ? "top" : "left", p = f === "y" ? "bottom" : "right", y = w + d[g], E = w - d[p];
-        w = ct(y, w, E);
+        w = dt(y, w, E);
       }
       const m = a.fn({
         ...t,
@@ -5674,10 +5698,10 @@ const ze = function(c) {
     }
   };
 };
-function rt() {
+function nt() {
   return typeof window < "u";
 }
-function Z(c) {
+function q(c) {
   return Vt(c) ? (c.nodeName || "").toLowerCase() : "#document";
 }
 function H(c) {
@@ -5689,19 +5713,19 @@ function W(c) {
   return (t = (Vt(c) ? c.ownerDocument : c.document) || window.document) == null ? void 0 : t.documentElement;
 }
 function Vt(c) {
-  return rt() ? c instanceof Node || c instanceof H(c).Node : !1;
+  return nt() ? c instanceof Node || c instanceof H(c).Node : !1;
 }
 function X(c) {
-  return rt() ? c instanceof Element || c instanceof H(c).Element : !1;
+  return nt() ? c instanceof Element || c instanceof H(c).Element : !1;
 }
 function K(c) {
-  return rt() ? c instanceof HTMLElement || c instanceof H(c).HTMLElement : !1;
+  return nt() ? c instanceof HTMLElement || c instanceof H(c).HTMLElement : !1;
 }
 function Lt(c) {
-  return !rt() || typeof ShadowRoot > "u" ? !1 : c instanceof ShadowRoot || c instanceof H(c).ShadowRoot;
+  return !nt() || typeof ShadowRoot > "u" ? !1 : c instanceof ShadowRoot || c instanceof H(c).ShadowRoot;
 }
 const Ge = /* @__PURE__ */ new Set(["inline", "contents"]);
-function tt(c) {
+function et(c) {
   const {
     overflow: t,
     overflowX: e,
@@ -5711,12 +5735,12 @@ function tt(c) {
   return /auto|scroll|overlay|hidden|clip/.test(t + i + e) && !Ge.has(s);
 }
 const Ue = /* @__PURE__ */ new Set(["table", "td", "th"]);
-function Ze(c) {
-  return Ue.has(Z(c));
+function qe(c) {
+  return Ue.has(q(c));
 }
-const je = [":popover-open", ":modal"];
-function nt(c) {
-  return je.some((t) => {
+const Ze = [":popover-open", ":modal"];
+function at(c) {
+  return Ze.some((t) => {
     try {
       return c.matches(t);
     } catch {
@@ -5724,17 +5748,17 @@ function nt(c) {
     }
   });
 }
-const qe = ["transform", "translate", "scale", "rotate", "perspective"], Je = ["transform", "translate", "scale", "rotate", "perspective", "filter"], Qe = ["paint", "layout", "strict", "content"];
+const je = ["transform", "translate", "scale", "rotate", "perspective"], Je = ["transform", "translate", "scale", "rotate", "perspective", "filter"], Qe = ["paint", "layout", "strict", "content"];
 function pt(c) {
   const t = Et(), e = X(c) ? Y(c) : c;
-  return qe.some((i) => e[i] ? e[i] !== "none" : !1) || (e.containerType ? e.containerType !== "normal" : !1) || !t && (e.backdropFilter ? e.backdropFilter !== "none" : !1) || !t && (e.filter ? e.filter !== "none" : !1) || Je.some((i) => (e.willChange || "").includes(i)) || Qe.some((i) => (e.contain || "").includes(i));
+  return je.some((i) => e[i] ? e[i] !== "none" : !1) || (e.containerType ? e.containerType !== "normal" : !1) || !t && (e.backdropFilter ? e.backdropFilter !== "none" : !1) || !t && (e.filter ? e.filter !== "none" : !1) || Je.some((i) => (e.willChange || "").includes(i)) || Qe.some((i) => (e.contain || "").includes(i));
 }
 function ti(c) {
   let t = P(c);
   for (; K(t) && !U(t); ) {
     if (pt(t))
       return t;
-    if (nt(t))
+    if (at(t))
       return null;
     t = P(t);
   }
@@ -5745,12 +5769,12 @@ function Et() {
 }
 const ei = /* @__PURE__ */ new Set(["html", "body", "#document"]);
 function U(c) {
-  return ei.has(Z(c));
+  return ei.has(q(c));
 }
 function Y(c) {
   return H(c).getComputedStyle(c);
 }
-function at(c) {
+function ht(c) {
   return X(c) ? {
     scrollLeft: c.scrollLeft,
     scrollTop: c.scrollTop
@@ -5760,7 +5784,7 @@ function at(c) {
   };
 }
 function P(c) {
-  if (Z(c) === "html")
+  if (q(c) === "html")
     return c;
   const t = (
     // Step into the shadow DOM of the parent of a slotted node.
@@ -5773,21 +5797,21 @@ function P(c) {
 }
 function Pt(c) {
   const t = P(c);
-  return U(t) ? c.ownerDocument ? c.ownerDocument.body : c.body : K(t) && tt(t) ? t : Pt(t);
+  return U(t) ? c.ownerDocument ? c.ownerDocument.body : c.body : K(t) && et(t) ? t : Pt(t);
 }
 function zt(c, t, e) {
   var i;
   t === void 0 && (t = []);
   const s = Pt(c), o = s === ((i = c.ownerDocument) == null ? void 0 : i.body), r = H(s);
-  return o ? (ft(r), t.concat(r, r.visualViewport || [], tt(s) ? s : [], [])) : t.concat(s, zt(s, []));
+  return o ? (xt(r), t.concat(r, r.visualViewport || [], et(s) ? s : [], [])) : t.concat(s, zt(s, []));
 }
-function ft(c) {
+function xt(c) {
   return c.parent && Object.getPrototypeOf(c.parent) ? c.frameElement : null;
 }
 function $t(c) {
   const t = Y(c);
   let e = parseFloat(t.width) || 0, i = parseFloat(t.height) || 0;
-  const s = K(c), o = s ? c.offsetWidth : e, r = s ? c.offsetHeight : i, a = it(e) !== o || it(i) !== r;
+  const s = K(c), o = s ? c.offsetWidth : e, r = s ? c.offsetHeight : i, a = st(e) !== o || st(i) !== r;
   return a && (e = o, i = r), {
     width: e,
     height: i,
@@ -5806,7 +5830,7 @@ function G(c) {
     height: s,
     $: o
   } = $t(t);
-  let r = (o ? it(e.width) : e.width) / i, a = (o ? it(e.height) : e.height) / s;
+  let r = (o ? st(e.width) : e.width) / i, a = (o ? st(e.height) : e.height) / s;
   return (!r || !Number.isFinite(r)) && (r = 1), (!a || !Number.isFinite(a)) && (a = 1), {
     x: r,
     y: a
@@ -5823,7 +5847,7 @@ function Ut(c) {
 function si(c, t, e) {
   return t === void 0 && (t = !1), !e || t && e !== H(c) ? !1 : t;
 }
-function q(c, t, e, i) {
+function J(c, t, e, i) {
   t === void 0 && (t = !1), e === void 0 && (e = !1);
   const s = c.getBoundingClientRect(), o = Gt(c);
   let r = B(1);
@@ -5832,13 +5856,13 @@ function q(c, t, e, i) {
   let h = (s.left + a.x) / r.x, l = (s.top + a.y) / r.y, d = s.width / r.x, f = s.height / r.y;
   if (o) {
     const u = H(o), x = i && X(i) ? H(i) : i;
-    let w = u, m = ft(w);
+    let w = u, m = xt(w);
     for (; m && i && x !== w; ) {
       const g = G(m), p = m.getBoundingClientRect(), y = Y(m), E = p.left + (m.clientLeft + parseFloat(y.paddingLeft)) * g.x, R = p.top + (m.clientTop + parseFloat(y.paddingTop)) * g.y;
-      h *= g.x, l *= g.y, d *= g.x, f *= g.y, h += E, l += R, w = H(m), m = ft(w);
+      h *= g.x, l *= g.y, d *= g.x, f *= g.y, h += E, l += R, w = H(m), m = xt(w);
     }
   }
-  return ot({
+  return rt({
     width: d,
     height: f,
     x: h,
@@ -5846,10 +5870,10 @@ function q(c, t, e, i) {
   });
 }
 function yt(c, t) {
-  const e = at(c).scrollLeft;
-  return t ? t.left + e : q(W(c)).left + e;
+  const e = ht(c).scrollLeft;
+  return t ? t.left + e : J(W(c)).left + e;
 }
-function Zt(c, t, e) {
+function qt(c, t, e) {
   e === void 0 && (e = !1);
   const i = c.getBoundingClientRect(), s = i.left + t.scrollLeft - (e ? 0 : (
     // RTL <body> scrollbar.
@@ -5867,7 +5891,7 @@ function oi(c) {
     offsetParent: i,
     strategy: s
   } = c;
-  const o = s === "fixed", r = W(i), a = t ? nt(t.floating) : !1;
+  const o = s === "fixed", r = W(i), a = t ? at(t.floating) : !1;
   if (i === r || a && o)
     return e;
   let h = {
@@ -5875,11 +5899,11 @@ function oi(c) {
     scrollTop: 0
   }, l = B(1);
   const d = B(0), f = K(i);
-  if ((f || !f && !o) && ((Z(i) !== "body" || tt(r)) && (h = at(i)), K(i))) {
-    const x = q(i);
+  if ((f || !f && !o) && ((q(i) !== "body" || et(r)) && (h = ht(i)), K(i))) {
+    const x = J(i);
     l = G(i), d.x = x.x + i.clientLeft, d.y = x.y + i.clientTop;
   }
-  const u = r && !f && !o ? Zt(r, h, !0) : B(0);
+  const u = r && !f && !o ? qt(r, h, !0) : B(0);
   return {
     width: e.width * l.x,
     height: e.height * l.y,
@@ -5891,7 +5915,7 @@ function ri(c) {
   return Array.from(c.getClientRects());
 }
 function ni(c) {
-  const t = W(c), e = at(c), i = c.ownerDocument.body, s = $(t.scrollWidth, t.clientWidth, i.scrollWidth, i.clientWidth), o = $(t.scrollHeight, t.clientHeight, i.scrollHeight, i.clientHeight);
+  const t = W(c), e = ht(c), i = c.ownerDocument.body, s = $(t.scrollWidth, t.clientWidth, i.scrollWidth, i.clientWidth), o = $(t.scrollHeight, t.clientHeight, i.scrollHeight, i.clientHeight);
   let r = -e.scrollLeft + yt(c);
   const a = -e.scrollTop;
   return Y(i).direction === "rtl" && (r += $(t.clientWidth, i.clientWidth) - s), {
@@ -5918,7 +5942,7 @@ function ai(c, t) {
 }
 const hi = /* @__PURE__ */ new Set(["absolute", "fixed"]);
 function li(c, t) {
-  const e = q(c, !0, t === "fixed"), i = e.top + c.clientTop, s = e.left + c.clientLeft, o = K(c) ? G(c) : B(1), r = c.clientWidth * o.x, a = c.clientHeight * o.y, h = s * o.x, l = i * o.y;
+  const e = J(c, !0, t === "fixed"), i = e.top + c.clientTop, s = e.left + c.clientLeft, o = K(c) ? G(c) : B(1), r = c.clientWidth * o.x, a = c.clientHeight * o.y, h = s * o.x, l = i * o.y;
   return {
     width: r,
     height: a,
@@ -5943,22 +5967,22 @@ function Mt(c, t, e) {
       height: t.height
     };
   }
-  return ot(i);
+  return rt(i);
 }
-function jt(c, t) {
+function Zt(c, t) {
   const e = P(c);
-  return e === t || !X(e) || U(e) ? !1 : Y(e).position === "fixed" || jt(e, t);
+  return e === t || !X(e) || U(e) ? !1 : Y(e).position === "fixed" || Zt(e, t);
 }
 function ci(c, t) {
   const e = t.get(c);
   if (e)
     return e;
-  let i = zt(c, []).filter((a) => X(a) && Z(a) !== "body"), s = null;
+  let i = zt(c, []).filter((a) => X(a) && q(a) !== "body"), s = null;
   const o = Y(c).position === "fixed";
   let r = o ? P(c) : c;
   for (; X(r) && !U(r); ) {
     const a = Y(r), h = pt(r);
-    !h && a.position === "fixed" && (s = null), (o ? !h && !s : !h && a.position === "static" && !!s && hi.has(s.position) || tt(r) && !h && jt(c, r)) ? i = i.filter((d) => d !== r) : s = a, r = P(r);
+    !h && a.position === "fixed" && (s = null), (o ? !h && !s : !h && a.position === "static" && !!s && hi.has(s.position) || et(r) && !h && Zt(c, r)) ? i = i.filter((d) => d !== r) : s = a, r = P(r);
   }
   return t.set(c, i), i;
 }
@@ -5969,7 +5993,7 @@ function di(c) {
     rootBoundary: i,
     strategy: s
   } = c;
-  const r = [...e === "clippingAncestors" ? nt(t) ? [] : ci(t, this._c) : [].concat(e), i], a = r[0], h = r.reduce((l, d) => {
+  const r = [...e === "clippingAncestors" ? at(t) ? [] : ci(t, this._c) : [].concat(e), i], a = r[0], h = r.reduce((l, d) => {
     const f = Mt(t, d, s);
     return l.top = $(f.top, l.top), l.right = j(f.right, l.right), l.bottom = j(f.bottom, l.bottom), l.left = $(f.left, l.left), l;
   }, Mt(t, a, s));
@@ -5991,7 +6015,7 @@ function fi(c) {
   };
 }
 function xi(c, t, e) {
-  const i = K(t), s = W(t), o = e === "fixed", r = q(c, !0, o, t);
+  const i = K(t), s = W(t), o = e === "fixed", r = J(c, !0, o, t);
   let a = {
     scrollLeft: 0,
     scrollTop: 0
@@ -6001,12 +6025,12 @@ function xi(c, t, e) {
     h.x = yt(s);
   }
   if (i || !i && !o)
-    if ((Z(t) !== "body" || tt(s)) && (a = at(t)), i) {
-      const x = q(t, !0, o, t);
+    if ((q(t) !== "body" || et(s)) && (a = ht(t)), i) {
+      const x = J(t, !0, o, t);
       h.x = x.x + t.clientLeft, h.y = x.y + t.clientTop;
     } else s && l();
   o && !i && s && l();
-  const d = s && !i && !o ? Zt(s, a) : B(0), f = r.left + a.scrollLeft - h.x - d.x, u = r.top + a.scrollTop - h.y - d.y;
+  const d = s && !i && !o ? qt(s, a) : B(0), f = r.left + a.scrollLeft - h.x - d.x, u = r.top + a.scrollTop - h.y - d.y;
   return {
     x: f,
     y: u,
@@ -6014,7 +6038,7 @@ function xi(c, t, e) {
     height: r.height
   };
 }
-function ht(c) {
+function lt(c) {
   return Y(c).position === "static";
 }
 function At(c, t) {
@@ -6025,26 +6049,26 @@ function At(c, t) {
   let e = c.offsetParent;
   return W(c) === e && (e = e.ownerDocument.body), e;
 }
-function qt(c, t) {
+function jt(c, t) {
   const e = H(c);
-  if (nt(c))
+  if (at(c))
     return e;
   if (!K(c)) {
     let s = P(c);
     for (; s && !U(s); ) {
-      if (X(s) && !ht(s))
+      if (X(s) && !lt(s))
         return s;
       s = P(s);
     }
     return e;
   }
   let i = At(c, t);
-  for (; i && Ze(i) && ht(i); )
+  for (; i && qe(i) && lt(i); )
     i = At(i, t);
-  return i && U(i) && ht(i) && !pt(i) ? e : i || ti(c) || e;
+  return i && U(i) && lt(i) && !pt(i) ? e : i || ti(c) || e;
 }
 const ui = async function(c) {
-  const t = this.getOffsetParent || qt, e = this.getDimensions, i = await e(c.floating);
+  const t = this.getOffsetParent || jt, e = this.getDimensions, i = await e(c.floating);
   return {
     reference: xi(c.reference, await t(c.floating), c.strategy),
     floating: {
@@ -6062,7 +6086,7 @@ const wi = {
   convertOffsetParentRelativeRectToViewportRelativeRect: oi,
   getDocumentElement: W,
   getClippingRect: di,
-  getOffsetParent: qt,
+  getOffsetParent: jt,
   getElementRects: ui,
   getClientRects: ri,
   getDimensions: fi,
@@ -6425,7 +6449,7 @@ class Ci {
     n(this, "ctx");
     n(this, "observer");
     this.ctx = t, this.observer = new MutationObserver(
-      xt(() => {
+      Z(() => {
         const e = this.ctx.overlayerElement.querySelectorAll('[data-auto-height="true"]'), i = /* @__PURE__ */ new Map();
         e.forEach((r) => {
           const a = Number(r.getAttribute("data-row-index")), h = Number(r.getAttribute("data-col-index"));
@@ -6748,11 +6772,23 @@ class vi {
       o,
       r
     );
-    this.ctx = new Re(a, this.options), this.header = new ve(this.ctx), this.footer = new _e(this.ctx), this.body = new Se(this.ctx), this.scroller = new Ie(this.ctx), this.selector = new Te(this.ctx), this.autofill = new Oe(this.ctx), this.tooltip = new pi(this.ctx), this.empty = new yi(this.ctx), this.editor = new Ei(this.ctx), this.overlayer = new Ci(this.ctx), this.contextMenu = new bi(this.ctx), this.ctx.on("draw", () => {
-      this.draw();
-    }), this.ctx.on("drawView", () => {
-      this.draw(!0);
-    }), this.draw();
+    this.ctx = new Re(a, this.options), this.header = new ve(this.ctx), this.footer = new _e(this.ctx), this.body = new Se(this.ctx), this.scroller = new Ie(this.ctx), this.selector = new Te(this.ctx), this.autofill = new Oe(this.ctx), this.tooltip = new pi(this.ctx), this.empty = new yi(this.ctx), this.editor = new Ei(this.ctx), this.overlayer = new Ci(this.ctx), this.contextMenu = new bi(this.ctx), this.ctx.on(
+      "draw",
+      Z(
+        () => {
+          this.draw();
+        },
+        () => this.ctx.drawTime
+      )
+    ), this.ctx.on(
+      "drawView",
+      Z(
+        () => {
+          this.draw(!0);
+        },
+        () => this.ctx.drawTime
+      )
+    ), this.draw();
   }
   createContainer(t, e, i, s, o) {
     t.className = "e-virt-table-container";
@@ -6773,7 +6809,12 @@ class vi {
   }
   draw(t = !1) {
     requestAnimationFrame(() => {
-      this.header.update(), this.footer.update(), this.body.update(), this.ctx.paint.clear(), this.body.draw(), this.footer.draw(), this.header.draw(), this.scroller.draw(), t || this.overlayer.draw(), this.body.updateAutoHeight();
+      const e = performance.now();
+      this.header.update(), this.footer.update(), this.body.update(), this.ctx.paint.clear(), this.body.draw(), this.footer.draw(), this.header.draw(), this.scroller.draw(), t || this.overlayer.draw(), requestAnimationFrame(() => {
+        this.body.updateAutoHeight();
+      });
+      const i = performance.now(), s = Math.round(i - e);
+      this.ctx.drawTime = s * this.ctx.config.DRAW_TIME_MULTIPLIER;
     });
   }
   loadConfig(t) {