leaflet-city-mapper 0.0.0-stage → 0.0.2

package/src/utils/onAddSun.js

@@ -0,0 +1,147 @@
+import { underEntry } from './underEntry.js';
+import { update as updateScene } from "./update.js";
+import { atmosphere } from './atmosphere.js';
+import { moonPosition } from './moonPosition.js';
+import { projectCelestialBody } from './projectCelestialBody.js';
+import { solarPosition } from './solarPosition.js';
+
+export function onAddSun(layer, map) {
+  if (!layer.control) {
+    const control = new L.Control({ position: 'bottomright' });
+    control.live = true;
+    let date, slider, output, status, timer;
+    const originalSky = map.getContainer().style.getPropertyValue('--leaflet-sky-background');
+    const disc = 'position:absolute;width:18px;height:18px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;';
+    const sunDisc = L.DomUtil.create('div', 'sunlight-sun');
+    const moonDisc = L.DomUtil.create('div', 'sunlight-moon');
+    sunDisc.style.cssText = disc + 'background:#fff3bd;box-shadow:0 0 18px 7px #ffd27699;';
+    moonDisc.style.cssText = disc + 'background:#dce5f2;box-shadow:0 0 10px 2px #cbdcff55;';
+    sunDisc.setAttribute('role', 'img'); sunDisc.setAttribute('aria-label', 'Sun');
+    moonDisc.setAttribute('role', 'img'); moonDisc.setAttribute('aria-label', 'Moon');
+    const updateSky = () => {
+      const sun = map._sunlight, sky = map._pitchSky;
+      if (sun) map.getContainer().style.setProperty('--leaflet-sky-background', sun.background);
+      else if (originalSky) map.getContainer().style.setProperty('--leaflet-sky-background', originalSky);
+      else map.getContainer().style.removeProperty('--leaflet-sky-background');
+      const size = map.getSize(), pitch = map.getPitch() * Math.PI / 180, bearing = map.getBearing() * Math.PI / 180;
+      for (const [disc, body] of [[sunDisc, sun], [moonDisc, sun?.moon]]) {
+        disc.hidden = true;
+        if (!sky || !body || body.altitude <= 0 || !sun) continue;
+        if (disc.parentNode !== sky) sky.append(disc);
+        const point = projectCelestialBody(body.direction, size, pitch, bearing);
+        if (!point) continue;
+        const { left, top } = point;
+        disc.hidden = left < 0 || left > size.x || top < 0 || top > sky.clientHeight || sky.style.display === 'none';
+        disc.style.left = `${left}px`; disc.style.top = `${top}px`;
+      }
+    };
+    const render = () => {
+      const renderer = L.Layer._renderers.get(map);
+      if (renderer) updateScene(renderer);
+    };
+    const update = () => {
+      try {
+        if (control.live) control.time = new Date();
+        const time = control.time.toISOString();
+        date.value = time.slice(0, 10);
+        slider.value = String(control.time.getUTCHours() * 60 + control.time.getUTCMinutes());
+        output.textContent = `${time.slice(11, 16)} UTC${control.live ? ' · now' : ''}`;
+        const center = map.getCenter();
+        const sun = map._sunlight = solarPosition(control.time, center.lat, center.lng);
+        Object.assign(sun, atmosphere(sun.altitude));
+        sun.moon = moonPosition(control.time, center.lat, center.lng);
+        status.textContent = sun.altitude <= 0
+          ? 'Night · no direct sunlight'
+          : sun.altitude < 3
+            ? 'Low sun · shadows paused'
+            : `Sun altitude ${sun.altitude.toFixed(1)}°`;
+        map.fire('simulationtimechange', { time: new Date(control.time), live: control.live });
+        updateSky();
+        render();
+      } catch (error) {
+        delete map._sunlight;
+        updateSky();
+        render();
+        status.textContent = `Error: ${error.message}`;
+        console.error('Solar simulation', error);
+      }
+    };
+    control.onAdd = () => {
+      const container = L.DomUtil.create('div', 'sunlight-control');
+      container.style.cssText = 'color:#222;width:min(200px,calc(100vw - 60px));font:12px/1.4 sans-serif;';
+      date = document.createElement('input');
+      date.type = 'date';
+      date.style.cssText = 'width:100%;box-sizing:border-box;';
+      date.setAttribute('aria-label', 'Solar date (UTC)');
+      slider = document.createElement('input');
+      slider.type = 'range';
+      slider.style.cssText = 'width:100%;box-sizing:border-box;margin:10px 0 4px;cursor:pointer;';
+      slider.min = '0'; slider.max = '1439'; slider.step = '1';
+      slider.setAttribute('aria-label', 'Time of day (UTC)');
+      output = document.createElement('output');
+      output.style.cssText = 'font-weight:bold;font-variant-numeric:tabular-nums;';
+      output.setAttribute('aria-live', 'off');
+      const now = document.createElement('button');
+      now.type = 'button'; now.textContent = 'Now';
+      now.onclick = () => { control.live = true; update(); };
+      const timeRow = document.createElement('div');
+      timeRow.className = 'sunlight-time';
+      timeRow.style.cssText = 'display:flex;justify-content:space-between;align-items:center;';
+      timeRow.append(output, now);
+      status = document.createElement('div');
+      status.className = 'sunlight-status';
+      status.style.marginTop = '5px';
+      status.setAttribute('role', 'status');
+      const note = document.createElement('small');
+      note.style.color = '#555';
+      note.textContent = 'Indicative · loaded geometry only. Streetlight illumination is estimated, not measured lux.';
+      container.append(date, slider, timeRow, status, note);
+      date.onchange = slider.oninput = () => {
+        control.live = false;
+        if (!date.value || !date.validity.valid) {
+          control.time = new Date(NaN);
+          map.fire('simulationtimechange', { time: null, live: false });
+          delete map._sunlight;
+          updateSky();
+          render();
+          status.textContent = 'Error: choose a valid solar date';
+          return;
+        }
+        control.time = new Date(`${date.value}T00:00:00Z`);
+        control.time.setUTCMinutes(Number(slider.value));
+        update();
+      };
+      L.DomEvent.disableClickPropagation(container);
+      L.DomEvent.disableScrollPropagation(container);
+      update();
+      timer = setInterval(() => { if (control.live) update(); }, 60000);
+      map.on('moveend', update);
+      map.on('move rotate pitch resize', updateSky);
+      return container;
+    };
+    control.onRemove = () => {
+      clearInterval(timer);
+      map.fire('simulationtimechange', { time: null, live: false });
+      map.off('moveend', update);
+      map.off('move rotate pitch resize', updateSky);
+      delete map._sunlight;
+      updateSky();
+      sunDisc.remove(); moonDisc.remove();
+      render();
+    };
+    layer.control = control;
+  }
+  if (!layer.control._map) {
+    layer.control.addTo(map);
+  }
+  // Shown under this layer's entry in the layers control; a standalone control without one.
+  const container = layer.control.getContainer(), nested = underEntry(layer, container);
+  container.classList.toggle('leaflet-control', !nested);
+  container.classList.toggle('leaflet-bar', !nested);
+  Object.assign(
+    container.style,
+    nested
+      ? { background: '', padding: '2px 0 6px 20px', margin: '0' }
+      : { background: '#fff', padding: '8px', margin: '' }
+  );
+}

