ntk 8.22.0 → 8.23.0

package/lib/text/fontmanager.js

@@ -565,6 +565,15 @@ export default class FontManager {
     return new TextLayout(this, content, style, options);
   }
 
+  /**
+   * Whether `layout` takes `justify`, and fills a line with its word
+   * separators itself. True; a caller that asks before it passes the option
+   * keeps its own way of justifying for an engine without it.
+   */
+  get justifies() {
+    return true;
+  }
+
   /**
    * Memoized shaping used by TextLayout and the canvas text path, bounded at
    * two generations of `SHAPE_GENERATION` words. `levelsKey` is a compact
@@ -671,7 +680,7 @@ export default class FontManager {
    */
   _shapeCachedWhole(text, style) {
     const emb = embeddingLevels(text, style.direction);
-    const baseLevel = emb.paragraphs.length ? emb.paragraphs[0].level : 0;
+    const baseLevel = emb.paragraphs[0].level;
     const shaped = this._shapeCached(text, style, normalizedLevels(emb.levels, 0, text.length));
     return shaped.baseLevel === baseLevel ? shaped : { ...shaped, baseLevel };
   }

package/lib/text/layout.js

@@ -12,6 +12,29 @@ const WS = new Set([0x20, 0x09]);
 const HARD_BREAKS = /[\n\r\u2028\u2029]+$/;
 const TRAILING_WS = /[ \t]+$/;
 
+// The word separators a justified line's room is shared out at (CSS Text 3,
+// 7.4, `text-justify: auto` as a browser has it for the scripts that space
+// their words): a space and a no-break space.
+const SEPARATORS = new Set([0x20, 0xa0]);
+const separates = (g) => g.codePoints.length === 1 && SEPARATORS.has(g.codePoints[0]);
+
+// What ends a line `justify` sets as it does a paragraph's last: a line feed,
+// a carriage return or a paragraph separator, as a browser's forced break
+// does. A line separator, U+2028, is not one, so a caller can ask a line to
+// break there and be justified.
+const JUSTIFY_STOPS = /[\n\r\u2029]$/;
+
+// `justify`'s lines as bits: those that go on to another (REST), and the
+// paragraph's last with those a forced break ends (LAST).
+const REST = 1;
+const LAST = 2;
+function justifyBits(justify) {
+  if (justify === true || justify === 'rest') return REST;
+  if (justify === 'last') return LAST;
+  if (justify === 'all') return REST | LAST;
+  return 0;
+}
+
 /** Scripts written without spaces between words, whose line breaking
  *  needs a dictionary (UAX #14's SA class, and Javanese, Balinese and
  *  Buginese, which are AL there): a token of theirs is a run of words. */
@@ -162,6 +185,44 @@ function isWsGlyph(g) {
   return g.codePoints.length > 0 && g.codePoints.every((cp) => WS.has(cp));
 }
 
