vibe-editor 0.0.0

package/src/scripts/js/handlers/NoteDragHandler_deprecated.js

@@ -0,0 +1,150 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const MeasureMatrix_1 = require("../datastructures/MeasureMatrix");
+const d3 = require("d3");
+const coordinates = require("../utils/coordinates");
+const cq = require("../utils/convenienceQueries");
+//@ts-ignore
+//const $ = H5P.jQuery;
+/**
+ * @deprecated
+ * Class that handles insert mode, events, and actions.
+ */
+class NoteDragHandler {
+    constructor(containerId) {
+        this.wasDragged = false;
+        this.setContainerId(containerId);
+        this.dragInit();
+        this.noteDraggedEvent = new Event("noteDragged");
+    }
+    setListeners() {
+    }
+    removeListeners() {
+    }
+    resetListeners() {
+        this.removeListeners();
+        this.setListeners();
+    }
+    /**
+     * Initialize the dragging action and handler for selected elements.
+     */
+    dragInit() {
+        // Adding listeners
+        const dragBehaviour = d3.drag()
+            .on('start', dragStarted.bind(this))
+            .on('drag', this.dragging.bind(this))
+            .on('end', this.dragEnded.bind(this));
+        this.notes = document.querySelectorAll(".note, .notehead"); //d3.select("#" + this.containerId).selectAll(".note, .notehead"); 
+        this.draggedOverlayElement = null;
+        this.notes.call(dragBehaviour);
+        // Drag effects
+        function dragStarted() {
+            var _a;
+            this.draggedOverlayElement = d3.event.sourceEvent.currentTarget;
+            this.draggedRootSVGElement = (_a = this.rootSVG.querySelector("#" + this.draggedOverlayElement.getAttribute("refId"))) === null || _a === void 0 ? void 0 : _a.closest(".note");
+            this.dragStartCoords = [d3.event.x, d3.event.y]; //coordinates.transformToDOMMatrixCoordinates(d3.event.sourceEvent.clientX, d3.event.sourceEvent.clientY, document.getElementById(c._ROOTSVGID_))
+            this.dx = 0; //this.dragStartCoords[0]
+            this.dy = 0; //this.dragStartCoords[1]
+        }
+    }
+    dragging() {
+        if (this.draggedOverlayElement === null || this.draggedRootSVGElement === null)
+            return;
+        this.dx = d3.event.x;
+        this.dy = d3.event.y;
+        var overlayCoords = coordinates.transformToDOMMatrixCoordinates(d3.event.sourceEvent.clientX, d3.event.sourceEvent.clientY, this.interactionOverlay);
+        var diffY = Math.abs(this.dy - this.dragStartCoords[1]);
+        if (diffY > 15) {
+            this.wasDragged = true;
+        }
+        //snap while dragging
+        this.m2m.defineNote(overlayCoords.x, overlayCoords.y, {});
+        var newNote = [this.m2m.getNewNote().pname, this.m2m.getNewNote().oct];
+        if (this.oldNote == undefined) {
+            this.oldNote = newNote;
+        }
+        const relativeY = d3.event.y - this.dragStartCoords[1]; //d3.event.y - this.dragStartCoords[1]
+        const relativeX = 0; //d3.event.x - this.dragStartCoords[0];
+        //overlay and defscale have completely different viewbox dimensions
+        var defScaleVBox = this.rootSVG.querySelector(".definition-scale").viewBox.baseVal;
+        var overlayVBox = this.interactionOverlay.viewBox.baseVal;
+        this.scaleX = defScaleVBox.width / overlayVBox.width;
+        this.scaleY = defScaleVBox.height / overlayVBox.height;
+        var shiftY = 10;
+        shiftY = relativeY < 0 ? -shiftY : shiftY;
+        if (!this.oldNote.every((v, i) => v === newNote[i])) {
+            this.draggedOverlayElement.setAttribute('transform', 'translate(' + [relativeX, relativeY + shiftY] + ')');
+            this.draggedRootSVGElement.setAttribute('transform', 'translate(' + [relativeX * this.scaleX, (relativeY + shiftY) * this.scaleY] + ')');
+            this.oldNote = newNote;
+        }
+    }
+    dragEnded() {
+        if (this.draggedOverlayElement === null || this.draggedRootSVGElement === null)
+            return;
+        if (this.wasDragged) {
+            this.notes.on("drag", null);
+            this.wasDragged = false;
+            this.draggedOverlayElement.dispatchEvent(this.noteDraggedEvent);
+            this.container.querySelector("#" + this.draggedRootSVGElement.id).classList.remove(this.deleteHandler.getDeleteFlag()); //remove flag to delete after dragging
+            const action = {
+                action: "drag",
+                param: { elementId: this.draggedRootSVGElement.id,
+                    //x: this.dx,
+                    //y: this.dy
+                }
+            };
+            this.editCallback(action).then(() => {
+                var attr = this.elementAttrCallback(this.draggedRootSVGElement.id);
+                var mm = new MeasureMatrix_1.default();
+                //mm.populateFromSVG(svg)
+                mm.populateFromMEI(this.currentMEI);
+                var staff = this.currentMEI.getElementById(this.draggedRootSVGElement.id).closest("staff");
+                var measure = staff.closest("measure");
+                var staffIdx = parseInt(staff.getAttribute("n")) - 1;
+                var measureIdx = parseInt(measure.getAttribute("n")) - 1;
+                var dur = this.currentMEI.getElementById(this.draggedRootSVGElement.id).closest("chord") !== null ? this.currentMEI.getElementById(this.draggedRootSVGElement.id).closest("chord").getAttribute("dur") : attr.dur;
+                let newNote = {
+                    pname: attr.pname,
+                    oct: attr.oct.toString(),
+                    dur: dur,
+                    keysig: mm.get(measureIdx, staffIdx).keysig,
+                    rest: false,
+                };
+                this.musicPlayer.generateTone(newNote);
+            });
+        }
+    }
+    //////////////// GETTER/ SETTER ////////////
+    setMusicPlayer(musicPlayer) {
+        this.musicPlayer = musicPlayer;
+        return this;
+    }
+    setCurrentMEI(xmlDoc) {
+        this.currentMEI = xmlDoc;
+        return this;
+    }
+    setM2M(m2m) {
+        this.m2m = m2m;
+        return this;
+    }
+    setDeleteHandler(deleteHandler) {
+        this.deleteHandler = deleteHandler;
+        return this;
+    }
+    setEditCallback(editCallback) {
+        this.editCallback = editCallback;
+        return this;
+    }
+    setElementAttrCallback(elementAttrCallback) {
+        this.elementAttrCallback = elementAttrCallback;
+        return this;
+    }
+    setContainerId(id) {
+        this.containerId = id;
+        this.container = document.getElementById(id);
+        this.interactionOverlay = cq.getInteractOverlay(id);
+        this.rootSVG = cq.getRootSVG(id);
+        return this;
+    }
+}
+exports.default = NoteDragHandler;

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

