Skip to content

Rework minimum space force calculation #397

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Danielku15 merged 4 commits into from
Sep 6, 2020
Merged

Rework minimum space force calculation #397

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
79acd42
Corrected minstretchforce calculation
Danielku15 Sep 4, 2020
14ff523
Corrected some spacings
Danielku15 Sep 5, 2020
f00ec86
Update visual test suite
Danielku15 Sep 5, 2020
313d87d
Slight fixes on overlaps and unclean elements
Danielku15 Sep 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/platform/svg/CssFontSvgCanvas.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export class CssFontSvgCanvas extends SvgCanvas {
symbols: string,
centerAtPosition: boolean = false
): void {
this.buffer += `<g transform="translate(${(x | 0) - 0} ${(y | 0) - 0})" class="at" ><text`;
this.buffer += `<g transform="translate(${x} ${y})" class="at" ><text`;
if (scale !== 1) {
this.buffer += ` style="font-size: ${scale * 100}%; stroke:none"`;
} else {
Expand Down
14 changes: 13 additions & 1 deletion src/rendering/BarRendererBase.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,6 +274,7 @@ export class BarRendererBase {
});
this._postBeatGlyphs.x = Math.floor(postBeatStart);
this.width = Math.ceil(this._postBeatGlyphs.x + this._postBeatGlyphs.width);
this.height += this.layoutingInfo.height * this.scale;
}

