e-virt-table/dist/lib/EventBrowser.js

A powerful data table based on canvas. You can use it as data grid、Microsoft Excel or Google sheets. It supports virtual scroll、cell edit etc.

export default class EventBrowser {
    constructor(ctx) {
        Object.defineProperty(this, "eventTasks", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: new Set()
        });
        Object.defineProperty(this, "ctx", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: void 0
        });
        this.ctx = ctx;
        this.init();
    }
    init() {
        this.bind(window, 'resize', this.handleResize.bind(this));
        this.bind(window, 'mouseup', this.handleMouseUp.bind(this));
        this.bind(window, 'mousemove', this.handleMousemove.bind(this));
        this.bind(window, 'blur', this.handleOutsideMousedown.bind(this));
        this.bind(window, 'mousedown', this.handleOutsideMousedown.bind(this));
        this.bind(this.ctx.stageElement, 'click', this.handleClick.bind(this));
        this.bind(window, 'keydown', this.handleKeydown.bind(this));
        this.bind(this.ctx.stageElement, 'wheel', this.handleWheel.bind(this), { passive: false });
        this.bind(this.ctx.stageElement, 'touchstart', this.handleTouchstart.bind(this), { passive: false });
        this.bind(this.ctx.stageElement, 'touchend', this.handleTouchend.bind(this));
        this.bind(this.ctx.stageElement, 'touchmove', this.handleTouchmove.bind(this), { passive: false });
        this.bind(this.ctx.stageElement, 'contextmenu', this.handleContextMenu.bind(this));
        this.bind(this.ctx.stageElement, 'mousedown', this.handleMouseDown.bind(this));
        this.bind(this.ctx.stageElement, 'dblclick', this.handleDblclick.bind(this));
        this.bind(this.ctx.stageElement, 'mouseover', this.handleMouseover.bind(this));
        this.bind(this.ctx.stageElement, 'mouseout', this.handleMouseout.bind(this));
        this.bind(document, 'selectionchange', this.selectionchange.bind(this));
    }
    selectionchange() {
        this.ctx.domSelectionStr = '';
        const selection = window.getSelection();
        if (selection && selection.toString()) {
            this.ctx.domSelectionStr = selection.toString();
        }
    }
    clearDomSelection() {
        const selection = window.getSelection();
        if (selection && !selection.isCollapsed) {
            selection.removeAllRanges();
        }
    }
    destroy() {
        const entries = Array.from(this.eventTasks);
        entries.forEach(({ target, name, fn, options }) => {
            this.unbind(target, name, fn, options);
        });
        this.eventTasks.clear();
    }
    handleResize(e) {
        this.ctx.emit('resetHeader', e);
        this.ctx.emit('resize', e);
    }
    handleMouseDown(e) {
        this.clearDomSelection();
        const _e = e;
        if (_e.button === 0) {
            this.ctx.mousedown = true;
        }
        this.ctx.emit('mousedown', e);
    }
    handleMousemove(e) {
        const _e = e;
        const rect = this.ctx.containerElement.getBoundingClientRect();
        const x = _e.clientX - rect.left;
        const y = _e.clientY - rect.top;
        this.ctx.mouseX = x;
        this.ctx.mouseY = y;
        this.ctx.emit('mousemove', e);
    }
    handleMouseUp(e) {
        const _e = e;
        if (_e.button === 0) {
            this.ctx.mousedown = false;
        }
        this.ctx.emit('mouseup', e);
    }
    handleClick(e) {
        this.ctx.emit('click', e);
    }
    handleKeydown(e) {
        const { ENABLE_KEYBOARD } = this.ctx.config;
        if (!ENABLE_KEYBOARD)
            return;
        if (!this.ctx.isTarget(e)) {
            return;
        }
        // 拖拽表头中不处理
        if (this.ctx.dragHeaderIng) {
            return;
        }
        this.ctx.emit('keydown', e);
    }
    handleWheel(e) {
        this.ctx.emit('wheel', e);
    }
    handleTouchstart(e) {
        this.ctx.emit('touchstart', e);
    }
    handleTouchend(e) {
        this.ctx.emit('touchend', e);
    }
    handleTouchmove(e) {
        this.ctx.emit('touchmove', e);
    }
    handleContextMenu(e) {
        e.preventDefault();
        this.ctx.emit('contextMenu', e);
    }
    handleMouseover(e) {
        this.ctx.isMouseoverTargetContainer = true;
        this.ctx.emit('mouseover', e);
    }
    handleMouseout(e) {
        this.ctx.isMouseoverTargetContainer = false;
        this.ctx.emit('mouseout', e);
    }
    handleDblclick(e) {
        this.ctx.emit('dblclick', e);
    }
    handleOutsideMousedown(e) {
        if (this.ctx.selector.enable &&
            (e.target instanceof Window || (e.target instanceof Node && !this.ctx.containerElement.contains(e.target)))) {
            this.ctx.emit('outsideMousedown', e);
        }
    }
    bind(target, name, fn, options) {
        target.addEventListener(name, fn, options);
        this.eventTasks.add({ target, name, fn, options });
    }
    unbind(target, name, fn, options) {
        target.removeEventListener(name, fn, options);
        for (const entry of this.eventTasks) {
            if (entry.target === target && entry.name === name && entry.fn === fn) {
                this.eventTasks.delete(entry);
                break;
            }
        }
    }
}
//# sourceMappingURL=EventBrowser.js.map