Shift notation by half notehead width to left

wergo · Dec 17, 2024 · 4625e3c · 4625e3c
1 parent 2f202bb
commit 4625e3c
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -140,6 +140,8 @@
       notationDiv.appendChild(scoreWarper.svgObj);
       // console.log('NotationDiv: ', notationDiv);
 
+      scoreWarper.shiftPageMargin();
+
       // list all warpable elements of score
       elementList = scoreWarper.svgObj.querySelector('.page-margin').querySelectorAll(
         'g.note, g.arpeg, :not(g.notehead):not(g.arpeg)>use[x], rect[x], text[x], polygon, ellipse, circle, path');
@@ -243,12 +245,18 @@
     function drawLinesInScore() {
       let definitionScaleElement = scoreWarper.svgObj.querySelector('.definition-scale');
       if (definitionScaleElement) {
-        let transform = definitionScaleElement.querySelector('.page-margin')?.getAttribute('transform');
+        let transforms = definitionScaleElement.querySelector('.page-margin')?.transform;
+        //definitionScaleElement.querySelector('.page-margin')?.getAttribute('transform');
         let lineContainer = definitionScaleElement.querySelector('.lineContainer');
         if (!lineContainer) {
           lineContainer = document.createElementNS(svgNS, 'g');
           lineContainer.classList.add('lineContainer');
-          lineContainer.setAttribute('transform', transform);
+
+          let matrix = transforms.baseVal.getItem(0).matrix;
+          let newTranslate = scoreWarper._svgObj.createSVGTransform();
+          newTranslate.setTranslate(matrix.e + scoreWarper.noteheadWidth / 2, 0);
+          lineContainer.transform.baseVal.appendItem(newTranslate);
+
           definitionScaleElement.appendChild(lineContainer);
         }
         if (!warped) {

diff --git a/scoreWarper.js b/scoreWarper.js
@@ -48,6 +48,25 @@ class ScoreWarper {
         this._pageMarginX = transformations.getItem(0).matrix.e;
     } // init()
 
+    /**
+     * Shift the page-margin group by half a notehead width to the left
+     */
+    shiftPageMargin() {
+        let pageMarginElement = this._svgObj.querySelector('.page-margin');
+        let transformations = pageMarginElement.transform.baseVal;
+
+        // get notehead width
+        let noteheadWidths =
+            Array.from(this._svgObj.querySelectorAll('.notehead'))
+                .map(
+                    (notehead) => notehead.getBBox().width
+                );
+        this._noteheadWidth = this.median(noteheadWidths);
+
+        // shift page margin by half a notehead width to the left
+        transformations.getItem(0).matrix.e = this._pageMarginX - this._noteheadWidth / 2;
+    } // shiftPageMargin()    
+
     /**
      * Scans maps file content and calculates the coordinates for
      * time, screen, and SVG. To be called, when new maps file content is loaded.
@@ -202,6 +221,13 @@ class ScoreWarper {
         return this._noteSVGXs;
     }
 
+    /**
+     * Get noteheadWidth
+     */
+    get noteheadWidth() {   
+        return this._noteheadWidth;
+    } // get noteheadWidth()
+
     /**
      * Get onsetSVGXs (SVG x values of onset times)
      */
@@ -388,10 +414,6 @@ class ScoreWarper {
      */
     computeWarpingArray() {
         let svgWidth = this._svgViewBox[2] - this._svgViewBox[0];
-        let noteheadWidths = Array.from(this._svgObj.querySelectorAll('.notehead use')).map(
-            (notehead) => notehead.getBBox().width
-        );
-        let noteheadWidthHalf = this.median(noteheadWidths) / 2;
         // console.debug('onsetSVGXs, ', onsetSVGXs);
         // console.debug('noteSVGXs, ', noteSVGXs);
         // console.debug('noteXs, ', noteXs);