mapshaper 0.6.18 → 0.6.20

package/www/mapshaper-gui.js

@@ -27,6 +27,7 @@
     get defaults () { return defaults; },
     get extend () { return extend; },
     get inherit () { return inherit; },
+    get promisify () { return promisify; },
     get reduceAsync () { return reduceAsync; },
     get merge () { return merge; },
     get difference () { return difference; },
@@ -1106,6 +1107,609 @@
 
   // utils.inherit(SimpleButton, EventDispatcher);
 
+  function showPopupAlert(msg, title) {
+    var self = {}, html = '';
+    var _cancel, _close;
+    var warningRxp = /^Warning: /;
+    var el = El('div').appendTo('body').addClass('error-wrapper');
+    var infoBox = El('div').appendTo(el).addClass('error-box info-box selectable');
+    if (!title && warningRxp.test(msg)) {
+      title = 'Warning';
+      msg = msg.replace(warningRxp, '');
+    }
+    if (title) {
+      html += `<div class="error-title">${title}</div>`;
+    }
+    html += `<p class="error-message">${msg}</p>`;
+    El('div').appendTo(infoBox).addClass('close2-btn').on('click', function() {
+      if (_cancel) _cancel();
+      self.close();
+    });
+    El('div').appendTo(infoBox).addClass('error-content').html(html);
+
+    self.onCancel = function(cb) {
+      _cancel = cb;
+      return self;
+    };
+
+    self.onClose = function(cb) {
+      _close = cb;
+      return self;
+    };
+
+    self.button = function(label, cb) {
+      El('div')
+        .addClass("btn dialog-btn alert-btn")
+        .appendTo(infoBox)
+        .html(label)
+        .on('click', function() {
+          self.close();
+          cb();
+        });
+      return self;
+    };
+
+    self.close = function() {
+      if (el) el.remove();
+      if (_close) _close();
+      el = _cancel = _close = null;
+    };
+    return self;
+  }
+
+  function AlertControl(gui) {
+    var openAlert; // error popup
+    var openPopup; // any popup
+
+    gui.addMode('alert', function() {}, closePopup);
+
+    gui.alert = function(str, title) {
+      closePopup();
+      openAlert = openPopup = showPopupAlert(str, title);
+      // alert.button('close', gui.clearMode);
+      openAlert.onClose(gui.clearMode);
+      gui.enterMode('alert');
+    };
+
+    gui.message = function(str, title) {
+      if (openPopup) return; // don't stomp on another popup
+      openPopup = showPopupAlert(str, title);
+      openPopup.onClose(function() {openPopup = null;});
+    };
+
+    function closePopup() {
+      if (openPopup) openPopup.close();
+      openPopup = openAlert = null;
+    }
+  }
+
+  function saveZipFile(zipfileName, files, done) {
+    internal.zipAsync(files, function(err, buf) {
+      if (err) {
+        done(errorMessage(err));
+      } else {
+        saveBlobToLocalFile(zipfileName, new Blob([buf]), done);
+      }
+    });
+
+    function errorMessage(err) {
+      var str = "Error creating Zip file";
+      if (err.message) {
+        str += ": " + err.message;
+      }
+      return str;
+    }
+  }
+
+  function saveFilesToServer(paths, data, done) {
+    var i = -1;
+    next();
+    function next(err) {
+      i++;
+      if (err) return done(err);
+      if (i >= data.length) return done();
+      saveBlobToServer(paths[i], new Blob([data[i]]), next);
+    }
+  }
+
+  function saveBlobToServer(path, blob, done) {
+    var q = '?file=' + encodeURIComponent(path);
+    var url = window.location.origin + '/save' + q;
+    window.fetch(url, {
+      method: 'POST',
+      credentials: 'include',
+      body: blob
+    }).then(function(resp) {
+      if (resp.status == 400) {
+        return resp.text();
+      }
+    }).then(function(err) {
+      done(err);
+    }).catch(function(resp) {
+      done('connection to server was lost');
+    });
+  }
+
+  async function saveBlobToLocalFile(filename, blob, done) {
+    done = done || function() {};
+    if (window.showSaveFilePicker) {
+      saveBlobToSelectedFile(filename, blob, done);
+    } else {
+      saveBlobToDownloadsFolder(filename, blob, done);
+    }
+  }
+
+  function showSaveDialog(filename, blob, done) {
+    showPopupAlert(`Save ${filename} to:`)
+      .button('selected folder', function() {
+        saveBlobToSelectedFile(filename, blob, done);
+      })
+      .button('downloads', function() {
+        saveBlobToDownloadsFolder(filename, blob, done);
+      })
+      .onCancel(done);
+  }
+
+  async function saveBlobToSelectedFile(filename, blob, done) {
+    // see: https://developer.chrome.com/articles/file-system-access/
+    // note: saving multiple files to a directory using showDirectoryPicker()
+    //   does not work well (in Chrome). User is prompted for permission each time,
+    //   and some directories (like Downloads and Documents) are blocked.
+    //
+    var options = getSaveFileOptions(filename);
+    var handle;
+    try {
+      handle = await window.showSaveFilePicker(options);
+      var writable = await handle.createWritable();
+      await writable.write(blob);
+      await writable.close();
+    } catch(e) {
+      if (e.name == 'SecurityError') {
+        // assuming this is a timeout error, with message like:
+        // "Must be handling a user gesture to show a file picker."
+        showSaveDialog(filename, blob, done);
+      } else if (e.name == 'AbortError') {
+        // fired if user clicks a cancel button (normal, no error message)
+        // BUT: this kind of erro rmay also get fired when saving to a protected folder
+        //   (should show error message)
+        done();
+      } else {
+        console.error(e.name, e.message, e);
+        done('Save failed for an unknown reason');
+      }
+      return;
+    }
+
+    done();
+  }
+
+  function getSaveFileOptions(filename) {
+    // see: https://wicg.github.io/file-system-access/#api-filepickeroptions
+    var type = internal.guessInputFileType(filename);
+    var ext = internal.getFileExtension(filename).toLowerCase();
+    var accept = {};
+    if (ext == 'kml') {
+      accept['application/vnd.google-earth.kml+xml'] = ['.kml'];
+    } else if (ext == 'svg') {
+      accept['image/svg+xml'] = ['.svg'];
+    } else if (ext == 'zip') {
+      accept['application/zip'] == ['.zip'];
+    } else if (type == 'text') {
+      accept['text/csv'] = ['.csv', '.tsv', '.tab', '.txt'];
+    } else if (type == 'json') {
+      accept['application/json'] = ['.json', '.geojson', '.topojson'];
+    } else {
+      accept['application/octet-stream'] = ['.' + ext];
+    }
+    return {
+      suggestedName: filename,
+      // If startIn is given, Chrome will always start there
+      // Default is to start in the previously selected dir (better)
+      // // startIn: 'downloads', // or: desktop, documents, [file handle], [directory handle]
+      types: [{
+        description: 'Files',
+        accept: accept
+      }]
+    };
+  }
+
+
+  function saveBlobToDownloadsFolder(filename, blob, done) {
+    var anchor, blobUrl;
+    try {
+      blobUrl = URL.createObjectURL(blob);
+    } catch(e) {
+      done("Mapshaper can't export files from this browser. Try switching to Chrome or Firefox.");
+      return;
+    }
+    anchor = El('a').attr('href', '#').appendTo('body').node();
+    anchor.href = blobUrl;
+    anchor.download = filename;
+    var clickEvent = document.createEvent("MouseEvent");
+    clickEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false,
+        false, false, false, 0, null);
+    anchor.dispatchEvent(clickEvent);
+    setTimeout(function() {
+      // Revoke blob url to release memory; timeout needed in firefox
+      URL.revokeObjectURL(blobUrl);
+      anchor.parentNode.removeChild(anchor);
+      done();
+    }, 400);
+  }
+
+  var idb = require('idb-keyval');
+  // https://github.com/jakearchibald/idb
+  // https://github.com/jakearchibald/idb-keyval
+  var sessionId = getUniqId('session');
+  var snapshotCount = 0;
+
+  function getUniqId(prefix) {
+    return prefix + '_' + (Math.random() + 1).toString(36).substring(2,8);
+  }
+
+  function isSnapshotId(str) {
+    return /^session_/.test(str);
+  }
+
+  function SessionSnapshots(gui) {
+    var _menuOpen = false;
+    var _menuTimeout;
+    var btn, menu;
+
+    init();
+
+    async function init() {
+      var enabled = await isStorageEnabled();
+      if (!enabled) return;
+
+      btn = gui.buttons.addButton('#ribbon-icon').addClass('menu-btn save-btn');
+      menu = El('div').addClass('nav-sub-menu save-menu').appendTo(btn.node());
+      await initialCleanup();
+
+      window.addEventListener('beforeunload', async function() {
+        // delete snapshot data
+        // This is not ideal, because the data gets deleted even if the user
+        // cancels the page close... but there's no apparent good alternative
+        await finalCleanup();
+      });
+
+      btn.on('mouseenter', function() {
+        btn.addClass('hover');
+        clearTimeout(_menuTimeout); // prevent timed closing
+        if (!_menuOpen) {
+          openMenu();
+        }
+      });
+
+      btn.on('mouseleave', function() {
+        if (!_menuOpen) {
+          btn.removeClass('hover');
+        } else {
+          closeMenu(200);
+        }
+      });
+    }
+
+    async function renderMenu() {
+      var snapshots = await fetchSnapshotList();
+
+      menu.empty();
+      addMenuLink({
+        slug: 'stash',
+        // label: 'save data snapshot',
+        label: 'take a snapshot',
+        action: saveSnapshot
+      });
+
+      // var available = await getAvailableStorage();
+      // if (available) {
+      //   El('div').addClass('save-menu-entry').text(available + ' available').appendTo(menu);
+      // }
+
+      // if (snapshots.length > 0) {
+      //   El('div').addClass('save-menu-entry').text('snapshots').appendTo(menu);
+      // }
+
+      snapshots.forEach(function(item, i) {
+        var id = i + 1;
+        var line = El('div').appendTo(menu).addClass('save-menu-item');
+        El('span').appendTo(line).html(`<span class="save-item-label">#${item.number}</span> `);
+        // show snapshot size
+        El('span').appendTo(line).html(` <span class="save-item-size">${item.display_size}</span>`);
+        El('span').addClass('save-menu-btn').appendTo(line).on('click', async function(e) {
+          await restoreSnapshotById(item.id, gui);
+          closeMenu(100);
+        }).text('restore');
+        El('span').addClass('save-menu-btn').appendTo(line).on('click', async function(e) {
+          var buf = await idb.get(item.id);
+          saveBlobToLocalFile('mapshaper_snapshot.msx', new Blob([buf]));
+        }).text('export');
+        El('span').addClass('save-menu-btn').appendTo(line).on('click', async function(e) {
+          await removeSnapshotById(item.id);
+          closeMenu(300);
+          renderMenu();
+        }).text('remove');
+      });
+
+      // if (snapshots.length >= 1) {
+      //   addMenuLink({
+      //     slug: 'clear',
+      //     label: 'remove all',
+      //     action: clearData
+      //   });
+      // }
+    }
+
+    function addMenuLink(item) {
+      var line = El('div').appendTo(menu);
+      var link = El('div').addClass('save-menu-link save-menu-entry').attr('data-name', item.slug).text(item.label).appendTo(line);
+      link.on('click', async function(e) {
+        await item.action(gui);
+        e.stopPropagation();
+      });
+    }
+
+    function openMenu() {
+      clearTimeout(_menuTimeout);
+      if (!_menuOpen) {
+        btn.addClass('open');
+        _menuOpen = true;
+        renderMenu();
+      }
+    }
+
+    function closeMenu(delay) {
+      if (!_menuOpen) return;
+      clearTimeout(_menuTimeout);
+      _menuTimeout = setTimeout(function() {
+        _menuOpen = false;
+        btn.removeClass('open');
+        btn.removeClass('hover');
+      }, delay || 0);
+    }
+
+    async function saveSnapshot(gui) {
+      var buf = await captureSnapshot(gui);
+      var entryId = String(++snapshotCount).padStart(3, '0');
+      var snapshotId = sessionId + '_' + entryId; // e.g. session_d89fw_001
+      var entry = {
+        created: Date.now(),
+        session: sessionId,
+        id: snapshotId,
+        name: snapshotCount + '.',
+        number: snapshotCount,
+        size: buf.length,
+        display_size: formatSize(buf.length)
+      };
+
+      await idb.set(entry.id, buf);
+      await addToIndex(entry);
+      renderMenu();
+    }
+  }
+
+  function formatSize(bytes) {
+    var kb = Math.round(bytes / 1000);
+    var mb = (bytes / 1e6).toFixed(1);
+    if (kb < 990) {
+      return kb + 'kB';
+    }
+    return mb + 'MB';
+  }
+
+  async function fetchSnapshotList() {
+    await removeMissingSnapshots();
+    var index = await fetchIndex();
+    var snapshots = index.snapshots;
+    snapshots = snapshots.filter(function(o) {return o.session == sessionId;});
+    return snapshots.sort(function(a, b) {b.created > a.created;});
+  }
+
+  async function removeSnapshotById(id, gui) {
+    await idb.del(id);
+    return updateIndex(function(index) {
+      index.snapshots = index.snapshots.filter(function(snap) {
+        return snap.id != id;
+      });
+    });
+  }
+
+  async function restoreSnapshotById(id, gui) {
+    var buf = await idb.get(id);
+    if (!buf) {
+      console.log('Snapshot not available:', id);
+      return;
+    }
+    var data = await internal.unpackSession(buf);
+    buf = null;
+    gui.model.clear();
+    importDatasets(data.datasets, gui);
+    gui.clearMode();
+  }
+
+  // Add datasets to the current project
+  // TODO: figure out if interface data should be imported (e.g. should
+  //   visibility flag of imported layers be imported)
+  async function importSessionData(buf, gui) {
+    if (buf instanceof ArrayBuffer) {
+      buf = new Uint8Array(buf);
+    }
+    var data = await internal.unpackSession(buf);
+    importDatasets(data.datasets, gui);
+  }
+
+  function importDatasets(datasets, gui) {
+    gui.model.addDatasets(datasets);
+    var target = findTargetLayer(datasets);
+    gui.model.setDefaultTarget(target.layers, target.dataset);
+    gui.model.updated({select: true, arc_count: true}); // arc_count to refresh display shapes
+  }
+
+  async function captureSnapshot(gui) {
+    var datasets = gui.model.getDatasets();
+    var lyr = gui.model.getActiveLayer().layer;
+    // compact: true applies compression to vector coordinates, for ~30% reduction
+    //   in file size in a typical polygon or polyline file, but longer processing time
+    var opts = {compact: false};
+    lyr.active = true;
+    // console.time('msx');
+    var obj = await internal.exportDatasetsToPack(datasets, opts);
+    // console.timeEnd('msx')
+    delete lyr.active;
+    obj.gui = getGuiState(gui);
+    return internal.pack(obj);
+  }
+
+  // TODO: capture gui state information to allow restoring more of the UI
+  function getGuiState(gui) {
+    return null;
+  }
+
+  async function fetchIndex() {
+    var index = await idb.get('msx_index');
+    return index || {snapshots: []};
+  }
+
+  async function updateIndex(action) {
+    return idb.update('msx_index', function(index) {
+      if (!index || !Array.isArray(index.snapshots)) {
+        index = {snapshots: []};
+      }
+      action(index);
+      return index;
+    });
+  }
+
+  async function addToIndex(obj) {
+    updateSessionData();
+    return updateIndex(function(index) {
+      index.snapshots.push(obj);
+    });
+  }
+
+  async function removeMissingSnapshots() {
+    var keys = await idb.keys();
+    return updateIndex(function(index) {
+      index.snapshots = index.snapshots.filter(function(snap) {
+        return keys.includes(snap.id);
+      });
+    });
+  }
+
+  async function initialCleanup() {
+    // (Safari workaround) remove any lingering data from past sessions
+    if (getSessionData().length === 0) {
+      await idb.clear();
+    }
+    // remove any snapshots that are not indexed
+    var keys = await idb.keys();
+    var indexedIds = (await fetchIndex()).snapshots.map(function(snap) {return snap.id;});
+    keys.forEach(function(key) {
+      if (isSnapshotId(key) && !indexedIds.includes(key)) {
+        idb.del(key);
+      }
+    });
+    // remove old indexed snapshots
+    await updateIndex(function(index) {
+      index.snapshots = index.snapshots.filter(function(snap) {
+        var msPerDay = 1000 * 60 * 60 * 24;
+        var daysOld = (Date.now() - snap.created) / msPerDay;
+        if (daysOld > 1) {
+          if (keys.includes(snap.id)) idb.del(snap.id);
+          return false;
+        }
+        return true;
+      });
+      return index;
+    });
+  }
+
+  async function getAvailableStorage() {
+    var bytes;
+    try {
+      var estimate = await navigator.storage.estimate();
+      bytes = (estimate.quota - estimate.usage);
+    } catch(e) {
+      return null;
+    }
+    var str = (bytes / 1e6).toFixed(1) + 'MB';
+    if (str.length > 7) {
+      str = (bytes / 1e9).toFixed(1) + 'GB';
+    }
+    if (str.length > 7) {
+      str = (bytes / 1e12).toFixed(1) + 'TB';
+    }
+    if (parseFloat(str) >= 10) {
+      str = str.replace(/\../, '');
+    }
+    return str;
+  }
+
+  function findTargetLayer(datasets) {
+    var target;
+    datasets.forEach(function(dataset) {
+      var lyr = dataset.layers.find(function(lyr) { return !!lyr.active; });
+      if (lyr) target = {dataset: dataset, layers: [lyr]};
+    });
+    if (!target) {
+      target = {dataset: datasets[0], layers: [datasets[0].layers[0]]};
+    }
+    return target;
+  }
+
+  // Clean up snapshot data (called just before browser tab is closed)
+  async function finalCleanup() {
+    // When called on 'beforeunload', idb.clear() seems to complete
+    // before tab is unloaded in Chrome and Firefox, but not in Safari.
+    // Calling idb.del(key) to selectively delete data for the current session
+    // does not seem to complete in any browser.
+    // So we wait until the last open session is ending at this URL, and delete
+    // data for all recently open sessions.
+    //
+    var sessions = getSessionData().filter(function(item) {
+      // remove current session
+      var daysOld = (Date.now() - item.timestamp) / (1000 * 60 * 60 * 24);
+      if (item.session == sessionId) return false;
+      // also remove any lingering old sessions (ordinarily this shouldn't be needed)
+      if (daysOld > 1) return false;
+      return true;
+    });
+    setSessionData(sessions);
+    if (sessions.length === 0) {
+      await idb.clear();
+    }
+  }
+
+  function updateSessionData() {
+    // make sure the current session is added to the list of open sessions
+    var sessions = getSessionData();
+    if (sessions.find(o => o.session == sessionId)) return;
+    var entry = {
+      session: sessionId,
+      timestamp: Date.now()
+    };
+    setSessionData(sessions.concat([entry]));
+  }
+
+  function getSessionData() {
+    var data = JSON.parse(window.localStorage.getItem('session_data'));
+    return data || [];
+  }
+
+  function setSessionData(arr) {
+    window.localStorage.setItem('session_data', JSON.stringify(arr));
+  }
+
+  async function isStorageEnabled() {
+    try {
+      setSessionData(getSessionData());
+      await updateIndex(function() {});
+      return true;
+    } catch(e) {
+      return false;
+    }
+  }
+
   // @cb function(<FileList>)
   function DropControl(gui, el, cb) {
     var area = El(el);
@@ -1391,18 +1995,24 @@
     async function importFiles(fileData) {
       var importOpts = readImportOpts();
       var groups = groupFilesForImport(fileData, importOpts);
+      var optStr = GUI.formatCommandOptions(importOpts);
       fileData = null;
       for (var group of groups) {
         if (group.size > 4e7) {
           gui.showProgressMessage('Importing');
           await wait(35);
         }
-        importDataset(group, importOpts);
+        if (group[internal.PACKAGE_EXT]) {
+          await importSessionData(group[internal.PACKAGE_EXT].content, gui);
+        } else {
+          importDataset(group, importOpts);
+        }
+        importCount++;
+        gui.session.fileImported(group.filename, optStr);
       }
     }
 
     function importDataset(group, importOpts) {
-      var optStr = GUI.formatCommandOptions(importOpts);
       var dataset = internal.importContent(group, importOpts);
       if (datasetIsEmpty(dataset)) return;
       if (group.layername) {
@@ -1411,8 +2021,6 @@
       // save import options for use by repair control, etc.
       dataset.info.import_options = importOpts;
       model.addDataset(dataset);
-      importCount++;
-      gui.session.fileImported(group.filename, optStr);
     }
 
     function addEmptyLayer() {
@@ -1643,348 +2251,119 @@
           content: d.content
         };
         // kludge: stash import name for session history
-        if (d.filename) g.filename = d.filename;
-      });
-      return groups;
-    }
-  }
-
-  function draggable(ref) {
-    var xdown, ydown;
-    var el = El(ref),
-        dragging = false,
-        obj = new EventDispatcher();
-    undraggable(el.node());
-    el.on('mousedown', function(e) {
-      xdown = e.pageX;
-      ydown = e.pageY;
-      window.addEventListener('mousemove', onmove);
-      window.addEventListener('mouseup', onrelease);
-    });
-
-    function onrelease(e) {
-      window.removeEventListener('mousemove', onmove);
-      window.removeEventListener('mouseup', onrelease);
-      if (dragging) {
-        dragging = false;
-        obj.dispatchEvent('dragend');
-      }
-    }
-
-    function onmove(e) {
-      if (!dragging) {
-        dragging = true;
-        obj.dispatchEvent('dragstart');
-      }
-      obj.dispatchEvent('drag', {dx: e.pageX - xdown, dy: e.pageY - ydown});
-    }
-    return obj;
-  }
-
-  function Slider(ref, opts) {
-    var _self = this;
-    var defaults = {
-      space: 7
-    };
-    opts = utils$1.extend(defaults, opts);
-
-    var _pct = 0;
-    var _track,
-        _handle,
-        _handleLeft = opts.space;
-
-    function size() {
-      return _track ? _track.width() - opts.space * 2 : 0;
-    }
-
-    this.track = function(ref) {
-      if (ref && !_track) {
-        _track = El(ref);
-        _handleLeft = _track.el.offsetLeft + opts.space;
-        updateHandlePos();
-      }
-      return _track;
-    };
-
-    this.handle = function(ref) {
-      var startX;
-      if (ref && !_handle) {
-        _handle = El(ref);
-        draggable(_handle)
-          .on('drag', function(e) {
-            setHandlePos(startX + e.dx);
-          })
-          .on('dragstart', function(e) {
-            startX = position();
-            _self.dispatchEvent('start');
-          })
-          .on('dragend', function(e) {
-            _self.dispatchEvent('end');
-          });
-        updateHandlePos();
-      }
-      return _handle;
-    };
-
-    function position() {
-      return Math.round(_pct * size());
-    }
-
-    this.pct = function(pct) {
-      if (pct >= 0 && pct <= 1) {
-        _pct = pct;
-        updateHandlePos();
-      }
-      return _pct;
-    };
-
-    function setHandlePos(x) {
-      x = utils$1.clamp(x, 0, size());
-      var pct = x / size();
-      if (pct != _pct) {
-        _pct = pct;
-        _handle.css('left', _handleLeft + x);
-        _self.dispatchEvent('change', {pct: _pct});
-      }
-    }
-
-    function updateHandlePos() {
-      var x = _handleLeft + Math.round(position());
-      if (_handle) _handle.css('left', x);
-    }
-  }
-
-  utils$1.inherit(Slider, EventDispatcher);
-
-  function showPopupAlert(msg, title) {
-    var self = {}, html = '';
-    var _cancel, _close;
-    var warningRxp = /^Warning: /;
-    var el = El('div').appendTo('body').addClass('error-wrapper');
-    var infoBox = El('div').appendTo(el).addClass('error-box info-box selectable');
-    if (!title && warningRxp.test(msg)) {
-      title = 'Warning';
-      msg = msg.replace(warningRxp, '');
-    }
-    if (title) {
-      html += `<div class="error-title">${title}</div>`;
-    }
-    html += `<p class="error-message">${msg}</p>`;
-    El('div').appendTo(infoBox).addClass('close2-btn').on('click', function() {
-      if (_cancel) _cancel();
-      self.close();
-    });
-    El('div').appendTo(infoBox).addClass('error-content').html(html);
-
-    self.onCancel = function(cb) {
-      _cancel = cb;
-      return self;
-    };
-
-    self.onClose = function(cb) {
-      _close = cb;
-      return self;
-    };
-
-    self.button = function(label, cb) {
-      El('div')
-        .addClass("btn dialog-btn alert-btn")
-        .appendTo(infoBox)
-        .html(label)
-        .on('click', function() {
-          self.close();
-          cb();
-        });
-      return self;
-    };
-
-    self.close = function() {
-      if (el) el.remove();
-      if (_close) _close();
-      el = _cancel = _close = null;
-    };
-    return self;
-  }
-
-  function AlertControl(gui) {
-    var openAlert; // error popup
-    var openPopup; // any popup
-
-    gui.addMode('alert', function() {}, closePopup);
-
-    gui.alert = function(str, title) {
-      closePopup();
-      openAlert = openPopup = showPopupAlert(str, title);
-      // alert.button('close', gui.clearMode);
-      openAlert.onClose(gui.clearMode);
-      gui.enterMode('alert');
-    };
-
-    gui.message = function(str, title) {
-      if (openPopup) return; // don't stomp on another popup
-      openPopup = showPopupAlert(str, title);
-      openPopup.onClose(function() {openPopup = null;});
-    };
-
-    function closePopup() {
-      if (openPopup) openPopup.close();
-      openPopup = openAlert = null;
+        if (d.filename) g.filename = d.filename;
+      });
+      return groups;
     }
   }
 
