exploratory is almost there! (right?)

JMU-CIME · Feb 25, 2024 · 8fb1bc1 · 8fb1bc1
1 parent 030602d
commit 8fb1bc1
Show file tree

Hide file tree

Showing 11 changed files with 3,286 additions and 1,322 deletions.
diff --git a/components/chordScaleBucketScore.js b/components/chordScaleBucketScore.js
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 import Embed from 'flat-embed';
-import { getChordScaleInKey, keyFromScoreJSON } from '../lib/flat';
+import { colorNotes, getChordScaleInKey, keyFromScoreJSON, colorMap} from '../lib/flat';
 
 function ChordScaleBucketScore({
   height,
@@ -95,7 +95,7 @@ function ChordScaleBucketScore({
 
     // start from bucket, create the notes, add them to measure
     template['score-partwise'].part[0].measure[0].note = bucket.map(
-      ({ alter, octave, step, $color = '#00000' }) => {
+      ({ alter, octave, step, $color = '#000000' }) => {
         const note = {
           staff: '1',
           voice: '1',
@@ -142,34 +142,6 @@ function ChordScaleBucketScore({
     return resultTransposed;
   };
 
-  function colorNotes(notes, color) {
-    for (let i = 0; i < notes.length; i++) {
-      notes[i].$color = color;
-    }
-  }
-  /**
-   *  Given a measure, and a string consisting of "rgbgrb..." we match the notes of the corresponding measure to that value.
-   *  For example, given a measure (1,2,3) and a string "rgb", the first measure would be colored red, second would be green, third would be green.
-   */
-  const colorMeasures = (measures, colorSpecs) => {
-    /**
-     * Colors an array of notes to a given hex color attribute.
-     */
-    const BLACK = '#000000';
-    const ORANGE = '#f5bd1f';
-    for (let i = 0; i < measures.length; i++) {
-      if (colorSpecs) {
-        if (Array.isArray(colorSpecs) && colorSpecs[i]) {
-          colorNotes(measures[i].note, colorSpecs[i]);
-        } else if (!Array.isArray(colorSpecs)) {
-          colorNotes(measures[i].note, colorSpecs);
-        }
-      } else {
-        colorNotes(measures[i], BLACK);
-      }
-    }
-    return measures;
-  };
   useEffect(() => {
     const embedParams = {
       // sharingKey: score.sharingKey,
@@ -182,6 +154,7 @@ function ChordScaleBucketScore({
       controlsFullscreen: false,
       controlsZoom: false,
       controlsPrint: false,
+      displayFirstLinePartsNames: false,
       toolsetId: '64be80de738efff96cc27edd',
     };
     let computedHeight = 300;
@@ -215,7 +188,14 @@ function ChordScaleBucketScore({
       }
 
       if (colors) {
-        colorNotes(bucket, colors);
+        console.log('colors', colors);
+        let mappedColors = colors;
+        if(Array.isArray(colors) && colors.length > 0) {
+          mappedColors = colors.map(colorMap);
+        } else {
+          mappedColors = colorMap(colors);
+        }
+        colorNotes(bucket, mappedColors);
       }
 
       // console.log('current JSON', copyJSON);

diff --git a/components/exploratoryCompose.js b/components/exploratoryCompose.js
@@ -5,6 +5,7 @@ import Embed from 'flat-embed';
 import {
   trimScore,
   pitchesToRests,
+  colorMeasures,
 } from '../lib/flat'
 
 function ExploratoryCompose({
@@ -13,6 +14,7 @@ function ExploratoryCompose({
   onUpdate,
   referenceScoreJSON,
   trim,
+  colors,
 }) {
   const [embed, setEmbed] = useState();
   const editorRef = React.createRef();
@@ -27,6 +29,7 @@ function ExploratoryCompose({
     controlsFullscreen: false,
     controlsZoom: false,
     controlsPrint: false,
+    displayFirstLinePartsNames: false,
     toolsetId: '64be80de738efff96cc27edd',
     mode: 'edit'
   };
@@ -41,9 +44,14 @@ function ExploratoryCompose({
   }, [height]);
 
 
-  function createJsonFromReference(reference) {
+  function createJsonFromReference(reference, colors) {
     let result = pitchesToRests(JSON.parse(reference));
     result = trim ? trimScore(result, trim) : result;
+    if (colors && colors.length > result['score-partwise'].part[0].measure.length) {
+      let measures = result['score-partwise'].part[0].measure;
+      result['score-partwise'].part[0].measure = colorMeasures(measures, colors);
+      // result['score-partwise'].part[0].measure
+    }
     return result;
   }
 
@@ -55,14 +63,33 @@ function ExploratoryCompose({
       .then(() => {
         if (!referenceScoreJSON) return embed;
 
-        const result = createJsonFromReference(referenceScoreJSON)
+        const result = createJsonFromReference(referenceScoreJSON, colors);
 
         return (
           embed.loadJSON(result).then(() => {
             embed.off('noteDetails');
-            embed.on('noteDetails', () => {
+            embed.on('noteDetails', (ev) => {
+              console.log('noteDetails', ev);
+              console.log('should color?', colors);
               embed.getJSON().then((jd) => {
                 const jsonData = jd;
+                if (
+                  colors &&
+                  jsonData['score-partwise'].part[0].measure.some((m) =>
+                    m.note.some((n) => !n.$color || n.$color === '#000000')
+                  )
+                ) {
+                  jsonData['score-partwise'].part[0].measure =
+                    colorMeasures(
+                      jsonData['score-partwise'].part[0].measure,
+                      colors
+                    );
+                  embed.getCursorPosition().then((position) =>
+                    embed.loadJSON(jsonData).then(() => {
+                        embed.setCursorPosition(position);
+                    })
+                  );
+                }
                 if (onUpdate) {
                   onUpdate(JSON.stringify(jsonData));
                 }

diff --git a/components/flatEditor.js b/components/flatEditor.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 import Embed from 'flat-embed';
@@ -52,9 +52,18 @@ function FlatEditor({
   instrumentName,
   slice,
   sliceIdx,
-  debugMsg
+  debugMsg,
+  selectedMeasureNotes
 }) {
-  const [json, setJson] = useState('');
+
+  function onFlatEditorError(e) {
+    if (debugMsg) {
+      console.error('debugMsg', debugMsg);
+    }
+    console.error('error in flat editor', e);
+  }
+  // const [json, setJson] = useState('');
+  const json = useRef('');
   const [embed, setEmbed] = useState();
   const [refId, setRefId] = useState('0');
   const editorRef = React.createRef();
@@ -179,8 +188,8 @@ function FlatEditor({
     }
 
     const resultTransposed = embed.ready().then(() => {
-      return embed.loadJSON(template);
-    });
+      return embed.loadJSON(template).catch(onFlatEditorError);
+    }).catch(onFlatEditorError);
     return resultTransposed;
   };
 
@@ -281,6 +290,19 @@ function FlatEditor({
               // if a user adds a note that is black or does not have a color assigned to it, then we apply the color from the chord scale pattern to match.
               score.scoreId === 'blank' &&
               embed.loadJSON(result).then(() => {
+                embed.off('cursorPosition');
+                embed.on('cursorPosition', (ev) => {
+                  console.log('cursorPos', ev)
+                  // selectedMeasureNotes
+                  console.log('json.current', json.current)
+                  if (selectedMeasureNotes && selectedMeasureNotes.current && selectedMeasureNotes.current.length > 0 && json.current !== '') {
+                    console.log('selectedMeasureNotes.current', selectedMeasureNotes.current)
+                    const scoreData = JSON.parse(json.current);
+                    scoreData['score-partwise'].part[0].measure[ev.measureIdx].note = JSON.parse(JSON.stringify(selectedMeasureNotes.current));
+                    selectedMeasureNotes.current = [];
+                    embed.loadJSON(JSON.stringify(scoreData)).catch(onFlatEditorError);
+                  }
+                });
                 embed.off('noteDetails');
                 embed.on('noteDetails', (info) => {
                   // console.log('noteDetails', info);
@@ -304,18 +326,18 @@ function FlatEditor({
                           if (edit) {
                             embed.setCursorPosition(position);
                           }
-                        })
+                        }).catch(onFlatEditorError)
                       );
                     }
                     const data = JSON.stringify(jsonData);
                     // validateScore(jsonData, [])
-                    setJson(data);
+                    json.current = data;
                     if (onUpdate) {
                       onUpdate(data);
                     }
                   });
                 });
-              })
+              }).catch(onFlatEditorError)
             );
           }
           return embed;
@@ -354,7 +376,8 @@ function FlatEditor({
                 // console.error(e);
                 throw e;
               })
-        );
+        )
+        .catch(onFlatEditorError);
     } else if (scoreJSON && embed) {
       // this is currently for the grade creativity screen
       embed
@@ -367,7 +390,7 @@ function FlatEditor({
             embed.on('noteDetails', (info) => {
               embed.getJSON().then((jsonData) => {
                 const data = JSON.stringify(jsonData);
-                setJson(data);
+                json.current = data;
                 if (onUpdate) {
                   onUpdate(data);
                 }
@@ -376,6 +399,9 @@ function FlatEditor({
           }
         })
         .catch((e) => {
+          if (debugMsg) {
+            console.error('debugMsg', debugMsg);
+          }
           console.error('score not loaded from json');
           console.error(e);
         });
@@ -391,7 +417,7 @@ function FlatEditor({
             if (embed) {
               embed.getJSON().then((jsonData) => {
                 onSubmit(jsonData);
-              });
+              }).catch(onFlatEditorError);
             }
           }}>Done Composing</Button>}
         </Col>