ntk 8.21.0 → 8.22.0

package/lib/widgets/svgview.js

@@ -18,13 +18,13 @@
 // <use>, <switch>, linear/radial gradients (objectBoundingBox and
 // userSpaceOnUse), transform lists, opacity/fill-opacity/stroke-opacity,
 // display, visibility, nested <svg> viewports, fill-rule, <text> with its
-// <tspan>s, and <mask>. See docs/svg.md for the full surface and
-// limitations.
+// <tspan>s, <mask> and <clipPath>. See docs/svg.md for the full surface
+// and limitations.
 
 import { parseDocument } from 'htmlparser2';
 
 import { cssColorStraight } from '../color.js';
-import { Path2D, flattenPath } from '../path.js';
+import { MAT_IDENTITY, Path2D, flattenPath, matIsIdentity, matMultiply } from '../path.js';
 
 const INHERITED = {
   fill: '#000',
@@ -34,6 +34,7 @@ const INHERITED = {
   lineJoin: 'miter',
   miterLimit: 4,
   fillRule: 'nonzero',
+  clipRule: 'nonzero',
   fillOpacity: 1,
   strokeOpacity: 1,
   color: '#000',
@@ -61,6 +62,7 @@ const STYLE_ATTRS = {
   'stroke-linejoin': 'lineJoin',
   'stroke-miterlimit': 'miterLimit',
   'fill-rule': 'fillRule',
+  'clip-rule': 'clipRule',
   'fill-opacity': 'fillOpacity',
   'stroke-opacity': 'strokeOpacity',
   color: 'color',
@@ -145,7 +147,7 @@ function displayNone(node) {
 // author's fallback is what to draw instead
 const UNDRAWN_FEATURES = new Set(
   [
-    'Extensibility', 'Image', 'Clip', 'BasicClip', 'Filter', 'BasicFilter',
+    'Extensibility', 'Image', 'Filter', 'BasicFilter',
     'Pattern', 'Marker', 'Font', 'BasicFont', 'Script', 'Animation', 'ColorProfile',
     'Cursor', 'View'
   ].map((name) => `http://www.w3.org/TR/SVG11/feature#${name}`)
@@ -540,6 +542,11 @@ function resolveStyle(node, parent) {
           if (VISIBILITY.has(k)) value = k;
           break;
         }
+        case 'clipRule': {
+          const k = v.toLowerCase();
+          if (k === 'nonzero' || k === 'evenodd') value = k;
+          break;
+        }
         case 'fontSize':
           value = fontSizeValue(v, parent.fontSize);
           break;
@@ -684,7 +691,7 @@ function scanPaints(root, ids, languages) {
         if (MARKABLE.has(name)) {
           for (const id of markerIds(style)) {
             const marker = ids.get(id);
-            if (marker && tag(marker) === 'marker' && !inMarker.has(marker)) {
+            if (marker && tag(marker) === 'marker' && !inMarker.has(marker) && !hiddenAbove(marker, root)) {
               inMarker.add(marker);
               kids(marker, styleWhereItStands(marker, root), depth);
               inMarker.delete(marker);
@@ -704,8 +711,8 @@ function scanPaints(root, ids, languages) {
 
 /**
  * Widget rendering a static SVG document into a window (or any 2d context
- * via `draw()`). Scripting, CSS stylesheets, filters, clip paths and
- * external references are not supported — see docs/svg.md.
+ * via `draw()`). Scripting, CSS stylesheets, filters and external
+ * references are not supported — see docs/svg.md.
  */
 export default class SvgView {
   constructor(window, opts = {}) {
@@ -910,6 +917,13 @@ export default class SvgView {
    */
   _ink(ctx, kind, value, style, path, alpha, draw) {
     const key = kind === 'fill' ? 'fillStyle' : 'strokeStyle';
+    if (this._silhouetting) {
+      // a text in a clip path, which counts in its glyphs (`_silhouette`)
+      ctx[key] = '#000';
+      ctx.globalAlpha = 1;
+      draw();
+      return;
+    }
     if (!this._luminance) {
       const paint = this._paint(ctx, value, style, path);
       if (!paint) return;
@@ -1045,6 +1059,9 @@ export default class SvgView {
    * `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.
+   *
+   * Its `clip-path` is set in the user space of what it holds, inside the
+   * `viewBox`, as Chrome and WebKit set it.
    */
   _renderViewport(node, ctx, style, alpha, depth) {
     const outer = this._viewport;
@@ -1074,7 +1091,14 @@ export default class SvgView {
       if (x || y) ctx.translate(x, y);
       this._viewport = [w, h];
     }
-    this._renderChildren(node, ctx, style, alpha, depth + 1);
+    const clip = this._clipOf(node);
+    if (clip) {
+      this._renderClipped(node, clip, ctx, style, alpha, depth, (c, a) =>
+        this._renderChildren(node, c, style, a, depth + 1)
+      );
+    } else {
+      this._renderChildren(node, ctx, style, alpha, depth + 1);
+    }
     this._viewport = outer;
     ctx.restore();
   }
@@ -1089,7 +1113,7 @@ export default class SvgView {
     const nodeAlpha = alpha * (ownProperty(node, 'opacity', alphaValue) ?? 1);
     if (nodeAlpha <= 0) return;
 
-    const transforms = parseSvgTransform(node.attribs?.transform);
+    const transforms = ownTransforms(node);
     const needsCtxState = transforms.length > 0;
     if (needsCtxState) {
       ctx.save();
@@ -1097,8 +1121,12 @@ export default class SvgView {
     }
 
     const mask = this._maskOf(node);
-    if (mask) this._renderMasked(node, mask, ctx, style, nodeAlpha, depth);
-    else this._renderElement(node, ctx, style, nodeAlpha, depth);
+    const paint = (c, a) =>
+      mask ? this._renderMasked(node, mask, c, style, a, depth) : this._renderElement(node, c, style, a, depth);
+    // a nested <svg> is cut inside its viewport (`_renderViewport`)
+    const clip = name === 'svg' ? null : this._clipOf(node);
+    if (clip) this._renderClipped(node, clip, ctx, style, nodeAlpha, depth, paint);
+    else paint(ctx, nodeAlpha);
 
     if (needsCtxState) ctx.restore();
   }
@@ -1122,15 +1150,11 @@ export default class SvgView {
         break;
       }
       case 'use': {
+        // its `x` and `y` are in its transforms (`ownTransforms`)
         const target = this._useTarget(node);
         if (target) {
-          const ux = attrNum(node, 'x');
-          const uy = attrNum(node, 'y');
-          ctx.save();
-          if (ux || uy) ctx.translate(ux, uy);
           if (tag(target) === 'symbol') this._renderChildren(target, ctx, style, nodeAlpha, depth + 1);
           else this._renderNode(target, ctx, style, nodeAlpha, depth + 1);
-          ctx.restore();
         }
         break;
       }
@@ -1192,7 +1216,7 @@ export default class SvgView {
 
   _renderMarker(id, vertex, first, ctx, style, alpha, depth) {
     const marker = this._ids.get(id);
-    if (!marker || tag(marker) !== 'marker' || displayNone(marker)) return;
+    if (!marker || tag(marker) !== 'marker' || hiddenAbove(marker, this._root)) return;
     if ((this._marking ??= new Set()).has(marker)) return;
     const mw = viewportLength(marker, 'markerWidth', 0, 3);
     const mh = viewportLength(marker, 'markerHeight', 0, 3);
@@ -1347,6 +1371,299 @@ export default class SvgView {
     ctx.restore();
   }
 
+  /** The `<clipPath>` an element's `clip-path` names, or null for none. One
+   * that is not there, that names something else, or whose own `display`
+   * is `none` clips nothing, as Chrome, Firefox and WebKit all have it,
+   * where one inside something that is `display: none` clips as any other
+   * does. */
+  _clipOf(node) {
+    const id = ownProperty(node, 'clip-path', urlReference);
+    if (!id) return null;
+    const clip = this._ids.get(id);
+    return clip && tag(clip) === 'clippath' && !displayNone(clip) ? clip : null;
+  }
+
+  /** The clipPath a clip path's own `clip-path` names, or one on what is in
+   * it, as `_clipOf` — and null for one that reaches itself through the
+   * clip paths on it and in it, which Chrome and WebKit leave out, keeping
+   * the clip that named it. */
+  _nestedClip(node) {
+    const clip = this._clipOf(node);
+    return clip && !this._reachesItself(clip) ? clip : null;
+  }
+
+  _reachesItself(clip) {
+    const seen = new Set();
+    const stack = [clip];
+    while (stack.length) {
+      const at = stack.pop();
+      const next = [this._clipOf(at)];
+      for (const child of at.children || []) {
+        if (child.type !== 'tag') continue;
+        next.push(this._clipOf(child));
+        if (tag(child) === 'use') {
+          const target = this._useTarget(child);
+          if (target) next.push(this._clipOf(target));
+        }
+      }
+      for (const n of next) {
+        if (n === clip) return true;
+        if (n && !seen.has(n)) {
+          seen.add(n);
+          stack.push(n);
+        }
+      }
+    }
+    return false;
+  }
+
+  /**
+   * An element cut to the `<clipPath>` its `clip-path` names (CSS Masking
+   * 1, 6), in the user space the element draws in: after its `transform`,
+   * and a `use`'s `x` and `y`. `paint(ctx, alpha)` draws the element.
+   */
+  _renderClipped(node, clip, ctx, style, alpha, depth, paint) {
+    const region = this._clipRegion(clip, node, style, MAT_IDENTITY, ctx, depth, 0);
+    if (region) this._drawCut(ctx, [region], alpha, paint);
+    else paint(ctx, alpha);
+  }
+
+  /**
+   * What a `<clipPath>` lets show of `ref`, in the user space `m` maps
+   * `ref`'s to: `{ parts, own }`, the union of the parts, each cut to the
+   * regions in its `clips`, and all of that cut to `own`, the region of the
+   * clipPath's own `clip-path`, where it has one.
+   *
+   * In `objectBoundingBox` units the clipPath's user space is `ref`'s
+   * bounding box, and a box of no area is a region of nothing. The
+   * clipPath's `transform` goes outside that, and its own `clip-path` is set
+   * in `ref`'s user space, as Chrome and Firefox set it.
+   *
+   * `depth` is how deep `ref` is drawn, and `nest` how many clip paths in
+   * this one is: null past 32 of them, which cuts nothing.
+   */
+  _clipRegion(clip, ref, refStyle, m, ctx, depth, nest) {
+    if (nest > 32) return null;
+    const region = { parts: [], own: null };
+    let base = matMultiply(m, matrixOf(parseSvgTransform(attr(clip, 'transform'))));
+    if ((attr(clip, 'clipPathUnits') || '').trim() === 'objectBoundingBox') {
+      const bbox = this._bbox(ref, ctx, refStyle, depth);
+      if (!bbox || !(bbox.w > 0 && bbox.h > 0)) return region;
+      base = matMultiply(base, [bbox.w, 0, 0, bbox.h, bbox.x, bbox.y]);
+    }
+    const inherited = this._inheritedStyle(clip);
+    for (const child of clip.children || []) {
+      if (child.type !== 'tag') continue;
+      const part = this._clipPart(child, inherited, base, ctx, depth, nest);
+      if (part) region.parts.push(part);
+    }
+    const own = this._nestedClip(clip);
+    if (own) region.own = this._clipRegion(own, ref, refStyle, m, ctx, depth, nest + 1);
+    return region;
+  }
+
+  /**
+   * A child of a `<clipPath>` as a part of its region (CSS Masking 1, 6.3):
+   * a shape — `{ path, rule, m }` — or a text — `{ text, style, m }` — with
+   * `m` the matrix from its user space to the region's, `box` where it lies
+   * there, and `clips` the regions its own `clip-path` cuts it to. A `use`
+   * is the shape or text it names, through the use's transforms and its
+   * own, and cut by both their clip paths.
+   *
+   * What counts is the shape as it is filled, whatever its paint, by its
+   * `clip-rule`, which it inherits from the clipPath and what the clipPath
+   * is in, and not from what is clipped. Anything else — a group, a `use`
+   * of a group or a symbol — is no part, as Chrome and WebKit leave it,
+   * and nor is one that is `display: none`, whose conditions do not hold,
+   * 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;
+    let style = this._style(child, inherited);
+    let m = matMultiply(base, matrixOf(ownTransforms(child)));
+    const clips = [];
+    const cutBy = (node, st, at) => {
+      const clip = this._nestedClip(node);
+      const region = clip && this._clipRegion(clip, node, st, at, ctx, depth, nest + 1);
+      if (region) clips.push(region);
+    };
+    cutBy(child, style, m);
+    let shape = child;
+    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;
+      style = this._style(shape, style);
+      m = matMultiply(m, matrixOf(ownTransforms(shape)));
+      cutBy(shape, style, m);
+    }
+    if (style.visibility !== 'visible') return null;
+    if (tag(shape) === 'text') {
+      const box = this._bbox(shape, ctx, style, depth);
+      if (!box) return null;
+      // and room for what a glyph draws past its advance and the font's
+      // extent
+      const pad = style.fontSize / 2;
+      const inked = { x: box.x - pad, y: box.y - pad, w: box.w + 2 * pad, h: box.h + 2 * pad };
+      return { text: shape, style, m, clips, box: transformedBox(inked, [m]) };
+    }
+    const path = shapePath(shape);
+    if (!path) return null;
+    return { path, rule: style.clipRule, m, clips, box: transformedBox(pathBBox(path), [m]) };
+  }
+
+  /**
+   * Draw with `paint(ctx, alpha)` cut to every one of `regions`: with the
+   * context's own clip, each that is one shape and what cuts it, and each
+   * that is not through surfaces (`_drawThrough`).
+   */
+  _drawCut(ctx, regions, alpha, paint) {
+    ctx.save();
+    try {
+      const rest = [];
+      for (const region of regions) {
+        const cut = this._clipTo(ctx, region);
+        if (cut === false) return;
+        if (cut === null) rest.push(region);
+      }
+      if (!rest.length) paint(ctx, alpha);
+      else this._drawThrough(ctx, rest[0], alpha, (c, a) => this._drawCut(c, rest.slice(1), a, paint));
+    } finally {
+      ctx.restore();
+    }
+  }
+
+  /**
+   * Cut the context to a region with its own clip, where that can: true
+   * where it did, false where nothing of the region shows, and null —
+   * leaving the context as it was — where the region, or one that cuts it,
+   * is more than one part, or a text, which a context's clip is not.
+   */
+  _clipTo(ctx, region) {
+    if (!region.parts.length) return false;
+    if (!clipsAsOne(region)) return null;
+    const cut = (r) => {
+      const [part] = r.parts;
+      if (!part) return false;
+      ctx.clip(placedPath(part.path, part.m), part.rule);
+      return part.clips.every(cut) && (!r.own || cut(r.own));
+    };
+    return cut(region);
+  }
+
+  /**
+   * Draw with `paint` cut to a region the context's clip cannot make, as a
+   * mask cuts (`_renderMasked`): on a surface, and the region's coverage on
+   * a second, through the same transform — device pixels, the part of the
+   * region the drawing can show — the second cutting the first with
+   * `destination-in`, and the first composited at `alpha`.
+   *
+   * With no surface to draw on, or no `destination-in`, it is cut to the
+   * outlines of the region's shapes as one path, which is their union
+   * wherever they do not overlap, and to a text's box.
+   */
+  _drawThrough(ctx, region, alpha, paint) {
+    const extent = region.parts.reduce((box, part) => unionBox(box, part.box), null);
+    const m = ctx.getTransform?.();
+    const make = this._surface;
+    const box = m && make && ctx.drawImage && ctx.setTransform ? surfaceBox(m, extent, this._bounds) : null;
+    if (box === EMPTY) return;
+    let content = null;
+    let cover = null;
+    let cctx = null;
+    let mctx = null;
+    let done = false;
+    const bounds = this._bounds;
+    const luminance = this._luminance;
+    try {
+      if (box) {
+        content = make(box.w, box.h);
+        cover = content && make(box.w, box.h);
+      }
+      if (cover) {
+        cctx = content.getContext('2d');
+        cctx.globalCompositeOperation = 'destination-in';
+        if (cctx.globalCompositeOperation === 'destination-in') {
+          cctx.globalCompositeOperation = 'source-over';
+          const place = [m.a, m.b, m.c, m.d, m.e - box.x, m.f - box.y];
+          // what the surfaces show is all of them
+          this._bounds = { x: 0, y: 0, w: box.w, h: box.h };
+          cctx.transform(...place);
+          paint(cctx, 1);
+
+          mctx = cover.getContext('2d');
+          mctx.transform(...place);
+          this._luminance = false;
+          this._cover(mctx, region);
+
+          cctx.setTransform(1, 0, 0, 1, 0, 0);
+          cctx.globalAlpha = 1;
+          cctx.globalCompositeOperation = 'destination-in';
+          cctx.drawImage(cover, 0, 0);
+          ctx.save();
+          ctx.setTransform(1, 0, 0, 1, 0, 0);
+          ctx.globalAlpha = alpha;
+          ctx.drawImage(content, box.x, box.y);
+          ctx.restore();
+          done = true;
+        }
+      }
+    } finally {
+      this._bounds = bounds;
+      this._luminance = luminance;
+      mctx?.destroy?.();
+      cctx?.destroy?.();
+      cover?.destroy?.();
+      content?.destroy?.();
+    }
+    if (done) return;
+    const outline = new Path2D();
+    const rules = new Set();
+    for (const part of region.parts) {
+      if (part.text) {
+        outline.rect(part.box.x, part.box.y, part.box.w, part.box.h);
+        rules.add('nonzero');
+      } else {
+        outline.addPath(part.path, part.m);
+        rules.add(part.rule);
+      }
+    }
+    ctx.save();
+    ctx.clip(outline, rules.size === 1 && rules.has('evenodd') ? 'evenodd' : 'nonzero');
+    paint(ctx, alpha);
+    ctx.restore();
+  }
+
+  /** A region's coverage, drawn opaque: each part, cut to the regions that
+   * cut it, and all of them to the region's own. */
+  _cover(ctx, region) {
+    const parts = (c) => {
+      for (const part of region.parts) this._drawCut(c, part.clips, 1, (cc) => this._silhouette(cc, part));
+    };
+    if (region.own) this._drawCut(ctx, [region.own], 1, parts);
+    else parts(ctx);
+  }
+
+  /** A part of a clip region filled opaque, whatever its paint: a shape by
+   * its clip rule, a text in its glyphs. */
+  _silhouette(ctx, part) {
+    if (part.text) {
+      ctx.save();
+      ctx.transform(...part.m);
+      this._silhouetting = true;
+      try {
+        this._renderText(part.text, ctx, part.style, 1);
+      } finally {
+        this._silhouetting = false;
+        ctx.restore();
+      }
+      return;
+    }
+    ctx.fillStyle = '#000';
+    ctx.globalAlpha = 1;
+    ctx.fill(placedPath(part.path, part.m), part.rule);
+  }
+
   /** The style an element has where it stands in the document: what is in a
    * `<mask>` inherits from the mask's ancestors, not from what it masks. */
   _inheritedStyle(node) {
@@ -1359,9 +1676,10 @@ export default class SvgView {
 
   /**
    * An element's bounding box in its own user space (SVG 2, 8.10): the
-   * geometry of its shapes and text, without strokes, through the
-   * transforms of what is in it but not its own. Null for one that has
-   * none.
+   * geometry of its shapes and text, without strokes or what clips them,
+   * through the transforms of what is in it but not its own, which for a
+   * `use` are its `x` and `y` too (`ownTransforms`). Null for one that
+   * has none.
    */
   _bbox(node, ctx, style, depth) {
     if (depth > 32) return null;
@@ -1377,7 +1695,7 @@ export default class SvgView {
           if (!child || child.type !== 'tag') continue;
           if (NON_RENDERED.has(tag(child)) || displayNone(child) || !conditionsHold(child, this.languages)) continue;
           const inner = this._bbox(child, ctx, this._style(child, style), depth + 1);
-          if (inner) box = unionBox(box, transformedBox(inner, parseSvgTransform(child.attribs?.transform)));
+          if (inner) box = unionBox(box, transformedBox(inner, ownTransforms(child)));
         }
         return box;
       }
@@ -1389,13 +1707,14 @@ export default class SvgView {
           for (const child of target.children || []) {
             if (child.type !== 'tag' || NON_RENDERED.has(tag(child)) || displayNone(child)) continue;
             const inner = this._bbox(child, ctx, this._style(child, style), depth + 1);
-            if (inner) box = unionBox(box, transformedBox(inner, parseSvgTransform(child.attribs?.transform)));
+            if (inner) box = unionBox(box, transformedBox(inner, ownTransforms(child)));
           }
         } else {
           const inner = this._bbox(target, ctx, this._style(target, style), depth + 1);
-          if (inner) box = transformedBox(inner, parseSvgTransform(target.attribs?.transform));
+          if (inner) box = transformedBox(inner, ownTransforms(target));
         }
-        return box && { ...box, x: box.x + attrNum(node, 'x'), y: box.y + attrNum(node, 'y') };
+        // in the space its `x` and `y` move it to, which is its own
+        return box;
       }
       case 'text': {
         ctx.save();
@@ -1578,7 +1897,7 @@ export default class SvgView {
       let bounds = null;
       for (const p of pieces) {
         const st = p.span.style;
-        if (st.visibility !== 'visible' || st.fill === 'none' || !p.text.trim()) continue;
+        if (st.visibility !== 'visible' || (st.fill === 'none' && !this._silhouetting) || !p.text.trim()) continue;
         if (!bounds) {
           bounds = new Path2D();
           bounds.rect(box.x, box.y, box.w, box.h);
@@ -1685,9 +2004,68 @@ function urlReference(raw) {
   return m ? m[1] : undefined;
 }
 
+/**
+ * The transforms an element sets for itself and what it holds: its
+ * `transform`, and after that a `use`'s `x` and `y`, which SVG 1.1 puts at
+ * the end of the transform of the group a use stands for (5.6), the group
+ * its `clip-path` and its `mask` go on. So both are set in the space the
+ * use's `x` and `y` move it to, as Chrome, Firefox and WebKit set them.
+ */
+function ownTransforms(node) {
+  const list = parseSvgTransform(node.attribs?.transform);
+  if (tag(node) === 'use') {
+    const x = attrNum(node, 'x');
+    const y = attrNum(node, 'y');
+    if (x || y) list.push([1, 0, 0, 1, x, y]);
+  }
+  return list;
+}
+
+/** A transform list as the one matrix it comes to. */
+function matrixOf(transforms) {
+  let m = MAT_IDENTITY;
+  for (const t of transforms) m = matMultiply(m, t);
+  return m;
+}
+
+/** What a `<clipPath>` may hold that is part of its region: the shapes,
+ * text, and a `use` of either (CSS Masking 1, 6.3). */
+const CLIPPING = new Set(['path', 'rect', 'circle', 'ellipse', 'line', 'polyline', 'polygon', 'text', 'use']);
+
+/** Whether a clip region is one shape at most, cut by regions that are one
+ * at most themselves: what a context's own clip makes. */
+function clipsAsOne(region) {
+  if (region.parts.length > 1) return false;
+  const [part] = region.parts;
+  if (part && (part.text || !part.clips.every(clipsAsOne))) return false;
+  return !region.own || clipsAsOne(region.own);
+}
+
+/** A path in the space `m` maps its own to. */
+function placedPath(path, m) {
+  if (matIsIdentity(m)) return path;
+  const out = new Path2D();
+  out.addPath(path, m);
+  return out;
+}
+
 /** The shapes that take markers (SVG 2, 11.6): the ones with vertices. */
 const MARKABLE = new Set(['path', 'line', 'polyline', 'polygon']);
 
+/**
+ * Whether something around an element is `display: none`: a marker in such
+ * a subtree is drawn nowhere, by Chrome, Firefox or WebKit alike. Its own
+ * `display` is not asked: the property does not apply to a `<marker>`
+ * (SVG 2, 11.6.2), and Chrome and WebKit draw one that says `none`.
+ */
+function hiddenAbove(node, root) {
+  for (let at = node.parent; at && at.type === 'tag'; at = at.parent) {
+    if (displayNone(at)) return true;
+    if (at === root) break;
+  }
+  return false;
+}
+
 /** The ids of the markers a style names, each once. */
 function markerIds(style) {
   const ids = new Set([style.markerStart, style.markerMid, style.markerEnd]);

package/package.json

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