mapshaper 0.7.1 → 0.7.3

package/LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2025, Matthew Bloch
+Copyright (c) 2026, Matthew Bloch
 
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this

package/mapshaper.js

@@ -52127,7 +52127,7 @@ ${svg}
     });
   }
 
-  var version = "0.7.1";
+  var version = "0.7.3";
 
   // 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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mapshaper",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "description": "A tool for editing vector datasets for mapping and GIS.",
   "keywords": [
     "shapefile",
@@ -26,6 +26,7 @@
     "test": "mocha test",
     "build": "rollup --config",
     "docs": "node build-docs.mjs",
+    "roadmap": "node build-roadmap.mjs",
     "lint": "eslint --ext mjs src/",
     "prepublishOnly": "npm test; ./pre-publish",
     "postpublish": "./release_web_ui; ./release_github_version",
@@ -37,7 +38,9 @@
     "/www/**",
     "!/www/nacis/**",
     "/mapshaper.js",
-    "!.DS_Store"
+    "!.DS_Store",
+    "!/www/docs/**",
+    "!/www/llms*"
   ],
   "dependencies": {
     "@ngageoint/geopackage": "^4.2.6",

package/www/index.html

@@ -43,6 +43,14 @@
 	  <polygon points="8 14.5 13 19 13 4 3 4 3 19 8 14.5" fill="#30d4ef"/>
 	</svg>
 
+	<svg id="undo-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+		<path d="M1.5,8 L7,4.5 L7,7 C10,7 12,9 12,11 L12,13 L10,13 L10,11 C10,10 9,9 7,9 L7,11.5 Z"/>
+	</svg>
+
+	<svg id="redo-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+		<path d="M14.5,8 L9,4.5 L9,7 C6,7 4,9 4,11 L4,13 L6,13 L6,11 C6,10 7,9 9,9 L9,11.5 Z"/>
+	</svg>
+
 </div>
 
 <div class="page-header">
@@ -60,10 +68,17 @@
 	</div></div>
 	<div id="mode-buttons" class="page-header-buttons">
 		<!-- <span class="project-btn header-btn btn">Project</span><span class="separator"> -->
-		<span class="console-btn header-btn btn">Console</span><span class="display-btn header-btn btn">Display</span><span class="separator"></span><span class="separator"></span></span><span class="simplify-btn header-btn btn">Simplify</span><span class="separator"></span><span class="export-btn header-btn btn">Export</span>
+		<span class="console-btn header-btn btn">Console</span><span class="display-btn header-btn btn">Display</span><span class="separator"></span><span class="separator"></span></span><span class="simplify-btn header-btn btn">Simplify</span><span class="separator"></span><span class="export-btn header-btn btn">Export</span><span class="separator"></span><span id="header-menu-btn" class="header-btn btn" role="button" aria-label="More links" aria-haspopup="true" aria-expanded="false" tabindex="0"><svg viewBox="0 0 16 16" aria-hidden="true" width="16" height="14"><rect x="1" y="3" width="14" height="2"/><rect x="1" y="7" width="14" height="2"/><rect x="1" y="11" width="14" height="2"/></svg></span>
+		<div id="header-menu-dropdown" class="hidden" role="menu" aria-labelledby="header-menu-btn">
+			<a class="header-menu-item" href="/docs/" target="_blank" rel="noopener" role="menuitem">Docs</a>
+			<a class="header-menu-item" href="https://github.com/mbloch/mapshaper" target="_blank" rel="noopener" role="menuitem">GitHub</a>
+			<a class="header-menu-item survey-en-link" href="https://tally.so/r/44Njok" target="_blank" rel="noopener" role="menuitem">1-minute survey</a>
+			<a class="header-menu-item survey-zh-link" href="https://tally.so/r/vGx7KQ" target="_blank" rel="noopener" lang="zh-CN" style="display:none" role="menuitem">意见反馈</a>
+			<a class="header-menu-item header-menu-sponsor" href="sponsor.html" target="_blank" rel="noopener" role="menuitem"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>Become a sponsor</a>
+		</div>
 	</div>
 	<div id="splash-buttons" class="page-header-buttons">
-		<a href="/docs/"><span id="wiki-btn" class="header-btn btn">Docs</span></a><span class="separator"></span><a href="https://github.com/mbloch/mapshaper"><span id="github-btn" class="header-btn btn">GitHub</span></a><span class="separator"></span><a id="survey-en-link" href="https://tally.so/r/44Njok" target="_blank" rel="noopener"><span id="survey-en-btn" class="header-btn btn">1-minute survey</span></a><a id="survey-zh-link" href="https://tally.so/r/vGx7KQ" target="_blank" rel="noopener" style="display:none"><span id="survey-zh-btn" class="header-btn btn" lang="zh-CN">意见反馈</span></a><span class="separator"></span><a href="sponsor.html"><span id="sponsor-btn" class="header-btn btn"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg> Become a sponsor</span></a>
+		<a href="/docs/"><span id="wiki-btn" class="header-btn btn">Docs</span></a><span class="separator"></span><a href="https://github.com/mbloch/mapshaper"><span id="github-btn" class="header-btn btn">GitHub</span></a><span class="separator"></span><a class="survey-en-link" href="https://tally.so/r/44Njok" target="_blank" rel="noopener"><span id="survey-en-btn" class="header-btn btn">1-minute survey</span></a><a class="survey-zh-link" href="https://tally.so/r/vGx7KQ" target="_blank" rel="noopener" style="display:none"><span id="survey-zh-btn" class="header-btn btn" lang="zh-CN">意见反馈</span></a><span class="separator"></span><a href="sponsor.html"><span id="sponsor-btn" class="header-btn btn"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg> Become a sponsor</span></a>
 	</div>
 </div>
 
@@ -351,10 +366,11 @@ encoding=big5</span>. Click to see all options.</div></div></div>
 		if (/^zh(-Hans)?-CN\b/i.test(langs[i])) isChina = true;
 	}
 	if (isChina) {
-		var zh = document.getElementById('survey-zh-link');
-		var en = document.getElementById('survey-en-link');
-		if (zh) zh.style.display = '';
-		if (en) en.style.display = 'none';
+		// Swap every copy of the survey link (splash bar + hamburger menu)
+		var zhLinks = document.querySelectorAll('.survey-zh-link');
+		var enLinks = document.querySelectorAll('.survey-en-link');
+		for (var j = 0; j < zhLinks.length; j++) zhLinks[j].style.display = '';
+		for (var k = 0; k < enLinks.length; k++) enLinks[k].style.display = 'none';
 	}
 })();
 </script>

