From a395f1aae91a8ed192f06dc3650f6ddb41892cb7 Mon Sep 17 00:00:00 2001 From: Rodrigo Vilar Date: Mon, 3 Oct 2022 09:37:53 +0200 Subject: [PATCH] standardize openGroup --- src/annotation.ts | 3 +-- src/beam.ts | 4 +--- src/chordsymbol.ts | 3 +-- src/element.ts | 9 ++++++++- src/glyphnote.ts | 2 -- src/ornament.ts | 3 +-- src/stavenote.ts | 28 +++++++++++----------------- src/stavetie.ts | 8 +------- src/stem.ts | 2 ++ src/tabnote.ts | 4 +--- tests/stavenote_tests.ts | 8 +++++--- 11 files changed, 32 insertions(+), 42 deletions(-) diff --git a/src/annotation.ts b/src/annotation.ts index db1ea5126b..d304df6d9c 100644 --- a/src/annotation.ts +++ b/src/annotation.ts @@ -241,8 +241,7 @@ export class Annotation extends Modifier { // still need to save context state just before this, since we will be // changing ctx parameters below. this.applyStyle(); - const classString = Object.keys(this.getAttribute('classes')).join(' '); - ctx.openGroup(classString, this.getAttribute('id')); + ctx.openGroup('annotation', this.getAttribute('id')); ctx.setFont(this.textFont); const text_width = ctx.measureText(this.text).width; diff --git a/src/beam.ts b/src/beam.ts index f9440e6c96..a279a4e9d7 100644 --- a/src/beam.ts +++ b/src/beam.ts @@ -900,9 +900,7 @@ export class Beam extends Element { if (stem) { const stem_x = note.getStemX(); stem.setNoteHeadXBounds(stem_x, stem_x); - ctx.openGroup('stem', note.getAttribute('id') + '-stem'); stem.setContext(ctx).draw(); - ctx.closeGroup(); } }, this); } @@ -930,7 +928,7 @@ export class Beam extends Element { if (lastBeamX) { const lastBeamY = this.getSlopeY(lastBeamX, firstStemX, beamY, this.slope); - this.setAttribute('el', ctx.openGroup('beam')); + ctx.openGroup('beam', this.getAttribute('id')); ctx.beginPath(); ctx.moveTo(startBeamX, startBeamY); ctx.lineTo(startBeamX, startBeamY + beamThickness); diff --git a/src/chordsymbol.ts b/src/chordsymbol.ts index d38f133895..37ca6b56a0 100644 --- a/src/chordsymbol.ts +++ b/src/chordsymbol.ts @@ -706,8 +706,7 @@ export class ChordSymbol extends Modifier { // We're changing context parameters. Save current state. ctx.save(); - const classString = Object.keys(this.getAttribute('classes')).join(' '); - ctx.openGroup(classString, this.getAttribute('id')); + ctx.openGroup('chordsymbol', this.getAttribute('id')); const start = note.getModifierStartXY(Modifier.Position.ABOVE, this.index); ctx.setFont(this.textFont); diff --git a/src/element.ts b/src/element.ts index 8816e25196..2e9a377241 100644 --- a/src/element.ts +++ b/src/element.ts @@ -7,7 +7,7 @@ import { Font, FontInfo, FontStyle, FontWeight } from './font'; import { Registry } from './registry'; import { RenderContext } from './rendercontext'; import { Category } from './typeguard'; -import { defined } from './util'; +import { defined, prefix } from './util'; /** Element attributes. */ export interface ElementAttributes { @@ -260,6 +260,13 @@ export abstract class Element { return this.attrs[name]; } + /** Return associated SVGElement. */ + getSVGElement(suffix: string = ''): SVGElement | undefined { + const id = prefix(this.attrs.id + suffix); + const element = document.getElementById(id); + if (element) return element as unknown as SVGElement; + } + /** Set an attribute. */ // eslint-disable-next-line setAttribute(name: string, value: any): this { diff --git a/src/glyphnote.ts b/src/glyphnote.ts index 352916ed50..02a5d95218 100644 --- a/src/glyphnote.ts +++ b/src/glyphnote.ts @@ -52,13 +52,11 @@ export class GlyphNote extends Note { drawModifiers(): void { const ctx = this.checkContext(); - ctx.openGroup('modifiers'); for (let i = 0; i < this.modifiers.length; i++) { const modifier = this.modifiers[i]; modifier.setContext(ctx); modifier.drawWithStyle(); } - ctx.closeGroup(); } draw(): void { diff --git a/src/ornament.ts b/src/ornament.ts index 111f26e751..955afe7dd4 100644 --- a/src/ornament.ts +++ b/src/ornament.ts @@ -249,8 +249,7 @@ export class Ornament extends Modifier { const stemDir = note.getStemDirection(); const stave = note.checkStave(); - const classString = Object.keys(this.getAttribute('classes')).join(' '); - ctx.openGroup(classString, this.getAttribute('id')); + ctx.openGroup('ornament', this.getAttribute('id')); // Get stem extents const stemExtents = note.checkStem().getExtents(); diff --git a/src/stavenote.ts b/src/stavenote.ts index 600310063d..7cef01f2d3 100644 --- a/src/stavenote.ts +++ b/src/stavenote.ts @@ -1100,20 +1100,20 @@ export class StaveNote extends StemmableNote { } // Draw all key modifiers - drawModifiers(): void { + drawModifiers(noteheadParam: NoteHead): void { const ctx = this.checkContext(); - ctx.openGroup('modifiers'); for (let i = 0; i < this.modifiers.length; i++) { const modifier = this.modifiers[i]; const index = modifier.checkIndex(); const notehead = this._noteHeads[index]; - const noteheadStyle = notehead.getStyle(); - notehead.applyStyle(ctx, noteheadStyle); - modifier.setContext(ctx); - modifier.drawWithStyle(); - notehead.restoreStyle(ctx, noteheadStyle); + if (notehead == noteheadParam) { + const noteheadStyle = notehead.getStyle(); + notehead.applyStyle(ctx, noteheadStyle); + modifier.setContext(ctx); + modifier.drawWithStyle(); + notehead.restoreStyle(ctx, noteheadStyle); + } } - ctx.closeGroup(); } shouldDrawFlag(): boolean { @@ -1155,11 +1155,9 @@ export class StaveNote extends StemmableNote { (this.flag?.getMetrics().y_shift ?? 0) * (1 - this.getStaveNoteScale()); // Draw the Flag - ctx.openGroup('flag', undefined, { pointerBBox: true }); this.applyStyle(ctx, this.getFlagStyle()); this.flag?.render(ctx, flagX, flagY); this.restoreStyle(ctx, this.getFlagStyle()); - ctx.closeGroup(); } } @@ -1167,8 +1165,9 @@ export class StaveNote extends StemmableNote { drawNoteHeads(): void { const ctx = this.checkContext(); this._noteHeads.forEach((notehead) => { - ctx.openGroup('notehead', undefined, { pointerBBox: true }); + ctx.openGroup('notehead', notehead.getAttribute('id'), { pointerBBox: true }); notehead.setContext(ctx).draw(); + this.drawModifiers(notehead); ctx.closeGroup(); }); } @@ -1190,9 +1189,7 @@ export class StaveNote extends StemmableNote { } if (this.stem) { - ctx.openGroup('stem', undefined, { pointerBBox: true }); this.stem.setContext(ctx).draw(); - ctx.closeGroup(); } } @@ -1267,15 +1264,12 @@ export class StaveNote extends StemmableNote { // Apply the overall style -- may be contradicted by local settings: this.applyStyle(); - this.setAttribute('el', ctx.openGroup('stavenote', this.getAttribute('id'))); + ctx.openGroup('stavenote', this.getAttribute('id')); this.drawLedgerLines(); - ctx.openGroup('note', undefined, { pointerBBox: true }); if (shouldRenderStem) this.drawStem(); this.drawNoteHeads(); this.drawFlag(); ctx.closeGroup(); - this.drawModifiers(); - ctx.closeGroup(); this.restoreStyle(); this.setRendered(); } diff --git a/src/stavetie.ts b/src/stavetie.ts index 524d22a599..fd0628b9d8 100644 --- a/src/stavetie.ts +++ b/src/stavetie.ts @@ -152,13 +152,7 @@ export class StaveTie extends Element { const top_cp_y = (first_y_px + last_y_px) / 2 + cp1 * params.direction; const bottom_cp_y = (first_y_px + last_y_px) / 2 + cp2 * params.direction; - // id probably unnecessary if we save the group to 'el' via setAttribute - // let id: string = ""; - // if (this.notes.first_note) { - // id = this.notes.first_note.getAttribute('id') + '-tie'; - // } - // this.setAttribute('el', ctx.openGroup('stavetie', id)); - this.setAttribute('el', ctx.openGroup('stavetie')); + ctx.openGroup('stavetie', this.getAttribute('id')); ctx.beginPath(); ctx.moveTo(params.first_x_px + first_x_shift, first_y_px); ctx.quadraticCurveTo(cp_x, top_cp_y, params.last_x_px + last_x_shift, last_y_px); diff --git a/src/stem.ts b/src/stem.ts index 8d7fe646e1..bdb3ce4b93 100644 --- a/src/stem.ts +++ b/src/stem.ts @@ -210,6 +210,7 @@ export class Stem extends Element { // Draw the stem ctx.save(); + ctx.openGroup('stem', this.getAttribute('id'), { pointerBBox: true }); this.applyStyle(ctx); ctx.beginPath(); ctx.setLineWidth(Stem.WIDTH); @@ -217,6 +218,7 @@ export class Stem extends Element { ctx.lineTo(stem_x, stem_y - stemHeight - this.renderHeightAdjustment * stem_direction); ctx.stroke(); this.restoreStyle(ctx); + ctx.closeGroup(); ctx.restore(); } } diff --git a/src/tabnote.ts b/src/tabnote.ts index 9cdbd904dd..ea3d72a56f 100644 --- a/src/tabnote.ts +++ b/src/tabnote.ts @@ -455,16 +455,14 @@ export class TabNote extends StemmableNote { this.setRendered(); const render_stem = this.beam == undefined && this.render_options.draw_stem; - this.setAttribute('el', ctx.openGroup('tabnote', this.getAttribute('id'), { pointerBBox: true })); + ctx.openGroup('tabnote', this.getAttribute('id'), { pointerBBox: true }); this.drawPositions(); this.drawStemThrough(); if (this.stem && render_stem) { const stem_x = this.getStemX(); this.stem.setNoteHeadXBounds(stem_x, stem_x); - ctx.openGroup('stem', undefined, { pointerBBox: true }); this.stem.setContext(ctx).draw(); - ctx.closeGroup(); } this.drawFlag(); diff --git a/tests/stavenote_tests.ts b/tests/stavenote_tests.ts index a6ae521944..376f771f2a 100644 --- a/tests/stavenote_tests.ts +++ b/tests/stavenote_tests.ts @@ -403,9 +403,11 @@ function drawBasic(options: TestOptions, contextBuilder: ContextBuilder): void { // If this is an interactivity test (ui: true), then attach mouseover & mouseout handlers to the notes. if (options.params.ui) { - const item = note.getAttribute('el') as SVGElement; - item.addEventListener('mouseover', colorDescendants(item, 'green'), false); - item.addEventListener('mouseout', colorDescendants(item, 'black'), false); + const item = note.getSVGElement(); + if (item) { + item.addEventListener('mouseover', colorDescendants(item, 'green'), false); + item.addEventListener('mouseout', colorDescendants(item, 'black'), false); + } } ok(note.getX() > 0, 'Note ' + i + ' has X value'); ok(note.getYs().length > 0, 'Note ' + i + ' has Y values');