ntk 8.25.0 → 8.26.0

package/lib/widgets/svgview.js

@@ -179,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
@@ -190,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());
@@ -212,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;
 }
@@ -254,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 };
 
@@ -704,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;
@@ -782,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;
@@ -897,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);
@@ -925,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();
     }
   }
@@ -1152,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
@@ -1191,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;
       }
@@ -1209,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
@@ -1245,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
@@ -1534,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 = [];
@@ -1548,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);
@@ -1745,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)));
         }
@@ -1780,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;
@@ -1831,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.25.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",