@visactor/vtable 1.6.0-alpha.4 → 1.6.0

package/cjs/core/BaseTable.js

@@ -33,21 +33,19 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.BaseTable = void 0;
 
-const columnStyleContents = __importStar(require("../body-helper/style")), headerStyleContents = __importStar(require("../header-helper/style")), style_1 = require("./style"), style = __importStar(require("../tools/style")), ts_types_1 = require("../ts-types"), helper_1 = require("../tools/helper"), TABLE_EVENT_TYPE_1 = require("./TABLE_EVENT_TYPE"), EventHandler_1 = require("../event/EventHandler"), EventTarget_1 = require("../event/EventTarget"), NumberMap_1 = require("../tools/NumberMap"), Rect_1 = require("../tools/Rect"), util_1 = require("../tools/util"), themes_1 = __importDefault(require("../themes")), env_1 = require("../tools/env"), scenegraph_1 = require("../scenegraph/scenegraph"), state_1 = require("../state/state"), event_1 = require("../event/event"), body_helper_1 = require("../body-helper/body-helper"), header_helper_1 = require("../header-helper/header-helper"), vutils_1 = require("@visactor/vutils"), text_measure_1 = require("../scenegraph/utils/text-measure"), get_prop_1 = require("../scenegraph/utils/get-prop"), icons_1 = require("../plugins/icons"), tableHelper_1 = require("./tableHelper"), FouseInput_1 = require("./FouseInput"), pixel_ratio_1 = require("../tools/pixel-ratio"), chart_render_helper_1 = require("../scenegraph/graphic/contributions/chart-render-helper"), get_axis_config_1 = require("../layout/chart-helper/get-axis-config"), row_height_map_1 = require("../layout/row-height-map"), row_series_number_helper_1 = require("./row-series-number-helper"), custom_cell_style_1 = require("../plugins/custom-cell-style"), update_select_border_1 = require("../scenegraph/select/update-select-border"), react_custom_layout_1 = require("../components/react/react-custom-layout"), layout_helper_1 = require("../layout/layout-helper"), factory_1 = require("./factory"), get_cell_position_1 = require("./utils/get-cell-position"), {toBoxArray: toBoxArray} = helper_1.style, {isTouchEvent: isTouchEvent} = helper_1.event, rangeReg = /^\$(\d+)\$(\d+)$/;
+const columnStyleContents = __importStar(require("../body-helper/style")), style_1 = require("./style"), style = __importStar(require("../tools/style")), ts_types_1 = require("../ts-types"), helper_1 = require("../tools/helper"), TABLE_EVENT_TYPE_1 = require("./TABLE_EVENT_TYPE"), EventHandler_1 = require("../event/EventHandler"), EventTarget_1 = require("../event/EventTarget"), NumberMap_1 = require("../tools/NumberMap"), Rect_1 = require("../tools/Rect"), util_1 = require("../tools/util"), themes_1 = __importDefault(require("../themes")), env_1 = require("../tools/env"), scenegraph_1 = require("../scenegraph/scenegraph"), state_1 = require("../state/state"), event_1 = require("../event/event"), body_helper_1 = require("../body-helper/body-helper"), header_helper_1 = require("../header-helper/header-helper"), vutils_1 = require("@visactor/vutils"), text_measure_1 = require("../scenegraph/utils/text-measure"), get_prop_1 = require("../scenegraph/utils/get-prop"), icons_1 = require("../plugins/icons"), tableHelper_1 = require("./tableHelper"), FouseInput_1 = require("./FouseInput"), pixel_ratio_1 = require("../tools/pixel-ratio"), chart_render_helper_1 = require("../scenegraph/graphic/contributions/chart-render-helper"), row_height_map_1 = require("../layout/row-height-map"), row_series_number_helper_1 = require("./row-series-number-helper"), custom_cell_style_1 = require("../plugins/custom-cell-style"), update_select_border_1 = require("../scenegraph/select/update-select-border"), react_custom_layout_1 = require("../components/react/react-custom-layout"), layout_helper_1 = require("../layout/layout-helper"), factory_1 = require("./factory"), get_cell_position_1 = require("./utils/get-cell-position"), style_helper_1 = require("./style-helper"), {toBoxArray: toBoxArray} = helper_1.style, {isTouchEvent: isTouchEvent} = helper_1.event, rangeReg = /^\$(\d+)\$(\d+)$/;
 
 (0, style_1.importStyle)();
 