-  function saveZipFile(zipfileName, files, done) {
-    internal.zipAsync(files, function(err, buf) {
-      if (err) {
-        done(errorMessage(err));
-      } else {
-        saveBlobToLocalFile(zipfileName, new Blob([buf]), done);
-      }
+  function draggable(ref) {
+    var xdown, ydown;
+    var el = El(ref),
+        dragging = false,
+        obj = new EventDispatcher();
+    undraggable(el.node());
+    el.on('mousedown', function(e) {
+      xdown = e.pageX;
+      ydown = e.pageY;
+      window.addEventListener('mousemove', onmove);
+      window.addEventListener('mouseup', onrelease);
     });
 
-    function errorMessage(err) {
-      var str = "Error creating Zip file";
-      if (err.message) {
-        str += ": " + err.message;
+    function onrelease(e) {
+      window.removeEventListener('mousemove', onmove);
+      window.removeEventListener('mouseup', onrelease);
+      if (dragging) {
+        dragging = false;
+        obj.dispatchEvent('dragend');
       }
-      return str;
     }
-  }
 
-  function saveFilesToServer(paths, data, done) {
-    var i = -1;
-    next();
-    function next(err) {
-      i++;
-      if (err) return done(err);
-      if (i >= data.length) return done();
-      saveBlobToServer(paths[i], new Blob([data[i]]), next);
+    function onmove(e) {
+      if (!dragging) {
+        dragging = true;
+        obj.dispatchEvent('dragstart');
+      }
+      obj.dispatchEvent('drag', {dx: e.pageX - xdown, dy: e.pageY - ydown});
     }
+    return obj;
   }
 
-  function saveBlobToServer(path, blob, done) {
-    var q = '?file=' + encodeURIComponent(path);
-    var url = window.location.origin + '/save' + q;
-    window.fetch(url, {
-      method: 'POST',
-      credentials: 'include',
-      body: blob
-    }).then(function(resp) {
-      if (resp.status == 400) {
-        return resp.text();
-      }
-    }).then(function(err) {
-      done(err);
-    }).catch(function(resp) {
-      done('connection to server was lost');
-    });
-  }
+  function Slider(ref, opts) {
+    var _self = this;
+    var defaults = {
+      space: 7
+    };
+    opts = utils$1.extend(defaults, opts);
 
-  async function saveBlobToLocalFile(filename, blob, done) {
-    if (window.showSaveFilePicker) {
-      saveBlobToSelectedFile(filename, blob, done);
-    } else {
-      saveBlobToDownloadsFolder(filename, blob, done);
-    }
-  }
+    var _pct = 0;
+    var _track,
+        _handle,
+        _handleLeft = opts.space;
 
-  function showSaveDialog(filename, blob, done) {
-    showPopupAlert(`Save ${filename} to:`)
-      .button('selected folder', function() {
-        saveBlobToSelectedFile(filename, blob, done);
-      })
-      .button('downloads', function() {
-        saveBlobToDownloadsFolder(filename, blob, done);
-      })
-      .onCancel(done);
-  }
+    function size() {
+      return _track ? _track.width() - opts.space * 2 : 0;
+    }
 
-  async function saveBlobToSelectedFile(filename, blob, done) {
-    // see: https://developer.chrome.com/articles/file-system-access/
-    // note: saving multiple files to a directory using showDirectoryPicker()
-    //   does not work well (in Chrome). User is prompted for permission each time,
-    //   and some directories (like Downloads and Documents) are blocked.
-    //
-    var options = getSaveFileOptions(filename);
-    var handle;
-    try {
-      handle = await window.showSaveFilePicker(options);
-      var writable = await handle.createWritable();
-      await writable.write(blob);
-      await writable.close();
-    } catch(e) {
-      if (e.name == 'SecurityError') {
-        // assuming this is a timeout error, with message like:
-        // "Must be handling a user gesture to show a file picker."
-        showSaveDialog(filename, blob, done);
-      } else if (e.name == 'AbortError') {
-        // fired if user clicks a cancel button (normal, no error message)
-        // BUT: this kind of erro rmay also get fired when saving to a protected folder
-        //   (should show error message)
-        done();
-      } else {
-        console.error(e.name, e.message, e);
-        done('Save failed for an unknown reason');
+    this.track = function(ref) {
+      if (ref && !_track) {
+        _track = El(ref);
+        _handleLeft = _track.el.offsetLeft + opts.space;
+        updateHandlePos();
       }
-      return;
-    }
+      return _track;
+    };
 
-    done();
-  }
+    this.handle = function(ref) {
+      var startX;
+      if (ref && !_handle) {
+        _handle = El(ref);
+        draggable(_handle)
+          .on('drag', function(e) {
+            setHandlePos(startX + e.dx);
+          })
+          .on('dragstart', function(e) {
+            startX = position();
+            _self.dispatchEvent('start');
+          })
+          .on('dragend', function(e) {
+            _self.dispatchEvent('end');
+          });
+        updateHandlePos();
+      }
+      return _handle;
+    };
 
-  function getSaveFileOptions(filename) {
-    // see: https://wicg.github.io/file-system-access/#api-filepickeroptions
-    var type = internal.guessInputFileType(filename);
-    var ext = internal.getFileExtension(filename).toLowerCase();
-    var accept = {};
-    if (ext == 'kml') {
-      accept['application/vnd.google-earth.kml+xml'] = ['.kml'];
-    } else if (ext == 'svg') {
-      accept['image/svg+xml'] = ['.svg'];
-    } else if (ext == 'zip') {
-      accept['application/zip'] == ['.zip'];
-    } else if (type == 'text') {
-      accept['text/csv'] = ['.csv', '.tsv', '.tab', '.txt'];
-    } else if (type == 'json') {
-      accept['application/json'] = ['.json', '.geojson', '.topojson'];
-    } else {
-      accept['application/octet-stream'] = ['.' + ext];
+    function position() {
+      return Math.round(_pct * size());
     }
-    return {
-      suggestedName: filename,
-      // If startIn is given, Chrome will always start there
-      // Default is to start in the previously selected dir (better)
-      // // startIn: 'downloads', // or: desktop, documents, [file handle], [directory handle]
-      types: [{
-        description: 'Files',
-        accept: accept
-      }]
+
+    this.pct = function(pct) {
+      if (pct >= 0 && pct <= 1) {
+        _pct = pct;
+        updateHandlePos();
+      }
+      return _pct;
     };
-  }
 
+    function setHandlePos(x) {
+      x = utils$1.clamp(x, 0, size());
+      var pct = x / size();
+      if (pct != _pct) {
+        _pct = pct;
+        _handle.css('left', _handleLeft + x);
+        _self.dispatchEvent('change', {pct: _pct});
+      }
+    }
 
-  function saveBlobToDownloadsFolder(filename, blob, done) {
-    var anchor, blobUrl;
-    try {
-      blobUrl = URL.createObjectURL(blob);
-    } catch(e) {
-      done("Mapshaper can't export files from this browser. Try switching to Chrome or Firefox.");
-      return;
+    function updateHandlePos() {
+      var x = _handleLeft + Math.round(position());
+      if (_handle) _handle.css('left', x);
     }
-    anchor = El('a').attr('href', '#').appendTo('body').node();
-    anchor.href = blobUrl;
-    anchor.download = filename;
-    var clickEvent = document.createEvent("MouseEvent");
-    clickEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false,
-        false, false, false, 0, null);
-    anchor.dispatchEvent(clickEvent);
-    setTimeout(function() {
-      // Revoke blob url to release memory; timeout needed in firefox
-      URL.revokeObjectURL(blobUrl);
-      anchor.parentNode.removeChild(anchor);
-      done();
-    }, 400);
   }
 
+  utils$1.inherit(Slider, EventDispatcher);
+
   // replace default error, stop and message functions
   function setLoggingForGUI(gui) {
     function stop() {
@@ -2488,7 +2867,7 @@
       return copy;
     }
 
-    var wgs84 = internal.getCRS('wgs84');
+    var wgs84 = internal.parseCrsString('wgs84');
     var toWGS84 = internal.getProjTransform2(src, wgs84);
     var fromWGS84 = internal.getProjTransform2(wgs84, dest);
 
@@ -2597,7 +2976,7 @@
   function setDisplayProjection(gui, cmd) {
     var arg = cmd.replace(/^projd[ ]*/, '');
     if (arg) {
-      gui.map.setDisplayCRS(internal.getCRS(arg));
+      gui.map.setDisplayCRS(internal.parseCrsString(arg));
     } else {
       gui.map.setDisplayCRS(null);
     }
@@ -3130,7 +3509,7 @@
           flags.arc_count || flags.snap || flags.affine || flags.points || flags['merge-layers'];
       if (intersectionsMayHaveChanged) {
         // delete any cached intersection data, to trigger re-calculation
-        e.dataset.info.intersections = null;
+        e.dataset._intersections = null;
         updateAsync();
       } else if (flags.select) {
         // new active layer, but no editing commands were run -- use cached intersections (if available)
@@ -3179,11 +3558,11 @@
         XX = internal.findSegmentIntersections(arcs, opts);
         showBtn = XX.length > 0;
       } else { // no simplification
-        XX = dataset.info.intersections;
+        XX = dataset._intersections;
         if (!XX) {
           // cache intersections at 0 simplification, to avoid recalculating
           // every time the simplification slider is set to 100% or the layer is selected at 100%
-          XX = dataset.info.intersections = internal.findSegmentIntersections(arcs, opts);
+          XX = dataset._intersections = internal.findSegmentIntersections(arcs, opts);
         }
         showBtn = false;
       }
@@ -3200,7 +3579,7 @@
 
     function dismiss() {
       var dataset = model.getActiveLayer().dataset;
-      dataset.info.intersections = null;
+      dataset._intersections = null;
       dataset.info.no_intersections = true;
       reset();
     }
@@ -3265,8 +3644,6 @@
     return layers.reverse();
   }
 
-  // import { groupLayersByDataset } from '../dataset/mapshaper-target-utils';
-
   // Export buttons and their behavior
   var ExportControl = function(gui) {
     var model = gui.model;
@@ -3318,16 +3695,15 @@
       gui.clearMode();
       gui.showProgressMessage('Exporting');
       setTimeout(function() {
-        exportMenuSelection(layers, function(err) {
-          if (err) {
-            if (utils$1.isString(err)) {
-              gui.alert(err);
-            } else {
-              // stack seems to change if Error is logged directly
-              console.error(err.stack);
-              gui.alert('Export failed for an unknown reason');
-            }
+        exportMenuSelection(layers).catch(function(err) {
+          if (utils$1.isString(err)) {
+            gui.alert(err);
+          } else {
+            // stack seems to change if Error is logged directly
+            console.error(err.stack);
+            gui.alert('Export failed for an unknown reason');
           }
+        }).finally(function() {
           gui.clearProgressMessage();
         });
       }, 20);
@@ -3349,17 +3725,12 @@
     }
 
     // done: function(string|Error|null)
-    function exportMenuSelection(layers, done) {
-      var opts, files;
-      try {
-        opts = getExportOpts();
+    async function exportMenuSelection(layers) {
+      var opts = getExportOpts();
         // note: command line "target" option gets ignored
-        files = internal.exportTargetLayers(layers, opts);
-        gui.session.layersExported(getTargetLayerIds(), getExportOptsAsString());
-      } catch(e) {
-        return done(e);
-      }
-      internal.writeFiles(files, opts, done);
+      var files = await internal.exportTargetLayers(layers, opts);
+      gui.session.layersExported(getTargetLayerIds(), getExportOptsAsString());
+      await utils$1.promisify(internal.writeFiles)(files, opts);
     }
 
     function initLayerItem(o, i) {
@@ -3479,7 +3850,7 @@
     }
 
     function initFormatMenu() {
-      var defaults = ['shapefile', 'geojson', 'topojson', 'json', 'dsv', 'kml', 'svg'];
+      var defaults = ['shapefile', 'geojson', 'topojson', 'json', 'dsv', 'kml', 'svg', internal.PACKAGE_EXT];
       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"' +
@@ -3607,7 +3978,7 @@
       clearClass('insert-below');
       dragTargetId = layerOrderSlug = null;
       if (dragging) {
-        render(); // in case menu changed...
+        renderLayerList(); // in case menu changed...
         dragging = false;
       }
     }
@@ -3644,6 +4015,32 @@
     }
 
     function render() {
+      renderLayerList();
+      renderFileList();
+    }
+
+    function renderFileList() {
+      var list = el.findChild('.file-list');
+      var files = [];
+      list.empty();
+      model.forEachLayer(function(lyr, dataset) {
+        var file = internal.getLayerSourceFile(lyr, dataset);
+        if (!file || files.includes(file)) return;
+        files.push(file);
+        var warnings = getWarnings(lyr, dataset);
+        var html = '<div class="layer-item">';
+        html += rowHTML('name', file);
+        if (warnings) {
+          // html += rowHTML('problems', warnings, 'layer-problems');
+          html += rowHTML('', warnings, 'layer-problems');
+        }
+        html += '</div>';
+        list.appendChild(El('div').html(html).firstChild());
+      });
+
+    }
+
+    function renderLayerList() {
       var list = el.findChild('.layer-list');
       var uniqIds = {};
       var pinnableCount = 0;
@@ -3690,7 +4087,6 @@
     cache.cleanup();
 
     function renderLayer(lyr, dataset, opts) {
-      var warnings = getWarnings(lyr, dataset);
       var classes = 'layer-item';
       var entry, html;
 
@@ -3700,13 +4096,7 @@
 
       html = '<!-- ' + lyr.menu_id + '--><div class="' + classes + '">';
       html += rowHTML('name', '<span class="layer-name colored-text dot-underline">' + formatLayerNameForDisplay(lyr.name) + '</span>', 'row1');
-      if (opts.show_source) {
-        html += rowHTML('source file', describeSrc(lyr, dataset) || 'n/a');
-      }
       html += rowHTML('contents', describeLyr(lyr));
-      if (warnings) {
-        html += rowHTML('problems', warnings, 'layer-problems');
-      }
       html += '<img class="close-btn" draggable="false" src="images/close.png">';
       if (opts.pinnable) {
         html += '<img class="pin-btn unpinned" draggable="false" src="images/eye.png">';
@@ -3838,6 +4228,8 @@
       var file = internal.getLayerSourceFile(lyr, dataset);
       var missing = [];
       var msg;
+      // show missing file warning for first layer in dataset
+      // (assuming it represents the content of the original file)
       if (utils$1.endsWith(file, '.shp') && lyr == dataset.layers[0]) {
         if (!lyr.data) {
           missing.push('.dbf');
@@ -4320,7 +4712,8 @@
 
     // Only render edit mode button/menu if this option is present
     if (gui.options.inspectorControl) {
-      btn = gui.buttons.addButton('#pointer-icon').addClass('menu-btn');
+      // use z-index so the menu is over other buttons
+      btn = gui.buttons.addButton('#pointer-icon').addClass('menu-btn pointer-btn'),
       menu = El('div').addClass('nav-sub-menu').appendTo(btn.node());
 
       btn.on('mouseleave', function() {
@@ -4956,6 +5349,27 @@
     targ.prototype.__super__ = f;
   }
 
+  function promisify(asyncFn) {
+    return function() {
+      var args = toArray(arguments);
+      return new Promise((resolve, reject) => {
+        var cb = function(err, data) {
+          if (err) reject(err);
+          else resolve(data);
+        };
+        args.push(cb);
+        asyncFn.apply(this, args);
+      });
+    };
+  }
+
+   function runAsync(fn, arg) {
+      return new Promise((resolve, reject) => {
+        fn(arg, function(err, data) {
+          return err ? reject(err) : resolve(data);
+        });
+      });
+    }
 
   // Call @iter on each member of an array (similar to Array#reduce(iter))
   //    iter: function(memo, item, callback)
@@ -5973,7 +6387,7 @@
       return hits;
     }
 
-     function vertexTest(x, y) {
+    function vertexTest(x, y) {
       var maxDist = getZoomAdjustedHitBuffer(25, 2),
           cands = findHitCandidates(x, y, maxDist);
       sortByDistance(x, y, cands, displayLayer.arcs);
@@ -10309,7 +10723,7 @@
       }
 
       if (!internal.isWebMercator(crs)) {
-        gui.map.setDisplayCRS(internal.getCRS('webmercator'));
+        gui.map.setDisplayCRS(internal.parseCrsString('webmercator'));
       }
       var bbox = getLonLatBounds();
       if (!checkBounds(bbox)) {
@@ -10427,7 +10841,7 @@
     this.setDisplayCRS = function(crs) {
       // TODO: update bounds of frame layer, if there is a frame layer
       var oldCRS = this.getDisplayCRS();
-      var newCRS = utils$1.isString(crs) ? internal.getCRS(crs) : crs;
+      var newCRS = utils$1.isString(crs) ? internal.parseCrsString(crs) : crs;
       // TODO: handle case that old and new CRS are the same
       _dynamicCRS = newCRS;
       if (!_activeLyr) return; // stop here if no layers have been selected
@@ -10484,12 +10898,12 @@
       _activeLyr.style = getActiveStyle(_activeLyr.layer, gui.state.dark_basemap);
       _activeLyr.active = true;
 
-      if (e.flags.same_table) {
+      if (e.flags.same_table && !e.flags.proj) {
         // data may have changed; if popup is open, it needs to be refreshed
         gui.dispatchEvent('popup-needs-refresh');
       } else if (_hit) {
-        _hit.setLayer(_activeLyr);
         _hit.clearSelection();
+        _hit.setLayer(_activeLyr);
       }
 
       updateVisibleMapLayers();
@@ -10818,6 +11232,7 @@
       homeControl: true,
       zoomControl: true,
       inspectorControl: true,
+      saveControl: true,
       disableNavigation: false,
       showMouseCoordinates: true,
       focus: true
@@ -10834,6 +11249,10 @@
     gui.undo = new Undo(gui);
     gui.state = {};
 
+    if (opts.saveControl) {
+      new SessionSnapshots(gui);
+    }
+
     initModeRules(gui);
 
     gui.showProgressMessage = function(msg) {