ntk 2.2.0 → 3.1.0

package/lib/renderingcontext_opengl.js

@@ -1,46 +1,53 @@
-module.exports = function(window, visual) {
-	// TODO: 1) use glx api to get best visual; 2) cache
-	//require('child_process').exec('glxinfo -i -b', function(error, stdout, stderr) {
-  var gl = new RenderingContextOpenGL(window, visual);
-  return gl;
-}
-
-function RenderingContextOpenGL(window, visual) {
-
-    if (typeof visual == 'undefined')
-      visual = parseInt(require('child_process').execSync('glxinfo -i -b').toString());
-
-    var X = window.X;
-    var GLX = window.display.GLX;
-    this.window = window;
-
-    var ctx = X.AllocID();
-    GLX.CreateContext(ctx, visual, 0, 0, 0);
-    GLX.MakeCurrent(window.id, ctx, 0, function() {});
-
-    var gl = GLX.renderPipeline(ctx);
-    for(key in gl) {
-    	if (key !== 'SwapBuffers') {
-    	    var val = gl[key];
-    	    if (typeof val == 'function')
-    	    	this[key] = val.bind(gl);
-    	    else
-    	    	this[key] = val;
-    	}
-    }
-    swapBuffers = gl.SwapBuffers;
-    var id = window.id;
-    this.SwapBuffers = function() { swapBuffers.call(gl, id); };
-
-    this.CreateGLXPixmap = function(pixmapId) {
-      var glxpixmapId = X.AllocID();
-      GLX.CreateGLXPixmap(0, visual, pixmapId, glxpixmapId);
-      return glxpixmapId;
-    };
-    this.BindTexImage = function(pixmap, buffer) {
-      GLX.BindTexImage(ctx, pixmap, buffer);
-    };
-}
-
-// register context
-require('./drawable').prototype.renderingContextFactory['opengl'] = module.exports;
+import Drawable from './drawable.js';
+
+// Indirect GLX rendering context exposing an OpenGL 1.4-style api.
+// Note: many modern X servers ship with indirect GLX disabled — see README.
+class RenderingContextOpenGL {
+  constructor(window, visual) {
+    // TODO: use glx api to query the best visual instead of shelling out
+    if (typeof visual === 'undefined') visual = window.app?.options?.glxVisual;
+    if (typeof visual === 'undefined') {
+      // lazy builtin lookup: browser bundles must not depend on child_process
+      const cp = globalThis.process?.getBuiltinModule?.('node:child_process');
+      if (!cp) {
+        throw new Error(
+          "getContext('opengl'): no visual id — pass one explicitly or via createClient({ glxVisual }) when glxinfo cannot be run"
+        );
+      }
+      visual = parseInt(cp.execSync('glxinfo -i -b').toString(), 10);
+    }
+
+    const X = window.X;
+    const GLX = window.display.GLX;
+    this.window = window;
+
+    const ctx = X.AllocID();
+    GLX.CreateContext(ctx, visual, 0, 0, 0);
+    GLX.MakeCurrent(window.id, ctx, 0, () => {});
+
+    const gl = GLX.renderPipeline(ctx);
+    for (const key in gl) {
+      if (key === 'SwapBuffers') continue;
+      const val = gl[key];
+      this[key] = typeof val === 'function' ? val.bind(gl) : val;
+    }
+
+    const windowId = window.id;
+    this.SwapBuffers = () => gl.SwapBuffers.call(gl, windowId);
+
+    this.CreateGLXPixmap = (pixmapId) => {
+      const glxpixmapId = X.AllocID();
+      GLX.CreateGLXPixmap(0, visual, pixmapId, glxpixmapId);
+      return glxpixmapId;
+    };
+    this.BindTexImage = (pixmap, buffer) => {
+      GLX.BindTexImage(ctx, pixmap, buffer);
+    };
+  }
+}
+
+// register context
+Drawable.renderingContextFactory['opengl'] = (window, visual) =>
+  new RenderingContextOpenGL(window, visual);
+
+export default RenderingContextOpenGL;

package/lib/renderingcontext_x11.js