package/src/utils/onClick.js

@@ -0,0 +1,13 @@
+import { findFeature } from './findFeature.js';
+import { setHighlight } from './setHighlight.js';
+import { showFeature } from './showFeature.js';
+
+/** Emit click without moving the map or pinning the tooltip. */
+
+export function onClick(layer, event) {
+  const feature = findFeature(layer, event);
+  layer.hoveredFeature = feature;
+  setHighlight(layer, feature);
+  showFeature(layer, feature, event);
+  layer.fire('featureclick', { feature, originalEvent: event });
+}

package/src/utils/onMapChange.js

@@ -0,0 +1,16 @@
+import { update } from "./update.js";
+import { render } from "./render.js";
+
+/** Map movement: render within the frame of Leaflet's CSS transforms, coalescing same-tick events. */
+
+export function onMapChange() {
+  const layer = this;
+  if (layer._queued) return;
+  layer._queued = true;
+  queueMicrotask(() => {
+    layer._queued = false;
+    if (layer._shared !== layer || !layer.renderer) return;
+    if (layer._map._animatingZoom) update(layer);
+    else render(layer);
+  });
+}

package/src/utils/onPMTileAdd.js

@@ -0,0 +1,15 @@
+import { attach } from './attach.js';
+import { setRasterTerrain, updateRasterTiles } from './rasterTiles.js';
+
+export function onPMTileAdd(backend, map) {
+  if (!backend.location) backend.location = map.getCenter();
+  const attached = attach(backend, map);
+  attached.then(() => {
+    backend._added.resolve();
+    setRasterTerrain(backend, map._terrain3D);
+  })
+    .catch(error => backend.fire('error', { error }));
+  Promise.all([attached, backend.ready]).then(() => {
+    if (backend._map === map && map.hasLayer(backend)) updateRasterTiles(backend);
+  }).catch(error => backend.fire('error', { error }));
+}

