Update website

Author: mbloch

donate.html

@@ -185,13 +185,13 @@ <h1>Support mapshaper</h1>
 <p class="tagline">Mapshaper is free, open-source software for editing geographic data &mdash; used worldwide for everything from classroom exercises to professional map work.</p>
 
 <div class="donate-buttons">
-  <a href="https://ko-fi.com/mapshaper" class="btn">Donate via Ko-fi</a>
+  <a href="https://ko-fi.com/mapshaper" class="btn">Support via Ko-fi</a>
   <a href="https://github.com/sponsors/mbloch" class="btn btn-secondary">Sponsor on GitHub</a>
 </div>
 
-<p class="donate-note">Ko-fi accepts one-time or recurring donations &mdash; no account required. GitHub Sponsors offers recurring sponsorship.</p>
+<p class="donate-note">Ko-fi accepts one-time or recurring contributions &mdash; no account required. GitHub Sponsors offers recurring sponsorship.</p>
 
-<h2>What your donation supports</h2>
+<h2>What your contribution supports</h2>
 <ul class="support-list">
   <li>Development time &mdash; bug fixes, new features, performance improvements</li>
   <li>Responding to user issues and requests</li>

index.html

@@ -70,7 +70,7 @@
 		<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>
 	</div>
 	<div id="splash-buttons" class="page-header-buttons">
-		<a href="https://github.com/mbloch/mapshaper/wiki"><span id="wiki-btn" class="header-btn btn">Wiki</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 href="donate.html"><span id="donate-btn" class="header-btn btn">Donate</span></a>
+		<a href="https://github.com/mbloch/mapshaper/wiki"><span id="wiki-btn" class="header-btn btn">Wiki</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 href="donate.html"><span id="donate-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> Sponsor</span></a>
 	</div>
 </div>
 

mapshaper-gui.js

@@ -3079,14 +3079,25 @@
           throw Error('Internal error');
         }
       }
-      if (filteredArcs) {
-        // match simplification of unfiltered arcs
-        filteredArcs.setRetainedInterval(unfilteredArcs.getRetainedInterval());
-      }
+      var userInterval = unfilteredArcs.getRetainedInterval();
       // switch to filtered version of arcs at small scales
       var unitsPerPixel = 1/ext.getTransform().mx,
           useFiltering = filteredArcs && unitsPerPixel > filteredSegLen * 1.5;
-      return useFiltering ? filteredArcs : unfilteredArcs;
+      if (useFiltering) {
+        // Dynamic LOD: drop any vertex whose Visvalingam triangle-area
+        // contribution is smaller than half a square pixel at the current
+        // zoom. Visually imperceptible, but can remove a large fraction of
+        // vertices on very zoomed-out views of highly detailed arcs.
+        // Never go below the user's own simplification setting.
+        var displayInterval = unitsPerPixel * unitsPerPixel * 0.5;
+        filteredArcs.setRetainedInterval(Math.max(userInterval, displayInterval));
+        return filteredArcs;
+      }
+      if (filteredArcs) {
+        // match simplification of unfiltered arcs, in case we switch back
+        filteredArcs.setRetainedInterval(userInterval);
+      }
+      return unfilteredArcs;
     };
   }
 
@@ -8931,6 +8942,9 @@
       var pct = ease ? ease(e.pct) : e.pct,
           val = end * pct + start * (1 - pct);
       self.dispatchEvent('change', {value: val});
+      if (e.done) {
+        self.dispatchEvent('done');
+      }
     }
   }
 
