Need help displaying chord diagrams above staff

[ldupouey]

Hi everyone,
I'm trying to display chord diagrams above staff as discussed in #110
I'm not tackling horizontal spacing for now so the result show in #110 would suit me.
To achieve that i tried displaying the diagram instead of the chord symbol in src/rendering/effects/ChordsEffectInfo.ts :

public createNewGlyph(renderer: BarRendererBase, beat: Beat): EffectGlyph {

        //return new TextGlyph(0, 0, beat.chord!.name, renderer.resources.effectFont, TextAlign.Center);

        let chord = beat.chord!;
        let chordDiagram: ChordDiagramGlyph = new ChordDiagramGlyph(0, 0, chord);
        chordDiagram.renderer = renderer;
        chordDiagram.doLayout();
        
        return chordDiagram
    }

I get it to display the diagrams but spacings are off and some lines are missing :

Any idea why this is happening and how I could get the diagrams to be displayed properly ?

Regards

[Danielku15]

Some bits of the rendering rely onthis.width. If glyphs are used within the EffectBarRenderer via EffectInfo they are sized automatically according to the specified sizingMode This ensures they are placed and aligned correctly. The width calculated in the doLayout is overwritten later.

The small width cause the horizontal lines to be quasi invisible. Staying on the 'ignore overlaps route', replacing this.width with a a calculated value works:

https://github.com/CoderLine/alphaTab/blob/develop/src/rendering/glyphs/ChordDiagramGlyph.ts#L52

        let w: number =
            this._firstFretSpacing +
            (this._chord.staff.tuning.length - 1) * ChordDiagramGlyph.StringSpacing +
            2 * ChordDiagramGlyph.Padding[0] -
            2 * ChordDiagramGlyph.Padding[0] -
            this._firstFretSpacing;

[ldupouey]

Works like a charm, thank you !