package/src/utils/onPMTileRemove.js

@@ -0,0 +1,8 @@
+import { releaseRasterTiles } from './rasterTiles.js';
+import { onRemove3DLayer } from './onRemove3DLayer.js';
+
+export function onPMTileRemove(backend, map) {
+  releaseRasterTiles(backend);
+  backend._terrain3D = null;
+  onRemove3DLayer(backend, map);
+}

package/src/utils/onPointerLeave.js

@@ -0,0 +1,11 @@
+import { setHighlight } from './setHighlight.js';
+import { showFeature } from './showFeature.js';
+
+/** Clear hover, highlight and tooltip without retaining a selected feature. */
+
+export function onPointerLeave(layer) {
+  layer.hoveredFeature = null;
+  setHighlight(layer, null);
+  showFeature(layer, null);
+  layer.fire('featurehover', { feature: null });
+}

package/src/utils/onPointerMove.js

@@ -0,0 +1,15 @@
+import { findFeature } from './findFeature.js';
+import { setHighlight } from './setHighlight.js';
+import { showFeature } from './showFeature.js';
+
+/** Hover is transient; featurehover also reports misses with feature:null. */
+
+export function onPointerMove(layer, event) {
+  layer.hoveredFeature = findFeature(layer, event);
+  setHighlight(layer, layer.hoveredFeature);
+  showFeature(layer, layer.hoveredFeature, event);
+  layer.fire('featurehover', {
+    feature: layer.hoveredFeature,
+    originalEvent: event
+  });
+}

package/src/utils/onRemove3DLayer.js

