ntk 8.17.3 → 8.17.5

package/lib/widgets/svgview.js

@@ -16,8 +16,9 @@
 //
 // Supported: path/rect/circle/ellipse/line/polyline/polygon, <g>, <defs>,
 // <use>, linear/radial gradients (objectBoundingBox and userSpaceOnUse),
-// transform lists, opacity/fill-opacity/stroke-opacity, fill-rule, basic
-// <text>. See docs/svg.md for the full surface and limitations.
+// 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';
@@ -37,7 +38,8 @@ const INHERITED = {
   color: '#000',
   fontFamily: 'sans-serif',
   fontSize: 16,
-  textAnchor: 'start'
+  textAnchor: 'start',
+  visibility: 'visible'
 };
 
 const STYLE_ATTRS = {
@@ -53,10 +55,13 @@ const STYLE_ATTRS = {
   color: 'color',
   'font-family': 'fontFamily',
   'font-size': 'fontSize',
-  'text-anchor': 'textAnchor'
+  'text-anchor': 'textAnchor',
+  visibility: 'visibility'
 };
 
-const NUMERIC = new Set(['strokeWidth', 'miterLimit', 'fillOpacity', 'strokeOpacity', 'fontSize']);
+const NUMERIC = new Set(['strokeWidth', 'miterLimit', 'fontSize']);
+const ALPHA = new Set(['fillOpacity', 'strokeOpacity']);
+const VISIBILITY = new Set(['visible', 'hidden', 'collapse']);
 
 // documents may come from an XML parse (setSvg: exact case) or from an HTML
 // parse (inline <svg>: tag/attribute names lowercased) — compare
@@ -76,6 +81,27 @@ function attrNum(node, name, fallback = 0) {
   return Number.isFinite(n) ? n : fallback;
 }
 
+/**
+ * A property that is not inherited, as an element sets it itself: in its
+ * `style`, the last declaration of it there that `read` makes something
+ * of, or else by its presentation attribute — the order `resolveStyle`
+ * applies the inherited ones in. `undefined` where it sets it neither way.
+ */
+function ownProperty(node, name, read) {
+  const raw = attr(node, name);
+  let v = raw === undefined ? undefined : read(raw);
+  const style = node.attribs?.style;
+  if (style && style.includes(name)) {
+    for (const decl of style.split(';')) {
+      const idx = decl.indexOf(':');
+      if (idx > 0 && decl.slice(0, idx).trim() === name) v = read(decl.slice(idx + 1)) ?? v;
+    }
+  }
+  return v;
+}
+
+const keyword = (raw) => String(raw).trim().toLowerCase() || undefined;
+
 /**
  * Whether an element is `display: none`, by its attribute or in its
  * `style`, which wins. Such an element is not rendered, and nor is anything
@@ -85,15 +111,67 @@ function attrNum(node, name, fallback = 0) {
  * around shapes it marks `display="inline"`.
  */
 function displayNone(node) {
-  let v = attr(node, 'display');
-  const style = node.attribs?.style;
-  if (style && style.includes('display')) {
-    for (const decl of style.split(';')) {
-      const idx = decl.indexOf(':');
-      if (idx > 0 && decl.slice(0, idx).trim() === 'display') v = decl.slice(idx + 1);
-    }
-  }
-  return v !== undefined && String(v).trim().toLowerCase() === 'none';
+  return ownProperty(node, 'display', keyword) === 'none';
+}
+
+/**
+ * An `<alpha-value>` — `opacity`, `fill-opacity`, `stroke-opacity`: a number
+ * or a percentage, clamped to 0..1 (CSS Color 4, 5.2). `undefined` for
+ * anything else, so the caller keeps what it had.
+ */
+function alphaValue(raw) {
+  const v = String(raw ?? '').trim();
+  let n = parseFloat(v);
+  if (!Number.isFinite(n)) return undefined;
+  if (v.endsWith('%')) n /= 100;
+  return Math.min(1, Math.max(0, n));
+}
+
+/** A `viewBox` as `[minX, minY, width, height]`, or null where it has none. */
+function parseViewBox(node) {
+  const vb = (attr(node, 'viewBox') || '')
+    .split(/[\s,]+/)
+    .filter((s) => s !== '')
+    .map(parseFloat);
+  return vb.length === 4 && vb.every(Number.isFinite) ? vb : null;
+}
+
+/**
+ * A length on a viewport-establishing element — `x`, `y`, `width`, `height`
+ * — in the user units of the viewport it sits in, `size` along its axis;
+ * a percentage is of that. `auto` and a missing or unreadable value are the
+ * `fallback`.
+ */
+function viewportLength(node, name, size, fallback) {
+  const v = String(attr(node, name) ?? '').trim();
+  const n = parseFloat(v);
+  if (!Number.isFinite(n)) return fallback;
+  return v.endsWith('%') ? (n / 100) * size : n;
+}
+
+const ALIGN = /^x(Min|Mid|Max)Y(Min|Mid|Max)$/;
+const ALONG = { Min: 0, Mid: 0.5, Max: 1 };
+
+/**
+ * The transform that fits a `viewBox` into a viewport `w` by `h` at `x`,`y`,
+ * as `preserveAspectRatio` asks (SVG 2, 8.8): scaled evenly to fit inside
+ * (`meet`, the default) or to cover it (`slice`), and set where its
+ * alignment says, `xMidYMid` by default; or stretched to it for `none`.
+ *
+ * @returns {[number, number, number, number]} `[sx, sy, tx, ty]`
+ */
+function viewBoxFit([minX, minY, vbW, vbH], x, y, w, h, par) {
+  const words = String(par || '').trim().split(/\s+/);
+  if (words[0] === 'defer') words.shift();
+  const [align, meetOrSlice] = words;
+  let sx = w / vbW;
+  let sy = h / vbH;
+  if (align === 'none') return [sx, sy, x - minX * sx, y - minY * sy];
+  // a value it cannot read is the default as a whole, xMidYMid meet
+  const m = ALIGN.exec(align || '');
+  const [fx, fy] = m ? [ALONG[m[1]], ALONG[m[2]]] : [0.5, 0.5];
+  sx = sy = m && meetOrSlice === 'slice' ? Math.max(sx, sy) : Math.min(sx, sy);
+  return [sx, sy, x - minX * sx + (w - vbW * sx) * fx, y - minY * sy + (h - vbH * sy) * fy];
 }
 
 const NON_RENDERED = new Set([
@@ -222,6 +300,45 @@ function pathBBox(path) {
   return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
 }
 
+/**
+ * The inherited properties an element ends up with: its parent's, where
+ * the element sets them neither by presentation attribute nor in its inline
+ * `style`, which wins over the attribute. A value it cannot read is dropped,
+ * as CSS drops an invalid declaration. Returns `parent` itself where
+ * nothing changes.
+ */
+function resolveStyle(node, parent) {
+  let style = parent;
+  const own = () => (style === parent ? (style = { ...parent }) : style);
+  const apply = (name, raw) => {
+    const key = STYLE_ATTRS[name];
+    if (!key || raw === undefined || raw === '' || raw === 'inherit') return;
+    const v = String(raw).trim();
+    if (NUMERIC.has(key)) {
+      const n = parseFloat(v);
+      if (!Number.isFinite(n)) return;
+      own()[key] = n;
+    } else if (ALPHA.has(key)) {
+      const n = alphaValue(v);
+      if (n === undefined) return;
+      own()[key] = n;
+    } else if (key === 'visibility') {
+      const k = v.toLowerCase();
+      if (!VISIBILITY.has(k)) return;
+      own()[key] = k;
+    } else {
+      own()[key] = v;
+    }
+  };
+  for (const [name, value] of Object.entries(node.attribs || {})) apply(name, value);
+  // inline style="" wins over presentation attributes
+  for (const decl of (node.attribs?.style || '').split(';')) {
+    const idx = decl.indexOf(':');
+    if (idx > 0) apply(decl.slice(0, idx).trim(), decl.slice(idx + 1).trim());
+  }
+  return style;
+}
+
 /**
  * How many distinct colours a document actually commits to, decided once at
  * parse time.
@@ -236,11 +353,13 @@ function pathBBox(path) {
  * Opacity does not enter into it: `opacity`, `fill-opacity` and
  * `stroke-opacity` scale coverage, which a mask carries perfectly well.
  *
- * The walk mirrors `_style` and `_renderNode` — fill and stroke inherit,
- * inline `style` beats the presentation attribute, the initial fill is black
- * and the initial stroke is none, `<line>` never fills, `<use>` paints its
- * target with the *use* element's style, and non-rendered subtrees
- * contribute nothing. It starts at the root element itself, because `draw`
+ * The walk mirrors `_renderNode`, and reads style with the same
+ * `resolveStyle` — fill and stroke inherit, inline `style` beats the
+ * presentation attribute, the initial fill is black and the initial stroke
+ * is none, `<line>` never fills, `<use>` paints its target with the *use*
+ * element's style, a shape whose inherited `visibility` is not `visible`
+ * paints nothing, and non-rendered and `display: none` subtrees contribute
+ * nothing. It starts at the root element itself, because `draw`
  * does: the root `<svg>` is an ordinary element for inheritance, and every
  * mainstream icon set puts `fill`/`stroke` there (issue #306). The two walks
  * have to agree — a scan that skipped the root would disagree with what is
@@ -254,59 +373,48 @@ function scanPaints(root, ids) {
   const paints = new Set();
   let multi = false;
 
-  const paintOf = (node, name, inherited) => {
-    let v = attr(node, name);
-    for (const decl of (node.attribs?.style || '').split(';')) {
-      const idx = decl.indexOf(':');
-      if (idx > 0 && decl.slice(0, idx).trim() === name) v = decl.slice(idx + 1);
-    }
-    if (v === undefined || v === '' || v === 'inherit') return inherited;
-    return String(v).trim();
-  };
-
   const note = (paint) => {
     if (paint === 'none') return;
     if (/^url\(/i.test(paint)) multi = true;
     else paints.add(paint);
   };
 
-  const kids = (node, fill, stroke, depth) => {
+  const kids = (node, style, depth) => {
     for (const child of node.children || []) {
-      if (child.type === 'tag') visit(child, fill, stroke, depth + 1);
+      if (child.type === 'tag') visit(child, style, depth + 1);
     }
   };
 
-  const visit = (node, fill, stroke, depth) => {
+  const visit = (node, parent, depth) => {
     if (multi || depth > 32) return;
     const name = tag(node);
     if (NON_RENDERED.has(name) || displayNone(node)) return;
-    const f = paintOf(node, 'fill', fill);
-    const s = paintOf(node, 'stroke', stroke);
+    const style = resolveStyle(node, parent);
     switch (name) {
       case 'svg':
       case 'g':
       case 'a':
-        kids(node, f, s, depth);
+        kids(node, style, depth);
         return;
       case 'use': {
         const href = node.attribs?.href || node.attribs?.['xlink:href'] || '';
         const target = href.startsWith('#') ? ids.get(href.slice(1)) : null;
         if (!target) return;
         // <symbol> is non-rendered on its own but renders through <use>
-        if (tag(target) === 'symbol') kids(target, f, s, depth);
-        else visit(target, f, s, depth + 1);
+        if (tag(target) === 'symbol') kids(target, style, depth);
+        else visit(target, style, depth + 1);
         return;
       }
-      case 'text':
-        note(f);
-        return;
       default:
-        if (name !== 'line') note(f);
-        note(s);
+        // a hidden shape paints nothing, though what is in a hidden
+        // group may show itself again
+        if (style.visibility !== 'visible') return;
+        if (name !== 'line') note(style.fill);
+        if (name !== 'text') note(style.stroke);
     }
   };
 
-  visit(root, INHERITED.fill, INHERITED.stroke, 0);
+  visit(root, INHERITED, 0);
   return {
     kind: multi || paints.size > 1 ? 'multi' : 'mono',
     solo: paints.size === 1 ? [...paints][0] : null
@@ -333,6 +441,7 @@ export default class SvgView {
 
     this._root = null;
     this._ids = new Map();
+    this._viewport = [0, 0];
     this.naturalWidth = 0;
     this.naturalHeight = 0;
     this.viewBox = null;
@@ -390,11 +499,7 @@ export default class SvgView {
     this.soloPaint = scanned.solo;
 
     const a = this._root.attribs || {};
-    const vb = (attr(this._root, 'viewBox') || '')
-      .split(/[\s,]+/)
-      .filter((s) => s !== '')
-      .map(parseFloat);
-    this.viewBox = vb.length === 4 && vb.every(Number.isFinite) ? vb : null;
+    this.viewBox = parseViewBox(this._root);
     const w = parseFloat(a.width);
     const h = parseFloat(a.height);
     this.naturalWidth = Number.isFinite(w) && !String(a.width || '').endsWith('%') ? w : this.viewBox ? this.viewBox[2] : 300;
@@ -443,14 +548,19 @@ export default class SvgView {
     if (!this._root) return;
     ctx.save();
     ctx.translate(x, y);
+    // the user-space size of the viewport, what a nested <svg>'s
+    // percentages are of
+    this._viewport = [w, h];
     if (this.viewBox) {
       const [minX, minY, vbW, vbH] = this.viewBox;
       if (vbW > 0 && vbH > 0) {
         ctx.scale(w / vbW, h / vbH);
         ctx.translate(-minX, -minY);
+        this._viewport = [vbW, vbH];
       }
     } else if (this.naturalWidth > 0 && this.naturalHeight > 0) {
       ctx.scale(w / this.naturalWidth, h / this.naturalHeight);
+      this._viewport = [this.naturalWidth, this.naturalHeight];
     }
     this._renderChildren(
       this._root,
@@ -465,27 +575,7 @@ export default class SvgView {
   // ------------------------------------------------------------------
 
   _style(node, parent) {
-    let style = parent;
-    const own = () => (style === parent ? (style = { ...parent }) : style);
-    const apply = (name, raw) => {
-      const key = STYLE_ATTRS[name];
-      if (!key || raw === undefined || raw === '' || raw === 'inherit') return;
-      let v = String(raw).trim();
-      if (NUMERIC.has(key)) {
-        const n = parseFloat(v);
-        if (!Number.isFinite(n)) return;
-        own()[key] = n;
-      } else {
-        own()[key] = v;
-      }
-    };
-    for (const [name, value] of Object.entries(node.attribs || {})) apply(name, value);
-    // inline style="" wins over presentation attributes
-    for (const decl of (node.attribs?.style || '').split(';')) {
-      const idx = decl.indexOf(':');
-      if (idx > 0) apply(decl.slice(0, idx).trim(), decl.slice(idx + 1).trim());
-    }
-    return style;
+    return resolveStyle(node, parent);
   }
 
   _paint(ctx, value, style, path) {
@@ -604,14 +694,55 @@ export default class SvgView {
     }
   }
 
+  /**
+   * A nested `<svg>`, which is a new viewport and not a group (SVG 2, 8.2):
+   * `width` by `height` at `x`,`y` of the user space it sits in, all of the
+   * viewport around it where they are unset, and percentages of that. Its
+   * `viewBox` is fitted in as `preserveAspectRatio` says, and what it draws
+   * is clipped to it unless its `overflow` is `visible` or `auto`. A zero
+   * or negative size, or a zero-sized `viewBox`, draws nothing.
+   */
+  _renderViewport(node, ctx, style, alpha, depth) {
+    const outer = this._viewport;
+    const [pw, ph] = outer;
+    const x = viewportLength(node, 'x', pw, 0);
+    const y = viewportLength(node, 'y', ph, 0);
+    const w = viewportLength(node, 'width', pw, pw);
+    const h = viewportLength(node, 'height', ph, ph);
+    if (!(w > 0) || !(h > 0)) return;
+    // a negative size makes the viewBox an error, and it is ignored
+    let vb = parseViewBox(node);
+    if (vb && (vb[2] === 0 || vb[3] === 0)) return;
+    if (vb && (vb[2] < 0 || vb[3] < 0)) vb = null;
+
+    ctx.save();
+    const overflow = ownProperty(node, 'overflow', keyword);
+    if (overflow !== 'visible' && overflow !== 'auto') {
+      const clip = new Path2D();
+      clip.rect(x, y, w, h);
+      ctx.clip(clip);
+    }
+    if (vb) {
+      const [sx, sy, tx, ty] = viewBoxFit(vb, x, y, w, h, attr(node, 'preserveAspectRatio'));
+      ctx.transform(sx, 0, 0, sy, tx, ty);
+      this._viewport = [vb[2], vb[3]];
+    } else {
+      if (x || y) ctx.translate(x, y);
+      this._viewport = [w, h];
+    }
+    this._renderChildren(node, ctx, style, alpha, depth + 1);
+    this._viewport = outer;
+    ctx.restore();
+  }
+
   _renderNode(node, ctx, parentStyle, alpha, depth) {
     if (depth > 32) return;
     const name = tag(node);
     if (NON_RENDERED.has(name) || displayNone(node)) return;
 
     const style = this._style(node, parentStyle);
-    const opacity = parseFloat(node.attribs?.opacity ?? '1');
-    const nodeAlpha = alpha * (Number.isFinite(opacity) ? Math.min(1, Math.max(0, opacity)) : 1);
+    // not inherited: a group's multiplies down through what is in it
+    const nodeAlpha = alpha * (ownProperty(node, 'opacity', alphaValue) ?? 1);
     if (nodeAlpha <= 0) return;
 
     const transforms = parseSvgTransform(node.attribs?.transform);
@@ -623,6 +754,8 @@ export default class SvgView {
 
     switch (name) {
       case 'svg':
+        this._renderViewport(node, ctx, style, nodeAlpha, depth);
+        break;
       case 'g':
       case 'a':
         this._renderChildren(node, ctx, style, nodeAlpha, depth + 1);
@@ -642,9 +775,13 @@ export default class SvgView {
         break;
       }
       case 'text':
-        this._renderText(node, ctx, style, nodeAlpha);
+        if (style.visibility === 'visible') this._renderText(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
+        // `visible` again
+        if (style.visibility !== 'visible') break;
         const path = shapePath(node);
         if (!path) break;
         if (name !== 'line' && style.fill !== 'none') {

package/package.json

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