Implement ChordDiagram

[martijnversluis]

Resolves #820

[isaiahdahl]

Somehow we're going to need the ability to get the width and height from what is rendered so that we can properly increment this.y and this.x to put multiple diagrams beside each other.

Think it might make more sense to have a width and height property on the JsPDFRenderer

so instead of

const renderer = new JsPDFRenderer(this.doc, { x: 50, y: 50, scale: 0.1 });

it could be

const renderer = new JsPDFRenderer(this.doc, { x: 50, y: 50, width: 40 });

This could just internally just calculate the "scale" against whatever the defined "width" was inside the ChordDiagram class.
Maybe we made it so that you either define width or height, but not both?

Related to properly incrementing this.x and this.y what if we create a measure() function?

What if the general idea was something along the lines of this:

Note how in this example I even removed the setting of x and y from the JsPDFRenderer and moved that to props in the diagram.render() so we could share some config elements but render multiple beside eachother

renderChordDiagrams(): void {
    const renderer = new JsPDFRenderer(this.doc, { width: 35 });

    // Assuming this would be getting ChordDiagrams from the song 
    const chordDiagrams = [
      new ChordDiagram({
        ...
      }),
      new ChordDiagram({
        ...
      }),
    ];

    chordDiagrams.forEach((diagram) => {
      const { width, height } = diagram.measure(); // or getDimensions()
      
      if (this.x + width > this.columnWidth) {
        this.y += height + 10 // diagram y spacing configurable
        this.carriageReturn();
      }

      this.x += width + 10 // diagram x spacing configurable;
      
      if (this.y + height > this.doc.internal.pageSize.getHeight()) {
        // Move to the next column if the diagram doesn't fit
        // problem with not creating a new "render" instance is that the this.doc won't be updated to hold new page if it moves to next page
        // render functon should either get a new instance, or allow this.doc to be passed into the render function 
        this.moveToNextColumn();
      } 

      diagram.render(renderer,{ x: this.x, y: this.y}, this.doc);
    });
  }
}

^ actual code would be different because I know this would have a couple bugs with extra spacing and not left aligning the first diagram but mostly I'm just trying to identify how I know we'll need to use it.

thoughts?

[martijnversluis]

@isaiahdahl I changed the rendering a bit. I removed all spacing around the diagram, and you can now set the desired width instead of the scale. The renderer exposes the renderedHeight.

[martijnversluis]

@isaiahdahl I implemented basic rendering; chord diagrams are rendered at the end, and it checks the available space. If we want to work out more possibilities/configurations it might be good to have a small brainstorm to work it out. Agree to merge this and improve after?

[isaiahdahl]

Will have a look, but I'm onboard with that!

I'm pretty flexible so just let me know some times that work for you.