@@ -0,0 +1,168 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("../constants");
+const PhantomElement_1 = require("../gui/PhantomElement");
+const coordinates = require("../utils/coordinates");
+const cq = require("../utils/convenienceQueries");
+class PhantomElementHandler {
+    constructor(containerId) {
+        this.trackMouseHandler = (function handler(e) {
+            var that = this;
+            that.trackMouse(e);
+        }).bind(this);
+        this.timeMarkerHandler = (function timeMarkerHandler(e) {
+            this.drawMarkers(e);
+        }).bind(this);
+        this.setContainerId(containerId);
+        this.addCanvas();
+        this.phantom = new PhantomElement_1.default("note", containerId);
+        this.isTrackingMouse = false;
+    }
+    addCanvas() {
+        if (cq.getInteractOverlay(this.containerId).querySelector("#phantomCanvas") !== null)
+            return;
+        this.rootBBox = this.vrvSVG.getBoundingClientRect();
+        var rootWidth = this.rootBBox.width.toString();
+        var rootHeigth = this.rootBBox.height.toString();
+        if (this.phantomCanvas == undefined) {
+            this.phantomCanvas = document.createElementNS(constants_1.constants._SVGNS_, "svg");
+            this.phantomCanvas.setAttribute("id", "phantomCanvas");
+        }
+        this.interactionOverlay.insertBefore(this.phantomCanvas, this.interactionOverlay.firstChild);
+    }
+    setListeners() {
+        this.interactionOverlay.addEventListener("mousemove", this.trackMouseHandler);
+        this.interactionOverlay.querySelectorAll(".notehead rect").forEach(n => n.addEventListener("draggingNote", this.trackMouseHandler));
+        // Listener just for staves
+        this.interactionOverlay.querySelectorAll(".staffLine").forEach(element => {
+            element.addEventListener('click', this.trackMouseHandler);
+        });
+        this.interactionOverlay.querySelectorAll(".staff").forEach(s => {
+            s.addEventListener("currStaffChanged", this.timeMarkerHandler);
+        });
+        return this;
+    }
+    setPhantomLineListeners() {
+        this.interactionOverlay.querySelectorAll(".phantomLine").forEach(element => {
+            element.addEventListener('click', this.trackMouseHandler);
+        });
+    }
+    removeListeners() {
+        this.interactionOverlay.removeEventListener("mousemove", this.trackMouseHandler);
+        this.interactionOverlay.querySelectorAll(".notehead rect").forEach(n => n.removeEventListener("draggingNote", this.trackMouseHandler));
+        this.interactionOverlay.querySelectorAll(".staff").forEach(s => {
+            s.removeEventListener("currStaffChanged", this.timeMarkerHandler);
+        });
+        this.interactionOverlay.querySelectorAll(".staffLine").forEach(element => {
+            element.removeEventListener('click', this.trackMouseHandler);
+            clearInterval(this.trackMouseHandler);
+        });
+        if (this.phantom != undefined) {
+            this.phantom.removePhantomNote();
+            this.phantom = undefined;
+        }
+        return this;
+    }
+    removePhantomLineListeners() {
+        this.interactionOverlay.querySelectorAll(".phantomLine").forEach(element => {
+            element.removeEventListener('click', this.trackMouseHandler);
+        });
+    }
+    /**
+     * Draw circle under mouse cursor
+     * @param e
+     */
+    trackMouse(e) {
+        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)
+            return;
+        var pt = coordinates.transformToDOMMatrixCoordinates(e.clientX, e.clientY, this.interactionOverlay);
+        var relX = pt.x;
+        var relY = pt.y;
+        var dsCoords = coordinates.getDOMMatrixCoordinates(definitionScale, definitionScale.closest(".page"));
+        //console.log(relX, dsCoords, definitionScale.getBoundingClientRect())
+        if (relX < dsCoords.left || relX > dsCoords.right) {
+            this.isTrackingMouse = false;
+            return;
+        }
+        this.isTrackingMouse = true;
+        var target = e.target;
+        target = target.closest("g");
+        var options = {};
+        if (target === null || target === void 0 ? void 0 : target.classList.contains("staffLine")) {
+            options["staffLineId"] = target.id;
+        }
+        var phantomNoteElement = this.phantom.getNoteElement();
+        if (phantomNoteElement == undefined) {
+            return;
+        }
+        phantomNoteElement.setAttribute("cx", relX.toString());
+        phantomNoteElement.setAttribute("cy", relY.toString());
+        phantomNoteElement.setAttribute("r", ((_d = (_c = this.m2s) === null || _c === void 0 ? void 0 : _c.getLineDist()) === null || _d === void 0 ? void 0 : _d.toString()) || "0");
+        phantomNoteElement.setAttribute("visibility", phantomNoteElement.getAttribute("visibility") || "visible");
+        this.m2s.defineNote(relX, relY, options);
+        var newCY = (_e = (this.m2s.getNewNoteY())) === null || _e === void 0 ? void 0 : _e.toString();
+        phantomNoteElement.setAttribute("cy", (newCY || "0"));
+        this.removeLines();
+        if (this.m2s.getPhantomLines() != undefined) {
+            this.phantomLines = new Array();
+            this.m2s.getPhantomLines().forEach(pl => {
+                this.phantomLines.push(new PhantomElement_1.default("line", this.containerId, { lineX: relX, lineY: pl }, this.phantomCanvas));
+            });
+            this.setPhantomLineListeners();
+        }
+        // if(e.type === "draggingNote"){
+        //     console.log(phantomNoteElement, this.phantomLines)
+        // }
+    }
+    removeLines() {
+        var lines = this.interactionOverlay.querySelectorAll(".phantomLine");
+        this.removePhantomLineListeners();
+        if (lines.length > 0) {
+            lines.forEach(l => {
+                l.remove();
+            });
+        }
+        return this;
+    }
+    drawMarkers(e) {
+        this.container.querySelectorAll(".phantomMarker").forEach(pm => pm.remove());
+        var pm = new PhantomElement_1.default("timeMarkers", this.containerId, { lastStaffEnteredId: e.target.getAttribute("refId"),
+            measureMatrix: this.m2s.getMeasureMatrix() });
+    }
+    resetCanvas() {
+        this.setContainerId(this.containerId);
+        this.rootBBox = this.vrvSVG.getBoundingClientRect();
+        this.phantomCanvas = this.interactionOverlay.querySelector("#phantomCanvas");
+        this.removeListeners();
+        this.removePhantomLineListeners();
+        this.phantom = new PhantomElement_1.default("note", this.containerId);
+        this.setListeners();
+        this.setPhantomLineListeners();
+    }
+    setm2s(m2s) {
+        this.m2s = m2s;
+        return this;
+    }
+    setContainerId(id) {
+        this.containerId = id;
+        this.vrvSVG = cq.getVrvSVG(id);
+        this.interactionOverlay = cq.getInteractOverlay(id);
+        this.container = document.getElementById(id);
+        return this;
+    }
+    setPhantomNote(note = undefined) {
+        this.phantom = note || new PhantomElement_1.default("note", this.containerId);
+        return this;
+    }
+    getIsTrackingMouse() {
+        return this.isTrackingMouse;
+    }
+}
+exports.default = PhantomElementHandler;

