mapshaper 0.7.71 → 0.7.72

package/mapshaper.js

@@ -26830,6 +26830,14 @@
     fill: 'color',
     'fill-pattern': 'pattern',
     'fill-effect': null, // todo: validate effect names
+    // soft glows along a polygon's edges -- see svg-glow.mjs. Drawn with a
+    // filter, not written as attributes, so not in propertiesBySymbolType.
+    'outer-glow-color': 'color',
+    'outer-glow-opacity': 'number',
+    'outer-glow-width': 'number',
+    'inner-glow-color': 'color',
+    'inner-glow-opacity': 'number',
+    'inner-glow-width': 'number',
     'font-family': null,
     'font-size': null,
     'font-style': null,
@@ -27236,13 +27244,13 @@
 
   function parseCalloutEnd(str) {
     var end = String(str).trim().toLowerCase();
-    return /^(arrow|open-arrow|none)$/.test(end) ? end : null;
+    return /^(arrow|open-arrow|ring|none)$/.test(end) ? end : null;
   }
 
-  // A line's ends take a callout's markers, and a dot
+  // A line's ends take a callout's arrowheads, and a dot
   function parseLineEnd(str) {
     var end = String(str).trim().toLowerCase();
-    return end == 'dot' ? end : parseCalloutEnd(end);
+    return /^(arrow|open-arrow|dot|none)$/.test(end) ? end : null;
   }
 
   // "x,y" -> [x, y], or null. Stored as a string so that a pair is set and
@@ -28008,12 +28016,21 @@
 
   // An arrowhead's size when callout-end-size does not say, in px: 10 for the
   // default line, and growing with the line, so that a heavier line does not end
-  // in a head too small to read.
+  // in a head too small to read. A ring is twice that across, which is room to
+  // circle a point and its symbol.
   function getDefaultCalloutEndSize(end, lineWidth) {
-    return getDefaultArrowSize(lineWidth);
+    var size = getDefaultArrowSize(lineWidth);
+    return end == 'ring' ? size * 2 : size;
+  }
+
+  // A ring's size is its diameter, stroke and all, as an icon ring's is; this
+  // is the radius of the circle its stroke is centred on.
+  function getRingRadius(size, lineWidth) {
+    var w = lineWidth > 0 ? lineWidth : DEFAULT_LINE_WIDTH$1;
+    return Math.max(size - w, w) / 2;
   }
 
-  // 'arrow', 'open-arrow' or 'none'
+  // 'arrow', 'open-arrow', 'ring' or 'none'
   function getCalloutEndType(rec) {
     return rec && parseCalloutEnd(rec['callout-end'] || '') || 'none';
   }
@@ -28078,7 +28095,8 @@
   // Where a line meets a callout's text and how it gets there from the anchor.
   //
   // o.type     'line', 'elbow' or 'curve'
-  // o.end      'arrow' (filled), 'open-arrow' (stroked) or 'none'
+  // o.end      'arrow' (filled), 'open-arrow' (stroked), 'ring' (a hollow circle
+  //            around the anchor, in the line's width) or 'none'
   // o.box      the text box, from getLabelTextBox()
   // o.via      [x, y] the elbow's corner or a point the curve passes through, or null
   // o.attach   [fx, fy] where the line meets the text, as fractions of the padded
@@ -28090,21 +28108,22 @@
   //            the line width. The size is the length of the head's sides, as
   //            drawn, stroke and all: the two styles are different shapes, and
   //            what makes one look the size of the other is sides the same
-  //            length, not the same length along the line.
+  //            length, not the same length along the line. A ring's size is its
+  //            diameter.
   //
-  // Returns {kind, coords, head, openHead, box, attach, via, tip} with coords
+  // Returns {kind, coords, head, openHead, ring, box, attach, via, tip} with coords
   // from the anchor end to the text end -- a polyline's vertices, or a quadratic
   // Bezier's three points -- or null when there is nothing to draw: the anchor
   // inside the padded box, or a gap that leaves no line. head is a filled
   // triangle, openHead the three points of a stroked chevron, wing to tip to
