@visactor/vtable 0.23.1-alpha.0 → 0.23.1-alpha.2

package/cjs/components/legend/discrete-legend/discrete-legend.js

@@ -19,7 +19,8 @@ class DiscreteTableLegend {
             width: this.table.tableNoFrameWidth,
             height: this.table.tableNoFrameHeight
         }), legend = new vrender_components_1.DiscreteLegend((0, vutils_1.merge)({}, attrs, {
-            defaultSelected: this.selectedData
+            defaultSelected: this.selectedData,
+            disableTriggerEvent: this.table.options.disableInteraction
         }));
         legend.name = "legend", this.legendComponent = legend, this.table.scenegraph.stage.defaultLayer.appendChild(legend), 
         this.adjustTableSize(attrs);

package/cjs/components/legend/discrete-legend/discrete-legend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/legend/discrete-legend/discrete-legend.ts"],"names":[],"mappings":"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","file":"discrete-legend.js","sourcesContent":["import { cloneDeep, get, merge } from '@visactor/vutils';\nimport type { IDiscreteTableLegendOption } from '../../../ts-types/component/legend';\nimport type { BaseTableAPI } from '../../../ts-types/base-table';\nimport { DiscreteLegend, LegendEvent } from '@visactor/vrender-components';\nimport { getLegendAttributes } from './get-discrete-legend-attributes';\nimport { TABLE_EVENT_TYPE } from '../../../core/TABLE_EVENT_TYPE';\nimport { getQuadProps } from '../../../scenegraph/utils/padding';\nimport type { IOrientType } from '../../../ts-types/component/util';\n\nexport class DiscreteTableLegend {\n  table: BaseTableAPI;\n  option: IDiscreteTableLegendOption;\n  orient: IOrientType;\n  visible: boolean;\n  position: 'start' | 'middle' | 'end';\n  selectedData: (string | number)[];\n  legendComponent: DiscreteLegend;\n\n  constructor(option: IDiscreteTableLegendOption, table: BaseTableAPI) {\n    this.table = table;\n    this.option = cloneDeep(option);\n    this.orient = option.orient ?? 'left';\n    this.visible = option.visible ?? true;\n    this.position = option.position ?? 'middle';\n    this.selectedData = option.defaultSelected ?? null;\n\n    this.createComponent();\n    this.initEvent();\n  }\n\n  createComponent() {\n    const attrs = this.getLegendAttributes({\n      width: this.table.tableNoFrameWidth,\n      height: this.table.tableNoFrameHeight\n    });\n    const legend = new DiscreteLegend(\n      merge({}, attrs, {\n        defaultSelected: this.selectedData\n      })\n    );\n    legend.name = 'legend';\n    this.legendComponent = legend;\n    this.table.scenegraph.stage.defaultLayer.appendChild(legend);\n\n    this.adjustTableSize(attrs);\n  }\n\n  resize() {\n    if (!this.legendComponent) {\n      return;\n    }\n\n    this.legendComponent.setAttributes({\n      width: this.table.tableNoFrameWidth,\n      height: this.table.tableNoFrameHeight\n    });\n\n    this.adjustTableSize(this.legendComponent.attribute);\n  }\n\n  adjustTableSize(attrs: any) {\n    // 调整位置\n    let width = isFinite(this.legendComponent.AABBBounds.width()) ? this.legendComponent.AABBBounds.width() : 0;\n    let height = isFinite(this.legendComponent.AABBBounds.height()) ? this.legendComponent.AABBBounds.height() : 0;\n    if (width <= 0 || height <= 0) {\n      return;\n    }\n    const rectWidth = this.table.tableNoFrameWidth;\n    const rectHeight = this.table.tableNoFrameHeight;\n    const padding = getQuadProps(attrs.padding ?? this.option.padding ?? 10);\n\n    let x = 0;\n    let y = 0;\n    if (this.orient === 'left') {\n      x = padding[3];\n      y = 0;\n      width += padding[1] + padding[3];\n    } else if (this.orient === 'top') {\n      x = 0;\n      y = padding[0];\n      height += padding[0] + padding[2];\n    } else if (this.orient === 'right') {\n      x = rectWidth - width - padding[1];\n      y = 0;\n      width += padding[1] + padding[3];\n    } else if (this.orient === 'bottom') {\n      x = 0;\n      y = rectHeight - height - padding[2];\n      height += padding[0] + padding[2];\n    }\n\n    const layout = this.orient === 'bottom' || this.orient === 'top' ? 'horizontal' : 'vertical';\n    const position = this.position;\n    // const { width: rectWidth, height: rectHeight } = fullSpace;\n    let offsetX = 0;\n    let offsetY = 0;\n    if (layout === 'horizontal') {\n      if (position === 'middle') {\n        offsetX = (rectWidth - width) / 2;\n      } else if (position === 'end') {\n        offsetX = rectWidth - width - padding[1];\n      } else {\n        offsetX = padding[3];\n      }\n    } else {\n      if (position === 'middle') {\n        offsetY = (rectHeight - height) / 2;\n      } else if (position === 'end') {\n        offsetY = rectHeight - height - padding[2];\n      } else {\n        offsetY = padding[0];\n      }\n    }\n\n    this.legendComponent.setAttributes({\n      dx: offsetX,\n      dy: offsetY,\n      x,\n      y\n    });\n\n    // update table size\n    if (this.orient === 'left') {\n      this.table.tableNoFrameWidth = this.table.tableNoFrameWidth - Math.ceil(width);\n      this.table.tableX += Math.ceil(width);\n    } else if (this.orient === 'top') {\n      this.table.tableNoFrameHeight = this.table.tableNoFrameHeight - Math.ceil(height);\n      this.table.tableY += Math.ceil(height);\n    } else if (this.orient === 'right') {\n      this.table.tableNoFrameWidth = this.table.tableNoFrameWidth - Math.ceil(width);\n    } else if (this.orient === 'bottom') {\n      this.table.tableNoFrameHeight = this.table.tableNoFrameHeight - Math.ceil(height);\n    }\n  }\n\n  getLegendAttributes(rect: any) {\n    const layout = this.orient === 'bottom' || this.orient === 'top' ? 'horizontal' : 'vertical';\n    const attrs = {\n      layout,\n      items: this.getLegendItems(),\n      // zIndex: this.layoutZIndex,\n      maxWidth: rect.width,\n      maxHeight: rect.height,\n      ...getLegendAttributes(this.option, rect)\n    };\n    return attrs;\n  }\n\n  getLegendItems() {\n    return this.option.data;\n  }\n\n  initEvent() {\n    if (this.legendComponent) {\n      this.legendComponent.addEventListener(LegendEvent.legendItemClick, (e: any) => {\n        const selectedData = get(e, 'detail.currentSelected');\n        this.table.fireListeners(TABLE_EVENT_TYPE.LEGEND_ITEM_CLICK, { model: this, value: selectedData, event: e });\n      });\n\n      this.legendComponent.addEventListener(LegendEvent.legendItemHover, (e: any) => {\n        const detail = get(e, 'detail');\n        this.table.fireListeners(TABLE_EVENT_TYPE.LEGEND_ITEM_HOVER, { model: this, value: detail, event: e });\n      });\n\n      this.legendComponent.addEventListener(LegendEvent.legendItemUnHover, (e: any) => {\n        const detail = get(e, 'detail');\n        this.table.fireListeners(TABLE_EVENT_TYPE.LEGEND_ITEM_UNHOVER, { model: this, value: detail, event: e });\n      });\n\n      // wait for vrender-vcomponent version update\n      this.legendComponent.addEventListener('legendItemAttributeUpdate', (e: any) => {\n        this.table.scenegraph.updateNextFrame();\n      });\n    }\n  }\n\n  getLegendBounds() {\n    const width = isFinite(this.legendComponent.AABBBounds.width()) ? this.legendComponent.AABBBounds.width() : 0;\n    const height = isFinite(this.legendComponent.AABBBounds.height()) ? this.legendComponent.AABBBounds.height() : 0;\n\n    return {\n      width: width,\n      height: height\n    };\n  }\n  release() {\n    this.legendComponent && this.table.scenegraph.stage.defaultLayer.removeChild(this.legendComponent);\n    this.legendComponent = null;\n  }\n}\n"]}
+{"version":3,"sources":["../src/components/legend/discrete-legend/discrete-legend.ts"],"names":[],"mappings":"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","file":"discrete-legend.js","sourcesContent":["import { cloneDeep, get, merge } from '@visactor/vutils';\nimport type { IDiscreteTableLegendOption } from '../../../ts-types/component/legend';\nimport type { BaseTableAPI } from '../../../ts-types/base-table';\nimport { DiscreteLegend, LegendEvent } from '@visactor/vrender-components';\nimport { getLegendAttributes } from './get-discrete-legend-attributes';\nimport { TABLE_EVENT_TYPE } from '../../../core/TABLE_EVENT_TYPE';\nimport { getQuadProps } from '../../../scenegraph/utils/padding';\nimport type { IOrientType } from '../../../ts-types/component/util';\n\nexport class DiscreteTableLegend {\n  table: BaseTableAPI;\n  option: IDiscreteTableLegendOption;\n  orient: IOrientType;\n  visible: boolean;\n  position: 'start' | 'middle' | 'end';\n  selectedData: (string | number)[];\n  legendComponent: DiscreteLegend;\n\n  constructor(option: IDiscreteTableLegendOption, table: BaseTableAPI) {\n    this.table = table;\n    this.option = cloneDeep(option);\n    this.orient = option.orient ?? 'left';\n    this.visible = option.visible ?? true;\n    this.position = option.position ?? 'middle';\n    this.selectedData = option.defaultSelected ?? null;\n\n    this.createComponent();\n    this.initEvent();\n  }\n\n  createComponent() {\n    const attrs = this.getLegendAttributes({\n      width: this.table.tableNoFrameWidth,\n      height: this.table.tableNoFrameHeight\n    });\n    const legend = new DiscreteLegend(\n      merge({}, attrs, {\n        defaultSelected: this.selectedData,\n        disableTriggerEvent: this.table.options.disableInteraction\n      })\n    );\n    legend.name = 'legend';\n    this.legendComponent = legend;\n    this.table.scenegraph.stage.defaultLayer.appendChild(legend);\n\n    this.adjustTableSize(attrs);\n  }\n\n  resize() {\n    if (!this.legendComponent) {\n      return;\n    }\n\n    this.legendComponent.setAttributes({\n      width: this.table.tableNoFrameWidth,\n      height: this.table.tableNoFrameHeight\n    });\n\n    this.adjustTableSize(this.legendComponent.attribute);\n  }\n\n  adjustTableSize(attrs: any) {\n    // 调整位置\n    let width = isFinite(this.legendComponent.AABBBounds.width()) ? this.legendComponent.AABBBounds.width() : 0;\n    let height = isFinite(this.legendComponent.AABBBounds.height()) ? this.legendComponent.AABBBounds.height() : 0;\n    if (width <= 0 || height <= 0) {\n      return;\n    }\n    const rectWidth = this.table.tableNoFrameWidth;\n    const rectHeight = this.table.tableNoFrameHeight;\n    const padding = getQuadProps(attrs.padding ?? this.option.padding ?? 10);\n\n    let x = 0;\n    let y = 0;\n    if (this.orient === 'left') {\n      x = padding[3];\n      y = 0;\n      width += padding[1] + padding[3];\n    } else if (this.orient === 'top') {\n      x = 0;\n      y = padding[0];\n      height += padding[0] + padding[2];\n    } else if (this.orient === 'right') {\n      x = rectWidth - width - padding[1];\n      y = 0;\n      width += padding[1] + padding[3];\n    } else if (this.orient === 'bottom') {\n      x = 0;\n      y = rectHeight - height - padding[2];\n      height += padding[0] + padding[2];\n    }\n\n    const layout = this.orient === 'bottom' || this.orient === 'top' ? 'horizontal' : 'vertical';\n    const position = this.position;\n    // const { width: rectWidth, height: rectHeight } = fullSpace;\n    let offsetX = 0;\n    let offsetY = 0;\n    if (layout === 'horizontal') {\n      if (position === 'middle') {\n        offsetX = (rectWidth - width) / 2;\n      } else if (position === 'end') {\n        offsetX = rectWidth - width - padding[1];\n      } else {\n        offsetX = padding[3];\n      }\n    } else {\n      if (position === 'middle') {\n        offsetY = (rectHeight - height) / 2;\n      } else if (position === 'end') {\n        offsetY = rectHeight - height - padding[2];\n      } else {\n        offsetY = padding[0];\n      }\n    }\n\n    this.legendComponent.setAttributes({\n      dx: offsetX,\n      dy: offsetY,\n      x,\n      y\n    });\n\n    // update table size\n    if (this.orient === 'left') {\n      this.table.tableNoFrameWidth = this.table.tableNoFrameWidth - Math.ceil(width);\n      this.table.tableX += Math.ceil(width);\n    } else if (this.orient === 'top') {\n      this.table.tableNoFrameHeight = this.table.tableNoFrameHeight - Math.ceil(height);\n      this.table.tableY += Math.ceil(height);\n    } else if (this.orient === 'right') {\n      this.table.tableNoFrameWidth = this.table.tableNoFrameWidth - Math.ceil(width);\n    } else if (this.orient === 'bottom') {\n      this.table.tableNoFrameHeight = this.table.tableNoFrameHeight - Math.ceil(height);\n    }\n  }\n\n  getLegendAttributes(rect: any) {\n    const layout = this.orient === 'bottom' || this.orient === 'top' ? 'horizontal' : 'vertical';\n    const attrs = {\n      layout,\n      items: this.getLegendItems(),\n      // zIndex: this.layoutZIndex,\n      maxWidth: rect.width,\n      maxHeight: rect.height,\n      ...getLegendAttributes(this.option, rect)\n    };\n    return attrs;\n  }\n\n  getLegendItems() {\n    return this.option.data;\n  }\n\n  initEvent() {\n    if (this.legendComponent) {\n      this.legendComponent.addEventListener(LegendEvent.legendItemClick, (e: any) => {\n        const selectedData = get(e, 'detail.currentSelected');\n        this.table.fireListeners(TABLE_EVENT_TYPE.LEGEND_ITEM_CLICK, { model: this, value: selectedData, event: e });\n      });\n\n      this.legendComponent.addEventListener(LegendEvent.legendItemHover, (e: any) => {\n        const detail = get(e, 'detail');\n        this.table.fireListeners(TABLE_EVENT_TYPE.LEGEND_ITEM_HOVER, { model: this, value: detail, event: e });\n      });\n\n      this.legendComponent.addEventListener(LegendEvent.legendItemUnHover, (e: any) => {\n        const detail = get(e, 'detail');\n        this.table.fireListeners(TABLE_EVENT_TYPE.LEGEND_ITEM_UNHOVER, { model: this, value: detail, event: e });\n      });\n\n      // wait for vrender-vcomponent version update\n      this.legendComponent.addEventListener('legendItemAttributeUpdate', (e: any) => {\n        this.table.scenegraph.updateNextFrame();\n      });\n    }\n  }\n\n  getLegendBounds() {\n    const width = isFinite(this.legendComponent.AABBBounds.width()) ? this.legendComponent.AABBBounds.width() : 0;\n    const height = isFinite(this.legendComponent.AABBBounds.height()) ? this.legendComponent.AABBBounds.height() : 0;\n\n    return {\n      width: width,\n      height: height\n    };\n  }\n  release() {\n    this.legendComponent && this.table.scenegraph.stage.defaultLayer.removeChild(this.legendComponent);\n    this.legendComponent = null;\n  }\n}\n"]}

package/cjs/core/BaseTable.d.ts

@@ -9,6 +9,7 @@ import { Scenegraph } from '../scenegraph/scenegraph';
 import { StateManager } from '../state/state';
 import { EventManager } from '../event/event';
 import type { CachedDataSource, DataSource } from '../data';
+import type { IBoundsLike } from '@visactor/vutils';
 import { type ITextSize } from '@visactor/vutils';
 import type { ColumnData, ColumnDefine, ColumnsDefine, IndicatorData, SeriesNumberColumnData } from '../ts-types/list-table/layout-map/api';
 import type { TooltipOptions } from '../ts-types/tooltip';
@@ -126,6 +127,8 @@ export declare abstract class BaseTable extends EventTarget implements BaseTable
     _adjustColWidth(col: number, orgWidth: number): number;
     setPixelRatio(pixelRatio: number): void;
     _updateSize(): void;
+    updateViewBox(newViewBox: IBoundsLike): void;
+    setViewBoxTransform(a: number, b: number, c: number, d: number, e: number, f: number): void;
     get rowHierarchyType(): 'grid' | 'tree';
     getColsWidth(startCol: number, endCol: number): number;
     getRowHeight(row: number): number;
@@ -236,6 +239,18 @@ export declare abstract class BaseTable extends EventTarget implements BaseTable
         bottom: number;
         height: number;
     } | null;
+    getTargetColAtConsiderRightFrozen(absoluteX: number, isConsider: boolean): {
+        col: number;
+        left: number;
+        right: number;
+        width: number;
+    } | null;
+    getTargetRowAtConsiderBottomFrozen(absoluteY: number, isConsider: boolean): {
+        row: number;
+        top: number;
+        bottom: number;
+        height: number;
+    } | null;
     private computeTargetRowByY;
     private computeTargetColByX;
     clearSelected(): void;

package/cjs/core/BaseTable.js

@@ -45,9 +45,9 @@ class BaseTable extends EventTarget_1.EventTarget {
     }
     constructor(container, options = {}) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        if (super(), this.showFrozenIcon = !0, this.version = "0.23.1-alpha.0", this.id = `VTable${Date.now()}`, 
+        if (super(), this.showFrozenIcon = !0, this.version = "0.23.1-alpha.2", 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, defaultRowHeight: defaultRowHeight = 40, defaultHeaderRowHeight: defaultHeaderRowHeight, defaultColWidth: defaultColWidth = 80, defaultHeaderColWidth: defaultHeaderColWidth, widthMode: widthMode = "standard", heightMode: heightMode = "standard", autoFillWidth: autoFillWidth = !1, autoFillHeight: autoFillHeight = !1, keyboardOptions: keyboardOptions, eventOptions: eventOptions, rowSeriesNumber: rowSeriesNumber, columnResizeMode: columnResizeMode, 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} = options;
         this.container = container, this.options = options, this._widthMode = widthMode, 
         this._heightMode = heightMode, this._autoFillWidth = autoFillWidth, this._autoFillHeight = autoFillHeight, 
@@ -64,8 +64,10 @@ class BaseTable extends EventTarget_1.EventTarget {
         this.columnWidthComputeMode = null !== (_a = options.columnWidthComputeMode) && void 0 !== _a ? _a : "normal";
         const internalProps = this.internalProps = {};
         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")), internalProps.handler = new EventHandler_1.EventHandler, 
         (0, vutils_1.isNumber)(this.options.resizeTime) && (internalProps.handler.resizeTime = this.options.resizeTime), 
@@ -300,31 +302,40 @@ class BaseTable extends EventTarget_1.EventTarget {
         this.internalProps.pixelRatio = pixelRatio, this.scenegraph.setPixelRatio(pixelRatio);
     }
     _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, _1, _2, _3, _4;
+        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, _2, _3, _4, _5;
         const {padding: padding} = this;
         let widthP = 0, heightP = 0;
-        if ("browser" === env_1.Env.mode) {
-            const element = this.getElement(), width1 = null !== (_b = null === (_a = element.parentElement) || void 0 === _a ? void 0 : _a.offsetWidth) && void 0 !== _b ? _b : 0, height1 = null !== (_d = null === (_c = element.parentElement) || void 0 === _c ? void 0 : _c.offsetHeight) && void 0 !== _d ? _d : 0;
+        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(), width1 = null !== (_c = null === (_b = element.parentElement) || void 0 === _b ? void 0 : _b.offsetWidth) && void 0 !== _c ? _c : 0, height1 = null !== (_e = null === (_d = element.parentElement) || void 0 === _d ? void 0 : _d.offsetHeight) && void 0 !== _e ? _e : 0;
             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 !== (_f = null === (_e = canvas.parentElement) || void 0 === _e ? void 0 : _e.offsetWidth) && void 0 !== _f ? _f : 0, 
-            heightP = null !== (_h = null === (_g = canvas.parentElement) || void 0 === _g ? void 0 : _g.offsetHeight) && void 0 !== _h ? _h : 0, 
-            (null === (_j = null == this ? void 0 : this.scenegraph) || void 0 === _j ? void 0 : _j.stage) ? this.scenegraph.stage.resize(widthP, heightP) : (canvas.style.width = "", 
+            widthP = null !== (_g = null === (_f = canvas.parentElement) || void 0 === _f ? void 0 : _f.offsetWidth) && void 0 !== _g ? _g : 0, 
+            heightP = null !== (_j = null === (_h = canvas.parentElement) || void 0 === _h ? void 0 : _h.offsetHeight) && void 0 !== _j ? _j : 0, 
+            (null === (_k = null == this ? void 0 : this.scenegraph) || void 0 === _k ? void 0 : _k.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`);
         } else "node" === env_1.Env.mode && (widthP = this.canvasWidth - 1, heightP = this.canvasHeight - 1);
         const width = Math.floor(widthP - style.getScrollBarSize(this.getTheme().scrollStyle)), height = Math.floor(heightP - style.getScrollBarSize(this.getTheme().scrollStyle));
-        if (null === (_k = this.internalProps.theme) || void 0 === _k ? void 0 : _k.frameStyle) {
-            const lineWidths = toBoxArray(null !== (_m = null === (_l = this.internalProps.theme.frameStyle) || void 0 === _l ? void 0 : _l.borderLineWidth) && void 0 !== _m ? _m : [ null ]), shadowWidths = toBoxArray(null !== (_p = null === (_o = this.internalProps.theme.frameStyle) || void 0 === _o ? void 0 : _o.shadowBlur) && void 0 !== _p ? _p : [ 0 ]);
-            (null === (_q = this.theme.frameStyle) || void 0 === _q ? void 0 : _q.innerBorder) ? (this.tableX = 0, 
-            this.tableY = 0, this.tableNoFrameWidth = width - (null !== (_r = shadowWidths[1]) && void 0 !== _r ? _r : 0), 
-            this.tableNoFrameHeight = height - (null !== (_s = shadowWidths[2]) && void 0 !== _s ? _s : 0)) : (this.tableX = (null !== (_t = lineWidths[3]) && void 0 !== _t ? _t : 0) + (null !== (_u = shadowWidths[3]) && void 0 !== _u ? _u : 0), 
-            this.tableY = (null !== (_v = lineWidths[0]) && void 0 !== _v ? _v : 0) + (null !== (_w = shadowWidths[0]) && void 0 !== _w ? _w : 0), 
-            this.tableNoFrameWidth = width - ((null !== (_x = lineWidths[1]) && void 0 !== _x ? _x : 0) + (null !== (_y = shadowWidths[1]) && void 0 !== _y ? _y : 0)) - ((null !== (_z = lineWidths[3]) && void 0 !== _z ? _z : 0) + (null !== (_0 = shadowWidths[3]) && void 0 !== _0 ? _0 : 0)), 
-            this.tableNoFrameHeight = height - ((null !== (_1 = lineWidths[0]) && void 0 !== _1 ? _1 : 0) + (null !== (_2 = shadowWidths[0]) && void 0 !== _2 ? _2 : 0)) - ((null !== (_3 = lineWidths[2]) && void 0 !== _3 ? _3 : 0) + (null !== (_4 = shadowWidths[2]) && void 0 !== _4 ? _4 : 0)));
+        if (null === (_l = this.internalProps.theme) || void 0 === _l ? void 0 : _l.frameStyle) {
+            const lineWidths = toBoxArray(null !== (_o = null === (_m = this.internalProps.theme.frameStyle) || void 0 === _m ? void 0 : _m.borderLineWidth) && void 0 !== _o ? _o : [ null ]), shadowWidths = toBoxArray(null !== (_q = null === (_p = this.internalProps.theme.frameStyle) || void 0 === _p ? void 0 : _p.shadowBlur) && void 0 !== _q ? _q : [ 0 ]);
+            (null === (_r = this.theme.frameStyle) || void 0 === _r ? void 0 : _r.innerBorder) ? (this.tableX = 0, 
+            this.tableY = 0, this.tableNoFrameWidth = width - (null !== (_s = shadowWidths[1]) && void 0 !== _s ? _s : 0), 
+            this.tableNoFrameHeight = height - (null !== (_t = shadowWidths[2]) && void 0 !== _t ? _t : 0)) : (this.tableX = (null !== (_u = lineWidths[3]) && void 0 !== _u ? _u : 0) + (null !== (_v = shadowWidths[3]) && void 0 !== _v ? _v : 0), 
+            this.tableY = (null !== (_w = lineWidths[0]) && void 0 !== _w ? _w : 0) + (null !== (_x = shadowWidths[0]) && void 0 !== _x ? _x : 0), 
+            this.tableNoFrameWidth = width - ((null !== (_y = lineWidths[1]) && void 0 !== _y ? _y : 0) + (null !== (_z = shadowWidths[1]) && void 0 !== _z ? _z : 0)) - ((null !== (_0 = lineWidths[3]) && void 0 !== _0 ? _0 : 0) + (null !== (_1 = shadowWidths[3]) && void 0 !== _1 ? _1 : 0)), 
+            this.tableNoFrameHeight = height - ((null !== (_2 = lineWidths[0]) && void 0 !== _2 ? _2 : 0) + (null !== (_3 = shadowWidths[0]) && void 0 !== _3 ? _3 : 0)) - ((null !== (_4 = lineWidths[2]) && void 0 !== _4 ? _4 : 0) + (null !== (_5 = shadowWidths[2]) && void 0 !== _5 ? _5 : 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.scenegraph.stage.window.setViewBoxTransform(a, b, c, d, e, f);
+    }
     get rowHierarchyType() {
         return "grid";
     }
@@ -521,7 +532,7 @@ class BaseTable extends EventTarget_1.EventTarget {
         return this.getCellsRectWidth(cellRange.start.col, cellRange.start.row, cellRange.end.col, cellRange.end.row);
     }
     isFrozenCell(col, row) {
-        const isFrozenRow = this.isFrozenRow(row) || this.isBottomFrozenRow(row), isFrozenCol = this.isFrozenColumn(col) || this.isRightFrozenColumn(col);
+        const isFrozenRow = this.isFrozenRow(row), isFrozenCol = this.isFrozenColumn(col);
         return isFrozenRow || isFrozenCol ? {
             row: isFrozenRow,
             col: isFrozenCol
@@ -588,8 +599,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() {
@@ -691,9 +705,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), this.isReleased = !0;
+        parentElement && !this.options.canvas && parentElement.removeChild(internalProps.element), 
+        this.isReleased = !0;
     }
     fireListeners(type, event) {
         return super.fireListeners(type, event);
@@ -783,6 +799,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,
@@ -795,8 +812,8 @@ class BaseTable extends EventTarget_1.EventTarget {
         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),
+            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
         };
     }
@@ -877,6 +894,36 @@ class BaseTable extends EventTarget_1.EventTarget {
             return null;
         })(candRow, bottom);
     }
+    getTargetColAtConsiderRightFrozen(absoluteX, isConsider) {
+        if (0 === absoluteX) return {
+            left: 0,
+            col: 0,
+            right: 0,
+            width: 0
+        };
+        if (isConsider && absoluteX > this.tableNoFrameWidth - this.getRightFrozenColsWidth() && absoluteX < this.tableNoFrameWidth) for (let i = 0; i < this.rightFrozenColCount; i++) if (absoluteX > this.tableNoFrameWidth - this.getColsWidth(this.colCount - i - 1, this.colCount - 1)) return {
+            col: this.colCount - i - 1,
+            left: void 0,
+            right: void 0,
+            width: void 0
+        };
+        return this.getTargetColAt(absoluteX);
+    }
+    getTargetRowAtConsiderBottomFrozen(absoluteY, isConsider) {
+        if (0 === absoluteY) return {
+            top: 0,
+            row: 0,
+            bottom: 0,
+            height: 0
+        };
+        if (isConsider && absoluteY > this.tableNoFrameHeight - this.getBottomFrozenRowsHeight() && absoluteY < this.tableNoFrameHeight) for (let i = 0; i < this.rightFrozenColCount; i++) if (absoluteY > this.tableNoFrameHeight - this.getRowsHeight(this.rowCount - i - 1, this.rowCount - 1)) return {
+            row: this.rowCount - i - 1,
+            top: void 0,
+            bottom: void 0,
+            height: void 0
+        };
+        return this.getTargetRowAt(absoluteY);
+    }
     computeTargetRowByY(absoluteY) {
         let defaultRowHeight = this.internalProps.defaultRowHeight;
         return this._rowRangeHeightsMap.get("$0$" + (this.rowCount - 1)) && (defaultRowHeight = this._rowRangeHeightsMap.get("$0$" + (this.rowCount - 1)) / this.rowCount), 
@@ -1106,8 +1153,7 @@ class BaseTable extends EventTarget_1.EventTarget {
         return null === (_a = this.internalProps.layoutMap) || void 0 === _a ? void 0 : _a.isCornerHeader(col, row);
     }
     isFrozenColumn(col, row) {
-        var _a;
-        return null === (_a = this.internalProps.layoutMap) || void 0 === _a ? void 0 : _a.isFrozenColumn(col, row);
+        return this.isLeftFrozenColumn(col, row) || this.isRightFrozenColumn(col, row);
     }
     isLeftFrozenColumn(col, row) {
         var _a;
@@ -1118,8 +1164,7 @@ class BaseTable extends EventTarget_1.EventTarget {
         return null === (_a = this.internalProps.layoutMap) || void 0 === _a ? void 0 : _a.isRightFrozenColumn(col, row);
     }
     isFrozenRow(col, row) {
-        var _a;
-        return null === (_a = this.internalProps.layoutMap) || void 0 === _a ? void 0 : _a.isFrozenRow(col, row);
+        return this.isTopFrozenRow(col, row) || this.isBottomFrozenRow(col, row);
     }
     isTopFrozenRow(col, row) {
         var _a;
@@ -1253,7 +1298,7 @@ class BaseTable extends EventTarget_1.EventTarget {
     }
     _canDragHeaderPosition(col, row) {
         if (this.isHeader(col, row) && this.stateManager.isSelected(col, row)) {
-            if ("disabled" === this.internalProps.frozenColDragHeaderMode && (this.isFrozenColumn(col) || this.isRightFrozenColumn(col))) return !1;
+            if ("disabled" === this.internalProps.frozenColDragHeaderMode && this.isFrozenColumn(col)) return !1;
             const selectRange = this.stateManager.select.ranges[0];
             if (this.isColumnHeader(col, row)) {
                 if (selectRange.end.row !== this.rowCount - 1) return !1;
@@ -1525,7 +1570,7 @@ class BaseTable extends EventTarget_1.EventTarget {
         (null === (_b = null === (_a = this.stateManager.select) || void 0 === _a ? void 0 : _a.ranges) || void 0 === _b ? void 0 : _b.length) > 0 && (0, 
         update_select_border_1.hideCellSelectBorder)(this.scenegraph);
         const {col: hoverCol, row: hoverRow} = this.stateManager.hover.cellPos;
-        this.stateManager.updateHoverPos(-1, -1);
+        this.stateManager.updateHoverPos(-1, -1), this.scenegraph.renderSceneGraph();
         const c = this.scenegraph.stage.toCanvas(!1, (new vutils_1.AABBBounds).set(cellRect.left + this.tableX + 1, cellRect.top + this.tableY + 1, cellRect.right + this.tableX, cellRect.bottom + this.tableY));
         return isInView || (this.setScrollTop(scrollTop), this.setScrollLeft(scrollLeft)), 
         (null === (_d = null === (_c = this.stateManager.select) || void 0 === _c ? void 0 : _c.ranges) || void 0 === _d ? void 0 : _d.length) > 0 && (0,