vibe-editor 0.0.0

package/src/scripts/js/handlers/AnnotationDragHandler.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const d3 = require("d3");
+//@ts-ignore
+//const $ = H5P.jQuery;
+/**
+ * Class that handles insert mode, events, and actions.
+ */
+class AnnotationLineHandler {
+    constructor() {
+        this.initDragRects();
+        this.initAnnots();
+        //this.initCustomShapes()
+    }
+    setListeners() {
+        // if(typeof this.customShapes !== "undefined"){
+        //   this.customShapes.call(this.dragShapeBehaviour)
+        // }
+        if (typeof this.annotations !== "undefined") {
+            //this.annotations.call(this.dragAnnotBehaviour);
+            this.lines.call(this.dragLineBehaviour);
+        }
+        return this;
+    }
+    removeListeners() {
+        // if(typeof this.customShapes !== "undefined"){
+        //   this.customShapes.on(".drag", null);
+        // }
+        if (typeof this.annotations !== "undefined") {
+            //this.annotations.on(".drag", null);
+            this.lines.on(".drag", null);
+        }
+        return this;
+    }
+    resetListeners() {
+        this.removeListeners();
+        this.setListeners();
+    }
+    dragStarted() {
+        this.draggedAnnot = d3.event.sourceEvent.currentTarget;
+        this.draggedLine = d3.event.sourceEvent.currentTarget;
+        this.draggedShape = d3.event.sourceEvent.currentTarget;
+        try {
+            this.attachedLine = this.draggedAnnot.closest("g").getElementsByTagName("line")[0];
+        }
+        catch (_a) {
+            this.attachedLine = undefined;
+        }
+        this.dragStartCoords = [d3.event.x, d3.event.y];
+        this.dx = this.dragStartCoords[0];
+        this.dy = this.dragStartCoords[1];
+    }
+    ////////// ANNOTS //////////
+    initAnnots() {
+        this.dragAnnotBehaviour = d3.drag()
+            .on('start', this.dragStarted.bind(this))
+            .on('drag', this.draggingAnnot.bind(this))
+            .on('end', this.dragAnnotEnded.bind(this));
+        this.annotations = d3.selectAll(".annotText");
+        this.dragStartCoords = new Array(this.annotations.size());
+        this.draggedAnnot = null;
+        this.resetListeners();
+    }
+    draggingAnnot() {
+        this.dx = d3.event.x;
+        this.dy = d3.event.y;
+        this.draggedAnnot.setAttribute("x", (this.dx).toString());
+        this.draggedAnnot.setAttribute("y", (this.dy).toString());
+        this.attachedLine.setAttribute("x1", this.draggedAnnot.getAttribute("x"));
+        this.attachedLine.setAttribute("y1", this.draggedAnnot.getAttribute("y"));
+    }
+    dragAnnotEnded() {
+    }
+    //////////// LINE ////////////////////
+    initDragRects() {
+        this.dragLineBehaviour = d3.drag()
+            .on('start', this.dragStarted.bind(this))
+            .on('drag', this.draggingLine.bind(this))
+            .on('end', this.dragLineEnded.bind(this));
+        this.lines = d3.selectAll(".lineDragRect");
+        this.dragStartCoords = new Array(this.lines.size());
+        this.draggedLine = null;
+        this.resetListeners();
+    }
+    draggingLine() {
+        this.dx = d3.event.x;
+        this.dy = d3.event.y;
+        this.draggedLine.setAttribute("x", (this.dx).toString());
+        this.draggedLine.setAttribute("y", (this.dy).toString());
+        this.attachedLine.setAttribute("x2", this.draggedLine.getAttribute("x"));
+        this.attachedLine.setAttribute("y2", this.draggedLine.getAttribute("y"));
+        this.highlightObjectCallback(this.draggedLine);
+    }
+    dragLineEnded() {
+        this.snapToObjCallback(this.attachedLine);
+    }
+    //////////// CALLBACKS ////////////
+    setSnapToObjCallback(snapToObj) {
+        this.snapToObjCallback = snapToObj;
+        return this;
+    }
+    removeUpdateAnnotationIDsCallback() {
+        this.snapToObjCallback = undefined;
+        return this;
+    }
+    sethighlightObjectCallback(highlightObjectCallback) {
+        this.highlightObjectCallback = highlightObjectCallback;
+    }
+    setUpdateCallback(updateCallback) {
+        this.updateCallback = updateCallback;
+    }
+}
+exports.default = AnnotationLineHandler;

