vibe-editor 0.0.0 → 0.0.1

package/src/scripts/js/handlers/ClickModeHandler.js

@@ -2,166 +2,88 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const coordinates = require("../utils/coordinates");
 const cq = require("../utils/convenienceQueries");
+const mappings_1 = require("../utils/mappings");
+const marked = "marked";
 class ClickModeHandler {
     constructor() {
+        this.isSelecting = false;
+        this.selectDist = 0;
+        this.dragOnce = false;
+        this.shiftPressed = false;
+        this.selectEndEvent = new Event("selectEnd");
         /**
          * Event handler for inserting Notes
          */
-        this.clickHandler = (function clickHandler(e) {
-            var _a;
-            var t = e.target;
-            if (this.interactionOverlay.querySelector(".moving") !== null)
-                return;
-            if (["clef", "meterSig", "keySig", "rest", "notehead"].some(c => t.parentElement.classList.contains(c))) {
-                this.hideCursor();
-                return;
-            }
-            // when over other interactable elements discard event
-            if (!this.phantomElementHandler.getIsTrackingMouse()) {
-                return;
-            }
-            if (this.musicPlayer.getIsPlaying() === true) {
-                return;
-            } // getIsPlaying could also be undefined
-            // var pt = new DOMPoint(e.clientX, e.clientY)
-            // var vrvSVG = this.vrvSVG as unknown as SVGGraphicsElement
-            // var pospt = pt.matrixTransform(vrvSVG.getScreenCTM().inverse())
-            var pospt = coordinates.transformToDOMMatrixCoordinates(e.clientX, e.clientY, this.vrvSVG);
-            var posx = pospt.x;
-            var posy = pospt.y;
-            var target = e.target;
-            var options = {};
-            if (target.classList.contains("staffLine")) {
-                options["staffLineId"] = target.id;
-            }
-            if ((_a = this.interactionOverlay.querySelector("#phantomNote")) === null || _a === void 0 ? void 0 : _a.classList.contains("onChord")) {
-                options["targetChord"] = this.findScoreTarget(posx, posy);
-            }
-            //this.m2s.defineNote(e.pageX, e.pageY, options);
-            this.m2s.defineNote(posx, posy, options);
-            var newNote = this.m2s.getNewNote();
-            if (newNote == undefined)
-                return; //Eingabemaske in Chrome: zusätzliche Notenlinien in Noteneditor #10
-            var meiDoc = this.m2s.getCurrentMei();
-            var pitchExists = false;
-            // do not insert same note more than once in chord
-            if (newNote.chordElement != undefined) {
-                var chordEl = meiDoc.getElementById(newNote.chordElement.id);
-                if (chordEl.getAttribute("pname") === newNote.pname && chordEl.getAttribute("oct") === newNote.oct) {
-                    pitchExists = true;
-                }
-                else {
-                    for (let c of chordEl.children) {
-                        if (c.getAttribute("pname") === newNote.pname && c.getAttribute("oct") === newNote.oct) {
-                            pitchExists = true;
-                            break;
-                        }
-                    }
-                }
-            }
-            if (!pitchExists) {
-                var replace = true; //(this.container.querySelector("#insertToggle") as HTMLInputElement).checked && newNote.chordElement == undefined
-                this.insertCallback(this.m2s.getNewNote(), replace).then(() => {
-                    this.musicPlayer.generateTone(this.m2s.getNewNote());
-                }).catch(() => {
-                    //alert("Your bar is to small")
-                });
-            }
+        this.insertNoteHandler = (function insertNoteHandler(e) {
+            this.insertNote(e);
         }).bind(this);
+        /**
+         * Hide the phantom element for the cursor.
+         */
         this.hideCursor = function () {
-            if (this.interactionOverlay.querySelector(".moving") !== null)
+            if (this.interactionOverlay.querySelector(".moving"))
                 return;
             this.container.querySelectorAll("#phantomCanvas > *").forEach(ph => {
                 ph.setAttribute("visibility", "hidden");
             }); // make phantoms invisible
         }.bind(this);
+        /**
+         * Show phantom element for cursor.
+         */
         this.showCursor = function () {
             this.container.querySelectorAll("#phantomCanvas > *").forEach(ph => ph.setAttribute("visibility", "visible")); // make phantoms invisible
         }.bind(this);
+        /**
+         * Handler for {@link mouseOverChord}
+         */
         this.mouseOverChordHandler = (function mouseOverHandler(e) {
-            var _a;
-            if (!this.phantomElementHandler.getIsTrackingMouse()) {
-                return;
-            }
-            var coords = coordinates.transformToDOMMatrixCoordinates(e.clientX, e.clientY, this.interactionOverlay);
-            var posx = coords.x; //e.offsetX
-            var posy = coords.y; //e.offsetY
-            var elementToHighlight = this.findScoreTarget(posx, posy);
-            if (elementToHighlight == undefined || elementToHighlight.closest(".mRest") !== null || elementToHighlight.closest(".rest") !== null) {
-                return;
-            }
-            if (this.prevElementToHighlight == undefined || this.currentElementToHighlight !== elementToHighlight) {
-                //update focussed layer if element and layer do not match
-                if (elementToHighlight.closest(".layer").id !== ((_a = this.m2s.getMouseEnterElementByName("layer")) === null || _a === void 0 ? void 0 : _a.id) && this.m2s.getMouseEnterElementByName("layer") !== null) {
-                    this.m2s.setMouseEnterElements(elementToHighlight);
-                }
-                //snap note to closest Chord
-                var phantom = this.interactionOverlay.querySelector("#phantomNote");
-                var cx = parseFloat(phantom.getAttribute("cx"));
-                var bboxElement = this.interactionOverlay.querySelector("[refId=" + elementToHighlight.id + "]");
-                var ptLeft = new DOMPoint(bboxElement.getBoundingClientRect().left, 0);
-                var ptRight = new DOMPoint(bboxElement.getBoundingClientRect().right, 0);
-                var vrvSVG = this.interactionOverlay; //cq.getVrvSVG(this.containerId) as unknown as SVGGraphicsElement 
-                var left = ptLeft.matrixTransform(vrvSVG.getScreenCTM().inverse()).x;
-                var right = ptRight.matrixTransform(vrvSVG.getScreenCTM().inverse()).x;
-                //snap only when within boundaries of target Chord
-                if (cx > left && cx < right) {
-                    var snapTarget;
-                    var snapTargetBBox;
-                    var phantomSnapX;
-                    var targetwidth;
-                    var snapCoord;
-                    // if(navigator.userAgent.toLowerCase().includes("firefox")){ // special rules for buggy firefox
-                    //     if(elementToHighlight.querySelector(".notehead") === null) return
-                    //     targetwidth = right - left//elementToHighlight.querySelector(".notehead")?.getBoundingClientRect().width
-                    //     snapTarget = elementToHighlight.classList.contains("chord") ?  elementToHighlight : elementToHighlight.querySelector(".note") || elementToHighlight
-                    //     console.log("snapTarget", snapTarget)
-                    //     snapTargetBBox = snapTarget.getBoundingClientRect()
-                    //     // phantomSnapX = snapTargetBBox.x - window.scrollX - rootBBox.x - root.scrollLeft
-                    //     snapCoord = snapTargetBBox.x
-                    // }else{
-                    snapTarget = bboxElement; //elementToHighlight.querySelector(".notehead")|| elementToHighlight
-                    snapTargetBBox = snapTarget.getBoundingClientRect();
-                    // phantomSnapX = snapTargetBBox.x + snapTargetBBox.width/2 - window.scrollX - rootBBox.x - root.scrollLeft
-                    snapCoord = snapTargetBBox.x + snapTargetBBox.width / 2;
-                    //}
-                    let snappt = new DOMPoint(snapCoord, 0);
-                    phantomSnapX = snappt.matrixTransform(vrvSVG.getScreenCTM().inverse()).x;
-                    if (elementToHighlight.querySelector(".chord") !== null) {
-                        console.log(phantomSnapX);
-                    }
-                    phantom.setAttribute("cx", phantomSnapX.toString());
-                    if (!phantom.classList.contains("onChord")) {
-                        phantom.classList.add("onChord");
-                        phantom.classList.add("l" + elementToHighlight.closest(".layer").getAttribute("n"));
-                        if (!elementToHighlight.classList.contains("chord")) {
-                            elementToHighlight.classList.add("highlighted");
-                        }
-                        else {
-                            elementToHighlight.querySelectorAll(".note").forEach((c) => {
-                                c.classList.add("highlighted");
-                            });
-                        }
-                    }
+            this.mouseOverChord(e);
+        }).bind(this);
+        // SELECTION STUFF
+        this.clickSelectHandler = (function clickSelectHandler(e) {
+            this.clickSelect(e);
+        }).bind(this);
+        /**
+         * Initialize start coordinates of selecting rectangle.
+         * {@link getSelectCoordsHandler} will compute distances on dragging the mouse to decide on initialisation of selection.
+         */
+        this.selStartHandler = (function selStartHandler(e) {
+            this.selectStartX = this.selectStartX || e.clientX;
+            this.selectStartY = this.selectStartY || e.clientY;
+        }).bind(this);
+        this.selectingHandler = (function selectingHandler(e) {
+            this.selecting(e);
+        }).bind(this);
+        /**
+         * Handler for {@link selEnd}.
+         */
+        this.selEndHandler = (function selEndHandler(e) {
+            this.selEnd(e);
+        }).bind(this);
+        /**
+         * Handler for {@link getSelectCoords}
+         */
+        this.getSelectCoordsHandler = (function getSelectCoordsHandler(e) {
+            this.getSelectCoords(e);
+        }).bind(this);
+        /**
+         * Handle shift presses and set shiftPressed flag.
+         */
+        this.shiftKeyHandler = (function shiftKeyHandler(e) {
+            //e.preventDefault()
+            if (e.key === "Shift") {
+                if (e.type === "keydown") {
+                    this.shiftPressed = true;
                 }
-                else {
-                    for (const [key, value] of phantom.classList.entries()) {
-                        if (value.indexOf("l") === 0) {
-                            phantom.classList.remove(value);
-                        }
-                    }
-                    phantom.classList.remove("onChord");
-                    phantom.setAttribute("fill", "black");
-                    this.container.querySelectorAll(".highlighted").forEach(h => {
-                        h.classList.remove("highlighted");
-                    });
+                if (e.type === "keyup") {
+                    this.shiftPressed = false;
                 }
-                this.currentElementToHighlight = elementToHighlight;
             }
         }).bind(this);
     }
     setListeners() {
-        this.interactionOverlay.addEventListener('click', this.clickHandler);
+        // Insert Notation Listeners
+        this.interactionOverlay.addEventListener("mouseup", this.insertNoteHandler);
         this.interactionOverlay.addEventListener("mousemove", this.mouseOverChordHandler);
         this.interactionOverlay.querySelectorAll("#scoreRects > *").forEach(sr => {
             if (["clef", "meterSig", "keySig", "rest", "notehead", "harm",].some(c => sr.classList.contains(c))) {
@@ -171,6 +93,16 @@ class ClickModeHandler {
                 sr.addEventListener("mouseover", this.showCursor);
             }
         });
+        //Selection Listeners
+        this.interactionOverlay.addEventListener("mousedown", this.selStartHandler);
+        this.interactionOverlay.addEventListener("mousemove", this.selectingHandler);
+        this.interactionOverlay.addEventListener("mousemove", this.getSelectCoordsHandler);
+        this.interactionOverlay.addEventListener("mouseup", this.selEndHandler);
+        this.interactionOverlay.querySelectorAll(".notehead, .rest").forEach(el => el.addEventListener("click", this.clickSelectHandler));
+        //shiftkey for special function
+        document.addEventListener("keydown", this.shiftKeyHandler);
+        document.addEventListener("keyup", this.shiftKeyHandler);
+        //hide or show cursor based on position
         this.interactionOverlay.querySelectorAll("#manipulatorCanvas *, #annotationCanvas *").forEach(sr => {
             sr.addEventListener("mouseover", this.hideCursor);
             sr.addEventListener("mouseleave", this.showCursor);
@@ -178,11 +110,16 @@ class ClickModeHandler {
         // Listener just for staves
         var staves = this.interactionOverlay.querySelectorAll(".staffLine");
         Array.from(staves).forEach(element => {
-            element.addEventListener('click', this.clickHandler);
+            element.addEventListener('mouseup', this.insertNoteHandler);
         });
     }
     removeListeners() {
-        this.interactionOverlay.removeEventListener('click', this.clickHandler);
+        this.interactionOverlay.removeEventListener("mousedown", this.selStartHandler);
+        this.interactionOverlay.removeEventListener("mousemove", this.selectingHandler);
+        this.interactionOverlay.removeEventListener("mousemove", this.getSelectCoordsHandler);
+        this.interactionOverlay.removeEventListener("mouseup", this.selEndHandler);
+        this.interactionOverlay.querySelectorAll(".notehead, .rest").forEach(el => el.removeEventListener("click", this.clickSelectHandler));
+        this.interactionOverlay.removeEventListener("mouseup", this.insertNoteHandler);
         this.interactionOverlay.removeEventListener("mousemove", this.mouseOverChordHandler);
         if (this.annotations != undefined) {
             var highLightElements = this.annotations.getAnnotationCanvas().querySelectorAll(".highlightChord");
@@ -190,6 +127,8 @@ class ClickModeHandler {
                 el.remove();
             });
         }
+        document.removeEventListener("keydown", this.shiftKeyHandler);
+        document.removeEventListener("keyup", this.shiftKeyHandler);
         this.container.querySelectorAll(".highlighted").forEach((c) => {
             c.classList.remove("highlighted");
         });
@@ -204,13 +143,172 @@ class ClickModeHandler {
         // Listener just for staves
         var staves = this.interactionOverlay.querySelectorAll(".staffLine");
         Array.from(staves).forEach(element => {
-            element.removeEventListener('click', this.clickHandler);
+            element.removeEventListener('mouseup', this.insertNoteHandler);
         });
     }
     resetListeners() {
         this.removeListeners();
         this.setListeners();
     }
+    /**
+     * Insert a note when mouseup is fires based on mouse position.
+     * @param e
+     * @returns
+     */
+    insertNote(e) {
+        var _a;
+        // when mouseup is fired, selEndHandler and insertNotehandler are alled. 
+        // The isSelecting flag is set to true as soon as a selection startet, only after that an insertion of a note should be possible
+        if (this.isSelecting) {
+            this.isSelecting = false;
+            return;
+        }
+        var t = e.target;
+        if (cq.getContainer(this.containerId).querySelectorAll(`.${marked}`).length > 1 && !this.shiftPressed) {
+            cq.getContainer(this.containerId).querySelectorAll(`.${marked}`).forEach(m => m.classList.remove(marked));
+            return; // when more than one element is marked is likely to remove marked status of all notes
+        }
+        if (cq.getContainer(this.containerId).classList.contains("annotMode"))
+            return; // prevent selecting when resizing annotation objects
+        if (cq.getContainer(this.containerId).querySelector("#phantomNote").getAttribute("visibility") === "hidden")
+            return; //the cursor is possibly somewhere where no note input is possible
+        if (cq.getContainer(this.containerId).querySelector("[contenteditable=true]"))
+            return;
+        e.preventDefault();
+        // when mouse is over other interactable elements discard this event
+        if (["clef", "meterSig", "keySig", "rest", "notehead", "manipulator"].some(c => {
+            let parentCondition = t.parentElement.classList.contains(c);
+            let layerCondition = false;
+            if (!t.closest(".activeLayer")) {
+                layerCondition = true;
+            }
+            return parentCondition && layerCondition;
+        })) {
+            this.hideCursor();
+            return;
+        }
+        if (!this.phantomElementHandler.getIsTrackingMouse()) {
+            return;
+        }
+        if (this.musicPlayer.getIsPlaying() === true) {
+            return;
+        } // getIsPlaying could also be undefined
+        // Define position of mouse and which note to set
+        var pospt = coordinates.transformToDOMMatrixCoordinates(e.clientX, e.clientY, this.vrvSVG);
+        var posx = pospt.x;
+        var posy = pospt.y;
+        var target = e.target;
+        var options = {};
+        if (target.classList.contains("staffLine")) {
+            options["staffLineId"] = target.id;
+        }
+        if ((_a = this.interactionOverlay.querySelector("#phantomNote")) === null || _a === void 0 ? void 0 : _a.classList.contains("onChord")) {
+            options["targetChord"] = this.findScoreTarget(posx, posy);
+        }
+        //this.m2s.defineNote(e.pageX, e.pageY, options);
+        this.m2s.defineNote(posx, posy, options);
+        var newNote = this.m2s.getNewNote();
+        if (newNote == undefined)
+            return; //Eingabemaske in Chrome: zusätzliche Notenlinien in Noteneditor #10
+        var meiDoc = this.m2s.getCurrentMei();
+        var pitchExists = false;
+        // do not insert same note more than once in chord
+        if (newNote.chordElement) {
+            var chordEl = meiDoc.getElementById(newNote.chordElement.id);
+            if (chordEl.getAttribute("pname") === newNote.pname && chordEl.getAttribute("oct") === newNote.oct) {
+                pitchExists = true;
+            }
+            else {
+                for (let c of chordEl.children) {
+                    if (c.getAttribute("pname") === newNote.pname && c.getAttribute("oct") === newNote.oct) {
+                        pitchExists = true;
+                        break;
+                    }
+                }
+            }
+        }
+        if (!pitchExists) {
+            var replace = true; //(this.container.querySelector("#insertToggle") as HTMLInputElement).checked && newNote.chordElement == undefined
+            this.insertCallback(this.m2s.getNewNote(), replace).then(() => {
+                this.musicPlayer.generateTone(this.m2s.getNewNote());
+            }).catch(() => {
+                //alert("Your bar is to small")
+            });
+        }
+    }
+    /**
+     * Check if mouse is over a chord to snap cursor and define new note within a chord elemnt
+     */
+    mouseOverChord(e) {
+        var _a;
+        if (!this.phantomElementHandler.getIsTrackingMouse()) {
+            return;
+        }
+        var coords = coordinates.transformToDOMMatrixCoordinates(e.clientX, e.clientY, this.interactionOverlay);
+        var posx = coords.x;
+        var posy = coords.y;
+        var elementToHighlight = this.findScoreTarget(posx, posy);
+        if (elementToHighlight == undefined || elementToHighlight.closest(".mRest") !== null || elementToHighlight.closest(".rest") !== null) {
+            return;
+        }
+        //if (this.currentElementToHighlight !== elementToHighlight) {
+        //update focussed layer if element and layer do not match
+        if (elementToHighlight.closest(".layer").id !== ((_a = this.m2s.getMouseEnterElementByName("layer")) === null || _a === void 0 ? void 0 : _a.id) && this.m2s.getMouseEnterElementByName("layer") !== null) {
+            this.m2s.setMouseEnterElements(elementToHighlight);
+        }
+        //snap note to closest Chord
+        var phantom = this.interactionOverlay.querySelector("#phantomNote");
+        var cx = parseFloat(phantom.getAttribute("cx"));
+        var bboxElement = this.interactionOverlay.querySelector("[refId=" + elementToHighlight.id + "]");
+        var ptLeft = new DOMPoint(bboxElement.getBoundingClientRect().left, 0);
+        var ptRight = new DOMPoint(bboxElement.getBoundingClientRect().right, 0);
+        var vrvSVG = this.interactionOverlay;
+        var left = ptLeft.matrixTransform(vrvSVG.getScreenCTM().inverse()).x;
+        var right = ptRight.matrixTransform(vrvSVG.getScreenCTM().inverse()).x;
+        //snap only when within boundaries of target Chord
+        if (cx > left && cx < right) {
+            var snapTarget;
+            var snapTargetBBox;
+            var phantomSnapX;
+            var targetwidth;
+            var snapCoord;
+            snapTarget = bboxElement;
+            snapTargetBBox = snapTarget.getBoundingClientRect();
+            snapCoord = snapTargetBBox.x + snapTargetBBox.width / 2;
+            let snappt = new DOMPoint(snapCoord, 0);
+            phantomSnapX = snappt.matrixTransform(vrvSVG.getScreenCTM().inverse()).x;
+            // if (elementToHighlight.querySelector(".chord") !== null) {
+            //     console.log(phantomSnapX)
+            // }
+            phantom.setAttribute("cx", phantomSnapX.toString());
+            if (!phantom.classList.contains("onChord")) {
+                phantom.classList.add("onChord");
+                phantom.classList.add("l" + elementToHighlight.closest(".layer").getAttribute("n"));
+                if (!elementToHighlight.classList.contains("chord")) {
+                    elementToHighlight.classList.add("highlighted");
+                }
+                else {
+                    elementToHighlight.querySelectorAll(".note").forEach((c) => {
+                        c.classList.add("highlighted");
+                    });
+                }
+            }
+        }
+        else {
+            for (const [key, value] of phantom.classList.entries()) {
+                if (value.indexOf("l") === 0) {
+                    phantom.classList.remove(value);
+                }
+            }
+            phantom.classList.remove("onChord");
+            phantom.setAttribute("fill", "black");
+            this.container.querySelectorAll(".highlighted").forEach(h => {
+                h.classList.remove("highlighted");
+            });
+        }
+        this.currentElementToHighlight = elementToHighlight;
+        //}
+    }
     /**
          * Find Score Element nearest to given Position (e.g. Mouse)
          * @param posx client position
@@ -219,8 +317,8 @@ class ClickModeHandler {
          */
     findScoreTarget(posx, posy) {
         var _a;
-        var nextNote = this.m2s.findScoreTarget(posx, posy);
-        if (nextNote != undefined) {
+        const nextNote = this.m2s.findScoreTarget(posx, posy);
+        if (nextNote) {
             var el = ((_a = this.vrvSVG.querySelector("#" + nextNote.id)) === null || _a === void 0 ? void 0 : _a.closest(".chord")) || this.vrvSVG.querySelector("#" + nextNote.id);
             if (el.classList.contains("notehead")) {
                 el = el.parentElement;
@@ -229,6 +327,171 @@ class ClickModeHandler {
         }
         return;
     }
+    clickSelect(e) {
+        var _a;
+        if (!this.shiftPressed) {
+            cq.getVrvSVG(this.containerId).querySelectorAll(".marked").forEach(m => m.classList.remove(marked));
+        }
+        const t = e.target;
+        const notehead = cq.getVrvSVG(this.containerId).querySelector(`#${t.parentElement.getAttribute("refId")}`);
+        notehead === null || notehead === void 0 ? void 0 : notehead.classList.add(marked);
+        (_a = notehead.closest(".note")) === null || _a === void 0 ? void 0 : _a.classList.add(marked);
+    }
+    selStart(e) {
+        e.preventDefault();
+        if (!this.isSelecting)
+            return;
+        if (cq.getContainer(this.containerId).classList.contains("annotMode")) {
+            this.selEnd(e);
+            return;
+        }
+        //var pt = coordinates.transformToDOMMatrixCoordinates(d3.event.sourceEvent.clientX, d3.event.sourceEvent.clientY, cq.getInteractOverlay(this.containerId))
+        var pt = coordinates.transformToDOMMatrixCoordinates(e.clientX, e.clientY, cq.getInteractOverlay(this.containerId));
+        this.initialSelectX = pt.x; //d3.event.x
+        this.initialSelectY = pt.y; //d3.event.y
+        if (!document.getElementById(this.containerId).classList.contains("harmonyMode") && !this.shiftPressed) { //!this.harmonyHandler.getGlobal()){
+            this.m2s.getNoteBBoxes().forEach(bb => {
+                let note = this.vrvSVG.querySelector("#" + bb.id);
+                note.classList.remove(marked);
+            });
+        }
+        this.initRect(this.initialSelectX, this.initialSelectY);
+        this.isSelecting = true;
+    }
+    selecting(e) {
+        e.preventDefault();
+        if (document.getElementById(this.containerId).classList.contains("annotMode"))
+            return; // prevent selecting when resizing annotation objects
+        if (!this.isSelecting)
+            return;
+        const pt = coordinates.transformToDOMMatrixCoordinates(e.clientX, e.clientY, cq.getInteractOverlay(this.containerId));
+        const curX = pt.x;
+        const curY = pt.y;
+        const newX = curX < this.initialSelectX ? curX : this.initialSelectX;
+        const newY = curY < this.initialSelectY ? curY : this.initialSelectY;
+        const width = curX < this.initialSelectX ? this.initialSelectX - curX : curX - this.initialSelectX;
+        const height = curY < this.initialSelectY ? this.initialSelectY - curY : curY - this.initialSelectY;
+        this.updateRect(newX, newY, width, height);
+        const rect = this.interactionOverlay.querySelector("#selectRect");
+        const rectpt = coordinates.getDOMMatrixCoordinates(rect, this.vrvSVG);
+        const rectHeightpt = rectpt.height;
+        const rectWidthpt = rectpt.width;
+        const rx = rectpt.x;
+        const ry = rectpt.y;
+        const noteBBoxes = this.m2s.getNoteBBoxes();
+        noteBBoxes.forEach(bb => {
+            const note = cq.getVrvSVG(this.containerId).querySelector("#" + bb.id);
+            const stem = note.querySelector(".stem");
+            const accid = note.querySelector(".accid");
+            if (bb.x >= rx &&
+                //bb.x <= rx + rectBBox.width &&
+                bb.x <= rx + rectWidthpt &&
+                bb.y >= ry &&
+                //bb.y <= ry + rectBBox.height
+                bb.y <= ry + rectHeightpt) {
+                note.classList.add(marked);
+                if (stem !== null)
+                    stem.classList.add(marked);
+                const chord = note.closest(".chord");
+                if (chord !== null) {
+                    //if(!chord.classList.contains(marked)) 
+                    const noteArr = Array.from(chord.querySelectorAll(".note"));
+                    if (noteArr.every(c => c.classList.contains(marked)) && noteArr.length > 0) {
+                        chord.classList.add(marked);
+                    }
+                }
+            }
+            else if (!this.shiftPressed) {
+                note.classList.remove(marked);
+                stem === null || stem === void 0 ? void 0 : stem.classList.remove(marked);
+                accid === null || accid === void 0 ? void 0 : accid.classList.remove(marked);
+                const chord = note.closest(".chord");
+                chord === null || chord === void 0 ? void 0 : chord.classList.remove(marked);
+            }
+        });
+    }
+    /**
+     * Ends selection. Resets all flags and delets selectRect
+     * @param e
+     * @returns
+     */
+    selEnd(e) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        e.preventDefault();
+        this.dragOnce = false;
+        this.selectStartX = undefined;
+        this.selectStartY = undefined;
+        this.selectDist = 0;
+        this.isSelecting = false;
+        if (document.getElementById(this.containerId).classList.contains("annotMode"))
+            return; // prevent selecting when resizing annotation objects
+        var selectRect = cq.getInteractOverlay(this.containerId).querySelector("#selectRect");
+        if (selectRect !== null && (selectRect === null || selectRect === void 0 ? void 0 : selectRect.getAttribute("width")) !== "0" && (selectRect === null || selectRect === void 0 ? void 0 : selectRect.getAttribute("height")) !== "0") {
+            document.dispatchEvent(this.selectEndEvent);
+        }
+        selectRect === null || selectRect === void 0 ? void 0 : selectRect.remove();
+        var firstMarkedNote = (_a = this.vrvSVG.querySelector(".chord.marked, .note.marked, .rest.marked")) === null || _a === void 0 ? void 0 : _a.id;
+        var meiNote = this.m2s.getCurrentMei().getElementById(firstMarkedNote);
+        (_c = (_b = document.getElementById(this.containerId)) === null || _b === void 0 ? void 0 : _b.querySelectorAll(".lastAdded")) === null || _c === void 0 ? void 0 : _c.forEach(la => la.classList.remove("lastAdded"));
+        if ((firstMarkedNote === null || firstMarkedNote === void 0 ? void 0 : firstMarkedNote.length) > 0) {
+            (_d = document.getElementById(this.containerId)) === null || _d === void 0 ? void 0 : _d.querySelectorAll("#noteGroup *, #dotGroup *, #modGroup *, #articGroup *").forEach(b => b.classList.remove("selected"));
+            //select buttons for given note state
+            var modBtnId = this.container.querySelector("#customToolbar #articGroup") !== null ? "artic" : "accid";
+            (_f = (_e = document.getElementById(this.containerId)) === null || _e === void 0 ? void 0 : _e.querySelector("#" + mappings_1.attrToModButtonId.get(meiNote === null || meiNote === void 0 ? void 0 : meiNote.getAttribute(modBtnId)))) === null || _f === void 0 ? void 0 : _f.classList.add("selected");
+            if ((meiNote === null || meiNote === void 0 ? void 0 : meiNote.closest("chord")) !== null) {
+                meiNote = meiNote.closest("chord");
+            }
+            (_h = (_g = document.getElementById(this.containerId)) === null || _g === void 0 ? void 0 : _g.querySelector("#" + mappings_1.numToNoteButtonId.get(meiNote === null || meiNote === void 0 ? void 0 : meiNote.getAttribute("dur")))) === null || _h === void 0 ? void 0 : _h.classList.add("selected");
+            (_k = (_j = document.getElementById(this.containerId)) === null || _j === void 0 ? void 0 : _j.querySelector("#" + mappings_1.numToDotButtonId.get(meiNote === null || meiNote === void 0 ? void 0 : meiNote.getAttribute("dots")))) === null || _k === void 0 ? void 0 : _k.classList.add("selected");
+        }
+    }
+    /**
+     * Initialize selectRect.
+     * @param x start x
+     * @param y start y
+     */
+    initRect(x, y) {
+        const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+        rect.setAttribute("x", x.toString());
+        rect.setAttribute("y", y.toString());
+        rect.setAttribute("width", "0");
+        rect.setAttribute("height", "0");
+        rect.setAttribute("id", "selectRect");
+        rect.setAttribute("stroke", "black");
+        rect.setAttribute("stroke-width", "1px");
+        rect.setAttribute("fill", "none");
+        this.interactionOverlay.appendChild(rect);
+    }
+    /**
+     * Update size of selectRect.
+     * @param newX x posiiton of mouse cursor
+     * @param newY y position of mouse cursor
+     * @param currentWidth
+     * @param currentHeight
+     */
+    updateRect(newX, newY, currentWidth, currentHeight) {
+        const rect = this.interactionOverlay.querySelector("#selectRect");
+        rect.setAttribute("x", newX.toString());
+        rect.setAttribute("y", newY.toString());
+        rect.setAttribute("width", currentWidth.toString());
+        rect.setAttribute("height", currentHeight.toString());
+    }
+    /**
+     * Compute coordinates to determine if a selection should be initialized.
+     * Starts selection once if distance > 10.
+     * This is important to distinguish between inserting a note, drawing the selectRect and selecting one element by click.
+     * @param e MouseEvent
+     */
+    getSelectCoords(e) {
+        this.selectDist = Math.sqrt(Math.abs(e.clientX - this.selectStartX) ** 2 + Math.abs(e.clientY - this.selectStartY) ** 2);
+        if (this.selectDist > 10) {
+            this.isSelecting = true;
+            if (!this.dragOnce) {
+                this.dragOnce = true;
+                this.selStart(e);
+            }
+        }
+    }
     ///// GETTER / SETTER////////////////
     setm2s(m2s) {
         this.m2s = m2s;