From 198b802124972e7ce66ee582ec2776cdd54b7248 Mon Sep 17 00:00:00 2001
From: Justus <jrenton87@gmail.com>
Date: Fri, 19 Apr 2024 05:17:44 -0500
Subject: [PATCH 1/3] open context for barnote

---
 src/barnote.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/barnote.ts b/src/barnote.ts
index 5432e5a990..31b12bd36b 100644
--- a/src/barnote.ts
+++ b/src/barnote.ts
@@ -30,6 +30,7 @@ export class BarNote extends Note {
   protected metrics: { widths: Record<string, number> };
   // Initialized by the constructor via this.setType(type)
   protected type!: BarlineType;
+  public barline!: Barline;
 
   constructor(type: string | BarlineType = BarlineType.SINGLE) {
     super({ duration: 'b' });
@@ -52,6 +53,7 @@ export class BarNote extends Note {
     // Tell the formatter that bar notes have no duration.
     this.ignore_ticks = true;
     this.setType(type);
+    this.barline = new Barline(type);
   }
 
   /** Get the type of bar note.*/
@@ -86,9 +88,13 @@ export class BarNote extends Note {
     const ctx = this.checkContext();
     L('Rendering bar line at: ', this.getAbsoluteX());
     this.applyStyle(ctx);
-    const barline = new Barline(this.type);
-    barline.setX(this.getAbsoluteX());
-    barline.draw(this.checkStave());
+
+    ctx.openGroup('barnote', this.getAttribute('id'));
+    this.barline.setType(this.type);
+    this.barline.setX(this.getAbsoluteX());
+    this.barline.draw(this.checkStave());
+    ctx.closeGroup();
+
     this.restoreStyle(ctx);
     this.setRendered();
   }

From ad7193e2b8e36828f71fb8827137be850d132096 Mon Sep 17 00:00:00 2001
From: Justus <jrenton87@gmail.com>
Date: Fri, 19 Apr 2024 05:29:44 -0500
Subject: [PATCH 2/3] assert getSVGElement is not undefined

---
 tests/barline_tests.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/tests/barline_tests.ts b/tests/barline_tests.ts
index a197b8435b..863e3ab5b6 100644
--- a/tests/barline_tests.ts
+++ b/tests/barline_tests.ts
@@ -44,6 +44,10 @@ function simple(options: TestOptions): void {
   f.Formatter().joinVoices([voice]).formatToStave([voice], stave);
   f.draw();
 
+  notes.forEach((note) => {
+    options.assert.notEqual(note.getSVGElement(), undefined);
+  });
+
   options.assert.ok(true, 'Simple Test');
 }
 

From 44f769f15e3d6850800013f8051f0c786825d457 Mon Sep 17 00:00:00 2001
From: Justus <jrenton87@gmail.com>
Date: Fri, 19 Apr 2024 12:40:30 -0500
Subject: [PATCH 3/3] only check if getSVGElement is undefined if it's the SVG
 renderer

---
 tests/barline_tests.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/tests/barline_tests.ts b/tests/barline_tests.ts
index 863e3ab5b6..2a57930b87 100644
--- a/tests/barline_tests.ts
+++ b/tests/barline_tests.ts
@@ -5,6 +5,7 @@
 
 import { TestOptions, VexFlowTests } from './vexflow_test_helpers';
 
+import { Renderer } from '../src';
 import { Barline, BarlineType } from '../src/stavebarline';
 
 const BarlineTests = {
@@ -44,9 +45,11 @@ function simple(options: TestOptions): void {
   f.Formatter().joinVoices([voice]).formatToStave([voice], stave);
   f.draw();
 
-  notes.forEach((note) => {
-    options.assert.notEqual(note.getSVGElement(), undefined);
-  });
+  if (options.backend === Renderer.Backends.SVG) {
+    notes.forEach((note) => {
+      options.assert.notEqual(note.getSVGElement(), undefined);
+    });
+  }
 
   options.assert.ok(true, 'Simple Test');
 }