-  // wing. The rest is what the shape was worked out from: the padded box, the
+  // wing, ring {center, radius} a stroked circle. The rest is what the shape was worked out from: the padded box, the
   // point where the line meets it, the elbow's corner or the curve's midpoint
   // (null for a straight line), and where the line stops short of the anchor.
   function getCalloutShape(o) {
     var box = padBox$1(o.box, o.padding || 0);
     var a = [0, 0];
     var size = o.endSize > 0 ? o.endSize : getDefaultCalloutEndSize(o.end, o.width);
-    var t, v, path, tip, dir, out, lineWidth, headLen, curved;
+    var t, v, path, tip, dir, out, lineWidth, headLen, curved, ringRadius;
     if (boxContains(box, a)) return null;
     t = o.attach ? getBoxPoint(box, o.attach) :
       getAutoAttachment(o.type, box, o.via || null);
@@ -28126,10 +28145,14 @@
     } else {
       path = {kind: 'polyline', coords: [a, t]};
     }
-    path = trimPath(path, o.gap || 0);
+    // A ring is centred on the anchor, and the line starts at its stroke, or
+    // at the gap if that is further out -- round a symbol bigger than the ring.
+    ringRadius = o.end == 'ring' ? getRingRadius(size, o.width) : 0;
+    path = trimPath(path, Math.max(o.gap || 0, ringRadius));
     if (!path) return null;
     tip = path.coords[0];
     out = {kind: path.kind, coords: path.coords, head: null, openHead: null,
+      ring: ringRadius > 0 ? {center: a, radius: ringRadius} : null,
       box: box, attach: t, via: v || null, tip: tip};
     if (o.end == 'arrow') {
       headLen = getArrowHeadLength(size, ARROW_ANGLE);
@@ -28196,6 +28219,19 @@
         }
       });
     }
+    if (shape.ring) {
+      children.push({
+        tag: 'circle',
+        properties: {
+          cx: shape.ring.center[0],
+          cy: shape.ring.center[1],
+          r: Math.round(shape.ring.radius * 100) / 100,
+          fill: 'none',
+          stroke: color,
+          'stroke-width': getLineWidth(rec)
+        }
+      });
+    }
     if (opacity < 1) props.opacity = opacity;
     return {tag: 'g', properties: props, children: children};
   }
@@ -30139,11 +30175,302 @@
     getSphereEffectParams: getSphereEffectParams
   });
 