package/src/scripts/js/handlers/AnnotationLineHandler.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const d3 = require("d3");
+//@ts-ignore
+//const $ = H5P.jQuery;
+/**
+ * Class that handles insert mode, events, and actions.
+ */
+class AnnotationLineHandler {
+    constructor() {
+        this.initDragRects();
+        this.initAnnots();
+        //this.initCustomShapes()
+    }
+    setListeners() {
+        // if(typeof this.customShapes !== "undefined"){
+        //   this.customShapes.call(this.dragShapeBehaviour)
+        // }
+        if (typeof this.annotations !== "undefined") {
+            //this.annotations.call(this.dragAnnotBehaviour);
+            this.lines.call(this.dragLineBehaviour);
+        }
+        return this;
+    }
+    removeListeners() {
+        // if(typeof this.customShapes !== "undefined"){
+        //   this.customShapes.on(".drag", null);
+        // }
+        if (typeof this.annotations !== "undefined") {
+            //this.annotations.on(".drag", null);
+            this.lines.on(".drag", null);
+        }
+        return this;
+    }
+    resetListeners() {
+        this.removeListeners();
+        this.setListeners();
+    }
+    dragStarted() {
+        this.draggedAnnot = d3.event.sourceEvent.currentTarget;
+        this.draggedLine = d3.event.sourceEvent.currentTarget;
+        this.draggedShape = d3.event.sourceEvent.currentTarget;
+        try {
+            this.attachedLine = this.draggedAnnot.closest("g").getElementsByTagName("line")[0];
+        }
+        catch (_a) {
+            this.attachedLine = undefined;
+        }
+        this.dragStartCoords = [d3.event.x, d3.event.y];
+        this.dx = this.dragStartCoords[0];
+        this.dy = this.dragStartCoords[1];
+    }
+    ////////// ANNOTS //////////
+    initAnnots() {
+        this.dragAnnotBehaviour = d3.drag()
+            .on('start', this.dragStarted.bind(this))
+            .on('drag', this.draggingAnnot.bind(this))
+            .on('end', this.dragAnnotEnded.bind(this));
+        this.annotations = d3.selectAll(".annotText");
+        this.dragStartCoords = new Array(this.annotations.size());
+        this.draggedAnnot = null;
+        this.resetListeners();
+    }
+    draggingAnnot() {
+        this.dx = d3.event.x;
+        this.dy = d3.event.y;
+        this.draggedAnnot.setAttribute("x", (this.dx).toString());
+        this.draggedAnnot.setAttribute("y", (this.dy).toString());
+        this.attachedLine.setAttribute("x1", this.draggedAnnot.getAttribute("x"));
+        this.attachedLine.setAttribute("y1", this.draggedAnnot.getAttribute("y"));
+    }
+    dragAnnotEnded() {
+    }
+    //////////// LINE ////////////////////
+    initDragRects() {
+        this.dragLineBehaviour = d3.drag()
+            .on('start', this.dragStarted.bind(this))
+            .on('drag', this.draggingLine.bind(this))
+            .on('end', this.dragLineEnded.bind(this));
+        this.lines = d3.selectAll(".lineDragRect");
+        this.dragStartCoords = new Array(this.lines.size());
+        this.draggedLine = null;
+        this.resetListeners();
+    }
+    draggingLine() {
+        this.dx = d3.event.x;
+        this.dy = d3.event.y;
+        this.draggedLine.setAttribute("x", (this.dx).toString());
+        this.draggedLine.setAttribute("y", (this.dy).toString());
+        this.attachedLine.setAttribute("x2", this.draggedLine.getAttribute("x"));
+        this.attachedLine.setAttribute("y2", this.draggedLine.getAttribute("y"));
+        this.highlightObjectCallback(this.draggedLine);
+    }
+    dragLineEnded() {
+        this.snapToObjCallback(this.attachedLine);
+    }
+    //////////// CALLBACKS ////////////
+    setSnapToObjCallback(snapToObj) {
+        this.snapToObjCallback = snapToObj;
+        return this;
+    }
+    removeUpdateAnnotationIDsCallback() {
+        this.snapToObjCallback = undefined;
+        return this;
+    }
+    sethighlightObjectCallback(highlightObjectCallback) {
+        this.highlightObjectCallback = highlightObjectCallback;
+    }
+    setUpdateCallback(updateCallback) {
+        this.updateCallback = updateCallback;
+    }
+}
+exports.default = AnnotationLineHandler;

package/src/scripts/js/handlers/ArticulationHandler.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cq = require("../utils/convenienceQueries");
+class ArticulatioHandler {
+    setListeners() {
+    }
+    removeListeners() {
+        throw new Error("Method not implemented.");
+    }
+    setM2S(m2s) {
+        this.m2s = m2s;
+        return;
+    }
+    setContainerId(containerId) {
+        this.containerId = containerId;
+        this.container = cq.
+        ;
+        return this;
+    }
+}

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

