mapshaper 0.6.13 → 0.6.15

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mapshaper",
-	"version": "0.6.13",
+	"version": "0.6.15",
 	"description": "A tool for editing vector datasets for mapping and GIS.",
 	"keywords": [
 		"shapefile",
@@ -28,7 +28,7 @@
 		"lint": "eslint --ext mjs src/",
 		"prepublishOnly": "npm lint; npm test; ./pre-publish",
 		"postpublish": "./release_web_ui; ./release_github_version",
-		"browserify": "browserify -r sync-request -r mproj -r buffer -r iconv-lite -r fs -r flatbush -r rw -r path -r kdbush -r @tmcw/togeojson -o www/modules.js",
+		"browserify": "browserify -r sync-request -r mproj -r buffer -r iconv-lite -r fs -r flatbush -r rw -r path -r kdbush -r @tmcw/togeojson -r @placemarkio/tokml -o www/modules.js",
 		"dev": "rollup --config --watch"
 	},
 	"main": "./mapshaper.js",
@@ -40,12 +40,15 @@
 		"!.DS_Store"
 	],
 	"dependencies": {
-		"@tmcw/togeojson": "^4.7.0",
-		"@xmldom/xmldom": "^0.8.2",
+		"@placemarkio/tokml": "^0.3.3",
+		"@tmcw/togeojson": "^5.5.0",
+		"@xmldom/xmldom": "^0.8.6",
+		"adm-zip": "^0.5.9",
 		"commander": "7.0.0",
 		"cookies": "^0.8.0",
-		"d3-color": "2.0.0",
-		"d3-scale-chromatic": "2.0.0",
+		"d3-color": "3.1.0",
+		"d3-interpolate": "^3.0.1",
+		"d3-scale-chromatic": "3.0.0",
 		"delaunator": "^5.0.0",
 		"flatbush": "^3.2.1",
 		"geokdbush": "^1.1.0",
@@ -64,7 +67,7 @@
 		"eslint": "^8.16.0",
 		"mocha": "^10.0.0",
 		"rollup": "^2.73.0",
-		"shell-quote": "^1.6.1",
+		"shell-quote": "^1.7.4",
 		"underscore": "^1.13.1"
 	},
 	"mocha": {

package/www/basemap.js

@@ -1,6 +1,6 @@
 window.mapboxParams = {
-  js: 'https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js',
-  css: 'https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css',
+  js: 'https://api.mapbox.com/mapbox-gl-js/v2.11.1/mapbox-gl.js',
+  css: 'https://api.mapbox.com/mapbox-gl-js/v2.11.1/mapbox-gl.css',
   key: 'pk.eyJ1IjoiZ3JhbW1hdGEiLCJhIjoiY2wxMzI4b3dqMDNhMjNpcDhzcmU0aGh5diJ9.m1lacx48pTYls-X3FVhG9g',
   styles: [{
     name: 'Map',

package/www/mapshaper-gui.js

@@ -392,7 +392,7 @@
       function readEntry(entry) {
         var filename = entry.filename,
             isValid = !entry.directory && GUI.isReadableFileType(filename) &&
-                !/^__MACOSX/.test(filename); // ignore "resource-force" files
+                !/^__MACOSX/.test(filename); // ignore "resource-fork" files
         if (isValid) {
           entry.getData(new zip.BlobWriter(), function(file) {
             file.name = filename; // Give the Blob a name, like a File object
@@ -1420,12 +1420,14 @@
     async function expandFiles(files) {
       var files2 = [], expanded;
       for (var f of files) {
-        if (internal.isZipFile(f.name) || /\.kmz$/.test(f.name)) {
+        if (internal.isZipFile(f.name)) {
           expanded = await readZipFile(f);
-          files2 = files2.concat(expanded);
+        } else if (internal.isKmzFile(f.name)) {
+          expanded = await readKmzFile(f);
         } else {
-          files2.push(f);
+          expanded = [f];
         }
+        files2 = files2.concat(expanded);
       }
       return files2;
     }
@@ -1582,6 +1584,15 @@
       });
     }
 
+    async function readKmzFile(file) {
+      var files = await readZipFile(file);
+      var name = files[0] && files[0].name;
+      if (name == 'doc.kml') {
+        files[0].name = internal.replaceFileExtension(file.name, 'kml');
+      }
+      return files;
+    }
+
     async function readZipFile(file) {
       var files = [];
       await wait(35); // pause a beat so status message can display
@@ -2466,13 +2477,13 @@
     // if map is at full extent, show full extent
     // TODO: handle case that scale is 1 and map is panned away from center
     if (ext.scale() == 1 || !dest) {
-      ext.setBounds(newBounds, strictBounds);
+      ext.setFullBounds(newBounds, strictBounds);
       ext.home(); // sets full extent and triggers redraw
     } else {
       // if map is zoomed, stay centered on the same geographic location, at the same relative scale
       proj = internal.getProjTransform2(src, dest);
       newCP = proj(oldBounds.centerX(), oldBounds.centerY());
-      ext.setBounds(newBounds, strictBounds);
+      ext.setFullBounds(newBounds, strictBounds);
       if (!newCP) {
         // projection of center point failed; use center of bounds
         // (also consider just resetting the view using ext.home())
@@ -3392,7 +3403,7 @@
     }
 
     function initFormatMenu() {
-      var defaults = ['shapefile', 'geojson', 'topojson', 'json', 'dsv', 'svg'];
+      var defaults = ['shapefile', 'geojson', 'topojson', 'json', 'dsv', 'kml', 'svg'];
       var formats = utils$1.uniq(defaults.concat(getInputFormats()));
       var items = formats.map(function(fmt) {
         return utils$1.format('<div><label><input type="radio" name="format" value="%s"' +
@@ -3898,6 +3909,11 @@
     var history, offset, stashedUndo;
     reset();
 
+    // Undo history is cleared when the editing mode changes.
+    gui.on('interaction_mode_change', function(e) {
+      gui.undo.clear();
+    });
+
     function reset() {
       history = [];
       stashedUndo = null;
@@ -4167,12 +4183,28 @@
 
   function InteractionMode(gui) {
 
+    // TODO: finish this list
+    // var modes = [{
+    //   name: 'info',
+    //   label: 'inspect features',
+    //   selection: true,
+    //   popup: true,
+    //   types: ['standard', 'polygons', 'lines', 'labels', 'points']
+    // }, {
+    //   name: 'selection',
+    //   label: 'select features',
+    //   selection: true,
+    //   popup: true,
+    //   types: ['standard', 'polygons', 'lines', 'table', 'labels']
+    // }]
+
     var menus = {
       standard: ['info', 'selection', 'data', 'box'],
       polygons: ['info', 'selection', 'data', 'box', 'vertices'],
       lines: ['info', 'selection', 'data', 'box', 'vertices'],
       table: ['info', 'selection', 'data'],
       labels: ['info', 'selection', 'data', 'box', 'labels', 'location'],
+      // points: ['info', 'selection', 'data', 'box', 'location', 'add-points']
       points: ['info', 'selection', 'data', 'box', 'location']
     };
 
@@ -4191,6 +4223,7 @@
       location: 'drag points',
       vertices: 'edit vertices',
       selection: 'select features',
+      'add-points': 'add points',
       off: 'turn off'
     };
     var btn, menu;
@@ -4243,6 +4276,10 @@
       setMode('off');
     };
 
+    this.modeUsesSelection = function(mode) {
+      return ['info', 'selection', 'data', 'labels', 'location', 'vertices'].includes(mode);
+    };
+
     this.modeUsesPopup = function(mode) {
       return ['info', 'selection', 'data', 'box', 'labels', 'location'].includes(mode);
     };
@@ -6289,10 +6326,11 @@
     // (some modes do not support pinning)
     gui.on('interaction_mode_change', function(e) {
       updateSelectionState(null);
-      if (e.mode == 'off' || e.mode == 'box') {
-        turnOff();
-      } else {
+      // if (e.mode == 'off' || e.mode == 'box') {
+      if (gui.interaction.modeUsesSelection(e.mode)) {
         turnOn(e.mode);
+      } else {
+        turnOff();
       }
     });
 
@@ -7637,7 +7675,14 @@
     });
 
     _popup.on('update', function(e) {
-      _self.dispatchEvent('data_change', e.data); // let map know which field has changed
+      // data_change event no longer needed (update is handled below)
+      // _self.dispatchEvent('data_change', e.data); // let map know which field has changed
+      gui.session.dataValueUpdated(e.id, e.field, e.value);
+      // Refresh the display if a style variable has been changed interactively
+      if (internal.isSupportedSvgStyleProperty(e.field)) {
+        // drawLayers();
+        gui.dispatchEvent('map-needs-refresh');
+      }
     });
 
     hit.on('change', function(e) {
@@ -8135,10 +8180,6 @@
     initPointDragging(gui, ext, hit);
     initVertexDragging(gui, ext, hit);
 
-    gui.on('interaction_mode_change', function(e) {
-      gui.undo.clear(); // TODO: put this elsewhere?
-    });
-
     // function isClickEvent(up, down) {
     //   var elapsed = Math.abs(down.timeStamp - up.timeStamp);
     //   var dx = up.screenX - down.screenX;
@@ -8148,6 +8189,39 @@
     // }
   }
 
+  function initPointDrawing(gui, ext, hit) {
+    function active(e) {
+      return e.id > -1 && gui.interaction.getMode() == 'add-points';
+    }
+
+  }
+
+  function Pencil(gui, mouse, hit) {
+    var self = this;
+    var _on = false;
+
+    self.turnOn = function() {
+      _on = true;
+    };
+
+    self.turnOff = function() {
+      _on = false;
+    };
+
+
+
+
+
+
+  }
+
+  function initDrawing(gui, ext, mouse, hit) {
+
+    initPointDrawing(gui, new Pencil(gui, mouse, hit));
+
+
+  }
+
   var darkStroke = "#334",
       lightStroke = "#b7d9ea",
       violet = "#cc6acc",
@@ -8473,27 +8547,27 @@
   function MapExtent(_position) {
     var _scale = 1,
         _cx, _cy, // center in geographic units
-        _contentBounds,
+        _fullBounds, // full (zoomed-out) content bounds, including any padding
         _strictBounds, // full extent must fit inside, if set
         _self = this,
         _frame;
 
     _position.on('resize', function(e) {
       if (ready()) {
-        onChange({resize: true});
+        triggerChangeEvent({resize: true});
       }
     });
 
-    function ready() { return !!_contentBounds; }
+    function ready() { return !!_fullBounds; }
 
     this.reset = function() {
       if (!ready()) return;
-      recenter(_contentBounds.centerX(), _contentBounds.centerY(), 1, {reset: true});
+      recenter(_fullBounds.centerX(), _fullBounds.centerY(), 1, {reset: true});
     };
 
     this.home = function() {
       if (!ready()) return;
-      recenter(_contentBounds.centerX(), _contentBounds.centerY(), 1);
+      recenter(_fullBounds.centerX(), _fullBounds.centerY(), 1);
     };
 
     this.pan = function(xpix, ypix) {
@@ -8560,30 +8634,29 @@
 
     // k scales the size of the bbox (used by gui to control fp error when zoomed very far)
     this.getBounds = function(k) {
-      if (!_contentBounds) return new Bounds();
+      if (!_fullBounds) return new Bounds();
       return calcBounds(_cx, _cy, _scale / (k || 1));
     };
 
     // Update the extent of 'full' zoom without navigating the current view
     //
-    this.setBounds = function(contentBounds, strictBounds) {
-      var b = contentBounds;
-      var prev = _contentBounds;
+    this.setFullBounds = function(fullBounds, strictBounds) {
+      var prev = _fullBounds;
+      var b = _fullBounds = fullBounds;
       if (!b.hasBounds()) return; // kludge
       if (strictBounds) {
         _strictBounds = Array.isArray(strictBounds) ? new Bounds(strictBounds) : strictBounds;
       } else {
         _strictBounds = null;
       }
-      _contentBounds = _frame ? b : padBounds(b, 4); // padding if not in frame mode
       if (_strictBounds) {
-        _contentBounds = fitIn(_contentBounds, _strictBounds);
+        _fullBounds = fitIn(_fullBounds, _strictBounds);
       }
       if (prev) {
-        _scale = _scale * fillOut(_contentBounds).width() / fillOut(prev).width();
+        _scale = _scale * fillOut(_fullBounds).width() / fillOut(prev).width();
       } else {
-        _cx = _contentBounds.centerX();
-        _cy = _contentBounds.centerY();
+        _cx = _fullBounds.centerX();
+        _cy = _fullBounds.centerY();
       }
     };
 
@@ -8614,12 +8687,12 @@
       scale = scale ? limitScale(scale) : _scale;
       if (cx == _cx && cy == _cy && scale == _scale) return;
       navigate(cx, cy, scale);
-      onChange(data);
+      triggerChangeEvent(data);
     }
 
     function navigate(cx, cy, scale) {
       if (_strictBounds) {
-        var full = fillOut(_contentBounds);
+        var full = fillOut(_fullBounds);
         var minScale = full.height() / _strictBounds.height();
         if (scale < minScale) {
           var dx = cx - _cx;
@@ -8641,7 +8714,7 @@
       _scale = scale;
     }
 
-    function onChange(data) {
+    function triggerChangeEvent(data) {
       data = data || {};
       _self.dispatchEvent('change', data);
     }
@@ -8649,10 +8722,10 @@
     // stop zooming before rounding errors become too obvious
     function maxScale() {
       var minPixelScale = 1e-16;
-      var xmax = maxAbs(_contentBounds.xmin, _contentBounds.xmax, _contentBounds.centerX());
-      var ymax = maxAbs(_contentBounds.ymin, _contentBounds.ymax, _contentBounds.centerY());
-      var xscale = _contentBounds.width() / _position.width() / xmax / minPixelScale;
-      var yscale = _contentBounds.height() / _position.height() / ymax / minPixelScale;
+      var xmax = maxAbs(_fullBounds.xmin, _fullBounds.xmax, _fullBounds.centerX());
+      var ymax = maxAbs(_fullBounds.ymin, _fullBounds.ymax, _fullBounds.centerY());
+      var xscale = _fullBounds.width() / _position.width() / xmax / minPixelScale;
+      var yscale = _fullBounds.height() / _position.height() / ymax / minPixelScale;
       return Math.min(xscale, yscale);
     }
 
@@ -8669,7 +8742,7 @@
       if (_frame) {
         full = fillOutFrameBounds(_frame);
       } else {
-        full = fillOut(_contentBounds);
+        full = fillOut(_fullBounds);
       }
       if (_strictBounds) {
         full = fitIn(full, _strictBounds);
@@ -8689,9 +8762,9 @@
       return bounds;
     }
 
-    function padBounds(b, margin) {
-      var wpix = _position.width() - 2 * margin,
-          hpix = _position.height() - 2 * margin,
+    function padBounds(b, marginpix) {
+      var wpix = _position.width() - 2 * marginpix,
+          hpix = _position.height() - 2 * marginpix,
           xpad, ypad, b2;
       if (wpix <= 0 || hpix <= 0) {
         return new Bounds(0, 0, 0, 0);
@@ -8699,8 +8772,8 @@
       b = b.clone();
       b2 = b.clone();
       b2.fillOut(wpix / hpix);
-      xpad = b2.width() / wpix * margin;
-      ypad = b2.height() / hpix * margin;
+      xpad = b2.width() / wpix * marginpix;
+      ypad = b2.height() / hpix * marginpix;
       b.padBounds(xpad, ypad, xpad, ypad);
       return b;
     }
@@ -8830,8 +8903,8 @@
   function getPixelColorFunction() {
     var canv = El('canvas').node();
     canv.width = canv.height = 1;
+    var ctx = canv.getContext('2d', {willReadFrequently: true});
     return function(col) {
-      var ctx = canv.getContext('2d');
       var pixels;
       ctx.fillStyle = col;
       ctx.fillRect(0, 0, 1, 1);
@@ -8843,6 +8916,8 @@
   function DisplayCanvas() {
     var _self = El('canvas'),
         _canvas = _self.node(),
+        // TODO: compare performance of willReadFrequently setting
+        // _ctx = _canvas.getContext('2d', {willReadFrequently: true}),
         _ctx = _canvas.getContext('2d'),
         _pixelColor = getPixelColorFunction(),
         _ext;
@@ -8997,7 +9072,6 @@
       var w = _canvas.width,
           h = _canvas.height,
           rgba = _pixelColor(color),
-          // imageData = _ctx.createImageData(w, h),
           imageData = _ctx.getImageData(0, 0, w, h),
           pixels = new Uint32Array(imageData.data.buffer),
           shp, x, y, i, j, n, m,
@@ -10083,7 +10157,6 @@
       return bl.concat(tr);
     }
 
-
     function initMap() {
       if (!enabled() || map || loading) return;
       loading = true;
@@ -10177,17 +10250,15 @@
         map = this,
         _mouse = new MouseArea(el, position),
         _ext = new MapExtent(position),
-        _hit = new InteractiveSelection(gui, _ext, _mouse),
         _nav = new MapNav(gui, _ext, _mouse),
-        _boxTool = new BoxTool(gui, _ext, _nav),
-        _selectionTool = new SelectionTool(gui, _ext, _hit),
         _visibleLayers = [], // cached visible map layers
         _fullBounds = null,
+        _hit,
+        _basemap,
         _intersectionLyr, _activeLyr, _overlayLyr,
-        _inspector, _stack,
-        _dynamicCRS;
+        _stack, _dynamicCRS;
 
-    var _basemap = new Basemap(gui, _ext);
+    _basemap = new Basemap(gui, _ext);
 
     if (gui.options.showMouseCoordinates) {
       new CoordinatesDisplay(gui, _ext, _mouse);
@@ -10326,16 +10397,16 @@
 
       _activeLyr = getDisplayLayer(e.layer, e.dataset, getDisplayOptions());
       _activeLyr.style = getActiveStyle(_activeLyr.layer, gui.state.dark_basemap);
-
       _activeLyr.active = true;
-      // if (_inspector) _inspector.updateLayer(_activeLyr);
-      _hit.setLayer(_activeLyr);
+
       if (e.flags.same_table) {
         // data may have changed; if popup is open, it needs to be refreshed
         gui.dispatchEvent('popup-needs-refresh');
-      } else {
+      } else if (_hit) {
+        _hit.setLayer(_activeLyr);
         _hit.clearSelection();
       }
+
       updateVisibleMapLayers();
       fullBounds = getFullBounds();
 
@@ -10352,7 +10423,8 @@
       } else {
         _nav.setZoomFactor(1);
       }
-      _ext.setBounds(fullBounds, getStrictBounds()); // update 'home' button extent
+      _ext.setFullBounds(fullBounds, getStrictBounds()); // update 'home' button extent
+
       _fullBounds = fullBounds;
       if (needReset) {
         _ext.reset();
@@ -10368,19 +10440,13 @@
       gui.buttons.show();
 
       if (opts.inspectorControl) {
-        _inspector = new InspectionControl2(gui, _hit);
-        _inspector.on('data_change', function(e) {
-          // Add an entry to the session history
-          gui.session.dataValueUpdated(e.id, e.field, e.value);
-          // Refresh the display if a style variable has been changed interactively
-          if (internal.isSupportedSvgStyleProperty(e.field)) {
-            drawLayers();
-          }
-        });
-      }
-
-      if (gui.interaction) {
+        _hit = new InteractiveSelection(gui, _ext, _mouse),
+        new InspectionControl2(gui, _hit);
+        new SelectionTool(gui, _ext, _hit),
+        new BoxTool(gui, _ext, _nav),
         initInteractiveEditing(gui, _ext, _hit);
+        // initDrawing(gui, _ext, _mouse, _hit);
+        _hit.on('change', updateOverlayLayer);
       }
 
       _ext.on('change', function(e) {
@@ -10392,8 +10458,6 @@
         drawLayers('nav');
       });
 
-      _hit.on('change', updateOverlayLayer);
-
       gui.on('resize', function() {
         position.update(); // kludge to detect new map size after console toggle
       });
@@ -10438,7 +10502,7 @@
       var cy = viewBounds.centerY();
       rec.bbox = [cx - w/2, cy - h/2, cx + w/2, cy + h/2];
       _ext.setFrame(getFrameData());
-      _ext.setBounds(new Bounds(rec.bbox));
+      _ext.setFullBounds(new Bounds(rec.bbox));
       _ext.reset();
     }
 
@@ -10450,39 +10514,33 @@
     }
 
     function getFullBounds() {
-      var b = new Bounds();
-      var marginPct = 0.025;
-      var pad = 1e-4;
       if (isPreviewView()) {
         return internal.getFrameLayerBounds(internal.findFrameLayer(model));
       }
+      var b = new Bounds();
       getDrawableContentLayers().forEach(function(lyr) {
         b.mergeBounds(lyr.bounds);
-        if (isTableView()) {
-          marginPct = getTableMargin(lyr.layer);
-        }
       });
+
       if (!b.hasBounds()) {
         // assign bounds to empty layers, to prevent rendering errors downstream
         b.setBounds(0,0,0,0);
       }
-      // Inflate display bounding box by a tiny amount (gives extent to single-point layers and collapsed shapes)
-      b.padBounds(pad,pad,pad,pad);
-      // add margin
-      b.scale(1 + marginPct * 2);
-      return b;
-    }
 
-    // Calculate margin when displaying content at full zoom, as pct of screen size
-    function getTableMargin(lyr) {
-      var n = internal.getFeatureCount(lyr);
-      var pct = 0.04;
-      if (n < 5) {
-        pct = 0.2;
-      } else if (n < 100) {
-        pct = 0.1;
+      // add margin
+      // use larger margin for small sizes
+      var widthPx = _ext.width();
+      var marginPct = widthPx < 700 && 3.5 || widthPx < 800 && 3 || 2.5;
+      if (isTableView()) {
+        var n = internal.getFeatureCount(_activeLyr.layer);
+        marginPct = n < 5 && 20 || n < 100 && 10 || 4;
       }
-      return pct;
+      b.scale(1 + marginPct / 100 * 2);
+
+      // Inflate display bounding box by a tiny amount (gives extent to single-point layers and collapsed shapes)
+      b.padBounds(1e-4, 1e-4, 1e-4, 1e-4);
+
+      return b;
     }
 
     function isActiveLayer(lyr) {
@@ -10615,7 +10673,7 @@
       if (layersMayHaveChanged) {
         // kludge to handle layer visibility toggling
         _ext.setFrame(isPreviewView() ? getFrameData() : null);
-        _ext.setBounds(getFullBounds(), getStrictBounds());
+        _ext.setFullBounds(getFullBounds(), getStrictBounds());
         updateLayerStyles(contentLayers);
         updateLayerStackOrder(model.getLayers());// update stack_id property of all layers
       }