smoosic 1.0.11 → 1.0.14

package/src/application/application.ts

@@ -32,7 +32,7 @@ import { PromiseHelpers } from '../common/promiseHelpers';
 import { SuiDom } from './dom';
 import { SuiKeyCommands } from './keyCommands';
 import { SuiEventHandler } from './eventHandler';
-import { KeyBinding, ModalEventHandlerProxy } from './common';
+import { KeyBinding, ModalEventHandlerProxy, isTrackerKeyAction, isEditorKeyAction } from './common';
 import { SmoMeasure } from '../smo/data/measure';
 import { getDomContainer } from '../common/htmlHelpers';
 import { SuiHelp } from '../ui/help';
@@ -142,13 +142,25 @@ export class SuiApplication {
   */
   static get keyBindingDefaults(): KeyBinding[] {
     var editorKeys = SuiEventHandler.editorKeyBindingDefaults;
+    let unknownKeyAction: boolean = false;
     editorKeys.forEach((key) => {
-      key.module = 'keyCommands'
+      key.module = 'keyCommands';
+      if (!isEditorKeyAction(key.action)) {
+        console.error(`unknown key action ${key.action} in configuration`);
+        unknownKeyAction = true;
+      }
     });
     var trackerKeys = SuiEventHandler.trackerKeyBindingDefaults;
     trackerKeys.forEach((key) => {
       key.module = 'tracker'
+      if (!isTrackerKeyAction(key.action)) {
+        console.error(`unknown key action ${key.action} in configuration`);
+        unknownKeyAction = true;
+      }
     });
+    if (unknownKeyAction) {
+      throw(`unknown key action in configuration`);
+    }
     return trackerKeys.concat(editorKeys);
   }
   /**

package/src/application/common.ts

@@ -2,8 +2,43 @@ import { SuiScoreViewOperations } from "../render/sui/scoreViewOperations";
 import { SuiTracker } from "../render/sui/tracker";
 import { CompleteNotifier } from "../ui/common";
 import { ModalComponent } from "../ui/common";
+import { KeyEvent } from "../smo/data/common";
 import { BrowserEventSource, EventHandler } from "../ui/eventSource";
 
+export type trackerKeyAction = "moveHome" | "moveEnd" | "moveSelectionRight" | "moveSelectionLeft" | 
+   "moveSelectionUp" | "moveSelectionDown" | "moveSelectionRightMeasure" | "moveSelectionLeftMeasure" |
+   "advanceModifierSelection" | "growSelectionRight" | "growSelectionLeft" | 
+   "growSelectionRightMeasure" | "growSelectionRightMeasure" |
+   "moveSelectionPitchUp" | "moveSelectionPitchDown";
+export const trackerKeyActions = ["moveHome" , "moveEnd" , "moveSelectionRight" , "moveSelectionLeft" , 
+   "moveSelectionUp" , "moveSelectionDown" , "moveSelectionRightMeasure" , "moveSelectionLeftMeasure" ,
+   "advanceModifierSelection" , "growSelectionRight" , "growSelectionLeft" , "growSelectionRightMeasure",
+   "moveSelectionPitchUp" , "moveSelectionPitchDown"];   
+export type editorKeyAction = "transposeUp" | "transposeDown" | "upOctave" | "downOctave" | 
+  "toggleCourtesyAccidental" | "toggleEnharmonic"  | 
+    "doubleDuration" | "halveDuration" | "dotDuration" | "undotDuration" | "setPitch" | 
+    "slashGraceNotes" | "addGraceNote" | "removeGraceNote" | 
+    "playScore" | "stopPlayer" | "pausePlayer" | "togglePlayer" |
+    "undo" | "copy" | "paste" |
+    "makeTuplet" | "interval" | "unmakeTuplet" | "addMeasure" | "deleteNote" | "makeRest"| 
+    "toggleBeamGroup" | "beamSelections" | "toggleBeamDirection" |
+    "addRemoveAccent" | "addRemoveTenuto" | "addRemoveStaccato" | 
+    "addRemovePizzicato" | "addRemoveMarcato";
+export const editorKeyActions = ["transposeUp" , "transposeDown" , "upOctave" , "downOctave" , 
+    "toggleCourtesyAccidental" , "toggleEnharmonic", 
+      "doubleDuration" , "halveDuration" , "dotDuration" , "undotDuration" , "setPitch" , 
+      "slashGraceNotes" , "addGraceNote" , "removeGraceNote" , 
+      "playScore" , "stopPlayer" , "pausePlayer", "togglePlayer",
+      "undo", "copy", "paste",
+      "makeTuplet" , "interval" , "unmakeTuplet" , "addMeasure" , "deleteNote" , "makeRest", 
+      "toggleBeamGroup" , "beamSelections" , "toggleBeamDirection",
+      "addRemoveAccent" , "addRemoveTenuto" , "addRemoveStaccato",
+      "addRemovePizzicato", "addRemoveMarcato"
+    ]; 
+
+export function isEditorKeyAction(action: string) { return editorKeyActions.indexOf(action) >= 0 };
+export function isTrackerKeyAction(action: string) { return trackerKeyActions.indexOf(action) >= 0 };
+
 /**
  * A binding of a key to some action performed by a module
  * @category SuiApplication
@@ -43,7 +78,7 @@ export interface KeyCommandParams {
 export abstract class ModalEventHandler {
   abstract mouseMove(ev: any): void;
   abstract mouseClick(ev: any): void;
-  abstract evKey(evdata: any): void;
+  abstract evKey(evdata: any): Promise<void>;
   abstract keyUp(evdata: any): void;
 }
 export type handler = (ev: any) => void;
@@ -69,9 +104,9 @@ export class ModalEventHandlerProxy {
     this._handler = value;
     this.unbound = false;
   }
-  evKey(ev: any) {
+  async evKey(ev: any) {
     if (this._handler) {
-      this._handler.evKey(ev);
+      await this._handler.evKey(ev);
     }
   }
   keyUp(ev: any) {

package/src/application/configuration.ts

@@ -86,7 +86,7 @@ export interface SmoConfigurationParams {
       leftControls: 'controls-left',
       topControls: 'controls-top',
       scoreDomContainer: 'smo-scroll-region',
-      libraryUrl: 'https://smoosic.github.io/Smoosic/release/library/links/smoLibrary.json',
+      libraryUrl: 'https://smoosic.github.io/SmoScores/links/smoLibrary.json',
       demonPollTime: 50, // how often we poll the score to see if it changed
       idleRedrawTime: 1000, // maximum time between score modification and render
       ribbonLayout: defaultRibbonLayout.ribbons,

package/src/application/eventHandler.ts

@@ -165,10 +165,10 @@ export class SuiEventHandler implements ModalEventHandler {
         return;
         // this.unbindKeyboardForModal(dialog);
       } else {
-        this.view.tracker.advanceModifierSelection(this.view.score, ev);
+        this.view.tracker.advanceModifierSelection(ev);
       }
     } else {
-      this.view.tracker.selectSuggestion(this.view.score, ev);
+      this.view.tracker.selectSuggestion(ev);
     }
     return;
   }
@@ -254,7 +254,7 @@ export class SuiEventHandler implements ModalEventHandler {
     }
   }
 
-  evKey(evdata: any) {
+  async evKey(evdata: any) {
     if ($('body').hasClass('translation-mode')) {
       return;
     }
@@ -270,34 +270,33 @@ export class SuiEventHandler implements ModalEventHandler {
       Qwerty.handleKeyEvent(evdata);
     }
     const dataCopy = SuiTracker.serializeEvent(evdata);
-    this.view.renderer.updatePromise().then(() => {
-      if (dataCopy.key == '?') {
-        SuiHelp.displayHelp();
-      }
-      if (dataCopy.key == 'Enter') {
-        this.trackerModifierSelect(dataCopy);
-      }
+    await this.view.renderer.updatePromise();
+    if (dataCopy.key == '?') {
+      SuiHelp.displayHelp();
+    }
+    if (dataCopy.key == 'Enter') {
+      this.trackerModifierSelect(dataCopy);
+    }
 
-      var binding: KeyBinding | undefined = this.keyBind.find((ev: KeyBinding) =>
-        ev.event === 'keydown' && ev.key === dataCopy.key &&
-        ev.ctrlKey === dataCopy.ctrlKey &&
-        ev.altKey === dataCopy.altKey && dataCopy.shiftKey === ev.shiftKey);
+    var binding: KeyBinding | undefined = this.keyBind.find((ev: KeyBinding) =>
+      ev.event === 'keydown' && ev.key === dataCopy.key &&
+      ev.ctrlKey === dataCopy.ctrlKey &&
+      ev.altKey === dataCopy.altKey && dataCopy.shiftKey === ev.shiftKey);
 
-      if (binding) {
-        try {
-          if (binding.module === 'tracker') {
-            (this.tracker as any)[binding.action](this.view.score, dataCopy);
-          } else {
-            (this.keyCommands as any)[binding.action](dataCopy);
-          }
-        } catch (e) {
-          if (typeof (e) === 'string') {
-            console.error(e);
-          }
-          this.exhandler.exceptionHandler(e);
+    if (binding) {
+      try {
+        if (binding.module === 'tracker') {
+          (this.tracker as any)[binding.action](dataCopy);
+        } else {
+          (this.keyCommands as any)[binding.action](dataCopy);
+        }
+      } catch (e) {
+        if (typeof (e) === 'string') {
+          console.error(e);
         }
+        this.exhandler.exceptionHandler(e);
       }
-    });
+    }
   }
 
   mouseMove(ev: any) {
@@ -310,7 +309,7 @@ export class SuiEventHandler implements ModalEventHandler {
   mouseClick(ev: any) {
     const dataCopy = SuiTracker.serializeEvent(ev);
     this.view.renderer.updatePromise().then(() => {
-      this.view.tracker.selectSuggestion(this.view.score, dataCopy);
+      this.view.tracker.selectSuggestion(dataCopy);
       var modifier = this.view.tracker.getSelectedModifier();
       if (modifier) {
         this.createModifierDialog(modifier);

package/src/application/exports.ts

@@ -40,7 +40,7 @@ import { SuiInstrumentDialog } from '../ui/dialogs/instrument';
 import { SuiTimeSignatureDialog } from '../ui/dialogs/timeSignature';
 import { SuiTempoDialog } from '../ui/dialogs/tempo';
 import { SuiNoteHeadAdapter, SuiNoteHeadDialog, SuiNoteHeadButtonComponent, SuiStemButtonComponent } from '../ui/dialogs/noteHead';
-import { SuiEndingsAdapter, SuiEndingsDialog, 
+import { SuiEndingsAdapter, SuiEndingsDialog, endingsButtonFactory,
   SuiEndBarButtonComponent, SuiStartBarButtonComponent, SuiRepeatSymbolButtonComponent } from '../ui/dialogs/endings';
 import { SuiScoreIdentificationDialog } from '../ui/dialogs/scoreId';
 import { SuiScorePreferencesDialog } from '../ui/dialogs/preferences';
@@ -365,7 +365,7 @@ export const Smo = {
   SuiArticulationDialog, SuiArticulationButtonComponent, SuiArticulationAdapter,
   SuiMicrotoneAdapter, SuiMicrotoneButtonComponent, SuiMicrotoneDialog,
   SuiNoteHeadAdapter, SuiNoteHeadDialog, SuiStemButtonComponent, SuiNoteHeadButtonComponent,    
-  SuiEndingsAdapter, SuiEndingsDialog, 
+  SuiEndingsAdapter, SuiEndingsDialog, endingsButtonFactory,
   SuiEndBarButtonComponent, SuiStartBarButtonComponent, SuiRepeatSymbolButtonComponent,    
   SuiPrintFileDialog, SuiSaveFileDialog, SuiSaveXmlDialog, SuiSaveVexDialog,
   SuiSaveMidiDialog, SuiDialogBase, createAndDisplayDialog, 

package/src/application/keyCommands.ts

@@ -9,14 +9,41 @@ import { BrowserEventSource } from '../ui/eventSource';
 import { SuiTracker } from '../render/sui/tracker';
 import { KeyCommandParams } from './common';
 import { CompleteNotifier } from '../ui/common';
-import { PitchLetter, IsPitchLetter, KeyEvent } from '../smo/data/common';
-
+import { PitchLetter, IsPitchLetter, KeyEvent, keyHandler, defaultKeyEvent } from '../smo/data/common';
+
+export interface EditorKeyHandler {
+  transposeUp: keyHandler,
+  transposeDown: keyHandler,
+  upOctave: keyHandler,
+  toggleCourtesyAccidental: keyHandler,
+  toggleEnharmonic: keyHandler,
+  doubleDuration: keyHandler,
+  halveDuration: keyHandler,
+  dotDuration: keyHandler,
+  undotDuration: keyHandler,
+  setPitch: keyHandler,
+  slashGraceNotes: keyHandler,
+  addGraceNote: keyHandler,
+  removeGraceNote: keyHandler, 
+  playScore: keyHandler, 
+  stopPlayer: keyHandler,
+  makeTuplet: keyHandler,
+  interval: keyHandler, 
+  unmakeTuplet: keyHandler,
+  addMeasure: keyHandler, 
+  deleteNote: keyHandler, 
+  toggleBeamGroup: keyHandler,
+  beamSelections: keyHandler, 
+  addRemoveAccent: keyHandler,
+  addRemoveTenuto: keyHandler,
+  addRemoveStaccato: keyHandler
+}
 /**
- * KeyCommands object handles key events and converts them into commands, updating the score and
+ * KeyCommands object handles key events and converts them into commands: keyHandler, updating the score and
  * display
  * @category SuiApplication
  * */
-export class SuiKeyCommands {
+export class SuiKeyCommands implements EditorKeyHandler {
   view: SuiScoreViewOperations;
   slashMode: boolean = false;
   completeNotifier: CompleteNotifier;
@@ -97,8 +124,9 @@ export class SuiKeyCommands {
     await this.view.setInterval(direction * interval);
   }
 
-  async  interval(keyEvent: KeyEvent) {
+  async interval(ev?: KeyEvent) {
     // code='Digit3'
+    const keyEvent = ev ?? defaultKeyEvent();
     var interval = parseInt(keyEvent.keyCode.toString(), 10) - 49;  // 48 === '0', 0 indexed
     if (isNaN(interval) || interval < 1 || interval > 7) {
       return;
@@ -129,7 +157,8 @@ export class SuiKeyCommands {
     await this.view.setPitch(letter);
   }
 
-  async setPitch(keyEvent: KeyEvent) {
+  async setPitch(ev?: KeyEvent) {
+    const keyEvent = ev ?? defaultKeyEvent();
     const letter = keyEvent.key.toLowerCase();
     if (IsPitchLetter(letter)) {
       await this.setPitchCommand(letter);
@@ -152,8 +181,8 @@ export class SuiKeyCommands {
     await this.view.batchDurationOperation('halveDuration');
   }
 
-  async addMeasure(keyEvent: KeyEvent) {
-    await this.view.addMeasure(keyEvent.shiftKey);
+  async addMeasure(keyEvent?: KeyEvent) {
+    await this.view.addMeasure(false);
   }
   async deleteNote() {
     await this.view.deleteNote();
@@ -167,9 +196,12 @@ export class SuiKeyCommands {
   }
 
   async makeTupletCommand(numNotes: number) {
-    await this.view.makeTuplet({numNotes: numNotes, notesOccupied: 2, bracketed: true, ratioed: false});
+    await this.view.makeTuplet({ numNotes: numNotes, notesOccupied: 2, bracketed: true, ratioed: false });
   }
-  async makeTuplet(keyEvent: KeyEvent) {
+  async makeTuplet(keyEvent?: KeyEvent) {
+    if (!keyEvent) {
+      return;
+    }
     const numNotes = parseInt(keyEvent.key, 10);
     await this.makeTupletCommand(numNotes);
   }

package/src/render/audio/musicCursor.ts

@@ -81,6 +81,8 @@ export const  defaultClearAudioAnimationHandler = (delay: number) => {
     ctx.closeGroup();
     ctx.restore();
     layoutDebug.updatePlayDebug(selector, measure.svg.logicalBox);
-    scroller.scrollVisibleBox(zmeasureSel.measure.svg.logicalBox);        
+    if (view.score.preferences.autoScrollPlayback) {
+      scroller.scrollVisibleBox(zmeasureSel.measure.svg.logicalBox);
+    }
   }
 }

package/src/render/sui/piano.ts

@@ -123,7 +123,7 @@ export class SuiPiano {
       this.view.tracker.moveSelectionLeft();
     });
     $('button.jsRight').off('click').on('click', () => {
-      this.view.tracker.moveSelectionRight(false);
+      this.view.tracker.moveSelectionRight();
     });
     $('button.jsGrowDuration').off('click').on('click', () => {
       this.view.batchDurationOperation('doubleDuration');

package/src/render/sui/scoreView.ts

@@ -241,24 +241,28 @@ export abstract class SuiScoreView {
     // The length of the paste buffer, in ticks
     const ticksToPaste = this.storePaste.getCopyBufferTickCount();
     const selections: SmoSelection[]  = SmoSelection.getMeasureList(this.tracker.selections);
-    const tm = selections[0].measure.tickmapForVoice(selections[0].selector.voice);
-    // The last measure selected
-    const lastSelection = this.tracker.selections[this.tracker.selections.length - 1];
+    if (!selections.length) {
+      return [];
+    }
+    const destination = selections[0];
+    selections.splice(0);
+    selections.push(destination);
+    const voice = destination.selector.voice;
+    const tm = destination.measure.tickmapForVoice(voice);
     // length of first selected measure, in ticks
-    const measureTicks = this.tracker.selections[0].measure.getTicksFromVoice(this.tracker.selections[0].selector.voice);
+    const measureTicks = destination.measure.getTicksFromVoice(voice);
     // remaining ticks after first selection.  This is our starting point.
     let startTick = measureTicks - tm.durationMap[this.tracker.selections[0].selector.tick];
-    // Add ticks for all remaining measures
-    for (let i = 1; i < selections.length; ++i) {
-      const sel = selections[i];
-      startTick += sel.measure.getTicksFromVoice(0);
-    }
+    let currentMeasure = destination.selector.measure + 1;
     // if we are short, and there are measures left, add them to the selection list
-    if (startTick < ticksToPaste && lastSelection.selector.measure < (this.score.staves[0].measures.length + 1)) {
-      const newSel = SmoSelection.measureSelection(this.score, selections[0].selector.staff, lastSelection.selector.measure + 1);
+    while (startTick < ticksToPaste && destination.staff.measures.length > currentMeasure) {
+      const newSel = SmoSelection.measureSelection(this.score, 
+        destination.selector.staff, currentMeasure);
       if (newSel) {
         selections.push(newSel);
+        startTick += newSel.measure.getTicksFromThisOrAnyVoice(voice);
       }
+      currentMeasure += 1;
     }
     return selections;
   }

package/src/render/sui/scoreViewOperations.ts

@@ -1182,7 +1182,9 @@ export class SuiScoreViewOperations extends SuiScoreView {
       const altSel = this._getEquivalentSelection(selected);
       SmoOperation.setPitch(altSel!, [pitch]);
       if (this.score.preferences.autoAdvance) {
-        this.tracker.moveSelectionRight(true);
+        // Don't play the next note and the added pitch at the same time.
+        this.tracker.deferNextAutoPlay();
+        this.tracker.moveSelectionRight();
       }
     });
     if (selections.length === 1 && this.score.preferences.autoPlay) {
@@ -1936,7 +1938,7 @@ export class SuiScoreViewOperations extends SuiScoreView {
    * @returns 
    */
   async moveHome(ev: KeyEvent): Promise<any> {
-    this.tracker.moveHome(this.score, ev);
+    this.tracker.moveHome(ev);
     await this.renderer.updatePromise();
   }
   /**
@@ -1946,7 +1948,7 @@ export class SuiScoreViewOperations extends SuiScoreView {
    * @returns 
    */
    async moveEnd(ev: KeyEvent): Promise<any> {
-    this.tracker.moveEnd(this.score, ev);
+    this.tracker.moveEnd(ev);
     await this.renderer.updatePromise();
   }
   /**
@@ -1973,7 +1975,7 @@ export class SuiScoreViewOperations extends SuiScoreView {
    * @returns 
    */
   async advanceModifierSelection(keyEv: KeyEvent): Promise<any> {
-    this.tracker.advanceModifierSelection(this.score, keyEv);
+    this.tracker.advanceModifierSelection(keyEv);
     await this.renderer.updatePromise();
   }
   /**
@@ -1989,8 +1991,8 @@ export class SuiScoreViewOperations extends SuiScoreView {
    * @param ev 
    * @returns 
    */
-  async moveSelectionRight(toPlay: boolean = true): Promise<any> {
-    this.tracker.moveSelectionRight(toPlay);
+  async moveSelectionRight(): Promise<any> {
+    this.tracker.moveSelectionRight();
     await this.renderer.updatePromise();
   }
   /**
@@ -2054,7 +2056,7 @@ export class SuiScoreViewOperations extends SuiScoreView {
    * @returns 
    */
    async selectSuggestion(evData: KeyEvent): Promise<any> {
-    this.tracker.selectSuggestion(this.score, evData);
+    this.tracker.selectSuggestion(evData);
     await this.renderer.updatePromise();
   }
   /**

package/src/render/sui/tracker.ts

@@ -6,7 +6,7 @@ import { SmoSelection, SmoSelector, ModifierTab } from '../../smo/xform/selectio
 import { smoSerialize } from '../../common/serializationHelpers';
 import { SuiOscillator } from '../audio/oscillator';
 import { SmoScore } from '../../smo/data/score';
-import { SvgBox, KeyEvent } from '../../smo/data/common';
+import { SvgBox, KeyEvent, defaultKeyEvent, keyHandler } from '../../smo/data/common';
 import { SuiScroller } from './scroller';
 import { PasteBuffer } from '../../smo/xform/copypaste';
 import { SmoNote } from '../../smo/data/note';
@@ -14,15 +14,31 @@ import { SmoMeasure } from '../../smo/data/measure';
 import { layoutDebug } from './layoutDebug';
 declare var $: any;
 
+export interface TrackerKeyHandler {
+  moveHome : keyHandler, 
+  moveEnd : keyHandler, 
+  moveSelectionRight : keyHandler,
+  moveSelectionLeft : keyHandler, 
+  moveSelectionUp : keyHandler,
+  moveSelectionDown : keyHandler,
+  moveSelectionRightMeasure : keyHandler,
+  moveSelectionLeftMeasure : keyHandler,
+  advanceModifierSelection : keyHandler,
+  growSelectionRight : keyHandler,
+  growSelectionLeft : keyHandler, 
+  moveSelectionPitchUp : keyHandler,
+  moveSelectionPitchDown: keyHandler
+}
 /**
  * SuiTracker
  * A tracker maps the UI elements to the logical elements ,and allows the user to
  *  move through the score and make selections, for navigation and editing.
  * @category SuiRender
  */
-export class SuiTracker extends SuiMapper {
+export class SuiTracker extends SuiMapper implements TrackerKeyHandler {
   idleTimer: number = Date.now();
   musicCursorGlyph: SVGSVGElement | null = null;
+  deferPlayAdvance: boolean = false;
   static get strokes(): Record<string, StrokeInfo> {
     return {
       suggestion: {
@@ -75,6 +91,21 @@ export class SuiTracker extends SuiMapper {
   getIdleTime(): number {
     return this.idleTimer;
   }
+  playSelection(artifact: SmoSelection) {
+    if (!this.deferPlayAdvance && this.score) {
+      SuiOscillator.playSelectionNow(artifact, this.score, 1);
+    } else {
+      this.deferPlayAdvance = false;
+    }
+  }
+  deferNextAutoPlay() {
+    if (this.score) {
+      // don't play on advance if we've just added a note and played it because they overlap
+      if (this.score.preferences.autoAdvance && this.score.preferences.autoPlay) {
+        this.deferPlayAdvance = true;
+      }
+    }
+  }
 
   getSelectedModifier() {
     if (this.modifierSelections.length) {
@@ -96,7 +127,7 @@ export class SuiTracker extends SuiMapper {
     return rv;
   }
 
-  advanceModifierSelection(score: SmoScore, keyEv: KeyEvent | null) {
+  advanceModifierSelection(keyEv?: KeyEvent) {
     if (!keyEv) {
       return;
     }
@@ -220,14 +251,15 @@ export class SuiTracker extends SuiMapper {
       return 0;
     }
     if (!this.mapping && this.autoPlay && skipPlay === false && this.score) {
-      SuiOscillator.playSelectionNow(artifact, this.score, 1);
+      this.playSelection(artifact);
     }
     this.selections.push(artifact);
     this.deferHighlight();
     this._createLocalModifiersList();
     return (artifact.note as SmoNote).tickCount;
   }
-  moveHome(score: SmoScore, evKey: KeyEvent) {
+  moveHome(keyEvent?: KeyEvent) {
+    const evKey = keyEvent ?? defaultKeyEvent();
     this.idleTimer = Date.now();
     const ls = this.selections[0].staff;
     if (evKey.ctrlKey) {
@@ -235,7 +267,7 @@ export class SuiTracker extends SuiMapper {
       const homeSel = this._getClosestTick({ staff: ls.staffId,
         measure: 0, voice: mm.getActiveVoice(), tick: 0, pitches: [] });
       if (evKey.shiftKey) {
-        this._selectBetweenSelections(score, this.selections[0], homeSel);
+        this._selectBetweenSelections(this.selections[0], homeSel);
       } else {
         this.selections = [homeSel];
         this.deferHighlight();
@@ -253,7 +285,7 @@ export class SuiTracker extends SuiMapper {
         measure: mm.measureNumber.measureIndex, voice: mm.getActiveVoice(),
         tick: 0, pitches: [] });
       if (evKey.shiftKey) {
-        this._selectBetweenSelections(score, this.selections[0], homeSel);
+        this._selectBetweenSelections(this.selections[0], homeSel);
       } else if (homeSel?.measure?.svg?.logicalBox) {
         this.selections = [homeSel];
         this.scroller.scrollVisibleBox(homeSel.measure.svg.logicalBox);
@@ -262,9 +294,10 @@ export class SuiTracker extends SuiMapper {
       }
     }
   }
-  moveEnd(score: SmoScore, evKey: KeyEvent) {
+  moveEnd(keyEvent?: KeyEvent) {
     this.idleTimer = Date.now();
     const ls = this.selections[0].staff;
+    const evKey = keyEvent ?? defaultKeyEvent();
     if (evKey.ctrlKey) {
       const lm = ls.measures[ls.measures.length - 1];
       const voiceIx = lm.getActiveVoice();
@@ -272,7 +305,7 @@ export class SuiTracker extends SuiMapper {
       const endSel = this._getClosestTick({ staff: ls.staffId,
         measure: ls.measures.length - 1, voice: voiceIx, tick: voice.notes.length - 1, pitches: [] });
       if (evKey.shiftKey) {
-        this._selectBetweenSelections(score, this.selections[0], endSel);
+        this._selectBetweenSelections(this.selections[0], endSel);
       } else {
         this.selections = [endSel];
         this.deferHighlight();
@@ -292,7 +325,7 @@ export class SuiTracker extends SuiMapper {
       const endSel = this._getClosestTick({ staff: ls.staffId,
         measure: lm.measureNumber.measureIndex, voice: lm.getActiveVoice(), tick: ticks - 1, pitches: [] });
       if (evKey.shiftKey) {
-        this._selectBetweenSelections(score, this.selections[0], endSel);
+        this._selectBetweenSelections(this.selections[0], endSel);
       } else {
         this.selections = [endSel];
         this.deferHighlight();
@@ -342,7 +375,7 @@ export class SuiTracker extends SuiMapper {
     artifact.measure.setActiveVoice(nselect.voice);
     this.selections.push(artifact);
     if (this.autoPlay && this.score) {
-      SuiOscillator.playSelectionNow(artifact, this.score, 1);
+      this.playSelection(artifact);
     }
     this.deferHighlight();
     this._createLocalModifiersList();
@@ -350,10 +383,11 @@ export class SuiTracker extends SuiMapper {
   }
 
   // if we are being moved right programmatically, avoid playing the selected note.
-  moveSelectionRight(skipPlay: boolean) {
+  moveSelectionRight() {
     if (this.selections.length === 0 || this.score === null) {
       return;
     }
+    const skipPlay = !this.score.preferences.autoPlay;
     // const original = JSON.parse(JSON.stringify(this.getExtremeSelection(-1).selector));
     const nselect = this._getOffsetSelection(1);
     // skip any measures that are not displayed due to rest or repetition
@@ -479,7 +513,8 @@ export class SuiTracker extends SuiMapper {
       artifact = SmoSelection.noteSelection(this.score, 0, 0, 0, 0);
     }
     if (!skipPlay && this.autoPlay && artifact) {
-      SuiOscillator.playSelectionNow(artifact, this.score, 1);
+      this.playSelection(artifact);
+
     }
     if (!artifact) {
       return;
@@ -538,7 +573,7 @@ export class SuiTracker extends SuiMapper {
       SmoSelector.neq(sel.selector, selection.selector)
     );
     if (this.autoPlay && this.score) {
-      SuiOscillator.playSelectionNow(selection, this.score, 1);
+      this.playSelection(selection);
     }
     ar.push(selection);
     this.selections = ar;
@@ -565,7 +600,11 @@ export class SuiTracker extends SuiMapper {
     }
     this.idleTimer = Date.now();
   }
-  _selectBetweenSelections(score: SmoScore, s1: SmoSelection, s2: SmoSelection) {
+  _selectBetweenSelections(s1: SmoSelection, s2: SmoSelection) {
+    const score = this.renderer.score ?? null;
+    if (!score) {
+      return;
+    }
     const min = SmoSelector.gt(s1.selector, s2.selector) ? s2 : s1;
     const max = SmoSelector.lt(min.selector, s2.selector) ? s2 : s1;
     this._selectFromToInStaff(score, min, max);
@@ -573,7 +612,7 @@ export class SuiTracker extends SuiMapper {
     this.highlightQueue.selectionCount = this.selections.length;
     this.deferHighlight();
   }
-  selectSuggestion(score: SmoScore,ev: KeyEvent) {
+  selectSuggestion(ev: KeyEvent) {
     if (!this.suggestion || !this.suggestion.measure || this.score === null) {
       return;
     }
@@ -596,7 +635,7 @@ export class SuiTracker extends SuiMapper {
     if (ev.shiftKey) {
       const sel1 = this.getExtremeSelection(-1);
       if (sel1.selector.staff === this.suggestion.selector.staff) {
-        this._selectBetweenSelections(score, sel1, this.suggestion);
+        this._selectBetweenSelections(sel1, this.suggestion);
         return;
       }
     }
@@ -608,7 +647,7 @@ export class SuiTracker extends SuiMapper {
       return;
     }
     if (this.autoPlay) {
-      SuiOscillator.playSelectionNow(this.suggestion, this.score, 1);
+      this.playSelection(this.suggestion);
     }
 
     const preselected = this.selections[0] ?

package/src/render/vex/vxMeasure.ts

@@ -364,6 +364,7 @@ export class VxMeasure implements VxMeasureIf {
         vexNotes.push(vexNote);  
       }
       const vexBeam = new VF.Beam(vexNotes);
+      vexBeam.breakSecondaryAt(bg.secondaryBeamBreaks);
       this.beamToVexMap[bg.attrs.id] = vexBeam;
       this.vexBeamGroups.push(vexBeam);
     }

package/src/smo/data/common.ts

@@ -237,6 +237,7 @@ export function keyEventMatch(ev1: KeyEvent, ev2: KeyEvent): boolean {
   ev1.ctrlKey === ev2.ctrlKey &&
   ev1.altKey === ev2.altKey && ev1.shiftKey === ev2.shiftKey
 }
+export type keyHandler = (key?: KeyEvent) => void;
 /**
  * @internal
  */