signalk-chiplog 2.0.0 → 2.2.0

package/public/entry/js/components/CrewDialog.mjs

@@ -0,0 +1,200 @@
+import { html, useState } from '../../../vendor/preact-htm.mjs';
+import { useLocale } from '../../../js/context.mjs';
+import { PencilIcon, TrashIcon } from './Icons.mjs';
+
+// .big-button is a row flex container, so a bare <br/> between its children
+// would not stack them -- wrap name and role in their own column instead.
+function CrewButtonLabel({ name, role }) {
+  return html`<span class="crew-button-label"
+    >${name}${role ? html`<span class="crew-role">${role}</span>` : ''}</span
+  >`;
+}
+
+// roster: the global crew list ({id, name, role}); current: this passage's
+// crew as GET /entries/:id returns it ({id, crewMemberId, name, role}).
+// onAddMember(name, role) creates a roster member (POST /crew) and picks it;
+// onEditMember(id, {name, role}) and onDeleteMember(id) correct or remove one
+// (PATCH/DELETE /crew/:id) -- both act on the roster itself, not just this
+// passage's assignment, which is only sent to the server on Enregistrer.
+export function CrewDialog({
+  roster,
+  current,
+  onCancel,
+  onSave,
+  onAddMember,
+  onEditMember,
+  onDeleteMember
+}) {
+  const { t } = useLocale();
+  const [picked, setPicked] = useState(
+    () => new Set((current ?? []).filter((m) => m.crewMemberId !== null).map((m) => m.crewMemberId))
+  );
+  const [name, setName] = useState('');
+  const [role, setRole] = useState('');
+  const [editingId, setEditingId] = useState(null);
+
+  const toggle = (id) => {
+    setPicked((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const startEditing = (member) => {
+    setEditingId(member.id);
+    setName(member.name);
+    setRole(member.role ?? '');
+  };
+
+  const cancelEditing = () => {
+    setEditingId(null);
+    setName('');
+    setRole('');
+  };
+
+  const addNew = async (event) => {
+    event.preventDefault();
+    const trimmedName = name.trim();
+    if (!trimmedName) {
+      return;
+    }
+    const member = await onAddMember(trimmedName, role.trim() || null);
+    if (member) {
+      setPicked((prev) => new Set(prev).add(member.id));
+      setName('');
+      setRole('');
+    }
+  };
+
+  const saveEdit = (event) => {
+    event.preventDefault();
+    if (!name.trim()) {
+      return;
+    }
+    onEditMember(editingId, { name: name.trim(), role: role.trim() || null });
+    setEditingId(null);
+    setName('');
+    setRole('');
+  };
+
+  const removeMember = async (member) => {
+    if (!confirm(t('entry.deleteCrewMemberConfirm', { name: member.name }))) {
+      return;
+    }
+    const removed = await onDeleteMember(member.id);
+    if (!removed) {
+      return;
+    }
+    setPicked((prev) => {
+      const next = new Set(prev);
+      next.delete(member.id);
+      return next;
+    });
+    if (editingId === member.id) {
+      cancelEditing();
+    }
+  };
+
+  // The name/role fields sit inside the dialog's own <form>, so Enter would
+  // otherwise submit that -- saving and closing the whole dialog -- instead
+  // of adding or saving this one member.
+  const onFieldKeyDown = (event) => {
+    if (event.key !== 'Enter') {
+      return;
+    }
+    (editingId === null ? addNew : saveEdit)(event);
+  };
+
+  const submit = (event) => {
+    event.preventDefault();
+    onSave([...picked].map((crewMemberId) => ({ crewMemberId })));
+  };
+
+  const editingMember = roster.find((member) => member.id === editingId) ?? null;
+
+  return html`
+    <div class="sheet-backdrop" onClick=${(event) => event.target === event.currentTarget && onCancel()}>
+      <form class="sheet" role="dialog" aria-modal="true" aria-labelledby="crew-title" onSubmit=${submit}>
+        <h2 id="crew-title">${t('entry.editCrew')}</h2>
+        <div class="crew-grid">
+          ${roster.map(
+            (member) =>
+              html`<div class="crew-item" key=${member.id}>
+                <button
+                  type="button"
+                  class=${picked.has(member.id) ? 'big-button primary' : 'big-button'}
+                  onClick=${() => toggle(member.id)}
+                >
+                  <${CrewButtonLabel} name=${member.name} role=${member.role} />
+                </button>
+                <div class="crew-item-actions">
+                  <button
+                    type="button"
+                    class="tool-button icon-button"
+                    aria-label=${t('entry.editCrewMember', { name: member.name })}
+                    title=${t('common.edit')}
+                    onClick=${() => startEditing(member)}
+                  >
+                    <${PencilIcon} />
+                  </button>
+                  <button
+                    type="button"
+                    class="tool-button icon-button danger"
+                    aria-label=${t('entry.deleteCrewMember', { name: member.name })}
+                    title=${t('entry.delete')}
+                    onClick=${() => removeMember(member)}
+                  >
+                    <${TrashIcon} />
+                  </button>
+                </div>
+              </div>`
+          )}
+        </div>
+        ${
+          editingMember &&
+          html`<p class="crew-editing-note">
+            ${t('entry.editingCrewMember', { name: editingMember.name })}
+            <button type="button" class="link-button" onClick=${cancelEditing}>
+              ${t('common.cancel')}
+            </button>
+          </p>`
+        }
+        <div class="sheet-row">
+          <input
+            value=${name}
+            maxlength="100"
+            placeholder=${t('entry.crewName')}
+            aria-label=${t('entry.crewName')}
+            onInput=${(event) => setName(event.currentTarget.value)}
+            onKeyDown=${onFieldKeyDown}
+          />
+          <input
+            value=${role}
+            maxlength="100"
+            placeholder=${t('entry.crewRole')}
+            aria-label=${t('entry.crewRole')}
+            onInput=${(event) => setRole(event.currentTarget.value)}
+            onKeyDown=${onFieldKeyDown}
+          />
+          <button
+            type="button"
+            class="big-button"
+            disabled=${!name.trim()}
+            onClick=${editingId === null ? addNew : saveEdit}
+          >
+            ${editingId === null ? t('entry.addCrewMember') : t('common.save')}
+          </button>
+        </div>
+        <div class="sheet-row">
+          <button type="button" class="big-button" onClick=${onCancel}>${t('common.cancel')}</button>
+          <button type="submit" class="big-button primary">${t('common.save')}</button>
+        </div>
+      </form>
+    </div>
+  `;
+}

package/public/entry/js/main.mjs

@@ -7,6 +7,8 @@ import { createServerClock } from './clock.mjs';
 import { createJournal } from './journal.mjs';
 import { AccessGate } from './components/AccessGate.mjs';
 import { CommentDialog, Toast } from './components/Dialogs.mjs';
+import { CrewDialog } from './components/CrewDialog.mjs';
+import { PencilIcon } from './components/Icons.mjs';
 import { ManoeuvrePad } from './components/ManoeuvrePad.mjs';
 import { NotePanel } from './components/NotePanel.mjs';
 import { RecentList } from './components/RecentList.mjs';
@@ -18,6 +20,7 @@ const FLUSH_INTERVAL_MS = 10 * 1000;
 const TOAST_MS = 10 * 1000;
 const NIGHT_KEY = 'chiplog.night';
 const TYPES_KEY = 'chiplog.manoeuvreTypes';
+const CREW_KEY = 'chiplog.crew';
 
 // The shortcuts shipped with the plugin, until the server's list has been seen
 // once: an app started with no connection still has its buttons.
@@ -43,6 +46,15 @@ function knownTypes() {
   }
 }
 
+function knownCrew() {
+  try {
+    const stored = JSON.parse(readSetting(CREW_KEY) ?? 'null');
+    return Array.isArray(stored) ? stored : [];
+  } catch {
+    return [];
+  }
+}
+
 function browserStorage() {
   try {
     return window.localStorage;
@@ -80,11 +92,13 @@ function App({ journal }) {
   const [entry, setEntry] = useState(null);
   const [lastEntryId, setLastEntryId] = useState(null);
   const [types, setTypes] = useState(knownTypes);
+  const [roster, setRoster] = useState(knownCrew);
   const [online, setOnline] = useState(true);
   const [forbidden, setForbidden] = useState(false);
   const [queue, setQueue] = useState(journal.outbox.snapshot());
   const [toast, setToast] = useState(null);
   const [commenting, setCommenting] = useState(null);
+  const [managingCrew, setManagingCrew] = useState(false);
   const [tab, setTab] = useState('note');
   const [night, setNight] = useState(readSetting(NIGHT_KEY) === 'on');
   const [version, setVersion] = useState(0);
@@ -153,6 +167,21 @@ function App({ journal }) {
     [forbidden, online]
   );
 
+  usePolling(
+    (isCurrent) => {
+      fetchAll('/crew')
+        .then((items) => {
+          writeSetting(CREW_KEY, JSON.stringify(items));
+          if (isCurrent()) {
+            setRoster(items);
+          }
+        })
+        .catch(noteFailure);
+    },
+    0,
+    [forbidden, online]
+  );
+
   // Replays the queue while it holds anything, and as soon as the network is back.
   useEffect(() => {
     const flush = async () => {
@@ -256,6 +285,52 @@ function App({ journal }) {
     journal.outbox.remove(ref);
   };
 
+  const saveCrew = async (members) => {
+    try {
+      const updated = await request('PUT', `/entries/${entry.id}/crew`, { members });
+      setEntry((current) => ({ ...current, crew: updated }));
+      setManagingCrew(false);
+      refresh();
+    } catch (error) {
+      noteFailure(error);
+      setToast({ kind: 'error', message: t('entry.refused', { message: error.message }) });
+    }
+  };
+
+  const addCrewMember = async (name, role) => {
+    try {
+      const member = await request('POST', '/crew', { name, role });
+      setRoster((prev) => [...prev, member]);
+      return member;
+    } catch (error) {
+      noteFailure(error);
+      setToast({ kind: 'error', message: t('entry.refused', { message: error.message }) });
+      return null;
+    }
+  };
+
+  const editCrewMember = async (id, patch) => {
+    try {
+      const updated = await request('PATCH', `/crew/${id}`, patch);
+      setRoster((prev) => prev.map((member) => (member.id === id ? updated : member)));
+    } catch (error) {
+      noteFailure(error);
+      setToast({ kind: 'error', message: t('entry.refused', { message: error.message }) });
+    }
+  };
+
+  const deleteCrewMember = async (id) => {
+    try {
+      await request('DELETE', `/crew/${id}`);
+      setRoster((prev) => prev.filter((member) => member.id !== id));
+      return true;
+    } catch (error) {
+      noteFailure(error);
+      setToast({ kind: 'error', message: t('entry.refused', { message: error.message }) });
+      return false;
+    }
+  };
+
   const commentTitle = commenting?.what ?? t('entry.comment');
 
   return html`
@@ -278,6 +353,33 @@ function App({ journal }) {
           }}
         />`
       }
+      <section class="panel crew-panel" aria-labelledby="crew-panel-title">
+        <div class="panel-header">
+          <h2 id="crew-panel-title" class="panel-title">${t('entry.crew')}</h2>
+          <button
+            type="button"
+            class="tool-button icon-button"
+            aria-label=${t('entry.editCrew')}
+            title=${t('entry.editCrew')}
+            disabled=${!entry}
+            onClick=${() => setManagingCrew(true)}
+          >
+            <${PencilIcon} />
+          </button>
+        </div>
+        ${
+          entry?.crew?.length > 0
+            ? html`<ul class="crew-list">
+                ${entry.crew.map(
+                  (member) =>
+                    html`<li key=${member.id}>
+                      ${member.name}${member.role ? html` <span class="crew-role">${member.role}</span>` : ''}
+                    </li>`
+                )}
+              </ul>`
+            : html`<p class="hint">${t('entry.noCrew')}</p>`
+        }
+      </section>
       <div class="entry-columns">
         <${ManoeuvrePad}
           types=${types}
@@ -331,6 +433,18 @@ function App({ journal }) {
         onSave=${saveComment}
       />`
     }
+    ${
+      managingCrew &&
+      html`<${CrewDialog}
+        roster=${roster}
+        current=${entry?.crew ?? []}
+        onCancel=${() => setManagingCrew(false)}
+        onSave=${saveCrew}
+        onAddMember=${addCrewMember}
+        onEditMember=${editCrewMember}
+        onDeleteMember=${deleteCrewMember}
+      />`
+    }
   `;
 }
 

package/public/entry/sw.js

@@ -19,6 +19,7 @@ const SHELL = [
   'js/outbox.mjs',
   'js/strokes.mjs',
   'js/components/AccessGate.mjs',
+  'js/components/CrewDialog.mjs',
   'js/components/Dialogs.mjs',
   'js/components/Icons.mjs',
   'js/components/ManoeuvrePad.mjs',
@@ -34,6 +35,7 @@ const SHELL = [
   '../js/format.mjs',
   '../js/i18n.mjs',
   '../js/ids.mjs',
+  '../js/landmarks.mjs',
   '../js/log-lines.mjs',
   '../js/status.mjs',
   '../js/components/common.mjs',

package/public/js/animation/camera.mjs

@@ -0,0 +1,180 @@
+// Framing the animation: how far to zoom out for a passage, and which tiles a
+// frame needs. Pure functions over numbers — no canvas, no vendor imports.
+
+import { TILE_SIZE, worldScale, worldX, worldY } from './mercator.mjs';
+
+export const MIN_ZOOM = 3;
+export const MAX_ZOOM = 19;
+
+// Zoom is chosen on a quarter-level grid: finer than that is invisible, and a
+// coarse grid keeps the choice stable when a track grows by a point.
+export const ZOOM_STEP = 0.25;
+
+// How much of the frame the track is allowed to fill, leaving a margin so the
+// boat never rides the edge.
+export const FIT_FRACTION = 0.82;
+
+// Half the side of the reference box, in degrees of latitude: the box spans
+// about 32 km, which is the working scale the camera animates at. It stops a
+// hop across a harbour from diving to street level (SPEC §4.12).
+export const REFERENCE_HALF_SPAN_DEGREES = 0.143;
+
+// And how far outside that working scale a long passage may pull the camera.
+// Without a limit the camera backs off until the whole track fits — but it is
+// centred on the boat, not on the track, so most of the frame is then empty
+// water the boat crawls across. One level buys some context and no more.
+export const MAX_WIDEN_LEVELS = 1;
+
+// Bounds of a track, with its centre. Longitudes are expected already
+// unwrapped (see `unwrapLongitude`), so they may sit outside [-180, 180] and
+// the span stays the real one rather than a trip around the world.
+export function trackBounds(points) {
+  let minLat = Infinity;
+  let maxLat = -Infinity;
+  let minLon = Infinity;
+  let maxLon = -Infinity;
+  for (const { lat, lon } of points) {
+    if (!Number.isFinite(lat) || !Number.isFinite(lon)) {
+      continue;
+    }
+    minLat = Math.min(minLat, lat);
+    maxLat = Math.max(maxLat, lat);
+    minLon = Math.min(minLon, lon);
+    maxLon = Math.max(maxLon, lon);
+  }
+  if (minLat === Infinity) {
+    return null;
+  }
+  return {
+    minLat,
+    maxLat,
+    minLon,
+    maxLon,
+    centreLat: (minLat + maxLat) / 2,
+    centreLon: (minLon + maxLon) / 2
+  };
+}
+
+// A box that is square *on screen*: a degree of longitude is shorter than a
+// degree of latitude away from the equator, so the longitude span is widened by
+// 1 / cos(lat). The fit below then depends only on the shorter side of the
+// frame, never on its aspect ratio.
+export function referenceBounds({ lat, lon }, halfSpan = REFERENCE_HALF_SPAN_DEGREES) {
+  const lonHalf = halfSpan / Math.max(0.01, Math.cos((lat * Math.PI) / 180));
+  return {
+    minLat: lat - halfSpan,
+    maxLat: lat + halfSpan,
+    minLon: lon - lonHalf,
+    maxLon: lon + lonHalf,
+    centreLat: lat,
+    centreLon: lon
+  };
+}
+
+// The closest zoom at which the box still fits the frame with its margin.
+export function fitZoom(bounds, options) {
+  const {
+    width,
+    height,
+    fraction = FIT_FRACTION,
+    minZoom = MIN_ZOOM,
+    maxZoom = MAX_ZOOM,
+    step = ZOOM_STEP
+  } = options;
+  const dx = worldX(bounds.maxLon) - worldX(bounds.minLon);
+  // y grows southwards, so the northern edge gives the smaller value.
+  const dy = worldY(bounds.minLat) - worldY(bounds.maxLat);
+  for (let zoom = maxZoom; zoom > minZoom; zoom -= step) {
+    const scale = worldScale(zoom);
+    if (dx * scale <= width * fraction && dy * scale <= height * fraction) {
+      return zoom;
+    }
+  }
+  return minZoom;
+}
+
+// The zoom a passage is animated at. The working scale is the reference box:
+// a passage smaller than it is shown at that scale rather than magnified — a
+// boat that never left its mooring has a zero-sized box and would otherwise
+// fit at any zoom at all — and a passage larger than it may pull the camera
+// back, but only so far.
+export function passageZoom(bounds, options) {
+  const centre = { lat: bounds.centreLat, lon: bounds.centreLon };
+  const working = fitZoom(referenceBounds(centre), options);
+  const whole = fitZoom(bounds, options);
+  return Math.max(Math.min(whole, working), working - MAX_WIDEN_LEVELS);
+}
+
+// World pixels are measured from the track's centre rather than from the
+// antimeridian: at zoom 19 absolute world coordinates reach 1.3e8, far enough
+// for canvas path precision to start showing.
+export function createProjection({ zoom, bounds }) {
+  const scale = worldScale(zoom);
+  const originX = worldX(bounds.centreLon) * scale;
+  const originY = worldY(bounds.centreLat) * scale;
+  return {
+    zoom,
+    scale,
+    originX,
+    originY,
+    projectX: (lon) => worldX(lon) * scale - originX,
+    projectY: (lat) => worldY(lat) * scale - originY
+  };
+}
+
+// What to translate the canvas by to put `centre` in the middle of the frame.
+// A translation leaves line widths alone, so nothing needs compensating.
+export function cameraOffset(projection, centre, width, height) {
+  return {
+    ox: width / 2 - projection.projectX(centre.lon),
+    oy: height / 2 - projection.projectY(centre.lat)
+  };
+}
+
+// The tiles covering the frame, in the projection's own pixel space.
+//
+// `renderScale` is device pixels per frame pixel: the preview draws the very
+// same frame smaller, so it should fetch coarser tiles rather than the
+// export's full-resolution ones. It changes which zoom the tiles come from and
+// nothing else — the framing is identical, which is what makes the preview a
+// faithful preview.
+export function visibleTiles(projection, centre, options) {
+  const { width, height, renderScale = 1, layerMaxZoom = MAX_ZOOM } = options;
+  const effectiveZoom = projection.zoom + Math.log2(renderScale);
+  const tileZoom = Math.max(0, Math.min(Math.ceil(effectiveZoom), layerMaxZoom));
+  const count = 2 ** tileZoom;
+  // scale / count is TILE_SIZE * 2 ** (zoom - tileZoom): a tile's size in the
+  // frame's own pixels, which is above TILE_SIZE when the layer ran out of
+  // zoom levels and the tiles have to be blown up.
+  const tilePixels = projection.scale / count;
+  const centreTileX = worldX(centre.lon) * count;
+  const centreTileY = worldY(centre.lat) * count;
+  const halfX = width / 2 / tilePixels;
+  const halfY = height / 2 / tilePixels;
+  const tiles = [];
+  const firstY = Math.floor(centreTileY - halfY);
+  const lastY = Math.floor(centreTileY + halfY);
+  const firstX = Math.floor(centreTileX - halfX);
+  const lastX = Math.floor(centreTileX + halfX);
+  for (let y = firstY; y <= lastY; y += 1) {
+    // Above 85° N or below 85° S there is no map, only the background.
+    if (y < 0 || y >= count) {
+      continue;
+    }
+    for (let x = firstX; x <= lastX; x += 1) {
+      tiles.push({
+        z: tileZoom,
+        x,
+        y,
+        // The seam is only a numbering matter; the drawing stays continuous.
+        wrappedX: ((x % count) + count) % count,
+        px: (x / count) * projection.scale - projection.originX,
+        py: (y / count) * projection.scale - projection.originY,
+        size: tilePixels
+      });
+    }
+  }
+  return { tileZoom, tilePixels, tiles };
+}
+
+export { TILE_SIZE };

package/public/js/animation/formats.mjs

@@ -0,0 +1,45 @@
+// The shapes a video can be exported in, and what to encode it at.
+//
+// No vendor imports, no DOM: plain Node can test this. The encoder itself
+// lives in mp4.mjs, which is the only module that reaches into vendor/ — and
+// which is imported lazily, so a reader who never exports never downloads it.
+
+import { FPS } from './schedule.mjs';
+
+// Every dimension is even, as H.264 chroma subsampling requires, and 1080 px
+// on the short side: enough for a phone screen without making the encode
+// needlessly long.
+export const VIDEO_FORMATS = [
+  { id: 'mobile', labelKey: 'animation.format9x16', width: 1080, height: 1920 },
+  { id: 'portrait', labelKey: 'animation.format3x4', width: 1080, height: 1440 },
+  { id: 'square', labelKey: 'animation.format1x1', width: 1080, height: 1080 },
+  { id: 'landscape', labelKey: 'animation.format4x3', width: 1440, height: 1080 },
+  { id: 'widescreen', labelKey: 'animation.format16x9', width: 1920, height: 1080 }
+];
+
+export const DEFAULT_FORMAT_ID = 'widescreen';
+
+export function formatById(id) {
+  return VIDEO_FORMATS.find((format) => format.id === id) ?? VIDEO_FORMATS[0];
+}
+
+// The whole frame translates every frame — a map sliding under a fixed boat
+// compresses far worse than a static scene — so this is deliberately generous.
+export const BITS_PER_PIXEL_PER_FRAME = 0.13;
+
+export function bitrateFor(width, height, fps = FPS) {
+  const bitrate = width * height * fps * BITS_PER_PIXEL_PER_FRAME;
+  return Math.round(Math.max(2e6, Math.min(12e6, bitrate)));
+}
+
+// Whether this browser can encode video at all. The finer question — whether
+// it can encode *this* size in H.264 — is left to the encoder, which asks
+// Mediabunny; keeping it to these three globals is what lets this module stay
+// free of vendor imports and testable under Node.
+export function isMp4ExportSupported(scope = globalThis) {
+  return (
+    typeof scope.VideoEncoder === 'function' &&
+    typeof scope.VideoFrame === 'function' &&
+    typeof scope.OffscreenCanvas === 'function'
+  );
+}

package/public/js/animation/mercator.mjs

@@ -0,0 +1,50 @@
+// Web Mercator, the projection the OpenStreetMap and OpenSeaMap tiles are cut
+// in. The animation draws its own map rather than animating Leaflet (SPEC
+// §4.12), so it needs the projection itself. No vendor imports, no DOM: plain
+// Node can test this.
+
+export const TILE_SIZE = 256;
+
+// Web Mercator cannot reach the poles; every slippy map cuts here, which makes
+// the world a square.
+export const MAX_LATITUDE = 85.05112878;
+
+// Both axes return a fraction of the world, 0 to 1, so a zoom level is applied
+// afterwards by `worldScale`. x grows eastwards, y grows *southwards* — the
+// screen direction, not the compass one.
+export function worldX(lon) {
+  return (lon + 180) / 360;
+}
+
+export function worldY(lat) {
+  const clamped = Math.max(-MAX_LATITUDE, Math.min(MAX_LATITUDE, lat));
+  const phi = (clamped * Math.PI) / 180;
+  const y = (1 - Math.log(Math.tan(phi) + 1 / Math.cos(phi)) / Math.PI) / 2;
+  // MAX_LATITUDE is the rounded cut-off, so it lands a few 1e-12 outside the
+  // square. Left alone, that floors to tile -1 and a row of tiles goes missing.
+  return Math.max(0, Math.min(1, y));
+}
+
+export function lonAt(x) {
+  return x * 360 - 180;
+}
+
+export function latAt(y) {
+  return (Math.atan(Math.sinh(Math.PI * (1 - 2 * y))) * 180) / Math.PI;
+}
+
+// Pixels across the whole world at this zoom. Fractional zooms are allowed and
+// meaningful: the camera picks one per passage, and tiles are then drawn from
+// the next integer level up and scaled down.
+export function worldScale(zoom) {
+  return TILE_SIZE * 2 ** zoom;
+}
+
+// The projection is a cylinder cut at ±180°, so a track crossing the
+// antimeridian would jump the width of the world between two points. Longitudes
+// are unwrapped once, when a track is read, by keeping each point on the side
+// its predecessor was: they may then leave [-180, 180], which every function
+// here tolerates, and tile numbers are wrapped back when a URL is built.
+export function unwrapLongitude(previousLon, lon) {
+  return lon + 360 * Math.round((previousLon - lon) / 360);
+}