-const EMPTY_STYLE = {};
-
 class BaseTable extends EventTarget_1.EventTarget {
     static get EVENT_TYPE() {
         return TABLE_EVENT_TYPE_1.TABLE_EVENT_TYPE;
     }
     constructor(container, options = {}) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        if (super(), this.showFrozenIcon = !0, this.version = "1.6.0-alpha.4", this.id = `VTable${Date.now()}`, 
+        if (super(), this.showFrozenIcon = !0, this.version = "1.6.0", this.id = `VTable${Date.now()}`, 
         this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = (0, util_1.throttle2)(this.render.bind(this), 200), 
-        !container && "node" !== options.mode) throw new Error("vtable's container is undefined");
+        !container && "node" !== options.mode && !options.canvas) throw new Error("vtable's container is undefined");
         const {frozenColCount: frozenColCount = 0, frozenRowCount: frozenRowCount, defaultRowHeight: defaultRowHeight = 40, defaultHeaderRowHeight: defaultHeaderRowHeight, defaultColWidth: defaultColWidth = 80, defaultHeaderColWidth: defaultHeaderColWidth, widthMode: widthMode = "standard", heightMode: heightMode = "standard", autoFillWidth: autoFillWidth = !1, autoFillHeight: autoFillHeight = !1, widthAdaptiveMode: widthAdaptiveMode = "only-body", heightAdaptiveMode: heightAdaptiveMode = "only-body", keyboardOptions: keyboardOptions, eventOptions: eventOptions, rowSeriesNumber: rowSeriesNumber, columnResizeMode: columnResizeMode, rowResizeMode: rowResizeMode = "none", dragHeaderMode: dragHeaderMode, showFrozenIcon: showFrozenIcon, allowFrozenColCount: allowFrozenColCount, padding: padding, hover: hover, menu: menu, select: click, customRender: customRender, pixelRatio: pixelRatio = pixel_ratio_1.defaultPixelRatio, renderChartAsync: renderChartAsync, renderChartAsyncBatchCount: renderChartAsyncBatchCount, mode: mode, modeParams: modeParams, canvasWidth: canvasWidth, canvasHeight: canvasHeight, overscrollBehavior: overscrollBehavior, limitMinWidth: limitMinWidth, limitMinHeight: limitMinHeight, clearDOM: clearDOM = !0} = options;
         this.container = container, this.options = options, this._widthMode = widthMode, 
         this._heightMode = heightMode, this._widthAdaptiveMode = widthAdaptiveMode, this._heightAdaptiveMode = heightAdaptiveMode, 
@@ -60,14 +58,15 @@ class BaseTable extends EventTarget_1.EventTarget {
         }, padding && ("number" == typeof padding ? (this.padding.top = padding, this.padding.left = padding, 
         this.padding.bottom = padding, this.padding.right = padding) : (padding.top && (this.padding.top = padding.top), 
         padding.bottom && (this.padding.bottom = padding.bottom), padding.left && (this.padding.left = padding.left), 
-        padding.right && (this.padding.right = padding.right))), (0, vutils_1.isValid)(canvasHeight) && (0, 
-        vutils_1.isValid)(canvasWidth) && (this.canvasSizeSeted = !0), this.tableNoFrameWidth = 0, 
+        padding.right && (this.padding.right = padding.right))), this.tableNoFrameWidth = 0, 
         this.tableNoFrameHeight = 0, this.canvasWidth = canvasWidth, this.canvasHeight = canvasHeight, 
         this.columnWidthComputeMode = null !== (_a = options.columnWidthComputeMode) && void 0 !== _a ? _a : "normal";
         const internalProps = this.internalProps = {};
         if (void 0 !== showFrozenIcon && (this.showFrozenIcon = showFrozenIcon), "number" == typeof allowFrozenColCount && allowFrozenColCount <= 0 && (this.showFrozenIcon = !1), 
-        "node" !== env_1.Env.mode && (internalProps.element = (0, tableHelper_1.createRootElement)(this.padding), 
-        internalProps.focusControl = new FouseInput_1.FocusInput(this, internalProps.element), 
+        this.options.canvas ? (internalProps.element = this.options.canvas.parentElement, 
+        internalProps.element.style.position = "relative", internalProps.focusControl = new FouseInput_1.FocusInput(this, internalProps.element), 
+        internalProps.canvas = this.options.canvas, internalProps.context = internalProps.canvas.getContext("2d")) : "node" !== env_1.Env.mode && (internalProps.element = (0, 
+        tableHelper_1.createRootElement)(this.padding), internalProps.focusControl = new FouseInput_1.FocusInput(this, internalProps.element), 
         internalProps.canvas = document.createElement("canvas"), internalProps.element.appendChild(internalProps.canvas), 
         internalProps.context = internalProps.canvas.getContext("2d"), (null === (_b = options.customConfig) || void 0 === _b ? void 0 : _b.createReactContainer) && (internalProps.bodyDomContainer = document.createElement("div"), 
         internalProps.bodyDomContainer.classList.add("table-component-container"), internalProps.element.appendChild(internalProps.bodyDomContainer), 
@@ -125,7 +124,7 @@ class BaseTable extends EventTarget_1.EventTarget {
             confine: !0
         }, options.tooltip), "html" === internalProps.tooltip.renderMode) {
             const TooltipHandler = factory_1.Factory.getComponent("tooltipHandler");
-            internalProps.tooltipHandler = new TooltipHandler(this, internalProps.tooltip.confine);
+            TooltipHandler && (internalProps.tooltipHandler = new TooltipHandler(this, internalProps.tooltip.confine));
         }
         if (internalProps.menu = Object.assign({
             renderMode: "html"
@@ -135,8 +134,8 @@ class BaseTable extends EventTarget_1.EventTarget {
             const MenuHandler = factory_1.Factory.getComponent("menuHandler");
             internalProps.menuHandler = new MenuHandler(this);
         }
-        this.headerStyleCache = new Map, this.bodyStyleCache = new Map, this.bodyBottomStyleCache = new Map, 
-        internalProps.stick = {
+        this.headerStyleCache = new Map, this.bodyStyleCache = new Map, this.bodyMergeTitleCache = new Map, 
+        this.bodyBottomStyleCache = new Map, internalProps.stick = {
             changedCells: new Map
         }, internalProps.customMergeCell = options.customMergeCell, this.customCellStylePlugin = new custom_cell_style_1.CustomCellStylePlugin(this, null !== (_k = options.customCellStyle) && void 0 !== _k ? _k : [], null !== (_l = options.customCellStyleArrangement) && void 0 !== _l ? _l : []);
     }
@@ -149,9 +148,6 @@ class BaseTable extends EventTarget_1.EventTarget {
     get canvas() {
         return this.internalProps.canvas;
     }
-    setCanvasSize(canvasWidth, canvasHeight) {
-        this.canvasWidth = canvasWidth, this.canvasHeight = canvasHeight, this.resize();
-    }
     resize() {
         var _a;
         this._updateSize(), null === (_a = this.internalProps.legends) || void 0 === _a || _a.forEach((legend => {
@@ -352,13 +348,14 @@ class BaseTable extends EventTarget_1.EventTarget {
         }
     }
     _updateSize() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
         const {padding: padding} = this;
         let widthP = 0, heightP = 0;
-        if ("browser" === env_1.Env.mode) {
+        if (this.tableX = 0, this.tableY = 0, this.options.canvas && this.options.viewBox) widthP = this.options.viewBox.x2 - this.options.viewBox.x1, 
+        heightP = this.options.viewBox.y2 - this.options.viewBox.y1, (null === (_a = null == this ? void 0 : this.scenegraph) || void 0 === _a ? void 0 : _a.stage) && (this.options.viewBox ? this.scenegraph.stage.setViewBox(this.options.viewBox, !1) : this.scenegraph.stage.resize(widthP, heightP)); else if ("browser" === env_1.Env.mode) {
             const element = this.getElement();
             let widthWithoutPadding = 0, heightWithoutPadding = 0;
-            if (this.canvasSizeSeted) widthWithoutPadding = this.canvasWidth, heightWithoutPadding = this.canvasHeight; else if (element.parentElement) {
+            if (element.parentElement) {
                 const computedStyle = element.parentElement.style || window.getComputedStyle(element.parentElement);
                 widthWithoutPadding = element.parentElement.offsetWidth - parseInt(computedStyle.paddingLeft || "0px", 10) - parseInt(computedStyle.paddingRight || "0px", 10), 
                 heightWithoutPadding = element.parentElement.offsetHeight - parseInt(computedStyle.paddingTop || "0px", 10) - parseInt(computedStyle.paddingBottom || "0px", 20);
@@ -367,25 +364,33 @@ class BaseTable extends EventTarget_1.EventTarget {
             element.style.width = width1 && width1 - padding.left - padding.right + "px" || "0px", 
             element.style.height = height1 && height1 - padding.top - padding.bottom + "px" || "0px";
             const {canvas: canvas} = this.internalProps;
-            widthP = null !== (_b = null === (_a = canvas.parentElement) || void 0 === _a ? void 0 : _a.offsetWidth) && void 0 !== _b ? _b : 0, 
-            heightP = null !== (_d = null === (_c = canvas.parentElement) || void 0 === _c ? void 0 : _c.offsetHeight) && void 0 !== _d ? _d : 0, 
-            (null === (_e = null == this ? void 0 : this.scenegraph) || void 0 === _e ? void 0 : _e.stage) ? this.scenegraph.stage.resize(widthP, heightP) : (canvas.style.width = "", 
+            widthP = null !== (_c = null === (_b = canvas.parentElement) || void 0 === _b ? void 0 : _b.offsetWidth) && void 0 !== _c ? _c : 0, 
+            heightP = null !== (_e = null === (_d = canvas.parentElement) || void 0 === _d ? void 0 : _d.offsetHeight) && void 0 !== _e ? _e : 0, 
+            (null === (_f = null == this ? void 0 : this.scenegraph) || void 0 === _f ? void 0 : _f.stage) ? this.scenegraph.stage.resize(widthP, heightP) : (canvas.style.width = "", 
             canvas.style.height = "", canvas.width = widthP, canvas.height = heightP, canvas.style.width = `${widthP}px`, 
             canvas.style.height = `${heightP}px`), this.internalProps.bodyDomContainer && (this.internalProps.bodyDomContainer.style.width = `${widthP}px`, 
             this.internalProps.bodyDomContainer.style.height = `${heightP}px`), this.internalProps.headerDomContainer && (this.internalProps.headerDomContainer.style.width = `${widthP}px`, 
             this.internalProps.headerDomContainer.style.height = `${heightP}px`);
         } else "node" === env_1.Env.mode && (widthP = this.canvasWidth - 1, heightP = this.canvasHeight - 1);
-        const width = Math.floor(widthP - style.getVerticalScrollBarSize(this.getTheme().scrollStyle)), height = Math.floor(heightP - style.getHorizontalScrollBarSize(this.getTheme().scrollStyle));
-        if (null === (_f = this.internalProps.theme) || void 0 === _f ? void 0 : _f.frameStyle) {
-            const lineWidths = toBoxArray(null !== (_h = null === (_g = this.internalProps.theme.frameStyle) || void 0 === _g ? void 0 : _g.borderLineWidth) && void 0 !== _h ? _h : [ null ]), shadowWidths = toBoxArray(null !== (_k = null === (_j = this.internalProps.theme.frameStyle) || void 0 === _j ? void 0 : _j.shadowBlur) && void 0 !== _k ? _k : [ 0 ]);
-            (null === (_l = this.theme.frameStyle) || void 0 === _l ? void 0 : _l.innerBorder) ? (this.tableX = 0, 
-            this.tableY = 0, this.tableNoFrameWidth = width - (null !== (_m = shadowWidths[1]) && void 0 !== _m ? _m : 0), 
-            this.tableNoFrameHeight = height - (null !== (_o = shadowWidths[2]) && void 0 !== _o ? _o : 0)) : (this.tableX = (null !== (_p = lineWidths[3]) && void 0 !== _p ? _p : 0) + (null !== (_q = shadowWidths[3]) && void 0 !== _q ? _q : 0), 
-            this.tableY = (null !== (_r = lineWidths[0]) && void 0 !== _r ? _r : 0) + (null !== (_s = shadowWidths[0]) && void 0 !== _s ? _s : 0), 
-            this.tableNoFrameWidth = width - ((null !== (_t = lineWidths[1]) && void 0 !== _t ? _t : 0) + (null !== (_u = shadowWidths[1]) && void 0 !== _u ? _u : 0)) - ((null !== (_v = lineWidths[3]) && void 0 !== _v ? _v : 0) + (null !== (_w = shadowWidths[3]) && void 0 !== _w ? _w : 0)), 
-            this.tableNoFrameHeight = height - ((null !== (_x = lineWidths[0]) && void 0 !== _x ? _x : 0) + (null !== (_y = shadowWidths[0]) && void 0 !== _y ? _y : 0)) - ((null !== (_z = lineWidths[2]) && void 0 !== _z ? _z : 0) + (null !== (_0 = shadowWidths[2]) && void 0 !== _0 ? _0 : 0)));
+        const width = Math.floor(widthP - style.getScrollBarSize(this.getTheme().scrollStyle)), height = Math.floor(heightP - style.getScrollBarSize(this.getTheme().scrollStyle));
+        if (null === (_g = this.internalProps.theme) || void 0 === _g ? void 0 : _g.frameStyle) {
+            const lineWidths = toBoxArray(null !== (_j = null === (_h = this.internalProps.theme.frameStyle) || void 0 === _h ? void 0 : _h.borderLineWidth) && void 0 !== _j ? _j : [ null ]), shadowWidths = toBoxArray(null !== (_l = null === (_k = this.internalProps.theme.frameStyle) || void 0 === _k ? void 0 : _k.shadowBlur) && void 0 !== _l ? _l : [ 0 ]);
+            (null === (_m = this.theme.frameStyle) || void 0 === _m ? void 0 : _m.innerBorder) ? (this.tableX = 0, 
+            this.tableY = 0, this.tableNoFrameWidth = width - (null !== (_o = shadowWidths[1]) && void 0 !== _o ? _o : 0), 
+            this.tableNoFrameHeight = height - (null !== (_p = shadowWidths[2]) && void 0 !== _p ? _p : 0)) : (this.tableX = (null !== (_q = lineWidths[3]) && void 0 !== _q ? _q : 0) + (null !== (_r = shadowWidths[3]) && void 0 !== _r ? _r : 0), 
+            this.tableY = (null !== (_s = lineWidths[0]) && void 0 !== _s ? _s : 0) + (null !== (_t = shadowWidths[0]) && void 0 !== _t ? _t : 0), 
+            this.tableNoFrameWidth = width - ((null !== (_u = lineWidths[1]) && void 0 !== _u ? _u : 0) + (null !== (_v = shadowWidths[1]) && void 0 !== _v ? _v : 0)) - ((null !== (_w = lineWidths[3]) && void 0 !== _w ? _w : 0) + (null !== (_x = shadowWidths[3]) && void 0 !== _x ? _x : 0)), 
+            this.tableNoFrameHeight = height - ((null !== (_y = lineWidths[0]) && void 0 !== _y ? _y : 0) + (null !== (_z = shadowWidths[0]) && void 0 !== _z ? _z : 0)) - ((null !== (_0 = lineWidths[2]) && void 0 !== _0 ? _0 : 0) + (null !== (_1 = shadowWidths[2]) && void 0 !== _1 ? _1 : 0)));
         }
     }
+    updateViewBox(newViewBox) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const oldWidth = null !== (_d = null !== (_b = null === (_a = this.options) || void 0 === _a ? void 0 : _a.viewBox.x2) && void 0 !== _b ? _b : 0 - (null === (_c = this.options) || void 0 === _c ? void 0 : _c.viewBox.x1)) && void 0 !== _d ? _d : 0, oldHeight = null !== (_h = null !== (_f = null === (_e = this.options) || void 0 === _e ? void 0 : _e.viewBox.y2) && void 0 !== _f ? _f : 0 - (null === (_g = this.options) || void 0 === _g ? void 0 : _g.viewBox.y1)) && void 0 !== _h ? _h : 0, newWidth = newViewBox.x2 - newViewBox.x1, newHeight = newViewBox.y2 - newViewBox.y1;
+        this.options.viewBox = newViewBox, oldWidth !== newWidth || oldHeight !== newHeight ? this.resize() : this.scenegraph.stage.setViewBox(this.options.viewBox, !0);
+    }
+    setViewBoxTransform(a, b, c, d, e, f) {
+        this.internalProps.modifiedViewBoxTransform = !0, this.scenegraph.stage.window.setViewBoxTransform(a, b, c, d, e, f);
+    }
     get rowHierarchyType() {
         return "grid";
     }
@@ -655,8 +660,11 @@ class BaseTable extends EventTarget_1.EventTarget {
         }));
     }
     _toRelativeRect(absoluteRect, relativeX = !0, relativeY = !0) {
+        var _a, _b, _c, _d;
         const rect = absoluteRect.copy(), visibleRect = this.getVisibleRect();
         return rect.offsetLeft(this.tableX - (relativeX ? visibleRect.left : 0)), rect.offsetTop(this.tableY - (relativeY ? visibleRect.top : 0)), 
+        rect.offsetLeft(null !== (_b = null === (_a = this.options.viewBox) || void 0 === _a ? void 0 : _a.x1) && void 0 !== _b ? _b : 0), 
+        rect.offsetTop(null !== (_d = null === (_c = this.options.viewBox) || void 0 === _c ? void 0 : _c.y1) && void 0 !== _d ? _d : 0), 
         rect;
     }
     getVisibleRect() {
@@ -761,9 +769,11 @@ class BaseTable extends EventTarget_1.EventTarget {
         internalProps.layoutMap.release(), internalProps.releaseList && (internalProps.releaseList.forEach((releaseObj => {
             var _a;
             return null === (_a = null == releaseObj ? void 0 : releaseObj.release) || void 0 === _a ? void 0 : _a.call(releaseObj);
-        })), internalProps.releaseList = null), this.scenegraph.stage.release(), this.scenegraph.proxy.release();
+        })), internalProps.releaseList = null), this.scenegraph.stage.release(), this.scenegraph.proxy.release(), 
+        internalProps.focusControl.release();
         const {parentElement: parentElement} = internalProps.element;
-        parentElement && parentElement.removeChild(internalProps.element), null === (_q = null === (_p = null === (_o = this.editorManager) || void 0 === _o ? void 0 : _o.editingEditor) || void 0 === _p ? void 0 : _p.onEnd) || void 0 === _q || _q.call(_p), 
+        parentElement && !this.options.canvas && parentElement.removeChild(internalProps.element), 
+        null === (_q = null === (_p = null === (_o = this.editorManager) || void 0 === _o ? void 0 : _o.editingEditor) || void 0 === _p ? void 0 : _p.onEnd) || void 0 === _q || _q.call(_p), 
         this.isReleased = !0, this.scenegraph = null, this.internalProps = null;
     }
     fireListeners(type, event) {
@@ -785,7 +795,7 @@ class BaseTable extends EventTarget_1.EventTarget {
         this.autoFillWidth = null != autoFillWidth && autoFillWidth, this.autoFillHeight = null != autoFillHeight && autoFillHeight, 
         this.customRender = customRender;
         const internalProps = this.internalProps;
-        if ("node" !== env_1.Env.mode && (0, tableHelper_1.updateRootElementPadding)(internalProps.element, this.padding), 
+        if ("node" === env_1.Env.mode || options.canvas || (0, tableHelper_1.updateRootElementPadding)(internalProps.element, this.padding), 
         this.columnWidthComputeMode = null !== (_a = options.columnWidthComputeMode) && void 0 !== _a ? _a : "normal", 
         internalProps.frozenColCount = frozenColCount, internalProps.defaultRowHeight = defaultRowHeight, 
         internalProps.defaultHeaderRowHeight = null != defaultHeaderRowHeight ? defaultHeaderRowHeight : defaultRowHeight, 
@@ -881,6 +891,7 @@ class BaseTable extends EventTarget_1.EventTarget {
         return new Rect_1.Rect(this.tableX, this.tableY, width, height);
     }
     _getMouseAbstractPoint(evt, isAddScroll = !0) {
+        var _a, _b, _c, _d;
         let e;
         if (!evt) return {
             inTable: !1,
@@ -891,12 +902,15 @@ class BaseTable extends EventTarget_1.EventTarget {
         const clientX = e.clientX || e.pageX + window.scrollX, clientY = e.clientY || e.pageY + window.scrollY, rect = this.internalProps.canvas.getBoundingClientRect();
         let inTable = !0;
         rect.right <= clientX && (inTable = !1), rect.bottom <= clientY && (inTable = !1);
-        const currentWidth = rect.width, widthRatio = currentWidth / (this.canvas.offsetWidth || currentWidth), currentHeight = rect.height, heightRatio = currentHeight / (this.canvas.offsetHeight || currentHeight);
-        return {
-            x: (clientX - rect.left) / widthRatio + (isAddScroll ? this.scrollLeft : 0),
-            y: (clientY - rect.top) / heightRatio + (isAddScroll ? this.scrollTop : 0),
+        const currentWidth = rect.width, widthRatio = currentWidth / (this.canvas.offsetWidth || currentWidth), currentHeight = rect.height, heightRatio = currentHeight / (this.canvas.offsetHeight || currentHeight), point = {
+            x: (clientX - rect.left) / widthRatio + (isAddScroll ? this.scrollLeft : 0) - (null !== (_b = null === (_a = this.options.viewBox) || void 0 === _a ? void 0 : _a.x1) && void 0 !== _b ? _b : 0),
+            y: (clientY - rect.top) / heightRatio + (isAddScroll ? this.scrollTop : 0) - (null !== (_d = null === (_c = this.options.viewBox) || void 0 === _c ? void 0 : _c.y1) && void 0 !== _d ? _d : 0),
             inTable: inTable
         };
+        if (this.internalProps.modifiedViewBoxTransform && this.scenegraph.stage.window.getViewBoxTransform()) {
+            this.scenegraph.stage.window.getViewBoxTransform().transformPoint(point, point);
+        }
+        return point;
     }
     getTheme() {
         return this.internalProps.theme;
@@ -995,7 +1009,8 @@ class BaseTable extends EventTarget_1.EventTarget {
         return null == body ? void 0 : body.define;
     }
     getBodyColumnType(col, row) {
-        const cellType = this.internalProps.layoutMap.getBody(col, row).cellType;
+        var _a, _b;
+        const cellType = null !== (_b = null === (_a = this.internalProps.layoutMap.getBody(col, row)) || void 0 === _a ? void 0 : _a.cellType) && void 0 !== _b ? _b : "text";
         return (0, get_prop_1.getProp)("cellType", {
             cellType: cellType
         }, col, row, this);
@@ -1181,81 +1196,11 @@ class BaseTable extends EventTarget_1.EventTarget {
         return null === (_a = this.internalProps.dataSource) || void 0 === _a ? void 0 : _a.hasField(index, field);
     }
     _getCellStyle(col, row) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        const customCellStyle = this.customCellStylePlugin.getCustomCellStyle(col, row), {layoutMap: layoutMap} = this.internalProps;
-        if (layoutMap.isHeader(col, row)) {
-            let cacheKey;
-            if (!this.isPivotTable() || this.isBottomFrozenRow(row) || this.isRightFrozenColumn(col)) cacheKey = `${col}-${row}`; else {
-                const define = this.getHeaderDefine(col, row), isCorner = this.isCornerHeader(col, row);
-                cacheKey = (null == define ? void 0 : define.dimensionKey) ? isCorner ? `dim-cor-${define.dimensionKey}` : `dim-${define.dimensionKey}` : (null == define ? void 0 : define.indicatorKey) ? `ind-${define.indicatorKey}` : `${col}-${row}`;
-            }
-            let cacheStyle = this.headerStyleCache.get(cacheKey);
-            if (cacheStyle) return customCellStyle ? (0, custom_cell_style_1.mergeStyle)(cacheStyle, customCellStyle) : cacheStyle;
-            const hd = layoutMap.getHeader(col, row);
-            let paddingForAxis;
-            if (this.isPivotChart() && (0, get_axis_config_1.isTopOrBottomAxis)(col, row, layoutMap) && layoutMap.isAxisCell(col, row)) {
-                paddingForAxis = null !== (_b = null === (_a = layoutMap.getBody(col, this.rowHeaderLevelCount).style) || void 0 === _a ? void 0 : _a.padding) && void 0 !== _b ? _b : this.theme.bodyStyle.padding;
-            } else if (this.isPivotChart() && (0, get_axis_config_1.isLeftOrRightAxis)(col, row, layoutMap) && layoutMap.isAxisCell(col, row)) {
-                paddingForAxis = null !== (_d = null === (_c = layoutMap.getBody(this.columnHeaderLevelCount, row).style) || void 0 === _c ? void 0 : _c.padding) && void 0 !== _d ? _d : this.theme.bodyStyle.padding;
-            }
-            if ((!hd || hd.isEmpty) && (layoutMap.isLeftBottomCorner(col, row) || layoutMap.isRightBottomCorner(col, row) || layoutMap.isCornerHeader(col, row) || layoutMap.isRightTopCorner(col, row))) return EMPTY_STYLE;
-            const styleClass = this.internalProps.headerHelper.getStyleClass((null == hd ? void 0 : hd.headerType) || "text");
-            if (layoutMap.isBottomFrozenRow(col, row) && this.theme.bottomFrozenStyle) cacheStyle = headerStyleContents.of(paddingForAxis ? {
-                padding: paddingForAxis
-            } : {}, this.theme.bottomFrozenStyle, {
-                col: col,
-                row: row,
-                table: this,
-                value: this.getCellValue(col, row),
-                dataValue: this.getCellOriginValue(col, row),
-                cellHeaderPaths: this.getCellHeaderPaths(col, row)
-            }, styleClass, this.options.autoWrapText, this.theme); else if (layoutMap.isRightFrozenColumn(col, row) && this.theme.rightFrozenStyle) cacheStyle = headerStyleContents.of(paddingForAxis ? {
-                padding: paddingForAxis
-            } : {}, this.theme.rightFrozenStyle, {
-                col: col,
-                row: row,
-                table: this,
-                value: this.getCellValue(col, row),
-                dataValue: this.getCellOriginValue(col, row),
-                cellHeaderPaths: this.getCellHeaderPaths(col, row)
-            }, styleClass, this.options.autoWrapText, this.theme); else {
-                const style = (null == hd ? void 0 : hd.style) || {};
-                paddingForAxis && (style.padding = paddingForAxis), cacheStyle = headerStyleContents.of(style, layoutMap.isColumnHeader(col, row) || layoutMap.isBottomFrozenRow(col, row) ? this.theme.headerStyle : layoutMap.isRowHeader(col, row) || layoutMap.isRightFrozenColumn(col, row) ? this.theme.rowHeaderStyle : this.theme.cornerHeaderStyle, {
-                    col: col,
-                    row: row,
-                    table: this,
-                    value: this.getCellValue(col, row),
-                    dataValue: this.getCellOriginValue(col, row),
-                    cellHeaderPaths: this.getCellHeaderPaths(col, row)
-                }, styleClass, this.options.autoWrapText, this.theme);
-            }
-            return this.headerStyleCache.set(cacheKey, cacheStyle), customCellStyle ? (0, custom_cell_style_1.mergeStyle)(cacheStyle, customCellStyle) : cacheStyle;
-        }
-        let bgColorFunc, cacheKey;
-        (null === (_f = null === (_e = this.internalProps) || void 0 === _e ? void 0 : _e.dataConfig) || void 0 === _f ? void 0 : _f.mappingRules) && !this.isHeader(col, row) && (null === (_j = null === (_h = null === (_g = this.internalProps) || void 0 === _g ? void 0 : _g.dataConfig) || void 0 === _h ? void 0 : _h.mappingRules) || void 0 === _j || _j.forEach(((mappingRule, i) => {
-            mappingRule.bgColor && this.internalProps.layoutMap.getIndicatorKey(col, row) === mappingRule.bgColor.indicatorKey && (bgColorFunc = mappingRule.bgColor.mapping);
-        })));
-        const cellType = this.getCellType(col, row);
-        let cacheStyle;
-        if (cacheKey = this.isSeriesNumberInBody(col, row) ? `${col}-series-` + cellType : this.isListTable() && !this.transpose || this.isPivotTable() && this.internalProps.layoutMap.indicatorsAsCol ? col + cellType : row + cellType, 
-        cacheStyle = layoutMap.isBottomFrozenRow(row) ? this.bodyBottomStyleCache.get(cacheKey) : this.bodyStyleCache.get(cacheKey), 
-        cacheStyle) return customCellStyle ? (0, custom_cell_style_1.mergeStyle)(cacheStyle, customCellStyle) : cacheStyle;
-        const column = layoutMap.getBody(col, row), styleClass = this.internalProps.bodyHelper.getStyleClass(this.getCellType(col, row)), style = null == column ? void 0 : column.style;
-        return cacheStyle = columnStyleContents.of(style, layoutMap.isBottomFrozenRow(row) && this.theme.bottomFrozenStyle ? this.theme.bottomFrozenStyle : layoutMap.isRightFrozenColumn(col) && this.theme.rightFrozenStyle ? this.theme.rightFrozenStyle : this.theme.bodyStyle, {
-            col: col,
-            row: row,
-            table: this,
-            value: this.getCellValue(col, row),
-            dataValue: this.getCellOriginValue(col, row),
-            cellHeaderPaths: this.getCellHeaderPaths(col, row)
-        }, styleClass, this.options.autoWrapText, this.theme), bgColorFunc && (cacheStyle = (0, 
-        custom_cell_style_1.mergeStyle)(cacheStyle, {
-            bgColor: bgColorFunc
-        })), (0, vutils_1.isFunction)(style) || (layoutMap.isBottomFrozenRow(row) ? this.bodyBottomStyleCache.set(cacheKey, cacheStyle) : this.bodyStyleCache.set(cacheKey, cacheStyle)), 
-        customCellStyle ? (0, custom_cell_style_1.mergeStyle)(cacheStyle, customCellStyle) : cacheStyle;
+        return (0, style_helper_1.getCellStyle)(col, row, this);
     }
     clearCellStyleCache() {
-        this.headerStyleCache.clear(), this.bodyStyleCache.clear(), this.bodyBottomStyleCache.clear();
+        this.headerStyleCache.clear(), this.bodyStyleCache.clear(), this.bodyMergeTitleCache.clear(), 
+        this.bodyBottomStyleCache.clear();
     }
     clearRowHeightCache() {
         this.internalProps._rowHeightsMap.clear(), this._clearRowRangeHeightsMap();
@@ -1762,6 +1707,7 @@ class BaseTable extends EventTarget_1.EventTarget {
     enableScroll() {
         this.eventManager.enableScroll();
     }
+    getGroupTitleLevel(col, row) {}
 }
 
 exports.BaseTable = BaseTable;