vibe-editor 0.0.5 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-editor",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "main": "src/scripts/js/scripts/VIBE.js",
   "keywords": [],
   "author": "Matthias Nowakowski",
@@ -15,7 +15,8 @@
   "files": [
     "src/images/*/*",
     "src/scripts/js/*",
-    "src/fonts/*"
+    "src/fonts/*",
+    "src/styles/*.css"
   ],
   "dependencies": {
     "@babel/plugin-transform-classes": "^7.16.7",

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

@@ -76,17 +76,13 @@ class PhantomElementHandler {
         var _a, _b, _c, _d, _e;
         if (this.m2s.getLastMouseEnter().staff === null)
             return;
-        // var pt = coordinates.transformToDOMMatrixCoordinates(e.clientX, e.clientY, this.interactionOverlay)
-        // var relX = pt.x
-        // var relY = pt.y
         var definitionScale = (_b = cq.getVrvSVG(this.containerId).querySelector("#" + ((_a = this.m2s.getLastMouseEnter().staff) === null || _a === void 0 ? void 0 : _a.getAttribute("refId")))) === null || _b === void 0 ? void 0 : _b.closest(".definition-scale");
-        if (definitionScale == undefined || definitionScale == null)
+        if (!definitionScale)
             return;
-        var pt = coordinates.transformToDOMMatrixCoordinates(e.clientX, e.clientY, this.interactionOverlay);
+        var pt = coordinates.transformToDOMMatrixCoordinates(e.clientX, e.clientY, cq.getInteractOverlay(this.containerId));
         var relX = pt.x;
         var relY = pt.y;
-        var dsCoords = coordinates.getDOMMatrixCoordinates(definitionScale, definitionScale.closest(".page"));
-        //console.log(relX, dsCoords, definitionScale.getBoundingClientRect())
+        var dsCoords = coordinates.getDOMMatrixCoordinates(definitionScale, cq.getInteractOverlay(this.containerId));
         if (relX < dsCoords.left || relX > dsCoords.right) {
             this.isTrackingMouse = false;
             return;
@@ -117,9 +113,6 @@ class PhantomElementHandler {
             });
             this.setPhantomLineListeners();
         }
-        // if(e.type === "draggingNote"){
-        //     console.log(phantomNoteElement, this.phantomLines)
-        // }
     }
     removeLines() {
         var lines = this.interactionOverlay.querySelectorAll(".phantomLine");

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

@@ -4,10 +4,6 @@ const cq = require("../utils/convenienceQueries");
 const meiConverter = require("../utils/MEIConverter");
 class WindowHandler {
     constructor() {
-        /**
-         * Update all elements that are affected by a window size change
-         */
-        this.scrollingTimer = new Array();
         this.updateFunction = this.update.bind(this);
         /**
          * Reload svg when registered events ended
@@ -26,17 +22,18 @@ class WindowHandler {
         while (this.w !== this.w.parent) {
             this.w = this.w.parent;
         }
+        this.scrollingTimer = new Array();
     }
     setListeners() {
         this.eventContainer = this.container;
         window.addEventListener("scroll", this.updateFunction);
         //window.addEventListener("resize", this.update)
-        this.w.addEventListener("resize", this.reloadSVGFunction);
+        //this.w.addEventListener("resize", this.reloadSVGFunction)
         this.w.addEventListener("deviceorientation", this.updateFunction);
         this.eventContainer.querySelector("#sidebarContainer").addEventListener("transitionend", this.updateFunction);
-        this.eventContainer.querySelector("#sidebarContainer").addEventListener("transitionend", this.reloadSVGFunction);
+        //this.eventContainer.querySelector("#sidebarContainer").addEventListener("transitionend", this.reloadSVGFunction)
         this.eventContainer.querySelector("#sidebarContainer").addEventListener("resizemove", this.updateFunction);
-        this.eventContainer.querySelector("#sidebarContainer").addEventListener("resizemove", this.reloadSVGFunction);
+        //this.eventContainer.querySelector("#sidebarContainer").addEventListener("resizemove", this.reloadSVGFunction)
         this.vrvSVG.addEventListener("scroll", this.updateFunction);
         //this.vrvSVG.addEventListener("resize", this.update)
         this.vrvSVG.addEventListener("deviceorientation", this.updateFunction);
@@ -71,6 +68,9 @@ class WindowHandler {
         (_h = this.eventContainer) === null || _h === void 0 ? void 0 : _h.removeEventListener("loadingEnd", this.loadContainerAttrFunction);
         return this;
     }
+    /**
+     * Update all elements that are affected by a window size change
+     */
     update(e) {
         var _a;
         // special rule for transition events since so much with different propertynames are fired

package/src/scripts/js/scripts/utils/VerovioWrapper.js

@@ -12,9 +12,9 @@ class VerovioWrapper {
         //@ts-ignore
         this.vrvToolkit = new verovio.toolkit() || null;
         this.r = 1;
-        // if (this.isRetina()) {
-        //   this.r = 2
-        // }
+        if (this.isRetina()) {
+            this.r = 2;
+        }
         this.widthValue = 1500;
         var pageWidth = (this.widthValue / (window.devicePixelRatio / this.r)) / (screen.availHeight / window.innerWidth);
         this.options = {
@@ -24,7 +24,7 @@ class VerovioWrapper {
             pageMarginTop: 50,
             adjustPageHeight: true,
             font: 'Bravura',
-            pageWidth: pageWidth,
+            //pageWidth: pageWidth, // adjust size with window size
             //pageHeight: pageWidth / 4,
             //justifyVertically: true,
             svgViewBox: true,

package/src/scripts/js/scripts/utils/coordinates.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.transformToDOMMatrixCoordinates = exports.getDOMMatrixCoordinates = void 0;
+exports.transformToDOMMatrixCoordinates = exports.getCanvasCordinates = exports.getDOMMatrixCoordinates = void 0;
 /**
  * Get DOMMatrix coordnates of element according to parent canvas class. Returns null if no canvas is found. If element is DOMRect, canvas must be provided
  * @param element
@@ -33,9 +33,33 @@ function getDOMMatrixCoordinates(element, canvas = null) {
     ptRB = ptRB.matrixTransform(canvasMatrix);
     var width = ptRB.x - ptLT.x;
     var height = ptRB.y - ptLT.y;
-    return { left: ptLT.x, top: ptLT.y, right: ptRB.x, bottom: ptRB.y, width: width, height: height, x: ptLT.x, y: ptLT.y };
+    return { left: ptLT.x, top: ptLT.y, right: ptRB.x, bottom: ptRB.y, width: width, height: height, x: ptLT.x, y: ptLT.y, matrix: canvasMatrix };
 }
 exports.getDOMMatrixCoordinates = getDOMMatrixCoordinates;
+function getCanvasCordinates(coords, canvas = null) {
+    if (!coords.matrix) {
+        throw new Error("DOMMatrix is missing.");
+    }
+    if (canvas === null) {
+        canvas = canvas instanceof Element ? canvas.closest(".canvas") : null;
+        if (canvas instanceof DOMRect) {
+            throw new Error("Canvas must be provided, if input is instance of DOMRect. Actual instance: " + canvas.constructor.name);
+        }
+        if (canvas === null)
+            return;
+    }
+    // Reverse the transformation
+    var canvasMatrix = coords.matrix.inverse();
+    var ptLT = new DOMPoint(coords.left, coords.top);
+    ptLT = ptLT.matrixTransform(canvasMatrix);
+    var ptRB = new DOMPoint(coords.right, coords.bottom);
+    ptRB = ptRB.matrixTransform(canvasMatrix);
+    var width = ptRB.x - ptLT.x;
+    var height = ptRB.y - ptLT.y;
+    // Create and return the DOMRect
+    return new DOMRect(ptLT.x, ptLT.y, width, height);
+}
+exports.getCanvasCordinates = getCanvasCordinates;
 /**
  * Transforms the given coordinates for a given canvas
  * @param x

package/src/styles/vibe.css

@@ -0,0 +1,811 @@
+@import '~bootstrap/dist/css/bootstrap.min.css';
+
+@font-face {
+     font-family: "Bravura";
+    src:  url('../fonts/bravura/svg/Bravura.svg#7377dd80c36b825ad2214a14c2421925') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "BravuraText";
+    src: url('../fonts/bravura/svg/BravuraText.svg#f678e10c1f5609a8428c245cc86aa255') format('svg');
+    font-weight: normal;
+    font-style: normal;}
+
+.dropdown button{
+    height: 100%;
+}
+
+.vibe-container{    
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: white;
+    /* overflow: scroll; */
+}
+
+body.waiting * {
+    cursor: wait !important;
+}
+/* 
+.textmode  * {
+    cursor: text;
+} */
+
+
+#scoreRects > :is(.notehead, .clef, .meterSig, .keySig, .rest, .harm, .manipulator, .slur, .tie, .tupletNum, .tupletBracket):hover{
+    cursor: pointer;
+}
+
+#scoreRects .notehead:hover{
+    cursor: ns-resize !important;
+}
+
+.clickmode{
+    cursor: crosshair
+}
+
+#vrvSVG{
+    top: 0px;
+    width: 100%;
+    height: auto;
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+}
+
+/* .layer:not(.activeLayer) *{
+    fill: rgba(0, 0 , 0, 0.2)
+} */
+
+/* .layer:not(.activeLayer) :is(.rest, .mRest) > use{
+    fill: rgba(0, 0 , 0, 0.0)
+} */
+
+.page{
+    translate: 0 10%;
+}
+
+#vrvSVG .systemLine{
+    stroke: black;
+    stroke-dasharray: 10rem;
+    stroke-width: 1rem;
+}
+
+#interactionOverlay{
+    position: absolute;
+    top: 0px;
+    width: 100%;
+    z-index: 100;
+}
+
+/* This one is for Debugging. 
+Change fill-opacity and stroke-opacity to display boundsing boxes*/
+.debug #scoreRects *, #scoreRects .moving{
+    stroke-width: 1px;
+    stroke: black;
+    fill: gray;
+    fill-opacity: 0.1;
+    stroke-opacity: 1;
+}
+
+/* .debug > div#svgContainer > svg#interactionOverlay{
+    stroke-width: 2px;
+    stroke: red;
+    stroke-opacity: 1;
+    stroke-dasharray: 10px;
+} */
+
+/* .debug #vrvSVG{
+    stroke-width: 2px;
+    stroke: blue;
+    stroke-opacity: 1;
+    stroke-dasharray: 2px;
+} */
+
+/* .debug .page{
+    stroke-width: 2px;
+    stroke: green;
+    stroke-opacity: 1;
+    stroke-dasharray: 5px;
+} */
+
+#scoreRects *{
+    stroke-width: 1px;
+    stroke: black;
+    fill: gray;
+    fill-opacity: 0;
+    stroke-opacity: 0;
+}
+
+
+text{
+    cursor: text;
+}
+
+
+/*
+#svgContainer, .annotLinkedText, .annotLinkedText *{
+    white-space: pre;
+}
+*/
+
+#svgContainer{
+    position: relative;
+    height: 100%;
+    overflow: scroll;
+}
+
+.staff.lastEntered > .staffLine:first-of-type, .staff.lastEntered > .staffLine:last-of-type, .staff.lastEntered ~ .barLine{
+    filter: drop-shadow(5px 16px 15px black)
+}
+
+/* .note, .note *, .rest, .rest *, .staff, .measure, .manipulator, .slur, .tie *{
+    cursor: pointer !important; 
+} */
+
+/*
+*   TOOLBAR
+*/
+
+.verticalLine{
+    border-left: 1px solid black;
+    height: auto;
+    position: absolute;
+}
+
+#insertMode.empty{
+    background-image: url(../images/GUI/edit-solid.svg);
+    background-position-x: 10%;
+}
+
+
+#insertMode{
+    background-color: white;
+    color: black;
+}
+
+.smufl{
+    font-family: "BravuraText";
+    /* font-size: xx-large; */
+    font-size: 160%;
+}
+
+.harm *{
+    font-family: "BravuraText";
+}
+
+#playBtn{
+    background-image: url(../images/GUI/play-solid.svg);
+    background-size: 80%;
+}
+
+#pauseBtn{
+    background-image: url(../images/GUI/pause-solid.svg);
+    background-size: 80%;
+}
+
+#rewindBtn{
+    background-image: url(../images/GUI/backward-fast-solid.svg);
+    background-size: 80%;
+}
+
+#zoomInBtn{
+    background-image: url(../images/GUI/zoomin.svg);
+    background-size: 80%;
+}
+
+#zoomOutBtn{
+    background-image: url(../images/GUI/zoomout.svg);
+    background-size: 80%;
+}
+
+#tupletBtn{
+    background-image: url(../images/GUI/triplet.svg);
+    background-size: 80%;
+    color: rgba(0, 0, 0, 0.0)
+}
+
+.btn{
+    background-repeat: no-repeat;
+    background-position-x: center;
+    background-position-y: center;
+    outline: none;
+    font-family: Bravura;
+    font-size: larger;
+}
+
+.articulationGroup .btn{
+    font-size: larger;
+}
+
+.btn-group-md{
+    display: flex;
+}
+
+/* .btn:hover, .btn.selected {
+    filter: invert();
+    color: black;
+    background-color: white;
+} */
+
+.btn:hover{ 
+   background-color: lightgray;
+   color: #ffffff;
+   
+ }
+ 
+ .btn.selected {
+   background-color: black;
+   color: #ffffff;
+   
+ }
+
+#btnToolbar{
+    top: 0px;
+    transition: 0.5s;
+    /*height: 5%;*/
+}
+
+#customToolbar :first-child{
+ margin-left: 0.25em;
+}
+
+#customToolbar{
+    box-shadow: 0px 1px 3px lightgray;
+}
+
+#btnToolbar{
+    box-shadow: inset 0px -3px 3px lightgray;
+}
+
+.dropdown-item.selected{
+    background-color: antiquewhite;
+    font-weight: bold;
+}
+
+.accordion-item, .accordion-header{
+    border-bottom-style: solid;
+    border-bottom-color: black;
+    border-bottom-width: 1.5px;
+}
+
+.accordion-button{
+    padding: 1.5rem 1.25rem !important;
+}
+
+#midiDeviceSelect{
+ width: 100%;
+}
+
+#toggleSidebar{
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+}
+
+#toggleSidebar.closedSidebar{
+    background-image: url(../images/GUI/bars-solid.svg);
+    background-size: 80%;
+}
+
+#toggleSidebar.openSidebar{
+    background-image: url(../images/GUI/bars-solid.svg);
+    background-size: 80%;
+}
+
+#insertDropdownKM .hide{
+    display: none;
+}
+
+#insertToggleDiv{
+    display: none;
+}
+
+#fileSelectGroup{
+  align-self: flex-end;
+  margin-left: auto;
+  display:flex;
+}
+
+/* #midiSelectGroup{
+    align-self:baseline;
+    margin-left: auto;
+  display:flex
+} */
+
+#handlerGroup{
+    display: none
+}
+
+#importXML, #importAudioFile{
+    display: none;
+}
+
+#sidebarContainer{
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    border-color: black;
+    border-style: solid;
+    border-width: 1px;
+    background-color: white;
+    transition: 0.5s;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    overflow: visible;
+    display: flex;
+    flex-direction: column;
+}
+
+#sidebarContainer a{
+    display: block;
+    padding-left: 10px;
+}
+
+/* #sidebarContainer *{
+    font-size: 10pt;
+} */
+
+#sidebarContainer.closedSidebar{
+    visibility: hidden;
+    width: 0
+}
+
+#sidebarContainer.openSidebar{
+    visibility: visible;
+    width: 10%;
+}
+
+#sidebarContainer.openSidebar ~ div {
+    margin-left: 10%;
+    width: 90%;
+    flex-wrap: wrap;
+    display: flex;
+    transition: 0.5s;
+}
+
+#sidebarContainer.closedSidebar ~ div{
+    margin-left: 0;
+    width: 100%;
+    transition: 0.5s;
+}
+
+#sidebarList{
+    position: relative;
+    overflow: scroll;
+    width: 100%;
+    resize: vertical;
+}
+
+.dropKey, .dropClef, .dropTime, .dropTempo{
+    fill: orange;
+    color: orange;
+}
+
+#timeDiv{
+    cursor:pointer !important;
+}
+
+#annotList{
+    width: 100%;
+    position: relative;
+    background-color: white;
+    border-top-color: black;
+    border-left-color: white;
+    border-right-color: white;
+    border-bottom-color: white;
+    border-style: double;
+    overflow: scroll;
+    order: 2;
+    resize: vertical;
+}
+
+#annotList > a{
+    white-space: pre-line;
+    overflow: unset;
+}
+
+
+.list-group{
+    display: block;
+}
+
+#btnToolbar{
+    display: flex;
+}
+
+.btn-toolbar:not(:empty){
+    border-top-color: rgba(0, 0, 0, 0);
+    border-right-color: rgba(0, 0, 0, 0);
+    border-left-color: rgba(0, 0, 0, 0);
+    border-bottom-color: black;
+    border-bottom-style: solid;
+    border-bottom-width: 3px;
+}
+
+.tabBtn{
+    border-bottom-color: rgba(0, 0, 0, 0.0);
+    border-bottom-left-radius: 0% !important;
+    border-bottom-right-radius: 0% !important;
+    margin-bottom: -3px;
+}
+[role="group"]{
+    margin-top: 3px;
+    margin-bottom: 3px;
+}
+
+#customToolbar [role="group"]{
+    margin-top: 1%;
+    margin-bottom: 1%;
+}
+
+[role="group"] button:first-of-type{
+    border-bottom-left-radius: .2rem;
+    border-top-left-radius: .2rem;
+}
+
+[role="group"] button:last-of-type{
+    border-bottom-right-radius: .2rem;
+    border-top-right-radius: .2rem;
+}
+
+.btn-group-md>.btn, .btn-sm{
+    border-radius: 0%;
+}
+
+
+/*
+* ANNOTATIONS
+*/
+
+/* 
+#annotationCanvas.back *{
+   opacity: 0.5;
+}*/
+
+/* #annotationCanvas.front *{
+    opacity: 1;
+} */
+
+
+
+.annotLinkedText .annotFO{
+    /*background-color: rgba(255, 255, 153, 0.8);*/
+    background-color: rgba(0, 0, 0, 0.1);
+    border-radius: 0px 10px 10px 10px;
+    border-color: black;
+    border-style: solid;
+    border-width: 3px;
+    position: absolute;
+}
+
+.annotFO{
+    /* width: 100%;
+    height: 100%; */
+    width: 15%;
+    height: 10%;
+}
+
+
+.annotStaticText .annotFO div{
+    background-color: rgb(201, 167, 167);
+    border: 1px solid black;
+}
+
+.annotDiv{
+    height: 100%;
+    width: 100%;
+}
+
+.annotLine{
+    stroke-width: 2px;
+    stroke: lightskyblue;
+    stroke-dasharray: 2px;
+}
+
+
+.lineDragRect{
+    stroke-width: 1px;
+    stroke: black;
+    fill: wheat;
+    height: 10px;
+    width: 10px;
+    transform: translate(-5, -5);
+}
+
+.highlightAnnotation, .highlightChord{
+    /*fill-opacity: 0.1;
+    outline-style: dotted;
+    outline-width: 0.5px;
+    outline-color: black; */
+    filter: drop-shadow( 0px 0px 3em teal)
+}
+
+#playCursor{
+    stroke-width: 10px;
+    stroke: orangered;
+}
+
+.layer[n="1"] .highlighted{
+    
+    filter: drop-shadow(30px 10px 4px rgb(255, 71, 255));
+} 
+
+#phantomNote.l1{
+    fill: rgb(255, 71, 255)
+}
+
+
+.layer[n="2"] .highlighted{
+    filter: drop-shadow(30px 10px 4px green);
+}
+
+#phantomNote.l2{
+    fill: green;
+}
+
+.layer[n="3"]  .highlighted{
+    filter: drop-shadow(30px 10px 4px blue);
+}
+
+#phantomNote.l3{
+    fill: blue;
+}
+
+.layer[n="4"]  .highlighted{
+    filter: drop-shadow(30px 10px 4px orange);
+}
+
+#phantomNote.l4{
+    fill: orange;
+}
+
+.customAnnotShape{
+    fill: orange;
+    fill-opacity: 0.2;
+    outline-style: dotted;
+    outline-width: 0.5px;
+    outline-color: black; 
+}
+
+.customAnnotShape.selected{
+    outline-style: dashed;
+    outline-color:cornflowerblue;
+    outline-width: 1;
+}
+
+
+.annotLinkedText.selected > .annotFO, .annotStaticText.selected > .annotFO{
+    border-color:cornflowerblue;
+    border-width: 1;
+    border-style: dashed;
+}
+
+
+[contentEditable=false]:empty:not(:focus):before{
+    content:attr(data-text);
+    color: lightgray;
+}
+
+g.currentlyPlaying *{
+    fill:red !important;
+    fill-opacity: 1;
+}
+
+#followerRect{
+    fill: red;
+    fill-opacity: 0.3;
+    outline-style: none;
+}
+
+.marked, .marked *{
+    /* fill: red !important; */
+    filter: invert() drop-shadow(0 0 1rem crimson); 
+}
+
+.lastAdded{
+    fill:darkcyan
+}
+
+.playing{
+    fill: red
+}
+
+/* LABELS */
+
+.labelDiv{
+    border: 2px solid black;
+    border-radius: 10px;
+    height: fit-content;
+    width: fit-content;
+    min-width: 50px;
+    background-color: beige;
+    font-size: 40px;
+    font-family: 'Times New Roman', Times, serif;
+}
+
+.labekFO{
+    height: 100%;
+    width: 100%;
+}
+
+/* KEYMODE */
+
+#keyModeSelectRect{
+    stroke: black;
+    stroke-opacity: 1;
+    stroke-width: 2px;
+    fill: lightskyblue;
+    fill-opacity: 0.4;
+}
+
+/* #manipulatorCanvas > #cursor{
+    display: none
+} */
+
+/* CLICK MODE */
+
+
+/* #phantomNote{
+    transform: skew(-20deg);
+} */
+
+
+.phantomLine, .phantomMarker{
+    stroke-width: 2px;
+    stroke:black;
+    opacity: 0.5;
+}
+
+
+/*StatusBar*/
+
+#statusBar{
+    position: absolute;
+    height: 5%;
+    width: 100%;
+    bottom: 0;
+    background-color: lightskyblue;
+    border-style: outset;
+    z-index: 100;
+}
+
+
+/*Score Manipulator*/
+
+#manipulatorCanvas{
+    z-index: 101;
+}
+
+.signElement{
+    stroke: black;
+    stroke-width: 10%;
+}
+
+#measureAdder, #measureRemover{
+    height: 10%;
+    width: 10%;
+}
+
+#manipulationButton{
+    stroke:black;
+    stroke-width: 5%;
+    fill: antiquewhite;
+}
+
+.manipulator:hover *:not(.selected) , .manipulator.selected{
+    filter: invert();
+    cursor: pointer;
+}
+
+.voiceBtn.inactive  rect{
+   fill: lightgray;
+}
+
+.voiceBtn.inactive  text{
+    fill: gray;
+ }
+
+
+.voiceBtn  rect, .voiceBtn foreignObject{
+    stroke-width: 5%;
+    stroke: black;
+    width: 100%;
+    height: 100%;
+    fill: antiquewhite
+}
+
+rect.voiceBtn{
+    stroke: black;
+    fill: antiquewhite;
+}
+
+.voiceBtn foreignObject > div{
+    text-align: center;
+    position:relative;
+    top: -20%;
+}
+
+/* .voiceBtn  text, .voiceBtn foreignObject > div{
+    font-size: 100%;
+    width: 100%;
+    height: 100%;
+    fill: black;
+}
+
+
+
+rect.voiceBtn + text{
+    font-size: 100%;
+    fill: black;
+} */
+
+.tooltip.show{
+    display:contents;
+    background: skyblue;
+    color: #643045;
+    font-weight: bold;
+    padding: 5px 10px;
+    font-size: 13px;
+    border-radius: 4px;
+    border-color: maroon;
+    display: block;
+    opacity: 1;
+    position: absolute;
+  }
+
+/* .tooltip{
+    inset:  !important;
+} */
+
+.tooltip.hide{
+    display: none
+}
+
+.overfillMark{
+    color:rgba(0, 0, 0, 0.5);
+    font-size: 12em;
+    font-weight: bolder;
+    z-index: 100;
+
+}
+
+/*Disable interaction*/
+
+#ff_warning{
+    background: rgba(0, 0, 0, 0.25);
+    width: 100%;
+    margin: auto;
+    height: 100%;
+    text-align: center;
+    font-size: xx-large;
+    color:crimson;
+    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
+}
+
+.hideUI{
+    display: none !important;
+}
+
+#pauseNote{
+    display: none;
+}
+
+#interactionOverlay, #vrvSVG > svg{
+    transform-origin: top left
+}
+
+.indexBase{
+    font-size: 0.7em;
+}
+
+foreignObject > [contenteditable]{
+    font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
+    font-size: 1em;
+}
+
+button{
+    box-shadow: none !important;
+}