mthb-offscreen-canvas-table/lib/OffscreenCanvasTable/src/OffscreenCanvasTable.js

Canvas Table Webworker offscreencanvas

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const CanvasTableEdit_1 = require("../../share/CanvasTableEdit");
const CanvasTableTouchEvent_1 = require("../../share/CanvasTableTouchEvent");
const OffscreenCanvasTableMessage_1 = require("../../share/OffscreenCanvasTableMessage");
class OffscreenCanvasTable {
    constructor(offscreenCanvasTableId, worker, canvas) {
        this.canvasFocus = (ev) => {
            this.postMessage({
                focus: true,
                mthbCanvasTable: this.offscreenCanvasTableId,
                type: OffscreenCanvasTableMessage_1.OffscreenCanvasMesssageType.focus,
            });
        };
        this.canvasBlur = (ev) => {
            this.postMessage({
                focus: false,
                mthbCanvasTable: this.offscreenCanvasTableId,
                type: OffscreenCanvasTableMessage_1.OffscreenCanvasMesssageType.focus,
            });
        };
        this.canvasWheel = (e) => {
            e.preventDefault();
            this.postMessage({
                deltaMode: e.deltaMode,
                deltaX: e.deltaX,
                deltaY: e.deltaY,
                mthbCanvasTable: this.offscreenCanvasTableId,
                type: OffscreenCanvasTableMessage_1.OffscreenCanvasMesssageType.scroll,
            });
        };
        this.canvasDblClick = (e) => {
            e.preventDefault();
            //  this.dblClick(e.clientX - this.canvas.offsetLeft, e.clientY - this.canvas.offsetTop);
            this.postMessage({
                mthbCanvasTable: this.offscreenCanvasTableId,
                type: OffscreenCanvasTableMessage_1.OffscreenCanvasMesssageType.mouseDblClick,
                x: e.clientX - this.canvas.offsetLeft,
                y: e.clientY - this.canvas.offsetTop,
            });
        };
        this.canvasMouseDown = (e) => {
            e.preventDefault();
            this.canvas.focus();
            this.postMessage({
                mthbCanvasTable: this.offscreenCanvasTableId,
                type: OffscreenCanvasTableMessage_1.OffscreenCanvasMesssageType.mouseDown,
                x: e.clientX - this.canvas.offsetLeft,
                y: e.clientY - this.canvas.offsetTop,
            });
        };
        this.canvasMouseMove = (e) => {
            e.preventDefault();
            this.postMessage({
                mthbCanvasTable: this.offscreenCanvasTableId,
                type: OffscreenCanvasTableMessage_1.OffscreenCanvasMesssageType.mouseMove,
                x: e.clientX - this.canvas.offsetLeft,
                y: e.clientY - this.canvas.offsetTop,
            });
        };
        this.canvasMouseUp = (e) => {
            e.preventDefault();
            this.postMessage({
                mthbCanvasTable: this.offscreenCanvasTableId,
                type: OffscreenCanvasTableMessage_1.OffscreenCanvasMesssageType.mouseUp,
                x: e.clientX - this.canvas.offsetLeft,
                y: e.clientY - this.canvas.offsetTop,
            });
        };
        this.canvasMouseLeave = () => {
            this.postMessage({
                mthbCanvasTable: this.offscreenCanvasTableId,
                type: OffscreenCanvasTableMessage_1.OffscreenCanvasMesssageType.mouseLeave,
            });
        };
        this.canvasTouchStart = (e) => {
            e.preventDefault();
            this.postMessage({
                event: CanvasTableTouchEvent_1.TouchEventToCanvasTableTouchEvent(e),
                mthbCanvasTable: this.offscreenCanvasTableId,
                offsetLeft: this.canvas.offsetLeft,
                offsetTop: this.canvas.offsetTop,
                type: OffscreenCanvasTableMessage_1.OffscreenCanvasMesssageType.touchStart,
            });
        };
        this.canvasTouchMove = (e) => {
            e.preventDefault();
            this.postMessage({
                event: CanvasTableTouchEvent_1.TouchEventToCanvasTableTouchEvent(e),
                mthbCanvasTable: this.offscreenCanvasTableId,
                offsetLeft: this.canvas.offsetLeft,
                offsetTop: this.canvas.offsetTop,
                type: OffscreenCanvasTableMessage_1.OffscreenCanvasMesssageType.touchMove,
            });
        };
        this.canvasTouchEnd = (e) => {
            e.preventDefault();
            this.postMessage({
                event: CanvasTableTouchEvent_1.TouchEventToCanvasTableTouchEvent(e),
                mthbCanvasTable: this.offscreenCanvasTableId,
                offsetLeft: this.canvas.offsetLeft,
                offsetTop: this.canvas.offsetTop,
                type: OffscreenCanvasTableMessage_1.OffscreenCanvasMesssageType.touchEnd,
            });
        };
        this.canvasKeydown = (e) => {
            this.postMessage({
                keycode: e.keyCode,
                mthbCanvasTable: this.offscreenCanvasTableId,
                type: OffscreenCanvasTableMessage_1.OffscreenCanvasMesssageType.keyDown,
            });
        };
        this.canvasMouseUpExtended = (e) => {
            e.preventDefault();
            this.postMessage({
                mthbCanvasTable: this.offscreenCanvasTableId,
                type: OffscreenCanvasTableMessage_1.OffscreenCanvasMesssageType.mouseUpExtended,
                x: e.clientX - this.canvas.offsetLeft,
                y: e.clientY - this.canvas.offsetTop,
            });
        };
        this.canvasMouseMoveExtended = (e) => {
            e.preventDefault();
            this.postMessage({
                mthbCanvasTable: this.offscreenCanvasTableId,
                type: OffscreenCanvasTableMessage_1.OffscreenCanvasMesssageType.mouseMoveExtended,
                x: e.clientX - this.canvas.offsetLeft,
                y: e.clientY - this.canvas.offsetTop,
            });
        };
        this.workerMessage = (message) => {
            if (message.data.mthbCanvasTable !== this.offscreenCanvasTableId) {
                return;
            }
            const data = message.data;
            switch (data.type) {
                case OffscreenCanvasTableMessage_1.OffscreenCanvasMesssageType.askForExtentedMouseMoveAndMaouseUp:
                    this.canvas.removeEventListener("mousemove", this.canvasMouseMove);
                    this.canvas.removeEventListener("mouseup", this.canvasMouseUp);
                    window.addEventListener("mousemove", this.canvasMouseMoveExtended);
                    window.addEventListener("mouseup", this.canvasMouseUpExtended);
                    break;
                case OffscreenCanvasTableMessage_1.OffscreenCanvasMesssageType.askForNormalMouseMoveAndMaouseUp:
                    window.removeEventListener("mousemove", this.canvasMouseMoveExtended);
                    window.removeEventListener("mouseup", this.canvasMouseUpExtended);
                    this.canvas.addEventListener("mousemove", this.canvasMouseMove);
                    this.canvas.addEventListener("mouseup", this.canvasMouseUp);
                    break;
                case OffscreenCanvasTableMessage_1.OffscreenCanvasMesssageType.setCursor:
                    this.canvas.style.cursor = data.cursor;
                    break;
                case OffscreenCanvasTableMessage_1.OffscreenCanvasMesssageType.updateForEdit:
                    if (this.canvasTableEdit) {
                        this.canvasTableEdit.doRemove(true, undefined);
                    }
                    this.canvasTableEdit = new CanvasTableEdit_1.CanvasTableEdit(data.col, data.row, data.value, data.cellHeight, this.onEditRemove);
                    this.updateEditLocation(data.rect);
                    break;
                case OffscreenCanvasTableMessage_1.OffscreenCanvasMesssageType.locationForEdit:
                    this.updateEditLocation(data.rect);
                    break;
            }
        };
        this.onEditRemove = (cancel, newData, action) => {
            let row;
            let col;
            if (this.canvasTableEdit !== undefined) {
                col = this.canvasTableEdit.getColumn();
                row = this.canvasTableEdit.getRow();
            }
            this.canvasTableEdit = undefined;
            this.postMessage({
                action,
                cancel,
                col,
                mthbCanvasTable: this.offscreenCanvasTableId,
                newData,
                row,
                type: OffscreenCanvasTableMessage_1.OffscreenCanvasMesssageType.onEditRemoveUpdateForEdit,
            });
            if (action === undefined) {
                this.canvas.focus();
            }
        };
        if (typeof canvas === "string") {
            this.canvas = document.getElementById(canvas);
        }
        else {
            this.canvas = canvas;
        }
        const offscreen = this.canvas.transferControlToOffscreen();
        this.worker = worker;
        this.offscreenCanvasTableId = offscreenCanvasTableId;
        this.worker.postMessage({
            height: this.canvas.clientHeight,
            mthbCanvasTable: offscreenCanvasTableId,
            offscreen,
            r: window.devicePixelRatio,
            type: OffscreenCanvasTableMessage_1.OffscreenCanvasMesssageType.create,
            width: this.canvas.clientWidth,
        }, [offscreen]);
        this.canvas.addEventListener("blur", this.canvasBlur);
        this.canvas.addEventListener("focus", this.canvasFocus);
        this.canvas.addEventListener("wheel", this.canvasWheel);
        this.canvas.addEventListener("dblclick", this.canvasDblClick);
        this.canvas.addEventListener("mousedown", this.canvasMouseDown);
        this.canvas.addEventListener("mousemove", this.canvasMouseMove);
        this.canvas.addEventListener("mouseup", this.canvasMouseUp);
        this.canvas.addEventListener("mouseleave", this.canvasMouseLeave);
        this.canvas.addEventListener("touchstart", this.canvasTouchStart);
        this.canvas.addEventListener("touchmove", this.canvasTouchMove);
        this.canvas.addEventListener("touchend", this.canvasTouchEnd);
        this.canvas.addEventListener("keydown", this.canvasKeydown);
        window.addEventListener("resize", () => {
            this.resize();
        });
        worker.addEventListener("message", this.workerMessage);
    }
    expendAll() {
        this.postMessage({
            mthbCanvasTable: this.offscreenCanvasTableId,
            type: OffscreenCanvasTableMessage_1.OffscreenCanvasMesssageType.expendAll,
        });
    }
    collapseAll() {
        this.postMessage({
            mthbCanvasTable: this.offscreenCanvasTableId,
            type: OffscreenCanvasTableMessage_1.OffscreenCanvasMesssageType.collapseAll,
        });
    }
    setGroupBy(col) {
        this.postMessage({
            groupBy: col,
            mthbCanvasTable: this.offscreenCanvasTableId,
            type: OffscreenCanvasTableMessage_1.OffscreenCanvasMesssageType.setGroupBy,
        });
    }
    resize() {
        this.postMessage({
            height: this.canvas.clientHeight,
            mthbCanvasTable: this.offscreenCanvasTableId,
            r: window.devicePixelRatio,
            type: OffscreenCanvasTableMessage_1.OffscreenCanvasMesssageType.resize,
            width: this.canvas.clientWidth,
        });
    }
    updateEditLocation(rect) {
        if (!this.canvasTableEdit) {
            return;
        }
        const top = this.canvas.offsetTop + rect.y;
        const left = this.canvas.offsetLeft + rect.x;
        this.canvasTableEdit.updateEditLocation(top, left, rect.width, rect.cellHeight, rect.clipTop, rect.clipRight, rect.clipBottom, rect.clipLeft);
    }
    postMessage(data) {
        this.worker.postMessage(data);
    }
}
exports.OffscreenCanvasTable = OffscreenCanvasTable;