ntk 8.14.1 → 8.14.3

package/lib/text/fontshorthand.js

@@ -0,0 +1,213 @@
+// The CSS `font` shorthand, as `ctx.font` takes it:
+//
+//   [ <style> || <variant> || <weight> || <stretch> ]? <size> [ / <line-height> ]? <family>#
+//
+// canvas-fontstyle read this before, with a regular expression from an old
+// node-canvas that allowed no space at all after a weight — so `2000px` was
+// weight 200 at size 0, and every size from 1000 up that begins with a weight
+// set no text — required the weight before the style, took no line height,
+// and cached every string it was handed as a property on an LRU object it
+// never evicted from, which grew without bound under an animated size.
+
+// What 1em is. Canvas resolves a relative size against the canvas element's
+// font; a context here has no element, so it is the size of the font a
+// context starts with (DEFAULT_FONT in renderingcontext_2d.js).
+const EM = 20;
+
+const ABSOLUTE_SIZES = {
+  'xx-small': 9,
+  'x-small': 10,
+  small: 13,
+  medium: 16,
+  large: 18,
+  'x-large': 24,
+  'xx-large': 32,
+  'xxx-large': 48
+};
+
+const UNITS = {
+  px: 1,
+  pt: 4 / 3,
+  pc: 16,
+  in: 96,
+  cm: 96 / 2.54,
+  mm: 96 / 25.4,
+  q: 96 / 101.6,
+  em: EM,
+  rem: EM,
+  '%': EM / 100
+};
+
+const STYLES = new Set(['italic', 'oblique']);
+const WEIGHTS = new Set(['bold', 'bolder', 'lighter']);
+const STRETCHES = new Set([
+  'ultra-condensed',
+  'extra-condensed',
+  'condensed',
+  'semi-condensed',
+  'semi-expanded',
+  'expanded',
+  'extra-expanded',
+  'ultra-expanded'
+]);
+
+const NUMBER = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?$/i;
+const LENGTH = /^([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)([a-z]+|%)$/i;
+const ANGLE = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:deg|grad|rad|turn)$/i;
+
+/** A font size in pixels, or null when `token` is not one. */
+function sizeOf(token) {
+  const word = token.toLowerCase();
+  if (Object.hasOwn(ABSOLUTE_SIZES, word)) return ABSOLUTE_SIZES[word];
+  if (word === 'larger') return EM * 1.2;
+  if (word === 'smaller') return EM / 1.2;
+  const m = LENGTH.exec(word);
+  if (!m || !Object.hasOwn(UNITS, m[2])) return null;
+  const px = Number(m[1]) * UNITS[m[2]];
+  return px >= 0 && px < Infinity ? px : null;
+}
+
+/** A line height; only its shape matters, since a canvas ignores it. */
+const isLineHeight = (text) =>
+  text.toLowerCase() === 'normal' || NUMBER.test(text) || (LENGTH.test(text) && sizeOf(text) !== null);
+
+/**
+ * The family list, first family first: quoted names as written, unquoted ones
+ * as the identifiers they are with the white space between them collapsed.
+ * Null when it is not a list of families.
+ */
+function familiesOf(text) {
+  const families = [];
+  let i = 0;
+  while (i < text.length) {
+    while (i < text.length && /\s/.test(text[i])) i++;
+    let name;
+    if (text[i] === '"' || text[i] === "'") {
+      const quote = text[i];
+      const end = text.indexOf(quote, i + 1);
+      if (end === -1) return null;
+      name = text.slice(i + 1, end);
+      i = end + 1;
+      while (i < text.length && /\s/.test(text[i])) i++;
+    } else {
+      const end = text.indexOf(',', i);
+      const raw = (end === -1 ? text.slice(i) : text.slice(i, end)).trim();
+      // a run of identifiers: `Times New Roman`, not `12px` or `"x`
+      if (!/^-?[a-z_\u00a0-\uffff][\w\u00a0-\uffff-]*(?:\s+-?[a-z_\u00a0-\uffff][\w\u00a0-\uffff-]*)*$/i.test(raw)) {
+        return null;
+      }
+      name = raw.replace(/\s+/g, ' ');
+      i = end === -1 ? text.length : end;
+    }
+    if (!name) return null;
+    families.push(name);
+    if (i < text.length) {
+      if (text[i] !== ',') return null;
+      i++;
+    }
+  }
+  return families.length ? families : null;
+}
+
+/**
+ * Parse a CSS `font` shorthand into `{ weight, style, size, unit, family,
+ * families }`, the size in pixels, or undefined when it is not one — which
+ * `ctx.font` ignores, keeping the font it had, as canvas says.
+ *
+ * `weight` and `style` are the words written (`'normal'`, `'bold'`, `'600'`,
+ * `'oblique 10deg'`), `family` the first family and `families` all of them.
+ */
+export function parseFont(value) {
+  if (typeof value !== 'string') return undefined;
+  const text = value.trim();
+  if (!text) return undefined;
+
+  let weight;
+  let style;
+  let variant;
+  let stretch;
+  let normals = 0;
+  let i = 0;
+  let size = null;
+  // the keywords before the size, each at most once, in any order; `normal`
+  // is whichever of them is left unset, so it only counts against the four
+  for (;;) {
+    while (i < text.length && /\s/.test(text[i])) i++;
+    let end = i;
+    while (end < text.length && !/[\s/,"']/.test(text[end])) end++;
+    const token = text.slice(i, end);
+    if (!token) return undefined;
+    const word = token.toLowerCase();
+    if (STYLES.has(word) && style === undefined) {
+      style = word;
+      // `oblique` may carry its angle
+      if (word === 'oblique') {
+        let j = end;
+        while (j < text.length && /\s/.test(text[j])) j++;
+        let k = j;
+        while (k < text.length && !/[\s/,]/.test(text[k])) k++;
+        if (ANGLE.test(text.slice(j, k))) {
+          style = `oblique ${text.slice(j, k).toLowerCase()}`;
+          end = k;
+        }
+      }
+    } else if (WEIGHTS.has(word) && weight === undefined) {
+      weight = word;
+    } else if (NUMBER.test(word) && weight === undefined && Number(word) >= 1 && Number(word) <= 1000) {
+      weight = word;
+    } else if (word === 'small-caps' && variant === undefined) {
+      variant = word;
+    } else if (STRETCHES.has(word) && stretch === undefined) {
+      stretch = word;
+    } else if (word === 'normal') {
+      normals++;
+    } else {
+      size = sizeOf(token);
+      if (size === null) return undefined;
+      i = end;
+      break;
+    }
+    const named = [style, weight, variant, stretch].filter((v) => v !== undefined).length;
+    if (named + normals > 4) return undefined;
+    i = end;
+  }
+
+  while (i < text.length && /\s/.test(text[i])) i++;
+  if (text[i] === '/') {
+    i++;
+    while (i < text.length && /\s/.test(text[i])) i++;
+    let end = i;
+    while (end < text.length && !/[\s,"']/.test(text[end])) end++;
+    if (!isLineHeight(text.slice(i, end))) return undefined;
+    i = end;
+  }
+
+  const families = familiesOf(text.slice(i));
+  if (!families) return undefined;
+  return {
+    weight: weight ?? 'normal',
+    style: style ?? 'normal',
+    size,
+    unit: 'px',
+    family: families[0],
+    families
+  };
+}
+
+// Each spelling is parsed once: a context sets its font on every draw, and
+// the same few strings come round again. Bounded, and dropped whole rather
+// than evicted — the old cache held every string it was ever handed.
+const parsed = new Map();
+const PARSED_MAX = 256;
+
+/** `parseFont`, remembered per spelling. */
+export function parseFontCached(value) {
+  if (typeof value !== 'string') return undefined;
+  let font = parsed.get(value);
+  if (font === undefined && !parsed.has(value)) {
+    font = parseFont(value);
+    if (parsed.size >= PARSED_MAX) parsed.clear();
+    parsed.set(value, font);
+  }
+  return font;
+}

package/lib/text/glyphs.js

@@ -2,7 +2,7 @@ import GlyphSet from '../glyphset.js';
 import Picture from '../picture.js';
 import Pixmap from '../pixmap.js';
 import { fontPageToken, sharedGlyphsFor } from '../sharedglyphs.js';
-import { trapezoidize } from '../trapezoid.js';
+import { clipTraps, trapezoidize } from '../trapezoid.js';
 
 /**
  * Text rendering policy — the bitmap/vector routing thresholds and the
@@ -201,6 +201,13 @@ export class GlyphPage {
 /** per-app page cache: pages (and their server glyphsets) are shared by all
  *  windows/pixmaps of a connection. Access refreshes LRU order. */
 export function getGlyphPage(app, font, size) {
+  // The page the last run was drawn from, asked for again — a paragraph's
+  // spans, an editor's tokens, a table's cells are runs of one face at one
+  // size — is the most recent already: no key to spell and no move to make,
+  // where both were most of what drawing a run cost here. Only this
+  // function orders the pages, and an eviction forgets it (trimGlyphPages).
+  const last = app._lastGlyphPage;
+  if (last && last.font === font && last.size === size) return last.page;
   if (!app._glyphPages) app._glyphPages = new Map();
   const key = `${font.key}@${size}`;
   let page = app._glyphPages.get(key);
@@ -211,6 +218,7 @@ export function getGlyphPage(app, font, size) {
     page = new GlyphPage(app, font, size);
   }
   app._glyphPages.set(key, page);
+  app._lastGlyphPage = { font, size, page };
   return page;
 }
 
@@ -266,6 +274,7 @@ export function trimGlyphPages(app, policy = policyOf(app), inUse = null) {
     if (inUse && inUse.has(page)) continue;
     pages.delete(key);
     total -= page.bytes;
+    if (app._lastGlyphPage?.page === page) app._lastGlyphPage = null;
     page.destroy();
   }
 }
@@ -679,6 +688,8 @@ function drawVectorGlyphRuns(app, op, srcId, dstId, positioned, bounds = null) {
   const placed = [];
   let minX = Infinity;
   let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
   for (const { run, x, y } of positioned) {
     let cursor = x;
     for (const g of run.glyphs) {
@@ -691,17 +702,46 @@ function drawVectorGlyphRuns(app, op, srcId, dstId, positioned, bounds = null) {
       placed.push({ run, glyph: g, x: gx, y: gy });
       if (gx + e.minX < minX) minX = gx + e.minX;
       if (gy + e.minY < minY) minY = gy + e.minY;
+      if (gx + e.maxX > maxX) maxX = gx + e.maxX;
+      if (gy + e.maxY > maxY) maxY = gy + e.maxY;
     }
   }
   if (placed.length === 0) return;
 
-  const bx = Math.floor(minX) - 1;
-  const by = Math.floor(minY) - 1;
+  let bx = Math.floor(minX) - 1;
+  let by = Math.floor(minY) - 1;
 
-  const traps = [];
+  let traps = [];
   for (const p of placed) {
     trapezoidize(p.run.font.outline(p.glyph.id, p.run.size), p.x - bx, p.y - by, traps);
   }
+  // Only the part the destination can show, when the ink reaches past it: a
+  // mask is the size of what it covers, and a glyph bigger than the surface
+  // — a size a zoom or a style can reach — asked for one the size of the
+  // glyph, which past 32767 pixels is not a pixmap X can make.
+  if (
+    bounds !== null &&
+    (minX < bounds.x || minY < bounds.y || maxX > bounds.x + bounds.w || maxY > bounds.y + bounds.h)
+  ) {
+    const x0 = Math.max(bx, Math.floor(bounds.x) - 1);
+    const y0 = Math.max(by, Math.floor(bounds.y) - 1);
+    const x1 = Math.ceil(bounds.x + bounds.w) + 1;
+    const y1 = Math.ceil(bounds.y + bounds.h) + 1;
+    if (x1 <= x0 || y1 <= y0) return;
+    const cut = clipTraps(traps, x0 - bx, y0 - by, x1 - bx, y1 - by);
+    // …from the cut's corner, which is the mask's now
+    for (let i = 0; i < cut.length; i += 6) {
+      cut[i] -= x0 - bx;
+      cut[i + 1] -= x0 - bx;
+      cut[i + 2] -= y0 - by;
+      cut[i + 3] -= x0 - bx;
+      cut[i + 4] -= x0 - bx;
+      cut[i + 5] -= y0 - by;
+    }
+    traps = cut;
+    bx = x0;
+    by = y0;
+  }
   compositeTraps(app, op, srcId, dstId, traps, bx, by);
 }
 

package/lib/text/layout.js

@@ -40,12 +40,16 @@ function isWsGlyph(g) {
  *
  * Content is a plain string or an array of spans
  * `{ text, family?, size?, weight?, style?, features?, language?,
- * letterSpacing?, color?, nowrap? }`;
+ * letterSpacing?, color?, nowrap?, shapeApart? }`;
  * span fields override the base style. Spans that share a truthy `nowrap` —
  * `true`, or any value a caller tells its groups apart by — have no break
  * opportunity inside them or between them, as the text of an element with
  * CSS's `white-space: nowrap` has none: the break after the last of them is
- * the next span's to allow. Options:
+ * the next span's to allow. Neighbouring spans shaped alike — a colour
+ * apart — are shaped as one text, so a word across them keeps its kerning
+ * and its joining; a span with a truthy `shapeApart` is shaped on its own,
+ * as CSS breaks the shaping at an inline box with a margin, border or
+ * padding. Options:
  *
  * - `maxWidth` — target container width (default: unlimited)
  * - `align` — 'left' | 'right' | 'center' | 'start' | 'end'
@@ -154,7 +158,10 @@ export class TextLayout {
 
     // ---- assemble lines: strip trailing ws, bidi-reorder, position ----
     const baseSpan = spans[0];
-    const lineHeightMul = options.lineHeight ?? 1;
+    // a multiplier, as a number or a numeric string; anything else is the
+    // font's own line height — `'24px'` made every line NaN pixels tall
+    const asked = options.lineHeight == null ? NaN : Number(options.lineHeight);
+    const lineHeightMul = asked >= 0 && asked < Infinity ? asked : 1;
     this.lines = [];
     let y = 0;
     let layoutWidth = 0;
@@ -393,24 +400,80 @@ export class TextLayout {
     return { spans, text, baseLevel, tokens };
   }
 
+  /**
+   * Whether the letters that meet at an edge between two spans of a group
+   * shape otherwise together than apart: their glyphs or their advances
+   * change. Compared as a set and a sum, which holds in a right-to-left
+   * pair as in a left-to-right one.
+   */
+  _meets(text, group, levels, shaping) {
+    for (let i = 1; i < group.length; i++) {
+      const at = group[i].start;
+      const low = text.charCodeAt(at - 1);
+      const before = low >= 0xdc00 && low < 0xe000 && at >= 2 ? 2 : 1;
+      const after = text.codePointAt(at) > 0xffff ? 2 : 1;
+      const from = at - before;
+      const to = at + after;
+      if (this.fonts._meets(text.slice(from, to), before, shaping, normalizedLevels(levels, from, to))) return true;
+    }
+    return false;
+  }
+
   _makeToken(text, start, end, levels, spanAt, required) {
     const fragments = [];
     let width = 0;
     let pos = start;
     while (pos < end) {
-      const { span, shaping, end: spanEnd } = spanAt(pos);
-      const fragEnd = Math.min(end, spanEnd);
-      // hard-break controls only terminate the line; never shape them
-      const fragText = text.slice(pos, fragEnd).replace(HARD_BREAKS, '');
-      if (fragText.length > 0) {
-        const fragLevels = normalizedLevels(levels, pos, pos + fragText.length);
-        const shaped = this.fonts._shapeCached(fragText, shaping, fragLevels);
+      // The spans of the token shaped alike — a colour apart, say — are
+      // shaped as one text and the glyphs shared out among them after, so
+      // a word that crosses from one to the next keeps the kerning between
+      // its letters there, and a script its joining, as a browser shapes
+      // it: an opening quote an `::before` makes kerned with nothing, and
+      // an Arabic word in two colours came apart into isolated letters.
+      // A span marked `shapeApart` is shaped on its own, as CSS breaks the
+      // shaping at an inline box with a margin, border or padding.
+      const group = [];
+      let shaping = null;
+      for (let at = pos; at < end; ) {
+        const next = spanAt(at);
+        if (shaping && (next.shaping !== shaping || next.span.shapeApart || group[group.length - 1].span.shapeApart))
+          break;
+        shaping = next.shaping;
+        const fragEnd = Math.min(end, next.end);
+        group.push({ span: next.span, start: at, end: fragEnd });
+        at = fragEnd;
+      }
+      const groupEnd = group[group.length - 1].end;
+      // Only where the letters either side of a span's edge shape otherwise
+      // together than apart — a kerning pair, a joining script, a mark on
+      // the letter before — is the word shaped whole: two letters are a
+      // lookup the memo almost always holds, and a syntax-coloured line of
+      // code, a span to a token, shaped each of its words afresh otherwise,
+      // at twice the cost of the line.
+      let pieces = null;
+      if (group.length > 1) {
+        const joined = text.slice(pos, groupEnd);
+        if (!HARD_BREAKS.test(joined) && this._meets(text, group, levels, shaping)) {
+          const whole = this.fonts._shapeCached(joined, shaping, normalizedLevels(levels, pos, groupEnd));
+          pieces = splitShapedOnce(
+            whole,
+            group.slice(1).map((g) => g.start - pos)
+          );
+        }
+      }
+      for (let i = 0; i < group.length; i++) {
+        const { span, start: fragStart, end: fragEnd } = group[i];
+        // hard-break controls only terminate the line; never shape them
+        const fragText = text.slice(fragStart, fragEnd).replace(HARD_BREAKS, '');
+        if (fragText.length === 0) continue;
+        const fragLevels = normalizedLevels(levels, fragStart, fragStart + fragText.length);
+        const shaped = pieces ? pieces[i] : this.fonts._shapeCached(fragText, shaping, fragLevels);
         // the levels ride along so a later split can re-shape a piece at the
         // level it actually has, rather than assuming ltr
-        fragments.push({ text: fragText, span, shaping, shaped, start: pos, levels: fragLevels });
+        fragments.push({ text: fragText, span, shaping, shaped, start: fragStart, levels: fragLevels });
         width += shaped.width;
       }
-      pos = fragEnd;
+      pos = groupEnd;
     }
     // trailing whitespace does not count against the container width
     let wsWidth = 0;
@@ -983,21 +1046,31 @@ function graphemeSegmenter() {
   return segmenter;
 }
 
-// Two ASCII characters are never one cluster, bar a CR before a LF (UAX#29
-// GB3): whatever extends a cluster or joins into one — marks, joiners,
-// spacing marks, prepends — sits above U+02FF. So text of nothing else,
-// which is most of what a document cuts, needs no segmenter: it costs a
-// microsecond a call, and the width floors ask once a word.
-function plainAscii(text) {
+// A character that never joins the ones beside it into a cluster (UAX#29):
+// whatever extends a cluster or joins into one — marks, joiners, spacing
+// marks, prepends — sits at U+0300 or above, and the general punctuation
+// block has two of them, the zero-width joiner and non-joiner. Checked pair
+// by pair against Intl.Segmenter, all 770,884 pairs of these: every one is
+// two clusters but a CR before a LF (GB3). The stateful rules — emoji
+// sequences, flags, Indic conjuncts — are about characters outside it.
+const standsAlone = (c) =>
+  c < 0x300 || (c >= 0x2000 && c <= 0x206f && c !== 0x200c && c !== 0x200d);
+
+// So text of nothing else, which is most of what a document cuts — Latin
+// letters, accented or not, and the dashes, quotes and ellipses around them
+// — needs no segmenter. One costs a microsecond a call, and the width floors
+// ask once a word; and the first one made costs 10 ms, loading ICU's break
+// rules, which a first frame of any text with a curly quote in it paid.
+function standsApart(text) {
   for (let i = 0; i < text.length; i++) {
     const c = text.charCodeAt(i);
-    if (c >= 0x80 || (c === 13 && text.charCodeAt(i + 1) === 10)) return false;
+    if (!standsAlone(c) || (c === 13 && text.charCodeAt(i + 1) === 10)) return false;
   }
   return true;
 }
 
 function graphemes(text) {
-  if (plainAscii(text)) return text.split('');
+  if (standsApart(text)) return text.split('');
   const segments = graphemeSegmenter();
   if (!segments) return Array.from(text);
   const out = [];
@@ -1008,7 +1081,9 @@ function graphemes(text) {
 /** The first grapheme cluster of `text`, without segmenting the rest. */
 function firstGrapheme(text) {
   const c0 = text.charCodeAt(0);
-  if (c0 < 0x80 && c0 !== 13 && !(text.charCodeAt(1) >= 0x80)) return text.slice(0, 1);
+  if (c0 !== 13 && standsAlone(c0) && (text.length === 1 || standsAlone(text.charCodeAt(1)))) {
+    return text.slice(0, 1);
+  }
   const segments = graphemeSegmenter();
   if (!segments) return String.fromCodePoint(text.codePointAt(0));
   for (const { segment } of segments.segment(text)) return segment;
@@ -1077,6 +1152,83 @@ function stripTrailingWhitespace(entries) {
 
 // The levels key for a code-unit slice of a fragment. A uniform key covers
 // any slice of itself; a per-character one has to be cut to match.
+/**
+ * A shaped text (`shapeText`) cut at `cuts` — code-unit offsets inside it,
+ * ascending — into as many shaped texts, each of its own piece of the text
+ * with its runs and their glyphs, or null where a cut falls inside what a
+ * glyph was made from: a ligature, or a cluster the font set as one, which
+ * no cut can share out. A glyph keeps the advance shaping gave it, so the
+ * kerning between the last letter before a cut and the first after it
+ * stays with the first piece. A right-to-left run's glyphs are in visual
+ * order, and are walked from their end.
+ */
+/** `splitShaped`, kept per shaped text and cut, since a shaped text is the
+ *  memo's and never changes, and a word a paragraph lays out again is cut
+ *  the same way. */
+const SPLITS = new WeakMap();
+function splitShapedOnce(shaped, cuts) {
+  const key = cuts.join(',');
+  let byCut = SPLITS.get(shaped);
+  if (!byCut) {
+    byCut = new Map();
+    SPLITS.set(shaped, byCut);
+  }
+  if (byCut.has(key)) return byCut.get(key);
+  const pieces = splitShaped(shaped, cuts);
+  byCut.set(key, pieces);
+  return pieces;
+}
+
+function splitShaped(shaped, cuts) {
+  const bounds = [0, ...cuts, shaped.text.length];
+  const pieces = cuts.concat(shaped.text.length).map((to, i) => ({
+    text: shaped.text.slice(bounds[i], to),
+    width: 0,
+    baseLevel: shaped.baseLevel,
+    runs: []
+  }));
+  for (const run of shaped.runs) {
+    const rtl = (run.level & 1) === 1;
+    const logical = rtl ? [...run.glyphs].reverse() : run.glyphs;
+    let piece = 0;
+    while (bounds[piece + 1] <= run.start) piece++;
+    let at = run.start;
+    let from = at;
+    let glyphs = [];
+    const close = () => {
+      if (at === from && glyphs.length === 0) return;
+      const offset = bounds[piece];
+      let width = 0;
+      for (const g of glyphs) width += g.ax;
+      pieces[piece].runs.push({
+        ...run,
+        glyphs: rtl ? glyphs.reverse() : glyphs,
+        width,
+        text: shaped.text.slice(from, at),
+        start: from - offset,
+        end: at - offset
+      });
+      pieces[piece].width += width;
+    };
+    for (const g of logical) {
+      let units = 0;
+      for (const cp of g.codePoints ?? []) units += cp > 0xffff ? 2 : 1;
+      if (units > 0 && at >= bounds[piece + 1]) {
+        close();
+        while (at >= bounds[piece + 1]) piece++;
+        from = at;
+        glyphs = [];
+      }
+      if (at + units > bounds[piece + 1]) return null;
+      glyphs.push(g);
+      at += units;
+    }
+    if (at !== run.end) return null;
+    close();
+  }
+  return pieces;
+}
+
 function sliceLevels(key, start, end) {
   if (key === undefined) return '0';
   if (!key.includes(',')) return key;

package/lib/trapezoid.js

@@ -129,3 +129,69 @@ export function trapArea(traps) {
   }
   return area;
 }
+
+/**
+ * Trapezoids cut to the rectangle [x0, x1] × [y0, y1], with the coverage
+ * inside it unchanged — the part of a mask that can show anything. A glyph
+ * a million pixels high is a mask no X server will make and coordinates
+ * past what 16.16 fixed point carries, and every pixel of it outside the
+ * surface is a pixel rasterized for nothing.
+ *
+ * The cut is exact. Each trapezoid is clipped to the rows and then split
+ * into bands where either edge crosses x0 or x1, so that within a band an
+ * edge lies wholly on one side of each line: an edge outside the rectangle
+ * becomes the vertical just past it, which covers the same pixels inside,
+ * and a band with nothing inside is dropped.
+ *
+ * @param {Array<number>} traps AddTraps data, as `trapezoidize` makes it
+ * @returns {Array<number>} the cut trapezoids, in the same coordinates
+ */
+export function clipTraps(traps, x0, y0, x1, y1) {
+  const out = [];
+  for (let i = 0; i < traps.length; i += 6) {
+    const tl = traps[i];
+    const tr = traps[i + 1];
+    const ty = traps[i + 2];
+    const bl = traps[i + 3];
+    const br = traps[i + 4];
+    const by = traps[i + 5];
+    if (!(by > y0 && ty < y1 && by > ty)) continue;
+    const top = Math.max(ty, y0);
+    const bottom = Math.min(by, y1);
+    // each edge's x at a height
+    const left = (y) => tl + (bl - tl) * ((y - ty) / (by - ty));
+    const right = (y) => tr + (br - tr) * ((y - ty) / (by - ty));
+    const cuts = [top, bottom];
+    for (const [a, b] of [
+      [tl, bl],
+      [tr, br]
+    ]) {
+      for (const x of [x0, x1]) {
+        if ((a - x) * (b - x) >= 0) continue; // does not cross this line
+        const y = ty + (by - ty) * ((x - a) / (b - a));
+        if (y > top && y < bottom) cuts.push(y);
+      }
+    }
+    cuts.sort((p, q) => p - q);
+    for (let k = 0; k + 1 < cuts.length; k++) {
+      const ya = cuts[k];
+      const yb = cuts[k + 1];
+      if (!(yb > ya)) continue;
+      const mid = (ya + yb) / 2;
+      const lm = left(mid);
+      const rm = right(mid);
+      if (lm >= x1 || rm <= x0) continue; // nothing of this band inside
+      const inL = lm >= x0;
+      const inR = rm <= x1;
+      out.push(
+        inL ? left(ya) : x0 - 1,
+        inR ? right(ya) : x1 + 1,
+        ya,
+        inL ? left(yb) : x0 - 1,
+        inR ? right(yb) : x1 + 1,
+        yb
+      );
+    }
+  }
+  return out;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ntk",
-  "version": "8.14.1",
+  "version": "8.14.3",
   "description": "Desktop UI toolkit for X11 with canvas-like 2d and OpenGL rendering",
   "author": "Andrey Sidorov <sidorares@yandex.ru>",
   "license": "MIT",
@@ -43,7 +43,6 @@
   },
   "dependencies": {
     "bidi-js": "^1.0.3",
-    "canvas-fontstyle": "^1.0.1",
     "domutils": "^4.0.2",
     "extrude-polyline": "^1.0.6",
     "fontkit": "^2.0.4",