+  // Soft glows along the edges of polygons: an outer glow outside the shape and
+  // an inner glow inside it, each with a color, an opacity and a width.
+  //
+  //   outer-glow-color    a glow is drawn when its color is set, and not
+  //   inner-glow-color    otherwise (or if the color is "none")
+  //   outer-glow-width    how far the glow reaches from the edge, in px;
+  //   inner-glow-width    default 10, and 0 draws no glow
+  //   outer-glow-opacity  0-1, default 1
+  //   inner-glow-opacity
+  //
+  // A glow is a Gaussian blur of the shape's coverage, with a standard deviation
+  // of half the width: it has faded to about 2% of its opacity at that distance.
+  // The canvas renders the same blur as a shadow, whose shadowBlur is defined as
+  // twice the standard deviation -- so shadowBlur is the width itself.
+  //
+  // A glow is computed from everything the shape paints, its fill and its
+  // stroke, faded by its opacity -- which is what an SVG filter on a group sees.
+  //
+  // Inner glows belong to each shape. An outer glow belongs to the layer as a
+  // whole when every shape in the layer has the same one: it then follows the
+  // outline of all of them together, like a drop shadow, instead of spilling
+  // over each neighbor's edge. See getLayerOuterGlow().
+  //
+  // Illustrator drops a filter that is applied to a <path> with more than one
+  // ring (it imports one as a compound path), and keeps one that is applied to a
+  // group. A glowing shape is therefore always wrapped in a <g> that carries the
+  // filter.
+
+  var glowFields = [
+    'outer-glow-color', 'outer-glow-opacity', 'outer-glow-width',
+    'inner-glow-color', 'inner-glow-opacity', 'inner-glow-width'
+  ];
+
+  var DEFAULT_GLOW_WIDTH = 10;
+
+  // How far a glow is drawn past the edge, as a multiple of its width: three
+  // standard deviations, where the blur is gone for all practical purposes.
+  var GLOW_REACH = 1.5;
+
+  // Filter regions are given as a percentage of the bounding box of what they
+  // filter, and a small shape needs a larger percentage than a big one to leave
+  // room for the same glow. Rounding up to one of these keeps the number of
+  // distinct filters small; Illustrator lists every one of them in its menu.
+  var regionMargins = [10, 25, 50, 100, 200, 500, 1000, 2500, 5000, 10000];
+
+  // {color, opacity, width} for one of a record's glows, or null if it has none.
+  // @type: 'outer' or 'inner'
+  function getPolygonGlow(rec, type) {
+    var prefix = type + '-glow-';
+    var width, color, opacity;
+    if (!rec) return null;
+    color = rec[prefix + 'color'];
+    if (isBlank(color) || String(color).trim().toLowerCase() == 'none') return null;
+    width = rec[prefix + 'width'];
+    if (isBlank(width)) width = DEFAULT_GLOW_WIDTH;
+    if (!isSvgNumber(width) || !(Number(width) > 0)) return null;
+    opacity = rec[prefix + 'opacity'];
+    opacity = isSvgNumber(opacity) ? Math.min(Math.max(Number(opacity), 0), 1) : 1;
+    if (opacity === 0) return null;
+    return {color: String(color).trim(), opacity: opacity, width: Number(width)};
+  }
+
+  function isBlank(val) {
+    return val === undefined || val === null || String(val).trim() === '';
+  }
+
+  function polygonHasGlow(rec) {
+    return !!(getPolygonGlow(rec, 'outer') || getPolygonGlow(rec, 'inner'));
+  }
+
+  function getGlowKey(glow) {
+    return glow ? glow.color + ' ' + glow.opacity + ' ' + glow.width : '';
+  }
+
+  // The outer glow of a polygon layer as a whole, or null. A layer has one when
+  // every feature with a shape has the same outer glow; features without a shape
+  // are left out, since they draw nothing. Decided from the data rather than
+  // from what is drawn, so that it does not change with the view.
+  function getLayerOuterGlow(lyr) {
+    var records, shapes, glow, key, g, k;
+    if (!lyr || lyr.geometry_type != 'polygon' || !lyr.data || !lyr.shapes) return null;
+    records = lyr.data.getRecords();
+    shapes = lyr.shapes;
+    glow = null;
+    for (var i=0, n=shapes.length; i<n; i++) {
+      if (!shapes[i] || shapes[i].length === 0) continue;
+      g = getPolygonGlow(records[i], 'outer');
+      if (!g) return null;
+      k = getGlowKey(g);
+      if (!glow) {
+        glow = g;
+        key = k;
+      } else if (k != key) {
+        return null;
+      }
+    }
+    return glow;
+  }
+
+  // The widest glow of any feature in a layer, in px, or 0.
+  function getMaxGlowWidth(records) {
+    var max = 0, g;
+    for (var i=0, n=records ? records.length : 0; i<n; i++) {
+      g = getPolygonGlow(records[i], 'outer');
+      if (g && g.width > max) max = g.width;
+      g = getPolygonGlow(records[i], 'inner');
+      if (g && g.width > max) max = g.width;
+    }
+    return max;
+  }
+
+  // What a <g> needs for a glow filter: the glows and the size of what it
+  // wraps, so that the filter region can be made large enough.
+  // @bbox: [xmin, ymin, xmax, ymax] of the wrapped content, in px
+  // @strokeWidth: the widest stroke in it, which reaches past the bbox
+  function getGlowFilterSpec(outer, inner, bbox, strokeWidth) {
+    var width = Math.max(outer ? outer.width : 0, inner ? inner.width : 0);
+    var reach = width * GLOW_REACH + (strokeWidth > 0 ? strokeWidth / 2 : 0) + 1;
+    return {
+      outer: outer || null,
+      inner: inner || null,
+      marginX: getRegionMargin(reach, bbox[2] - bbox[0]),
+      marginY: getRegionMargin(reach, bbox[3] - bbox[1])
+    };
+  }
+
+  function getRegionMargin(reach, size) {
+    var pct = size > 0 ? reach / size * 100 : Infinity;
+    for (var i=0; i<regionMargins.length; i++) {
+      if (regionMargins[i] >= pct) return regionMargins[i];
+    }
+    return regionMargins[regionMargins.length - 1];
+  }
+
+  function getGlowFilterKey(spec) {
+    return getGlowKey(spec.outer) + '|' + getGlowKey(spec.inner) + '|' +
+      spec.marginX + ' ' + spec.marginY;
+  }
+
+  // The <filter> element for @spec. The outer glow is the blurred coverage of
+  // the source outside the source; the inner glow is the blurred coverage of
+  // everything outside the source, inside the source. The inversion is made
+  // by cutting the source out of a flood rather than with feComponentTransfer,
+  // which Safari fades toward the corners of the source's bounding box.
+  function renderGlowFilter(id, spec) {
+    var mx = spec.marginX, my = spec.marginY;
+    var parts = [];
+    var merge = [];
+    if (spec.outer) {
+      parts.push(
+        `<feGaussianBlur in="SourceAlpha" stdDeviation="${getGlowDeviation(spec.outer)}" result="outer-blur"/>`,
+        `<feFlood flood-color="${escapeAttr(spec.outer.color)}" flood-opacity="${spec.outer.opacity}"/>`,
+        '<feComposite in2="outer-blur" operator="in"/>',
+        '<feComposite in2="SourceAlpha" operator="out" result="outer"/>');
+      merge.push('outer');
+    }
+    merge.push('SourceGraphic');
+    if (spec.inner) {
+      parts.push(
+        '<feFlood flood-color="#000000" flood-opacity="1"/>',
+        '<feComposite in2="SourceAlpha" operator="out"/>',
+        `<feGaussianBlur stdDeviation="${getGlowDeviation(spec.inner)}" result="inner-blur"/>`,
+        `<feFlood flood-color="${escapeAttr(spec.inner.color)}" flood-opacity="${spec.inner.opacity}"/>`,
+        '<feComposite in2="inner-blur" operator="in"/>',
+        '<feComposite in2="SourceAlpha" operator="in" result="inner"/>');
+      merge.push('inner');
+    }
+    return `<filter id="${id}" x="${-mx}%" y="${-my}%" width="${100 + 2 * mx}%" height="${100 + 2 * my}%" color-interpolation-filters="sRGB">\n` +
+      parts.join('\n') + '\n<feMerge>' +
+      merge.map(function(name) { return `<feMergeNode in="${name}"/>`; }).join('') +
+      '</feMerge>\n</filter>\n';
+  }
+
+  function getGlowDeviation(glow) {
+    return Math.round(glow.width / 2 * 1000) / 1000;
+  }
+
+  function escapeAttr(str) {
+    return String(str).replace(/[&<>"]/g, '');
+  }
+
+  // Wraps each glowing shape in a <g> that will carry its filter, and marks the
+  // layer's own <g> if the layer has an outer glow of its own. The filters
+  // themselves are added to <defs> later, by convertGlowFilter().
+  // @children: the SVG objects for @features, one each, in order
+  function applyPolygonGlows(layerObj, children, features, lyr) {
+    var layerGlow = getLayerOuterGlow(lyr);
+    var layerBBox = null;
+    var maxStroke = 0;
+    children.forEach(function(child, i) {
+      var feature = features[i];
+      var geom = feature && (feature.type == 'Feature' ? feature.geometry : feature);
+      var rec = feature && feature.properties || {};
+      var bbox, outer, inner, strokeWidth, wrapper;
+      if (!child || !child.properties || !geom || !geom.coordinates) return;
+      bbox = getCoordinatesBBox(geom.coordinates);
+      if (!bbox) return;
+      strokeWidth = getStrokeWidth(rec);
+      if (strokeWidth > maxStroke) maxStroke = strokeWidth;
+      layerBBox = layerBBox ? mergeBBoxes(layerBBox, bbox) : bbox;
+      outer = layerGlow ? null : getPolygonGlow(rec, 'outer');
+      inner = getPolygonGlow(rec, 'inner');
+      if (!outer && !inner) return;
+      wrapper = {tag: 'g', properties: {}, children: [child],
+        glowFilter: getGlowFilterSpec(outer, inner, bbox, strokeWidth)};
+      // The group is the feature now, so its id goes with it (and the data
+      // attributes of svg-data=, which are added to the layer's children).
+      if ('id' in child.properties) {
+        wrapper.properties.id = child.properties.id;
+        delete child.properties.id;
+      }
+      children[i] = wrapper;
+    });
+    if (layerGlow && layerBBox) {
+      layerObj.glowFilter = getGlowFilterSpec(layerGlow, null, layerBBox, maxStroke);
+    }
+  }
+
+  // Replaces the glow filter an object was marked with by a reference to a
+  // <filter> in @defs, which shapes with the same glows share.
+  function convertGlowFilter(obj, defs) {
+    var spec = obj.glowFilter;
+    var key = getGlowFilterKey(spec);
+    var item = defs.find(function(o) { return o.glowFilterKey === key; });
+    var count;
+    if (!item) {
+      count = defs.filter(function(o) { return !!o.glowFilterKey; }).length;
+      item = {glowFilterKey: key, id: 'glow-' + (count + 1)};
+      item.svg = renderGlowFilter(item.id, spec);
+      defs.push(item);
+    }
+    delete obj.glowFilter;
+    if (!obj.properties) obj.properties = {};
+    obj.properties.filter = 'url(#' + item.id + ')';
+  }
+
+  function getStrokeWidth(rec) {
+    var w = rec['stroke-width'];
+    if (!rec.stroke || rec.stroke == 'none') return 0;
+    return isSvgNumber(w) ? Number(w) : 1;
+  }
+
+  function getCoordinatesBBox(coords) {
+    var bbox = [Infinity, Infinity, -Infinity, -Infinity];
+    extendBBox(bbox, coords);
+    return bbox[0] <= bbox[2] ? bbox : null;
+  }
+
+  function extendBBox(bbox, coords) {
+    var x, y;
+    if (!coords || coords.length === 0) return;
+    if (typeof coords[0] == 'number') {
+      x = coords[0];
+      y = coords[1];
+      if (x < bbox[0]) bbox[0] = x;
+      if (y < bbox[1]) bbox[1] = y;
+      if (x > bbox[2]) bbox[2] = x;
+      if (y > bbox[3]) bbox[3] = y;
+      return;
+    }
+    for (var i=0; i<coords.length; i++) {
+      extendBBox(bbox, coords[i]);
+    }
+  }
+
+  function mergeBBoxes(a, b) {
+    return [Math.min(a[0], b[0]), Math.min(a[1], b[1]),
+      Math.max(a[2], b[2]), Math.max(a[3], b[3])];
+  }
+
+  var SvgGlow = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    DEFAULT_GLOW_WIDTH: DEFAULT_GLOW_WIDTH,
+    GLOW_REACH: GLOW_REACH,
+    applyPolygonGlows: applyPolygonGlows,
+    convertGlowFilter: convertGlowFilter,
+    getGlowDeviation: getGlowDeviation,
+    getGlowFilterKey: getGlowFilterKey,
+    getGlowFilterSpec: getGlowFilterSpec,
+    getGlowKey: getGlowKey,
+    getLayerOuterGlow: getLayerOuterGlow,
+    getMaxGlowWidth: getMaxGlowWidth,
+    getPolygonGlow: getPolygonGlow,
+    glowFields: glowFields,
+    polygonHasGlow: polygonHasGlow,
+    renderGlowFilter: renderGlowFilter
+  });
+
   // convert object properties to definitions for images and hatch fills
   function convertPropertiesToDefinitions(obj, defs) {
     procNode(obj);
 
     function procNode(obj) {
+      if (obj.glowFilter) {
+        convertGlowFilter(obj, defs);
+      }
       if (obj.tag == 'textPath' && obj.properties && obj.properties[LABEL_PATH_PROPERTY]) {
         convertLabelPath(obj.properties, defs);
       }
@@ -30813,7 +31140,7 @@ ${svg}
       lyr = copyLayer(lyr);
       adjustRectangleStyle(lyr);
     }
-    layerObj.children = exportSymbolsForSVG(lyr, dataset, opts);
+    layerObj.children = exportSymbolsForSVG(lyr, dataset, opts, layerObj);
     return layerObj;
   }
 
