fix: Simile Mark cursor and highlighting (#2025)

Author: Danielku15

src/importer/MusicXmlImporter.ts

@@ -1058,6 +1058,9 @@ export class MusicXmlImporter extends ScoreImporter {
             for (const s of track.staves) {
                 const bar = this.getOrCreateBar(s, masterBar);
                 bar.simileMark = this._simileMarkAllStaves!;
+                if(bar.simileMark !== SimileMark.None) {
+                    this.clearBar(bar);
+                }
             }
 
             if (this._simileMarkAllStaves == SimileMark.FirstOfDouble) {
@@ -1074,6 +1077,10 @@ export class MusicXmlImporter extends ScoreImporter {
                 const bar = this.getOrCreateBar(s, masterBar);
                 bar.simileMark = this._simileMarkPerStaff!.get(i)!;
 
+                if(bar.simileMark !== SimileMark.None) {
+                    this.clearBar(bar);
+                }
+
                 if (bar.simileMark == SimileMark.FirstOfDouble) {
                     this._simileMarkPerStaff!.set(i, SimileMark.SecondOfDouble);
                 } else {
@@ -1085,6 +1092,14 @@ export class MusicXmlImporter extends ScoreImporter {
             }
         }
     }
+    
+    private clearBar(bar: Bar) {
+        for(const v of bar.voices) {
+            const emptyBeat: Beat = new Beat();
+            emptyBeat.isEmpty = true;
+            v.addBeat(emptyBeat);
+        }
+    }
 
     private parseBarLine(element: XmlNode, masterBar: MasterBar) {
         for (const c of element.childElements()) {

src/rendering/BarRendererBase.ts

@@ -577,26 +577,38 @@ export class BarRendererBase {
 
     protected paintSimileMark(cx: number, cy: number, canvas: ICanvas): void {
         using _ = ElementStyleHelper.voice(canvas, VoiceSubElement.Glyphs, this.bar.voices[0], true);
+
+
         switch (this.bar.simileMark) {
             case SimileMark.Simple:
+                canvas.beginGroup(BeatContainerGlyph.getGroupId(this.bar.voices[0].beats[0]));
                 canvas.fillMusicFontSymbol(
                     cx + this.x + (this.width - 20) / 2,
                     cy + this.y + this.height / 2,
                     1,
                     MusicFontSymbol.Repeat1Bar,
                     false
                 );
+                canvas.endGroup();
                 break;
             case SimileMark.SecondOfDouble:
+                canvas.beginGroup(BeatContainerGlyph.getGroupId(this.bar.voices[0].beats[0]));
+                canvas.beginGroup(BeatContainerGlyph.getGroupId(this.bar.previousBar!.voices[0].beats[0]));
+
                 canvas.fillMusicFontSymbol(
                     cx + this.x - 28 / 2,
                     cy + this.y + this.height / 2,
                     1,
                     MusicFontSymbol.Repeat2Bars,
                     false
                 );
+
+                canvas.endGroup();
+                canvas.endGroup();
+
                 break;
         }
+
     }
 
     public completeBeamingHelper(helper: BeamingHelper) {

src/rendering/ScoreBarRenderer.ts

@@ -25,7 +25,6 @@ import { KeySignature } from '@src/model/KeySignature';
 import { LineBarRenderer } from './LineBarRenderer';
 import { KeySignatureGlyph } from './glyphs/KeySignatureGlyph';
 import { ElementStyleHelper } from './utils/ElementStyleHelper';
-import { SimileMark } from '@src/model';
 
 /**
  * This BarRenderer renders a bar using standard music notation.
@@ -603,10 +602,6 @@ export class ScoreBarRenderer extends LineBarRenderer {
     }
 
     protected override createVoiceGlyphs(v: Voice): void {
-        if(this.bar.simileMark !== SimileMark.None) {
-            return;
-        }
-        
         for (const b of v.beats) {
             let container: ScoreBeatContainerGlyph = new ScoreBeatContainerGlyph(b, this.getVoiceContainer(v)!);
             container.preNotes = new ScoreBeatPreNotesGlyph();

src/rendering/SlashBarRenderer.ts

@@ -16,7 +16,7 @@ import { SpacingGlyph } from './glyphs/SpacingGlyph';
 import { ScoreTimeSignatureGlyph } from './glyphs/ScoreTimeSignatureGlyph';
 import { ElementStyleHelper } from './utils/ElementStyleHelper';
 import { MusicFontSymbolSizes } from './utils/MusicFontSymbolSizes';
-import { MusicFontSymbol, SimileMark } from '@src/model';
+import { MusicFontSymbol } from '@src/model';
 
 /**
  * This BarRenderer renders a bar using Slash Rhythm notation
@@ -163,10 +163,6 @@ export class SlashBarRenderer extends LineBarRenderer {
     }
 
     protected override createVoiceGlyphs(v: Voice): void {
-        if (this.bar.simileMark !== SimileMark.None) {
-            return;
-        }
-
         for (const b of v.beats) {
             let container: SlashBeatContainerGlyph = new SlashBeatContainerGlyph(b, this.getVoiceContainer(v)!);
             container.preNotes = new BeatGlyphBase();

src/rendering/TabBarRenderer.ts

@@ -21,7 +21,6 @@ import { GraceType } from '@src/model/GraceType';
 import { ReservedLayoutAreaSlot } from './utils/BarCollisionHelper';
 import { MultiBarRestBeatContainerGlyph } from './MultiBarRestBeatContainerGlyph';
 import { ElementStyleHelper } from './utils/ElementStyleHelper';
-import { SimileMark } from '@src/model';
 
 /**
  * This BarRenderer renders a bar using guitar tablature notation
@@ -196,10 +195,6 @@ export class TabBarRenderer extends LineBarRenderer {
     }
 
     protected override createVoiceGlyphs(v: Voice): void {
-        if (this.bar.simileMark !== SimileMark.None) {
-            return;
-        }
-
         // multibar rest
         if (this.additionalMultiRestBars) {
             let container = new MultiBarRestBeatContainerGlyph(this.getVoiceContainer(v)!);