@@ -0,0 +1,78 @@
+import * as destroyTexture from './destroyTexture.js';
+import * as endZoom from './endZoom.js';
+import * as onMapChange from './onMapChange.js';
+import * as onPointerLeave from './onPointerLeave.js';
+import * as onZoomAnim from './onZoomAnim.js';
+import * as releaseArea from './releaseArea.js';
+import { setParent } from './setParent.js';
+import * as startZoom from './startZoom.js';
+import * as update from './update.js';
+
+/** Release source meshes/UI; retain manually added objects and model CPU data. */
+export function onRemove3DLayer(backend, map) {
+  backend._added = Promise.withResolvers();
+  if (backend.container) {
+    onPointerLeave.onPointerLeave(backend);
+    L.DomEvent.off(backend.container, backend._pointerEvents);
+    backend.container = null;
+  }
+  for (const area of backend._areas.values()) releaseArea.releaseArea(backend, area);
+  backend._areas.clear();
+  backend._tooltip?.remove();
+  backend._tooltip = null;
+  if (backend.url || backend._geojson) releaseArea.updateStatus(backend, false);
+  const shared = backend._shared;
+  if (!shared) return;
+  setParent(backend.root, null);
+  shared._layers.delete(backend);
+  if (shared === backend) {
+    map.off('move zoom rotate pitch resize viewreset layeradd layerremove', onMapChange.onMapChange, backend);
+    map.off('zoomstart', startZoom.startZoom, backend);
+    map.off('zoomanim', onZoomAnim.onZoomAnim, backend);
+    map.off('zoomend', endZoom.endZoom, backend);
+    cancelAnimationFrame(backend._frame);
+    backend._frame = null;
+    backend._queued = false;
+    if (backend._layers.size) {
+      // Keep the original scene origin and GPU resources when ownership changes.
+      const next = backend._layers.values().next().value;
+      for (const key of ['_layers', '_sceneOrigin', '_size', '_zoomLevel', '_zoomTransitions', '_zoomView', '_cursor', '_roofRaster']) {
+        next[key] = backend[key];
+        delete backend[key];
+      }
+      for (const layer of next._layers) layer._shared = next;
+      L.Layer._renderers.set(map, next);
+      map.on('move zoom rotate pitch resize viewreset layeradd layerremove', onMapChange.onMapChange, next);
+      map.on('zoomstart', startZoom.startZoom, next);
+      map.on('zoomanim', onZoomAnim.onZoomAnim, next);
+      map.on('zoomend', endZoom.endZoom, next);
+      update.update(next);
+    } else {
+      if (backend._roofRaster) destroyTexture.destroyTexture(backend, backend._roofRaster.texture.texture);
+      backend._roofRaster = null;
+      for (const animation of backend._zoomTransitions?.keys() || []) animation.play();
+      backend._zoomTransitions = null;
+      backend._zoomView = null;
+      delete map._cameraView;
+      map.getContainer().classList.remove('leaflet-camera-zoom');
+      const renderer = backend.renderer;
+      renderer.canvas.remove();
+      renderer.device.queue.onSubmittedWorkDone()
+        .then(() => {
+          renderer.depthTexture?.destroy();
+          renderer.roofFallbackTexture?.texture?.destroy();
+          renderer.uniformBuffer?.destroy();
+          renderer.sunlight?.texture?.destroy();
+          renderer.sunlight?.buffer?.destroy();
+          renderer.sunlight?.lights?.destroy();
+          renderer.device.destroy();
+        }, error => {
+          backend.fire('error', { error });
+          renderer.device.destroy();
+        });
+      L.Layer._renderers.delete(map);
+      for (const key of ['_layers', '_sceneOrigin', '_size', '_zoomLevel', '_cursor']) delete backend[key];
+    }
+  } else update.update(shared);
+  backend._shared = backend.renderer = backend.scene = backend.camera = null;
+}

package/src/utils/onRemoveSun.js

@@ -0,0 +1,3 @@
+export function onRemoveSun(layer) {
+  layer.control.remove();
+}

package/src/utils/onTerrainAdd.js

@@ -0,0 +1,18 @@
+import { loadTerrain } from "./loadTerrain.js";
+import { setRasterTerrain } from "./rasterTiles.js";
+import { onAdd3DLayer } from './onAdd3DLayer.js';
+
+export function onTerrainAdd(backend, map) {
+  if (map._terrain3D && map._terrain3D !== backend) {
+    throw new Error('Only one terrain layer can be active per map');
+  }
+  map._terrain3D = backend;
+  onAdd3DLayer(backend, map);
+  backend._terrainPromise = backend.root
+    ? loadTerrain(backend)
+    : new Promise(resolve => backend.once('ready', () => loadTerrain(backend).then(resolve), backend));
+  map.eachLayer(layer => {
+    if (layer._type === 'pmtiles') setRasterTerrain(layer, backend);
+  });
+  map.fire('terrainchange');
+}