@@ -1,67 +1,59 @@
-module.exports = function(window) {
-  //callback(null, new RenderingContextX11(window));
-  return new RenderingContextX11(window);
-}
-
-function RenderingContextX11(window) {
-  var X = window.X;
-  this.gc = X.AllocID();
-
-  var white = X.display.screen[0].white_pixel;
-  var black = X.display.screen[0].black_pixel;
-  X.CreateGC(this.gc, window.id, { foreground: white, background: black });
-  this.window = window;
-}
-
-var RC = RenderingContextX11.prototype;
-
-RC.putImage = function(data, x, y) {
-  this.window.X.PutImage(2, this.window.id, this.gc, data.width, data.height, x, y, 0, 24, data.data);
-}
-
-RC.point = function(p) {
-  this.window.X.PolyPoint(0, this.window.id, this.gc, [p.x, p.y]);
-}
-
-RC.setForeground = function(color) {
-  this.window.X.ChangeGC(this.gc, { foreground: color });
-}
-
-RC.setBackground = function(color) {
-  this.window.X.ChangeGC(this.gc, { background: color });
-}
-
-RC.polyLine = function(pts) {
-  var coords = [];
-  pts.forEach(function(p) {
-    coords.push(p.x);
-    coords.push(p.y);
-  });
-  this.window.X.PolyLine(0, this.window.id, this.gc, coords);
-}
-
-RC.fillRectangle = function(r) {
-  //console.log('fillRectangle', r);
-  var coords = [parseInt(r.left), parseInt(r.top), parseInt(r.width), parseInt(r.height)];
-  this.window.X.PolyFillRectangle(this.window.id, this.gc, coords);
-}
-
-RC.rectangle = function(r) {
-  //console.log('rectangle', r);
-  var coords = [parseInt(r.left), parseInt(r.top), parseInt(r.width), parseInt(r.height)];
-  this.window.X.PolyRectangle(this.window.id, this.gc, coords);
-}
-
-RC.copy = function(dst) {
-  this.window.X.CopyArea(this.window.id, dst.id, this.gc, 0, 0, 0, 0, 1000, 1000);
-}
-
-RC.drawText = function(text, x, y) {
-  //console.log('drawText', x, y, text);
-  this.window.X.PolyText8(this.window.id, this.gc, x, y, [text]);
-}
-
-// TODO: add poly point, poly rect, color functions
-
-// register context
-require('./drawable').prototype.renderingContextFactory['x11'] = module.exports;
+import Drawable from './drawable.js';
+
+// Thin wrapper over core X drawing requests (no XRender). Mostly useful for
+// debugging; prefer the '2d' context.
+class RenderingContextX11 {
+  constructor(window) {
+    const X = window.X;
+    this.gc = X.AllocID();
+    const white = X.display.screen[0].white_pixel;
+    const black = X.display.screen[0].black_pixel;
+    X.CreateGC(this.gc, window.id, { foreground: white, background: black });
+    this.window = window;
+  }
+
+  putImage(data, x, y) {
+    this.window.X.PutImage(2, this.window.id, this.gc, data.width, data.height, x, y, 0, 24, data.data);
+  }
+
+  point(p) {
+    this.window.X.PolyPoint(0, this.window.id, this.gc, [p.x, p.y]);
+  }
+
+  setForeground(color) {
+    this.window.X.ChangeGC(this.gc, { foreground: color });
+  }
+
+  setBackground(color) {
+    this.window.X.ChangeGC(this.gc, { background: color });
+  }
+
+  polyLine(pts) {
+    const coords = [];
+    for (const p of pts) coords.push(p.x, p.y);
+    this.window.X.PolyLine(0, this.window.id, this.gc, coords);
+  }
+
+  fillRectangle(r) {
+    const coords = [Math.trunc(r.left), Math.trunc(r.top), Math.trunc(r.width), Math.trunc(r.height)];
+    this.window.X.PolyFillRectangle(this.window.id, this.gc, coords);
+  }
+
+  rectangle(r) {
+    const coords = [Math.trunc(r.left), Math.trunc(r.top), Math.trunc(r.width), Math.trunc(r.height)];
+    this.window.X.PolyRectangle(this.window.id, this.gc, coords);
+  }
+
+  copy(dst) {
+    this.window.X.CopyArea(this.window.id, dst.id, this.gc, 0, 0, 0, 0, 1000, 1000);
+  }
+
+  drawText(text, x, y) {
+    this.window.X.PolyText8(this.window.id, this.gc, x, y, [text]);
+  }
+}
+
+// register context
+Drawable.renderingContextFactory['x11'] = (window) => new RenderingContextX11(window);
+
+export default RenderingContextX11;