package/src/scripts/js/handlers/ScoreManipulatorHandler.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ScoreManipulator_1 = require("../gui/ScoreManipulator");
+const constants_1 = require("../constants");
+const meiOperation = require("../utils/MEIOperations");
+const meiConverter = require("../utils/MEIConverter");
+const cq = require("../utils/convenienceQueries");
+const manipSelector = ".manipulator";
+const canvasId = "manipulatorCanvas";
+/**
+ * Handler for all options which could modulate the given score from within the score. These functions are related to all elements seen inside a score
+ */
+class ScoreManipulatorHandler {
+    constructor() {
+        this.addMeasure = (function addMeasure(e) {
+            e.target.dispatchEvent(this.manipulateEvent);
+            e.preventDefault();
+            e.stopPropagation();
+            meiOperation.addMeasure(this.currentMEI);
+            this.loadDataCallback("last", meiConverter.restoreXmlIdTags(this.currentMEI), false);
+        }).bind(this);
+        this.removeMeasure = (function removeMeasure(e) {
+            e.target.dispatchEvent(this.manipulateEvent);
+            e.preventDefault();
+            e.stopPropagation();
+            meiOperation.removeMeasure(this.currentMEI);
+            this.loadDataCallback("last", meiConverter.restoreXmlIdTags(this.currentMEI), false);
+        }).bind(this);
+        this.addStaff = (function addStaff(e) {
+            var target = e.target.closest(".manipulator");
+            target.dispatchEvent(this.manipulateEvent);
+            e.preventDefault();
+            e.stopPropagation();
+            var relpos = target.classList.contains("below") ? "below" : "above";
+            meiOperation.addStaff(this.currentMEI, document.getElementById(target.getAttribute("refId")), relpos);
+            this.musicPlayer.resetMidiInstruments();
+            this.loadDataCallback("1", meiConverter.restoreXmlIdTags(this.currentMEI), false);
+        }).bind(this);
+        this.removeStaff = (function removeStaff(e) {
+            var target = e.target.closest(".manipulator");
+            target.dispatchEvent(this.manipulateEvent);
+            e.preventDefault();
+            e.stopPropagation();
+            var relpos = target.classList.contains("below") ? "below" : "above";
+            meiOperation.removeStaff(this.currentMEI, document.getElementById(target.getAttribute("refId")), relpos);
+            this.musicPlayer.resetMidiInstruments();
+            this.loadDataCallback("1", meiConverter.restoreXmlIdTags(this.currentMEI), false);
+            e.target.dispatchEvent(this.manipulateEvent);
+        }).bind(this);
+        this.removeFunction = (function removeElementsFunction() {
+            this.removeElements();
+        }).bind(this);
+        this.sm = new ScoreManipulator_1.default();
+        this.manipulateEvent = new Event("manipulated");
+    }
+    addCanvas() {
+        var _a;
+        var rootBBox = cq.getVrvSVG(this.containerId).firstElementChild.getBoundingClientRect();
+        var rootWidth = rootBBox.width.toString();
+        var rootHeigth = rootBBox.height.toString();
+        this.manipulatorCanvas = document.createElementNS(constants_1.constants._SVGNS_, "svg");
+        this.manipulatorCanvas.setAttribute("id", canvasId);
+        this.manipulatorCanvas.classList.add("canvas");
+        this.manipulatorCanvas.setAttribute("preserveAspectRatio", "xMinYMin meet");
+        this.manipulatorCanvas.setAttribute("viewBox", ["0", "0", rootWidth, rootHeigth].join(" "));
+        (_a = this.interactionOverlay.querySelector("#" + canvasId)) === null || _a === void 0 ? void 0 : _a.remove();
+        this.manipulatorCanvas.insertAdjacentElement("beforebegin", this.interactionOverlay.querySelector("#scoreRects"));
+        this.interactionOverlay.append(this.manipulatorCanvas);
+    }
+    drawElements() {
+        this.addCanvas();
+        this.sm.drawMeasureAdder();
+        this.sm.drawMeasureRemover();
+        this.sm.drawStaffManipulators();
+        this.setListeners();
+    }
+    removeElements() {
+        //this.removeListeners()
+        this.interactionOverlay.querySelectorAll(manipSelector).forEach(m => {
+            m.remove();
+        });
+    }
+    setListeners() {
+        var that = this;
+        this.removeListeners();
+        this.interactionOverlay.querySelector("#measureAdder").addEventListener("click", this.addMeasure, true);
+        this.interactionOverlay.querySelector("#measureRemover").addEventListener("click", this.removeMeasure, true);
+        this.interactionOverlay.querySelectorAll(".addStaff").forEach(as => {
+            as.addEventListener("click", that.addStaff, true);
+        });
+        this.interactionOverlay.querySelectorAll(".removeStaff").forEach(as => {
+            as.addEventListener("click", that.removeStaff, true);
+        });
+    }
+    removeListeners() {
+        var _a, _b;
+        var that = this;
+        (_a = this.interactionOverlay.querySelector("#measureAdder")) === null || _a === void 0 ? void 0 : _a.removeEventListener("click", this.addMeasure);
+        (_b = this.interactionOverlay.querySelector("#measureRemover")) === null || _b === void 0 ? void 0 : _b.removeEventListener("click", this.removeMeasure);
+        this.interactionOverlay.querySelectorAll(".addStaff").forEach(as => {
+            as.removeEventListener("click", that.addStaff);
+        });
+        this.interactionOverlay.querySelectorAll(".removeStaff").forEach(as => {
+            as.removeEventListener("click", that.removeStaff);
+        });
+    }
+    // drawFunction = (function drawFunction(e: TransitionEvent) {
+    //     var that = this
+    //     setTimeout(function () {
+    //         that.drawElements()
+    //     }, 500)
+    //     //this.drawElements()
+    // }).bind(this)
+    //SETTER////
+    setMEI(mei) {
+        this.currentMEI = mei;
+        this.sm.setMEI(mei);
+        return this;
+    }
+    setMusicProcessor(mp) {
+        this.musicPlayer = mp;
+        return this;
+    }
+    setLoadDataCallback(loadDataCallback) {
+        this.loadDataCallback = loadDataCallback;
+        return this;
+    }
+    setContainerId(containerId) {
+        this.containerId = containerId;
+        this.interactionOverlay = cq.getInteractOverlay(containerId);
+        this.sm.setContainerId(this.containerId);
+        return this;
+    }
+}
+exports.default = ScoreManipulatorHandler;

