vibe-editor 0.0.3 → 0.0.5

package/package.json

@@ -1,63 +1,67 @@
 {
-    "name": "vibe-editor",
-    "version": "0.0.3",
-    "main": "src/scripts/js/VIBE.js",
-    "keywords": [],
-    "author": "Matthias Nowakowski",
-    "license": "MIT",
-    "browserslist": [
-        "since 2017-06"
-    ],
-    "scripts": {
-        "build": "./node_modules/.bin/webpack --mode=production"
-    },
-    "files": [
-        "src/images/*/*",
-        "src/scripts/js/*",
-        "src/fonts/*",
-        "src/styles/*.css"
-    ],
-    "dependencies": {
-        "@babel/plugin-transform-classes": "^7.16.7",
-        "@babel/preset-env": "^7.16.11",
-        "@popperjs/core": "^2.11.6",
-        "@tonejs/midi": "^2.0.28",
-        "@types/react": "^18.2.28",
-        "@types/react-dom": "^18.2.13",
-        "axios": "^1.4.0",
-        "babel": "^6.23.0",
-        "babel-loader": "^8.2.3",
-        "bootstrap": "^5.1.3",
-        "brotli-webpack-plugin": "^1.1.0",
-        "buffer": "^5.7.1",
-        "compression-webpack-plugin": "^9.2.0",
-        "css-loader": "^6.7.1",
-        "d3": "^5.11.0",
-        "esbuild": "0.17.14",
-        "eslint-plugin-react-hooks": "^4.6.0",
-        "file-loader": "^6.2.0",
-        "h5p-lib-controls": "^0.0.15",
-        "interactjs": "1.10.11",
-        "midi-player-js": "^2.0.16",
-        "mini-css-extract-plugin": "^2.6.0",
-        "node-sass": "^7.0.1",
-        "postcss-loader": "^6.2.1",
-        "react-color": "^2.19.3",
-        "react-dom": "^18.2.0",
-        "sass-loader": "^12.6.0",
-        "soundfont-player": "^0.12.0",
-        "style-loader": "^3.3.1",
-        "tone": "^14.7.77",
-        "typescript": "4.6.3",
-        "update": "^0.7.4",
-        "web-midi-api": "^2.2.5",
-        "webpack": "^5.88.2",
-        "webpack-bundle-analyzer": "^4.5.0",
-        "webpack-cli": "^4.9.2"
-    },
-    "devDependencies": {
-        "@types/verovio": "^3.13.0",
-        "raw-loader": "^4.0.2",
-        "url-loader": "^4.1.1"
-    }
+  "name": "vibe-editor",
+  "version": "0.0.5",
+  "main": "src/scripts/js/scripts/VIBE.js",
+  "keywords": [],
+  "author": "Matthias Nowakowski",
+  "license": "MIT",
+  "browserslist": [
+    "since 2017-06"
+  ],
+  "scripts": {
+    "build": "./node_modules/.bin/webpack --mode=development",
+    "watch": "./node_modules/.bin/webpack --watch"
+  },
+  "files": [
+    "src/images/*/*",
+    "src/scripts/js/*",
+    "src/fonts/*"
+  ],
+  "dependencies": {
+    "@babel/plugin-transform-classes": "^7.16.7",
+    "@babel/preset-env": "^7.16.11",
+    "@popperjs/core": "^2.11.6",
+    "@tonejs/midi": "^2.0.28",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "axios": "^1.4.0",
+    "babel": "^6.23.0",
+    "babel-loader": "^8.2.3",
+    "bootstrap": "^5.1.3",
+    "brotli-webpack-plugin": "^1.1.0",
+    "buffer": "^5.7.1",
+    "compression-webpack-plugin": "^9.2.0",
+    "css-loader": "^6.7.1",
+    "d3": "^5.11.0",
+    "esbuild": "0.17.14",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "file-loader": "^6.2.0",
+    "h5p-lib-controls": "^0.0.15",
+    "html-webpack-plugin": "^5.6.0",
+    "interactjs": "1.10.11",
+    "midi-player-js": "^2.0.16",
+    "mini-css-extract-plugin": "^2.6.0",
+    "node-sass": "^7.0.1",
+    "postcss-loader": "^6.2.1",
+    "react-color": "^2.19.3",
+    "react-dom": "^18.2.0",
+    "sass-loader": "^12.6.0",
+    "soundfont-player": "^0.12.0",
+    "style-loader": "^3.3.1",
+    "svg-url-loader": "^8.0.0",
+    "tone": "^14.7.77",
+    "ts-loader": "^9.5.1",
+    "typescript": "4.6.3",
+    "update": "^0.7.4",
+    "web-midi-api": "^2.2.5",
+    "webpack": "^5.88.2",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "^4.9.2"
+  },
+  "devDependencies": {
+    "@types/verovio": "^3.13.0",
+    "raw-loader": "^4.0.2",
+    "url-loader": "^4.1.1"
+  },
+  "description": "Current version in npm repo: ![npm](https://img.shields.io/npm/v/vibe-editor)"
 }