package/src/utils/onTerrainChange.js

@@ -0,0 +1,13 @@
+import { releaseArea } from "./releaseArea.js";
+import { updateArea } from "./updateArea.js";
+
+/** GeoJSON source areas: loading, building and releasing. */
+
+export function onTerrainChange(layer) {
+  if (!layer._map) return;
+  for (const area of layer._areas.values()) {
+    releaseArea(layer, area);
+  }
+  layer._areas.clear();
+  updateArea(layer);
+}

package/src/utils/onTerrainRemove.js

@@ -0,0 +1,40 @@
+import { destroyTexture } from './destroyTexture.js';
+import { conformModelToTerrain } from './conformModelToTerrain.js';
+import { disposeMesh } from './disposeMesh.js';
+import { setRasterTerrain } from './rasterTiles.js';
+import { removeRasterTile } from './removeRasterTile.js';
+import { setTerrainHeight } from './setTerrainHeight.js';
+import { onRemove3DLayer } from './onRemove3DLayer.js';
+
+export function onTerrainRemove(layer, map) {
+  layer._terrainController?.abort();
+  layer._terrainLoading = false;
+  layer._terrainReady = false;
+  map.eachLayer(layer => {
+    if (layer._type === 'pmtiles') setRasterTerrain(layer, null);
+  });
+  for (const tile of layer._rasterTiles.keys()) removeRasterTile(layer, tile);
+  if (map._terrain3D === layer) delete map._terrain3D;
+  for (const l of Object.values(map._layers)) {
+    conformModelToTerrain(l, null);
+    setTerrainHeight(l);
+  }
+  map.fire('terrainchange');
+  layer._terrainTiles.clear();
+  layer._terrainOriginElevation = 0;
+  layer._terrainPromise = null;
+  if (layer._rasterProgram) {
+    layer._rasterProgram.pipelineCache.clear();
+  }
+  layer._rasterProgram = null;
+  if (layer._dem) destroyTexture(layer, layer._dem.texture);
+  layer._dem = null;
+  for (const grid of layer._terrainGrids?.values() || []) {
+    for (const attribute of Object.values(grid)) destroyTexture(layer, attribute.buffer);
+  }
+  layer._terrainGrids = null;
+  layer._bridges = null;
+  disposeMesh(layer, layer._bridgeMesh);
+  layer._bridgeMesh = null;
+  onRemove3DLayer(layer, map);
+}

package/src/utils/onZoomAnim.js

@@ -0,0 +1,14 @@
+import { render } from "./render.js";
+
+
+export function onZoomAnim(event) {
+  const map = this._map;
+  if (event && !this._zoomView) {
+    this._zoomView = { from: map.getCenter(), zoom: map.getZoom(), to: event.center,
+      targetZoom: event.zoom, start: performance.now() };
+    map.getContainer().classList.add('leaflet-camera-zoom');
+  }
+  queueMicrotask(() => {
+    if (this._shared === this && this.renderer) render(this);
+  });
+}

package/src/utils/paints.js

@@ -0,0 +1,10 @@
+// Built-in vehicles for the 'traffic' type. Models are [ring of [x, z], bottom, top, rgb, topRing?] convex prisms in metres;
+// forward is -z, right is +x. `topRing` (same length as `ring`) tapers the prism; rgb components above 1 are self-lit lamps.
+export const paints = [
+  [0.86, 0.86, 0.88],
+  [0.1, 0.1, 0.12],
+  [0.5, 0.53, 0.57],
+  [0.65, 0.1, 0.08],
+  [0.12, 0.25, 0.55],
+  [0.85, 0.7, 0.15]
+];