package/www/mapshaper-gui.js

@@ -5655,6 +5655,56 @@
     }
   }
 
+  // Hamburger menu in the top-right of the header. After the user starts
+  // editing, the splash bar (Docs / GitHub / Survey / Sponsor) is hidden by
+  // gui.mjs; this menu is the post-edit replacement, exposing the same links
+  // from a single button so the editing controls don't have to share the row.
+
+
+  function HeaderMenu() {
+    var btn = El('#header-menu-btn');
+    var dropdown = El('#header-menu-dropdown');
+    if (!btn.node() || !dropdown.node()) return; // markup missing; nothing to do
+
+    var open = false;
+
+    function setOpen(state) {
+      if (state === open) return;
+      open = state;
+      dropdown.classed('hidden', !open);
+      btn.attr('aria-expanded', open ? 'true' : 'false');
+    }
+
+    btn.on('click', function(e) {
+      e.stopPropagation();
+      setOpen(!open);
+    });
+
+    // Keyboard activation matches button semantics for the role="button" span.
+    btn.on('keydown', function(e) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        setOpen(!open);
+      }
+    });
+
+    // Outside click closes the menu. Clicks on menu items also close it (they
+    // navigate or open in a new tab; either way the menu shouldn't linger).
+    document.addEventListener('click', function(e) {
+      if (!open) return;
+      var target = e.target;
+      if (btn.node().contains(target)) return;
+      setOpen(false);
+    });
+
+    document.addEventListener('keydown', function(e) {
+      if (open && e.key === 'Escape') {
+        setOpen(false);
+        btn.node().focus();
+      }
+    });
+  }
+
   function SessionHistory(gui) {
     var commands = [];
     // index of first command after the last "save" boundary; commands at indices
@@ -5993,6 +6043,15 @@
 
     this.clear = function() {
       reset();
+      fireHistoryChange();
+    };
+
+    this.canUndo = function() {
+      return history.length - offset > 0;
+    };
+
+    this.canRedo = function() {
+      return offset > 0;
     };
 
     function addHistoryState(undo, redo) {
@@ -6001,6 +6060,14 @@
         offset = 0;
       }
       history.push({undo, redo});
+      fireHistoryChange();
+    }
+
+    function fireHistoryChange() {
+      gui.dispatchEvent('history_change', {
+        canUndo: history.length - offset > 0,
+        canRedo: offset > 0
+      });
     }
 
     this.undo = function() {
@@ -6013,6 +6080,7 @@
         item.undo();
         gui.dispatchEvent('undo_redo_post', {type: 'undo'});
         gui.dispatchEvent('map-needs-refresh');
+        fireHistoryChange();
       }
     };
 