+/**
+ * A line set to fill `width`: what it leaves of it shared equally among its
+ * word separators (`SEPARATORS`), each glyph's advance widened by its share
+ * — the white space it ends on hangs, and takes none. Its runs are made
+ * anew, those with a separator in them over glyphs of their own, since a
+ * shaped run is the paragraph's and shared by every layout of it; caret
+ * positions, hit testing, drawing and coverage all read the advances, and
+ * agree. A line with no separator, or with no room left, keeps its
+ * alignment. Answers the line's width.
+ */
+function justifyLine(line, width) {
+  const free = width - line.width;
+  if (!(free > 0)) return line.width;
+  let count = 0;
+  for (const r of line.runs) {
+    for (const g of r.run.glyphs) if (separates(g)) count++;
+  }
+  if (count === 0) return line.width;
+  const extra = free / count;
+  let shift = 0;
+  line.runs = line.runs.map((r) => {
+    const moved = shift ? { ...r, x: r.x + shift } : r;
+    let k = 0;
+    for (const g of r.run.glyphs) if (separates(g)) k++;
+    if (k === 0) return moved;
+    shift += k * extra;
+    const glyphs = r.run.glyphs.map((g) => (separates(g) ? { ...g, ax: g.ax + extra } : g));
+    return {
+      ...moved,
+      width: r.width + k * extra,
+      run: { ...r.run, glyphs, width: r.run.width + k * extra }
+    };
+  });
+  line.width += count * extra;
+  line.advance += count * extra;
+  return line.width;
+}
+
 /**
  * Multi-line text layout: breaks (possibly styled) text into lines for a
  * target container width, with full shaping — kerning, ligatures, complex
@@ -205,6 +266,13 @@ function isWsGlyph(g) {
  *   past the line's end, as CSS's `overflow-wrap: normal` does — but for
  *   text in a script written without spaces (Thai, Khmer, Javanese…), whose
  *   words the breaker cannot find, which is cut as a fallback
+ * - `justify` — the lines set to fill `maxWidth`, what each leaves of it
+ *   shared equally among its word separators, a space and a no-break space:
+ *   `true` (or `'rest'`) for every line but the paragraph's last and each a
+ *   forced break ends, as CSS's `text-align: justify`; `'last'` for only
+ *   those; `'all'` for every line. A line with no separator, or none of the
+ *   width to spare, keeps `align`'s place, as do the lines not justified.
+ *   The breaks are the layout's at its width; justifying moves none
  * - `fit` — 'items' fits and measures a line as a browser does: each span's
  *   part of it rounded up to a 64th of a pixel before it is added, as Blink
  *   rounds an element's text on a line up to a LayoutUnit; a line's `width`
@@ -436,6 +504,11 @@ export class TextLayout {
         natural = m.lineHeight;
       }
       if (runs.length) fitted += round(item);
+      // a line's place in the paragraph, for `justify`: its last, which a
+      // `maxLines` cut leaves no line, or one a forced break ends
+      const ends =
+        (li === lineTokens.length - 1 && !this.truncated) ||
+        JUSTIFY_STOPS.test(text.slice(Math.max(lineStart, lineEnd - 1), lineEnd));
       if (fitted > layoutWidth) layoutWidth = fitted;
       // Half-leading (CSS Inline Layout 3): the slack between the glyphs and
       // the line box is split evenly above and below, rather than all of it
@@ -462,11 +535,27 @@ export class TextLayout {
         start: lineStart,
         end: lineEnd,
         _contentEnd: contentEnd,
-        _trailing: trailing
+        _trailing: trailing,
+        _ends: ends,
+        _elided: !!ellipsis
       });
       y += box;
     }
 
+    // ---- justification ----
+    // After the lines are broken, so a width the lines are set at is no
+    // shaping: a paragraph laid out again at another width breaks the glyphs
+    // it has into other lines and spaces them, where one that spaced its
+    // words through letter spacing was shaped again at every width.
+    const justify = justifyBits(options.justify);
+    if (justify && Number.isFinite(maxWidth)) {
+      for (const line of this.lines) {
+        if (line._elided || !(justify & (line._ends ? LAST : REST))) continue;
+        const width = justifyLine(line, maxWidth);
+        if (width > layoutWidth) layoutWidth = width;
+      }
+    }
+
     this.width = layoutWidth;
     this.height = y;
 
@@ -537,7 +626,7 @@ export class TextLayout {
     const text = spans.map((s) => s.text).join('');
     const emb = embeddingLevels(text, direction);
     const levels = emb.levels;
-    const baseLevel = emb.paragraphs.length ? emb.paragraphs[0].level & 1 : 0;
+    const baseLevel = emb.paragraphs[0].level & 1;
 
     // span boundaries, for binary search by char position
     const spanStarts = [];

package/lib/text/shape.js

@@ -21,17 +21,30 @@ function neverSwitches(cp) {
 
 /**
  * UAX#9 embedding levels for a string. `direction` is 'ltr', 'rtl' or 'auto'
- * (first-strong detection). Returns bidi-js's result object.
+ * (first-strong detection). Returns bidi-js's result object, which always
+ * has a first paragraph: its level is the text's base level.
  */
 export function embeddingLevels(text, direction = 'auto') {
   const explicit = direction === 'ltr' || direction === 'rtl' ? direction : null;
+  // An empty text is a paragraph too, at the level its direction names.
+  // bidi-js finds no paragraph in it, and a base level read as 0 for want
+  // of one set an empty right-to-left field's line, and the caret on it,
+  // at the left — where the same field holding only a line break had it
+  // at the right. Under 'auto' there is no strong character to find, and
+  // the paragraph is left-to-right (UAX#9 P3).
+  if (!text.length) {
+    return {
+      levels: new Uint8Array(0),
+      paragraphs: [{ start: 0, end: -1, level: explicit === 'rtl' ? 1 : 0 }]
+    };
+  }
   // Text that nothing can make right-to-left is level 0 throughout, which
   // is what the algorithm would work out a character at a time: every
   // layout asks, and most text is Latin, CJK or digits with no bidi at all.
   if (explicit !== 'rtl' && !MAY_REVERSE.test(text)) {
     return {
       levels: new Uint8Array(text.length),
-      paragraphs: text.length ? [{ start: 0, end: text.length - 1, level: 0 }] : []
+      paragraphs: [{ start: 0, end: text.length - 1, level: 0 }]
     };
   }
   return bidi.getEmbeddingLevels(text, explicit);
@@ -161,7 +174,7 @@ export function shapeText(fonts, text, style, levels) {
   if (!levels) {
     const emb = embeddingLevels(text, style.direction);
     levels = emb.levels;
-    baseLevel = emb.paragraphs.length ? emb.paragraphs[0].level : 0;
+    baseLevel = emb.paragraphs[0].level;
   } else {
     baseLevel = levels.length ? levels[0] & ~1 : 0;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ntk",
-  "version": "8.22.0",
+  "version": "8.23.0",
   "description": "Desktop UI toolkit for X11 with canvas-like 2d and OpenGL rendering",
   "author": "Andrey Sidorov <sidorares@yandex.ru>",
   "license": "MIT",