@@ -9095,6 +9109,7 @@
       }
       if (evt.done) {
         active = false;
+        self.dispatchEvent('mousewheelend');
       } else {
         if (fadeFactor > 0) {
           // Decelerate towards the end of the sustain interval (for smoother zooming)
@@ -9688,12 +9703,26 @@
 
     gui.on('map_reset', function() {
       ext.reset(true);
+      // ext.reset() synchronously triggers a 'nav' draw; signal end-of-
+      // interaction so the LayerRenderer settles on a sharp frame
+      // immediately instead of waiting on the fallback timer.
+      gui.dispatchEvent('map_interaction_end');
     });
 
     zoomTween.on('change', function(e) {
       ext.zoomToExtent(e.value, _fx, _fy);
     });
 
+    // Signal end-of-interaction so downstream modules (e.g. LayerRenderer) can
+    // trigger a settle/redraw immediately, instead of waiting on a debounce.
+    zoomTween.on('done', function() {
+      gui.dispatchEvent('map_interaction_end');
+    });
+
+    wheel.on('mousewheelend', function() {
+      gui.dispatchEvent('map_interaction_end');
+    });
+
     mouse.on('click', function(e) {
       gui.dispatchEvent('map_click', e);
     });
@@ -9744,6 +9773,7 @@
         zoomBox.turnOff();
       } else {
         El('body').removeClass('panning').removeClass('pan');
+        gui.dispatchEvent('map_interaction_end');
       }
     });
 
@@ -12279,7 +12309,6 @@
   }
 
   function drawStyledLayerToCanvas(lyr, canv, ext) {
-    // TODO: add filter for out-of-view shapes
     var style = lyr.gui.style;
     var layer = lyr.gui.displayLayer;
     var arcs, filter;
@@ -12291,7 +12320,7 @@
       }
     } else {
       arcs = getArcsForRendering(lyr, ext);
-      filter = getShapeFilter(arcs, ext);
+      filter = getShapeFilter(arcs, layer.shapes, ext);
       canv.drawStyledPaths(layer.shapes, arcs, style, filter);
       if (style.vertices) {
         canv.drawVertices(layer.shapes, arcs, style, filter);
@@ -12300,11 +12329,12 @@
     canv.clearStyles();
   }
 
-
   // Return a function for testing if an arc should be drawn in the current view
   function getArcFilter(arcs, ext, usedFlag, arcCounts) {
-    var MIN_PATH_LEN = 0.1;
-    var minPathLen = ext.getPixelSize() * MIN_PATH_LEN, // * 0.5
+    // Arcs whose bbox is smaller than this pixel threshold collapse to a dot
+    // under roundToPix anyway; skipping them saves per-arc iteration.
+    var MIN_PATH_LEN = 0.5;
+    var minPathLen = ext.getPixelSize() * MIN_PATH_LEN,
         geoBounds = ext.getBounds(),
         geoBBox = geoBounds.toArray(),
         allIn = geoBounds.contains(arcs.getBounds()),
@@ -12324,15 +12354,20 @@
       };
     }
 
