@superrouteca/smap 1.2.1 → 1.2.5

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 1.2.5 — 2026-10-29
+
+- Canvas map (`renderer: 'canvas'`, and browsers without WebGL 2): pans smoothly on computers whose graphics are
+  emulated in software. The map and its pin images are drawn by the processor, and while the map only moves the
+  drawn picture is shifted into place (a margin is drawn past each edge, `panMargin`) and drawn again when the move
+  ends. Measured on the dispatcher under software emulation: a full redraw from about 715 ms to 35 ms per frame.
+
+## 1.2.2 — 2026-10-29
+
+- Plan editor: opening a distance snapshot sends the plan's points (every job location and vehicle start and end), so
+  the legs between them are measured ahead and edits are answered faster. Nothing to change in your code; servers
+  that do not read the points work as before.
+
 ## 1.2.1 — 2026-10-28
 
 - Pins: the number and the count badge are drawn into each pin at every zoom, so where pins overlap the upper pin

package/README.md

@@ -450,8 +450,8 @@ editor.destroy();
   fast path may appear or go). `state().path` and the `change` event's `path` say where the last answer came from
   (`'fast'` or `'standard'`); `fastPath: false` keeps every call on the standard path. The snapshot works on both
   paths with the same id.
-- **Distance snapshot**: the editor opens one (`POST /v1/plan/matrix`) and names it in every call, so legs measured
-  once are not measured again. When an answer says the snapshot expired (`X-Plan-Matrix: expired`, or a `410`), it
+- **Distance snapshot**: the editor opens one (`POST /v1/plan/matrix`, with the plan's points so the legs between
+  them can be measured ahead) and names it in every call, so legs measured once are not measured again. When an answer says the snapshot expired (`X-Plan-Matrix: expired`, or a `410`), it
   opens a new one and carries on; a snapshot that cannot be opened never stops an edit. `destroy()` closes it.
 - **Calls in flight**: a newer edit cancels the call before it. An edit you can see the outcome of (a move, an order,
   a removal) is drawn at once and priced when the answer arrives; `pending` in the `change` event says it is not

package/dist/SOURCE.json

