@visactor/vue-vtable
Version:
The vue version of VTable
642 lines (639 loc) • 24.3 kB
JavaScript
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';
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) {
var _a;
if (!this.checkNeedRender(graphic)) {
return;
}
// 缓存命中时同步渲染：立即更新 renderId，防止 clearCacheContainer 误清
const opts = this.getGraphicOptions(graphic);
if (opts) {
const targetMap = (_a = this.htmlMap) === null || _a === void 0 ? void 0 : _a[opts.id];
if (targetMap && this.checkDom(targetMap.wrapContainer)) {
this.doRenderGraphic(graphic);
return;
}
}
// 无缓存或 DOM 不在文档中，走异步渲染队列
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.graphic = graphic;
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 };