package/src/scripts/js/Core.js

@@ -194,7 +194,7 @@ class Core {
             return new Promise((resolve, reject) => {
                 var _a;
                 var message = {
-                    id: (0, random_1.uuidv4)(),
+                    id: random_1.uuidv4(),
                     action: 'renderToSVG',
                     pageNo: pageNo
                 };
@@ -224,12 +224,18 @@ class Core {
                 pageElement.setAttribute("preserveAspectRatio", "xMinYMin meet");
                 var systemHeigth = pageElement.querySelector(".system").getBoundingClientRect().height;
                 systemHeigth += systemHeigth * 0.2;
-                that.verovioWrapper.setHeightValue(systemHeigth);
-                if (options === null || options === void 0 ? void 0 : options.widthFactor) {
-                    console.log("pageW before", that.verovioWrapper.getOptions().pageWidth);
-                    that.verovioWrapper.setWidthValue(parseFloat(that.verovioWrapper.getOptions().pageWidth) * options.widthFactor);
-                    console.log("pageW after", that.verovioWrapper.getOptions().pageWidth);
-                }
+                //that.verovioWrapper.setHeightValue(systemHeigth)
+                // if(!options){
+                //   options = {}
+                // }
+                // options.widthFactor = (that.container as HTMLElement).clientWidth / screen.availWidth
+                // if (options?.widthFactor) {
+                //   console.log("pageW before", that.verovioWrapper.getOptions().pageWidth)
+                //   that.verovioWrapper.setWidthValue(
+                //     parseFloat(that.verovioWrapper.getOptions().pageWidth) * options.widthFactor
+                //   )
+                //   console.log("pageW after", that.verovioWrapper.getOptions().pageWidth)
+                // }
                 resolve();
             });
         }
@@ -307,7 +313,7 @@ class Core {
         }
         //just render the data once to make pagecount accessible
         var message = {
-            id: (0, random_1.uuidv4)(),
+            id: random_1.uuidv4(),
             action: 'renderData',
             mei: d,
             isUrl: u
@@ -405,11 +411,24 @@ class Core {
             this.containerId = container.id;
             this.verovioWrapper = this.verovioWrapper || new VerovioWrapper_1.default();
             var waitingFlag = "waiting";
-            // if (cq.getVrvSVG(this.containerId) !== null) {
-            //   document.body.classList.add(waitingFlag)
-            // }
             // svg has to be loaded into verovio anyway 
             this.sendDataToVerovio(data, isUrl);
+            this.interactionOverlay = cq.getInteractOverlay(this.containerId);
+            // get most right standing canvas in interactionOverlay
+            let rightMostElement = this.interactionOverlay;
+            let rightCoord = 0;
+            this.container.querySelectorAll("#interactionOverlay > *, #vrvSVG > svg > *").forEach(c => {
+                let bbox = c.getBoundingClientRect();
+                if (bbox.x + bbox.width > rightCoord) {
+                    rightCoord = bbox.x + bbox.width;
+                    rightMostElement = c;
+                }
+            });
+            var sizeRatio = ((this.container.getBoundingClientRect().width / this.interactionOverlay.getBoundingClientRect().width) + 2) * 100; //rightMostElement.getBoundingClientRect().width * 60 
+            if (!sizeRatio || sizeRatio <= 0) {
+                sizeRatio = 100;
+            }
+            this.container.querySelector("#svgContainer").style.width = sizeRatio.toString() + "%";
             document.getElementById(this.containerId).dispatchEvent(new Event("loadingStart"));
             this.svgEditor.setContainerId(this.containerId);
             this.svgEditor.cacheClasses().cacheScales().cacheStyles();
@@ -549,7 +568,7 @@ class Core {
         return new Promise((resolve, reject) => {
             const message = {
                 action: "getMEI",
-                id: (0, random_1.uuidv4)()
+                id: random_1.uuidv4()
             };
             var response;
             response = this.verovioWrapper.setMessage(message);
@@ -566,7 +585,7 @@ class Core {
         return new Promise((resolve, reject) => {
             const message = {
                 action: "renderToMidi",
-                id: (0, random_1.uuidv4)()
+                id: random_1.uuidv4()
             };
             var response = this.verovioWrapper.setMessage(message);
             if (response.midi) {

package/src/scripts/js/entry.js

@@ -1,5 +1,6 @@
-import VIBE from "./VIBE.js"
-
-export default function createEditor(container, options, meiCallback){
-    return new VIBE(container, options, meiCallback)
-}
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const VIBE_1 = require("./scripts/VIBE");
+require("./styles/vibe.css");
+const container = document.getElementById("vse-container1");
+var vse = new VIBE_1.default(container, null, null);

package/src/scripts/js/gui/Annotations.js

@@ -150,6 +150,7 @@ class Annotations {
             b.addEventListener("click", this.clickAnnotTextHandler);
         });
         harmonyButton === null || harmonyButton === void 0 ? void 0 : harmonyButton.addEventListener("click", this.clickHarmonyBtnHandler);
+        //window.addEventListener("resize", this.resizeHandler)
         return this;
     }
     removeListeners() {
@@ -159,6 +160,7 @@ class Annotations {
             b.removeEventListener("click", this.clickAnnotTextHandler);
         });
         harmonyButton === null || harmonyButton === void 0 ? void 0 : harmonyButton.removeEventListener("click", this.clickHarmonyBtnHandler);
+        //window.removeEventListener("resize", this.resizeHandler)
     }
     setTextListeners() {
         // this.customAnnotationDrawer = new CustomAnnotationShapeDrawer(this.containerId)
@@ -290,9 +292,23 @@ class Annotations {
         var pt = coordinates.transformToDOMMatrixCoordinates(e.clientX, e.clientY, cq.getInteractOverlay(this.containerId));
         var posx = pt.x; //matrixTransform(rootMatrix).x //e.pageX - this.rootBBox.x - window.pageXOffset
         var posy = pt.y; //matrixTransform(rootMatrix).y //e.pageY - this.rootBBox.y - window.pageYOffset
-        var annotationTarget = this.m2s.findScoreTarget(posx, posy, false);
+        var staves = this.interactionOverlay.querySelectorAll(".staff");
+        var tempDist = Math.pow(10, 10);
+        var annotationTarget = this.m2s.findScoreTarget(posx, posy, false, null, ["mRest"]);
+        if (!annotationTarget) {
+            var annotationCoords;
+            staves.forEach(s => {
+                var coord = coordinates.getDOMMatrixCoordinates(s, this.interactionOverlay);
+                var dist = Math.sqrt(Math.abs(coord.x - posx) ** 2 + Math.abs(coord.y - posy) ** 2);
+                if (dist < tempDist) {
+                    tempDist = dist;
+                    annotationTarget = this.vrvSVG.querySelector("#" + s.getAttribute("refId"));
+                    annotationCoords = coord;
+                }
+            });
+        }
         var textGroup = document.createElementNS(constants_1.constants._SVGNS_, "g");
-        textGroup.setAttribute("id", (0, random_1.uuidv4)());
+        textGroup.setAttribute("id", random_1.uuidv4());
         textGroup.setAttribute("targetId", annotationTarget.id);
         var text = document.createElementNS(constants_1.constants._SVGNS_, "svg");
         if (isLinked)
@@ -318,21 +334,22 @@ class Annotations {
         var foW = (50 + 2 * rectPadding + 50).toString();
         textForeignObject.setAttribute("x", foX);
         textForeignObject.setAttribute("y", foY);
-        textForeignObject.setAttribute("height", foH);
-        textForeignObject.setAttribute("width", foW);
+        // textForeignObject.style.height = foH + "px" //setAttribute("height", foH)
+        // textForeignObject.style.width = foW + "px" //setAttribute("width", foW)
         if (isLinked) {
             var line = document.createElementNS(constants_1.constants._SVGNS_, "line");
             line.classList.add("annotLine");
+            const targetCoords = annotationCoords || annotationTarget;
             const lX2 = textForeignObject.x.baseVal.valueAsString;
             const lY2 = textForeignObject.y.baseVal.valueAsString;
-            const lX1 = annotationTarget.x.toString();
-            const lY1 = annotationTarget.y.toString();
+            const lX1 = targetCoords.x.toString();
+            const lY1 = targetCoords.y.toString();
             line.setAttribute("x2", lX2);
             line.setAttribute("y2", lY2);
             line.setAttribute("x1", lX1);
             line.setAttribute("y1", lY1);
-            const xDiff = parseFloat(lX1) - parseFloat(lX2);
-            const yDiff = parseFloat(lY1) - parseFloat(lY2);
+            const xDiff = parseFloat(lX2) - parseFloat(lX1); //parseFloat(lX1) - parseFloat(lX2)
+            const yDiff = parseFloat(lY2) - parseFloat(lY1); //parseFloat(lY1) - parseFloat(lY2)
             line.setAttribute("x-diff", xDiff.toString());
             line.setAttribute("y-diff", yDiff.toString());
             line.classList.add("annotLine");
@@ -343,10 +360,8 @@ class Annotations {
         var newAnnot = {
             sourceID: textGroup.id,
             targetID: annotationTarget.id,
-            // relativePos: {
-            //     x: textGroup.getBoundingClientRect().x - annotationTarget.getBoundingClientRect().x, 
-            //     y: textGroup.getBoundingClientRect().y - annotationTarget.getBoundingClientRect().y
-            // }
+            originalWidth: "200",
+            originalHeight: "100",
         };
         this.annotations.push(newAnnot);
         this.annotationCanvas.appendChild(textGroup);
@@ -438,7 +453,7 @@ class Annotations {
                 return;
             var foreignObject = source.querySelector(".annotFO");
             const targetBbox = target.getBoundingClientRect();
-            const targetPt = coordinates.transformToDOMMatrixCoordinates(targetBbox.x, targetBbox.y, cq.getInteractOverlay(this.containerId).querySelector("#annotationCanvas"));
+            const targetPt = coordinates.transformToDOMMatrixCoordinates(targetBbox.x, targetBbox.y, cq.getInteractOverlay(this.containerId)); //.querySelector("#annotationCanvas"))
             var line = source.querySelector("line");
             const xSource = targetPt.x + parseFloat(line.getAttribute("x-diff"));
             const ySource = targetPt.y + parseFloat(line.getAttribute("y-diff"));

package/src/scripts/js/gui/ScoreManipulator.js

@@ -67,7 +67,7 @@ class ScoreManipulator {
     }
     drawMeasureManipulators() {
         this.lastBline = Array.from(this.vrvSVG.querySelectorAll(".barLine")).reverse()[0].querySelector("path");
-        var lastBlineRect = (0, coordinates_1.getDOMMatrixCoordinates)(this.lastBline, this.vrvSVG);
+        var lastBlineRect = coordinates_1.getDOMMatrixCoordinates(this.lastBline, this.vrvSVG);
         var blineTopAdder = lastBlineRect.top;
         var blineTopRemover = lastBlineRect.top + lastBlineRect.height / 2;
         var blineRight = lastBlineRect.right;
@@ -111,17 +111,19 @@ class ScoreManipulator {
         this.vrvSVG.querySelectorAll(".page").forEach(p => {
             p.querySelector(".measure").querySelectorAll(".staff").forEach(staff => {
                 var _a;
-                var bbox = (0, coordinates_1.getDOMMatrixCoordinates)(staff.querySelector(".staffLine"), this.vrvSVG); //staff.querySelector(".staffLine").getBoundingClientRect()
+                var bbox = coordinates_1.getDOMMatrixCoordinates(staff.querySelector(".staffLine"), this.vrvSVG); //staff.querySelector(".staffLine").getBoundingClientRect()
                 var x = bbox.left; //- rootBBox.x
                 var yTop = bbox.top; //- rootBBox.y
-                var yBottom = (0, coordinates_1.getDOMMatrixCoordinates)(Array.from(staff.querySelectorAll(".staffLine")).reverse()[0], this.vrvSVG).bottom; //Array.from(staff.querySelectorAll(".staffLine")).reverse()[0].getBoundingClientRect().bottom - rootBBox.y
+                var yBottom = coordinates_1.getDOMMatrixCoordinates(Array.from(staff.querySelectorAll(".staffLine")).reverse()[0], this.vrvSVG).bottom; //Array.from(staff.querySelectorAll(".staffLine")).reverse()[0].getBoundingClientRect().bottom - rootBBox.y
                 var staffHeight = (yBottom - yTop);
                 yTop -= staffHeight * 0.20; // center the boxes
                 var btnHeight = (staffHeight / 4) * 1.5;
                 for (let i = 0; i < 4; i++) {
                     var btn = document.createElementNS("http://www.w3.org/2000/svg", "svg");
                     var btnRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-                    var btnText = document.createElementNS("http://www.w3.org/2000/svg", "text");
+                    var btnFO = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
+                    var btnText = document.createElement("div");
+                    btnFO.append(btnText);
                     btnText.textContent = (i + 1).toString();
                     btn.setAttribute("x", "3px");
                     btn.setAttribute("y", (yTop + btnHeight * i).toString());
@@ -133,10 +135,10 @@ class ScoreManipulator {
                     btn.setAttribute("btnN", (i + 1).toString());
                     btn.setAttribute("id", "voiceSelect-" + staff.getAttribute("n") + "-" + (i + 1).toString());
                     //btnText is relative to btn
-                    btnText.setAttribute("x", "30%");
-                    btnText.setAttribute("y", "80%");
+                    var fontSize = btnHeight;
+                    btnText.style.fontSize = fontSize.toString() + "px";
                     btn.append(btnRect);
-                    btn.append(btnText);
+                    btn.append(btnFO);
                     (_a = this.interactionOverlay.querySelector("#manipulatorCanvas")) === null || _a === void 0 ? void 0 : _a.append(btn);
                 }
             });
@@ -155,18 +157,18 @@ class ScoreManipulator {
         var width;
         var height;
         if (navigator.userAgent.toLowerCase().indexOf("firefox") != -1) {
-            bbox = (0, coordinates_1.getDOMMatrixCoordinates)(referenceStaff, this.vrvSVG); //referenceStaff.querySelector(".staffLine").getBoundingClientRect()
+            bbox = coordinates_1.getDOMMatrixCoordinates(referenceStaff, this.vrvSVG); //referenceStaff.querySelector(".staffLine").getBoundingClientRect()
             x = bbox.left;
             yTop = bbox.top;
-            yBottom = (0, coordinates_1.getDOMMatrixCoordinates)(Array.from(referenceStaff.querySelectorAll(".staffLine")).reverse()[0], this.vrvSVG).bottom; //Array.from(referenceStaff.querySelectorAll(".staffLine")).reverse()[0].getBoundingClientRect().bottom
+            yBottom = coordinates_1.getDOMMatrixCoordinates(Array.from(referenceStaff.querySelectorAll(".staffLine")).reverse()[0], this.vrvSVG).bottom; //Array.from(referenceStaff.querySelectorAll(".staffLine")).reverse()[0].getBoundingClientRect().bottom
         }
         else {
-            bbox = bbox = (0, coordinates_1.getDOMMatrixCoordinates)(referenceStaff.querySelector(".clef"), this.vrvSVG); //referenceStaff.querySelector(".clef").getBoundingClientRect()
+            bbox = bbox = coordinates_1.getDOMMatrixCoordinates(referenceStaff.querySelector(".clef"), this.vrvSVG); //referenceStaff.querySelector(".clef").getBoundingClientRect()
             x = bbox.left;
             yTop = bbox.top;
             yBottom = bbox.bottom;
         }
-        const clefCoords = (0, coordinates_1.getDOMMatrixCoordinates)(referenceStaff.querySelector(".clef"), this.vrvSVG);
+        const clefCoords = coordinates_1.getDOMMatrixCoordinates(referenceStaff.querySelector(".clef"), this.vrvSVG);
         //height = referenceStaff.querySelector(".clef").getBoundingClientRect().height
         //width = referenceStaff.querySelector(".clef").getBoundingClientRect().width
         return { x: x, yTop: yTop, yBottom: yBottom, width: clefCoords.width, height: clefCoords.height };

package/src/scripts/js/gui/Tabbar.js

@@ -46,12 +46,22 @@ class Tabbar {
         this.exclusiveSelectHandler = (function exclusiveSelectHandler(e) {
             this.exclusiveSelect(e);
         }).bind(this);
-        this.styleCache = new Map();
         this.sidebarHandler = (function sidebarHandler(e) {
             var _a, _b;
             //toggle
             var that = this;
             var elParent;
+            // initial style caching
+            if (!this.styleCache) {
+                this.styleCache = new Map();
+                Array.from(cq.getContainer(this.containerId).querySelectorAll(".openSidebar, .closedSidebar")).forEach(el => {
+                    elParent = el.parentElement;
+                    elParent.querySelectorAll(":scope > div").forEach(d => {
+                        that.styleCache.set(d.id, d.getAttribute("style"));
+                    });
+                });
+                return;
+            }
             if (this.sidebar.classList.contains("closedSidebar")) {
                 Array.from(cq.getContainer(this.containerId).querySelectorAll(".closedSidebar")).forEach(el => {
                     elParent = el.parentElement;
@@ -63,15 +73,14 @@ class Tabbar {
                         (_b = (_a = document.getElementById(that.containerId)) === null || _a === void 0 ? void 0 : _a.querySelector("#" + key)) === null || _b === void 0 ? void 0 : _b.setAttribute("style", value);
                     }
                 }
-                that.styleCache = new Map();
+                //that.styleCache = new Map<string, string>()
             }
             else {
-                //document.getElementById("sidebarContainer").style.width = "0"
                 Array.from(cq.getContainer(this.containerId).querySelectorAll(".openSidebar")).forEach(el => {
                     elParent = el.parentElement;
                     elParent.querySelectorAll(":scope > div").forEach(d => {
                         that.styleCache.set(d.id, d.getAttribute("style"));
-                        d.removeAttribute("style");
+                        //d.removeAttribute("style")
                     });
                     el.classList.add("closedSidebar");
                     el.classList.remove("openSidebar");
@@ -596,7 +605,7 @@ class Tabbar {
             a.removeEventListener("click", this.customToolbarHandler);
         });
         cq.getContainer(this.containerId).removeEventListener("annotChanged", this.createAnnotListHandler);
-        (0, interactjs_1.default)("#annotList").unset();
+        interactjs_1.default("#annotList").unset();
     }
     closeDropdown(ddButton) {
         if (ddButton.classList.contains("show")) {

package/src/scripts/js/gui/Toolbar.js

@@ -548,7 +548,7 @@ class Toolbar {
         //     el.removeEventListener("click", this.sidebarHandler)
         // })
         cq.getContainer(this.containerId).removeEventListener("annotChanged", this.createAnnotListFunction);
-        (0, interactjs_1.default)("#annotList").unset();
+        interactjs_1.default("#annotList").unset();
     }
     closeDropdown(ddButton) {
         if (ddButton.classList.contains("show")) {

package/src/scripts/js/handlers/AnnotationChangeHandler.js

@@ -31,7 +31,7 @@ class AnnotationChangeHandler {
     setListeners() {
         //if(document.getElementById(this.containerId).querySelector(".sidebar.openSidebar") != null) return
         var that = this;
-        this.shapeListener = (0, interactjs_1.default)("#" + this.containerId + " #interactionOverlay .customAnnotShape")
+        this.shapeListener = interactjs_1.default("#" + this.containerId + " #interactionOverlay .customAnnotShape")
             .resizable({
             // resize from all edges and corners
             edges: { left: true, right: true, bottom: true, top: true },
@@ -62,7 +62,7 @@ class AnnotationChangeHandler {
                 })
             ]
         });
-        this.textListener = (0, interactjs_1.default)("#" + this.containerId + " .annotText")
+        this.textListener = interactjs_1.default("#" + this.containerId + " .annotText")
             .resizable({
             // resize from all edges and corners
             edges: { left: true, right: true, bottom: true, top: true },
@@ -93,7 +93,7 @@ class AnnotationChangeHandler {
                 })
             ]
         });
-        this.lineListener = (0, interactjs_1.default)("#" + this.containerId + " #interactionOverlay .lineDragRect.x1")
+        this.lineListener = interactjs_1.default("#" + this.containerId + " #interactionOverlay .lineDragRect.x1")
             .draggable({
             listeners: {
                 move: this.dragLineListener.bind(this),
@@ -271,7 +271,7 @@ class AnnotationChangeHandler {
             var pt = coordinates.transformToDOMMatrixCoordinates(event.clientX, event.clientY, cq.getInteractOverlay(this.containerId).querySelector("#annotationCanvas")); //new DOMPoint(event.clientX, event.clientY)
             var edx = pt.x; //.matrixTransform(this.canvasMatrix).x
             var edy = pt.y; //matrixTransform(this.canvasMatrix).y
-            var ptDist = coordinates.transformToDOMMatrixCoordinates(target.getBoundingClientRect().x, event.target.getBoundingClientRect().y, cq.getInteractOverlay(this.containerId).querySelector("#annotationCanvas")); //new DOMPoint(target.getBoundingClientRect().x, event.target.getBoundingClientRect().y)
+            var ptDist = coordinates.transformToDOMMatrixCoordinates(target.getBoundingClientRect().x, event.target.getBoundingClientRect().y, cq.getInteractOverlay(this.containerId).querySelector("#annotationCanvas"));
             var distX = (parseFloat(target.getAttribute('distX'))) || edx - ptDist.x; //matrixTransform(this.canvasMatrix).x 
             var distY = (parseFloat(target.getAttribute('distY'))) || edy - ptDist.y; //matrixTransform(this.canvasMatrix).y 
             target.setAttribute("distX", distX.toString());
@@ -589,6 +589,18 @@ class AnnotationChangeHandler {
     }
     setAnnotations(annotations) {
         this.annotations = annotations;
+        // this.annotations.forEach(annot => {
+        //     var annotElement = cq.getInteractOverlay(this.containerId).querySelector("#" + annot.sourceID +  " .annotFO") as HTMLElement
+        //     var h = annotElement.getBoundingClientRect().height
+        //     var w = annotElement.getBoundingClientRect().width
+        //     var ratio = parseFloat(annot.originalWidth) / w
+        //     if(isNaN(ratio)) return
+        //     annot.originalWidth = (w * ratio).toString()
+        //     annot.originalHeight = (h * ratio).toString()
+        //     annotElement.style.height = annot.originalHeight.toString() + "px"
+        //     annotElement.style.width = annot.originalWidth.toString() + "px"
+        //     console.log(annot, annotElement, this.annotations)
+        // })
         // var newFactor = parseInt((cq.getContainer(this.containerId).querySelector("#svgContainer") as HTMLElement).style?.width?.split("%")[0]) || 100
         // if (newFactor === this.factor) return this
         // var that = this

package/src/scripts/js/handlers/CustomAnnotationShapeDrawer.js

@@ -67,7 +67,7 @@ class CustomAnnotationShapeDrawer {
         this.updateCallback();
     }
     initRect(ulx, uly) {
-        this.shapeID = (0, random_1.uuidv4)();
+        this.shapeID = random_1.uuidv4();
         this.canvas.append('rect')
             .attr('x', ulx)
             .attr('y', uly)
@@ -78,7 +78,7 @@ class CustomAnnotationShapeDrawer {
         this.shape = document.getElementById(this.shapeID);
     }
     initCircle(cx, cy) {
-        this.shapeID = (0, random_1.uuidv4)();
+        this.shapeID = random_1.uuidv4();
         this.canvas.append('ellipse')
             .attr('cx', cx)
             .attr('cy', cy)

package/src/scripts/js/handlers/InsertModeHandler.js

@@ -27,9 +27,9 @@ class InsertModeHandler {
     }
     activateInsertMode(clicked = false) {
         var _a;
-        if (this.annotationMode || this.harmonyMode) {
-            this.insertDeactivate();
-        }
+        // if (this.annotationMode || this.harmonyMode) {
+        //   this.insertDeactivate()
+        // }
         // if (clicked) {
         //   if (this.unselectMenuItem("clickInsert")) { return }
         // }
@@ -245,8 +245,8 @@ class InsertModeHandler {
                 }
                 that.m2s.setDurationNewNote(dur);
                 if (that.m2s.setMarkedNoteDurations(dur)) {
-                    (0, MEIOperations_1.cleanUp)(that.m2s.getCurrentMei());
-                    var mei = (0, MEIConverter_1.restoreXmlIdTags)(that.m2s.getCurrentMei());
+                    MEIOperations_1.cleanUp(that.m2s.getCurrentMei());
+                    var mei = MEIConverter_1.restoreXmlIdTags(that.m2s.getCurrentMei());
                     that.loadDataCallback("", mei, false);
                 }
             });
@@ -266,8 +266,8 @@ class InsertModeHandler {
                 }
                 that.m2s.setDotsNewNote(dots);
                 if (that.m2s.setMarkedNoteDots(dots)) {
-                    (0, MEIOperations_1.cleanUp)(that.m2s.getCurrentMei());
-                    var mei = (0, MEIConverter_1.restoreXmlIdTags)(that.m2s.getCurrentMei());
+                    MEIOperations_1.cleanUp(that.m2s.getCurrentMei());
+                    var mei = MEIConverter_1.restoreXmlIdTags(that.m2s.getCurrentMei());
                     that.loadDataCallback("", mei, false);
                 }
             });

package/src/scripts/js/handlers/KeyModeHandler.js

@@ -271,7 +271,7 @@ class KeyModeHandler {
         this.setContainerId(this.containerId);
         var newNote = {
             pname: pname,
-            id: (0, random_1.uuidv4)(),
+            id: random_1.uuidv4(),
             dur: this.m2s.getDurationNewNote(),
             dots: this.m2s.getDotsNewNote(),
             oct: oct,

package/src/scripts/js/handlers/LabelHandler.js

@@ -347,7 +347,7 @@ class LabelHandler {
     }
     createInputBox(posx, posy, targetId, targetClass) {
         var textGroup = document.createElementNS(constants_1.constants._SVGNS_, "g");
-        textGroup.setAttribute("id", (0, random_1.uuidv4)());
+        textGroup.setAttribute("id", random_1.uuidv4());
         textGroup.setAttribute("refElementId", targetId);
         var text = document.createElementNS(constants_1.constants._SVGNS_, "svg");
         text.classList.add("labelText");

package/src/scripts/js/handlers/NoteDragHandler.js

@@ -12,7 +12,7 @@ class NoteDragHandler {
     }
     setListeners() {
         var that = this;
-        this.noteDragListener = (0, interactjs_1.default)("#" + this.containerId + " #interactionOverlay .notehead rect")
+        this.noteDragListener = interactjs_1.default("#" + this.containerId + " #interactionOverlay .notehead rect")
             .draggable({
             startAxis: "y",
             lockAxis: "y",

package/src/scripts/js/handlers/PhantomElementHandler.js

@@ -76,17 +76,13 @@ class PhantomElementHandler {
         var _a, _b, _c, _d, _e;
         if (this.m2s.getLastMouseEnter().staff === null)
             return;
-        // var pt = coordinates.transformToDOMMatrixCoordinates(e.clientX, e.clientY, this.interactionOverlay)
-        // var relX = pt.x
-        // var relY = pt.y
         var definitionScale = (_b = cq.getVrvSVG(this.containerId).querySelector("#" + ((_a = this.m2s.getLastMouseEnter().staff) === null || _a === void 0 ? void 0 : _a.getAttribute("refId")))) === null || _b === void 0 ? void 0 : _b.closest(".definition-scale");
-        if (definitionScale == undefined || definitionScale == null)
+        if (!definitionScale)
             return;
-        var pt = coordinates.transformToDOMMatrixCoordinates(e.clientX, e.clientY, this.interactionOverlay);
+        var pt = coordinates.transformToDOMMatrixCoordinates(e.clientX, e.clientY, cq.getInteractOverlay(this.containerId));
         var relX = pt.x;
         var relY = pt.y;
-        var dsCoords = coordinates.getDOMMatrixCoordinates(definitionScale, definitionScale.closest(".page"));
-        //console.log(relX, dsCoords, definitionScale.getBoundingClientRect())
+        var dsCoords = coordinates.getDOMMatrixCoordinates(definitionScale, cq.getInteractOverlay(this.containerId));
         if (relX < dsCoords.left || relX > dsCoords.right) {
             this.isTrackingMouse = false;
             return;
@@ -117,9 +113,6 @@ class PhantomElementHandler {
             });
             this.setPhantomLineListeners();
         }
-        // if(e.type === "draggingNote"){
-        //     console.log(phantomNoteElement, this.phantomLines)
-        // }
     }
     removeLines() {
         var lines = this.interactionOverlay.querySelectorAll(".phantomLine");