@@ -1,15 +1,15 @@
 {
-  "sdkVersion": "1.2.1",
+  "sdkVersion": "1.2.5",
   "engine": "maplibre-gl 6.16.0",
   "files": {
-    "smap.js": "bbce8821ec3564f5fc7498b0e7973636e98650e956d94a51a2dbd2259b71b89b",
+    "smap.js": "8c9047dd30bde9f85c16a14fc6d7b9cca3b5b760fb062b618427fdfcb365f488",
     "smap.css": "9bc4b14821de97da199e6af4f18541eeaf53a2ae91e5831e7224f57fe6b77660",
-    "smap-client.js": "5c769f3f9e4e82d3e7c25bfbd8b91f85f106161f65328fe6eaf19eab6561e897",
+    "smap-client.js": "7ea3fdf75dcb82b51388d89adab0dde1b76194db05b6ada321293cf0411bdd2a",
     "smap-client.d.ts": "5f0df11bf60c5a9ced34522a284de81260c27871678ab772f16da9ccf6883f58",
-    "smap.mjs": "8edb30186a60969440415b75f6b14b04eea317dc83637dc49e1757ded0c9b0de",
-    "smap.cjs": "5bfc4ff01ed19e861ffde2b908f5509c774912fe4d305c6f8269cb4d9f7eeb69",
-    "smap-client.cjs": "13a379343810b63bdaa060499d63844e133d28c00649811dcfe107b5dfbabb53",
-    "smap-client.mjs": "58f6aa8cb2cec09569606b088247b0e7803cdf225d5ceb733ae3115572a36241",
+    "smap.mjs": "70b444394e14323127f2c7401f2284a5e920f02aa5ceec6a06cd7e6788a7bc67",
+    "smap.cjs": "f6940a97b2e2f66e63c669ec62fef04887867ee06a0623014bfc66fd09a763dd",
+    "smap-client.cjs": "09fb13e526bd8bc4eaa156124032b3de0323c3168f6d3429e2ca557632953783",
+    "smap-client.mjs": "f1cf9514d6135e4ceee23d7ffca281afd2ae824a366ddcf2cf464414502482f3",
     "smap-client.d.cts": "e0fe4eb54cd66b831116082f42bd2f7de260f9f12a2741f4004f8cf10c252116",
     "smap-client.d.mts": "96830d316ddb33b4ff8edb8b6f810337479636114f75c4170d95038ffda74103",
     "vendor-licenses.txt": "ee5fc05a0677eaf69601d2c7db0d9ecd6cc27c3abc1d0733bc9ed34707cf8ef2"

package/dist/smap-client.cjs

@@ -1,5 +1,5 @@
 /* Generated by js/build.mjs from js/src (see SOURCE.json). Do not edit. */
-/*! sMap JS client 1.2.1 — tokens, the nearest node, styles, tiles and raw reads, without a map view. */
+/*! sMap JS client 1.2.5 — tokens, the nearest node, styles, tiles and raw reads, without a map view. */
 /*
  * Runs wherever `fetch` exists: browsers, Node.js 18+, workers; elsewhere (mini programs, older runtimes) pass your
  * own `fetch`. UMD: `window.SMapClient`, `require('smap-client')`, or an AMD module.
@@ -19,7 +19,7 @@
 }(typeof self !== 'undefined' ? self : this, function () {
   'use strict';
 
-  var VERSION = '1.2.1';
+  var VERSION = '1.2.5';
   var NODE_TTL = 3600 * 1000;          // the measured order
   var KNOWN_TTL = 30 * 86400 * 1000;   // the last node list received, used when none can be read
 

package/dist/smap-client.js

@@ -1,4 +1,4 @@
-/*! sMap JS client 1.2.1 — tokens, the nearest node, styles, tiles and raw reads, without a map view. */
+/*! sMap JS client 1.2.5 — tokens, the nearest node, styles, tiles and raw reads, without a map view. */
 /*
  * Runs wherever `fetch` exists: browsers, Node.js 18+, workers; elsewhere (mini programs, older runtimes) pass your
  * own `fetch`. UMD: `window.SMapClient`, `require('smap-client')`, or an AMD module.
@@ -18,7 +18,7 @@
 }(typeof self !== 'undefined' ? self : this, function () {
   'use strict';
 
-  var VERSION = '1.2.1';
+  var VERSION = '1.2.5';
   var NODE_TTL = 3600 * 1000;          // the measured order
   var KNOWN_TTL = 30 * 86400 * 1000;   // the last node list received, used when none can be read
 

package/dist/smap-client.mjs

@@ -1,7 +1,7 @@
 /* Generated by js/build.mjs from js/src (see SOURCE.json). Do not edit. */
 var smapClientModule = { exports: {} };
 (function (module, exports, define) {
-/*! sMap JS client 1.2.1 — tokens, the nearest node, styles, tiles and raw reads, without a map view. */
+/*! sMap JS client 1.2.5 — tokens, the nearest node, styles, tiles and raw reads, without a map view. */
 /*
  * Runs wherever `fetch` exists: browsers, Node.js 18+, workers; elsewhere (mini programs, older runtimes) pass your
  * own `fetch`. UMD: `window.SMapClient`, `require('smap-client')`, or an AMD module.
@@ -21,7 +21,7 @@ var smapClientModule = { exports: {} };
 }(typeof self !== 'undefined' ? self : this, function () {
   'use strict';
 
-  var VERSION = '1.2.1';
+  var VERSION = '1.2.5';
   var NODE_TTL = 3600 * 1000;          // the measured order
   var KNOWN_TTL = 30 * 86400 * 1000;   // the last node list received, used when none can be read
 

package/dist/smap.cjs

@@ -1,6 +1,6 @@
 /* Generated by js/build.mjs from js/src (see SOURCE.json). Do not edit. */
 'use strict';
-/*! sMap Web SDK 1.2.1. Bundles maplibre-gl 6.16.0 (BSD-3-Clause), see vendor-licenses.txt. */
+/*! sMap Web SDK 1.2.5. Bundles maplibre-gl 6.16.0 (BSD-3-Clause), see vendor-licenses.txt. */
 
 var smapCore = null;
 function smapCreateEngine() {
@@ -28756,6 +28756,12 @@ function smapCreateCanvas() {
     this._maxZoom = options.maxZoom !== undefined ? options.maxZoom : 22;
     this._drawn = [];
     this._dirty = false;
+    // Pixels drawn past each edge of the view. While the map only moves, the drawn picture is shifted into place
+    // instead of being drawn again, and drawn again once the move ends or the margin runs out: redrawing a whole
+    // canvas on every frame is what made panning stall on computers without graphics acceleration.
+    this._panMargin = options.panMargin;
+    this._at = null;
+    this._redraw = false;
     container.classList.add('maplibregl-map', 'smap-canvas-map');
     var canvasContainer = this._doc.createElement('div');
     canvasContainer.className = 'maplibregl-canvas-container maplibregl-interactive';
@@ -28857,7 +28863,7 @@ function smapCreateCanvas() {
     this._fire('move', {});
     if (zoomed) { this._fire('zoom', {}); }
   };
-  CanvasMap.prototype._end = function (zoomed) { this._fire('moveend', {}); if (zoomed) { this._fire('zoomend', {}); } this._fire('idle', {}); };
+  CanvasMap.prototype._end = function (zoomed) { if (this._shifted()) { this._changed(); } this._fire('moveend', {}); if (zoomed) { this._fire('zoomend', {}); } this._fire('idle', {}); };
   CanvasMap.prototype.jumpTo = function (o) {
     var z0 = this._zoom;
     this._set(o.center, o.zoom);
@@ -28931,16 +28937,43 @@ function smapCreateCanvas() {
     var win = this._doc.defaultView || {}, ratio = Math.min(3, win.devicePixelRatio || 1);
     if (w === this._w && h === this._h && ratio === this._ratio) { return false; }
     this._w = w; this._h = h; this._ratio = ratio;
-    this._canvas.width = Math.round(w * ratio); this._canvas.height = Math.round(h * ratio);
-    this._canvas.style.width = w + 'px'; this._canvas.style.height = h + 'px';
+    var m = this._panMargin;
+    this._pad = m === undefined || m === null ? Math.min(400, Math.round(Math.max(w, h) / 3)) : Math.max(0, Math.round(m));
+    var pw = w + 2 * this._pad, ph = h + 2 * this._pad;
+    this._canvas.width = Math.round(pw * ratio); this._canvas.height = Math.round(ph * ratio);
+    this._canvas.style.width = pw + 'px'; this._canvas.style.height = ph + 'px';
+    this._canvas.style.willChange = 'transform';
+    this._at = null;
+    this._place(0, 0);
     return true;
   };
+  // Where the view's centre is now, in world pixels at the drawn zoom, against where the picture was drawn.
+  CanvasMap.prototype._offset = function () {
+    if (!this._at || this._at.zoom !== this._zoom) { return null; }
+    var s = this._scale();
+    var x = lngX(this._center.lng, s) - this._at.x, y = latY(this._center.lat, s) - this._at.y;
+    // Across the antimeridian the centre's longitude wraps; take the nearer copy of the world.
+    if (x > s / 2) { x -= s; } else if (x < -s / 2) { x += s; }
+    return { x: x, y: y };
+  };
+  CanvasMap.prototype._shifted = function () { var o = this._offset(); return !!o && (o.x !== 0 || o.y !== 0); };
+  CanvasMap.prototype._place = function (dx, dy) {
+    var p = this._pad || 0;
+    this._canvas.style.transform = 'translate(' + (-p - dx) + 'px,' + (-p - dy) + 'px)';
+  };
   CanvasMap.prototype.triggerRepaint = function () { this._changed(); };
-  CanvasMap.prototype._changed = function () {
+  CanvasMap.prototype._changed = function (moved) {
+    if (!moved) { this._redraw = true; }
     if (this._dirty || this._removed) { return; }
     this._dirty = true;
     var self = this;
-    raf(function () { self._dirty = false; self._render(); });
+    raf(function () {
+      self._dirty = false;
+      var o = self._redraw ? null : self._offset();
+      if (o && Math.abs(o.x) <= self._pad && Math.abs(o.y) <= self._pad) { self._place(o.x, o.y); self._fire('render', {}); return; }
+      self._redraw = false;
+      self._render();
+    });
   };
   CanvasMap.prototype.loaded = function () { return true; };
   CanvasMap.prototype.isStyleLoaded = function () { return true; };
@@ -29017,7 +29050,9 @@ function smapCreateCanvas() {
     if (image && image.data && image.width !== undefined && !(image.getContext)) {
       canvas = this._doc.createElement('canvas');
       canvas.width = image.width; canvas.height = image.height;
-      var ctx = canvas.getContext('2d');
+      // Kept by the processor like the map's own canvas: an image held by the graphics process is read back each
+      // time it is drawn, which under software emulation cost most of a second per frame with a hundred pins.
+      var ctx = canvas.getContext('2d', { willReadFrequently: true });
       var data = ctx.createImageData(image.width, image.height);
       data.data.set(image.data);
       ctx.putImageData(data, 0, 0);
@@ -29075,10 +29110,22 @@ function smapCreateCanvas() {
   };
 
   CanvasMap.prototype._render = function () {
-    var ctx = this._canvas.getContext('2d');
+    // A canvas the processor draws: this map is for computers whose graphics are emulated in software, where the
+    // browser handing a canvas to the graphics process to draw took most of a second per frame (measured: 0.6 s
+    // under software emulation against 2 ms drawn by the processor).
+    var ctx = this._canvas.getContext('2d', { willReadFrequently: true });
     if (!ctx) { return; }
-    var r = this._ratio;
+    var r = this._ratio, pad = this._pad || 0, w = this._w, h = this._h;
     ctx.setTransform(r, 0, 0, r, 0, 0);
+    // The picture covers the view and its margin: drawn as a view that much larger around the same centre.
+    this._w = w + 2 * pad; this._h = h + 2 * pad;
+    try { this._paint(ctx); } finally { this._w = w; this._h = h; }
+    var s = this._scale();
+    this._at = { zoom: this._zoom, x: lngX(this._center.lng, s), y: latY(this._center.lat, s) };
+    this._place(0, 0);
+    this._fire('render', {});
+  };
+  CanvasMap.prototype._paint = function (ctx) {
     ctx.clearRect(0, 0, this._w, this._h);
     this._drawn = [];
     var self = this, zoom = this._zoom;
@@ -29102,7 +29149,6 @@ function smapCreateCanvas() {
         else if (l.type === 'symbol') { self._drawSymbol(ctx, l, f, c); }
       }
     });
-    this._fire('render', {});
   };
 
   CanvasMap.prototype._drawRaster = function (ctx, l) {
@@ -29386,6 +29432,9 @@ function smapCreateCanvas() {
     if (!at) { x0 = 0; y0 = 0; x1 = this._w; y1 = this._h; }
     else if (Array.isArray(at) && Array.isArray(at[0])) { x0 = Math.min(at[0][0], at[1][0]); x1 = Math.max(at[0][0], at[1][0]); y0 = Math.min(at[0][1], at[1][1]); y1 = Math.max(at[0][1], at[1][1]); }
     else { var p = Array.isArray(at) ? { x: at[0], y: at[1] } : at; x0 = x1 = p.x; y0 = y1 = p.y; }
+    // From view points to the drawn picture's: it starts a margin before the view and may have been shifted since.
+    var shift = this._offset() || { x: 0, y: 0 }, pad = this._pad || 0;
+    x0 += pad + shift.x; x1 += pad + shift.x; y0 += pad + shift.y; y1 += pad + shift.y;
     var out = [], seen = [];
     for (var i = this._drawn.length - 1; i >= 0; i--) {
       var d = this._drawn[i];
@@ -30757,6 +30806,9 @@ function smapCreatePlan() {
     var body = {};
     if (this._context.region) { body.region = this._context.region; }
     if (this._context.profile) { body.profile = this._context.profile; }
+    // The plan's points, so the server can measure their legs into the snapshot ahead of the edits (E24).
+    var points = this._points();
+    if (points.length) { body.points = points; }
     this._openingKey = key;
     var opening = this._transport.send('POST', PATHS.matrix, body).then(function (res) {
       var id = res.data && res.data.matrix;
@@ -30781,6 +30833,27 @@ function smapCreatePlan() {
     return opening;
   };
 
+  // The plan's points as a snapshot opening sends them: every job location, then every vehicle's start and end, exactly
+  // as the plan holds them (the numbers the plan calls send, since legs are matched exactly), each sent once, first seen
+  // first.
+  PlanEditor.prototype._points = function () {
+    var entry = this._history[this._at];
+    var out = [];
+    var seen = {};
+    function add(v) {
+      var ll = lngLat(v);
+      if (!ll || !isFinite(ll[0]) || !isFinite(ll[1])) { return; }
+      var p = { lat: ll[1], lng: ll[0] };
+      var k = p.lat + ',' + p.lng;
+      if (seen[k]) { return; }
+      seen[k] = true;
+      out.push(p);
+    }
+    ((entry && entry.jobs) || []).forEach(function (j) { add(j && j.location); });
+    (this._vehicles || []).forEach(function (v) { if (v) { add(v.start); add(v.end); } });
+    return out;
+  };
+
   // ------------------------------------------------------------------ texts (14 languages)
 
   var TEXT_KEYS = ['editor', 'busy', 'undo', 'redo', 'refine', 'total', 'distance', 'drivingTime', 'stops', 'violations',
@@ -31590,7 +31663,7 @@ function smapCreateSdk(engine, interop, canvas, plan) {
 })(typeof self !== 'undefined' ? self : this, function (engine, interop, canvasLib, plan) {
   'use strict';
 
-  var VERSION = '1.2.1';
+  var VERSION = '1.2.5';
   var FLAVORS = ['light', 'white', 'grayscale', 'dark', 'black'];
   var BASEMAP_SOURCE = 'basemap';
   var BUILDINGS_LAYER = 'smap-buildings-3d';
@@ -35773,7 +35846,7 @@ function SMapMap(options) {
   SMapMap.prototype = core.Map.prototype;
   return new core.Map(options);
 }
-var smapVersion = "1.2.1";
+var smapVersion = "1.2.5";
 var smapStyles = ['light', 'white', 'grayscale', 'dark', 'black'];
 /** The bundled rendering engine, for anything the SDK does not wrap (loaded on the first call). */
 function smapGetEngine() { return smapLoad().engine; }

package/dist/smap.js

@@ -1,4 +1,4 @@
-/*! sMap Web SDK 1.2.1. Bundles maplibre-gl 6.16.0 (BSD-3-Clause), see vendor-licenses.txt. */
+/*! sMap Web SDK 1.2.5. Bundles maplibre-gl 6.16.0 (BSD-3-Clause), see vendor-licenses.txt. */
 (function () {
 function smapCreateEngine() {
   var SMAP_BASE_URL = (typeof document !== 'undefined' && document.baseURI) || (typeof location !== 'undefined' && location.href) || 'about:blank';
@@ -28753,6 +28753,12 @@ function smapCreateCanvas() {
     this._maxZoom = options.maxZoom !== undefined ? options.maxZoom : 22;
     this._drawn = [];
     this._dirty = false;
+    // Pixels drawn past each edge of the view. While the map only moves, the drawn picture is shifted into place
+    // instead of being drawn again, and drawn again once the move ends or the margin runs out: redrawing a whole
+    // canvas on every frame is what made panning stall on computers without graphics acceleration.
+    this._panMargin = options.panMargin;
+    this._at = null;
+    this._redraw = false;
     container.classList.add('maplibregl-map', 'smap-canvas-map');
     var canvasContainer = this._doc.createElement('div');
     canvasContainer.className = 'maplibregl-canvas-container maplibregl-interactive';
@@ -28854,7 +28860,7 @@ function smapCreateCanvas() {
     this._fire('move', {});
     if (zoomed) { this._fire('zoom', {}); }
   };
-  CanvasMap.prototype._end = function (zoomed) { this._fire('moveend', {}); if (zoomed) { this._fire('zoomend', {}); } this._fire('idle', {}); };
+  CanvasMap.prototype._end = function (zoomed) { if (this._shifted()) { this._changed(); } this._fire('moveend', {}); if (zoomed) { this._fire('zoomend', {}); } this._fire('idle', {}); };
   CanvasMap.prototype.jumpTo = function (o) {
     var z0 = this._zoom;
     this._set(o.center, o.zoom);
@@ -28928,16 +28934,43 @@ function smapCreateCanvas() {
     var win = this._doc.defaultView || {}, ratio = Math.min(3, win.devicePixelRatio || 1);
     if (w === this._w && h === this._h && ratio === this._ratio) { return false; }
     this._w = w; this._h = h; this._ratio = ratio;
-    this._canvas.width = Math.round(w * ratio); this._canvas.height = Math.round(h * ratio);
-    this._canvas.style.width = w + 'px'; this._canvas.style.height = h + 'px';
+    var m = this._panMargin;
+    this._pad = m === undefined || m === null ? Math.min(400, Math.round(Math.max(w, h) / 3)) : Math.max(0, Math.round(m));
+    var pw = w + 2 * this._pad, ph = h + 2 * this._pad;
+    this._canvas.width = Math.round(pw * ratio); this._canvas.height = Math.round(ph * ratio);
+    this._canvas.style.width = pw + 'px'; this._canvas.style.height = ph + 'px';
+    this._canvas.style.willChange = 'transform';
+    this._at = null;
+    this._place(0, 0);
     return true;
   };
+  // Where the view's centre is now, in world pixels at the drawn zoom, against where the picture was drawn.
+  CanvasMap.prototype._offset = function () {
+    if (!this._at || this._at.zoom !== this._zoom) { return null; }
+    var s = this._scale();
+    var x = lngX(this._center.lng, s) - this._at.x, y = latY(this._center.lat, s) - this._at.y;
+    // Across the antimeridian the centre's longitude wraps; take the nearer copy of the world.
+    if (x > s / 2) { x -= s; } else if (x < -s / 2) { x += s; }
+    return { x: x, y: y };
+  };
+  CanvasMap.prototype._shifted = function () { var o = this._offset(); return !!o && (o.x !== 0 || o.y !== 0); };
+  CanvasMap.prototype._place = function (dx, dy) {
+    var p = this._pad || 0;
+    this._canvas.style.transform = 'translate(' + (-p - dx) + 'px,' + (-p - dy) + 'px)';
+  };
   CanvasMap.prototype.triggerRepaint = function () { this._changed(); };
-  CanvasMap.prototype._changed = function () {
+  CanvasMap.prototype._changed = function (moved) {
+    if (!moved) { this._redraw = true; }
     if (this._dirty || this._removed) { return; }
     this._dirty = true;
     var self = this;
-    raf(function () { self._dirty = false; self._render(); });
+    raf(function () {
+      self._dirty = false;
+      var o = self._redraw ? null : self._offset();
+      if (o && Math.abs(o.x) <= self._pad && Math.abs(o.y) <= self._pad) { self._place(o.x, o.y); self._fire('render', {}); return; }
+      self._redraw = false;
+      self._render();
+    });
   };
   CanvasMap.prototype.loaded = function () { return true; };
   CanvasMap.prototype.isStyleLoaded = function () { return true; };
@@ -29014,7 +29047,9 @@ function smapCreateCanvas() {
     if (image && image.data && image.width !== undefined && !(image.getContext)) {
       canvas = this._doc.createElement('canvas');
       canvas.width = image.width; canvas.height = image.height;
-      var ctx = canvas.getContext('2d');
+      // Kept by the processor like the map's own canvas: an image held by the graphics process is read back each
+      // time it is drawn, which under software emulation cost most of a second per frame with a hundred pins.
+      var ctx = canvas.getContext('2d', { willReadFrequently: true });
       var data = ctx.createImageData(image.width, image.height);
       data.data.set(image.data);
       ctx.putImageData(data, 0, 0);
@@ -29072,10 +29107,22 @@ function smapCreateCanvas() {
   };
 
   CanvasMap.prototype._render = function () {
-    var ctx = this._canvas.getContext('2d');
+    // A canvas the processor draws: this map is for computers whose graphics are emulated in software, where the
+    // browser handing a canvas to the graphics process to draw took most of a second per frame (measured: 0.6 s
+    // under software emulation against 2 ms drawn by the processor).
+    var ctx = this._canvas.getContext('2d', { willReadFrequently: true });
     if (!ctx) { return; }
-    var r = this._ratio;
+    var r = this._ratio, pad = this._pad || 0, w = this._w, h = this._h;
     ctx.setTransform(r, 0, 0, r, 0, 0);
+    // The picture covers the view and its margin: drawn as a view that much larger around the same centre.
+    this._w = w + 2 * pad; this._h = h + 2 * pad;
+    try { this._paint(ctx); } finally { this._w = w; this._h = h; }
+    var s = this._scale();
+    this._at = { zoom: this._zoom, x: lngX(this._center.lng, s), y: latY(this._center.lat, s) };
+    this._place(0, 0);
+    this._fire('render', {});
+  };
+  CanvasMap.prototype._paint = function (ctx) {
     ctx.clearRect(0, 0, this._w, this._h);
     this._drawn = [];
     var self = this, zoom = this._zoom;
@@ -29099,7 +29146,6 @@ function smapCreateCanvas() {
         else if (l.type === 'symbol') { self._drawSymbol(ctx, l, f, c); }
       }
     });
-    this._fire('render', {});
   };
 
   CanvasMap.prototype._drawRaster = function (ctx, l) {
@@ -29383,6 +29429,9 @@ function smapCreateCanvas() {
     if (!at) { x0 = 0; y0 = 0; x1 = this._w; y1 = this._h; }
     else if (Array.isArray(at) && Array.isArray(at[0])) { x0 = Math.min(at[0][0], at[1][0]); x1 = Math.max(at[0][0], at[1][0]); y0 = Math.min(at[0][1], at[1][1]); y1 = Math.max(at[0][1], at[1][1]); }
     else { var p = Array.isArray(at) ? { x: at[0], y: at[1] } : at; x0 = x1 = p.x; y0 = y1 = p.y; }
+    // From view points to the drawn picture's: it starts a margin before the view and may have been shifted since.
+    var shift = this._offset() || { x: 0, y: 0 }, pad = this._pad || 0;
+    x0 += pad + shift.x; x1 += pad + shift.x; y0 += pad + shift.y; y1 += pad + shift.y;
     var out = [], seen = [];
     for (var i = this._drawn.length - 1; i >= 0; i--) {
       var d = this._drawn[i];
@@ -30754,6 +30803,9 @@ function smapCreatePlan() {
     var body = {};
     if (this._context.region) { body.region = this._context.region; }
     if (this._context.profile) { body.profile = this._context.profile; }
+    // The plan's points, so the server can measure their legs into the snapshot ahead of the edits (E24).
+    var points = this._points();
+    if (points.length) { body.points = points; }
     this._openingKey = key;
     var opening = this._transport.send('POST', PATHS.matrix, body).then(function (res) {
       var id = res.data && res.data.matrix;
@@ -30778,6 +30830,27 @@ function smapCreatePlan() {
     return opening;
   };
 
+  // The plan's points as a snapshot opening sends them: every job location, then every vehicle's start and end, exactly
+  // as the plan holds them (the numbers the plan calls send, since legs are matched exactly), each sent once, first seen
+  // first.
+  PlanEditor.prototype._points = function () {
+    var entry = this._history[this._at];
+    var out = [];
+    var seen = {};
+    function add(v) {
+      var ll = lngLat(v);
+      if (!ll || !isFinite(ll[0]) || !isFinite(ll[1])) { return; }
+      var p = { lat: ll[1], lng: ll[0] };
+      var k = p.lat + ',' + p.lng;
+      if (seen[k]) { return; }
+      seen[k] = true;
+      out.push(p);
+    }
+    ((entry && entry.jobs) || []).forEach(function (j) { add(j && j.location); });
+    (this._vehicles || []).forEach(function (v) { if (v) { add(v.start); add(v.end); } });
+    return out;
+  };
+
   // ------------------------------------------------------------------ texts (14 languages)
 
   var TEXT_KEYS = ['editor', 'busy', 'undo', 'redo', 'refine', 'total', 'distance', 'drivingTime', 'stops', 'violations',
@@ -31587,7 +31660,7 @@ function smapCreateSdk(engine, interop, canvas, plan) {
 })(typeof self !== 'undefined' ? self : this, function (engine, interop, canvasLib, plan) {
   'use strict';
 
-  var VERSION = '1.2.1';
+  var VERSION = '1.2.5';
   var FLAVORS = ['light', 'white', 'grayscale', 'dark', 'black'];
   var BASEMAP_SOURCE = 'basemap';
   var BUILDINGS_LAYER = 'smap-buildings-3d';

package/dist/smap.mjs

@@ -1,5 +1,5 @@
 /* Generated by js/build.mjs from js/src (see SOURCE.json). Do not edit. */
-/*! sMap Web SDK 1.2.1. Bundles maplibre-gl 6.16.0 (BSD-3-Clause), see vendor-licenses.txt. */
+/*! sMap Web SDK 1.2.5. Bundles maplibre-gl 6.16.0 (BSD-3-Clause), see vendor-licenses.txt. */
 
 var smapCore = null;
 function smapCreateEngine() {
@@ -28755,6 +28755,12 @@ function smapCreateCanvas() {
     this._maxZoom = options.maxZoom !== undefined ? options.maxZoom : 22;
     this._drawn = [];
     this._dirty = false;
+    // Pixels drawn past each edge of the view. While the map only moves, the drawn picture is shifted into place
+    // instead of being drawn again, and drawn again once the move ends or the margin runs out: redrawing a whole
+    // canvas on every frame is what made panning stall on computers without graphics acceleration.
+    this._panMargin = options.panMargin;
+    this._at = null;
+    this._redraw = false;
     container.classList.add('maplibregl-map', 'smap-canvas-map');
     var canvasContainer = this._doc.createElement('div');
     canvasContainer.className = 'maplibregl-canvas-container maplibregl-interactive';
@@ -28856,7 +28862,7 @@ function smapCreateCanvas() {
     this._fire('move', {});
     if (zoomed) { this._fire('zoom', {}); }
   };
-  CanvasMap.prototype._end = function (zoomed) { this._fire('moveend', {}); if (zoomed) { this._fire('zoomend', {}); } this._fire('idle', {}); };
+  CanvasMap.prototype._end = function (zoomed) { if (this._shifted()) { this._changed(); } this._fire('moveend', {}); if (zoomed) { this._fire('zoomend', {}); } this._fire('idle', {}); };
   CanvasMap.prototype.jumpTo = function (o) {
     var z0 = this._zoom;
     this._set(o.center, o.zoom);
@@ -28930,16 +28936,43 @@ function smapCreateCanvas() {
     var win = this._doc.defaultView || {}, ratio = Math.min(3, win.devicePixelRatio || 1);
     if (w === this._w && h === this._h && ratio === this._ratio) { return false; }
     this._w = w; this._h = h; this._ratio = ratio;
-    this._canvas.width = Math.round(w * ratio); this._canvas.height = Math.round(h * ratio);
-    this._canvas.style.width = w + 'px'; this._canvas.style.height = h + 'px';
+    var m = this._panMargin;
+    this._pad = m === undefined || m === null ? Math.min(400, Math.round(Math.max(w, h) / 3)) : Math.max(0, Math.round(m));
+    var pw = w + 2 * this._pad, ph = h + 2 * this._pad;
+    this._canvas.width = Math.round(pw * ratio); this._canvas.height = Math.round(ph * ratio);
+    this._canvas.style.width = pw + 'px'; this._canvas.style.height = ph + 'px';
+    this._canvas.style.willChange = 'transform';
+    this._at = null;
+    this._place(0, 0);
     return true;
   };
+  // Where the view's centre is now, in world pixels at the drawn zoom, against where the picture was drawn.
+  CanvasMap.prototype._offset = function () {
+    if (!this._at || this._at.zoom !== this._zoom) { return null; }
+    var s = this._scale();
+    var x = lngX(this._center.lng, s) - this._at.x, y = latY(this._center.lat, s) - this._at.y;
+    // Across the antimeridian the centre's longitude wraps; take the nearer copy of the world.
+    if (x > s / 2) { x -= s; } else if (x < -s / 2) { x += s; }
+    return { x: x, y: y };
+  };
+  CanvasMap.prototype._shifted = function () { var o = this._offset(); return !!o && (o.x !== 0 || o.y !== 0); };
+  CanvasMap.prototype._place = function (dx, dy) {
+    var p = this._pad || 0;
+    this._canvas.style.transform = 'translate(' + (-p - dx) + 'px,' + (-p - dy) + 'px)';
+  };
   CanvasMap.prototype.triggerRepaint = function () { this._changed(); };
-  CanvasMap.prototype._changed = function () {
+  CanvasMap.prototype._changed = function (moved) {
+    if (!moved) { this._redraw = true; }
     if (this._dirty || this._removed) { return; }
     this._dirty = true;
     var self = this;
-    raf(function () { self._dirty = false; self._render(); });
+    raf(function () {
+      self._dirty = false;
+      var o = self._redraw ? null : self._offset();
+      if (o && Math.abs(o.x) <= self._pad && Math.abs(o.y) <= self._pad) { self._place(o.x, o.y); self._fire('render', {}); return; }
+      self._redraw = false;
+      self._render();
+    });
   };
   CanvasMap.prototype.loaded = function () { return true; };
   CanvasMap.prototype.isStyleLoaded = function () { return true; };
@@ -29016,7 +29049,9 @@ function smapCreateCanvas() {
     if (image && image.data && image.width !== undefined && !(image.getContext)) {
       canvas = this._doc.createElement('canvas');
       canvas.width = image.width; canvas.height = image.height;
-      var ctx = canvas.getContext('2d');
+      // Kept by the processor like the map's own canvas: an image held by the graphics process is read back each
+      // time it is drawn, which under software emulation cost most of a second per frame with a hundred pins.
+      var ctx = canvas.getContext('2d', { willReadFrequently: true });
       var data = ctx.createImageData(image.width, image.height);
       data.data.set(image.data);
       ctx.putImageData(data, 0, 0);
@@ -29074,10 +29109,22 @@ function smapCreateCanvas() {
   };
 
   CanvasMap.prototype._render = function () {
-    var ctx = this._canvas.getContext('2d');
+    // A canvas the processor draws: this map is for computers whose graphics are emulated in software, where the
+    // browser handing a canvas to the graphics process to draw took most of a second per frame (measured: 0.6 s
+    // under software emulation against 2 ms drawn by the processor).
+    var ctx = this._canvas.getContext('2d', { willReadFrequently: true });
     if (!ctx) { return; }
-    var r = this._ratio;
+    var r = this._ratio, pad = this._pad || 0, w = this._w, h = this._h;
     ctx.setTransform(r, 0, 0, r, 0, 0);
+    // The picture covers the view and its margin: drawn as a view that much larger around the same centre.
+    this._w = w + 2 * pad; this._h = h + 2 * pad;
+    try { this._paint(ctx); } finally { this._w = w; this._h = h; }
+    var s = this._scale();
+    this._at = { zoom: this._zoom, x: lngX(this._center.lng, s), y: latY(this._center.lat, s) };
+    this._place(0, 0);
+    this._fire('render', {});
+  };
+  CanvasMap.prototype._paint = function (ctx) {
     ctx.clearRect(0, 0, this._w, this._h);
     this._drawn = [];
     var self = this, zoom = this._zoom;
@@ -29101,7 +29148,6 @@ function smapCreateCanvas() {
         else if (l.type === 'symbol') { self._drawSymbol(ctx, l, f, c); }
       }
     });
-    this._fire('render', {});
   };
 
   CanvasMap.prototype._drawRaster = function (ctx, l) {
@@ -29385,6 +29431,9 @@ function smapCreateCanvas() {
     if (!at) { x0 = 0; y0 = 0; x1 = this._w; y1 = this._h; }
     else if (Array.isArray(at) && Array.isArray(at[0])) { x0 = Math.min(at[0][0], at[1][0]); x1 = Math.max(at[0][0], at[1][0]); y0 = Math.min(at[0][1], at[1][1]); y1 = Math.max(at[0][1], at[1][1]); }
     else { var p = Array.isArray(at) ? { x: at[0], y: at[1] } : at; x0 = x1 = p.x; y0 = y1 = p.y; }
+    // From view points to the drawn picture's: it starts a margin before the view and may have been shifted since.
+    var shift = this._offset() || { x: 0, y: 0 }, pad = this._pad || 0;
+    x0 += pad + shift.x; x1 += pad + shift.x; y0 += pad + shift.y; y1 += pad + shift.y;
     var out = [], seen = [];
     for (var i = this._drawn.length - 1; i >= 0; i--) {
       var d = this._drawn[i];
@@ -30756,6 +30805,9 @@ function smapCreatePlan() {
     var body = {};
     if (this._context.region) { body.region = this._context.region; }
     if (this._context.profile) { body.profile = this._context.profile; }
+    // The plan's points, so the server can measure their legs into the snapshot ahead of the edits (E24).
+    var points = this._points();
+    if (points.length) { body.points = points; }
     this._openingKey = key;
     var opening = this._transport.send('POST', PATHS.matrix, body).then(function (res) {
       var id = res.data && res.data.matrix;
@@ -30780,6 +30832,27 @@ function smapCreatePlan() {
     return opening;
   };
 
+  // The plan's points as a snapshot opening sends them: every job location, then every vehicle's start and end, exactly
+  // as the plan holds them (the numbers the plan calls send, since legs are matched exactly), each sent once, first seen
+  // first.
+  PlanEditor.prototype._points = function () {
+    var entry = this._history[this._at];
+    var out = [];
+    var seen = {};
+    function add(v) {
+      var ll = lngLat(v);
+      if (!ll || !isFinite(ll[0]) || !isFinite(ll[1])) { return; }
+      var p = { lat: ll[1], lng: ll[0] };
+      var k = p.lat + ',' + p.lng;
+      if (seen[k]) { return; }
+      seen[k] = true;
+      out.push(p);
+    }
+    ((entry && entry.jobs) || []).forEach(function (j) { add(j && j.location); });
+    (this._vehicles || []).forEach(function (v) { if (v) { add(v.start); add(v.end); } });
+    return out;
+  };
+
   // ------------------------------------------------------------------ texts (14 languages)
 
   var TEXT_KEYS = ['editor', 'busy', 'undo', 'redo', 'refine', 'total', 'distance', 'drivingTime', 'stops', 'violations',
@@ -31589,7 +31662,7 @@ function smapCreateSdk(engine, interop, canvas, plan) {
 })(typeof self !== 'undefined' ? self : this, function (engine, interop, canvasLib, plan) {
   'use strict';
 
-  var VERSION = '1.2.1';
+  var VERSION = '1.2.5';
   var FLAVORS = ['light', 'white', 'grayscale', 'dark', 'black'];
   var BASEMAP_SOURCE = 'basemap';
   var BUILDINGS_LAYER = 'smap-buildings-3d';
@@ -35772,7 +35845,7 @@ function SMapMap(options) {
   SMapMap.prototype = core.Map.prototype;
   return new core.Map(options);
 }
-var smapVersion = "1.2.1";
+var smapVersion = "1.2.5";
 var smapStyles = ['light', 'white', 'grayscale', 'dark', 'black'];
 /** The bundled rendering engine, for anything the SDK does not wrap (loaded on the first call). */
 function smapGetEngine() { return smapLoad().engine; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superrouteca/smap",
-  "version": "1.2.1",
+  "version": "1.2.5",
   "description": "sMap for the web: maps from Superroute's sMap service, the Web SDK (map view) and the JS client (tokens, nearest node, styles, tiles).",
   "license": "MIT",
   "author": "Goodneo Solutions",

package/types/smap.d.cts

@@ -489,6 +489,8 @@ export interface MapOptions {
    * hillshade or 3D models; the map fires 'smap.unsupported' with { feature } for each of them that is asked for.
    */
   renderer?: 'auto' | 'webgl' | 'canvas';
+  /** Canvas map only: pixels drawn past each edge, so panning shifts the drawn picture instead of drawing it again (default a third of the longer side, at most 400; 0 draws every frame). */
+  panMargin?: number;
   /** A map token; or */
   token?: string;
   /** Called at start and again two minutes before each token expires. */

package/types/smap.d.mts

@@ -489,6 +489,8 @@ export interface MapOptions {
    * hillshade or 3D models; the map fires 'smap.unsupported' with { feature } for each of them that is asked for.
    */
   renderer?: 'auto' | 'webgl' | 'canvas';
+  /** Canvas map only: pixels drawn past each edge, so panning shifts the drawn picture instead of drawing it again (default a third of the longer side, at most 400; 0 draws every frame). */
+  panMargin?: number;
   /** A map token; or */
   token?: string;
   /** Called at start and again two minutes before each token expires. */