vibe-editor 0.0.4 → 0.0.6

package/src/scripts/js/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/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

@@ -478,11 +478,19 @@ text{
     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: white;
+    background-color: rgb(201, 167, 167);
     border: 1px solid black;
 }
 
@@ -692,16 +700,16 @@ g.currentlyPlaying *{
     cursor: pointer;
 }
 
-.voiceBtn.inactive > rect{
+.voiceBtn.inactive  rect{
    fill: lightgray;
 }
 
-.voiceBtn.inactive > text{
+.voiceBtn.inactive  text{
     fill: gray;
  }
 
 
-.voiceBtn > rect{
+.voiceBtn  rect, .voiceBtn foreignObject{
     stroke-width: 5%;
     stroke: black;
     width: 100%;
@@ -709,13 +717,31 @@ g.currentlyPlaying *{
     fill: antiquewhite
 }
 
-.voiceBtn > text{
+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;
@@ -777,7 +803,7 @@ g.currentlyPlaying *{
 
 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{