mapshaper 0.5.83 → 0.5.87

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+v0.5.87
+* Added undo/redo to the "drag vertices" interactive editing mode.
+
+v0.5.86
+* Added keyboard commands for undo/redo for interactive point and label positioning.
+
+v0.5.85
+* Improved arrow and star symbols.
+
+v0.5.84
+* Bug fixes
+
 v0.5.83
 * Added support for importing GeoJSON features with GeometryCollection type geometries.
 * Added "ring" symbol type.

package/mapshaper.js

@@ -1,6 +1,6 @@
 (function () {
 
-  var VERSION = "0.5.79";
+  var VERSION = "0.5.86";
 
 
   var utils = /*#__PURE__*/Object.freeze({
@@ -5362,6 +5362,10 @@
       return i - i2;
     };
 
+    this.getVertex2 = function(i) {
+      return [_xx[i], _yy[i]];
+    };
+
     this.getVertex = function(arcId, nth) {
       var i = this.indexOfVertex(arcId, nth);
       return {
@@ -13712,6 +13716,9 @@
     flipped: 'boolean',
     rotated: 'boolean',
     direction: 'number',
+    sides: 'number', // polygons and stars
+    points: 'number', // polygons and stars
+    anchor: null, // arrows; takes start, middle, end
     'head-angle': 'number',
     'head-width': 'number',
     'head-length': 'number',
@@ -13719,7 +13726,7 @@
     'stem-curve': 'number', // degrees of arc
     'stem-taper': 'number',
     'stem-length': 'number',
-    'min-stem': 'number',
+    'min-stem-ratio': 'number',
     'arrow-scaling': 'number',
     effect: null // e.g. "fade"
   }, stylePropertyTypes);
@@ -20111,16 +20118,17 @@ ${svg}
         type: 'distance'
       })
       .option('sides', {
-        describe: 'sides of a polygon or star symbol',
+        describe: 'number of sides of a polygon symbol',
         type: 'number'
       })
       .option('orientation', {
+        // TODO: removed (replaced by flipped and rotated)
         // describe: 'use orientation=b for a rotated or flipped orientation'
       })
-      .option('flipped', {
-        type: 'flag',
-        describe: 'symbol is vertically flipped'
-      })
+      // .option('flipped', {
+      //   type: 'flag',
+      //   describe: 'symbol is vertically flipped'
+      // })
       .option('rotated', {
         type: 'flag',
         describe: 'symbol is rotated to a different orientation'
@@ -20128,8 +20136,8 @@ ${svg}
       .option('rotation', {
         describe: 'rotation of symbol in degrees'
       })
-      .option('length', {
-        // alias for arrow-length
+      .option('points', {
+        describe: '(star) number of points'
       })
       .option('point-ratio', {
         old_alias: 'star-ratio',
@@ -20183,6 +20191,9 @@ ${svg}
         describe: '(arrow) min ratio of stem to total length',
         type: 'number'
       })
+      .option('anchor', {
+        describe: '(arrow) takes one of: start, middle, end (default is start)'
+      })
       .option('stroke', {})
       .option('stroke-width', {})
       .option('fill', {
@@ -38063,33 +38074,17 @@ ${svg}
   //   return [stem, head];
   // }
 
+  // function getStickArrowTip(totalLen, curve) {
+  //   // curve/2 intersects the arrowhead at 90deg (trigonometry)
+  //   var theta = Math.abs(curve/2) / 180 * Math.PI;
+  //   var dx = totalLen * Math.sin(theta) * (curve > 0 ? -1 : 1);
+  //   var dy = totalLen * Math.cos(theta);
+  //   return [dx, dy];
+  // }
 
-  function getFilledArrowCoords(d) {
-    var direction = d.rotation || d.direction || 0,
-        stemTaper = d['stem-taper'] || 0,
-        stemCurve = d['stem-curve'] || 0,
-        size = calcArrowSize(d);
-
-    if (!size) return null;
-
-    var headDx = size.headWidth / 2,
-        stemDx = size.stemWidth / 2,
-        baseDx = stemDx * (1 - stemTaper),
-        coords;
-
-    if (!stemCurve || Math.abs(stemCurve) > 90) {
-      coords = calcStraightArrowCoords(size.stemLen, size.headLen, stemDx, headDx, baseDx);
-    } else {
-      if (direction > 0) stemCurve = -stemCurve;
-      coords = getCurvedArrowCoords(size.stemLen, size.headLen, size.stemCurve, stemDx, headDx, baseDx);
-    }
-
-    rotateCoords(coords, direction);
-    if (d.flipped) {
-      flipY(coords);
-    }
-    return [coords];
-  }
+  // function addPoints(a, b) {
+  //   return [a[0] + b[0], a[1] + b[1]];
+  // }
 
   function calcStraightArrowCoords(stemLen, headLen, stemDx, headDx, baseDx) {
     return [[baseDx, 0], [stemDx, stemLen], [headDx, stemLen], [0, stemLen + headLen],
@@ -38097,35 +38092,27 @@ ${svg}
   }
 
   function calcArrowSize(d) {
-    var totalLen = d.radius || d.length || d.r || 0,
-        unscaledStemWidth = d['stem-width'] || 2,
-        unscaledHeadWidth = d['head-width'] || unscaledStemWidth * 3,
-        unscaledHeadLen = d['head-length'] || calcHeadLength(unscaledHeadWidth, d),
+    // don't display arrows with negative length
+    var totalLen = Math.max(d.radius || d.length || d.r || 0, 0),
         scale = 1,
-        o = {};
+        o = initArrowSize(d); // calc several parameters
 
     if (totalLen > 0) {
-      scale = calcScale(totalLen, unscaledHeadLen, d);
-      o.headWidth = unscaledHeadWidth * scale;
-      o.headLen = unscaledHeadLen * scale;
-      o.stemWidth = unscaledStemWidth * scale;
+      scale = calcScale(totalLen, o.headLen, d);
+      o.stemWidth *= scale;
+      o.headWidth *= scale;
+      o.headLen *= scale;
       o.stemLen = totalLen - o.headLen;
-
-    } else {
-      o.headWidth = unscaledHeadWidth;
-      o.headLen = unscaledHeadLen;
-      o.stemWidth = unscaledStemWidth;
-      o.stemLen = d['stem-length'] || 0;
     }
 
-    if (unscaledHeadWidth < unscaledStemWidth) {
+    if (o.headWidth < o.stemWidth) {
       stop('Arrow head must be at least as wide as the stem.');
     }
     return o;
   }
 
   function calcScale(totalLen, headLen, d) {
-    var minStemRatio = d['min-stem'] >= 0 ? d['min-stem'] : 0;
+    var minStemRatio = d['min-stem-ratio'] >= 0 ? d['min-stem-ratio'] : 0;
     var stemLen = d['stem-length'] || 0;
     var maxHeadPct = 1 - minStemRatio;
     var headPct = headLen / totalLen;
@@ -38139,40 +38126,80 @@ ${svg}
     return scale;
   }
 
-  // function getStickArrowTip(totalLen, curve) {
-  //   // curve/2 intersects the arrowhead at 90deg (trigonometry)
-  //   var theta = Math.abs(curve/2) / 180 * Math.PI;
-  //   var dx = totalLen * Math.sin(theta) * (curve > 0 ? -1 : 1);
-  //   var dy = totalLen * Math.cos(theta);
-  //   return [dx, dy];
-  // }
-
-  function addPoints(a, b) {
-    return [a[0] + b[0], a[1] + b[1]];
+  function initArrowSize(d) {
+    var sizeRatio = getHeadSizeRatio(d['head-angle'] || 40); // length to width
+    var o = {
+      stemWidth: d['stem-width'] || 2,
+      stemLen: d['stem-length'] || 0,
+      headWidth: d['head-width'],
+      headLen: d['head-length']
+    };
+    if (!o.headWidth) {
+      if (o.headLen) {
+        o.headWidth = o.headLen / sizeRatio;
+      } else {
+        o.headWidth = o.stemWidth * 3; // assumes stemWidth has been set
+      }
+    }
+    if (!o.headLen) {
+      o.headLen = o.headWidth * sizeRatio;
+    }
+    return o;
   }
 
 
-  function calcHeadLength(headWidth, d) {
-    var headAngle = d['head-angle'] || 40;
-    var headRatio = 1 / Math.tan(Math.PI * headAngle / 180 / 2) / 2; // length-to-width head ratio
-    return headWidth * headRatio;
+  // Returns ratio of head length to head width
+  function getHeadSizeRatio(headAngle) {
+    return 1 / Math.tan(Math.PI * headAngle / 180 / 2) / 2;
   }
 
-  function getCurvedArrowCoords(stemLen, headLen, curvature, stemDx, headDx, baseDx) {
+  function getFilledArrowCoords(d) {
+    var direction = d.rotation || d.direction || 0,
+        stemTaper = d['stem-taper'] || 0,
+        curvature = d['stem-curve'] || 0,
+        size = calcArrowSize(d);
+    if (!size) return null;
+    var stemLen = size.stemLen,
+        headLen = size.headLen,
+        headDx = size.headWidth / 2,
+        stemDx = size.stemWidth / 2,
+        baseDx = stemDx * (1 - stemTaper),
+        head, stem, coords, dx, dy;
+
+    if (curvature) {
+      if (direction > 0) curvature = -curvature;
+      var theta = Math.abs(curvature) / 180 * Math.PI;
+      var sign = curvature > 0 ? 1 : -1;
+      var ax = baseDx * Math.cos(theta); // rotate arrow base
+      var ay = baseDx * Math.sin(theta) * -sign;
+      dx = stemLen * Math.sin(theta / 2) * sign;
+      dy = stemLen * Math.cos(theta / 2);
+      var leftStem = getCurvedStemCoords(-ax, -ay, -stemDx + dx, dy, theta);
+      var rightStem = getCurvedStemCoords(ax, ay, stemDx + dx, dy, theta);
+      stem = leftStem.concat(rightStem.reverse());
+
+    } else {
+      dx = 0;
+      dy = stemLen;
+      stem = [[-baseDx, 0], [baseDx, 0], [baseDx, 0]];
+    }
+
     // coordinates go counter clockwise, starting from the leftmost head coordinate
-    var theta = Math.abs(curvature) / 180 * Math.PI;
-    var sign = curvature > 0 ? 1 : -1;
-    var dx = stemLen * Math.sin(theta / 2) * sign;
-    var dy = stemLen * Math.cos(theta / 2);
-    var head = [[stemDx + dx, dy], [headDx + dx, dy],
-      [dx, headLen + dy], [-headDx + dx, dy], [-stemDx + dx, dy]];
-    var ax = baseDx * Math.cos(theta); // rotate arrow base
-    var ay = baseDx * Math.sin(theta) * -sign;
-    var leftStem = getCurvedStemCoords(-ax, -ay, -stemDx + dx, dy, theta);
-    var rightStem = getCurvedStemCoords(ax, ay, stemDx + dx, dy, theta);
-    var stem = leftStem.concat(rightStem.reverse());
-    // stem.pop();
-    return stem.concat(head);
+    head = [[stemDx + dx, dy], [headDx + dx, dy],
+        [dx, headLen + dy], [-headDx + dx, dy], [-stemDx + dx, dy]];
+
+    coords = stem.concat(head);
+    if (d.anchor == 'end') {
+      scaleAndShiftCoords(coords, 1, [-dx, -dy - headLen]);
+    } else if (d.anchor == 'middle') {
+      scaleAndShiftCoords(coords, 1, [-dx/2, (-dy - headLen)/2]);
+    }
+
+    rotateCoords(coords, direction);
+    if (d.flipped) {
+      flipY(coords);
+    }
+    return [coords];
   }
 
   // ax, ay: point on the base
@@ -38209,43 +38236,31 @@ ${svg}
     return coords;
   }
 
-  // sides: e.g. 5-pointed star has 10 sides
-  // radius: distance from center to point
-  //
   function getPolygonCoords(d) {
-    var radius = d.radius || d.length || d.r;
+    var radius = d.radius || d.length || d.r,
+        sides = +d.sides || getSidesByType(d.type),
+        rotated = sides % 2 == 1,
+        coords = [],
+        angle, b;
+
     if (radius > 0 === false) return null;
-    var type = d.type;
-    var sides = +d.sides || getDefaultSides(type);
-    var isStar = type == 'star';
-    if (isStar && (sides < 6 || sides % 2 !== 0)) {
-      stop(`Invalid number of sides for a star (${sides})`);
-    } else if (sides >= 3 === false) {
+    if (sides >= 3 === false) {
       stop(`Invalid number of sides (${sides})`);
     }
-    var coords = [],
-        angle = 360 / sides,
-        b = isStar ? 1 : 0.5,
-        theta, even, len;
     if (d.orientation == 'b' || d.flipped || d.rotated) {
-      b = 0;
+      rotated = !rotated;
     }
+    b = rotated ? 0 : 0.5;
     for (var i=0; i<sides; i++) {
-      even = i % 2 == 0;
-      len = radius;
-      if (isStar && even) {
-        len *= (d.star_ratio || 0.5);
-      }
-      theta = (i + b) * angle % 360;
-      coords.push(getPlanarSegmentEndpoint(0, 0, theta, len));
+      angle = (i + b) / sides * 360;
+      coords.push(getPlanarSegmentEndpoint(0, 0, angle, radius));
     }
     coords.push(coords[0].concat());
     return [coords];
   }
 
-  function getDefaultSides(type) {
+  function getSidesByType(type) {
     return {
-      star: 10,
       circle: 72,
       triangle: 3,
       square: 4,
@@ -38258,6 +38273,52 @@ ${svg}
     }[type] || 4;
   }
 
+  function getStarCoords(d) {
+    var radius = d.radius || d.length || d.r,
+        points = d.points || d.sides && d.sides / 2 || 5,
+        sides = points * 2,
+        minorRadius = getMinorRadius(points) * radius,
+        b = d.orientation == 'b' || d.flipped || d.rotated ? 0 : 1,
+        coords = [],
+        angle, len;
+
+    if (radius > 0 === false) return null;
+    if (points < 5) {
+      stop(`Invalid number of points for a star (${points})`);
+    }
+    for (var i=0; i<sides; i++) {
+      len = i % 2 == 0 ? minorRadius : radius;
+      angle = (i + b) / sides * 360;
+      coords.push(getPlanarSegmentEndpoint(0, 0, angle, len));
+    }
+    coords.push(coords[0].concat());
+    return [coords];
+  }
+
+  function getMinorRadius(points) {
+    var innerAngle = 360 / points;
+    var pointAngle = getDefaultPointAngle(points);
+    var thetaA = Math.PI / 180 * innerAngle / 2;
+    var thetaB = Math.PI / 180 * pointAngle / 2;
+    var a = Math.tan(thetaB) / (Math.tan(thetaB) + Math.tan(thetaA));
+    var c = a / Math.cos(thetaA);
+    return c;
+  }
+
+  function getDefaultPointAngle(points) {
+    var minSkip = 1;
+    var maxSkip = Math.ceil(points / 2) - 2;
+    var skip = Math.floor((maxSkip + minSkip) / 2);
+    return getPointAngle(points, skip);
+  }
+
+  // skip: number of adjacent points to skip when drawing a segment
+  function getPointAngle(points, skip) {
+    var unitAngle = 360 / points;
+    var centerAngle = unitAngle * (skip + 1);
+    return 180 - centerAngle;
+  }
+
   // Returns GeoJSON MultiPolygon coords
   function getRingCoords(d) {
     var radii = parseRings(d.radii || '2');
@@ -38312,6 +38373,8 @@ ${svg}
       } else if (d.type == 'ring') {
         coords = getRingCoords(d);
         geojsonType = 'MultiPolygon';
+      } else if (d.type == 'star') {
+        coords = getStarCoords(d);
       } else {
         coords = getPolygonCoords(d);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mapshaper",
-	"version": "0.5.83",
+	"version": "0.5.87",
 	"description": "A tool for editing vector datasets for mapping and GIS.",
 	"keywords": [
 		"shapefile",