vibe-editor 0.0.3 → 0.0.5

package/src/scripts/js/scripts/handlers/WindowHandler.js

@@ -0,0 +1,278 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cq = require("../utils/convenienceQueries");
+const meiConverter = require("../utils/MEIConverter");
+class WindowHandler {
+    constructor() {
+        /**
+         * Update all elements that are affected by a window size change
+         */
+        this.scrollingTimer = new Array();
+        this.updateFunction = this.update.bind(this);
+        /**
+         * Reload svg when registered events ended
+         */
+        this.reloadTimer = new Array();
+        this.reloadSVGFunction = this.reloadSVG.bind(this);
+        this.toggleCTRLFunction = this.toggleCTRL.bind(this);
+        this.deltaTemp = 1;
+        this.zoomTimer = new Array();
+        this.wheelZoomFunction = this.wheelZoom.bind(this);
+        this.clickZoomFunction = this.clickZoom.bind(this);
+        this.cacheContainerAttrFunction = this.cacheContainerAttr.bind(this);
+        this.loadContainerAttrFunction = this.loadContainerAttr.bind(this);
+        this.ctrlPressed = false;
+        this.w = window;
+        while (this.w !== this.w.parent) {
+            this.w = this.w.parent;
+        }
+    }
+    setListeners() {
+        this.eventContainer = this.container;
+        window.addEventListener("scroll", this.updateFunction);
+        //window.addEventListener("resize", this.update)
+        this.w.addEventListener("resize", this.reloadSVGFunction);
+        this.w.addEventListener("deviceorientation", this.updateFunction);
+        this.eventContainer.querySelector("#sidebarContainer").addEventListener("transitionend", this.updateFunction);
+        this.eventContainer.querySelector("#sidebarContainer").addEventListener("transitionend", this.reloadSVGFunction);
+        this.eventContainer.querySelector("#sidebarContainer").addEventListener("resizemove", this.updateFunction);
+        this.eventContainer.querySelector("#sidebarContainer").addEventListener("resizemove", this.reloadSVGFunction);
+        this.vrvSVG.addEventListener("scroll", this.updateFunction);
+        //this.vrvSVG.addEventListener("resize", this.update)
+        this.vrvSVG.addEventListener("deviceorientation", this.updateFunction);
+        document.addEventListener("fullscreenchange", this.updateFunction);
+        this.eventContainer.addEventListener("wheel", this.wheelZoomFunction);
+        this.eventContainer.querySelectorAll("#zoomGroup > button").forEach(b => b.addEventListener("click", this.clickZoomFunction));
+        document.addEventListener("keydown", this.toggleCTRLFunction);
+        document.addEventListener("keyup", this.toggleCTRLFunction);
+        this.eventContainer.addEventListener("loadingStart", this.cacheContainerAttrFunction);
+        this.eventContainer.addEventListener("loadingEnd", this.loadContainerAttrFunction);
+        return this;
+    }
+    removeListeners() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        window.removeEventListener("scroll", this.updateFunction);
+        this.w.removeEventListener("resize", this.updateFunction);
+        this.w.removeEventListener("resize", this.reloadSVGFunction);
+        this.w.removeEventListener("deviceorientation", this.updateFunction);
+        (_a = this.eventContainer) === null || _a === void 0 ? void 0 : _a.querySelector("#sidebarContainer").removeEventListener("transitionend", this.updateFunction);
+        (_b = this.eventContainer) === null || _b === void 0 ? void 0 : _b.querySelector("#sidebarContainer").removeEventListener("transitionend", this.reloadSVGFunction);
+        (_c = this.eventContainer) === null || _c === void 0 ? void 0 : _c.querySelector("#sidebarContainer").removeEventListener("resizemove", this.updateFunction);
+        (_d = this.eventContainer) === null || _d === void 0 ? void 0 : _d.querySelector("#sidebarContainer").removeEventListener("resizemove", this.reloadSVGFunction);
+        this.vrvSVG.removeEventListener("scroll", this.updateFunction);
+        //this.vrvSVG.removeEventListener("resize", this.update)
+        this.vrvSVG.removeEventListener("deviceorientation", this.updateFunction);
+        document.removeEventListener("fullscreenchange", this.updateFunction);
+        (_e = this.eventContainer) === null || _e === void 0 ? void 0 : _e.removeEventListener("wheel", this.wheelZoomFunction);
+        (_f = this.eventContainer) === null || _f === void 0 ? void 0 : _f.querySelectorAll("#zoomGroup > button").forEach(b => b.removeEventListener("click", this.clickZoomFunction));
+        document.removeEventListener("keydown", this.toggleCTRLFunction);
+        document.removeEventListener("keyup", this.toggleCTRLFunction);
+        (_g = this.eventContainer) === null || _g === void 0 ? void 0 : _g.removeEventListener("loadingStart", this.cacheContainerAttrFunction);
+        (_h = this.eventContainer) === null || _h === void 0 ? void 0 : _h.removeEventListener("loadingEnd", this.loadContainerAttrFunction);
+        return this;
+    }
+    update(e) {
+        var _a;
+        // special rule for transition events since so much with different propertynames are fired
+        if (e instanceof TransitionEvent) {
+            if (!e.propertyName.includes("width"))
+                return;
+        }
+        var that = this;
+        (_a = this.scrollingTimer) === null || _a === void 0 ? void 0 : _a.forEach(s => clearTimeout(s));
+        this.scrollingTimer.push(setTimeout(function () {
+            var _a, _b, _c, _d;
+            that.updateXY();
+            (_a = that.m2s) === null || _a === void 0 ? void 0 : _a.update();
+            (_b = that.annotations) === null || _b === void 0 ? void 0 : _b.updateCanvas();
+            (_d = (_c = that.insertModeHandler) === null || _c === void 0 ? void 0 : _c.getPhantomNoteHandler()) === null || _d === void 0 ? void 0 : _d.resetCanvas();
+            that.scrollingTimer = new Array();
+        }, 500));
+    }
+    reloadSVG(e) {
+        var _a;
+        var t = e.target;
+        var that = this;
+        (_a = this.reloadTimer) === null || _a === void 0 ? void 0 : _a.forEach(r => clearTimeout(r));
+        if (t.id === "sidebarContainer" && !(e.propertyName.includes("width"))) {
+            // Timeout is needed to ensure, that transition has been completed and in eventphase 0
+            // Must be a slighty longer than transitiontime
+            this.reloadTimer.push(setTimeout(function () {
+                that.updateXY();
+                var mei = meiConverter.restoreXmlIdTags(that.currentMEI);
+                that.loadDataCallback("", mei, false, null);
+                that.reloadTimer = new Array();
+            }, e.elapsedTime * 1000 + 10));
+        }
+        else if (e.type === "resize" || e.type === "resizemove" || t.id.startsWith("zoom")) {
+            this.reloadTimer.push(setTimeout(function () {
+                that.updateXY();
+                var mei = meiConverter.restoreXmlIdTags(that.currentMEI);
+                that.loadDataCallback("", mei, false, null);
+                that.reloadTimer = new Array();
+            }, 500));
+        }
+    }
+    /**
+     * Toggle ctrl or meta button. Is used to activte zoom function
+     * @param e
+     */
+    toggleCTRL(e) {
+        if (e.key === "Meta" || e.key === "Control") {
+            if (e.type === "keydown") {
+                this.ctrlPressed = true;
+            }
+            else {
+                this.ctrlPressed = false;
+            }
+        }
+    }
+    /**
+     * Zoom according to movement of mouse wheel (also applies to two finger scroll gesture on trackpad).
+     * Can only be executed when container is active Element and when ctrl/meta is pressed.
+     * The scale is accumulated with every call of this method.
+     * @param e
+     * @returns
+     */
+    wheelZoom(e) {
+        this.updateXY();
+        if (!cq.hasActiveElement(this.containerId))
+            return;
+        if (!this.ctrlPressed)
+            return;
+        e.preventDefault();
+        this.deltaTemp = this.deltaTemp + e.deltaY / 1000;
+        this.zoomSVG(this.deltaTemp);
+    }
+    /**
+     * Zoom when Zoombuttons are clicked (In div #zoomGroup).
+     *
+     * @param e
+     */
+    clickZoom(e) {
+        var t = e.target;
+        if (t.id === "zoomInBtn") {
+            this.deltaTemp = this.deltaTemp + 100 / 1000;
+        }
+        else if (t.id === "zoomOutBtn") {
+            this.deltaTemp = this.deltaTemp - 100 / 1000;
+        }
+        this.zoomSVG(this.deltaTemp);
+    }
+    /**
+     * General zoom logic for all top level svgs (interactionOverlay + vrvSVG (= rendered score by verovio))
+     * @param delta
+     */
+    zoomSVG(delta) {
+        var _a;
+        var that = this;
+        // ensure that with every call of all obsolete timeouts are deleted so that only one is left to be executed
+        (_a = this.zoomTimer) === null || _a === void 0 ? void 0 : _a.forEach(zt => clearTimeout(zt));
+        this.zoomTimer.push(setTimeout(function () {
+            var svgContainer = cq.getContainer(that.containerId).querySelector("#svgContainer");
+            svgContainer.querySelectorAll("#interactionOverlay, #vrvSVG").forEach((el) => {
+                el.style.transformOrigin = "0 0";
+                el.style.transform = "scale(" + delta.toString() + ")";
+                // if(el.id === "interactionOverlay"){
+                //     const transformValue = window.getComputedStyle(el).getPropertyValue('transform');
+                //     const matrix = new DOMMatrix(transformValue);
+                //     const scaleX = matrix.a;
+                //     const scaleY = matrix.d;
+                //     var vbsplit = el.getAttribute("viewBox").split(" ")
+                //     var newVb = new Array<string>()
+                //     vbsplit.forEach((n, i) => {
+                //         if(i === 2){
+                //             newVb.push((parseFloat(n)/scaleX).toString())
+                //         }else if(i === 3){
+                //             newVb.push((parseFloat(n)/scaleY).toString())
+                //         }else{
+                //             newVb.push((parseFloat(n)).toString())
+                //         }
+                //     })
+                //     el.setAttribute("viewBox", newVb.join(" "))
+                // }
+            });
+        }, 10));
+    }
+    /**
+     * Cache container attributes that need to be loaded after the score is loaded.
+     * - Scorllpositions of the containers
+     *
+     * Listens to "loadStart" Event in Core class
+     * @param e Event
+     */
+    cacheContainerAttr(e) {
+        this.divScrolls = new Map();
+        var container = document.getElementById(this.containerId);
+        container.querySelectorAll(":scope div").forEach(d => {
+            this.divScrolls.set(d.id, { sl: d.scrollLeft, st: d.scrollTop });
+        });
+    }
+    /**
+     * Load all container attributes saved in @function cacheContainerAttr after score is loaded.
+     * Listens to "loadEnd" Event in Core class
+     * @param e Event
+     * @returns
+     */
+    loadContainerAttr(e) {
+        var _a;
+        if (this.divScrolls == undefined)
+            return;
+        for (const [key, value] of this.divScrolls.entries()) {
+            (_a = document.getElementById(key)) === null || _a === void 0 ? void 0 : _a.scrollTo(value.sl, value.st);
+        }
+    }
+    /**
+     * Set X and Y coordinates of the current boundingbox of the of the VerovioScore (#vrvSVG)
+     */
+    updateXY() {
+        var _a;
+        var bb = (_a = document.getElementById(this.containerId)) === null || _a === void 0 ? void 0 : _a.querySelector("#vrvSVG").getBoundingClientRect();
+        this.x = bb.x;
+        this.y = bb.y;
+    }
+    resetListeners() {
+        this
+            .removeListeners()
+            .setListeners();
+        return this;
+    }
+    setm2s(m2s) {
+        this.m2s = m2s;
+        return this;
+    }
+    setAnnotations(annotations) {
+        this.annotations = annotations;
+        return this;
+    }
+    setCurrentMEI(mei) {
+        this.currentMEI = mei;
+        return this;
+    }
+    setContainerId(containerId) {
+        this.containerId = containerId;
+        this.container = document.getElementById(this.containerId);
+        this.interactionOverlay = cq.getInteractOverlay(this.containerId);
+        this.vrvSVG = cq.getVrvSVG(this.containerId);
+        return this;
+    }
+    setInsertModeHandler(imh) {
+        this.insertModeHandler = imh;
+        return this;
+    }
+    setLoadDataCallback(loadDataCallback) {
+        this.loadDataCallback = loadDataCallback;
+        return this;
+    }
+    setSVGReloadCallback(svgReloadCallback) {
+        this.svgReloadCallback = svgReloadCallback;
+        return this;
+    }
+    getX() {
+        return this.x;
+    }
+    getY() {
+        return this.y;
+    }
+}
+exports.default = WindowHandler;