Merge pull request #93 from AaronDavidNewman/xml-smoosic

Smoosic schema definition

build/html/smoosic.html

@@ -14,7 +14,7 @@
         <!-- link href="https://aarondavidnewman.github.io/Smoosic/build/styles/bravura-font-codes.css" rel="stylesheet" -->
         <link href="../styles/bravura-font-codes.css" rel="stylesheet">
         <!-- script type="text/javascript" src="https://aarondavidnewman.github.io/vexflow_smoosic/releases/vexflow-debug.js"></script -->
-        <script type="text/javascript" src="../../node_modules/vexflow_smoosic/build/cjs/vexflow-debug.js"></script>
+        <script type="text/javascript" src="../../node_modules/vexflow_smoosic/build/cjs/vexflow-debug-with-tests.js"></script>
         <!-- script src="https://unpkg.com/vexflow@4.0.1/build/cjs/vexflow-debug.js"></script -->
         <!-- script type="text/javascript" src="..\..\node_modules\vxflw-early-access\build\cjs\vexflow-debug.js"></script -->
         <!---- script type="text/javascript" src="../../vxflw-early-access/build/cjs/vexflow-debug.js"></script -->

build/styles/bravura-font-codes.css

@@ -9,3 +9,19 @@
 .icon-accidentalFlat:before {
   content: "\e260";
 }
+
+.icon-caesura:before {
+  content: "\e4d2"
+}
+
+.icon-breath:before {
+  content: "\e4ce"
+}
+
+.icon-pedal-open:before {
+  content: "\e650"
+}
+
+.icon-pedal-closed:before {
+  content: "\e655"
+}

package.json

@@ -6,16 +6,18 @@
     "@typescript-eslint/parser": "^4.29.1",
     "copy-webpack-plugin": "^12.0.2",
     "jquery": "^3.6.0",
+    "ts-node": "^10.9.2",
     "webpack": "^5.89.0",
-    "webpack-cli": "^4.7.2"
+    "webpack-cli": "^4.7.2",
+    "xsd-validator": "^1.1.1"
   },
   "dependencies": {
     "midi-parser-js": "^4.0.4",
     "midi-writer-js": "^1.7.5",
     "ts-loader": "^9.2.5",
     "typedoc": "^0.25.0",
     "typescript": "^5.2.2",
-    "vexflow_smoosic": "4.2.6",
+    "vexflow_smoosic": "4.2.7",
     "xmldom": "^0.6.0"
   },
   "description": "<sub>[Github site](https://github.com/AaronDavidNewman/smoosic) | [source documentation](https://aarondavidnewman.github.io/Smoosic/release/docs/modules.html) | [change notes](https://aarondavidnewman.github.io/Smoosic/changes.html) | [application](https://aarondavidnewman.github.io/Smoosic/release/html/smoosic.html)<sub>",

release/html/smoosic.html

@@ -13,8 +13,8 @@
         <link href="https://aarondavidnewman.github.io/Smoosic/build/styles/tree.css" rel="stylesheet">
         <!-- link href="https://aarondavidnewman.github.io/Smoosic/build/styles/bravura-font-codes.css" rel="stylesheet" -->
         <link href="../styles/bravura-font-codes.css" rel="stylesheet">
-        <script type="text/javascript" src="https://aarondavidnewman.github.io/vexflow_smoosic/releases/vexflow-debug.js"></script>
-        <!-- script type="text/javascript" src="../../../vexflow_smoosic/build/cjs/vexflow-debug.js"></script -->
+        <!-- script type="text/javascript" src="https://aarondavidnewman.github.io/vexflow_smoosic/releases/vexflow-debug.js"></script -->
+        <script type="text/javascript" src="../../../vexflow_smoosic/build/cjs/vexflow-debug.js"></script>
         <!-- script src="https://unpkg.com/vexflow@4.0.1/build/cjs/vexflow-debug.js"></script -->
         <!-- script type="text/javascript" src="..\..\node_modules\vxflw-early-access\build\cjs\vexflow-debug.js"></script -->
         <!---- script type="text/javascript" src="../../vxflw-early-access/build/cjs/vexflow-debug.js"></script -->

release/library/links/hymns.json

@@ -23,7 +23,7 @@
 				"name": "Hymn to Freedom",
 				"composer": "Oscar Peterson"
 			},
