vibe-editor 0.0.4 → 0.0.5

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

@@ -0,0 +1,535 @@
+"use strict";
+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.insertNoteHandler = (function insertNoteHandler(e) {
+            this.insertNote(e);
+        }).bind(this);
+        /**
+         * Hide the phantom element for the cursor.
+         */
+        this.hideCursor = function () {
+            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) {
+            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;
+                }
+                if (e.type === "keyup") {
+                    this.shiftPressed = false;
+                }
+            }
+        }).bind(this);
+    }
+    setListeners() {
+        // 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))) {
+                sr.addEventListener("mouseover", this.hideCursor);
+            }
+            else {
+                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);
+        });
+        // Listener just for staves
+        var staves = this.interactionOverlay.querySelectorAll(".staffLine");
+        Array.from(staves).forEach(element => {
+            element.addEventListener('mouseup', this.insertNoteHandler);
+        });
+    }
+    removeListeners() {
+        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");
+            Array.from(highLightElements).forEach(el => {
+                el.remove();
+            });
+        }
+        document.removeEventListener("keydown", this.shiftKeyHandler);
+        document.removeEventListener("keyup", this.shiftKeyHandler);
+        this.container.querySelectorAll(".highlighted").forEach((c) => {
+            c.classList.remove("highlighted");
+        });
+        this.interactionOverlay.querySelectorAll("#scoreRects > *").forEach(sr => {
+            if (["clef", "meterSig", "keySig", "rest", "notehead", "harm"].some(c => sr.classList.contains(c))) {
+                sr.removeEventListener("mouseover", this.hideCursor);
+            }
+            else {
+                sr.removeEventListener("mouseover", this.showCursor);
+            }
+        });
+        // Listener just for staves
+        var staves = this.interactionOverlay.querySelectorAll(".staffLine");
+        Array.from(staves).forEach(element => {
+            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
+         * @param posy client position
+         * @returns
+         */
+    findScoreTarget(posx, posy) {
+        var _a;
+        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;
+            }
+            return el;
+        }
+        return;
+    }
+    clickSelect(e) {
+        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);
+        const note = notehead.closest(".note");
+        if (note) {
+            note.classList.add(marked);
+            this.scoreGraph.setCurrentNodeById(note.id);
+        }
+    }
+    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.attrToAccidButtonId.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;
+        return this;
+    }
+    setMusicProcessor(musicPlayer) {
+        this.musicPlayer = musicPlayer;
+        return this;
+    }
+    setScoreGraph(sg) {
+        this.scoreGraph = sg;
+        return this;
+    }
+    setContainerId(id) {
+        this.containerId = id;
+        this.vrvSVG = cq.getVrvSVG(id);
+        this.interactionOverlay = cq.getInteractOverlay(id);
+        this.container = document.getElementById(id);
+        return this;
+    }
+    setAnnotations(annotations) {
+        this.annotations = annotations;
+        return this;
+    }
+    setInsertCallback(insertCallback) {
+        this.insertCallback = insertCallback;
+        return this;
+    }
+    setDeleteCallback(deleteCallback) {
+        this.deleteCallback = deleteCallback;
+        return this;
+    }
+    setPhantomCursor(peh) {
+        this.phantomElementHandler = peh;
+        return this;
+    }
+}
+exports.default = ClickModeHandler;

package/src/scripts/js/{gui → scripts/handlers}/CustomAnnotationShapeDrawer.js

@@ -2,22 +2,25 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const d3 = require("d3");
 const random_1 = require("../utils/random");