package/lib/text/font.js

@@ -0,0 +1,196 @@
+import * as fontkit from 'fontkit';
+
+import { flatten, rasterizePath } from '../rasterize.js';
+
+/**
+ * A single font face (one entry of a .ttc collection, or a whole .ttf/.otf),
+ * parsed with fontkit. Wraps everything the text pipeline needs:
+ *
+ * - metrics scaled to a pixel size
+ * - unicode coverage queries (`hasGlyph`)
+ * - shaping (`shape`): OpenType GSUB/GPOS — kerning, ligatures, contextual
+ *   forms for complex scripts — via fontkit's layout engine
+ * - glyph rasterization to a8 bitmaps for XRender upload
+ *
+ * Fonts are cheap-ish to open (tables parse lazily) and are cached by the
+ * FontManager — always obtain them via `app.fonts`.
+ */
+export default class Font {
+  constructor(fkFont, path, postscriptName) {
+    this.fk = fkFont;
+    this.path = path;
+    /** stable cache key for glyph pages and font caches */
+    this.key = `${path}#${postscriptName || fkFont.postscriptName || ''}`;
+  }
+
+  static loadSync(path, postscriptName) {
+    let fk = fontkit.openSync(path);
+    // select the face of a .ttc/.dfont collection (first face by default);
+    // don't pass the name to openSync — for single variable fonts it would
+    // be misread as a named variation instance
+    if (fk.fonts) {
+      fk =
+        (postscriptName && fk.fonts.find((f) => f.postscriptName === postscriptName)) ||
+        fk.fonts[0];
+    }
+    return new Font(fk, path, postscriptName);
+  }
+
+  /**
+   * Open a font from in-memory bytes (no filesystem — works in browser
+   * bundles). `key` becomes the stable cache key; defaults to a key derived
+   * from the font's postscript name.
+   *
+   * @param {Uint8Array|Buffer} data font file bytes
+   * @param {object} [opts] { key, postscriptName (face of a .ttc) }
+   */
+  static fromData(data, { key, postscriptName } = {}) {
+    const buf = Buffer.isBuffer(data)
+      ? data
+      : Buffer.from(data.buffer ?? data, data.byteOffset ?? 0, data.byteLength ?? data.length);
+    let fk = fontkit.create(buf);
+    if (fk.fonts) {
+      fk =
+        (postscriptName && fk.fonts.find((f) => f.postscriptName === postscriptName)) ||
+        fk.fonts[0];
+    }
+    const font = new Font(fk, null, postscriptName);
+    font.key = key ?? `mem:#${fk.postscriptName || ''}`;
+    return font;
+  }
+
+  get familyName() {
+    return this.fk.familyName;
+  }
+
+  get postscriptName() {
+    return this.fk.postscriptName;
+  }
+
+  get unitsPerEm() {
+    return this.fk.unitsPerEm;
+  }
+
+  scale(size) {
+    return size / this.fk.unitsPerEm;
+  }
+
+  /**
+   * Pixel-space metrics for a font size. `ascent`/`capHeight`/`xHeight` are
+   * positive (above baseline), `descent` is positive (below baseline).
+   */
+  metrics(size) {
+    const s = this.scale(size);
+    const ascent = this.fk.ascent * s;
+    const descent = -this.fk.descent * s;
+    const lineGap = this.fk.lineGap * s;
+    return {
+      ascent,
+      descent,
+      lineGap,
+      lineHeight: ascent + descent + lineGap,
+      capHeight: this.fk.capHeight * s,
+      xHeight: this.fk.xHeight * s
+    };
+  }
+
+  hasGlyph(codepoint) {
+    return this.fk.hasGlyphForCodePoint(codepoint);
+  }
+
+  /**
+   * Shape a run of text: returns glyphs with pixel-space positioning.
+   * RTL runs come back in visual (left-to-right drawing) order.
+   *
+   * @param {string} text single-direction, single-font run
+   * @param {number} size pixel size
+   * @param {object} [opts] { direction: 'ltr'|'rtl', features, script, language }
+   * @returns {{font, size, direction, width, glyphs: Array<{id, ax, dx, dy, codePoints}>}}
+   *   ax = advance, dx/dy = drawing offset from pen position (y up = positive dy)
+   */
+  shape(text, size, opts = {}) {
+    const run = this.fk.layout(text, opts.features, opts.script, opts.language, opts.direction);
+    const s = this.scale(size);
+    const glyphs = new Array(run.glyphs.length);
+    let width = 0;
+    for (let i = 0; i < run.glyphs.length; i++) {
+      const pos = run.positions[i];
+      const g = {
+        id: run.glyphs[i].id,
+        ax: pos.xAdvance * s,
+        dx: pos.xOffset * s,
+        dy: pos.yOffset * s,
+        codePoints: run.glyphs[i].codePoints
+      };
+      width += g.ax;
+      glyphs[i] = g;
+    }
+    return { font: this, size, direction: run.direction, width, glyphs };
+  }
+
+  /** nominal (unshaped) advance of a glyph id, in pixels */
+  advanceOf(glyphId, size) {
+    return this.fk.getGlyph(glyphId).advanceWidth * this.scale(size);
+  }
+
+  /** glyph bounding box in pixels relative to the baseline origin, y-down */
+  glyphExtents(glyphId, size) {
+    const s = this.scale(size);
+    const b = this.fk.getGlyph(glyphId).cbox;
+    return { minX: b.minX * s, maxX: b.maxX * s, minY: -b.maxY * s, maxY: -b.minY * s };
+  }
+
+  /**
+   * Rasterize a glyph to an 8-bit alpha bitmap (or null for blank glyphs).
+   * Converts fontkit's y-up font-unit path to the y-down pixel commands the
+   * scanline rasterizer expects. Above 96px supersampling drops from 4x4 to
+   * 2x2 — visually indistinguishable at that size, 4x cheaper to rasterize.
+   */
+  rasterize(glyphId, size) {
+    return rasterizePath(this._pathCommands(glyphId, size), size > 96 ? 2 : 4);
+  }
+
+  /**
+   * Glyph outline as flattened closed polygons in y-down pixel space
+   * relative to the baseline origin — input for the vector (trapezoid)
+   * glyph path. Empty array for blank glyphs.
+   */
+  outline(glyphId, size) {
+    return flatten(this._pathCommands(glyphId, size));
+  }
+
+  /** fontkit y-up font-unit path -> y-down pixel-space M/L/Q/C/Z commands */
+  _pathCommands(glyphId, size) {
+    const s = this.scale(size);
+    const commands = [];
+    for (const c of this.fk.getGlyph(glyphId).path.commands) {
+      const a = c.args;
+      switch (c.command) {
+        case 'moveTo':
+          commands.push({ type: 'M', x: a[0] * s, y: -a[1] * s });
+          break;
+        case 'lineTo':
+          commands.push({ type: 'L', x: a[0] * s, y: -a[1] * s });
+          break;
+        case 'quadraticCurveTo':
+          commands.push({ type: 'Q', x1: a[0] * s, y1: -a[1] * s, x: a[2] * s, y: -a[3] * s });
+          break;
+        case 'bezierCurveTo':
+          commands.push({
+            type: 'C',
+            x1: a[0] * s,
+            y1: -a[1] * s,
+            x2: a[2] * s,
+            y2: -a[3] * s,
+            x: a[4] * s,
+            y: -a[5] * s
+          });
+          break;
+        case 'closePath':
+          commands.push({ type: 'Z' });
+          break;
+      }
+    }
+    return commands;
+  }
+}

