@visactor/vue-vtable
Version:
The vue version of VTable
416 lines (413 loc) • 17.5 kB
JavaScript
import { __rest } from 'tslib';
import { HtmlAttributePlugin, 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;
requestAnimationFrame(() => {
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;
requestAnimationFrame(() => {
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') {
return target;
}
target = target.parent;
}
return { col: -1, row: -1, stage: null };
}
export { VTableVueAttributePlugin };