package/src/utils/parseColor.js

@@ -0,0 +1,42 @@
+import { toSRGB } from "./toSRGB.js";
+import { channel } from "./channel.js";
+
+/**
+ * HSL inputs are linear-space to preserve the original building styling.
+ * Numeric/CSS/RGB inputs are already sRGB; CSS alpha is not used for extrusion.
+ * @param {number|string|Object} value 0xRRGGBB, CSS color, {r,g,b}, or {h,s,l} in 0..1.
+ * @returns {Object} sRGB {r,g,b} components in 0..1.
+ */
+
+export function parseColor(value) {
+  if (value && typeof value === 'object' && 'h' in value) {
+    const a = value.s * Math.min(value.l, 1 - value.l);
+    return {
+      r: toSRGB(channel(0, value.h, value.l, a)),
+      g: toSRGB(channel(8, value.h, value.l, a)),
+      b: toSRGB(channel(4, value.h, value.l, a))
+    };
+  }
+  if (value && typeof value === 'object' && 'r' in value) {
+    return value;
+  }
+  if (typeof value === 'number') {
+    return {
+      r: (value >> 16 & 255) / 255,
+      g: (value >> 8 & 255) / 255,
+      b: (value & 255) / 255,
+    };
+  }
+  if (typeof value !== 'string' || !CSS.supports('color', value)) {
+    throw new Error('Invalid 3D color');
+  }
+  const context = document.createElement('canvas').getContext('2d');
+  context.fillStyle = value;
+  context.fillRect(0, 0, 1, 1);
+  const [r, g, b] = context.getImageData(0, 0, 1, 1).data;
+  return {
+    r: r / 255,
+    g: g / 255,
+    b: b / 255
+  };
+}

package/src/utils/parts.js

@@ -0,0 +1,16 @@
+import { box } from "./box.js";
+import { trousers, shirt, skin, dark } from "./skin.js";
+
+
+export const parts = {
+  body: [
+    [box(-0.17, 0.17, -0.1, 0.1), 0.82, 0.95, trousers],
+    [box(-0.19, 0.19, -0.11, 0.11), 0.95, 1.44, shirt],
+    [box(-0.05, 0.05, -0.05, 0.05), 1.44, 1.5, skin],
+    [box(-0.1, 0.1, -0.11, 0.1), 1.5, 1.72, skin],
+    [box(-0.105, 0.105, -0.06, 0.115), 1.58, 1.77, dark],
+    [box(-0.105, 0.105, -0.115, -0.06), 1.7, 1.77, dark],
+  ],
+  leg: [[box(-0.07, 0.07, -0.07, 0.07), -0.82, 0, trousers], [box(-0.07, 0.07, -0.17, 0.07), -0.9, -0.82, dark]],
+  arm: [[box(-0.05, 0.05, -0.05, 0.05), -0.55, 0, shirt], [box(-0.045, 0.045, -0.045, 0.045), -0.66, -0.55, skin]],
+};

package/src/utils/projectCelestialBody.js

@@ -0,0 +1,13 @@
+/** Perspective projection of a celestial direction; null when behind the camera. */
+
+export function projectCelestialBody(dir, size, pitch, bearing) {
+  const [x, y, z] = dir;
+  const forward = -x * Math.sin(bearing) * Math.sin(pitch) - y * Math.cos(pitch) - z * Math.cos(bearing) * Math.sin(pitch);
+  if (forward > 0) {
+    return {
+      left: size.x / 2 + size.y * 1.5 * (x * Math.cos(bearing) - z * Math.sin(bearing)) / forward,
+      top:  size.y / 2 - size.y * 1.5 * (-x * Math.sin(bearing) * Math.cos(pitch) + y * Math.sin(pitch) - z * Math.cos(bearing) * Math.cos(pitch)) / forward
+    };
+  }
+  return null;
+}