Fret exceedance indicator

[jaredjj3]

The fretboard can't always show enough frets, especially on devices with small viewports. I found a way to indicate that the fret rendered outside of the viewable fretboard.

I'm working on adding different articulations and indicators. I'm starting to see a pattern emerge. Once I develop a proper abstraction, I want to contribute them to fretboard.js in a PR.

For now, I thought it would be nice to share :)

Code

type RenderTarget = {
  fret: number;
  string: number;
  fill: string;
  stroke: string;
};

declare var fb: Fretboard;

const targets: RenderTarget[] = [
  { fret: 20, string: 2, fill: 'red', stroke: 'black' },
  { fret: 18, string: 3, fill: 'green', stroke: 'blue' },
];

const maxFret = fb.positions[0].length - 1;
const totalWidth = fb.options.width + fb.options.leftPadding + fb.options.rightPadding;
const exceedLeftPaddingPx = 4;

fb.wrapper
  .append('g')
  .attr('class', 'exceeds')
  .selectAll('g')
  .data(targets.filter(({ fret }) => fret > maxFret))
  .enter()
  .append('g')
  .attr('class', ({ string, fret }: RenderTarget) => `exceed exceed-string-${string}-fret-${fret}`)
  .append('rect')
  .attr('class', 'exceed-rect')
  .attr('width', 4)
  .attr('height', fb.options.dotSize)
  .attr('x', totalWidth + exceedLeftPaddingPx)
  .attr('y', ({ string }: RenderTarget) => positions[string - 1][maxFret - fb.getDotOffset()].y - dotSize * 0.5)
  .attr('fill', ({ fill }: RenderTarget) => fill)
  .attr('stroke', ({ stroke }: RenderTarget) => stroke);

fb.render();

Result

Screen.Recording.2022-08-13.at.10.02.14.AM.mov