ntk 8.14.1 → 8.14.3

package/lib/color.js

@@ -42,6 +42,85 @@ function parseHex(value) {
   return [part(0) / 255, part(1) / 255, part(2) / 255, hasAlpha ? part(3) / 255 : 1];
 }
 
+// CSS Color 4's rgb() and hsl(), in both the syntaxes it defines: the legacy
+// one with a comma between every component, and the modern one with spaces
+// and an optional `/ alpha` — `rgb(255 128 0 / 50%)`, which is what a design
+// tool copies out today. parse-color reads neither right. The modern syntax
+// not at all; a percentage as though it were a byte, so `rgb(100%, 0%, 0%)`
+// came out at 39% red; and nothing out of range clamped, so `rgb(300, 0, 0)`
+// reached XRender as 1.18. A spelling this does not read still goes to
+// parse-color, so nothing it accepted is refused.
+const FUNCTIONAL = /^(rgba?|hsla?)\(([^()]*)\)$/i;
+const NUMBER = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?$/i;
+const HUE = /^([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)(deg|grad|rad|turn)?$/i;
+const DEGREES = { deg: 1, grad: 0.9, rad: 180 / Math.PI, turn: 360 };
+
+const clamp01 = (v) => Math.min(1, Math.max(0, v));
+
+/** A number, or a percentage, as a fraction of `whole`, clamped to 0..1;
+ *  NaN when it is neither. */
+function fraction(text, whole) {
+  if (text.endsWith('%')) {
+    const n = text.slice(0, -1);
+    return NUMBER.test(n) ? clamp01(Number(n) / 100) : NaN;
+  }
+  return NUMBER.test(text) ? clamp01(Number(text) / whole) : NaN;
+}
+
+function parseFunctional(value) {
+  const m = FUNCTIONAL.exec(value);
+  if (!m) return null;
+  const body = m[2].trim();
+  let parts;
+  let alpha = null;
+  if (body.includes(',')) {
+    parts = body.split(',').map((p) => p.trim());
+    if (parts.length === 4) alpha = parts.pop();
+    else if (parts.length !== 3) return null;
+  } else {
+    const halves = body.split('/');
+    if (halves.length > 2) return null;
+    parts = halves[0].trim().split(/\s+/);
+    if (parts.length !== 3) return null;
+    if (halves.length === 2) alpha = halves[1].trim();
+    // `none` is the modern syntax's alone: a missing component, which is 0
+    const none = (p) => (p.toLowerCase() === 'none' ? '0' : p);
+    parts = parts.map(none);
+    if (alpha !== null) alpha = none(alpha);
+  }
+  const a = alpha === null ? 1 : fraction(alpha, 1);
+  let rgb;
+  if (m[1][0].toLowerCase() === 'r') {
+    rgb = parts.map((p) => fraction(p, 255));
+  } else {
+    const hue = HUE.exec(parts[0]);
+    if (!hue) return null;
+    // saturation and lightness are percentages, which the modern syntax
+    // also takes as bare numbers
+    rgb = hslToRgb(
+      Number(hue[1]) * DEGREES[(hue[2] ?? 'deg').toLowerCase()],
+      fraction(parts[1], 100),
+      fraction(parts[2], 100)
+    );
+  }
+  const out = [rgb[0], rgb[1], rgb[2], a];
+  return out.every(Number.isFinite) ? out : null;
+}
+
+/** hsl() to sRGB, rounded to bytes as a browser rounds it. parse-color did
+ *  the same, give or take one where the exact value is a half and its float
+ *  error fell below it — `hsl(-30, …)` and `hsl(330, …)` could differ. */
+function hslToRgb(h, s, l) {
+  const hue = ((h % 360) + 360) % 360;
+  const chroma = s * Math.min(l, 1 - l);
+  const channel = (n) => {
+    const k = (n + hue / 30) % 12;
+    const v = l - chroma * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+    return Math.round(v * 255) / 255;
+  };
+  return [channel(0), channel(8), channel(4)];
+}
+
 // Each spelling is parsed once. A UI draws with a few dozen colours and sets
 // them again on every paint — every box's background, every border, every
 // edge of a graph — and a parse is a regular expression and an allocation
@@ -84,17 +163,21 @@ function parseStraight(value) {
 
   // '#' is ours alone: falling back to parse-color for a hex form we reject
   // is how '#1234567' turns into rgba [18, 52, 86, 7, 1] -> alpha 7.
-  const rgba = v.startsWith('#') ? parseHex(v) : rawRgba(v);
+  const rgba = v.startsWith('#') ? parseHex(v) : (parseFunctional(v) ?? rawRgba(v));
   if (!rgba) return null;
   // NaN would otherwise reach the wire as a garbage fixed-point value
   return rgba.every((c) => Number.isFinite(c)) ? rgba : null;
 }
 
 function rawRgba(value) {
-  const c = parseColorRaw(value);
+  // CSS's names and functions are case-insensitive, and parse-color's
+  // tables are lower case: `TOMATO` was not a colour
+  const c = parseColorRaw(value.toLowerCase());
   if (!c || !c.rgba) return null;
   const [r, g, b, a] = c.rgba;
-  return [r / 255, g / 255, b / 255, a];
+  // clamped as CSS clamps: a component past 1 is not a brighter colour,
+  // and XRender warns on one
+  return [clamp01(r / 255), clamp01(g / 255), clamp01(b / 255), clamp01(a)];
 }
 
 /**

package/lib/dash.js

@@ -0,0 +1,209 @@
+// A stroke's dash pattern, walked along its path as far as the surface can
+// show it.
+//
+// Walking a pattern costs a run for every dash: the path's length over the
+// pattern's. A dashed border round a box 380,000 pixels tall — a code block
+// in a scroll pane — was 95,000 runs and 78 ms a stroke for the handful the
+// surface shows, and a pattern a billionth of a pixel long ran the heap out.
+//
+// So each segment is walked only where it lies inside `view`: the surface,
+// grown by what a join or a cap can reach past a point. Everywhere else the
+// pattern is advanced by the length passed, arithmetically, which leaves
+// every dash that is drawn where a walk of the whole path puts it. A run is
+// ended where its segment leaves the view and begun again where one comes
+// back, both out of sight. And where what is left would still be more than
+// `MAX_BOUNDARIES` dashes, the stroke is drawn solid, as Skia draws one past
+// its kMaxDashCount: dashes that fine are a tone, not a pattern.
+
+/** Past this many dash boundaries in what the surface shows, the stroke is
+ *  drawn solid instead. */
+export const MAX_BOUNDARIES = 100000;
+
+// the part of a segment inside the view, as parameters along it (Liang-
+// Barsky): written here rather than returned, since the walk asks once a
+// segment and an array a segment is garbage a stroke
+let clipFrom = 0;
+let clipTo = 1;
+
+/** Whether segment a→b meets `view` ([x0, y0, x1, y1]), and if so the part of
+ *  it that does in `clipFrom`..`clipTo`. */
+function clipSegment(ax, ay, bx, by, view) {
+  const [x0, y0, x1, y1] = view;
+  if (ax >= x0 && ax <= x1 && ay >= y0 && ay <= y1 && bx >= x0 && bx <= x1 && by >= y0 && by <= y1) {
+    clipFrom = 0;
+    clipTo = 1;
+    return true;
+  }
+  const dx = bx - ax;
+  const dy = by - ay;
+  clipFrom = 0;
+  clipTo = 1;
+  // each edge of the view as p·t ≤ q
+  if (!clipEdge(-dx, ax - x0) || !clipEdge(dx, x1 - ax) || !clipEdge(-dy, ay - y0) || !clipEdge(dy, y1 - ay)) {
+    return false;
+  }
+  return clipTo > clipFrom;
+}
+
+/** Narrow `clipFrom`..`clipTo` to where p·t ≤ q; false where nothing is left. */
+function clipEdge(p, q) {
+  if (p === 0) return q >= 0; // parallel to this edge: inside it or not at all
+  const t = q / p;
+  if (p < 0) {
+    if (t > clipTo) return false;
+    if (t > clipFrom) clipFrom = t;
+  } else {
+    if (t < clipFrom) return false;
+    if (t < clipTo) clipTo = t;
+  }
+  return true;
+}
+
+/**
+ * Split a device-space polyline into dash "on" runs by arc length.
+ *
+ * `pts` is [[x, y], ...] with no consecutive duplicates; for closed subpaths
+ * the closing point is already appended, and the pattern continues around the
+ * loop as one uninterrupted walk. Returns null when the pattern cannot
+ * produce gaps (all-zero), or would make more than `MAX_BOUNDARIES` of them
+ * in what the view shows — stroke it solid — otherwise { runs, closedLoop }:
+ * `runs` is a list of [[x, y], ...] open polylines (caps apply to each),
+ * `closedLoop` marks a closed subpath the pattern never split — stroke it
+ * closed, with no caps.
+ *
+ * `view` is [x0, y0, x1, y1], outside which nothing drawn can be seen; null
+ * walks the whole path.
+ */
+export function dashPolyline(pts, closed, pattern, offset, view = null) {
+  const n = pattern.length;
+  let total = 0;
+  for (const d of pattern) total += d;
+  if (!(total > 0)) return null;
+
+  // what the walk would visit, and so how many boundaries it would make
+  let visible = 0;
+  for (let i = 1; i < pts.length; i++) {
+    const [ax, ay] = pts[i - 1];
+    const [bx, by] = pts[i];
+    const len = Math.hypot(bx - ax, by - ay);
+    if (!view) visible += len;
+    else if (clipSegment(ax, ay, bx, by, view)) visible += len * (clipTo - clipFrom);
+  }
+  if ((visible / total) * n > MAX_BOUNDARIES) return null;
+
+  // starting phase: offset into the pattern, wrapped into [0, total)
+  let phase = offset % total;
+  if (phase < 0) phase += total;
+  let idx = 0;
+  while (phase > 0 && phase >= pattern[idx]) {
+    phase -= pattern[idx];
+    idx = (idx + 1) % n;
+  }
+
+  let on = idx % 2 === 0; // even entries are "on", odd are gaps
+  const startedOn = on;
+  let toggled = false;
+  let remain = pattern[idx] - phase;
+
+  // Move along the pattern by `d` without drawing. A boundary is crossed
+  // only once `d` is past it, as the walk below crosses one.
+  const advance = (d) => {
+    if (d <= remain) {
+      remain -= d;
+      return;
+    }
+    d -= remain;
+    idx = (idx + 1) % n;
+    on = !on;
+    toggled = true;
+    // whole periods leave the entry where it was, and `on` too where the
+    // pattern has an even number of entries, as canvas makes it
+    const periods = Math.floor(d / total);
+    d -= periods * total;
+    if (n % 2 === 1 && periods % 2 === 1) on = !on;
+    while (d > pattern[idx]) {
+      d -= pattern[idx];
+      idx = (idx + 1) % n;
+      on = !on;
+    }
+    remain = pattern[idx] - d;
+  };
+
+  const runs = [];
+  let cur = null;
+  // whether the first run starts at the path's start and the last ends at
+  // its end: only then does a closed path's seam join them
+  let openedAtStart = false;
+  let openAtEnd = false;
+  for (let i = 1; i < pts.length; i++) {
+    const a = pts[i - 1];
+    const b = pts[i];
+    const segLen = Math.hypot(b[0] - a[0], b[1] - a[1]);
+    let from = 0;
+    let to = 1;
+    if (view) {
+      if (!clipSegment(a[0], a[1], b[0], b[1], view)) {
+        if (cur) runs.push(cur);
+        cur = null;
+        advance(segLen);
+        continue;
+      }
+      from = clipFrom;
+      to = clipTo;
+    }
+    if (from > 0) {
+      if (cur) runs.push(cur);
+      cur = null;
+      advance(segLen * from);
+    }
+    let px = from > 0 ? a[0] + (b[0] - a[0]) * from : a[0];
+    let py = from > 0 ? a[1] + (b[1] - a[1]) * from : a[1];
+    const ex = to < 1 ? a[0] + (b[0] - a[0]) * to : b[0];
+    const ey = to < 1 ? a[1] + (b[1] - a[1]) * to : b[1];
+    if (on && !cur) {
+      cur = [from > 0 ? [px, py] : a];
+      if (i === 1 && from === 0) openedAtStart = true;
+    }
+    let len = to < 1 || from > 0 ? Math.hypot(ex - px, ey - py) : segLen;
+    while (len > remain) {
+      // cross a dash boundary inside this segment
+      const t = len > 0 ? remain / len : 0;
+      const bx = px + (ex - px) * t;
+      const by = py + (ey - py) * t;
+      if (on) {
+        cur.push([bx, by]);
+        runs.push(cur);
+        cur = null;
+      } else {
+        cur = [[bx, by]];
+      }
+      on = !on;
+      toggled = true;
+      px = bx;
+      py = by;
+      len = Math.hypot(ex - px, ey - py);
+      idx = (idx + 1) % n;
+      remain = pattern[idx];
+    }
+    remain -= len;
+    if (on) cur.push(to < 1 ? [ex, ey] : b);
+    if (to < 1) {
+      if (cur) runs.push(cur);
+      cur = null;
+      advance(segLen * (1 - to));
+    }
+  }
+  if (cur) {
+    runs.push(cur);
+    openAtEnd = true;
+  }
+
+  if (closed && !toggled) return { runs, closedLoop: startedOn };
+  // closed subpath with dashes on both sides of the seam: merge the last
+  // run into the first so no caps appear at the seam
+  if (closed && openedAtStart && openAtEnd && runs.length > 1) {
+    const last = runs.pop();
+    runs[0] = last.concat(runs[0].slice(1));
+  }
+  return { runs, closedLoop: false };
+}

package/lib/rasterize.js

@@ -48,6 +48,39 @@ export class CoverageAccumulator {
    * split across the pixels the edge passes through.
    */
   edge(ax, ay, bx, by) {
+    if (ay === by) return;
+    const { width } = this;
+    if (ax < 0 || bx < 0 || ax > width || bx > width) {
+      // Cut where the edge crosses the grid's left and right borders. What
+      // lies left of the grid is all of it left of every pixel in the row,
+      // so it counts as an edge up the border itself; what lies right of
+      // it is left of none of them, and counts for nothing. Squashing each
+      // row's span into the grid instead spread the part past a border
+      // over the pixels the rest crossed: a triangle poking past the right
+      // edge left its last column at a tenth of its coverage.
+      const tl = (0 - ax) / (bx - ax);
+      const tr = (width - ax) / (bx - ax);
+      let t0 = 0;
+      let px = ax;
+      let py = ay;
+      for (const t of tl < tr ? [tl, tr, 1] : [tr, tl, 1]) {
+        if (!(t > t0) || t > 1) continue;
+        const qx = t === 1 ? bx : ax + (bx - ax) * t;
+        const qy = t === 1 ? by : ay + (by - ay) * t;
+        const mid = (px + qx) / 2;
+        if (mid < 0) this._edge(0, py, 0, qy);
+        else if (mid <= width) this._edge(px, py, qx, qy);
+        t0 = t;
+        px = qx;
+        py = qy;
+      }
+      return;
+    }
+    this._edge(ax, ay, bx, by);
+  }
+
+  /** `edge` for a piece already between the borders. */
+  _edge(ax, ay, bx, by) {
     if (ay === by) return;
     let dir = 1;
     let x0 = ax;
@@ -62,6 +95,11 @@ export class CoverageAccumulator {
       y1 = ay;
     }
     const { width, stride, acc, height } = this;
+    // An edge with no row in the grid adds nothing any pixel reads, and one
+    // past 2^31 would start its rows at `y0 | 0`, which wraps negative: a
+    // fill under a transform that put it a trillion pixels away ran the
+    // loop below over billions of rows. NaN fails both tests too.
+    if (!(y1 > 0 && y0 < height)) return;
     const dxdy = (x1 - x0) / (y1 - y0);
     let x = x0;
     if (y0 < 0) {
@@ -75,9 +113,8 @@ export class CoverageAccumulator {
       const dy = Math.min(y + 1, y1) - Math.max(y, y0);
       const xnext = x + dxdy * dy;
       const d = dy * dir;
-      // the row's x span, clamped into the grid — geometry outside the
-      // bitmap piles its coverage onto the border column, which is what a
-      // clipped fill should look like
+      // the row's x span, kept in the grid: `edge` has cut the edge at the
+      // borders already, and this only catches what rounding leaves over
       let xa = x < xnext ? x : xnext;
       let xb = x < xnext ? xnext : x;
       if (xa < 0) xa = 0;