package/src/scripts/js/handlers/SelectionHandler.js

@@ -0,0 +1,218 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const d3 = require("d3");
+const mappings_1 = require("../utils/mappings");
+const coordinates = require("../utils/coordinates");
+const cq = require("../utils/convenienceQueries");
+const marked = "marked";
+class SelectionHandler {
+    constructor(containerId) {
+        /**
+         *  Mark clicked element
+         */
+        this.markedHandler = (function markedHandler(e) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            if (!this.shiftPressed) {
+                Array.from(this.container.querySelectorAll("." + marked)).forEach(n => {
+                    n.classList.remove(marked);
+                });
+            }
+            e.preventDefault();
+            var target = e.target;
+            if (target.getAttribute("refId") === null) {
+                target = target.closest("[refId]");
+                target = this.vrvSVG.querySelector("#" + target.getAttribute("refId"));
+            }
+            target = target.closest(".note, .rest, .mRest, .chord") || target;
+            target.classList.add(marked);
+            this.scoreGraph.setCurrentNodeById(target.id);
+            // change the selected durations in the toolbar
+            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);
+            if ((meiNote === null || meiNote === void 0 ? void 0 : meiNote.closest("chord")) !== null) {
+                meiNote = meiNote.closest("chord");
+            }
+            if ((firstMarkedNote === null || firstMarkedNote === void 0 ? void 0 : firstMarkedNote.length) > 0) {
+                (_b = document.getElementById(this.containerId)) === null || _b === void 0 ? void 0 : _b.querySelectorAll("#noteGroup *, #dotGroup *, #modGroup *, #articGroup *").forEach(b => b.classList.remove("selected"));
+                (_d = (_c = document.getElementById(this.containerId)) === null || _c === void 0 ? void 0 : _c.querySelectorAll(".lastAdded")) === null || _d === void 0 ? void 0 : _d.forEach(la => la.classList.remove("lastAdded"));
+                //select buttons for given note state
+                var modBtnId = cq.getContainer(this.containerId).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");
+            }
+        }).bind(this);
+        this.shiftKeyHandler = (function shiftKeyHandler(e) {
+            if (e.key === "Shift") {
+                if (e.type === "keydown") {
+                    this.shiftPressed = true;
+                }
+                else if (e.type === "keyup") {
+                    this.shiftPressed = false;
+                }
+            }
+            console.log("shiftPressed ", this.shiftPressed);
+        }).bind(this);
+        this.setContainerId(containerId);
+        this.selectStartEvent = new Event("selectStart");
+        this.selectEndEvent = new Event("selectEnd");
+        this.shiftPressed = false;
+        this.setKeyListeners();
+        this.canvas = d3.select("#" + this.containerId + " #interactionOverlay"); // draw directly in svg
+        var dragSelectAction = d3.drag()
+            .on('start', selStart)
+            .on('drag', selecting)
+            .on('end', selEnd);
+        var that = this;
+        function selStart() {
+            if (document.getElementById(that.containerId).classList.contains("annotMode"))
+                return; // prevent selecting when resizing annotation objects
+            var pt = coordinates.transformToDOMMatrixCoordinates(d3.event.sourceEvent.clientX, d3.event.sourceEvent.clientY, cq.getInteractOverlay(that.containerId));
+            that.initialX = pt.x; //d3.event.x
+            that.initialY = pt.y; //d3.event.y
+            if (!document.getElementById(that.containerId).classList.contains("harmonyMode") && !that.shiftPressed) { //!that.harmonyHandler.getGlobal()){
+                that.m2s.getNoteBBoxes().forEach(bb => {
+                    let note = that.vrvSVG.querySelector("#" + bb.id);
+                    note.classList.remove(marked);
+                });
+            }
+            that.initRect(that.initialX, that.initialY);
+        }
+        function selecting() {
+            if (document.getElementById(that.containerId).classList.contains("annotMode"))
+                return; // prevent selecting when resizing annotation objects
+            var pt = coordinates.transformToDOMMatrixCoordinates(d3.event.sourceEvent.clientX, d3.event.sourceEvent.clientY, cq.getInteractOverlay(that.containerId));
+            const curX = pt.x; //d3.event.x + container.scrollLeft 
+            const curY = pt.y; //d3.event.y + container.scrollTop 
+            const newX = curX < that.initialX ? curX : that.initialX;
+            const newY = curY < that.initialY ? curY : that.initialY;
+            const width = curX < that.initialX ? that.initialX - curX : curX - that.initialX;
+            const height = curY < that.initialY ? that.initialY - curY : curY - that.initialY;
+            that.updateRect(newX, newY, width, height);
+            var rect = that.interactionOverlay.querySelector("#selectRect");
+            var rectpt = coordinates.getDOMMatrixCoordinates(rect, that.vrvSVG);
+            var rectHeightpt = rectpt.height; //Math.abs(rectpt.y - ptBottom.matrixTransform(rootMatrix.getScreenCTM().inverse()).y) 
+            var rectWidthpt = rectpt.width; //Math.abs(rectpt.x - ptRight.matrixTransform(rootMatrix.getScreenCTM().inverse()).x)
+            var rx = rectpt.x;
+            var ry = rectpt.y;
+            var noteBBoxes = that.m2s.getNoteBBoxes();
+            noteBBoxes.forEach(bb => {
+                var note = cq.getVrvSVG(that.containerId).querySelector("#" + bb.id);
+                let stem = note.querySelector(".stem");
+                let 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);
+                    var chord = note.closest(".chord");
+                    if (chord !== null) {
+                        //if(!chord.classList.contains(marked)) 
+                        let noteArr = Array.from(chord.querySelectorAll(".note"));
+                        if (noteArr.every(c => c.classList.contains(marked)) && noteArr.length > 0) {
+                            chord.classList.add(marked);
+                        }
+                    }
+                }
+                else if (!that.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);
+                    var chord = note.closest(".chord");
+                    chord === null || chord === void 0 ? void 0 : chord.classList.remove(marked);
+                }
+            });
+        }
+        function selEnd() {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            if (document.getElementById(that.containerId).classList.contains("annotMode"))
+                return; // prevent selecting when resizing annotation objects
+            var selectRect = that.interactionOverlay.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(that.selectEndEvent);
+            }
+            selectRect === null || selectRect === void 0 ? void 0 : selectRect.remove();
+            var firstMarkedNote = (_a = that.vrvSVG.querySelector(".chord.marked, .note.marked, .rest.marked")) === null || _a === void 0 ? void 0 : _a.id;
+            var meiNote = that.m2s.getCurrentMei().getElementById(firstMarkedNote);
+            (_c = (_b = document.getElementById(that.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(that.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 = that.container.querySelector("#customToolbar #articGroup") !== null ? "artic" : "accid";
+                (_f = (_e = document.getElementById(that.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(that.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(that.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");
+            }
+        }
+        this.dsa = dragSelectAction;
+        this.setListeners();
+        //this.canvas.call(dragSelectAction);
+    }
+    initRect(ulx, uly) {
+        this.canvas.append('rect')
+            .attr('x', ulx)
+            .attr('y', uly)
+            .attr('width', 0)
+            .attr('height', 0)
+            .attr('id', 'selectRect')
+            .attr('stroke', 'black')
+            .attr('stroke-width', "1px")
+            .attr('fill', 'none');
+    }
+    updateRect(newX, newY, currentWidth, currentHeight) {
+        d3.select('#selectRect')
+            .attr('x', newX)
+            .attr('y', newY)
+            .attr('width', currentWidth)
+            .attr('height', currentHeight);
+    }
+    removeListeners() {
+        d3.select("#" + this.containerId + " #interactionOverlay").on('mousedown.drag', null);
+        this.interactionOverlay.querySelectorAll(".note, .rest, .mRest, .notehead").forEach(el => {
+            el.removeEventListener("click", this.markedHandler);
+        });
+        this.interactionOverlay.removeEventListener("keydown", this.shiftKeyHandler);
+        this.interactionOverlay.removeEventListener("keyup", this.shiftKeyHandler);
+    }
+    setListeners() {
+        this.canvas.call(this.dsa);
+        cq.getInteractOverlay(this.containerId).querySelectorAll(".note, .rest, .mRest, .notehead").forEach(el => {
+            el.addEventListener("click", this.markedHandler);
+        });
+    }
+    setKeyListeners() {
+        this.interactionOverlay.addEventListener("keydown", this.shiftKeyHandler);
+        this.interactionOverlay.addEventListener("keyup", this.shiftKeyHandler);
+    }
+    resetListeners() {
+        this.removeListeners();
+        this.setListeners();
+    }
+    ///////// GETTER/ SETTER ////////
+    setm2s(m2s) {
+        this.m2s = m2s;
+        return this;
+    }
+    setScoreGraph(sg) {
+        this.scoreGraph = sg;
+        return this;
+    }
+    setContainerId(id) {
+        this.containerId = id;
+        this.container = document.getElementById(id);
+        this.interactionOverlay = cq.getInteractOverlay(id);
+        this.vrvSVG = cq.getVrvSVG(id);
+        return this;
+    }
+}
+exports.default = SelectionHandler;