smoosic 1.0.34 → 1.0.35

package/src/render/sui/NoteEntryMediator.ts

@@ -0,0 +1,58 @@
+import {SmoSelection} from "../../smo/xform/selections";
+import {SmoGraceNote} from "../../smo/data/noteModifiers";
+import {Pitch} from "../../smo/data/common";
+import {SuiTracker} from "./tracker";
+import {NoteEntryCaret} from "./NoteEntryCaret";
+import {SuiScoreViewOperations} from "./scoreViewOperations";
+
+export interface TrackerDelegate {
+  onPitchIndexChanged(pitchIndex: number): void;
+  onSingleNoteHighlighted(selection: SmoSelection, graceNote: SmoGraceNote | null): void;
+}
+
+export interface CaretDelegate {
+  onPitchClicked(pitchIndex: number): void;
+  onPitchesChanged(newPitches: Pitch[]): void;
+}
+
+export class NoteEntryMediator implements TrackerDelegate, CaretDelegate {
+
+  constructor(
+    private tracker: SuiTracker,
+    private caret: NoteEntryCaret,
+    private view: SuiScoreViewOperations
+  ) {
+    this.tracker.delegate = this;
+    this.caret.delegate = this;
+  }
+
+  /*
+   * TrackerDelegate
+   */
+  public onPitchIndexChanged(pitchIndex: number) {
+    this.caret.renderPitchHighlight(pitchIndex);
+  }
+
+  public onSingleNoteHighlighted(selection: SmoSelection, graceNote: SmoGraceNote | null) {
+    this.caret.setSelection(selection, graceNote);
+    this.caret.render();
+  }
+
+  /*
+   * CaretDelegate
+   */
+  public onPitchClicked(pitchIndex: number) {
+    const currentIndex = this.tracker.getPitchIndex();
+    if (currentIndex === pitchIndex) {
+      this.tracker.clearPitchIndex();
+    } else {
+      this.tracker.setPitchIndex(pitchIndex);
+    }
+  }
+
+  public onPitchesChanged(newPitches: Pitch[]) {
+    this.view.setPitches(newPitches);
+    this.tracker.pitchIndex = -1;
+  }
+
+}

package/src/render/sui/mapper.ts

@@ -12,6 +12,8 @@ import { SvgBox } from '../../smo/data/common';
 import { SmoNote } from '../../smo/data/note';
 import { SmoScore, SmoModifier } from '../../smo/data/score';
 import { SvgPageMap } from './svgPageMap';
