support for fluid beams

BeethovensWerkstatt · Nov 14, 2024 · 1e605c0 · 1e605c0
1 parent ac35124
commit 1e605c0
Showing 1 changed file with 41 additions and 1 deletion.
diff --git a/src/fluidTranscripts.js b/src/fluidTranscripts.js
@@ -16,7 +16,7 @@ ANIMATION PHASES:
 */
 
 export const generateFluidTranscription = ({ atSvgDom, dtSvgDom, atOutDom, dtOutDom, sourceDom }) => {
-    const supportedElements = ['note', 'accid', 'clef', 'keySig', 'meterSig', 'chord', 'barLine']
+    const supportedElements = ['note', 'accid', 'clef', 'keySig', 'meterSig', 'chord', 'barLine', 'beam', 'beamSpan']
 
     const ftSvgDom = atSvgDom.cloneNode(true)
 
@@ -216,6 +216,9 @@ const generateAnimation = (name, ftSvgNode, dtSvgNode, positions) => {
     } else if (name === 'chord') {
         // chords actually can use the same animation as notes
         generateAnimation_note(ftSvgNode, dtSvgNode, positions)
+    } else if (name === 'beamSpan' || name === 'beam') {
+        // chords actually can use the same animation as notes
+        generateAnimation_beam(ftSvgNode, dtSvgNode, positions)
     } else {
         console.warn('Unable to animate element ' + name)
     }
@@ -356,6 +359,43 @@ const generateAnimation_barLine = (atSvgNode, dtSvgNode, positions) => {
     }
 }
 
+const generateAnimation_beam = (atSvgNode, dtSvgNode, positions) => {
+    console.log('need to animate beam')
+    const atPolygons = atSvgNode.querySelectorAll('polygon')
+    const dtPolygons = dtSvgNode.querySelectorAll('polygon')
+
+    atPolygons.forEach((atPolygon, i) => {
+        const dtPolygon = dtPolygons[i]
+        if (dtPolygon) {
+            const atPoints = atPolygon.getAttribute('points').split(' ')
+            const dtPoints = dtPolygon.getAttribute('points').split(' ')
+
+            const ftPoints = []
+            atPoints.forEach((point, j) => {
+                const atX = parseFloat(point.split(',')[0])
+                const atY = parseFloat(point.split(',')[1])
+                const dtX = parseFloat(dtPoints[j].split(',')[0])
+                const dtY = parseFloat(dtPoints[j].split(',')[1])
+
+                const atOffX = positions.atCenter.x - atX
+                const atOffY = positions.atCenter.y - atY
+                const dtOffX = positions.dtCenter.x - dtX
+                const dtOffY = positions.dtCenter.y - dtY
+
+                const diffX = atOffX - dtOffX
+                const diffY = atOffY - dtOffY
+
+                const dtPos = (atX + diffX) + ',' + (atY + diffY)
+                ftPoints.push(dtPos)
+            })
+            const ftPointsValues = ftPoints.join(' ')
+            addTransForm(atPolygon, 'points', [ftPointsValues, atPoints, atPoints, atPoints])
+        } else {
+            generateHideAnimation(atPolygon)
+        }
+    })
+}
+
 const addTransformTranslate = (node, values = []) => {
     const anim = appendNewElement(node, 'animateTransform', 'http://www.w3.org/2000/svg')
     anim.setAttribute('attributeName', 'transform')