-const constants_1 = require("../constants");
-class CustomAnnotationDrawer {
-    constructor() {
+const coordinates = require("../utils/coordinates");
+const cq = require("../utils/convenienceQueries");
+class CustomAnnotationShapeDrawer {
+    constructor(containerId) {
+        this.setContainerId(containerId);
         this.shapes = new Array();
         this.shapeID = "";
         this.dragged = false;
-        this.canvas = d3.select(constants_1.constants._ROOTSVGID_WITH_IDSELECTOR_); // draw directly in svg
+        this.canvas = d3.select("#" + this.containerId + " #interactionOverlay"); // draw directly in svg
         this.dragBehaviour = d3.drag()
             .on('start', drawStart)
             .on('drag', this.drawing.bind(this))
             .on('end', this.drawEnd.bind(this));
         var that = this;
         function drawStart() {
-            that.initialX = d3.event.x;
-            that.initialY = d3.event.y;
-            if (d3.event.sourceEvent.srcElement.id === constants_1.constants._ROOTSVGID_) {
+            var pt = coordinates.transformToDOMMatrixCoordinates(d3.event.sourceEvent.clientX, d3.event.sourceEvent.clientY, that.interactionOverlay);
+            that.initialX = pt.x; //d3.event.x
+            that.initialY = pt.y; //d3.event.y
+            if (d3.event.sourceEvent.srcElement.id === that.interactionOverlay.id) {
                 that.initRect(that.initialX, that.initialY);
                 //that.initCircle(that.initialX, that.initialY)
             }
@@ -25,10 +28,10 @@ class CustomAnnotationDrawer {
         this.setListeners();
     }
     drawing() {
-        //const currentPt = 
-        const curX = d3.event.x;
-        const curY = d3.event.y;
-        if (typeof this.shape === "undefined") {
+        var pt = coordinates.transformToDOMMatrixCoordinates(d3.event.sourceEvent.clientX, d3.event.sourceEvent.clientY, this.interactionOverlay);
+        const curX = pt.x; //d3.event.x
+        const curY = pt.y; //d3.event.y
+        if (this.shape == undefined) {
             return;
         }
         if (Math.abs(curX - this.initialX) > 20 || Math.abs(curY - this.initialY) > 20) {
@@ -42,14 +45,22 @@ class CustomAnnotationDrawer {
         }
     }
     drawEnd() {
+        if (this.shapeID === "")
+            return;
         if (!this.dragged) {
-            var elToRemove = document.getElementById(this.shapeID);
+            var elToRemove = this.interactionOverlay.querySelector("#" + this.shapeID);
             if (elToRemove !== null) {
                 elToRemove.remove();
             }
         }
         else {
-            document.getElementById("annotationCanvas").appendChild(this.shape);
+            var annotCanvas = this.interactionOverlay.querySelector("#annotationCanvas");
+            var pt = coordinates.getDOMMatrixCoordinates(this.shape, annotCanvas);
+            this.interactionOverlay.querySelector("#annotationCanvas").appendChild(this.shape);
+            this.shape.setAttribute("x", pt.left.toString());
+            this.shape.setAttribute("y", pt.top.toString());
+            this.shape.setAttribute("width", pt.width.toString());
+            this.shape.setAttribute("height", pt.height.toString());
             this.shapes.push(this.shape.cloneNode(true));
         }
         this.shape = undefined;
@@ -90,7 +101,7 @@ class CustomAnnotationDrawer {
         this.shape.setAttribute('ry', currentHeight.toString());
     }
     removeListeners() {
-        d3.select(constants_1.constants._ROOTSVGID_WITH_IDSELECTOR_).on('mousedown.drag', null);
+        d3.select("#" + this.containerId + " #interactionOverlay").on('mousedown.drag', null);
     }
     setListeners() {
         this.canvas.call(this.dragBehaviour);
@@ -100,8 +111,14 @@ class CustomAnnotationDrawer {
         this.setListeners();
     }
     ///////// GETTER/ SETTER ////////
-    setM2M(m2m) {
-        this.m2m = m2m;
+    setm2s(m2s) {
+        this.m2s = m2s;
+    }
+    setContainerId(id) {
+        this.containerId = id;
+        this.container = document.getElementById(id);
+        this.interactionOverlay = cq.getInteractOverlay(id);
+        this.vrvSVG = cq.getVrvSVG(id);
     }
     getShapes() {
         return this.shapes;
@@ -111,4 +128,4 @@ class CustomAnnotationDrawer {
         this.updateCallback = updateCallback;
     }
 }
-exports.default = CustomAnnotationDrawer;
+exports.default = CustomAnnotationShapeDrawer;