-			"url": "https://aarondavidnewman.github.io/Smoosic/release/library/hymns/HymnFreedom.json"
+			"url": "https://aarondavidnewman.github.io/Smoosic/release/library/trumpet/HymnFreedom.json"
 		},
 		{
 			"format": "smoosic",

release/styles/bravura-font-codes.css

@@ -9,3 +9,19 @@
 .icon-accidentalFlat:before {
   content: "\e260";
 }
+
+.icon-caesura:before {
+  content: "\e4d2"
+}
+
+.icon-breath-mark:before {
+  content: "\e4ce"
+}
+
+.icon-pedal-open:before {
+  content: "\e650"
+}
+
+.icon-pedal-closed:before {
+  content: "\e655"
+}

src/common/serializationHelpers.js

@@ -299,7 +299,26 @@ export class smoSerialize {
   static get tokenValues() {
     return smoSerialize.reverseMap(smoSerialize.tokenMap);
   }
+  static prettifyXml(xmlDoc) {
+    var xsltDoc = new DOMParser().parseFromString([
+        // describes how we want to modify the XML - indent everything
+        '<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform">',
+        '  <xsl:strip-space elements="*"/>',
+        '  <xsl:template match="para[content-style][not(text())]">', // change to just text() to strip space in text nodes
+        '    <xsl:value-of select="normalize-space(.)"/>',
+        '  </xsl:template>',
+        '  <xsl:template match="node()|@*">',
+        '    <xsl:copy><xsl:apply-templates select="node()|@*"/></xsl:copy>',
+        '  </xsl:template>',
+        '  <xsl:output indent="yes"/>',
+        '</xsl:stylesheet>',
+    ].join('\n'), 'application/xml');
 
+    var xsltProcessor = new XSLTProcessor();    
+    xsltProcessor.importStylesheet(xsltDoc);
+    var resultDoc = xsltProcessor.transformToDocument(xmlDoc);
+    return resultDoc;
+  };
   // ## detokenize
   // If we are saving, replace token values with keys, since the keys are smaller.
   // if we are loading, replace the token keys with values so the score can

src/common/vex.ts

@@ -2,6 +2,7 @@ import { Vex as SmoVex, Note as VexNote, StaveNote as VexStaveNote, StemmableNot
   Voice as VexVoice, Formatter as VexFormatter, Accidental as VexAccidental, 
   Annotation as VexAnnotation, StaveNoteStruct as VexStaveNoteStruct, 
   StaveText as VexStaveText, StaveModifier as VexStaveModifier,
+  TextNote as VexTextNote,
 Stave as VexStave, StaveModifierPosition as VexStaveModifierPosition,
 Font as VexFont, FontInfo as VexFontInfo, FontStyle as VexFontStyle, FontWeight as VexFontWeight,
 TupletOptions as VexTupletOptions, Curve as VexCurve, StaveTie as VexStaveTie,
@@ -32,6 +33,7 @@ export type FontStyle = VexFontStyle;
 export type FontWeight = VexFontWeight;
 export type Formatter = VexFormatter;
 export type Annotation = VexAnnotation;
+export type TextNote = VexTextNote;
 export type  StaveNoteStruct = VexStaveNoteStruct;
 export type StaveModifier = VexStaveModifier;
 export type StaveText = VexStaveText;
@@ -366,6 +368,9 @@ export function getVexGlyphFromChordCode(code: string) {
   }
   return ChordSymbolGlyphs[code].code;
 }
+export function createTextNote(code: string) {
+  return new VexTextNote({ glyph: code, duration: '8' }).setLine(2);
+}
 /**
  * Get the chord symbol glyph from the vex glyph
  * @export
@@ -418,13 +423,13 @@ export const ChordSymbolGlyphs: Record<string, { code: string }> = {
     code: 'csymMajorSeventh',
   },
   csymMinor: {
-    code: 'csymMinor',
+    code: 'minor',
   },
   minor: {
-    code: 'csymMinor',
+    code: 'minor',
   },
   '-': {
-    code: 'csymMinor',
+    code: 'minor',
   },
   '(': {
     code: 'csymParensLeftTall',

src/render/sui/renderState.ts

@@ -244,8 +244,8 @@ export class SuiRenderState {
     this.handlingRedraw = false;
   }
   pollRedraw() {
-    setTimeout(() => {
-      this.handleRedrawTimer();
+    setTimeout(async () => {
+      await this.handleRedrawTimer();
       this.pollRedraw();
     }, this.demonPollTime);
   }

src/render/sui/scoreView.ts

@@ -64,7 +64,7 @@ export abstract class SuiScoreView {
     this.audioAnimation = config.audioAnimation;
     this.renderer = new SuiRenderState(renderParams);
     this.config = config;
-    const scoreJson = score.serialize();
+    const scoreJson = score.serialize({ skipStaves: false, useDictionary: false });
     this.scroller = new SuiScroller(scrollSelector, this.renderer.renderer.vexContainers);
     this.pasteBuffer = new PasteBuffer();
     this.storePaste = new PasteBuffer();
@@ -509,13 +509,13 @@ export abstract class SuiScoreView {
     if (!any) {
       return;
     }
-    const nscore = SmoScore.deserialize(JSON.stringify(this.storeScore.serialize(true)));
+    const nscore = SmoScore.deserialize(JSON.stringify(this.storeScore.serialize({ skipStaves: true, useDictionary: false })));
     const staffMap = [];
     for (i = 0; i < rows.length; ++i) {
       const row = rows[i];
       if (row.show) {
         const srcStave = this.storeScore.staves[i];
-        const jsonObj = srcStave.serialize();
+        const jsonObj = srcStave.serialize({ skipMaps: false });
         jsonObj.staffId = staffMap.length;
         const nStave = SmoSystemStaff.deserialize(jsonObj);
         nStave.mapStaffFromTo(i, nscore.staves.length);
@@ -560,7 +560,8 @@ export abstract class SuiScoreView {
    * view all the staffs in score mode.
    */
   viewAll() {
-    this.score = SmoScore.deserialize(JSON.stringify(this.storeScore.serialize()));
+    this.score = SmoScore.deserialize(JSON.stringify(
+      this.storeScore.serialize({ skipStaves: false, useDictionary: false })));
     this.staffMap = this.defaultStaffMap;
     this.setMappedStaffIds();
     this._setTransposing();
@@ -592,7 +593,8 @@ export abstract class SuiScoreView {
     SuiAudioPlayer.stopPlayer();
     this.renderer.score = score;
     this.renderer.setViewport();
-    this.storeScore = SmoScore.deserialize(JSON.stringify(score.serialize()));
+    this.storeScore = SmoScore.deserialize(JSON.stringify(
+      score.serialize({ skipStaves: false, useDictionary: false })));
     this.score = score;
     // If the score is non-transposing, hide the instrument xpose settings
     this._setTransposing();

src/render/sui/scoreViewOperations.ts

@@ -1586,10 +1586,10 @@ export class SuiScoreViewOperations extends SuiScoreView {
       const selections = SmoSelection.innerSelections(this.storeScore, inst.startSelector, inst.endSelector);
       SmoOperation.changeInstrument(inst, selections);
     })
-    if (instrument.alignWithPrevious && instrument.staffId > 0) {
+    if (instrument.staffId > 0) {
+      const selection = SmoSelection.measureSelection(this.storeScore, instrument.staffId - 1, 0);
       const sel = SmoSelector.default;
       sel.staff = instrument.staffId - 1;
-      const selection = SmoSelection.measureSelection(this.storeScore, instrument.staffId - 1, 0);
       if (selection) {
         let grp = this.storeScore.getSystemGroupForStaff(selection);
         if (grp) {
@@ -1602,7 +1602,6 @@ export class SuiScoreViewOperations extends SuiScoreView {
         }
       }
     }
-
     this.viewAll();
     return this.renderer.updatePromise();
   }

src/render/vex/smoAdapter.ts

@@ -107,6 +107,11 @@ export function vexAnnotationPosition(chordPos: number) {
   return VF.ChordSymbol.symbolModifiers.SUBSCRIPT;
 }
 
+/**
+ * Parse the SmoLyric text and convert it to a VEX chord symbol
+ * @param athis 
+ * @returns 
+ */
 export function  getVexChordBlocks(athis: SmoLyric) {
   let mod = VF.ChordSymbol.symbolModifiers.NONE;
   let isGlyph = false;

src/render/vex/toVex.ts

@@ -98,7 +98,7 @@ function smoNoteToStaveNote(smoNote: SmoNote) {
   return sn;
 }
 export const getVoiceId = (smoMeasure:SmoMeasure, voiceIx: number) => {
-  return smoMeasure.attrs.id + 'v' + voiceIx.toString();
+  return smoMeasure.id + 'v' + voiceIx.toString();
 }
 function lastNoteInSystem(smoScore: SmoScore, selection: SmoSelection) {
     let rv = selection;
@@ -120,7 +120,7 @@ function createMeasureModifiers(smoMeasure: SmoMeasure, strs: string[]) {
   const sb = smoMeasure.getStartBarline();
   const eb = smoMeasure.getEndBarline();
   const sym = smoMeasure.getRepeatSymbol();
-  const vxStave = 'stave' + smoMeasure.attrs.id;
+  const vxStave = 'stave' + smoMeasure.id;
   if (smoMeasure.measureNumber.systemIndex !== 0 && sb.barline === SmoBarline.barlines.singleBar
     && smoMeasure.format.padLeft === 0) {
       strs.push(`${vxStave}.setBegBarType(VF.Barline.type.NONE);`);
@@ -156,8 +156,8 @@ export function renderVoltas(smoScore: SmoScore, startMeasure: number, endMeasur
       const smoMeasure = smoScore.staves[0].measures[j];
       const vtype = toVexVolta(ending, smoMeasure.measureNumber.measureIndex);
       const vx = smoMeasure.staffX + ending.xOffsetStart;
-      const vxStave = 'stave' + smoMeasure.attrs.id;
-      const endingName = ending.attrs.id + smoMeasure.attrs.id;
+      const vxStave = 'stave' + smoMeasure.id;
+      const endingName = ending.attrs.id + smoMeasure.id;
       strs.push(`const ${endingName} = new VF.Volta(${vtype}, '${ending.number.toString()}', ${vx}, ${ending.yOffset});`);
       strs.push(`${endingName}.setContext(context).draw(${vxStave}, -1 * ${ending.xOffsetEnd});`);
     }
@@ -447,12 +447,12 @@ function createTuplets(smoMeasure: SmoMeasure, strs: string[]) {
       };
       const tpParamString = JSON.stringify(tpParams);
       const narString = '[' + nar.join(',') + ']';
-      strs.push(`const ${tp.attrs.id} = new VF.Tuplet(${narString}, JSON.parse('${tpParamString}'));`);
+      strs.push(`const ${tp.id} = new VF.Tuplet(${narString}, JSON.parse('${tpParamString}'));`);
     }
   });
 }
 function createMeasure(smoMeasure: SmoMeasure, heightOffset: number, strs: string[]) {
-  const ssid = 'stave' + smoMeasure.attrs.id;
+  const ssid = 'stave' + smoMeasure.id;
   const staffY = smoMeasure.svg.staffY + heightOffset;
   const staffWidth = Math.round(smoMeasure.svg.staffWidth);
   strs.push(`const ${ssid} = new VF.Stave(${smoMeasure.svg.staffX}, ${staffY}, ${staffWidth});`);
@@ -475,7 +475,7 @@ function createMeasure(smoMeasure: SmoMeasure, heightOffset: number, strs: strin
   }
   if (smoMeasure.svg.forceKeySignature) {
     const key = SmoMusic.vexKeySignatureTranspose(smoMeasure.keySignature, 0);
-    const ksid = 'key' + smoMeasure.attrs.id;
+    const ksid = 'key' + smoMeasure.id;
     strs.push(`const ${ksid} = new VF.KeySignature('${key}');`);
     if (smoMeasure.canceledKeySignature) {
       const canceledKey = SmoMusic.vexKeySignatureTranspose(smoMeasure.canceledKeySignature, 0);
@@ -494,7 +494,7 @@ function createMeasure(smoMeasure: SmoMeasure, heightOffset: number, strs: strin
     strs.push(`${bg.attrs.id}.draw();`)
   });
   smoMeasure.tuplets.forEach((tp) => {
-    strs.push(`${tp.attrs.id}.setContext(context).draw();`)
+    strs.push(`${tp.id}.setContext(context).draw();`)
   })
 }
 // ## SmoToVex
@@ -569,7 +569,7 @@ export class SmoToVex {
         const tickmapObject = smoMeasure.createMeasureTickmaps();
         const measureIx = smoMeasure.measureNumber.measureIndex;
         const voiceStrings: string[] = [];
-        const fmtid = 'fmt' + smoMeasure.attrs.id + measureIx.toString();
+        const fmtid = 'fmt' + smoMeasure.id + measureIx.toString();
         strs.push(`const ${fmtid} = new VF.Formatter();`);
         if (!groupMap[justifyGroup]) {
           groupMap[justifyGroup] = {
@@ -609,8 +609,8 @@ export class SmoToVex {
             const tmpGroup = groupMap[mapKey];
             if (tmpGroup.systemGroup) {
               const systemIndex = smoMeasure.measureNumber.systemIndex;
-              const startMeasure = 'stave' + smoScore.staves[tmpGroup.systemGroup.startSelector.staff].measures[k].attrs.id;
-              const endMeasure = 'stave' + smoScore.staves[tmpGroup.systemGroup.endSelector.staff].measures[k].attrs.id;
+              const startMeasure = 'stave' + smoScore.staves[tmpGroup.systemGroup.startSelector.staff].measures[k].id;
+              const endMeasure = 'stave' + smoScore.staves[tmpGroup.systemGroup.endSelector.staff].measures[k].id;
               const leftConnector = leftConnectorVx(tmpGroup.systemGroup);
               const rightConnector = rightConnectorVx(tmpGroup.systemGroup);
               const jgname = justifyGroup + startMeasure + staffIx.toString();

src/render/vex/vxMeasure.ts

@@ -23,7 +23,8 @@ import { VexFlow, Stave,StemmableNote, Note, Beam, Tuplet, Voice,
   Formatter, Accidental, Annotation, StaveNoteStruct, StaveText, StaveModifier,
   createStaveText, renderDynamics, applyStemDirection,
   getVexNoteParameters, defaultNoteScale, defaultCueScale, getVexTuplets,
-  createStave, createVoice, getOrnamentGlyph, getSlashGlyph, getRepeatBar, getMultimeasureRest
+  createStave, createVoice, getOrnamentGlyph, getSlashGlyph, getRepeatBar, getMultimeasureRest,
+  createTextNote
    } from '../../common/vex';
 
 import { VxMeasureIf, VexNoteModifierIf, VxNote } from './vxNote';
@@ -258,6 +259,7 @@ export class VxMeasure implements VxMeasureIf {
     for (i = 0;
       i < voice.notes.length; ++i) {
       const smoNote = voice.notes[i];
+      const textNotes = smoNote.getTextOrnaments();
       const vexNote = this.createVexNote(smoNote, i, voiceIx);
       this.noteToVexMap[smoNote.attrs.id] = vexNote.noteData.staveNote;
       this.vexNotes.push(vexNote.noteData.staveNote);
@@ -267,6 +269,9 @@ export class VxMeasure implements VxMeasureIf {
         clefNoteAdded = true; // ignore 2nd in a measure
       }
       this.voiceNotes.push(vexNote.noteData.staveNote);
+      textNotes.forEach((tn) => {
+        this.voiceNotes.push(createTextNote(SmoOrnament.textNoteOrnaments[tn.ornament]));
+      });
       if (isNaN(smoNote.ticks.numerator) || isNaN(smoNote.ticks.denominator)
         || isNaN(smoNote.ticks.remainder)) {
         throw ('vxMeasure: NaN in ticks');
@@ -350,7 +355,7 @@ export class VxMeasure implements VxMeasureIf {
         location
       }
       const vexTuplet = getVexTuplets(smoTupletParams);
-      this.tupletToVexMap[tp.attrs.id] = vexTuplet;
+      this.tupletToVexMap[tp.id] = vexTuplet;
       this.vexTuplets.push(vexTuplet);
     }
   }
@@ -439,7 +444,7 @@ export class VxMeasure implements VxMeasureIf {
       x: staffX,
       y: staffY,
       padLeft: this.smoMeasure.format.padLeft,
-      id: this.smoMeasure.attrs.id,
+      id: this.smoMeasure.id,
       staffX: this.smoMeasure.staffX,
       staffY: this.smoMeasure.staffY,
       staffWidth: this.smoMeasure.staffWidth,
@@ -554,9 +559,9 @@ export class VxMeasure implements VxMeasureIf {
     var j = 0;
     try {
       // bound each measure in its own SVG group for easy deletion and mapping to screen coordinate
-      group.classList.add(this.smoMeasure.attrs.id);
+      group.classList.add(this.smoMeasure.id);
       group.classList.add(mmClass);
-      group.id = this.smoMeasure.attrs.id;
+      group.id = this.smoMeasure.id;
       this.stave!.draw();
       this.smoMeasure.svg.element = group;