alphaTab #2904: legato slur between chords drawn with NaN at narrow width

Same alphaTex rendered at 1200px and 400px; NaN paths counted after each render.

by shimabox

HTML

<p>alphaTab <b id="ver"></b> — the same alphaTex rendered at two widths. NaN paths are counted after each render.</p>
<h3>1200px wide: <span id="nan-wide">…</span> path(s) with NaN</h3>
<div id="wide" style="width:1200px"></div>
<h3>400px wide: <span id="nan-narrow">…</span> path(s) with NaN</h3>
<div id="narrow" style="width:400px"></div>

JavaScript

// Change VERSION to try another release, e.g. "1.9.0-alpha.1891".
const VERSION = "1.8.4";

// A two-note chord with a legato slide ({sl}), followed by tightly spaced 16th-note chords.
// Replace {sl} with {h} for a hammer-on: same result.
const TEX = [
  "\\staff {score tabs}",
  "\\tuning e4 b3 g3 d3 a2 e2",
  "\\ts 4 4",
  "(14.1{sl} 11.3{sl}).16 " + "(16.1 13.3).16 ".repeat(15) + "|"
].join("\n");

const base = "https://cdn.jsdelivr.net/npm/@coderline/alphatab@" + VERSION + "/dist/";
document.getElementById("ver").textContent = VERSION;

const script = document.createElement("script");
script.src = base + "alphaTab.min.js";
script.onload = () => {
  for (const [id, counter] of [["wide", "nan-wide"], ["narrow", "nan-narrow"]]) {
    const surface = document.getElementById(id);
    const api = new alphaTab.AlphaTabApi(surface, {
      core: { useWorkers: false, enableLazyLoading: false, fontDirectory: base + "font/" },
      player: { enablePlayer: false }
    });
    api.renderFinished.on(() => {
      const bad = [...surface.querySelectorAll("path")].filter(p => /NaN/.test(p.getAttribute("d") || ""));
      document.getElementById(counter).textContent = String(bad.length);
      bad.forEach(p => console.log(id + ": " + p.getAttribute("d")));
    });
    api.tex(TEX);
  }
};
document.head.appendChild(script);