package/lib/text/fontmanager.js

@@ -0,0 +1,233 @@
+import Font from './font.js';
+import { defaultFontSource, detectStyle, numericWeight as numWeight } from './fontsource.js';
+import { shapeText } from './shape.js';
+import { TextLayout } from './layout.js';
+
+/**
+ * Font lookup, loading and caching — the entry point of the text API,
+ * available as `app.fonts` (and constructible standalone for headless
+ * measurement/layout: `new FontManager()`).
+ *
+ * - `match(family, {weight, style})` resolves CSS-ish patterns via the
+ *   manager's FontSource (fontconfig/fc-match by default), including
+ *   comma-separated family lists.
+ * - `load(path)` registers a font file (custom/bundled fonts); registered
+ *   families take priority over system lookup.
+ * - Per-codepoint font fallback uses the source's coverage data, so text a
+ *   font can't display automatically borrows glyphs from the best system
+ *   font that can.
+ * - `shape()` and `layout()` are the shaping/layout front doors; see
+ *   docs/text.md.
+ *
+ * All system lookup goes through a pluggable FontSource (see
+ * text/fontsource.js) — pass `{ source }` to use something other than
+ * fontconfig, e.g. a StaticFontSource in a browser bundle.
+ */
+export default class FontManager {
+  constructor({ source } = {}) {
+    this._source = source ?? null; // resolved lazily so the process-wide default can be set late
+    this._fonts = new Map(); // candidate key -> Font
+    this._matches = new Map(); // family|weight|style -> Font
+    this._fallbacks = new Map(); // family|weight|style -> Map(codepoint -> Font|null)
+    this._registered = []; // { font, family (lowercase), weight, italic }
+    this._shapeCache = new Map(); // word-level shaping memo (bounded)
+  }
+
+  /** the FontSource in effect (explicit, else the process-wide default) */
+  get source() {
+    return this._source ?? defaultFontSource();
+  }
+
+  /** open (and cache) a match candidate — see fontsource.js for the shape */
+  _open(candidate) {
+    const key = candidate.key ?? `${candidate.path}#${candidate.postscriptName || ''}`;
+    let font = this._fonts.get(key);
+    if (!font) {
+      if (candidate.font) {
+        font = candidate.font;
+      } else if (candidate.data) {
+        font = Font.fromData(candidate.data, { key, postscriptName: candidate.postscriptName });
+      } else {
+        font = Font.loadSync(candidate.path, candidate.postscriptName);
+      }
+      this._fonts.set(key, font);
+    }
+    return font;
+  }
+
+  /**
+   * Load and register a font. Registered fonts win over system fonts in
+   * `match()` and fallback, keyed by their family name (or an alias).
+   *
+   * @param {string|Uint8Array|Buffer} source path to a .ttf/.otf/.woff/.ttc
+   *   file, or the font file's bytes (environments without a filesystem)
+   * @param {object} [opts] { postscriptName (face of a .ttc), family (alias),
+   *   weight, style } — weight/style override the values detected from the file
+   * @returns {Font}
+   */
+  load(source, opts = {}) {
+    const candidate =
+      typeof source === 'string'
+        ? { path: source, postscriptName: opts.postscriptName }
+        : {
+            data: source,
+            postscriptName: opts.postscriptName,
+            key: `loaded:${this._fonts.size}:${opts.family || opts.postscriptName || ''}`
+          };
+    const font = this._open(candidate);
+    const detected = detectStyle(font);
+    this._registered.push({
+      font,
+      family: (opts.family || font.familyName || '').toLowerCase(),
+      weight: opts.weight !== undefined ? numWeight(opts.weight) : detected.weight,
+      italic: opts.style !== undefined ? opts.style.includes('italic') : detected.italic
+    });
+    this._matches.clear();
+    this._fallbacks.clear();
+    return font;
+  }
+
+  _matchRegistered(families, weight, italic) {
+    let best = null;
+    let bestScore = Infinity;
+    for (const family of families) {
+      for (const r of this._registered) {
+        if (r.family !== family) continue;
+        const score = Math.abs(r.weight - weight) + (r.italic !== italic ? 1000 : 0);
+        if (score < bestScore) {
+          bestScore = score;
+          best = r.font;
+        }
+      }
+      if (best) return best; // earlier families in the list win
+    }
+    return null;
+  }
+
+  /**
+   * Resolve a family (or CSS-style comma-separated family list) to a Font.
+   * Registered fonts are consulted first, then fontconfig.
+   *
+   * @param {string} family e.g. `'Ubuntu Mono', monospace`
+   * @param {object} [opts] { weight: 400|'bold'|…, style: 'normal'|'italic' }
+   */
+  match(family = 'sans-serif', opts = {}) {
+    const weight = numWeight(opts.weight);
+    const italic = !!(opts.style && opts.style.includes('italic'));
+    const cacheKey = `${family}|${weight}|${italic}`;
+    let font = this._matches.get(cacheKey);
+    if (font) return font;
+
+    const families = String(family)
+      .split(',')
+      .map((f) => f.trim().replace(/^["']|["']$/g, ''))
+      .filter(Boolean);
+
+    font = this._matchRegistered(
+      families.map((f) => f.toLowerCase()),
+      weight,
+      italic
+    );
+    if (!font) {
+      // sources understand comma-separated family lists natively
+      const candidates = this.source.matchSorted({
+        family: families.join(','),
+        weight,
+        style: italic ? 'italic' : 'normal'
+      });
+      font = this._open(candidates[0]);
+    }
+    this._matches.set(cacheKey, font);
+    return font;
+  }
+
+  /**
+   * Find a font that has a glyph for `codepoint`, for use when the primary
+   * font doesn't. Registered fonts first, then the source's fallback chain
+   * (filtered by the source's coverage data — font files are only opened to
+   * confirm). Returns null when nothing on the system covers the codepoint.
+   */
+  fallbackFor(codepoint, family = 'sans-serif', opts = {}) {
+    const cacheKey = `${family}|${numWeight(opts.weight)}|${opts.style || ''}`;
+    let perCp = this._fallbacks.get(cacheKey);
+    if (!perCp) {
+      perCp = new Map();
+      this._fallbacks.set(cacheKey, perCp);
+    }
+    if (perCp.has(codepoint)) return perCp.get(codepoint);
+
+    let found = null;
+    for (const r of this._registered) {
+      if (r.font.hasGlyph(codepoint)) {
+        found = r.font;
+        break;
+      }
+    }
+    if (!found) {
+      const source = this.source;
+      const candidates = source.matchSorted({ family, weight: opts.weight, style: opts.style });
+      for (const c of candidates) {
+        if (source.covers && !source.covers(c, codepoint)) continue;
+        try {
+          const font = this._open(c);
+          if (font.hasGlyph(codepoint)) {
+            found = font;
+            break;
+          }
+        } catch {
+          // unparseable candidate — try the next one
+        }
+      }
+    }
+    perCp.set(codepoint, found);
+    return found;
+  }
+
+  /**
+   * Shape text through the full pipeline (bidi → font fallback → OpenType
+   * shaping). See shape.js for the run format.
+   *
+   * @param {string} text
+   * @param {object} style { font | family/weight/style, size, features,
+   *   language, direction }
+   */
+  shape(text, style) {
+    return shapeText(this, text, style);
+  }
+
+  /**
+   * Lay text out into lines for a target container width.
+   *
+   * @param {string|Array} content plain string or spans
+   *   [{ text, ...style overrides, color }]
+   * @param {object} style base style ({ family, size, weight, … })
+   * @param {object} options { maxWidth, align, lineHeight, direction }
+   * @returns {TextLayout}
+   */
+  layout(content, style, options) {
+    return new TextLayout(this, content, style, options);
+  }
+
+  /**
+   * Memoized shaping used by TextLayout (bounded cache). `levelsKey` is a
+   * compact embedding-levels encoding: a single number when uniform for the
+   * whole fragment (the common case), else comma-separated per-char levels.
+   */
+  _shapeCached(text, style, levelsKey = '0') {
+    const font = style.font;
+    const key = `${font ? font.key : style.family}|${style.size}|${style.weight}|${style.style}|${levelsKey}|${text}`;
+    let shaped = this._shapeCache.get(key);
+    if (!shaped) {
+      let levels;
+      if (levelsKey.includes(',')) {
+        levels = levelsKey.split(',').map(Number);
+      } else {
+        levels = new Uint8Array(text.length).fill(Number(levelsKey));
+      }
+      shaped = shapeText(this, text, style, levels);
+      if (this._shapeCache.size > 4000) this._shapeCache.clear();
+      this._shapeCache.set(key, shaped);
+    }
+    return shaped;
+  }
+}