@@ -30991,7 +31318,7 @@ ${svg}
     return dataUrl.split(',')[1];
   }
 
-  function exportSymbolsForSVG(lyr, dataset, opts) {
+  function exportSymbolsForSVG(lyr, dataset, opts, layerObj) {
     // TODO: convert geojson features one at a time
     var d = utils.defaults({layers: [lyr]}, dataset);
     var geojson = exportDatasetAsGeoJSON(d, opts);
@@ -31003,6 +31330,9 @@ ${svg}
     var children = importGeoJSONFeatures(features,
       utils.defaults({path_label_report: pathLabelReport}, opts));
     reportPathLabels(pathLabelReport, lyr);
+    if (lyr.geometry_type == 'polygon') {
+      applyPolygonGlows(layerObj, children, features, lyr);
+    }
     // Drop empty placeholder <g/> elements (features whose geometry was null in the
     // source data, collapsed during simplification, or otherwise produced no
     // visible output). Keep the layer's records in lockstep so that data-*
@@ -42289,8 +42619,8 @@ ${svg}
           'halo-opacity': {describe: 'halo opacity, 0-1'},
           'label-width': {describe: 'width of a fixed-width text block in px (lines are wrapped in the web UI)'},
           callout: {describe: 'line from the anchor to the text: line, elbow or curve'},
-          'callout-end': {describe: 'arrowhead at the anchor end: arrow, open-arrow or none'},
-          'callout-end-size': {describe: 'length of an arrowhead\'s sides in px (default is 10)'},
+          'callout-end': {describe: 'marker at the anchor end: arrow, open-arrow, ring or none'},
+          'callout-end-size': {describe: 'length of an arrowhead\'s sides, or a ring\'s diameter, in px'},
           'callout-via': {describe: 'x,y of an elbow\'s corner or a point on a curve, in px'},
           'callout-attach': {describe: 'where the callout meets the text, as x,y fractions'},
           'callout-gap': {describe: 'px between the callout and the anchor'},
@@ -44328,6 +44658,24 @@ ${svg}
       .option('fill-hatch', {
         alias_to: 'fill-pattern'
       })
+      .option('outer-glow-color', {
+        describe: 'color of a glow outside each polygon (adds the glow)'
+      })
+      .option('outer-glow-width', {
+        describe: 'how far the outer glow reaches, in px (default is 10)'
+      })
+      .option('outer-glow-opacity', {
+        describe: 'opacity of the outer glow, 0-1'
+      })
+      .option('inner-glow-color', {
+        describe: 'color of a glow inside each polygon (adds the glow)'
+      })
+      .option('inner-glow-width', {
+        describe: 'how far the inner glow reaches, in px (default is 10)'
+      })
+      .option('inner-glow-opacity', {
+        describe: 'opacity of the inner glow, 0-1'
+      })
       .option('stroke', {
         describe: 'stroke color'
       })
@@ -84997,7 +85345,7 @@ ${svg}
     return name == 'rectangle' || name == 'rectangles' || name == 'filter' && opts.cleanup;
   }
 
-  var version = "0.7.71";
+  var version = "0.7.72";
 
   // Parse command line args into commands and run them
   // Function takes an optional Node-style callback. A Promise is returned if no callback is given.
@@ -87865,7 +88213,8 @@ ${svg}
   internal.svg = Object.assign({}, SvgStringify, SvgPathUtils, GeojsonToSvg,
     SvgFeatureUtils,
     SvgLabels, SvgSymbols, SvgLabelPaths, SvgLabelFit, SvgLabelAlign,
-    SvgLabelMetrics, SvgLabelHalo, SvgLabelCallout, SvgLabelMarkup, SvgLineArrows);
+    SvgLabelMetrics, SvgLabelHalo, SvgLabelCallout, SvgLabelMarkup, SvgLineArrows,
+    SvgGlow);
 
   // Reached through the bundle rather than imported from source, unlike most of
   // what tests use, because these modules load fs and fontkit through the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mapshaper",
-  "version": "0.7.71",
+  "version": "0.7.72",
   "description": "A tool for editing geospatial data for mapping and GIS.",
   "keywords": [
     "shapefile",