+import { VxMeasure } from '../vex/vxMeasure';
+import {SuiScoreRender} from "./scoreRender";
 
 /**
  * DI information about renderer, so we can notify renderer and it can contain
@@ -32,7 +34,8 @@ export interface SuiRendererBase {
   passState: number,
   renderPromise(): Promise<any>,
   addToReplaceQueue(mm: SmoSelection[]): void,
-  renderElement: Element
+  renderElement: Element,
+  renderer: SuiScoreRender
 }
 /**
  * used to perform highlights in the backgroundd
@@ -68,6 +71,7 @@ export abstract class SuiMapper {
   selectionRects: Record<number, OutlineInfo[]> = {};
   outlines: Record<string, OutlineInfo> = {};
   mapping: boolean = false;
+
   constructor(renderer: SuiRendererBase, scroller: SuiScroller) {
     // renderer renders the music when it changes
     this.renderer = renderer;
@@ -637,19 +641,33 @@ export abstract class SuiMapper {
       // const artifacts = SvgHelpers.findIntersectingArtifactFromMap(bb, this.measureNoteMap, SvgHelpers.smoBox(this.scroller.scrollState.scroll));
       // TODO: handle overlapping suggestions
       const modifiers = this.renderer.pageMap.findModifierTabs(logicalBox);
+
       if (modifiers.length) {
+        // this.eraseMousePositionBox();
         this._setModifierAsSuggestion(modifiers[0]);
-        this.eraseMousePositionBox();
       } else if (artifacts.length) {
         const artifact = artifacts[0];
-        this.eraseMousePositionBox();
+        // this.eraseMousePositionBox();
         this._setArtifactAsSuggestion(artifact);
       } else {
         // no intersection, show mouse hint
-        this.createMousePositionBox(logicalBox);
+        // this.createMousePositionBox(logicalBox);
       }
     }
   }
+
+  getIntersectingArtifact(bb: SvgBox): SmoSelection | null {
+    const scrollState = this.scroller.scrollState;
+    bb = SvgHelpers.boxPoints(bb.x + scrollState.x, bb.y + scrollState.y, bb.width ? bb.width : 1, bb.height ? bb.height : 1);
+    const logicalBox = this.renderer.pageMap.clientToSvg(bb);
+    const { selections, page } = this.renderer.pageMap.findArtifact(logicalBox);
+    if (page && selections.length) {
+      return selections[0];
+    }
+
+    return null
+  }
+
   _getRectangleChain(selection: SmoSelection) {
     const rv: number[] = [];
     if (!selection.note) {

package/src/render/sui/scoreRender.ts

@@ -259,14 +259,14 @@ export class SuiScoreRender {
             modifier.logicalBox = pageContext.offsetBbox(modifier.element);
           }
         });
-      }
-      // unit test codes don't have tracker.
-      if (this.measureMapper) {
-        const tmpStaff: SmoSystemStaff | undefined = this.score!.staves.find((ss) => ss.staffId === smoMeasure.measureNumber.staffId);
-        if (tmpStaff) {
-          this.measureMapper.mapMeasure(tmpStaff, smoMeasure, printing);
+        // unit test codes don't have tracker.
+        if (this.measureMapper) {
+          const tmpStaff: SmoSystemStaff | undefined = this.score!.staves.find((ss) => ss.staffId === smoMeasure.measureNumber.staffId);
+          if (tmpStaff) {
+            this.measureMapper.mapMeasure(tmpStaff, smoMeasure, printing);
+          }
         }
-      }  
+      }
     });
     modifiers.forEach((modifier) => {
       if (modifier.element) {

package/src/render/sui/scoreViewOperations.ts

@@ -35,6 +35,7 @@ import { SuiPiano } from './piano';
 import { SvgHelpers } from './svgHelpers';
 import { PromiseHelpers } from '../../common/promiseHelpers';
 import { parseJsonText } from 'typescript';
+import {NoteEntryCaret} from "./NoteEntryCaret";
 declare var $: any;
 declare var SmoConfig: SmoRenderConfiguration;
 
@@ -52,6 +53,10 @@ declare var SmoConfig: SmoRenderConfiguration;
  * @category SuiRender
  */
 export class SuiScoreViewOperations extends SuiScoreView {
+  constructor(config: SmoRenderConfiguration, svgContainer: HTMLElement, score: SmoScore, scrollSelector: HTMLElement, undoBuffer: UndoBuffer) {
+    super(config, svgContainer, score, scrollSelector, undoBuffer);
+  }
+
   /**
    * Add a new text group to the score 
    * @param textGroup a new text group
@@ -348,6 +353,17 @@ export class SuiScoreViewOperations extends SuiScoreView {
 
         const altSel = this._getEquivalentSelection(sel);
 
+        // If this is a chord and a specific pitch is selected, just remove that pitch
+        const pitchIndex = this.tracker.getPitchIndex();
+        if (sel.note.pitches.length > 1 && pitchIndex >= 0 && pitchIndex < sel.note.pitches.length) {
+          sel.note.pitches.splice(pitchIndex, 1);
+          altSel!.note!.pitches.splice(pitchIndex, 1);
+          SmoNote.sortPitches(sel.note);
+          SmoNote.sortPitches(altSel!.note! as SmoNote);
+          this.tracker.clearPitchIndex();
+          return; // skip rest/hide logic for this selection
+        }
+
         // set the pitch to be a good position for the rest
         const pitch = JSON.parse(JSON.stringify(
           SmoMeasure.defaultPitchForClef[sel.measure.clef]));
@@ -1207,6 +1223,36 @@ export class SuiScoreViewOperations extends SuiScoreView {
     await promise;
   }
 
+  async setPitches(pitches: Pitch[]): Promise<void> {
+    const selections = this.tracker.selections;
+    const measureSelections = this.undoTrackerMeasureSelections('set pitches');
+    const graceNotes = this.tracker.getSelectedGraceNotes();
+    if (graceNotes.length === 1 && graceNotes[0].selection !== null && graceNotes[0].selection?.note !== null) {
+      const grace1 = graceNotes[0].modifier as SmoGraceNote;
+      const index = graceNotes[0].selection.note.graceNotes.findIndex((x) => x.attrs.id === grace1.attrs.id);
+
+      const altSel = this._getEquivalentSelection(graceNotes[0].selection);
+      if (altSel && altSel.note !== null) {
+        const grace2 = altSel.note.graceNotes[index];
+        grace2.pitches = pitches;
+      }
+      grace1.pitches = pitches;
+    } else if( selections.length === 1) {
+      const selected = selections[0];
+      SmoOperation.setPitch(selected, pitches);
+      const altSel = this._getEquivalentSelection(selected);
+      SmoOperation.setPitch(altSel!, pitches);
+      if (this.score.preferences.autoAdvance) {
+        // Don't play the next note and the added pitch at the same time.
+        this.tracker.deferNextAutoPlay();
+        this.tracker.moveSelectionRight();
+      }
+      SuiOscillator.playSelectionNow(selected, this.score, 1);
+    }
+
+    this._renderChangedMeasures(measureSelections);
+    await this.renderer.updatePromise();
+  }
   /**
    * Add a pitch to the score at the cursor.  This tries to find the best pitch
    * to match the letter key (F vs F# for instance) based on key and surrounding notes

package/src/render/sui/tracker.ts

@@ -6,14 +6,22 @@ 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, defaultKeyEvent, keyHandler } from '../../smo/data/common';
+import { SvgBox, KeyEvent, defaultKeyEvent, keyHandler, Ticks, Pitch, PitchLetter } from '../../smo/data/common';
+import { SmoMusic } from '../../smo/data/music';
 import { SuiScroller } from './scroller';
 import { PasteBuffer } from '../../smo/xform/copypaste';
 import { SmoNote } from '../../smo/data/note';
 import { SmoMeasure } from '../../smo/data/measure';
 import { layoutDebug } from './layoutDebug';
+import { SvgPage } from './svgPageMap';
+import {SmoOperation} from "../../smo/xform/operations";
+import {NoteEntryCaret} from "./NoteEntryCaret";
+import {SmoGraceNote} from "../../smo/data/noteModifiers";
+import {TrackerDelegate} from "./NoteEntryMediator";
 declare var $: any;
 
+
+
 export interface TrackerKeyHandler {
   moveHome : keyHandler, 
   moveEnd : keyHandler, 
@@ -39,6 +47,7 @@ export class SuiTracker extends SuiMapper implements TrackerKeyHandler {
   idleTimer: number = Date.now();
   musicCursorGlyph: SVGSVGElement | null = null;
   deferPlayAdvance: boolean = false;
+  delegate: TrackerDelegate | null = null;
   static get strokes(): Record<string, StrokeInfo> {
     return {
       suggestion: {
@@ -72,7 +81,6 @@ export class SuiTracker extends SuiMapper implements TrackerKeyHandler {
         strokeDasharray: 0,
         opacity: 1.0
       }
-
     };
   }
   constructor(renderer: SuiRendererBase, scroller: SuiScroller) {
@@ -443,21 +451,48 @@ export class SuiTracker extends SuiMapper implements TrackerKeyHandler {
     this.idleTimer = Date.now();
     const nselector = JSON.parse(JSON.stringify(this.selections[0].selector));
     nselector.staff = this.score.incrementActiveStaff(offset);
-    
+
     this.selections = [this._getClosestTick(nselector)];
     this.deferHighlight();
     this._createLocalModifiersList();
   }
-  removePitchSelection() {
-    if (this.outlines['pitchSelection']) {
-      if (this.outlines['pitchSelection'].element) {
-        this.outlines['pitchSelection'].element.remove();
-      }
-      delete this.outlines['pitchSelection'];
+
+
+  /**
+   * Set a specific pitch index (called by caret for mouse clicks)
+   * This updates the visual pitch selection without modifying data
+   */
+  setPitchIndex(index: number): void {
+    if (!this.selections.length) {
+      return;
+    }
+
+    const note = this.selections[0].note as SmoNote;
+    if (!note || index < 0 || index >= note.pitches.length) {
+      return;
     }
+
+    // Update the selected pitch index
+    this.pitchIndex = index;
+    this.selections[0].selector.pitches = [index];
+
+    // Notify via callback
+    this.delegate?.onPitchIndexChanged(index);
+  }
+
+  getPitchIndex(): number {
+    return this.pitchIndex;
+  }
+
+  clearPitchIndex(): void {
+    this.pitchIndex = -1;
+    if (this.selections.length) {
+      this.selections[0].selector.pitches = [];
+    }
+    // Notify via callback
+    this.delegate?.onPitchIndexChanged(-1);
   }
 
-  // ### _moveSelectionPitch
   // Suggest a specific pitch in a chord, so we can transpose just the one note vs. the whole chord.
   _moveSelectionPitch(index: number) {
     this.idleTimer = Date.now();
@@ -468,13 +503,16 @@ export class SuiTracker extends SuiMapper implements TrackerKeyHandler {
     const note = sel.note as SmoNote;
     if (note.pitches.length < 2) {
       this.pitchIndex = -1;
-      this.removePitchSelection();
+      // Emit event for pitch index reset
+      this.delegate?.onPitchIndexChanged(-1);
       return;
     }
     this.pitchIndex = (this.pitchIndex + index) % note.pitches.length;
     sel.selector.pitches = [];
     sel.selector.pitches.push(this.pitchIndex);
-    this._highlightPitchSelection(note, this.pitchIndex);
+
+    // Notify via callback
+    this.delegate?.onPitchIndexChanged(this.pitchIndex);
   }
   moveSelectionPitchUp() {
     this._moveSelectionPitch(1);
@@ -617,7 +655,7 @@ export class SuiTracker extends SuiMapper implements TrackerKeyHandler {
     this.highlightQueue.selectionCount = this.selections.length;
     this.deferHighlight();
   }
-  selectSuggestion(ev: KeyEvent) {
+  selectSuggestion(ev: KeyEvent, deferHighlightSelection: boolean = true) {
     if (!this.suggestion || !this.suggestion.measure || this.score === null) {
       return;
     }
@@ -648,7 +686,9 @@ export class SuiTracker extends SuiMapper implements TrackerKeyHandler {
     if (ev.ctrlKey) {
       this._addSelection(this.suggestion);
       this._createLocalModifiersList();
-      this.deferHighlight();
+      if (deferHighlightSelection) {
+        this.deferHighlight();
+      }
       return;
     }
     if (this.autoPlay) {
@@ -690,7 +730,9 @@ export class SuiTracker extends SuiMapper implements TrackerKeyHandler {
       }
     }
     this.score.setActiveStaff(this.selections[0].selector.staff);
-    this.deferHighlight();
+    if (deferHighlightSelection) {
+      this.deferHighlight();
+    }
     this._createLocalModifiersList();
   }
   _setModifierAsSuggestion(artifact: ModifierTab): void {
@@ -698,6 +740,9 @@ export class SuiTracker extends SuiMapper implements TrackerKeyHandler {
       return;
     }
     this.modifierSuggestion = artifact;
+    if (artifact.modifier instanceof SmoGraceNote) {
+      return;
+    }
     this._drawRect(artifact.box, 'suggestion');
   }
 
@@ -711,14 +756,27 @@ export class SuiTracker extends SuiMapper implements TrackerKeyHandler {
         break;
       }
     }
-    if (sameSel || !artifact.box) {
+    if (!artifact.box) {
       return;
     }
+
     this.modifierSuggestion = null;
 
     this.suggestion = artifact;
+    // console.log(artifact.box);
+    // artifact.box.height = 60;
+    if (this.suggestion.note) {
+      return;
+    }
     this._drawRect(artifact.box, 'suggestion');
+    // if (sameSel) {
+      //todo; provide argument to the caret so it knows we are operation on a selected element
+    // }
+    // const caret = this.getNoteEntryCaret();
+    // caret.setSelection(this.suggestion);
+    // caret.render();
   }
+
   _highlightModifier() {
     let box: SvgBox | null = null;
     if (!this.modifierSelections.length) {
@@ -726,6 +784,9 @@ export class SuiTracker extends SuiMapper implements TrackerKeyHandler {
     }
     this.removeModifierSelectionBox();
     this.modifierSelections.forEach((artifact) => {
+      if (artifact.modifier instanceof SmoGraceNote) {
+        return;
+      }
       if (box === null) {
         box = artifact.modifier.logicalBox ?? null;
       } else {
@@ -738,19 +799,6 @@ export class SuiTracker extends SuiMapper implements TrackerKeyHandler {
     this._drawRect(box, 'staffModifier');
   }
 
-  _highlightPitchSelection(note: SmoNote, index: number) {
-    const noteDiv = $(this.renderElement).find('#' + note.renderId);
-    const heads = noteDiv.find('.vf-notehead');
-    if (!heads.length) {
-      return;
-    }
-    const headEl = heads[index];
-    const pageContext = this.renderer.pageMap.getRendererFromModifier(note);
-    $(pageContext.svg).find('.vf-pitchSelection').remove();
-    const box = pageContext.offsetBbox(headEl);
-    this._drawRect(box, 'pitchSelection');
-  }
-
   _highlightActiveVoice(selection: SmoSelection) {
     let i = 0;
     const selector = selection.selector;
@@ -775,32 +823,27 @@ export class SuiTracker extends SuiMapper implements TrackerKeyHandler {
     let prevSel: SmoSelection | null = null;
     let curBox: SvgBox = SvgBox.default;
     this.idleTimer = Date.now();
-    const grace = this.getSelectedGraceNotes();
-    // If this is not a note with grace notes, logically unselect the grace notes
-    if (grace && grace.length && grace[0].selection && this.selections.length) {
-      if (!SmoSelector.sameNote(grace[0].selection.selector, this.selections[0].selector)) {
-        this.clearModifierSelections();
-      } else {
-        this._highlightModifier();
-        return;
-      }
-    }
     // If there is a race condition with a change, avoid referencing null note
     if (!this.selections[0].note) {
       return;
     }
     const note = this.selections[0].note as SmoNote;
-    if (this.pitchIndex >= 0 && this.selections.length === 1 &&
-      this.pitchIndex < note.pitches.length) {
-      this._highlightPitchSelection(note, this.pitchIndex);
-      this._highlightActiveVoice(this.selections[0]);
-      return;
+    // Reset pitch index if not in a valid pitch selection scenario
+    if (this.pitchIndex < 0 || this.selections.length !== 1 || this.pitchIndex >= note.pitches.length) {
+      this.pitchIndex = -1;
     }
-    this.removePitchSelection();
-    this.pitchIndex = -1;
+
+    // Single selection - just update voice UI and notify
     if (this.selections.length === 1 && note.logicalBox) {
-      this._drawRect(note.logicalBox, 'selection');
       this._highlightActiveVoice(this.selections[0]);
+      // Clear any existing multi-selection rectangles
+      this.drawSelectionRects([]);
+      // Get selected grace note if any
+      let graceNote: SmoGraceNote | null = null;
+      if (this.modifierSelections.length > 0 && this.modifierSelections[0].modifier instanceof SmoGraceNote) {
+        graceNote = this.modifierSelections[0].modifier;
+      }
+      this.delegate?.onSingleNoteHighlighted(this.selections[0], graceNote);
       return;
     }
     const sorted = this.selections.sort((a, b) => SmoSelector.gt(a.selector, b.selector) ? 1 : -1);
@@ -901,4 +944,7 @@ export class SuiTracker extends SuiMapper implements TrackerKeyHandler {
       }
     });
   }
+
+
+
 }

package/src/render/vex/vxMeasure.ts

@@ -241,6 +241,7 @@ export class VxMeasure implements VxMeasureIf {
         vexNote.setStave(this.stave);
       }
     }
+    smoNote.vexNote = vexNote;
     const tiedOverPitches = tickIndex === 0 ? this.tiedOverPitches : [];
     const noteData: VexNoteModifierIf = {
       smoMeasure: this.smoMeasure,
@@ -693,7 +694,7 @@ export class VxMeasure implements VxMeasureIf {
 
       this.rendered = true;
       if (layoutDebug.mask & layoutDebug.values['adjust']) {
-        SvgHelpers.debugBoxNoText(this.context.getContext().svg,
+        SvgHelpers.debugBox(this.context.getContext().svg,
         SvgHelpers.boxPoints(this.dbgLeftX, 
           this.smoMeasure.svg.staffY, this.dbgWidth, 40), 'render-x-dbg', 0);
       }

package/src/render/vex/vxNote.ts

@@ -243,6 +243,7 @@ export class VxNote {
         gr.addClass('grace-note'); // note: this doesn't work :(
 
         g.renderId = gr.getAttribute('id');
+        g.vexGraceNote = gr;
         group.push(gr);
       });
       const grace: any = new VF.GraceNoteGroup(group);

package/src/smo/data/music.ts

@@ -318,6 +318,23 @@ export class SmoMusic {
     line += SmoMusic.clefLedgerShift[clef]
     return line;
   }
+  static staffLineToPitch(clef: string, line: number): Pitch {
+    const adjustedLine = line - SmoMusic.clefLedgerShift[clef];
+    const scaledValue = adjustedLine * 2;
+    const octaveValue = scaledValue + 28;
+    const octave = Math.floor(octaveValue / 7);
+    const positionInOctave = ((octaveValue % 7) + 7) % 7;
+
+    const noteKey = (Object.keys(SmoMusic.noteValues).find((key) =>
+        SmoMusic.noteValues[key].root_index === positionInOctave && key.length === 1
+    )) as PitchLetter;
+
+    return {
+      letter: noteKey,
+      accidental: 'n',
+      octave
+    };
+  }
   /**
    * return above if the first pitch is above line 3, else below
    * @param note 

package/src/smo/data/note.ts

@@ -16,6 +16,7 @@ import { SmoMusic } from './music';
 import { Ticks, Pitch, SmoAttrs, Transposable, PitchLetter, SvgBox, getId } from './common';
 import { FontInfo, vexCanonicalNotes } from '../../common/vex';
 import { SmoTupletParamsSer } from './tuplet';
+import {Note} from "vexflow_smoosic";
 
 export interface PlayedNote {
   pitches: Pitch[],
@@ -360,12 +361,13 @@ export class SmoNote implements Transposable {
   renderId: string | null = null;
   keySignature: string = 'c';
   logicalBox: SvgBox | null = null;
+  vexNote: Note | null = null;
   // mixin for real-time audio playback
   audioData: SmoAudioData = {
     volume: [],
     playedNotes: []
   };
-  
+
   isCue: boolean = false;
   hasTabNote: boolean = true;
   accidentalsRendered: string[] = [];// set by renderer if accidental is to display

package/src/smo/data/noteModifiers.ts

@@ -11,6 +11,7 @@ import { SmoAttrs, Ticks, Pitch, getId, SmoObjectParams, Transposable, SvgBox, S
 import { smoSerialize } from '../../common/serializationHelpers';
 import { SmoMusic } from './music';
 import { defaultNoteScale, FontInfo, getChordSymbolGlyphFromCode } from '../../common/vex';
+import {GraceNote} from "vexflow_smoosic";
 
 /**
  * A note modifier is anything that is mapped to the note, but not part of the
@@ -220,6 +221,7 @@ export class SmoGraceNote extends SmoNoteModifierBase implements Transposable {
   clef: string = 'treble';
   noteType: string = 'n';
   renderId: string | null = null;
+  vexGraceNote: GraceNote | null = null;//todo: this is added here to help with EntryCaret
   hasTabNote: boolean = false;
 
   tickCount() {

package/src/smo/data/scoreModifiers.ts

@@ -144,7 +144,6 @@ export interface SmoScorePreferencesParams {
   hideEmptyLines: boolean;
   transposingScore: boolean;
   showPartNames: boolean;
-  horizontalDisplay?: boolean;
 }
 /**
  * Some default SMO behavior
@@ -167,7 +166,6 @@ export class SmoScorePreferences {
   autoScrollPlayback: boolean = true;
   transposingScore: boolean = false;
   showPartNames: boolean = false;
-  horizontalDisplay: boolean;
   static get defaults(): SmoScorePreferencesParams {
     return {
       autoPlay: true,
@@ -197,7 +195,6 @@ export class SmoScorePreferences {
         this.showPartNames = false;
       }
     }
-      this.horizontalDisplay = params.horizontalDisplay ?? false;
   }
   serialize(): SmoScorePreferencesParams {
     return {

package/src/styles/general.css

@@ -0,0 +1,22 @@
+.musicContainer {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+.pitch-preview {
+    cursor: default;
+    pointer-events: none;
+    /*user-select: none;*/
+    /*-webkit-user-select: none;*/
+    /*-moz-user-select: none;*/
+    /*-ms-user-select: none;*/
+}
+
+/*.note-entry-caret {*/
+/*    user-select: none;*/
+/*    -webkit-user-select: none;*/
+/*    -moz-user-select: none;*/
+/*    -ms-user-select: none;*/
+/*}*/

package/src/ui/components/dialogs/scorePreferences.vue

@@ -15,8 +15,7 @@ const props: Props = defineProps<Props>();
 const { domId, commitCb, cancelCb, getPreferences } = { ...props };
 const preferences = getPreferences();
 
-type booleanTypes = 'autoPlay' | 'autoAdvance' | 'showPiano' | 'hideEmptyLines' | 'autoScrollPlayback' | 'transposingScore' 
-  | 'showPartNames' | 'horizontalDisplay';
+type booleanTypes = 'autoPlay' | 'autoAdvance' | 'showPiano' | 'hideEmptyLines' | 'autoScrollPlayback' | 'transposingScore' | 'showPartNames';
 type numberTypes = 'defaultDupleDuration' | 'defaultTripleDuration';
 
 const defaultDoubleDurations: SelectOption[] = [
@@ -98,15 +97,6 @@ const updateNumber = (type: numberTypes) => {
         <label class="form-check-label" :for="getId('partNames')">Show part names in Score</label>
       </div>
     </div>
-    <div class="row">
-      <div class="col col-1">
-        <input class="form-check-input" type="checkbox" v-model="preferences.horizontalDisplay"
-          :id="getId('horizontalDisplay')" @change="updateBool('horizontalDisplay')"></input>
-      </div>
-      <div class="col col-5">
-        <label class="form-check-label" :for="getId('hideEmptyLines')">Horizontal Display</label>
-      </div>
-    </div>
     <div class="row align-items-baseline mt-3" :id="getId('arp-row')">
       <div class="col col-3 float-end pe-0">
         <span :for="getId('duration-select1')" class="form-label">Default Duration (even meter):</span>