-  // Return a function for testing if a shape should be drawn in the current view
-  function getShapeFilter(arcs, ext) {
-    var viewBounds = ext.getBounds();
-    var bounds = new Bounds();
-    if (ext.scale() < 1.1) return null; // full or almost-full zoom: no filter
-    return function(shape) {
-      bounds.empty();
-      arcs.getMultiShapeBounds(shape, bounds);
-      return viewBounds.intersects(bounds);
+  // Return a function for testing if a shape should be drawn in the current
+  // view. The filter takes a shape index and tests the shape's bbox against
+  // the viewport. At nearly full extent the test is a no-op, so we return
+  // null to let the caller skip it entirely.
+  function getShapeFilter(arcs, shapes, ext) {
+    if (ext.scale() < 1.1) return null;
+    var view = ext.getBounds();
+    var b = new Bounds();
+    return function(i) {
+      var shp = shapes[i];
+      if (!shp) return false;
+      b.empty();
+      arcs.getMultiShapeBounds(shp, b);
+      return view.intersects(b);
     };
   }
 
@@ -12405,7 +12440,7 @@
       _ctx.fillStyle = color;
       for (i=0; i<shapes.length; i++) {
         var shp = shapes[i];
-        if (!shp || filter && !filter(shp)) continue;
+        if (!shp || filter && !filter(i)) continue;
         for (j=0; j<shp.length; j++) {
           iter.init(shp[j]);
           while (iter.hasNext()) {
@@ -12438,7 +12473,7 @@
       var styler = style.styler || null;
       for (var i=0; i<shapes.length; i++) {
         shp = shapes[i];
-        if (!shp || filter && !filter(shp)) continue;
+        if (!shp || filter && !filter(i)) continue;
         if (styler) {
           styler(style, i);
         }
@@ -12606,7 +12641,8 @@
       var startPath = getPathStart(_ext, getLineScale(_ext)),
           t = getScaledTransform(_ext),
           ctx = _ctx,
-          batch = 25, // render paths in batches of this size (an optimization)
+          // Larger batches reduce the number of stroke() flushes.
+          batch = 100,
           count = 0,
           n = arcs.size(),
           i, iter;
@@ -12963,12 +12999,68 @@
         _furniture = new SvgDisplayLayer(gui, ext, null).appendTo(el),
         _ext = ext;
 
+    // Fast-nav config: when the most recent render cycle exceeded SLOW_FRAME_MS,
+    // subsequent 'nav' actions transform the previously rendered bitmap via CSS
+    // instead of re-drawing vector content. This trades visible scaling/edge
+    // artifacts for smoother panning and zooming on large datasets.
+    //
+    // Canvas 2D paint ops are normally rasterized asynchronously, so JS usually
+    // returns long before the pixels are committed to the compositor. We force
+    // a synchronous flush at the end of a full render (see flushCanvas) so that
+    //   (a) the elapsed time reflects the *true* frame cost (JS + rasterization)
+    //       rather than just the JS portion, and
+    //   (b) subsequent fast-nav CSS transforms composite cleanly rather than on
+    //       top of a still-committing bitmap.
+    // We use only the most recent sample because previous renders may have
+    // drawn a different scene (e.g. a simpler layer that is no longer active).
+    var SLOW_FRAME_MS = 100;
+    // Fallback delay before triggering a redraw if no explicit end-of-interaction
+    // event arrives. The primary trigger is gui 'map_interaction_end' (mouse
+    // release, wheel timeout, zoom tween done); this timer only fires if that
+    // signal is somehow missed, so it's set generously.
+    var FAST_SETTLE_FALLBACK_MS = 2000;
+    var _lastFrameMs = 0; // duration of the most recent full render cycle
+    var _snapshot = null; // {bounds, width, height, pixRatio}
+    var _fastActive = false;
+    var _settleTimer = null;
+    var _redrawPending = false;
+    var _settleRequested = false;
+
+    // 'map_interaction_end' may arrive before the in-flight 'nav' draw runs,
+    // because drawLayers() schedules its work via requestAnimationFrame.
+    // We latch the intent so that whichever order things happen in, the
+    // settle fires immediately rather than waiting on the fallback timer.
+    gui.on('map_interaction_end', function() {
+      if (_redrawPending) {
+        settleNow();
+      } else {
+        _settleRequested = true;
+      }
+    });
+
     // don't let furniture container block events to symbol layers
     _furniture.css('pointer-events', 'none');
 
     this.drawMainLayers = function(layers, action) {
-      var needSvgRedraw = action != 'nav' && action != 'hover';
       if (skipMainLayerRedraw(action)) return;
+      if (action == 'nav' && shouldUseFastNav()) {
+        applyFastTransform();
+        // SVG symbol reposition is already cheap; keep labels/symbols accurate
+        // while the canvas is being transformed.
+        layers.forEach(function(lyr) {
+          if (internal.layerHasSvgSymbols(lyr) || internal.layerHasLabels(lyr)) {
+            _svg.reposition(lyr, 'symbol');
+          }
+        });
+        markRedrawPending();
+        return;
+      }
+      var startTime = performance.now();
+      var needSvgRedraw = action != 'nav' && action != 'hover';
+      cancelSettle();
+      _redrawPending = false;
+      _settleRequested = false; // a full render satisfies any pending settle
+      clearFastTransform();
       _mainCanv.prep(_ext);
       if (needSvgRedraw) {
         _svg.clear();
@@ -12983,6 +13075,12 @@
            drawCanvasLayer(lyr, _mainCanv);
         }
       });
+      // Force synchronous rasterization so performance.now() reflects the true
+      // frame cost (including GPU paint-op commit), and so subsequent fast-nav
+      // CSS transforms don't composite over a still-pending canvas commit.
+      flushCanvas(_mainCanv);
+      _lastFrameMs = performance.now() - startTime;
+      captureSnapshot();
     };
 
     // Draw highlight effect for hover and selection
@@ -13034,6 +13132,18 @@
       }
     }
 
+    // Reading back a single pixel forces Chrome/Firefox to synchronously complete
+    // any queued paint operations before returning. This converts an unbounded
+    // deferred "Commit" phase into in-line wall time we can measure, and ensures
+    // the canvas pixels are actually on screen before the caller returns.
+    function flushCanvas(canv) {
+      try {
+        canv.node().getContext('2d').getImageData(0, 0, 1, 1);
+      } catch (e) {
+        // e.g. cross-origin-tainted canvas (shouldn't happen here, but safe)
+      }
+    }
+
     function getSvgLayerType(layer) {
       var type = null;
       if (internal.layerHasSvgSymbols(layer)) {
@@ -13043,6 +13153,87 @@
       }
       return type;
     }
+
+    function captureSnapshot() {
+      _snapshot = {
+        bounds: _ext.getBounds(),
+        width: _ext.width(),
+        height: _ext.height(),
+        pixRatio: GUI.getPixelRatio()
+      };
+    }
+
+    function shouldUseFastNav() {
+      if (!_snapshot) return false;
+      if (_lastFrameMs <= SLOW_FRAME_MS) return false;
+      if (_snapshot.width != _ext.width() || _snapshot.height != _ext.height()) return false;
+      if (_snapshot.pixRatio != GUI.getPixelRatio()) return false;
+      return true;
+    }
+
+    // Apply a CSS transform to the main canvas so its previously rendered
+    // contents line up with the current map extent. The canvas bitmap is not
+    // redrawn.
+    function applyFastTransform() {
+      var t = _ext.getTransform();
+      var b = _snapshot.bounds;
+      var tl = t.transform(b.xmin, b.ymax);
+      var br = t.transform(b.xmax, b.ymin);
+      var sx = (br[0] - tl[0]) / _snapshot.width;
+      var sy = (br[1] - tl[1]) / _snapshot.height;
+      // On retina the canvas bitmap is already scaled down to CSS pixels via a
+      // CSS transform from the .retina class; overriding `transform` here
+      // replaces that rule so we must bake the pixRatio scale back in.
+      var k = 1 / _snapshot.pixRatio;
+      setFastTransform(_mainCanv.node(), tl[0], tl[1], sx * k, sy * k);
+      _fastActive = true;
+    }
+
+    function clearFastTransform() {
+      if (!_fastActive) return;
+      var node = _mainCanv.node();
+      node.style.transform = '';
+      node.style.transformOrigin = '';
+      _fastActive = false;
+    }
+
+    function setFastTransform(node, tx, ty, sx, sy) {
+      node.style.transformOrigin = 'top left';
+      node.style.transform = 'translate(' + tx + 'px,' + ty + 'px) scale(' + sx + ',' + sy + ')';
+    }
+
+    // Record that a fast-nav frame is showing so that the next end-of-interaction
+    // event (or the fallback timer) can trigger a real redraw. Each fast-nav
+    // frame resets the fallback timer so it only fires after the user truly
+    // stops interacting, as a backstop for any interaction path that doesn't
+    // emit 'map_interaction_end'. If 'map_interaction_end' was already
+    // received before this frame ran (e.g. the home button reset, which
+    // dispatches synchronously while the nav draw is still queued in rAF),
+    // settle right now instead of waiting.
+    function markRedrawPending() {
+      _redrawPending = true;
+      cancelSettle();
+      if (_settleRequested) {
+        _settleRequested = false;
+        settleNow();
+      } else {
+        _settleTimer = setTimeout(settleNow, FAST_SETTLE_FALLBACK_MS);
+      }
+    }
+
+    function settleNow() {
+      cancelSettle();
+      if (!_redrawPending) return;
+      _redrawPending = false;
+      gui.dispatchEvent('map-needs-refresh');
+    }
+
+    function cancelSettle() {
+      if (_settleTimer) {
+        clearTimeout(_settleTimer);
+        _settleTimer = null;
+      }
+    }
   }
 
   // Controls the shift-drag box editing tool
@@ -13778,6 +13969,7 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
 
       // RENDERING
       // draw main content layers
+
       _renderer.drawMainLayers(contentLayers, action);
 
       // draw hover & selection overlay