Skip to content

Commit 369ee05

Browse files
rvilarlrvilarl
committed
radius now protected
1 parent ff0f567 commit 369ee05

File tree

3 files changed

+64
-44
lines changed

3 files changed

+64
-44
lines changed

‎src/factory.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -464,11 +464,11 @@ export class Factory {
464464
return fingering;
465465
}
466466

467-
StringNumber(params: { number: string; position: string; radius?: number }): StringNumber {
467+
StringNumber(params: { number: string; position: string; drawCircle?: boolean }): StringNumber {
468468
const stringNumber = new StringNumber(params.number);
469469
stringNumber.setPosition(params.position);
470470
stringNumber.setContext(this.context);
471-
if (params.radius != undefined) stringNumber.radius = params.radius;
471+
if (params.drawCircle != undefined) stringNumber.setDrawCircle(params.drawCircle);
472472
return stringNumber;
473473
}
474474

‎src/stringnumber.ts

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export class StringNumber extends Modifier {
5757
const index = num.checkIndex();
5858
const props = note.getKeyProps()[index];
5959
const mc = note.getModifierContext();
60-
const verticalSpaceNeeded = (num.getMinRadius() * 2) / Tables.STAVE_LINE_DISTANCE + 0.5;
60+
const verticalSpaceNeeded = (num.radius * 2) / Tables.STAVE_LINE_DISTANCE + 0.5;
6161

6262
if (mc) {
6363
if (pos === ModifierPosition.ABOVE) {
@@ -132,7 +132,8 @@ export class StringNumber extends Modifier {
132132
return true;
133133
}
134134

135-
public radius: number;
135+
protected radius: number;
136+
protected drawCircle: boolean;
136137
protected last_note?: Note;
137138
protected string_number: string;
138139
protected x_offset: number;
@@ -146,7 +147,6 @@ export class StringNumber extends Modifier {
146147
super();
147148

148149
this.string_number = number;
149-
this.setWidth(20); // ???
150150
this.position = Modifier.Position.ABOVE; // Default position above stem or note head
151151
this.x_shift = 0;
152152
this.y_shift = 0;
@@ -157,13 +157,11 @@ export class StringNumber extends Modifier {
157157
this.dashed = true; // true - draw dashed extension false - no extension
158158
this.leg = Renderer.LineEndType.NONE; // draw upward/downward leg at the of extension line
159159
this.radius = 8;
160+
this.drawCircle = true;
161+
this.setWidth(this.radius * 2 + 4);
160162
this.resetFont();
161163
}
162164

163-
protected getMinRadius(): number {
164-
return Math.max(this.radius, 8);
165-
}
166-
167165
setLineEndType(leg: number): this {
168166
if (leg >= Renderer.LineEndType.NONE && leg <= Renderer.LineEndType.DOWN) {
169167
this.leg = leg;
@@ -196,6 +194,11 @@ export class StringNumber extends Modifier {
196194
return this;
197195
}
198196

197+
setDrawCircle(drawCircle: boolean): this {
198+
this.drawCircle = drawCircle;
199+
return this;
200+
}
201+
199202
draw(): void {
200203
const ctx = this.checkContext();
201204
const note = this.checkAttachedNote();
@@ -218,8 +221,7 @@ export class StringNumber extends Modifier {
218221
if (note.hasStem() && stemDirection == Stem.UP) {
219222
dot_y = stem_ext.topY + StringNumber.metrics.stemPadding;
220223
}
221-
dot_y -=
222-
this.getMinRadius() + StringNumber.metrics.verticalPadding + this.text_line * Tables.STAVE_LINE_DISTANCE;
224+
dot_y -= this.radius + StringNumber.metrics.verticalPadding + this.text_line * Tables.STAVE_LINE_DISTANCE;
223225
}
224226
break;
225227
case Modifier.Position.BELOW:
@@ -229,25 +231,26 @@ export class StringNumber extends Modifier {
229231
if (note.hasStem() && stemDirection == Stem.DOWN) {
230232
dot_y = stem_ext.topY - StringNumber.metrics.stemPadding;
231233
}
232-
dot_y +=
233-
this.getMinRadius() + StringNumber.metrics.verticalPadding + this.text_line * Tables.STAVE_LINE_DISTANCE;
234+
dot_y += this.radius + StringNumber.metrics.verticalPadding + this.text_line * Tables.STAVE_LINE_DISTANCE;
234235
}
235236
break;
236237
case Modifier.Position.LEFT:
237-
dot_x -= this.getMinRadius() / 2 + StringNumber.metrics.leftPadding;
238+
dot_x -= this.radius / 2 + StringNumber.metrics.leftPadding;
238239
break;
239240
case Modifier.Position.RIGHT:
240-
dot_x += this.getMinRadius() / 2 + StringNumber.metrics.rightPadding;
241+
dot_x += this.radius / 2 + StringNumber.metrics.rightPadding;
241242
break;
242243
default:
243244
throw new RuntimeError('InvalidPosition', `The position ${this.position} is invalid`);
244245
}
245246

246247
ctx.save();
247-
ctx.beginPath();
248-
ctx.arc(dot_x, dot_y, this.radius, 0, Math.PI * 2, false);
249-
ctx.setLineWidth(1.5);
250-
ctx.stroke();
248+
if (this.drawCircle) {
249+
ctx.beginPath();
250+
ctx.arc(dot_x, dot_y, this.radius, 0, Math.PI * 2, false);
251+
ctx.setLineWidth(1.5);
252+
ctx.stroke();
253+
}
251254
ctx.setFont(this.textFont);
252255
const x = dot_x - ctx.measureText(this.string_number).width / 2;
253256
ctx.fillText('' + this.string_number, x, dot_y + 4.5);

‎tests/stringnumber_tests.ts

Lines changed: 42 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,7 @@ const StringNumberTests = {
1717

1818
const run = VexFlowTests.runTests;
1919
run('String Number In Notation', drawMultipleMeasures);
20-
run('String Number In Notation - radius 0', drawMultipleMeasures, { radius: 0 });
21-
run('String Number In Notation - radius 7', drawMultipleMeasures, { radius: 7 });
20+
run('String Number In Notation - no circle', drawMultipleMeasures, { drawCircle: false });
2221
run('Fret Hand Finger In Notation', drawFretHandFingers);
2322
run('Multi Voice With Strokes, String & Finger Numbers', multi);
2423
run('Complex Measure With String & Finger Numbers', drawAccidentals);
@@ -35,31 +34,40 @@ function drawMultipleMeasures(options: TestOptions): void {
3534
const notes1 = score.notes('(c4 e4 g4)/4., (c5 e5 g5)/8, (c4 f4 g4)/4, (c4 f4 g4)/4', { stem: 'down' });
3635

3736
notes1[0]
38-
.addModifier(f.StringNumber({ number: '5', position: 'right', radius: options.params?.radius }), 0)
39-
.addModifier(f.StringNumber({ number: '4', position: 'left', radius: options.params?.radius }), 1)
40-
.addModifier(f.StringNumber({ number: '3', position: 'right', radius: options.params?.radius }), 2);
37+
.addModifier(f.StringNumber({ number: '5', position: 'right', drawCircle: options.params?.drawCircle }), 0)
38+
.addModifier(f.StringNumber({ number: '4', position: 'left', drawCircle: options.params?.drawCircle }), 1)
39+
.addModifier(f.StringNumber({ number: '3', position: 'right', drawCircle: options.params?.drawCircle }), 2);
4140

4241
notes1[1]
4342
.addModifier(f.Accidental({ type: '#' }), 0)
44-
.addModifier(f.StringNumber({ number: '5', position: 'below', radius: options.params?.radius }), 0)
43+
.addModifier(f.StringNumber({ number: '5', position: 'below', drawCircle: options.params?.drawCircle }), 0)
4544
.addModifier(f.Accidental({ type: '#' }).setAsCautionary(), 1)
4645
.addModifier(
4746
f
48-
.StringNumber({ number: '3', position: 'above', radius: options.params?.radius })
47+
.StringNumber({ number: '3', position: 'above', drawCircle: options.params?.drawCircle })
4948
.setLastNote(notes1[3])
5049
.setLineEndType(Renderer.LineEndType.DOWN),
5150
2
5251
);
5352

5453
notes1[2]
55-
.addModifier(f.StringNumber({ number: '5', position: 'left', radius: options.params?.radius }), 0)
56-
.addModifier(f.StringNumber({ number: '3', position: 'left', radius: options.params?.radius }), 2)
54+
.addModifier(f.StringNumber({ number: '5', position: 'left', drawCircle: options.params?.drawCircle }), 0)
55+
.addModifier(f.StringNumber({ number: '3', position: 'left', drawCircle: options.params?.drawCircle }), 2)
5756
.addModifier(f.Accidental({ type: '#' }), 1);
5857

5958
notes1[3]
60-
.addModifier(f.StringNumber({ number: '5', position: 'right', radius: options.params?.radius }).setOffsetY(7), 0)
61-
.addModifier(f.StringNumber({ number: '4', position: 'right', radius: options.params?.radius }).setOffsetY(6), 1)
62-
.addModifier(f.StringNumber({ number: '3', position: 'right', radius: options.params?.radius }).setOffsetY(-6), 2);
59+
.addModifier(
60+
f.StringNumber({ number: '5', position: 'right', drawCircle: options.params?.drawCircle }).setOffsetY(7),
61+
0
62+
)
63+
.addModifier(
64+
f.StringNumber({ number: '4', position: 'right', drawCircle: options.params?.drawCircle }).setOffsetY(6),
65+
1
66+
)
67+
.addModifier(
68+
f.StringNumber({ number: '3', position: 'right', drawCircle: options.params?.drawCircle }).setOffsetY(-6),
69+
2
70+
);
6371

6472
const voice1 = score.voice(notes1);
6573

@@ -73,30 +81,39 @@ function drawMultipleMeasures(options: TestOptions): void {
7381
const notes2 = score.notes('(c4 e4 g4)/4, (c5 e5 g5), (c4 f4 g4), (c4 f4 g4)', { stem: 'up' });
7482

7583
notes2[0]
76-
.addModifier(f.StringNumber({ number: '5', position: 'right', radius: options.params?.radius }), 0)
77-
.addModifier(f.StringNumber({ number: '4', position: 'left', radius: options.params?.radius }), 1)
78-
.addModifier(f.StringNumber({ number: '3', position: 'right', radius: options.params?.radius }), 2);
84+
.addModifier(f.StringNumber({ number: '5', position: 'right', drawCircle: options.params?.drawCircle }), 0)
85+
.addModifier(f.StringNumber({ number: '4', position: 'left', drawCircle: options.params?.drawCircle }), 1)
86+
.addModifier(f.StringNumber({ number: '3', position: 'right', drawCircle: options.params?.drawCircle }), 2);
7987

8088
notes2[1]
8189
.addModifier(f.Accidental({ type: '#' }), 0)
82-
.addModifier(f.StringNumber({ number: '5', position: 'below', radius: options.params?.radius }), 0)
90+
.addModifier(f.StringNumber({ number: '5', position: 'below', drawCircle: options.params?.drawCircle }), 0)
8391
.addModifier(f.Accidental({ type: '#' }), 1)
8492
.addModifier(
8593
f
86-
.StringNumber({ number: '3', position: 'above', radius: options.params?.radius })
94+
.StringNumber({ number: '3', position: 'above', drawCircle: options.params?.drawCircle })
8795
.setLastNote(notes2[3])
8896
.setDashed(false),
8997
2
9098
);
9199

92100
notes2[2]
93-
.addModifier(f.StringNumber({ number: '3', position: 'left', radius: options.params?.radius }), 2)
101+
.addModifier(f.StringNumber({ number: '3', position: 'left', drawCircle: options.params?.drawCircle }), 2)
94102
.addModifier(f.Accidental({ type: '#' }), 1);
95103

96104
notes2[3]
97-
.addModifier(f.StringNumber({ number: '5', position: 'right', radius: options.params?.radius }).setOffsetY(7), 0)
98-
.addModifier(f.StringNumber({ number: '4', position: 'right', radius: options.params?.radius }).setOffsetY(6), 1)
99-
.addModifier(f.StringNumber({ number: '3', position: 'right', radius: options.params?.radius }).setOffsetY(-6), 2);
105+
.addModifier(
106+
f.StringNumber({ number: '5', position: 'right', drawCircle: options.params?.drawCircle }).setOffsetY(7),
107+
0
108+
)
109+
.addModifier(
110+
f.StringNumber({ number: '4', position: 'right', drawCircle: options.params?.drawCircle }).setOffsetY(6),
111+
1
112+
)
113+
.addModifier(
114+
f.StringNumber({ number: '3', position: 'right', drawCircle: options.params?.drawCircle }).setOffsetY(-6),
115+
2
116+
);
100117

101118
const voice2 = score.voice(notes2);
102119

@@ -110,10 +127,10 @@ function drawMultipleMeasures(options: TestOptions): void {
110127
const notesBar3 = score.notes('(c4 e4 g4 a4)/1.');
111128

112129
notesBar3[0]
113-
.addModifier(f.StringNumber({ number: '5', position: 'below', radius: options.params?.radius }), 0)
114-
.addModifier(f.StringNumber({ number: '4', position: 'right', radius: options.params?.radius }), 1)
115-
.addModifier(f.StringNumber({ number: '3', position: 'left', radius: options.params?.radius }), 2)
116-
.addModifier(f.StringNumber({ number: '2', position: 'above', radius: options.params?.radius }), 3);
130+
.addModifier(f.StringNumber({ number: '5', position: 'below', drawCircle: options.params?.drawCircle }), 0)
131+
.addModifier(f.StringNumber({ number: '4', position: 'right', drawCircle: options.params?.drawCircle }), 1)
132+
.addModifier(f.StringNumber({ number: '3', position: 'left', drawCircle: options.params?.drawCircle }), 2)
133+
.addModifier(f.StringNumber({ number: '2', position: 'above', drawCircle: options.params?.drawCircle }), 3);
117134

118135
const voice3 = score.voice(notesBar3, { time: '6/4' });
119136

0 commit comments

Comments
 (0)