@@ -0,0 +1,265 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const coordinates = require("../utils/coordinates");
+const cq = require("../utils/convenienceQueries");
+class ClickModeHandler {
+    constructor() {
+        /**
+         * 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")
+                });
+            }
+        }).bind(this);
+        this.hideCursor = function () {
+            if (this.interactionOverlay.querySelector(".moving") !== null)
+                return;
+            this.container.querySelectorAll("#phantomCanvas > *").forEach(ph => {
+                ph.setAttribute("visibility", "hidden");
+            }); // make phantoms invisible
+        }.bind(this);
+        this.showCursor = function () {
+            this.container.querySelectorAll("#phantomCanvas > *").forEach(ph => ph.setAttribute("visibility", "visible")); // make phantoms invisible
+        }.bind(this);
+        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");
+                            });
+                        }
+                    }
+                }
+                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;
+            }
+        }).bind(this);
+    }
+    setListeners() {
+        this.interactionOverlay.addEventListener('click', this.clickHandler);
+        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);
+            }
+        });
+        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('click', this.clickHandler);
+        });
+    }
+    removeListeners() {
+        this.interactionOverlay.removeEventListener('click', this.clickHandler);
+        this.interactionOverlay.removeEventListener("mousemove", this.mouseOverChordHandler);
+        if (this.annotations != undefined) {
+            var highLightElements = this.annotations.getAnnotationCanvas().querySelectorAll(".highlightChord");
+            Array.from(highLightElements).forEach(el => {
+                el.remove();
+            });
+        }
+        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('click', this.clickHandler);
+        });
+    }
+    resetListeners() {
+        this.removeListeners();
+        this.setListeners();
+    }
+    /**
+         * Find Score Element nearest to given Position (e.g. Mouse)
+         * @param posx client position
+         * @param posy client position
+         * @returns
+         */
+    findScoreTarget(posx, posy) {
+        var _a;
+        var nextNote = this.m2s.findScoreTarget(posx, posy);
+        if (nextNote != undefined) {
+            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;
+    }
+    ///// GETTER / SETTER////////////////
+    setm2s(m2s) {
+        this.m2s = m2s;
+        return this;
+    }
+    setMusicProcessor(musicPlayer) {
+        this.musicPlayer = musicPlayer;
+        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/handlers/CustomAnnotationShapeDrawer.js

@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const d3 = require("d3");
+const random_1 = require("../utils/random");
+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("#" + 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() {
+            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)
+            }
+        }
+        this.setListeners();
+    }
+    drawing() {
+        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) {
+            this.dragged = true;
+            const newX = curX < this.initialX ? curX : this.initialX;
+            const newY = curY < this.initialY ? curY : this.initialY;
+            const width = curX < this.initialX ? this.initialX - curX : curX - this.initialX;
+            const height = curY < this.initialY ? this.initialY - curY : curY - this.initialY;
+            this.updateRect(newX, newY, width, height);
+            //this.updateCircle(newX, newY, width, height);
+        }
+    }
+    drawEnd() {
+        if (this.shapeID === "")
+            return;
+        if (!this.dragged) {
+            var elToRemove = this.interactionOverlay.querySelector("#" + this.shapeID);
+            if (elToRemove !== null) {
+                elToRemove.remove();
+            }
+        }
+        else {
+            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;
+        this.updateCallback();
+    }
+    initRect(ulx, uly) {
+        this.shapeID = random_1.uuidv4();
+        this.canvas.append('rect')
+            .attr('x', ulx)
+            .attr('y', uly)
+            .attr('width', 0)
+            .attr('height', 0)
+            .attr("class", "customAnnotShape")
+            .attr("id", this.shapeID);
+        this.shape = document.getElementById(this.shapeID);
+    }
+    initCircle(cx, cy) {
+        this.shapeID = random_1.uuidv4();
+        this.canvas.append('ellipse')
+            .attr('cx', cx)
+            .attr('cy', cy)
+            .attr('rx', 0)
+            .attr('ry', 0)
+            .attr("class", "customAnnotShape")
+            .attr("id", this.shapeID);
+        this.shape = document.getElementById(this.shapeID);
+    }
+    updateRect(newX, newY, currentWidth, currentHeight) {
+        this.shape.setAttribute('x', newX.toString());
+        this.shape.setAttribute('y', newY.toString());
+        this.shape.setAttribute('width', currentWidth.toString());
+        this.shape.setAttribute('height', currentHeight.toString());
+    }
+    updateCircle(newX, newY, currentWidth, currentHeight) {
+        this.shape.setAttribute('cx', newX.toString());
+        this.shape.setAttribute('cy', newY.toString());
+        this.shape.setAttribute('rx', currentWidth.toString());
+        this.shape.setAttribute('ry', currentHeight.toString());
+    }
+    removeListeners() {
+        d3.select("#" + this.containerId + " #interactionOverlay").on('mousedown.drag', null);
+    }
+    setListeners() {
+        this.canvas.call(this.dragBehaviour);
+    }
+    resetListeners() {
+        this.removeListeners();
+        this.setListeners();
+    }
+    ///////// GETTER/ SETTER ////////
+    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;
+    }
+    //////////// CALLBACKS /////////////
+    setUpdateCallback(updateCallback) {
+        this.updateCallback = updateCallback;
+    }
+}
+exports.default = CustomAnnotationShapeDrawer;