ntk 8.24.0 → 8.26.0

package/lib/widgets/svgview.js

@@ -33,6 +33,8 @@ const INHERITED = {
   lineCap: 'butt',
   lineJoin: 'miter',
   miterLimit: 4,
+  dashArray: 'none',
+  dashOffset: 0,
   fillRule: 'nonzero',
   clipRule: 'nonzero',
   fillOpacity: 1,
@@ -61,6 +63,8 @@ const STYLE_ATTRS = {
   'stroke-linecap': 'lineCap',
   'stroke-linejoin': 'lineJoin',
   'stroke-miterlimit': 'miterLimit',
+  'stroke-dasharray': 'dashArray',
+  'stroke-dashoffset': 'dashOffset',
   'fill-rule': 'fillRule',
   'clip-rule': 'clipRule',
   'fill-opacity': 'fillOpacity',
@@ -175,6 +179,8 @@ function userLanguages() {
   return (defaultLanguages = out);
 }
 
+const EXTENSIBILITY = 'http://www.w3.org/TR/SVG11/feature#Extensibility';
+
 /**
  * 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
@@ -186,14 +192,21 @@ function userLanguages() {
  *   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.
+ *   `extensible` is whether a `foreignObject` is drawn — the draw was handed
+ *   `opts.foreignObject` — and then `#Extensibility` holds.
  * - `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) {
+function conditionsHold(node, languages, extensible = false) {
   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;
+  if (
+    features !== undefined &&
+    features.split(/\s+/).some((f) => UNDRAWN_FEATURES.has(f) && !(extensible && f === EXTENSIBILITY))
+  ) {
+    return false;
+  }
   const system = attr(node, 'systemLanguage');
   if (system !== undefined) {
     const tags = system.split(',').map((t) => t.trim().toLowerCase());
@@ -208,9 +221,9 @@ function conditionsHold(node, languages) {
  * (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) {
+function switchChoice(node, languages, extensible = false) {
   for (const child of node.children || []) {
-    if (child.type === 'tag' && conditionsHold(child, languages)) return child;
+    if (child.type === 'tag' && conditionsHold(child, languages, extensible)) return child;
   }
   return null;
 }
@@ -250,6 +263,24 @@ function viewportLength(node, name, size, fallback) {
   return v.endsWith('%') ? (n / 100) * size : n;
 }
 
+/**
+ * Where a `<foreignObject>` is in the user space it is drawn in (SVG 2,
+ * 23.2): its `x` and `y`, 0 where unset, and its `width` and `height`, 0
+ * where unset or `auto` — which draws nothing — each a length or a
+ * percentage of the viewport, `[width, height]`. A negative size is as
+ * none. Its bounding box, which `objectBoundingBox` units are of.
+ */
+function foreignBox(node, [pw, ph]) {
+  const width = viewportLength(node, 'width', pw, 0);
+  const height = viewportLength(node, 'height', ph, 0);
+  return {
+    x: viewportLength(node, 'x', pw, 0),
+    y: viewportLength(node, 'y', ph, 0),
+    width: width > 0 ? width : 0,
+    height: height > 0 ? height : 0
+  };
+}
+
 const ALIGN = /^x(Min|Mid|Max)Y(Min|Mid|Max)$/;
 const ALONG = { Min: 0, Mid: 0.5, Max: 1 };
 
@@ -578,6 +609,12 @@ function resolveStyle(node, parent) {
         case 'textAnchor':
           value = v.toLowerCase();
           break;
+        case 'dashArray':
+          value = dashArrayValue(v);
+          break;
+        case 'dashOffset':
+          value = dashLength(v, true) ?? undefined;
+          break;
         case 'markerStart':
         case 'markerMid':
         case 'markerEnd':
@@ -596,6 +633,42 @@ function resolveStyle(node, parent) {
   return style;
 }
 
+/**
+ * A length in a dash pattern or its offset, in user units: a number, or one
+ * in `px` (SVG 2, 13.5.6). A percentage of the viewport's diagonal, or a
+ * length in another unit, is none this reads. A negative one is an error in
+ * a pattern, and fine in an offset (`signed`).
+ */
+function dashLength(value, signed = false) {
+  const m = /^([-+]?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?)(px)?$/i.exec(value.trim());
+  if (!m) return null;
+  const n = Number(m[1]);
+  if (!Number.isFinite(n) || (!signed && n < 0)) return null;
+  return n;
+}
+
+/**
+ * `stroke-dasharray` as `setLineDash` takes it (SVG 2, 13.5.5): `none`, or
+ * its lengths, split on commas and white space. One that is not a length,
+ * or is negative, makes the value an error, which leaves the property as it
+ * was (undefined); lengths that come to nothing draw the stroke solid, as
+ * `none` does. An odd count is repeated by `setLineDash`, as the property
+ * has it.
+ */
+function dashArrayValue(value) {
+  const v = value.trim();
+  if (v.toLowerCase() === 'none') return 'none';
+  const parts = v.split(/[\s,]+/).filter(Boolean);
+  if (!parts.length) return undefined;
+  const out = [];
+  for (const part of parts) {
+    const n = dashLength(part);
+    if (n === null) return undefined;
+    out.push(n);
+  }
+  return out.some((n) => n > 0) ? out : 'none';
+}
+
 /**
  * How many distinct colours a document actually commits to, decided once at
  * parse time.
@@ -658,6 +731,10 @@ function scanPaints(root, ids, languages) {
         if (chosen) visit(chosen, style, depth + 1);
         return;
       }
+      case 'foreignobject':
+        // it paints nothing of its own: what is in it is the caller's to
+        // draw (`opts.foreignObject`), in the caller's colours
+        return;
       case 'use': {
         const href = node.attribs?.href || node.attribs?.['xlink:href'] || '';
         const target = href.startsWith('#') ? ids.get(href.slice(1)) : null;
@@ -736,6 +813,10 @@ export default class SvgView {
     this._root = null;
     this._ids = new Map();
     this._viewport = [0, 0];
+    /** what draws a `<foreignObject>` in this draw (`opts.foreignObject`),
+     * and whether there is one, which `#Extensibility` holds where */
+    this._foreignObject = null;
+    this._extensible = false;
     this.naturalWidth = 0;
     this.naturalHeight = 0;
     this.viewBox = null;
@@ -851,9 +932,23 @@ export default class SvgView {
    * user units: an inline `<svg>` takes its font from the page around it,
    * as it does in a browser, where on its own it starts from 16px
    * sans-serif.
+   *
+   * `opts.foreignObject(element, ctx, box)` draws what a `<foreignObject>`
+   * holds, which is the caller's — HTML, in a host document's inline
+   * `<svg>` — where the drawing reaches the object in its order: over what
+   * is drawn before it and under what is drawn after. `ctx` is in the
+   * object's user space, its `transform` and every one around it in force
+   * and cut to the `clip-path` on it and on what it is in, its `globalAlpha`
+   * what the opacities down to it come to. `box` is `{ x, y, width, height,
+   * opacity }`: where the object is in that space, its bounding box, and
+   * that opacity. The context is restored after it. A hidden object, or one
+   * of no width or height, is not handed over; and where it is given,
+   * `#Extensibility` holds in a `requiredFeatures`.
    */
   draw(ctx, x = 0, y = 0, w = this.naturalWidth, h = this.naturalHeight, opts = {}) {
     if (!this._root) return;
+    this._foreignObject = typeof opts.foreignObject === 'function' ? opts.foreignObject : null;
+    this._extensible = this._foreignObject !== null;
     // what a masked element's surface is made with, and where it can show
     this._surface = opts.surface ?? surfaceMaker(ctx) ?? surfaceMaker(this._ctx);
     this._bounds = deviceBox(ctx, x, y, w, h);
@@ -879,6 +974,8 @@ export default class SvgView {
       this._renderChildren(this._root, ctx, this._style(this._root, this._initial), 1, 0);
     } finally {
       this._surface = null;
+      this._foreignObject = null;
+      this._extensible = false;
       ctx.restore();
     }
   }
@@ -1106,7 +1203,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) || !conditionsHold(node, this.languages)) return;
+    if (NON_RENDERED.has(name) || displayNone(node) || !conditionsHold(node, this.languages, this._extensible)) return;
 
     const style = this._style(node, parentStyle);
     // not inherited: a group's multiplies down through what is in it
@@ -1145,7 +1242,7 @@ export default class SvgView {
       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);
+        const chosen = switchChoice(node, this.languages, this._extensible);
         if (chosen) this._renderNode(chosen, ctx, style, nodeAlpha, depth + 1);
         break;
       }
@@ -1163,6 +1260,9 @@ export default class SvgView {
         // `<text>` may be shown again
         this._renderText(node, ctx, style, nodeAlpha);
         break;
+      case 'foreignobject':
+        this._renderForeign(node, ctx, style, nodeAlpha);
+        break;
       default: {
         // `visibility` hides what an element paints itself, and is
         // inherited: a group walks on, since what is in it may say
@@ -1179,7 +1279,17 @@ export default class SvgView {
           ctx.lineCap = style.lineCap;
           ctx.lineJoin = style.lineJoin;
           ctx.miterLimit = style.miterLimit;
+          // dashed where it says so, and nothing after it is
+          const dashed = style.dashArray !== 'none' && typeof ctx.setLineDash === 'function';
+          if (dashed) {
+            ctx.setLineDash(style.dashArray);
+            ctx.lineDashOffset = style.dashOffset;
+          }
           this._ink(ctx, 'stroke', style.stroke, style, path, nodeAlpha * style.strokeOpacity, () => ctx.stroke(path));
+          if (dashed) {
+            ctx.setLineDash([]);
+            ctx.lineDashOffset = 0;
+          }
         }
         ctx.globalAlpha = 1;
         // over its fill and its stroke, which is the default paint order
@@ -1189,6 +1299,26 @@ export default class SvgView {
     }
   }
 
+  /**
+   * A `<foreignObject>` (SVG 2, 23.2), handed to `opts.foreignObject` to
+   * draw what it holds, in its user space and at its opacity — the caller's
+   * own drawing, so the context is put back as it was after it, whatever
+   * it set. Nothing is drawn of one where the draw was handed none.
+   */
+  _renderForeign(node, ctx, style, alpha) {
+    const draw = this._foreignObject;
+    if (!draw || style.visibility !== 'visible') return;
+    const box = foreignBox(node, this._viewport);
+    if (!(box.width > 0 && box.height > 0)) return;
+    ctx.save();
+    try {
+      ctx.globalAlpha = alpha;
+      draw(node, ctx, { ...box, opacity: alpha });
+    } finally {
+      ctx.restore();
+    }
+  }
+
   /**
    * The markers a shape's `marker-start`, `marker-mid` and `marker-end`
    * name, drawn at its vertices (SVG 2, 11.6): the first vertex of the
@@ -1478,7 +1608,7 @@ export default class SvgView {
    * or that is not visible.
    */
   _clipPart(child, inherited, base, ctx, depth, nest) {
-    if (!CLIPPING.has(tag(child)) || displayNone(child) || !conditionsHold(child, this.languages)) return null;
+    if (!CLIPPING.has(tag(child)) || displayNone(child) || !conditionsHold(child, this.languages, this._extensible)) return null;
     let style = this._style(child, inherited);
     let m = matMultiply(base, matrixOf(ownTransforms(child)));
     const clips = [];
@@ -1492,7 +1622,7 @@ export default class SvgView {
     if (tag(child) === 'use') {
       shape = this._useTarget(child);
       if (!shape || tag(shape) === 'use' || !CLIPPING.has(tag(shape))) return null;
-      if (displayNone(shape) || !conditionsHold(shape, this.languages)) return null;
+      if (displayNone(shape) || !conditionsHold(shape, this.languages, this._extensible)) return null;
       style = this._style(shape, style);
       m = matMultiply(m, matrixOf(ownTransforms(shape)));
       cutBy(shape, style, m);
@@ -1689,11 +1819,11 @@ export default class SvgView {
       case 'g':
       case 'a':
       case 'switch': {
-        const kids = name === 'switch' ? [switchChoice(node, this.languages)] : node.children || [];
+        const kids = name === 'switch' ? [switchChoice(node, this.languages, this._extensible)] : node.children || [];
         let box = null;
         for (const child of kids) {
           if (!child || child.type !== 'tag') continue;
-          if (NON_RENDERED.has(tag(child)) || displayNone(child) || !conditionsHold(child, this.languages)) continue;
+          if (NON_RENDERED.has(tag(child)) || displayNone(child) || !conditionsHold(child, this.languages, this._extensible)) continue;
           const inner = this._bbox(child, ctx, this._style(child, style), depth + 1);
           if (inner) box = unionBox(box, transformedBox(inner, ownTransforms(child)));
         }
@@ -1724,6 +1854,11 @@ export default class SvgView {
           ctx.restore();
         }
       }
+      case 'foreignobject': {
+        // its rectangle, whether or not anything draws what is in it
+        const { x, y, width, height } = foreignBox(node, this._viewport);
+        return { x, y, w: width, h: height };
+      }
       default: {
         const path = shapePath(node);
         return path ? pathBBox(path) : null;
@@ -1775,7 +1910,7 @@ export default class SvgView {
           } else if (child.type === 'cdata') {
             walk(child.children);
           } else if (child.type === 'tag' && depth < 32) {
-            if (!TEXT_SPANS.has(tag(child)) || displayNone(child) || !conditionsHold(child, this.languages)) continue;
+            if (!TEXT_SPANS.has(tag(child)) || displayNone(child) || !conditionsHold(child, this.languages, this._extensible)) continue;
             const ca = a * (ownProperty(child, 'opacity', alphaValue) ?? 1);
             collect(child, this._style(child, st), ca, depth + 1);
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ntk",
-  "version": "8.24.0",
+  "version": "8.26.0",
   "description": "Desktop UI toolkit for X11 with canvas-like 2d and OpenGL rendering",
   "author": "Andrey Sidorov <sidorares@yandex.ru>",
   "license": "MIT",
@@ -68,7 +68,7 @@
     "x11-dri": ">=0.5.0 <1"
   },
   "scripts": {
-    "test": "NTK_STRICT_COLORS=1 node --test",
+    "test": "NTK_STRICT_COLORS=1 node --import ./test/helpers/exit-watchdog.js --test",
     "check-release-message": "node scripts/check-release-message.mjs"
   },
   "devDependencies": {