Organizational changes with xml

Author: LukeHennessy501

src/CompositionBlocks.jsx

@@ -1,23 +1,38 @@
 import { useEffect, useRef, useState } from 'react';
 import { BlocklyWorkspace } from 'react-blockly';
-import { buildToolBox, newBlocklyBlockForNote, notesFromJSON } from './blockly-setup';
+import { buildToolBox, notesFromJSON, blocklyNoteFromMusicXMLNote, newBlocklyBlockForNote, extractMeasures, recreateMusicJSON} from './blockly-setup';
+
 
 
 
 export default function CompositionBlocks({ flatJSON }) {
-  console.log("composition blocks", flatJSON)
+  console.log("composition blocks", flatJSON) 
   const [xml, setXml] = useState('');
   const renderedXMLRef = useRef(null);
 
 
+  // const willSetXml = (newXml) => {
+  //   console.log('willSetXml', newXml);
+  //   console.log('current ref value', renderedXMLRef.current);
+
+
+  //   setXml(newXml);
+
+
+  // };
+
   const willSetXml = (newXml) => {
     console.log('willSetXml', newXml);
-    console.log('current ref value', renderedXMLRef.current);
+    
+    setXml(newXml);
 
+    // Update JSON with the new measures
+    const updatedJSON = recreateMusicJSON(newXml, flatJSON);
 
-    setXml(newXml);
+    console.log("Updated JSON:", updatedJSON);
+    // TODO: Pass this back to flat?
+};
 
-  };
 
   const [toolbox, setToolbox] = useState({});
   useEffect(() => {
@@ -41,7 +56,6 @@ export default function CompositionBlocks({ flatJSON }) {
 
   return (
     <div>
-
       {toolbox.contents && (
         <BlocklyWorkspace
           toolboxConfiguration={toolbox} // this must be a JSON toolbox definition

src/blockly-setup.js

@@ -78,11 +78,98 @@ function createBlocksFromJSON(workspace, json) {
   }
 }
 
+// Function to extract measure blocks from the XML string
+function extractMeasures(xmlDoc) {
+  let measureBlocks = xmlDoc.getElementsByTagName("block"); // Get all <block> elements from input
+  let extractedMeasures = [];
+
+  // Function to process a single measure block
+  function processMeasure(measureBlock) {
+      if (measureBlock.getAttribute("type") !== "measure") return null; // change/remove this if adding more blocks?
+
+      let measure = { note: [] };
+      let notesStatement = measureBlock.getElementsByTagName("statement")[0]; // Find the NOTES statement inside measure
+
+      if (notesStatement) {
+          let noteBlock = notesStatement.getElementsByTagName("block")[0]; // Get the first note block inside the statement
+          let extractedNotes = []; 
+
+          // Traverse through the linked notes using the <next> tag
+          while (noteBlock) {
+              if (noteBlock.getAttribute("type") === "play_sound") { // Ensure the block is a play_sound type
+                  let noteData = {}; // Object to store note properties
+                  let fields = noteBlock.querySelectorAll(":scope > field"); // Get only direct child fields
+
+                  for (let field of fields) {
+                      noteData[field.getAttribute("name").toLowerCase()] = field.textContent; // Store note attributes
+                  }
+
+                  // Push formatted note data into extractedNotes array
+                  extractedNotes.push({
+                      staff: "1",
+                      voice: "1",
+                      duration: noteData.duration === "quarter" ? "1" :
+                          noteData.duration === "half" ? "2" :
+                              noteData.duration === "whole" ? "4" : "1",
+                      pitch: { octave: noteData.octave, step: noteData.step },
+                      type: noteData.duration
+                  });
+              }
+
+              // Move to the next note in the <next> chain
+              let nextElement = noteBlock.querySelector(":scope > next");
+              noteBlock = nextElement ? nextElement.querySelector(":scope > block") : null;
+          }
+
+          measure.note = extractedNotes.reverse(); // Reverse extracted notes to maintain visual order
+      }
+
+      return measure;
+  }
+
+  // Loop through all measure blocks and extract data
+  for (let block of measureBlocks) {
+      let measure = processMeasure(block);
+      if (measure) extractedMeasures.push(measure);
+  }
+
+  return extractedMeasures;
+}
+
+// Function to recreate JSON from updated XML
+function recreateMusicJSON(xmlString, originalJSON) {
+  const parser = new DOMParser(); // Create a new DOMParser instance
+  const xmlDoc = parser.parseFromString(xmlString, "text/xml"); // Parse XML string into a document
+
+  let newMeasures = extractMeasures(xmlDoc); // Extract measure data from the XML
+
+  let updatedJSON = JSON.parse(JSON.stringify(originalJSON)); // Deep copy original JSON to avoid modifying input
+  let existingMeasures = updatedJSON?.["score-partwise"]?.["part"]?.[0]?.["measure"] || []; // Locate the measures section in JSON
+
+  // Update or add measures in the JSON
+  for (let i = 0; i < newMeasures.length; i++) {
+      if (existingMeasures[i]) {
+          existingMeasures[i].note = newMeasures[i].note; // Update existing measure notes
+      } else {
+          existingMeasures.push(newMeasures[i]); // Add new measure if it doesn't exist
+      }
+  }
+
+  // Remove extra measures if necessary
+  if (existingMeasures.length > newMeasures.length) {
+      existingMeasures.length = newMeasures.length; // Trim array to match new data
+  }
+
+  return updatedJSON;
+}
+
 
 
 export {
   buildToolBox,
   notesFromJSON,
   blocklyNoteFromMusicXMLNote,
-  newBlocklyBlockForNote
+  newBlocklyBlockForNote,
+  extractMeasures,
+  recreateMusicJSON
 }

src/flatMelodyViewer.jsx

@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
 import Embed from 'flat-embed';
 
 function FlatMelodyViewer({
-  height = 300,
+  height = 400,
   width = '100%',
   score,
   onLoad,