ntk 8.17.6 → 8.17.7

package/lib/text/fontmanager.js

@@ -1,3 +1,4 @@
+import { weightRank } from '../fontconfig.js';
 import Font from './font.js';
 import {
   createFontSource,
@@ -227,7 +228,7 @@ export default class FontManager {
     this._matches = new Map(); // family|weight|style -> Font
     this._lastMatch = null; // the last of them asked for (`match`)
     this._fallbacks = new Map(); // family|weight|style -> Map(codepoint -> Font|null)
-    this._registered = []; // { font, family (lowercase), weight, italic }
+    this._registered = []; // { font, family (lowercase), weight: [lo, hi], italic }
     // word-level shaping memo, in two generations (`_shapeCached`): each a
     // map from a style's key to the words shaped in it
     this._shapeCache = new Map();
@@ -319,7 +320,9 @@ export default class FontManager {
    * @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
+   *   weight, style } — weight/style override the values detected from the
+   *   file. A `weight` is the face's, as @font-face's descriptor is; without
+   *   one a variable face holds every weight on its `wght` axis.
    * @returns {Font}
    */
   load(source, opts = {}) {
@@ -333,10 +336,12 @@ export default class FontManager {
           };
     const font = this._open(candidate);
     const detected = detectStyle(font);
+    const axis = font.variationAxes.wght;
+    const weight = opts.weight !== undefined ? numWeight(opts.weight) : detected.weight;
     this._registered.push({
       font,
       family: (opts.family || font.familyName || '').toLowerCase(),
-      weight: opts.weight !== undefined ? numWeight(opts.weight) : detected.weight,
+      weight: axis && opts.weight === undefined ? [axis.min, axis.max] : [weight, weight],
       italic: typeof opts.style === 'string' ? opts.style.includes('italic') : detected.italic
     });
     this._matches.clear();
@@ -347,16 +352,26 @@ export default class FontManager {
     return font;
   }
 
+  /**
+   * The registered face of the first of `families` to have one, as the
+   * sources pick: the style asked for, then the weight CSS's font matching
+   * picks (CSS Fonts 4 §5.2) — up to 500 and then lighter for 400 to 500,
+   * lighter first below 400, heavier first above 500 — and of faces alike in
+   * both, the one loaded first.
+   */
   _matchRegistered(families, weight, italic) {
-    let best = null;
-    let bestScore = Infinity;
     for (const family of families) {
+      let best = null;
+      let bestStyle = Infinity;
+      let bestWeight = Infinity;
       for (const r of this._registered) {
         if (r.family !== family || !r.font.drawable) continue;
-        const score = Math.abs(r.weight - weight) + (r.italic !== italic ? 1000 : 0);
-        if (score < bestScore) {
-          bestScore = score;
+        const style = r.italic !== italic ? 1 : 0;
+        const rank = weightRank(weight, r.weight, 400, 500);
+        if (style < bestStyle || (style === bestStyle && rank < bestWeight)) {
           best = r.font;
+          bestStyle = style;
+          bestWeight = rank;
         }
       }
       if (best) return best; // earlier families in the list win

package/lib/widgets/svgview.js

@@ -15,10 +15,10 @@
 //   view.draw(ctx, x, y, width, height);
 //
 // Supported: path/rect/circle/ellipse/line/polyline/polygon, <g>, <defs>,
-// <use>, linear/radial gradients (objectBoundingBox and userSpaceOnUse),
-// transform lists, opacity/fill-opacity/stroke-opacity, display, visibility,
-// nested <svg> viewports, fill-rule, basic <text>. See docs/svg.md for the
-// full surface and limitations.
+// <use>, <switch>, linear/radial gradients (objectBoundingBox and
+// userSpaceOnUse), transform lists, opacity/fill-opacity/stroke-opacity,
+// display, visibility, nested <svg> viewports, fill-rule, basic <text>. See
+// docs/svg.md for the full surface and limitations.
 
 import { textContent } from 'domutils';
 import { parseDocument } from 'htmlparser2';
@@ -114,6 +114,79 @@ function displayNone(node) {
   return ownProperty(node, 'display', keyword) === 'none';
 }
 
+// SVG 1.1 features whose elements SvgView draws nothing of: a branch of a
+// <switch> that needs one would come out empty or wrong here, so the
+// author's fallback is what to draw instead
+const UNDRAWN_FEATURES = new Set(
+  [
+    'Extensibility', 'Image', 'Clip', 'BasicClip', 'Mask', 'Filter', 'BasicFilter',
+    'Pattern', 'Marker', 'Font', 'BasicFont', 'Script', 'Animation', 'ColorProfile',
+    'Cursor', 'View'
+  ].map((name) => `http://www.w3.org/TR/SVG11/feature#${name}`)
+);
+
+let defaultLanguages = null;
+
+/**
+ * The languages a document's `systemLanguage` is matched against where the
+ * caller names none: the browser's, or the locale the runtime runs in, each
+ * followed by its language alone — `en-AU`, then `en` — as a browser's
+ * language settings suggest (SVG 1.1, 5.8.5). Worked out once.
+ */
+function userLanguages() {
+  if (defaultLanguages) return defaultLanguages;
+  const nav = globalThis.navigator?.languages;
+  const tags = nav?.length ? [...nav] : [new Intl.DateTimeFormat().resolvedOptions().locale];
+  const out = [];
+  for (const t of tags) {
+    for (const v of [t, t.split('-')[0]]) {
+      const lower = v.toLowerCase();
+      if (lower && !out.includes(lower)) out.push(lower);
+    }
+  }
+  return (defaultLanguages = out);
+}
+
+/**
+ * Whether an element's conditional processing attributes hold (SVG 1.1,
+ * 5.8): where one does not, the element and all of it are not rendered, and
+ * a `<switch>` passes over it to the next. One it does not carry holds.
+ *
+ * - `requiredExtensions` never holds, as SvgView supports no extension; an
+ *   empty one does not either.
+ * - `requiredFeatures` holds unless it names a feature SvgView draws nothing
+ *   of. SVG 2 dropped the attribute and browsers hold every one, but the
+ *   one they would pick, a `foreignObject`, draws nothing here, and the
+ *   `<text>` an exporter writes after it for renderers like this one does.
+ * - `systemLanguage` holds where one of its comma-separated tags is one of
+ *   `languages`, or that narrowed by a subtag, or the other way round.
+ */
+function conditionsHold(node, languages) {
+  if (!node.attribs) return true;
+  if (attr(node, 'requiredExtensions') !== undefined) return false;
+  const features = attr(node, 'requiredFeatures');
+  if (features !== undefined && features.split(/\s+/).some((f) => UNDRAWN_FEATURES.has(f))) return false;
+  const system = attr(node, 'systemLanguage');
+  if (system !== undefined) {
+    const tags = system.split(',').map((t) => t.trim().toLowerCase());
+    const matches = (t, u) => t === u || t.startsWith(`${u}-`) || u.startsWith(`${t}-`);
+    if (!tags.some((t) => t && languages.some((u) => matches(t, u)))) return false;
+  }
+  return true;
+}
+
+/**
+ * What a `<switch>` renders: its first child element whose conditions hold
+ * (SVG 1.1, 5.8.2), whatever that is — a `display: none` one is chosen, and
+ * draws nothing — or null where none does.
+ */
+function switchChoice(node, languages) {
+  for (const child of node.children || []) {
+    if (child.type === 'tag' && conditionsHold(child, languages)) return child;
+  }
+  return null;
+}
+
 /**
  * An `<alpha-value>` — `opacity`, `fill-opacity`, `stroke-opacity`: a number
  * or a percentage, clamped to 0..1 (CSS Color 4, 5.2). `undefined` for
@@ -369,7 +442,7 @@ function resolveStyle(node, parent) {
  *   paint a `mono` document uses — a colour, or the literal `'currentColor'`
  *   when the document defers to its caller — and null when nothing paints.
  */
-function scanPaints(root, ids) {
+function scanPaints(root, ids, languages) {
   const paints = new Set();
   let multi = false;
 
@@ -388,7 +461,7 @@ function scanPaints(root, ids) {
   const visit = (node, parent, depth) => {
     if (multi || depth > 32) return;
     const name = tag(node);
-    if (NON_RENDERED.has(name) || displayNone(node)) return;
+    if (NON_RENDERED.has(name) || displayNone(node) || !conditionsHold(node, languages)) return;
     const style = resolveStyle(node, parent);
     switch (name) {
       case 'svg':
@@ -396,6 +469,11 @@ function scanPaints(root, ids) {
       case 'a':
         kids(node, style, depth);
         return;
+      case 'switch': {
+        const chosen = switchChoice(node, languages);
+        if (chosen) visit(chosen, style, depth + 1);
+        return;
+      }
       case 'use': {
         const href = node.attribs?.href || node.attribs?.['xlink:href'] || '';
         const target = href.startsWith('#') ? ids.get(href.slice(1)) : null;
@@ -438,6 +516,12 @@ export default class SvgView {
      * overrides it; both fall back to the CSS initial value, black.
      */
     this.color = opts.color ?? INHERITED.color;
+    /**
+     * The languages `systemLanguage` is matched against, most preferred
+     * first, like `navigator.languages`. Read when a document is adopted, for
+     * `paintKind`, and on every draw.
+     */
+    this.languages = (opts.languages ?? userLanguages()).map((t) => String(t).toLowerCase());
 
     this._root = null;
     this._ids = new Map();
@@ -494,7 +578,7 @@ export default class SvgView {
     };
     collect(this._root);
 
-    const scanned = scanPaints(this._root, this._ids);
+    const scanned = scanPaints(this._root, this._ids, this.languages);
     this.paintKind = scanned.kind;
     this.soloPaint = scanned.solo;
 
@@ -738,7 +822,7 @@ export default class SvgView {
   _renderNode(node, ctx, parentStyle, alpha, depth) {
     if (depth > 32) return;
     const name = tag(node);
-    if (NON_RENDERED.has(name) || displayNone(node)) return;
+    if (NON_RENDERED.has(name) || displayNone(node) || !conditionsHold(node, this.languages)) return;
 
     const style = this._style(node, parentStyle);
     // not inherited: a group's multiplies down through what is in it
@@ -760,6 +844,13 @@ export default class SvgView {
       case 'a':
         this._renderChildren(node, ctx, style, nodeAlpha, depth + 1);
         break;
+      case 'switch': {
+        // a group of one: its transform and opacity are a group's, and it
+        // draws the first child whose conditions hold and none of the rest
+        const chosen = switchChoice(node, this.languages);
+        if (chosen) this._renderNode(chosen, ctx, style, nodeAlpha, depth + 1);
+        break;
+      }
       case 'use': {
         const href = node.attribs?.href || node.attribs?.['xlink:href'] || '';
         const target = href.startsWith('#') ? this._ids.get(href.slice(1)) : null;

package/package.json

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