vibe-editor 0.0.4 → 0.0.5

package/package.json

@@ -1,63 +1,67 @@
 {
-    "name": "vibe-editor",
-    "version": "0.0.4",
-    "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

@@ -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();
             });
         }
@@ -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();

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,7 +292,21 @@ 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", random_1.uuidv4());
         textGroup.setAttribute("targetId", annotationTarget.id);
@@ -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

@@ -121,7 +121,9 @@ class ScoreManipulator {
                 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);
                 }
             });

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");

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

@@ -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/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 }
         // }

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");

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

@@ -4,10 +4,6 @@ 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
@@ -26,17 +22,18 @@ class WindowHandler {
         while (this.w !== this.w.parent) {
             this.w = this.w.parent;
         }
+        this.scrollingTimer = new Array();
     }
     setListeners() {
         this.eventContainer = this.container;
         window.addEventListener("scroll", this.updateFunction);
         //window.addEventListener("resize", this.update)
-        this.w.addEventListener("resize", this.reloadSVGFunction);
+        //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("transitionend", this.reloadSVGFunction)
         this.eventContainer.querySelector("#sidebarContainer").addEventListener("resizemove", this.updateFunction);
-        this.eventContainer.querySelector("#sidebarContainer").addEventListener("resizemove", this.reloadSVGFunction);
+        //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);
@@ -71,6 +68,9 @@ class WindowHandler {
         (_h = this.eventContainer) === null || _h === void 0 ? void 0 : _h.removeEventListener("loadingEnd", this.loadContainerAttrFunction);
         return this;
     }
+    /**
+     * Update all elements that are affected by a window size change
+     */
     update(e) {
         var _a;
         // special rule for transition events since so much with different propertynames are fired