@visactor/vue-vtable 1.25.0 → 1.25.1-alpha.1

package/es/components/custom/vtable-vue-attribute-plugin.js

@@ -1,416 +1,630 @@
-import { __rest } from 'tslib';
 import { CUSTOM_CONTAINER_NAME, CUSTOM_MERGE_PRE_NAME } from '@visactor/vtable';
 import { HtmlAttributePlugin, vglobal, application } from '@visactor/vtable/es/vrender';
 import { isNil, isEqual, isObject, isArray, calculateAnchorOfBounds, isFunction, isString, styleStringToObject } from '@visactor/vutils';
 import { render } from 'vue';
 
-class VTableVueAttributePlugin extends HtmlAttributePlugin {
-    constructor(currentContext) {
-        super();
-        this.name = 'VTableVueAttributePlugin';
-        this.renderQueue = new Set();
-        this.isRendering = false;
-        this.MAX_CACHE_COUNT = 100;
-        this.accessQueue = [];
-        this.VIEWPORT_BUFFER = 100;
-        this.BUFFER_ZONE = 500;
-        this.styleUpdateQueue = new Map();
-        this.styleUpdateRequested = false;
-        this.eventHandlers = new WeakMap();
-        this.currentContext = currentContext;
-    }
-    renderGraphicHTML(graphic) {
-        if (!this.checkNeedRender(graphic)) {
-            return;
-        }
-        this.renderQueue.add(graphic);
-        this.scheduleRender();
-    }
-    scheduleRender() {
-        if (this.isRendering) {
-            return;
-        }
-        this.isRendering = true;
-        vglobal.getRequestAnimationFrame()(() => {
-            this.renderQueue.forEach(graphic => {
-                try {
-                    this.doRenderGraphic(graphic);
-                }
-                catch (error) {
-                    const { id } = this.getGraphicOptions(graphic) || {};
-                    this.removeElement(id, true);
-                }
-            });
-            this.renderQueue.clear();
-            this.isRendering = false;
-        });
-    }
-    doRenderGraphic(graphic) {
-        var _a;
-        const { id, options } = this.getGraphicOptions(graphic);
-        if (!id) {
-            return;
-        }
-        const stage = graphic.stage;
-        const { element, container: expectedContainer } = options;
-        const actualContainer = expectedContainer ? checkFrozenContainer(graphic) : expectedContainer;
-        let targetMap = (_a = this.htmlMap) === null || _a === void 0 ? void 0 : _a[id];
-        if (targetMap && actualContainer && actualContainer !== targetMap.container) {
-            this.removeElement(id);
-            targetMap = null;
-        }
-        this.checkToPassAppContext(element, graphic);
-        if (!targetMap || !this.checkDom(targetMap.wrapContainer)) {
-            this.checkAndClearCache(graphic);
-            const { wrapContainer, nativeContainer, reuse } = this.getWrapContainer(stage, actualContainer, { id, options });
-            if (wrapContainer) {
-                const dataRenderId = `${this.renderId}`;
-                wrapContainer.id = id;
-                wrapContainer.setAttribute('data-vue-renderId', dataRenderId);
-                wrapContainer.style.display = 'none';
-                if (!reuse) {
-                    render(element, wrapContainer);
-                }
-                targetMap = {
-                    wrapContainer,
-                    nativeContainer,
-                    container: actualContainer,
-                    renderId: this.renderId,
-                    graphic,
-                    isInViewport: true,
-                    lastPosition: null,
-                    lastStyle: {}
-                };
-                this.htmlMap[id] = targetMap;
-            }
-        }
-        if (targetMap) {
-            targetMap.renderId = this.renderId;
-            targetMap.lastAccessed = Date.now();
-            this.updateAccessQueue(id);
-            this.updateStyleOfWrapContainer(graphic, stage, targetMap.wrapContainer, targetMap.nativeContainer);
-        }
-    }
-    getGraphicOptions(graphic) {
-        var _a;
-        const { vue } = (graphic === null || graphic === void 0 ? void 0 : graphic.attribute) || {};
-        if (!vue) {
-            return null;
-        }
-        const id = isNil(vue.id) ? (_a = graphic.id) !== null && _a !== void 0 ? _a : graphic._uid : vue.id;
-        return { id: `vue_${id}`, options: vue };
-    }
-    checkToPassAppContext(vnode, graphic) {
-        var _a, _b;
-        try {
-            const customConfig = this.getCustomConfig(graphic);
-            const userAppContext = (_b = (_a = customConfig === null || customConfig === void 0 ? void 0 : customConfig.getVueUserAppContext) === null || _a === void 0 ? void 0 : _a.call(customConfig)) !== null && _b !== void 0 ? _b : this.currentContext;
-            if (!!(userAppContext === null || userAppContext === void 0 ? void 0 : userAppContext.components) && !!(userAppContext === null || userAppContext === void 0 ? void 0 : userAppContext.directives)) {
-                vnode.appContext = userAppContext;
-            }
-        }
-        catch (error) { }
-    }
-    getCustomConfig(graphic) {
-        var _a, _b, _c;
-        const target = getTargetGroup(graphic);
-        return (_c = (_b = (_a = target === null || target === void 0 ? void 0 : target.stage) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c.customConfig;
-    }
-    checkNeedRender(graphic) {
-        const { id, options } = this.getGraphicOptions(graphic) || {};
-        if (!id) {
-            return false;
-        }
-        const stage = graphic.stage;
-        if (!stage) {
-            return false;
-        }
-        const { element } = options;
-        if (!element) {
-            return false;
-        }
-        const isInViewport = this.checkInViewport(graphic);
-        return isInViewport;
-    }
-    checkInViewport(graphic) {
-        return this.checkInViewportByZone(graphic, this.VIEWPORT_BUFFER);
-    }
-    checkInBuffer(graphic) {
-        return this.checkInViewportByZone(graphic, this.BUFFER_ZONE);
-    }
-    checkInViewportByZone(graphic, buffer = 0) {
-        const { stage, globalAABBBounds: cBounds } = graphic;
-        if (!stage) {
-            return false;
-        }
-        const { AABBBounds: vBounds } = stage;
-        const eBounds = {
-            x1: vBounds.x1 - buffer,
-            x2: vBounds.x2 + buffer,
-            y1: vBounds.y1 - buffer,
-            y2: vBounds.y2 + buffer
-        };
-        const isIntersecting = cBounds.x1 < eBounds.x2 && cBounds.x2 > eBounds.x1 && cBounds.y1 < eBounds.y2 && cBounds.y2 > eBounds.y1;
-        return isIntersecting;
-    }
-    updateAccessQueue(id) {
-        const index = this.accessQueue.indexOf(id);
-        if (index > -1) {
-            this.accessQueue.splice(index, 1);
-        }
-        this.accessQueue.unshift(id);
-    }
-    checkAndClearCache(graphic) {
-        var _a;
-        const { viewportNodes, bufferNodes, cacheNodes } = this.classifyNodes();
-        const total = viewportNodes.length + bufferNodes.length + cacheNodes.length;
-        const customConfig = this.getCustomConfig(graphic);
-        const maxTotal = (_a = customConfig === null || customConfig === void 0 ? void 0 : customConfig.maxDomCacheCount) !== null && _a !== void 0 ? _a : this.MAX_CACHE_COUNT;
-        if (total <= maxTotal) {
-            return;
-        }
-        const exceedingCount = total - maxTotal;
-        let toRemove = cacheNodes.slice(0, exceedingCount);
-        if (toRemove.length < exceedingCount) {
-            const bufferCandidates = bufferNodes
-                .sort((a, b) => this.htmlMap[a].lastAccessed - this.htmlMap[b].lastAccessed)
-                .slice(0, exceedingCount - toRemove.length);
-            toRemove = toRemove.concat(bufferCandidates);
-        }
-        toRemove.forEach(id => this.removeElement(id, true));
-    }
-    classifyNodes() {
-        const viewportNodes = [];
-        const bufferNodes = [];
-        const cacheNodes = [];
-        Object.keys(this.htmlMap).forEach(id => {
-            const node = this.htmlMap[id];
-            if (node.isInViewport) {
-                viewportNodes.push(id);
-            }
-            else if (this.checkInBuffer(node.graphic)) {
-                bufferNodes.push(id);
-            }
-            else {
-                cacheNodes.push(id);
-            }
-        });
-        return {
-            viewportNodes,
-            bufferNodes,
-            cacheNodes
-        };
-    }
-    checkDom(dom) {
-        if (!dom) {
-            return false;
-        }
-        return document.contains(dom);
-    }
-    removeAllDom(g) {
-        if (this.htmlMap) {
-            Object.keys(this.htmlMap).forEach(key => {
-                this.removeElement(key, true);
-            });
-            this.htmlMap = null;
-        }
-    }
-    removeElement(id, clear) {
-        var _a;
-        const record = (_a = this.htmlMap) === null || _a === void 0 ? void 0 : _a[id];
-        if (!record) {
-            return;
-        }
-        const { wrapContainer } = record;
-        if (!wrapContainer) {
-            return;
-        }
-        if (!clear) {
-            wrapContainer.remove();
-            record.isInViewport = false;
-            const index = this.accessQueue.indexOf(id);
-            if (index > -1) {
-                this.accessQueue.splice(index, 1);
-            }
-        }
-        else {
-            render(null, wrapContainer);
-            this.checkDom(wrapContainer) && super.removeElement(id);
-            delete this.htmlMap[id];
-        }
-        this.removeWrapContainerEventListener(wrapContainer);
-    }
-    getWrapContainer(stage, userContainer, domParams) {
-        var _a;
-        let nativeContainer;
-        if (userContainer) {
-            nativeContainer =
-                typeof userContainer === 'string' ? application.global.getElementById(userContainer) : userContainer;
-        }
-        else {
-            nativeContainer = stage.window.getContainer();
-        }
-        const { id } = domParams || {};
-        const record = (_a = this.htmlMap) === null || _a === void 0 ? void 0 : _a[id];
-        if (record && !record.isInViewport) {
-            const { wrapContainer } = record;
-            if (!this.checkDom(wrapContainer)) {
-                nativeContainer.appendChild(wrapContainer);
-            }
-            return {
-                reuse: true,
-                wrapContainer,
-                nativeContainer
-            };
-        }
-        return {
-            wrapContainer: application.global.createDom({ tagName: 'div', parent: nativeContainer }),
-            nativeContainer
-        };
-    }
-    updateStyleOfWrapContainer(graphic, stage, wrapContainer, nativeContainer) {
-        const { attribute, type } = graphic;
-        const _a = attribute || {}, { vue: options, width, height, visible, display } = _a, rest = __rest(_a, ["vue", "width", "height", "visible", "display"]);
-        const { x: left, y: top } = this.calculatePosition(graphic, options.anchorType);
-        const { left: offsetX, top: offsetTop } = this.calculateOffset(stage, nativeContainer, left, top);
-        const { id } = this.getGraphicOptions(graphic) || {};
-        const record = id ? this.htmlMap[id] : null;
-        if (!record) {
-            return;
-        }
-        const positionChanged = !record.lastPosition || record.lastPosition.x !== offsetX || record.lastPosition.y !== offsetTop;
-        if (!positionChanged) {
-            return;
-        }
-        const { pointerEvents } = options;
-        const calculateStyle = this.parseDefaultStyleFromGraphic(graphic);
-        const style = this.convertCellStyle(graphic);
-        Object.assign(calculateStyle, Object.assign(Object.assign(Object.assign({ width: `${width}px`, height: `${height}px`, overflow: 'hidden' }, (style || {})), (rest || {})), { transform: `translate(${offsetX}px, ${offsetTop}px)`, boxSizing: 'border-box', display: visible !== false ? display || 'block' : 'none', pointerEvents: pointerEvents === true ? 'all' : pointerEvents || 'none', position: 'absolute' }));
-        if (calculateStyle.pointerEvents !== 'none') {
-            this.checkToAddEventListener(wrapContainer);
-        }
-        if (type === 'text' && options.anchorType === 'position') {
-            Object.assign(calculateStyle, this.getTransformOfText(graphic));
-        }
-        this.applyUserStyles(options, calculateStyle, { offsetX, offsetTop, graphic, wrapContainer });
-        const styleChanged = !isEqual(record.lastStyle, calculateStyle);
-        if (styleChanged) {
-            this.styleUpdateQueue.set(wrapContainer.id, calculateStyle);
-            this.requestStyleUpdate();
-            record.lastStyle = calculateStyle;
-        }
-    }
-    checkToAddEventListener(wrapContainer) {
-        if (!this.eventHandlers.has(wrapContainer)) {
-            const handler = (e) => {
-                e.preventDefault();
-                this.onWheel(e);
-            };
-            wrapContainer.addEventListener('wheel', handler, { passive: false });
-            this.eventHandlers.set(wrapContainer, handler);
-        }
-    }
-    requestStyleUpdate() {
-        if (!this.styleUpdateRequested) {
-            this.styleUpdateRequested = true;
-            vglobal.getRequestAnimationFrame()(() => {
-                this.styleUpdateQueue.forEach((changes, id) => {
-                    var _a, _b;
-                    const container = (_b = (_a = this.htmlMap) === null || _a === void 0 ? void 0 : _a[id]) === null || _b === void 0 ? void 0 : _b.wrapContainer;
-                    if (container) {
-                        Object.assign(container.style, changes);
-                    }
-                });
-                this.styleUpdateQueue.clear();
-                this.styleUpdateRequested = false;
-            });
-        }
-    }
-    convertCellStyle(graphic) {
-        var _a;
-        const { col, row, stage } = getTargetGroup(graphic);
-        const style = (_a = stage === null || stage === void 0 ? void 0 : stage.table) === null || _a === void 0 ? void 0 : _a.getCellStyle(col, row);
-        if (!isObject(style)) {
-            return;
-        }
-        const _b = style, { lineHeight, padding } = _b, rest = __rest(_b, ["lineHeight", "padding"]);
-        return Object.assign(Object.assign({}, rest), { padding: isArray(padding) ? padding.map(value => `${value}px`).join(' ') : padding });
-    }
-    calculatePosition(graphic, anchorType) {
-        const bounds = graphic.globalAABBBounds;
-        if (anchorType === 'position' || bounds.empty()) {
-            const matrix = graphic.globalTransMatrix;
-            return { x: matrix.e, y: matrix.f };
-        }
-        return calculateAnchorOfBounds(bounds, anchorType || 'top-left');
-    }
-    calculateOffset(stage, nativeContainer, x, y) {
-        const containerTL = application.global.getElementTopLeft(nativeContainer, false);
-        const windowTL = stage.window.getTopLeft(false);
-        return {
-            left: x + windowTL.left - containerTL.left,
-            top: y + windowTL.top - containerTL.top
-        };
-    }
-    applyUserStyles(options, baseStyle, context) {
-        if (isFunction(options.style)) {
-            const userStyle = options.style({
-                top: context.offsetTop,
-                left: context.offsetX,
-                width: context.graphic.globalAABBBounds.width(),
-                height: context.graphic.globalAABBBounds.height()
-            }, context.graphic, context.wrapContainer);
-            Object.assign(baseStyle, userStyle);
-        }
-        else if (isObject(options.style)) {
-            Object.assign(baseStyle, options.style);
-        }
-        else if (isString(options.style)) {
-            Object.assign(baseStyle, styleStringToObject(options.style));
-        }
-    }
-}
-function checkFrozenContainer(graphic) {
-    var _a;
-    const { col, row, stage } = getTargetGroup(graphic);
-    let container = (_a = graphic.attribute.vue) === null || _a === void 0 ? void 0 : _a.container;
-    const { table } = stage;
-    if (container === table.bodyDomContainer) {
-        if (col < table.frozenColCount && row >= table.rowCount - table.bottomFrozenRowCount) {
-            container = table.bottomFrozenBodyDomContainer;
-        }
-        else if (col >= table.colCount - table.rightFrozenColCount &&
-            row >= table.rowCount - table.bottomFrozenRowCount) {
-            container = table.rightFrozenBottomDomContainer;
-        }
-        else if (row >= table.rowCount - table.bottomFrozenRowCount) {
-            container = table.bottomFrozenBodyDomContainer;
-        }
-        else if (col < table.frozenColCount) {
-            container = table.frozenBodyDomContainer;
-        }
-        else if (col >= table.colCount - table.rightFrozenColCount) {
-            container = table.rightFrozenBodyDomContainer;
-        }
-    }
-    else if (container === table.headerDomContainer) {
-        if (col < table.frozenColCount) {
-            container = table.frozenHeaderDomContainer;
-        }
-        else if (col >= table.colCount - table.rightFrozenColCount) {
-            container = table.rightFrozenHeaderDomContainer;
-        }
-    }
-    return container;
-}
-function getTargetGroup(target) {
-    while (target === null || target === void 0 ? void 0 : target.parent) {
-        if (target.name === CUSTOM_CONTAINER_NAME || (target.name || '').startsWith(CUSTOM_MERGE_PRE_NAME)) {
-            return target;
-        }
-        target = target.parent;
-    }
-    return { col: -1, row: -1, stage: null };
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/**
+ * 表格自定义组件集成插件
+ */
+class VTableVueAttributePlugin extends HtmlAttributePlugin {
+    constructor(currentContext) {
+        super();
+        this.name = 'VTableVueAttributePlugin';
+        /** 渲染队列 */
+        this.renderQueue = new Set();
+        /** 是否正在渲染 */
+        this.isRendering = false;
+        /** 最大缓存节点数(兜底值) */
+        this.MAX_CACHE_COUNT = 100;
+        /** 记录节点访问顺序(LRU用) */
+        this.accessQueue = [];
+        /** 目标可视区区(可视区外一定范围内的节点，保留) */
+        this.VIEWPORT_BUFFER = 100;
+        /** 缓冲区(非可视区且非缓冲区的节点需清理) */
+        this.BUFFER_ZONE = 500;
+        // 新增批量更新队列
+        this.styleUpdateQueue = new Map();
+        /** 样式更新中 */
+        this.styleUpdateRequested = false;
+        /** 事件集 */
+        this.eventHandlers = new WeakMap();
+        this.currentContext = currentContext;
+    }
+    /**
+     * @description: 单元格变化后重新渲染组件，由 HtmlAttributePlugin 插件触发
+     * @param {IGraphic} graphic
+     * @return {*}
+     */
+    renderGraphicHTML(graphic) {
+        if (!this.checkNeedRender(graphic)) {
+            return;
+        }
+        // 加入异步渲染队列
+        this.renderQueue.add(graphic);
+        this.scheduleRender();
+    }
+    /**
+     * @description: 渲染调度
+     * @return {*}
+     */
+    scheduleRender() {
+        if (this.isRendering) {
+            return;
+        }
+        this.isRendering = true;
+        vglobal.getRequestAnimationFrame()(() => {
+            this.renderQueue.forEach(graphic => {
+                try {
+                    this.doRenderGraphic(graphic);
+                }
+                catch (error) {
+                    const { id } = this.getGraphicOptions(graphic) || {};
+                    this.removeElement(id, true);
+                }
+            });
+            this.renderQueue.clear();
+            this.isRendering = false;
+        });
+    }
+    /**
+     * @description: 单元格变化后实际组件渲染方法
+     * @param {IGraphic} graphic
+     * @return {*}
+     */
+    doRenderGraphic(graphic) {
+        var _a;
+        const { id, options } = this.getGraphicOptions(graphic);
+        if (!id) {
+            return;
+        }
+        const stage = graphic.stage;
+        const { element, container: expectedContainer } = options;
+        // 获取实际容器
+        const actualContainer = expectedContainer ? checkFrozenContainer(graphic) : expectedContainer;
+        // 检查是否需要移除旧容器
+        let targetMap = (_a = this.htmlMap) === null || _a === void 0 ? void 0 : _a[id];
+        if (targetMap && actualContainer && actualContainer !== targetMap.container) {
+            // 容器变更
+            this.removeElement(id);
+            targetMap = null;
+        }
+        // 校验并传递上下文
+        this.checkToPassAppContext(element, graphic);
+        // 渲染或更新 Vue 组件
+        if (!targetMap || !this.checkDom(targetMap.wrapContainer)) {
+            // 缓存节点检查
+            this.checkAndClearCache(graphic);
+            const { wrapContainer, nativeContainer, reuse } = this.getWrapContainer(stage, actualContainer, { id, options });
+            if (wrapContainer) {
+                const dataRenderId = `${this.renderId}`;
+                wrapContainer.id = id;
+                wrapContainer.setAttribute('data-vue-renderId', dataRenderId);
+                // 先隐藏
+                wrapContainer.style.display = 'none';
+                if (!reuse) {
+                    // 仅在非复用时需要重新渲染
+                    render(element, wrapContainer);
+                }
+                targetMap = {
+                    wrapContainer,
+                    nativeContainer,
+                    container: actualContainer,
+                    renderId: this.renderId,
+                    graphic,
+                    isInViewport: true,
+                    lastPosition: null,
+                    lastStyle: {}
+                };
+                this.htmlMap[id] = targetMap;
+            }
+        }
+        // 更新样式并记录渲染 ID
+        if (targetMap) {
+            targetMap.renderId = this.renderId;
+            targetMap.lastAccessed = Date.now();
+            this.updateAccessQueue(id);
+            this.updateStyleOfWrapContainer(graphic, stage, targetMap.wrapContainer, targetMap.nativeContainer);
+        }
+    }
+    /**
+     * @description: 获取渲染参数
+     * @param {IGraphic} graphic
+     * @return {*}
+     */
+    getGraphicOptions(graphic) {
+        var _a;
+        // TODO render 组件接入 vue 类型
+        //@ts-ignore
+        const { vue } = (graphic === null || graphic === void 0 ? void 0 : graphic.attribute) || {};
+        if (!vue) {
+            return null;
+        }
+        const id = isNil(vue.id) ? (_a = graphic.id) !== null && _a !== void 0 ? _a : graphic._uid : vue.id;
+        return { id: `vue_${id}`, options: vue };
+    }
+    /**
+     * @description: 校验并传递上下文
+     * @param {VNode} vnode
+     * @param {IGraphic} graphic
+     * @return {*}
+     */
+    checkToPassAppContext(vnode, graphic) {
+        var _a, _b;
+        try {
+            const customConfig = this.getCustomConfig(graphic);
+            const userAppContext = (_b = (_a = customConfig === null || customConfig === void 0 ? void 0 : customConfig.getVueUserAppContext) === null || _a === void 0 ? void 0 : _a.call(customConfig)) !== null && _b !== void 0 ? _b : this.currentContext;
+            // 简单校验合法性
+            if (!!(userAppContext === null || userAppContext === void 0 ? void 0 : userAppContext.components) && !!(userAppContext === null || userAppContext === void 0 ? void 0 : userAppContext.directives)) {
+                vnode.appContext = userAppContext;
+            }
+        }
+        catch (error) { }
+    }
+    /**
+     * @description: 获取自定义配置
+     * @param {IGraphic} graphic
+     * @return {*}
+     */
+    getCustomConfig(graphic) {
+        var _a, _b, _c;
+        const target = getTargetGroup(graphic);
+        return (_c = (_b = (_a = target === null || target === void 0 ? void 0 : target.stage) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c.customConfig;
+    }
+    /**
+     * @description: 检查是否需要渲染
+     * @param {IGraphic} graphic
+     * @return {*}
+     */
+    checkNeedRender(graphic) {
+        const { id, options } = this.getGraphicOptions(graphic) || {};
+        if (!id) {
+            return false;
+        }
+        const stage = graphic.stage;
+        if (!stage) {
+            return false;
+        }
+        const { element } = options;
+        if (!element) {
+            return false;
+        }
+        const isInViewport = this.checkInViewport(graphic);
+        // 不在可视区内暂时不需要移除，因为在 clearCacheContainer 方法中提前被移除了
+        return isInViewport;
+    }
+    /**
+     * @description: 判断是否在可视范围内
+     * @param {IGraphic} graphic
+     * @return {*}
+     */
+    checkInViewport(graphic) {
+        return this.checkInViewportByZone(graphic, this.VIEWPORT_BUFFER);
+    }
+    /**
+     * @description: 判断是否在缓冲区内
+     * @param {IGraphic} graphic
+     * @return {*}
+     */
+    checkInBuffer(graphic) {
+        return this.checkInViewportByZone(graphic, this.BUFFER_ZONE);
+    }
+    /**
+     * @description: 判断当前是否在指定视口范围内
+     * @param {IGraphic} graphic
+     * @param {number} buffer
+     * @return {*}
+     */
+    checkInViewportByZone(graphic, buffer = 0) {
+        const { stage, globalAABBBounds: cBounds } = graphic;
+        if (!stage) {
+            return false;
+        }
+        // 获取视口的AABB边界
+        //@ts-ignore
+        const { AABBBounds: vBounds } = stage;
+        // 扩展视口判断范围
+        const eBounds = {
+            x1: vBounds.x1 - buffer,
+            x2: vBounds.x2 + buffer,
+            y1: vBounds.y1 - buffer,
+            y2: vBounds.y2 + buffer
+        };
+        // 判断两个区域是否相交
+        const isIntersecting = cBounds.x1 < eBounds.x2 && cBounds.x2 > eBounds.x1 && cBounds.y1 < eBounds.y2 && cBounds.y2 > eBounds.y1;
+        return isIntersecting;
+    }
+    /**
+     * @description: 节点访问顺序队列
+     * @param {string} id
+     * @return {*}
+     */
+    updateAccessQueue(id) {
+        // 移除旧记录
+        const index = this.accessQueue.indexOf(id);
+        if (index > -1) {
+            this.accessQueue.splice(index, 1);
+        }
+        // 添加到队列头部
+        this.accessQueue.unshift(id);
+    }
+    /**
+     * @description: 在添加新节点前检查缓存大小
+     * @param {IGraphic} graphic
+     * @return {*}
+     */
+    checkAndClearCache(graphic) {
+        var _a;
+        const { viewportNodes, bufferNodes, cacheNodes } = this.classifyNodes();
+        const total = viewportNodes.length + bufferNodes.length + cacheNodes.length;
+        const customConfig = this.getCustomConfig(graphic);
+        const maxTotal = (_a = customConfig === null || customConfig === void 0 ? void 0 : customConfig.maxDomCacheCount) !== null && _a !== void 0 ? _a : this.MAX_CACHE_COUNT;
+        // 仅当总数超过阈值时清理
+        if (total <= maxTotal) {
+            return;
+        }
+        const exceedingCount = total - maxTotal;
+        // 优先清理缓存区节点: 移除缓存区的前 exceedingCount 个节点
+        let toRemove = cacheNodes.slice(0, exceedingCount);
+        // 若缓存区节点不满足阈值，为了控制内存占用率，按最后访问时间清除最早访问的缓冲区节点
+        if (toRemove.length < exceedingCount) {
+            const bufferCandidates = bufferNodes
+                .sort((a, b) => this.htmlMap[a].lastAccessed - this.htmlMap[b].lastAccessed)
+                .slice(0, exceedingCount - toRemove.length);
+            toRemove = toRemove.concat(bufferCandidates);
+        }
+        // 执行清理
+        toRemove.forEach(id => this.removeElement(id, true));
+    }
+    /**
+     * @description: 节点按可视区/缓存区/缓冲区分类
+     * @return {*}
+     */
+    classifyNodes() {
+        /** 可视区节点 */
+        const viewportNodes = [];
+        /** 缓冲区节点 */
+        const bufferNodes = [];
+        /** 既不在可视区也不在缓冲区的节点 */
+        const cacheNodes = [];
+        Object.keys(this.htmlMap).forEach(id => {
+            const node = this.htmlMap[id];
+            if (node.isInViewport) {
+                viewportNodes.push(id);
+            }
+            else if (this.checkInBuffer(node.graphic)) {
+                bufferNodes.push(id);
+            }
+            else {
+                cacheNodes.push(id);
+            }
+        });
+        return {
+            viewportNodes,
+            bufferNodes,
+            cacheNodes
+        };
+    }
+    /**
+     * @description: 检查 dom 是否存在
+     * @param {HTMLElement} dom
+     * @return {*}
+     */
+    checkDom(dom) {
+        if (!dom) {
+            return false;
+        }
+        return document.contains(dom);
+    }
+    /**
+     * @description: 清除所有 dom
+     * @param {IGraphic} g
+     * @return {*}
+     */
+    removeAllDom(g) {
+        if (this.htmlMap) {
+            Object.keys(this.htmlMap).forEach(key => {
+                this.removeElement(key, true);
+            });
+            this.htmlMap = null;
+        }
+    }
+    /**
+     * @description: 移除元素
+     * @param {string} id
+     * @param {boolean} clear 强制清除
+     * @return {*}
+     * 目前涉及到页面重绘的操作(比如列宽拖动会使得图形重绘，id变更)，会有短暂的容器插拔现象
+     */
+    removeElement(id, clear) {
+        var _a;
+        const record = (_a = this.htmlMap) === null || _a === void 0 ? void 0 : _a[id];
+        if (!record) {
+            return;
+        }
+        const { wrapContainer } = record;
+        if (!wrapContainer) {
+            return;
+        }
+        if (!clear) {
+            // 移除 dom 但保留在 htmlMap 中，供下次进入可视区时快速复用
+            wrapContainer.remove();
+            // 标记不在视口
+            record.isInViewport = false;
+            // 清理访问队列
+            const index = this.accessQueue.indexOf(id);
+            if (index > -1) {
+                this.accessQueue.splice(index, 1);
+            }
+        }
+        else {
+            // 卸载子组件
+            render(null, wrapContainer);
+            this.checkDom(wrapContainer) && super.removeElement(id);
+            // 清理引用
+            delete this.htmlMap[id];
+        }
+        // 清理事件
+        this.removeWrapContainerEventListener(wrapContainer);
+    }
+    /**
+     * @description: 获取包裹容器
+     * @param {IStage} stage
+     * @param {string} userContainer
+     * @param {CreateDOMParamsType} domParams
+     * @return {*}
+     */
+    getWrapContainer(stage, userContainer, domParams) {
+        var _a;
+        let nativeContainer;
+        if (userContainer) {
+            nativeContainer =
+                typeof userContainer === 'string' ? application.global.getElementById(userContainer) : userContainer;
+        }
+        else {
+            nativeContainer = stage.window.getContainer();
+        }
+        const { id } = domParams || {};
+        // 从 htmlMap 查找可复用 dom
+        const record = (_a = this.htmlMap) === null || _a === void 0 ? void 0 : _a[id];
+        if (record && !record.isInViewport) {
+            const { wrapContainer } = record;
+            if (!this.checkDom(wrapContainer)) {
+                // 添加游离节点
+                nativeContainer.appendChild(wrapContainer);
+            }
+            return {
+                reuse: true,
+                wrapContainer,
+                nativeContainer
+            };
+        }
+        return {
+            wrapContainer: application.global.createDom({ tagName: 'div', parent: nativeContainer }),
+            nativeContainer
+        };
+    }
+    /**
+     * @description: 更新包裹容器样式
+     * @param {IGraphic} graphic
+     * @param {IStage} stage
+     * @param {HTMLElement} wrapContainer
+     * @param {HTMLElement} nativeContainer
+     * @return {*}
+     */
+    updateStyleOfWrapContainer(graphic, stage, wrapContainer, nativeContainer) {
+        const { attribute, type } = graphic;
+        //@ts-ignore
+        const _a = attribute || {}, { vue: options, width, height, visible, display } = _a, rest = __rest(_a, ["vue", "width", "height", "visible", "display"]);
+        const { x: left, y: top } = this.calculatePosition(graphic, options.anchorType);
+        const { left: offsetX, top: offsetTop } = this.calculateOffset(stage, nativeContainer, left, top);
+        const { id } = this.getGraphicOptions(graphic) || {};
+        const record = id ? this.htmlMap[id] : null;
+        if (!record) {
+            return;
+        }
+        // 位置变化检查
+        const positionChanged = !record.lastPosition || record.lastPosition.x !== offsetX || record.lastPosition.y !== offsetTop;
+        if (!positionChanged) {
+            // 位置没有变化，无需更新样式
+            return;
+        }
+        // 默认自定义区域内也可带动表格画布滚动
+        const { pointerEvents } = options;
+        const calculateStyle = this.parseDefaultStyleFromGraphic(graphic);
+        // 单元格样式
+        const style = this.convertCellStyle(graphic);
+        Object.assign(calculateStyle, Object.assign(Object.assign(Object.assign({ width: `${width}px`, height: `${height}px`, overflow: 'hidden' }, (style || {})), (rest || {})), { transform: `translate(${offsetX}px, ${offsetTop}px)`, boxSizing: 'border-box', display: visible !== false ? display || 'block' : 'none', pointerEvents: pointerEvents === true ? 'all' : pointerEvents || 'none', position: 'absolute' }));
+        if (calculateStyle.pointerEvents !== 'none') {
+            this.checkToAddEventListener(wrapContainer);
+        }
+        if (type === 'text' && options.anchorType === 'position') {
+            Object.assign(calculateStyle, this.getTransformOfText(graphic));
+        }
+        this.applyUserStyles(options, calculateStyle, { offsetX, offsetTop, graphic, wrapContainer });
+        // 样式变化检查
+        const styleChanged = !isEqual(record.lastStyle, calculateStyle);
+        if (styleChanged) {
+            this.styleUpdateQueue.set(wrapContainer.id, calculateStyle);
+            // 请求批量更新
+            this.requestStyleUpdate();
+            // TODO 确认是否需要对接 VTableBrowserEnvContribution
+            // application.global.updateDom(wrapContainer, {
+            //   width,
+            //   height,
+            //   style: calculateStyle
+            // });
+            record.lastStyle = calculateStyle;
+        }
+    }
+    /**
+     * @description: 事件监听器管理
+     * @param {HTMLElement} wrapContainer
+     * @return {*}
+     */
+    checkToAddEventListener(wrapContainer) {
+        if (!this.eventHandlers.has(wrapContainer)) {
+            const handler = (e) => {
+                e.preventDefault();
+                this.onWheel(e);
+            };
+            wrapContainer.addEventListener('wheel', handler, { passive: false });
+            this.eventHandlers.set(wrapContainer, handler);
+        }
+    }
+    /**
+     * @description: 样式更新
+     * @return {*}
+     */
+    requestStyleUpdate() {
+        if (!this.styleUpdateRequested) {
+            this.styleUpdateRequested = true;
+            vglobal.getRequestAnimationFrame()(() => {
+                this.styleUpdateQueue.forEach((changes, id) => {
+                    var _a, _b;
+                    const container = (_b = (_a = this.htmlMap) === null || _a === void 0 ? void 0 : _a[id]) === null || _b === void 0 ? void 0 : _b.wrapContainer;
+                    if (container) {
+                        Object.assign(container.style, changes);
+                    }
+                });
+                this.styleUpdateQueue.clear();
+                this.styleUpdateRequested = false;
+            });
+        }
+    }
+    /**
+     * @description: 转换单元格样式
+     * @param {IGraphic} graphic
+     * @return {*}
+     */
+    convertCellStyle(graphic) {
+        var _a;
+        const { col, row, stage } = getTargetGroup(graphic);
+        const style = (_a = stage === null || stage === void 0 ? void 0 : stage.table) === null || _a === void 0 ? void 0 : _a.getCellStyle(col, row);
+        if (!isObject(style)) {
+            return;
+        }
+        const _b = style, { lineHeight, padding } = _b, rest = __rest(_b, ["lineHeight", "padding"]);
+        // TODO 表格提供具体解析方法，暂时只解析padding
+        return Object.assign(Object.assign({}, rest), { padding: isArray(padding) ? padding.map(value => `${value}px`).join(' ') : padding });
+    }
+    /**
+     * @description: 位置计算
+     * @param {IGraphic} graphic
+     * @param {string} anchorType
+     * @return {*}
+     */
+    calculatePosition(graphic, anchorType) {
+        const bounds = graphic.globalAABBBounds;
+        if (anchorType === 'position' || bounds.empty()) {
+            const matrix = graphic.globalTransMatrix;
+            return { x: matrix.e, y: matrix.f };
+        }
+        return calculateAnchorOfBounds(bounds, anchorType || 'top-left');
+    }
+    /**
+     * @description: 偏移计算
+     * @param {IStage} stage
+     * @param {HTMLElement} nativeContainer
+     * @param {number} x
+     * @param {number} y
+     * @return {*}
+     */
+    calculateOffset(stage, nativeContainer, x, y) {
+        const containerTL = application.global.getElementTopLeft(nativeContainer, false);
+        const windowTL = stage.window.getTopLeft(false);
+        return {
+            left: x + windowTL.left - containerTL.left,
+            top: y + windowTL.top - containerTL.top
+        };
+    }
+    /**
+     * @description: 应用用户样式
+     * @param {SimpleDomStyleOptions & CommonDomOptions} options
+     * @param {Record<string, any>} baseStyle
+     * @param {Object} context
+     * @return {*}
+     */
+    applyUserStyles(options, baseStyle, context) {
+        if (isFunction(options.style)) {
+            const userStyle = options.style({
+                top: context.offsetTop,
+                left: context.offsetX,
+                width: context.graphic.globalAABBBounds.width(),
+                height: context.graphic.globalAABBBounds.height()
+            }, context.graphic, context.wrapContainer);
+            Object.assign(baseStyle, userStyle);
+        }
+        else if (isObject(options.style)) {
+            Object.assign(baseStyle, options.style);
+        }
+        else if (isString(options.style)) {
+            Object.assign(baseStyle, styleStringToObject(options.style));
+        }
+    }
+}
+/**
+ * @description: 检查冻结容器
+ * @param {IGraphic} graphic
+ * @return {*}
+ */
+function checkFrozenContainer(graphic) {
+    var _a;
+    const { col, row, stage } = getTargetGroup(graphic);
+    // @ts-ignore
+    let container = (_a = graphic.attribute.vue) === null || _a === void 0 ? void 0 : _a.container;
+    const { table } = stage;
+    if (container === table.bodyDomContainer) {
+        if (col < table.frozenColCount && row >= table.rowCount - table.bottomFrozenRowCount) {
+            container = table.bottomFrozenBodyDomContainer;
+        }
+        else if (col >= table.colCount - table.rightFrozenColCount &&
+            row >= table.rowCount - table.bottomFrozenRowCount) {
+            container = table.rightFrozenBottomDomContainer;
+        }
+        else if (row >= table.rowCount - table.bottomFrozenRowCount) {
+            container = table.bottomFrozenBodyDomContainer;
+        }
+        else if (col < table.frozenColCount) {
+            container = table.frozenBodyDomContainer;
+        }
+        else if (col >= table.colCount - table.rightFrozenColCount) {
+            container = table.rightFrozenBodyDomContainer;
+        }
+    }
+    else if (container === table.headerDomContainer) {
+        if (col < table.frozenColCount) {
+            container = table.frozenHeaderDomContainer;
+        }
+        else if (col >= table.colCount - table.rightFrozenColCount) {
+            container = table.rightFrozenHeaderDomContainer;
+        }
+    }
+    return container;
+}
+/**
+ * @description: 获取目标组
+ * @param {any} target
+ * @return {*}
+ */
+function getTargetGroup(target) {
+    while (target === null || target === void 0 ? void 0 : target.parent) {
+        if (target.name === CUSTOM_CONTAINER_NAME || (target.name || '').startsWith(CUSTOM_MERGE_PRE_NAME)) {
+            return target;
+        }
+        target = target.parent;
+    }
+    return { col: -1, row: -1, stage: null };
 }
 
 export { VTableVueAttributePlugin };