protected addPreBeatGlyph(g: Glyph): void {
Expand Down Expand Up @@ -318,7 +319,9 @@ export class BarRendererBase {
}

protected paintBackground(cx: number, cy: number, canvas: ICanvas): void {
// no default brackgroundpainting
this.layoutingInfo.paint(cx + this.x + this._preBeatGlyphs.x + this._preBeatGlyphs.width, cy + this.y + this.height, canvas);
// canvas.color = Color.random();
// canvas.fillRect(cx + this.x + this._preBeatGlyphs.x, cy + this.y, this._preBeatGlyphs.width, this.height);
}

public buildBoundingsLookup(masterBarBounds: MasterBarBounds, cx: number, cy: number): void {
Expand Down Expand Up @@ -357,6 +360,15 @@ export class BarRendererBase {
}

protected createBeatGlyphs(): void {
for (let v: number = 0; v < this.bar.voices.length; v++) {
let voice: Voice = this.bar.voices[v];
if (this.hasVoiceContainer(voice)) {
this.createVoiceGlyphs(this.bar.voices[v]);
}
}
}

protected createVoiceGlyphs(v:Voice): void {
// filled in subclasses
}

Expand Down
2 changes: 1 addition & 1 deletion src/rendering/EffectBarRenderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export class EffectBarRenderer extends BarRendererBase {
}
}

private createVoiceGlyphs(v: Voice): void {
protected createVoiceGlyphs(v: Voice): void {
for (let b of v.beats) {
// we create empty glyphs as alignment references and to get the
// effect bar sized
Expand Down
39 changes: 12 additions & 27 deletions src/rendering/ScoreBarRenderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { BarRendererBase } from '@src/rendering/BarRendererBase';
import { AccidentalGlyph } from '@src/rendering/glyphs/AccidentalGlyph';
import { BarNumberGlyph } from '@src/rendering/glyphs/BarNumberGlyph';
import { BarSeperatorGlyph } from '@src/rendering/glyphs/BarSeperatorGlyph';
import { BeamGlyph } from '@src/rendering/glyphs/BeamGlyph';
import { FlagGlyph } from '@src/rendering/glyphs/FlagGlyph';
import { ClefGlyph } from '@src/rendering/glyphs/ClefGlyph';
import { Glyph } from '@src/rendering/glyphs/Glyph';
import { RepeatCloseGlyph } from '@src/rendering/glyphs/RepeatCloseGlyph';
Expand Down Expand Up @@ -147,7 +147,7 @@ export class ScoreBarRenderer extends BarRendererBase implements IBeamYCalculato
// TODO: draw stem at least at the center of the score staff.
// check if we need to paint simple footer
if (h.beats.length === 1) {
this.paintFooter(cx, cy, canvas, h);
this.paintFlag(cx, cy, canvas, h);
} else {
this.paintBar(cx, cy, canvas, h);
}
Expand Down Expand Up @@ -273,7 +273,7 @@ export class ScoreBarRenderer extends BarRendererBase implements IBeamYCalculato
public getStemSize(helper: BeamingHelper): number {
let size: number =
helper.beats.length === 1
? this.getFooterStemSize(helper.shortestDuration)
? this.getFlagStemSize(helper.shortestDuration)
: this.getBarStemSize(helper.shortestDuration);
if (helper.isGrace) {
size = size * NoteHeadGlyph.GraceScale;
Expand Down Expand Up @@ -318,7 +318,7 @@ export class ScoreBarRenderer extends BarRendererBase implements IBeamYCalculato
return this.getScoreY(size, 0);
}

private getFooterStemSize(duration: Duration): number {
private getFlagStemSize(duration: Duration): number {
let size: number = 0;
switch (duration) {
case Duration.QuadrupleWhole:
Expand Down Expand Up @@ -466,7 +466,7 @@ export class ScoreBarRenderer extends BarRendererBase implements IBeamYCalculato
canvas.fill();
}

private paintFooter(cx: number, cy: number, canvas: ICanvas, h: BeamingHelper): void {
private paintFlag(cx: number, cy: number, canvas: ICanvas, h: BeamingHelper): void {
let beat: Beat = h.beats[0];
if (
beat.graceType === GraceType.BendGrace ||
Expand All @@ -479,7 +479,7 @@ export class ScoreBarRenderer extends BarRendererBase implements IBeamYCalculato
//
// draw line
//
let stemSize: number = this.getFooterStemSize(h.shortestDuration);
let stemSize: number = this.getFlagStemSize(h.shortestDuration);
let beatLineX: number = h.getBeatLineX(beat) + this.scale;
let direction: BeamDirection = h.direction;
let topY: number = this.getYPositionForNoteValue(h.maxNoteValue);
Expand All @@ -496,13 +496,10 @@ export class ScoreBarRenderer extends BarRendererBase implements IBeamYCalculato
fingeringY = cy + this.y + topY;
}
this.paintFingering(canvas, beat, cx + this.x + beatLineX, direction, fingeringY);
if (
beat.duration === Duration.Whole ||
beat.duration === Duration.DoubleWhole ||
beat.duration === Duration.QuadrupleWhole
) {
if (!h.hasLine) {
return;
}

canvas.lineWidth = ScoreBarRenderer.StemWidth * this.scale;
canvas.beginPath();
canvas.moveTo(cx + this.x + beatLineX, cy + this.y + topY);
Expand All @@ -523,10 +520,10 @@ export class ScoreBarRenderer extends BarRendererBase implements IBeamYCalculato
canvas.stroke();
}
//
// Draw beam
// Draw flag
//
if (beat.duration > Duration.Quarter || isGrace) {
let glyph: BeamGlyph = new BeamGlyph(beatLineX - this.scale / 2, beamY, beat.duration, direction, isGrace);
if (h.hasFlag) {
let glyph: FlagGlyph = new FlagGlyph(beatLineX - this.scale / 2, beamY, beat.duration, direction, isGrace);
glyph.renderer = this;
glyph.doLayout();
glyph.paint(cx + this.x, cy + this.y, canvas);
Expand Down Expand Up @@ -630,18 +627,6 @@ export class ScoreBarRenderer extends BarRendererBase implements IBeamYCalculato
this.createTimeSignatureGlyphs();
}
this.addPreBeatGlyph(new BarNumberGlyph(0, this.getScoreY(-0.5, 0), this.bar.index + 1));
if (this.bar.isEmpty) {
this.addPreBeatGlyph(new SpacingGlyph(0, 0, 30 * this.scale));
}
}

protected createBeatGlyphs(): void {
for (let v: number = 0; v < this.bar.voices.length; v++) {
let voice: Voice = this.bar.voices[v];
if (this.hasVoiceContainer(voice)) {
this.createVoiceGlyphs(voice);
}
}
}

protected createPostBeatGlyphs(): void {
Expand Down Expand Up @@ -742,7 +727,7 @@ export class ScoreBarRenderer extends BarRendererBase implements IBeamYCalculato
);
}

private createVoiceGlyphs(v: Voice): void {
protected createVoiceGlyphs(v: Voice): void {
for (let i: number = 0, j: number = v.beats.length; i < j; i++) {
let b: Beat = v.beats[i];
let container: ScoreBeatContainerGlyph = new ScoreBeatContainerGlyph(b, this.getOrCreateVoiceContainer(v));
Expand Down
20 changes: 4 additions & 16 deletions src/rendering/TabBarRenderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { ICanvas, TextAlign } from '@src/platform/ICanvas';
import { BarRendererBase, NoteYPosition } from '@src/rendering/BarRendererBase';
import { BarNumberGlyph } from '@src/rendering/glyphs/BarNumberGlyph';
import { BarSeperatorGlyph } from '@src/rendering/glyphs/BarSeperatorGlyph';
import { BeamGlyph } from '@src/rendering/glyphs/BeamGlyph';
import { FlagGlyph } from '@src/rendering/glyphs/FlagGlyph';
import { BeatGlyphBase } from '@src/rendering/glyphs/BeatGlyphBase';
import { RepeatCloseGlyph } from '@src/rendering/glyphs/RepeatCloseGlyph';
import { RepeatCountGlyph } from '@src/rendering/glyphs/RepeatCountGlyph';
Expand Down Expand Up @@ -107,9 +107,6 @@ export class TabBarRenderer extends BarRendererBase {
this.createTimeSignatureGlyphs();
}
this.addPreBeatGlyph(new BarNumberGlyph(0, this.getTabY(-0.5, 0), this.bar.index + 1));
if (this.bar.isEmpty) {
this.addPreBeatGlyph(new SpacingGlyph(0, 0, 30 * this.scale));
}
}

private _startSpacing: boolean = false;
Expand All @@ -135,16 +132,7 @@ export class TabBarRenderer extends BarRendererBase {
);
}

protected createBeatGlyphs(): void {
for (let v: number = 0; v < this.bar.voices.length; v++) {
let voice: Voice = this.bar.voices[v];
if (this.hasVoiceContainer(voice)) {
this.createVoiceGlyphs(this.bar.voices[v]);
}
}
}

private createVoiceGlyphs(v: Voice): void {
protected createVoiceGlyphs(v: Voice): void {
for (let i: number = 0, j: number = v.beats.length; i < j; i++) {
let b: Beat = v.beats[i];
let container: TabBeatContainerGlyph = new TabBeatContainerGlyph(b, this.getOrCreateVoiceContainer(v));
Expand Down Expand Up @@ -527,10 +515,10 @@ export class TabBarRenderer extends BarRendererBase {
canvas.lineTo(cx + this.x + beatLineX, y2);
canvas.stroke();
//
// Draw beam
// Draw Flag
//
if (beat.duration > Duration.Quarter) {
let glyph: BeamGlyph = new BeamGlyph(0, 0, beat.duration, BeamDirection.Down, false);
let glyph: FlagGlyph = new FlagGlyph(0, 0, beat.duration, BeamDirection.Down, false);
glyph.renderer = this;
glyph.doLayout();
glyph.paint(cx + this.x + beatLineX, y2, canvas);
Expand Down
12 changes: 2 additions & 10 deletions src/rendering/glyphs/AccidentalGroupGlyph.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,8 @@ class AccidentalColumnInfo {
}

export class AccidentalGroupGlyph extends GlyphGroup {
private _isGrace:boolean;
public constructor(isGrace:boolean) {
public constructor() {
super(0, 0);
this._isGrace = isGrace;
}

public doLayout(): void {
Expand Down Expand Up @@ -63,23 +61,17 @@ export class AccidentalGroupGlyph extends GlyphGroup {
//
// Place accidentals in columns
//
let padding: number = 2 * this.scale;
this.width = 0;
for (const column of columns) {
this.width += column.width;
column.x = this.width;
}
this.width += padding;

for (let i: number = 0, j: number = this.glyphs.length; i < j; i++) {
let g: Glyph = this.glyphs[i];

const column = columns[g.x];
g.x = padding + (this.width - column.x);
}

if(this._isGrace) {
this.width += padding;
g.x = (this.width - column.x);
}
}
}
80 changes: 42 additions & 38 deletions src/rendering/glyphs/BeatContainerGlyph.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { BarLayoutingInfo } from '@src/rendering/staves/BarLayoutingInfo';
import { BarBounds } from '../utils/BarBounds';
import { BeatBounds } from '../utils/BeatBounds';
import { Bounds } from '../utils/Bounds';
import { FlagGlyph } from './FlagGlyph';

export class BeatContainerGlyph extends Glyph {
public voiceContainer: VoiceContainerGlyph;
Expand All @@ -32,13 +33,16 @@ export class BeatContainerGlyph extends Glyph {

public registerLayoutingInfo(layoutings: BarLayoutingInfo): void {
let preBeatStretch: number = this.onTimeX;
let postBeatStretch: number = 0;
for (let tie of this.ties) {
if (tie.width > postBeatStretch) {
postBeatStretch = tie.width;
}
let postBeatStretch: number = this.onNotes.width - this.onNotes.centerX;
// make space for flag
const helper = this.renderer.helpers.getBeamingHelperForBeat(this.beat);
if(helper && helper.hasFlag) {
postBeatStretch += FlagGlyph.FlagWidth * this.scale;
}
postBeatStretch += this.onNotes.x + (this.onNotes.width - this.onNotes.centerX);
for(const tie of this.ties) {
postBeatStretch += tie.width;
}

layoutings.addBeatSpring(this.beat, preBeatStretch, postBeatStretch);
// store sizes for special renderers like the EffectBarRenderer
layoutings.setPreBeatSize(this.beat, this.preNotes.width);
Expand Down Expand Up @@ -124,41 +128,41 @@ export class BeatContainerGlyph extends Glyph {
return;
}
canvas.beginGroup(BeatContainerGlyph.getGroupId(this.beat));
// var c = canvas.Color;
// var ta = canvas.TextAlign;
// canvas.Color = new Color(255, 0, 0);
// canvas.TextAlign = TextAlign.Left;
// canvas.FillText(Beat.DisplayStart.ToString(), cx + X, cy + Y - 10);
// canvas.Color = c;
// canvas.TextAlign = ta;
// canvas.Color = Color.Random();
// canvas.FillRect(cx + X, cy + Y, Width, Renderer.Height);
// var oldColor = canvas.Color;
// canvas.Color = new Color((byte)Platform.Platform.Random(255), (byte)Platform.Platform.Random(255), (byte)Platform.Platform.Random(255), 100);
// canvas.FillRect(cx + X, cy + Y, Width, Renderer.Height);
// canvas.Color = oldColor;
// canvas.Color = new Color(200, 0, 0, 100);
// canvas.StrokeRect(cx + X, cy + Y + 15 * Beat.Voice.Index, Width, 10);
// canvas.Font = new Font("Arial", 10);
// canvas.Color = new Color(0, 0, 0);
// canvas.FillText(Beat.Voice.Index + ":" + Beat.Index, cx + X, cy + Y + 15 * Beat.Voice.Index);
// if (Beat.Voice.Index===0)
// {
// canvas.Color = new Color(200, 0, 0, 100);
// canvas.StrokeRect(cx + X, cy + Y + PreNotes.Y + 30, Width, 10);
// var c = canvas.color;
// var ta = canvas.textAlign;
// canvas.color = new Color(255, 0, 0);
// canvas.textAlign = TextAlign.Left;
// canvas.fillText(this.beat.displayStart.toString(), cx + this.x, cy + this.y - 10);
// canvas.color = c;
// canvas.textAlign = ta;
// canvas.color = Color.random();
// canvas.fillRect(cx + this.x, cy + this.y, this.width, this.renderer.height);
// var oldColor = canvas.color;
// canvas.color = Color.random(100);
// canvas.fillRect(cx + this.x, cy + this.y, this.width, this.renderer.height);
// canvas.color = oldColor;
// canvas.color = new Color(200, 0, 0, 100);
// canvas.strokeRect(cx + this.x, cy + this.y + 15 * this.beat.voice.index, this.width, 10);
// canvas.font = new Font("Arial", 10);
// canvas.color = new Color(0, 0, 0);
// canvas.fillText(this.beat.voice.index + ":" + this.beat.index, cx + this.x, cy + this.y + 15 * this.beat.voice.index);

// if (this.beat.voice.index === 0) {
// canvas.color = new Color(200, 0, 0, 100);
// canvas.strokeRect(cx + this.x, cy + this.y + this.preNotes.y + 30, this.width, 10);
// }

this.preNotes.paint(cx + this.x, cy + this.y, canvas);
// if (Beat.Voice.Index===0)
// {
// canvas.Color = new Color(200, 0, 0, 100);
// canvas.StrokeRect(cx + X + PreNotes.X, cy + Y + PreNotes.Y, PreNotes.Width, 10);
// if (this.beat.voice.index === 0) {
// canvas.color = new Color(200, 0, 0, 100);
// canvas.strokeRect(cx + this.x + this.preNotes.x, cy + this.y + this.preNotes.y, this.preNotes.width, 10);
// }
this.onNotes.paint(cx + this.x, cy + this.y, canvas);
// if (Beat.Voice.Index===0)
// {
// canvas.Color = new Color(0, 200, 0, 100);
// canvas.StrokeRect(cx + X + OnNotes.X, cy + Y + OnNotes.Y + 10, OnNotes.Width, 10);
// if (this.beat.voice.index === 0) {
// canvas.color = new Color(0, 200, 0, 100);
// canvas.strokeRect(cx + this.x + this.onNotes.x, cy + this.y + this.onNotes.y - 10, this.onNotes.width, 10);
// }

// paint the ties relative to the whole staff,
// reason: we have possibly multiple staves involved and need to calculate the correct positions.
let staffX: number = cx - this.voiceContainer.x - this.renderer.x;
Expand All @@ -171,7 +175,7 @@ export class BeatContainerGlyph extends Glyph {
canvas.endGroup();
}

public buildBoundingsLookup(barBounds:BarBounds, cx:number, cy:number, isEmptyBar:boolean) {
public buildBoundingsLookup(barBounds: BarBounds, cx: number, cy: number, isEmptyBar: boolean) {
let beatBoundings: BeatBounds = new BeatBounds();
beatBoundings.beat = this.beat;
beatBoundings.visualBounds = new Bounds();
Expand All @@ -192,7 +196,7 @@ export class BeatContainerGlyph extends Glyph {
}
barBounds.addBeat(beatBoundings);

if(this.renderer.settings.core.includeNoteBounds) {
if (this.renderer.settings.core.includeNoteBounds) {
this.onNotes.buildBoundingsLookup(beatBoundings, cx + this.x, cy + this.y);
}
}
Expand Down
3 changes: 2 additions & 1 deletion src/rendering/glyphs/BendNoteHeadGroupGlyph.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export class BendNoteHeadGroupGlyph extends ScoreNoteChordGlyphBase {
private _beat: Beat;
private _showParenthesis: boolean = false;
private _noteValueLookup: Map<number, Glyph> = new Map();
private _accidentals: AccidentalGroupGlyph = new AccidentalGroupGlyph(true);
private _accidentals: AccidentalGroupGlyph = new AccidentalGroupGlyph();
private _preNoteParenthesis: GhostNoteContainerGlyph | null = null;
private _postNoteParenthesis: GhostNoteContainerGlyph | null = null;
public isEmpty: boolean = true;
Expand Down Expand Up @@ -87,6 +87,7 @@ export class BendNoteHeadGroupGlyph extends ScoreNoteChordGlyphBase {
x += this._preNoteParenthesis!.width + BendNoteHeadGroupGlyph.ElementPadding * this.scale;
}
if (!this._accidentals.isEmpty) {
x += this._accidentals.width + BendNoteHeadGroupGlyph.ElementPadding * this.scale;
this._accidentals.x = x;
this._accidentals.renderer = this.renderer;
this._accidentals.doLayout();
Expand Down
Loading