@@ -6024,6 +6092,7 @@
       item.redo();
       gui.dispatchEvent('undo_redo_post', {type: 'redo'});
       gui.dispatchEvent('map-needs-refresh');
+      fireHistoryChange();
     };
 
     function getHistoryItem() {
@@ -6337,6 +6406,10 @@
       return ['info', 'selection', 'data', 'box', 'labels', 'edit_points', 'rectangles'].includes(mode);
     };
 
+    this.modeSupportsUndo = function(mode) {
+      return ['data', 'labels', 'edit_points', 'edit_lines', 'edit_polygons', 'vertices', 'rectangles'].includes(mode);
+    };
+
     this.getMode = getInteractionMode;
 
     this.setMode = function(mode) {
@@ -6479,6 +6552,214 @@
     }
   }
 
+  // A reusable floating toolbar anchored at the bottom-center of the map area.
+  //
+  // Multiple toolbars stack vertically inside a shared container, so additional
+  // per-mode toolbars (e.g. feature styling) can coexist with the edit toolbar.
+  //
+  // The DOM is structured to leave room for a future drag handle without
+  // requiring rework: the toolbar element is a flex row with a content slot,
+  // and a sibling drag-handle slot can be added later.
+  //
+  // Constructor options:
+  //   name:       optional CSS class added to the toolbar element
+  //   transition: ms for the show/hide transition (default 150)
+  //
+  // API:
+  //   toolbar.addButton(iconRef, opts) -> ToolbarButton
+  //   toolbar.addSeparator()
+  //   toolbar.show()
+  //   toolbar.hide()
+  //   toolbar.visible()
+  //   toolbar.node()
+
+  function FloatingToolbar(gui, opts) {
+    opts = opts || {};
+    var transitionMs = opts.transition || 150;
+    var root = gui.container.findChild('.mshp-main-map');
+    var stack = root.findChild('.floating-toolbar-stack');
+    if (!stack) {
+      stack = El('div').addClass('floating-toolbar-stack').appendTo(root);
+    }
+    var el = El('div').addClass('floating-toolbar');
+    if (opts.name) el.addClass(opts.name);
+    var content = El('div').addClass('floating-toolbar-content').appendTo(el);
+    var visible = false;
+    var hideTimer = null;
+
+    el.appendTo(stack);
+    el.css('display', 'none');
+
+    // Hide when this gui instance becomes inactive (e.g. multi-instance mode)
+    gui.on('active', updateVisibility);
+    gui.on('inactive', updateVisibility);
+
+    this.addButton = function(iconRef, btnOpts) {
+      return new ToolbarButton(content, iconRef, btnOpts || {});
+    };
+
+    this.addSeparator = function() {
+      return El('div').addClass('floating-toolbar-separator').appendTo(content);
+    };
+
+    this.show = function() {
+      if (visible) return;
+      visible = true;
+      updateVisibility();
+    };
+
+    this.hide = function() {
+      if (!visible) return;
+      visible = false;
+      updateVisibility();
+    };
+
+    this.visible = function() {
+      return visible;
+    };
+
+    this.node = function() {
+      return el.node();
+    };
+
+    function updateVisibility() {
+      var shouldShow = visible && GUI.isActiveInstance(gui);
+      if (shouldShow) {
+        clearTimeout(hideTimer);
+        hideTimer = null;
+        el.css('display', 'flex');
+        // wait one frame so the browser registers the initial state before
+        // the transition kicks in
+        requestAnimationFrame(function() {
+          el.addClass('visible');
+        });
+      } else {
+        el.removeClass('visible');
+        // wait for the transition to finish before hiding completely
+        clearTimeout(hideTimer);
+        hideTimer = setTimeout(function() {
+          if (!(visible && GUI.isActiveInstance(gui))) {
+            el.css('display', 'none');
+          }
+        }, transitionMs);
+      }
+    }
+  }
+
+  function ToolbarButton(parent, iconRef, opts) {
+    var btn = El('div').addClass('floating-toolbar-btn').appendTo(parent);
+    if (iconRef) {
+      var iconNode = El('body').findChild(iconRef);
+      if (iconNode) {
+        var icon = iconNode.node().cloneNode(true);
+        if (icon.hasAttribute('id')) icon.removeAttribute('id');
+        btn.node().appendChild(icon);
+      }
+    }
+    var enabled = true;
+    var clickHandlers = [];
+
+    if (opts.tooltip) setTooltip(opts.tooltip);
+
+    // Block native dblclick to avoid the map's double-click zoom
+    btn.on('dblclick', function(e) { e.stopPropagation(); });
+
+    btn.on('click', function(e) {
+      if (!enabled) return;
+      for (var i = 0; i < clickHandlers.length; i++) {
+        clickHandlers[i](e);
+      }
+    });
+
+    this.on = function(event, fn) {
+      if (event == 'click') {
+        clickHandlers.push(fn);
+      } else {
+        btn.on(event, fn);
+      }
+      return this;
+    };
+
+    this.enable = function() { return this.setEnabled(true); };
+    this.disable = function() { return this.setEnabled(false); };
+
+    this.setEnabled = function(b) {
+      enabled = !!b;
+      btn.classed('disabled', !enabled);
+      return this;
+    };
+
+    this.setTooltip = setTooltip;
+
+    this.node = function() {
+      return btn.node();
+    };
+
+    function setTooltip(text) {
+      btn.attr('data-tooltip', text);
+    }
+  }
+
+  // Floating toolbar that exposes undo/redo while the user is in an editing
+  // interaction mode. The toolbar is the first consumer of FloatingToolbar;
+  // future per-mode toolbars (e.g. feature styling) can follow the same pattern.
+
+  function EditToolbar(gui) {
+    var toolbar = new FloatingToolbar(gui, { name: 'edit-toolbar' });
+    var isMac = navigator.userAgent.includes('Mac');
+    var modKey = isMac ? '\u2318' : 'Ctrl+';
+    var shiftKey = isMac ? '\u21e7' : 'Shift+';
+
+    var undoBtn = toolbar.addButton('#undo-icon', {
+      tooltip: 'Undo (' + modKey + 'Z)'
+    }).on('click', function() {
+      gui.undo.undo();
+    });
+
+    var redoBtn = toolbar.addButton('#redo-icon', {
+      tooltip: 'Redo (' + shiftKey + modKey + 'Z)'
+    }).on('click', function() {
+      gui.undo.redo();
+    });
+
+    updateButtons();
+
+    gui.on('interaction_mode_change', function() {
+      updateVisibility();
+      // history is cleared on mode change; refresh button states next tick
+      updateButtons();
+    });
+
+    gui.on('history_change', function(e) {
+      undoBtn.setEnabled(!!e.canUndo);
+      redoBtn.setEnabled(!!e.canRedo);
+      // Visibility may also depend on history (e.g. attribute edits via popup
+      // happen in modes that don't otherwise support undo).
+      updateVisibility();
+    });
+
+    updateVisibility();
+
+    function updateVisibility() {
+      if (!gui.interaction) {
+        toolbar.hide();
+        return;
+      }
+      var mode = gui.interaction.getMode();
+      var hasHistory = gui.undo.canUndo() || gui.undo.canRedo();
+      if (gui.interaction.modeSupportsUndo(mode) || hasHistory) {
+        toolbar.show();
+      } else {
+        toolbar.hide();
+      }
+    }
+
+    function updateButtons() {
+      undoBtn.setEnabled(gui.undo.canUndo());
+      redoBtn.setEnabled(gui.undo.canRedo());
+    }
+  }
+
   function Model(gui) {
     var self = new internal.Catalog();
     var deleteLayer = self.deleteLayer;
@@ -9576,6 +9857,10 @@
 
     box.setDataCoords = function(bbox) {
       boxCoords = bbox;
+      // Box is being placed programmatically (e.g. around a pinned rectangle);
+      // enable pointer events on the handles so they can be dragged. Without
+      // this, mousedowns fall through to the map and trigger pan.
+      el.classed('hittable', true);
       redraw();
     };
 
@@ -9599,6 +9884,7 @@
     // remove the current box (if any)
     box.hide = function() {
       el.hide();
+      el.classed('hittable', false);
       boxCoords = null;
       _visible = false;
       clickStartPoint = null;
@@ -10949,8 +11235,8 @@
     function showInstructions() {
       var isMac = navigator.userAgent.includes('Mac');
       var symbol = isMac ? '⌘' : '^';
-      var msg = `Instructions: Click on the map to add points. Move points by dragging. Type ${symbol}Z/${symbol}Y to undo/redo.`;
-      alert = showPopupAlert(msg, null, { non_blocking: true, max_width: '360px'});
+      var msg = `Instructions: click on the map to add points. Move points by dragging.`;
+      alert = showPopupAlert(msg, null, { non_blocking: true, max_width: '290px'});
     }
 
     gui.on('interaction_mode_change', function(e) {
@@ -11167,9 +11453,9 @@
     function showInstructions() {
       var isMac = navigator.userAgent.includes('Mac');
       var undoKey = isMac ? '⌘' : '^';
-      var msg = `Instructions: click to start a path, click or drag to keep drawing. Drag vertices to reshape a path. Type ${undoKey}Z/${undoKey}Y to undo/redo.`;
+      var msg = `Instructions: click to start a path, click or drag to keep drawing. Drag vertices to reshape a path.`;
         alert = showPopupAlert(msg, null, {
-          non_blocking: true, max_width: '388px'});
+          non_blocking: true, max_width: '350px'});
     }
 
     function hideInstructions() {
@@ -14631,6 +14917,7 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
       new SessionSnapshots(gui);
     }
     gui.interaction = new InteractionMode(gui);
+    gui.editToolbar = new EditToolbar(gui);
 
     gui.showProgressMessage = function(msg) {
       if (!gui.progressMessage) {
@@ -14755,6 +15042,7 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
     new ImportControl(gui, importOpts);
     new ExportControl(gui);
     new LayerControl(gui);
+    HeaderMenu();
     gui.console = new Console(gui);
 
     startEditing = function() {};

package/www/mapshaper.js

@@ -52127,7 +52127,7 @@ ${svg}
     });
   }
 
-  var version = "0.7.1";
+  var version = "0.7.3";
 
   // 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.