leaflet-city-mapper 0.0.2 → 0.0.3

package/src/core/adjustCameraMarkerPan.js

@@ -0,0 +1,22 @@
+import { pointOf } from '../camera/pointOf.js';
+import { scheduleMarkerPan } from './scheduleMarkerPan.js';
+
+export function adjustCameraMarkerPan(event) {
+  const marker = this._marker, map = marker._map;
+  if (!map.getPitch() && !map.getBearing()) return this._cameraOriginalAdjustPan.call(this, event);
+  const screen = L.DomUtil.getPosition(marker._icon).add(map._getMapPanePos());
+  const size = map.getSize(), padding = pointOf(marker.options.autoPanPadding);
+  const speed = marker.options.autoPanSpeed;
+  const movement = new L.Point(
+    (Math.max(0, screen.x - size.x + padding.x) - Math.max(0, padding.x - screen.x)) / Math.max(1, padding.x) * speed,
+    (Math.max(0, screen.y - size.y + padding.y) - Math.max(0, padding.y - screen.y)) / Math.max(1, padding.y) * speed);
+  if (!movement.x && !movement.y) return;
+  const pane = map._getMapPanePos();
+  map.panBy(movement, { animate: false });
+  const shift = pane.subtract(map._getMapPanePos());
+  this._draggable._newPos._add(shift);
+  this._draggable._startPos._add(shift);
+  L.DomUtil.setPosition(marker._icon, this._draggable._newPos);
+  this._onDrag(event);
+  scheduleMarkerPan(this, event);
+}

package/src/core/beforeNativeRender.js

@@ -0,0 +1,10 @@
+import { synchronizeNativeLayer } from './synchronizeNativeLayer.js';
+
+export function beforeNativeRender(state) {
+  try {
+    synchronizeNativeLayer(state);
+  } catch (error) {
+    state.failed = true;
+    state.source.fire('error', { error });
+  }
+}

package/src/core/boundsQuad.js

@@ -0,0 +1,11 @@
+import { localPosition } from './localPosition.js';
+
+export function boundsQuad(state, bounds) {
+  const corners = [
+    bounds.getNorthWest(), bounds.getNorthEast(), bounds.getSouthWest(), bounds.getSouthEast(),
+  ];
+  const positions = [];
+  let corner;
+  for (corner of corners) positions.push(localPosition(state, corner));
+  return positions;
+}

package/src/core/bringNativeLayerToBack.js

@@ -0,0 +1,3 @@
+export function bringNativeLayerToBack(layer = this) {
+  layer?._nativeGPU?.reorder?.(false);
+}

package/src/core/bringNativeLayerToFront.js

@@ -0,0 +1,3 @@
+export function bringNativeLayerToFront(layer = this) {
+  layer?._nativeGPU?.reorder?.(true);
+}

package/src/core/cameraCircleBounds.js

@@ -0,0 +1,6 @@
+import { indexState } from '../constants/indexState.js';
+
+export function cameraCircleBounds() {
+  this._project();
+  return indexState.boundsMethods.get(this).call(this);
+}

package/src/core/cameraMarkerDrag.js

@@ -0,0 +1,18 @@
+import { cameraMarkerOnDrag } from './cameraMarkerOnDrag.js';
+import { adjustCameraMarkerPan } from './adjustCameraMarkerPan.js';
+
+export function cameraMarkerDrag() {
+  if (!this.dragging || this.dragging._cameraDrag) return;
+  const drag = this.dragging, original = drag._onDrag, adjustPan = drag._adjustPan;
+  drag._cameraOriginalOnDrag = original;
+  drag._cameraOriginalAdjustPan = adjustPan;
+  drag._onDrag = cameraMarkerOnDrag;
+  drag._adjustPan = adjustCameraMarkerPan;
+  // The handler may already be enabled and listening with its original method.
+  const enabled = drag.enabled();
+  if (enabled) {
+    drag._draggable.off('drag', original, drag);
+    drag._draggable.on('drag', drag._onDrag, drag);
+  }
+  drag._cameraDrag = true;
+}

package/src/core/cameraMarkerOnDrag.js

@@ -0,0 +1,8 @@
+export function cameraMarkerOnDrag(event) {
+  const map = this._marker._map;
+  const screen = L.DomUtil.getPosition(this._marker._icon).add(map._getMapPanePos());
+  const point = map.containerPointToLayerPoint(screen);
+  L.DomUtil.setPosition(this._marker._icon, point);
+  this._cameraOriginalOnDrag.call(this, event);
+  this._marker._setPos(point);
+}

package/src/core/cancelGridFade.js

@@ -0,0 +1,10 @@
+import { indexState } from '../constants/indexState.js';
+
+export function cancelGridFade(layer) {
+  indexState.pendingGridFades.delete(layer);
+  layer._fadeFrame = null;
+  if (!indexState.pendingGridFades.size && indexState.gridFadeFrame !== null) {
+    cancelAnimationFrame(indexState.gridFadeFrame);
+    indexState.gridFadeFrame = null;
+  }
+}

package/src/core/closestCameraLayerPoint.js

@@ -0,0 +1,7 @@
+import { indexState } from '../constants/indexState.js';
+
+export function closestCameraLayerPoint(point) {
+  this._project();
+  this._parts = this._rings;
+  return indexState.closestMethods.get(this).call(this, point);
+}

package/src/core/compareNativeHits.js

@@ -0,0 +1,3 @@
+export function compareNativeHits(a, b) {
+  return b.object.renderOrder - a.object.renderOrder || a.distance - b.distance;
+}

package/src/core/current.js

@@ -0,0 +1,3 @@
+export function current(state) {
+  return state.source._nativeGPU === state && state.map.hasLayer(state.source);
+}

package/src/core/disposeNativeLayer.js

@@ -0,0 +1,35 @@
+import { refreshNativeEvent } from './refreshNativeEvent.js';
+import { updateNativeLayerView } from './updateNativeLayerView.js';
+import { removeNativeEvents } from './removeNativeEvents.js';
+import { disposeMesh } from '../rendering/disposeMesh.js';
+import { destroyTexture } from '../rendering/destroyTexture.js';
+import { nativeImageRefresh } from './nativeImageRefresh.js';
+import { nativeImageError } from './nativeImageError.js';
+import { removeImageState } from './removeImageState.js';
+
+export function disposeNativeLayer() {
+  const state = this;
+  const { source, map, backend, meshes, textures, images } = state;
+  const events = 'load tileload tileunload move drag';
+  source.off(events, refreshNativeEvent, state);
+  map.off('zoomend', refreshNativeEvent, state);
+  if (state.marker) map.off('move zoom rotate pitch resize viewreset', updateNativeLayerView, state);
+  removeNativeEvents(state);
+  state.refresh = state.reorder = null;
+  let name, methods, mesh, texture, image;
+  for ([name, methods] of state.methods) {
+    if (methods.own) Object.defineProperty(source, name, methods.own);
+    else delete source[name];
+  }
+  for (mesh of meshes.values()) disposeMesh(backend, mesh);
+  meshes.clear();
+  for (texture of textures.values()) destroyTexture(backend, texture.texture);
+  textures.clear();
+  for (image of images) {
+    image.removeEventListener('load', nativeImageRefresh);
+    image.removeEventListener('error', nativeImageError);
+    removeImageState(image, state);
+  }
+  backend._beforeRender = null;
+  backend.remove();
+}

package/src/core/fireRasterLoad.js

@@ -0,0 +1,5 @@
+import { indexState } from '../constants/indexState.js';
+
+export function fireRasterLoad() {
+  indexState.pendingRasterLoads.shift()?.fire('load');
+}

package/src/core/forwardNativeError.js

@@ -0,0 +1,3 @@
+export function forwardNativeError({ error }) {
+  this.source.fire('error', { error });
+}

package/src/core/gridlayerGetEvents.js

@@ -0,0 +1,7 @@
+import { mapCameraState } from '../constants/mapCameraState.js';
+
+export function gridlayerGetEvents() {
+  const events = mapCameraState.gridEvents.call(this);
+  this._cameraGridUpdate ||= L.Util.throttle(this._onMoveEnd, this.options.updateInterval, this);
+  return { ...events, rotate: this._cameraGridUpdate, pitch: this._cameraGridUpdate };
+}

package/src/core/gridlayerGetTiledPixelBounds.js

@@ -0,0 +1,8 @@
+import { mapCameraState } from '../constants/mapCameraState.js';
+
+export function gridlayerGetTiledPixelBounds(center) {
+  if (!this._map.getBearing() && !this._map.getPitch()) return mapCameraState.tiledBounds.call(this, center);
+  const bounds = this._map.getBounds();
+  return new L.Bounds(this._map.project(bounds.getNorthWest(), this._tileZoom),
+    this._map.project(bounds.getSouthEast(), this._tileZoom));
+}

package/src/core/handleNativeMapEvent.js

@@ -0,0 +1,47 @@
+import { nativeEventMaps } from '../constants/nativeEventMaps.js';
+import { cityMapper } from '../constants/cityMapper.js';
+import { raycast } from '../picking/raycast.js';
+import { compareNativeHits } from './compareNativeHits.js';
+
+export function handleNativeMapEvent(event, type = event.type, targets) {
+  const map = this, context = nativeEventMaps.get(map), fireDOMEvent = context.fireDOMEvent;
+  const owner = cityMapper.renderers.get(map);
+  if (!owner?.renderer || targets || !['click', 'preclick', 'dblclick', 'contextmenu',
+    'mousedown', 'mouseup', 'mousemove', 'mouseover', 'mouseout',
+    'pointerdown', 'pointerup', 'pointermove', 'pointerover', 'pointerout'].includes(type)) {
+    return fireDOMEvent.call(this, event, type, targets);
+  }
+  const target = event.target;
+  const dom = target instanceof Element &&
+    target.closest('.leaflet-marker-icon,.leaflet-popup,.leaflet-tooltip,.leaflet-control');
+  if (dom && context.hovered && (type === context.move || type === context.out)) {
+    fireDOMEvent.call(map, event, context.out, [context.hovered]);
+    context.hovered = null;
+    map.getContainer().style.cursor = '';
+  }
+  if (dom || type === context.move && (map.dragging?.moving() || map._animatingZoom)) {
+    return fireDOMEvent.call(this, event, type, targets);
+  }
+  const hits = [];
+  let candidate, source2, backend;
+  if (type !== context.out) {
+    for (candidate of context.states) {
+      ({ source: source2, backend } = candidate);
+      if (source2 instanceof L.Marker || source2.options.interactive === false ||
+        !(source2 instanceof L.Path) && !source2.options.interactive) continue;
+      hits.push(...raycast(backend, event, candidate.meshes.values(), false));
+    }
+  }
+  hits.sort(compareNativeHits);
+  let source = hits[0]?.object._nativeSource || null;
+  if ((type === 'click' || type === 'preclick') && source && map._draggableMoved(source)) source = null;
+  if (type === context.move || type === context.out) {
+    if (context.hovered !== source) {
+      if (context.hovered) fireDOMEvent.call(map, event, context.out, [context.hovered]);
+      context.hovered = source;
+      if (source) fireDOMEvent.call(map, event, context.over, [source]);
+      map.getContainer().style.cursor = source ? 'pointer' : '';
+    }
+  }
+  return fireDOMEvent.call(this, event, type, source ? [source] : undefined);
+}

package/src/core/hideTargets.js

@@ -0,0 +1,16 @@
+export function hideTargets(state) {
+  const { source } = state;
+  const htmlIcon = source instanceof L.Marker && source.options.icon instanceof L.DivIcon;
+  const targets = [htmlIcon ? null : source._icon, htmlIcon ? null : source._shadow];
+  let element;
+  for (element of state.hidden) {
+    if (targets.includes(element)) continue;
+    element.classList.remove('leaflet-webgpu-target');
+    state.hidden.delete(element);
+  }
+  for (element of targets) {
+    if (!element || state.hidden.has(element)) continue;
+    element.classList.add('leaflet-webgpu-target');
+    state.hidden.add(element);
+  }
+}

package/src/core/initNativeGPU.js

@@ -0,0 +1,21 @@
+import { nativeLayer } from './nativeLayer.js';
+import { hideTargets } from './hideTargets.js';
+import { removeTargets } from './removeTargets.js';
+import { readyNativeGPU } from './readyNativeGPU.js';
+import { reportError } from '../scene/reportError.js';
+
+export function initNativeGPU(source, map) {
+  if (source._nativeGPU) return;
+  if (!document.getElementById('leaflet-webgpu-targets')) {
+    const style = document.createElement('style');
+    style.id = 'leaflet-webgpu-targets';
+    style.textContent = '.leaflet-webgpu-target{opacity:0!important}';
+    document.head.append(style);
+  }
+  const state = source._nativeGPU = { source, map, hidden: new Set() };
+  state.hide = hideTargets.bind(null, state);
+  state.hide();
+  source.once('remove', removeTargets.bind(null, state));
+  source.ready = Promise.resolve().then(readyNativeGPU.bind(null, state));
+  source.ready.catch(reportError.bind(null, source));
+}

package/src/core/initializeGridContainer.js

@@ -0,0 +1,6 @@
+import { indexState } from '../constants/indexState.js';
+
+export function initializeGridContainer() {
+  indexState.gridInitializers.get(this).call(this);
+  this._container.remove();
+}

package/src/core/initializeNativeLayer.js

@@ -0,0 +1,42 @@
+import { noOperation } from '../utils/noOperation.js';
+import { emptyEvents } from '../scene/emptyEvents.js';
+import { refreshNativeLayerContract } from './refreshNativeLayerContract.js';
+import { bringNativeLayerToFront } from './bringNativeLayerToFront.js';
+import { bringNativeLayerToBack } from './bringNativeLayerToBack.js';
+import { indexState } from '../constants/indexState.js';
+import { closestCameraLayerPoint } from './closestCameraLayerPoint.js';
+import { cameraCircleBounds } from './cameraCircleBounds.js';
+import { initializeGridContainer } from './initializeGridContainer.js';
+import { updateGridOpacity } from './updateGridOpacity.js';
+import { addRasterImage } from './addRasterImage.js';
+
+export function initializeNativeLayer() {
+  if (this instanceof L.Polyline || this instanceof L.CircleMarker) {
+    this.beforeAdd = this.onAdd = this.onRemove = this._updateBounds = noOperation;
+    this.getEvents = emptyEvents;
+    this._renderer = {
+      options: { tolerance: 0 },
+      _updatePath: refreshNativeLayerContract,
+      _updateStyle: refreshNativeLayerContract,
+      _bringToFront: bringNativeLayerToFront,
+      _bringToBack: bringNativeLayerToBack,
+    };
+    if (this instanceof L.Polyline) {
+      indexState.closestMethods.set(this, this.closestLayerPoint);
+      this.closestLayerPoint = closestCameraLayerPoint;
+    }
+    if (this instanceof L.Circle) {
+      indexState.boundsMethods.set(this, this.getBounds);
+      this.getBounds = cameraCircleBounds;
+    }
+  } else if (this instanceof L.GridLayer) {
+    indexState.gridInitializers.set(this, this._initContainer);
+    this._initContainer = initializeGridContainer;
+    this._updateOpacity = updateGridOpacity;
+  } else if (this instanceof L.ImageOverlay && !(this instanceof L.VideoOverlay) && !(this instanceof L.SVGOverlay)) {
+    this.onAdd = addRasterImage;
+    this.onRemove = noOperation;
+    this.getEvents = emptyEvents;
+    this._reset = refreshNativeLayerContract;
+  }
+}

package/src/core/localPixel.js

@@ -0,0 +1,5 @@
+import { localPosition } from './localPosition.js';
+
+export function localPixel(state, point) {
+  return localPosition(state, state.map.unproject(point));
+}

package/src/core/localPixelForGeometry.js

@@ -0,0 +1,6 @@
+import { localPixel } from './localPixel.js';
+import { nativeLayerState } from '../constants/nativeLayerState.js';
+
+export function localPixelForGeometry(point) {
+  return localPixel(nativeLayerState.geometryPixelStates[nativeLayerState.geometryPixelStates.length - 1], point);
+}

package/src/core/localPosition.js

@@ -0,0 +1,6 @@
+export function localPosition(state, latlng) {
+  const { map, backend } = state, crs = map.options.crs;
+  const origin = crs.project(backend.location), point = crs.project(latlng);
+  const metres = Math.cos(backend.location.lat * Math.PI / 180);
+  return [(point.x - origin.x) * metres, 0, -(point.y - origin.y) * metres];
+}

package/src/core/markerCameraIconPoint.js

@@ -0,0 +1,9 @@
+import { mapCameraState } from '../constants/mapCameraState.js';
+
+export function markerCameraIconPoint(x, y) {
+  let rotation = this.options.rotation + (this.options.rotateWithView ? this._map.getBearing() * mapCameraState.radians : 0);
+  if (this.options.keepUpright && Math.cos(rotation) < 0) rotation += Math.PI;
+  const scale = this.options.scale;
+  return new L.Point((x * Math.cos(rotation) - y * Math.sin(rotation)) * scale,
+    (x * Math.sin(rotation) + y * Math.cos(rotation)) * scale);
+}

package/src/core/markerGetEvents.js

@@ -0,0 +1,5 @@
+import { mapCameraState } from '../constants/mapCameraState.js';
+
+export function markerGetEvents() {
+  return { ...mapCameraState.markerMethods.getEvents.call(this), rotate: this.update, pitch: this.update, move: this.update };
+}

package/src/core/markerInitInteraction.js

@@ -0,0 +1,8 @@
+import { mapCameraState } from '../constants/mapCameraState.js';
+import { cameraMarkerDrag } from './cameraMarkerDrag.js';
+
+export function markerInitInteraction() {
+  const result = mapCameraState.markerMethods._initInteraction.call(this);
+  cameraMarkerDrag.call(this);
+  return result;
+}

package/src/core/markerQuadCorners.js

@@ -0,0 +1,31 @@
+import { localPosition } from './localPosition.js';
+
+export function markerQuadCorners(state, key, image) {
+  const { source, map, backend } = state;
+  const world = new DOMPoint(...localPosition(state, source.getLatLng()), 1)
+    .matrixTransform(new DOMMatrix(backend.root.worldMatrix));
+  const clip = world.matrixTransform(new DOMMatrix(backend.camera.projectionViewMatrix));
+  const inverse = new DOMMatrix(backend.camera.projectionViewMatrix).inverse();
+  const toLocal = new DOMMatrix(backend.root.worldMatrix).inverse();
+  const options = source.options.icon.options, size = map.getSize();
+  const dimensions = options[key === 'shadow' ? 'shadowSize' : 'iconSize'] ||
+    [image.naturalWidth, image.naturalHeight];
+  const width = dimensions.x ?? dimensions[0], height = dimensions.y ?? dimensions[1];
+  const anchor = (key === 'shadow' && options.shadowAnchor) ||
+    options.iconAnchor || [Math.floor(width / 2), Math.floor(height / 2)];
+  const center = new L.Point((clip.x / clip.w + 1) * size.x / 2, (1 - clip.y / clip.w) * size.y / 2);
+  const left = center.x - (anchor.x ?? anchor[0]), top = center.y - (anchor.y ?? anchor[1]);
+  const screenCorners = [[left, top], [left + width, top],
+    [left, top + height], [left + width, top + height]];
+  const corners = [];
+  let pointX, pointY, offset, x, y, p, result;
+  for ([pointX, pointY] of screenCorners) {
+    offset = source._cameraIconPoint(pointX - center.x, pointY - center.y);
+    x = center.x + offset.x, y = center.y + offset.y;
+    p = new DOMPoint(x / size.x * 2 - 1,
+      1 - y / size.y * 2, clip.z / clip.w, 1).matrixTransform(inverse);
+    result = new DOMPoint(p.x / p.w, p.y / p.w, p.z / p.w, 1).matrixTransform(toLocal);
+    corners.push([result.x, result.y, result.z]);
+  }
+  return corners;
+}

package/src/core/markerSetIcon.js

@@ -0,0 +1,9 @@
+import { mapCameraState } from '../constants/mapCameraState.js';
+import { initNativeGPU } from './initNativeGPU.js';
+
+export function markerSetIcon(icon) {
+  if (!(icon instanceof L.DivIcon)) icon.options.crossOrigin ||= true;
+  const result = mapCameraState.markerMethods.setIcon.call(this, icon);
+  if (this._map && !(icon instanceof L.DivIcon)) initNativeGPU(this, this._map);
+  return result;
+}

package/src/core/markerSetPos.js

@@ -0,0 +1,14 @@
+import { mapCameraState } from '../constants/mapCameraState.js';
+import { displayPoint } from '../camera/displayPoint.js';
+
+export function markerSetPos(point) {
+  mapCameraState.markerMethods._setPos.call(this, displayPoint(this._map, point));
+  let element, key, direction, options, anchor;
+  for ([element, key] of [[this._icon, 'iconAnchor'], [this._shadow, 'shadowAnchor']]) {
+    if (!element) continue;
+    direction = this._cameraIconPoint(1, 0), options = this.options.icon.options;
+    anchor = options[key] || options.iconAnchor;
+    element.style.transformOrigin = anchor ? `${anchor.x ?? anchor[0]}px ${anchor.y ?? anchor[1]}px` : 'center';
+    element.style.transform += ` rotate(${Math.atan2(direction.y, direction.x)}rad) scale(${this.options.scale})`;
+  }
+}

package/src/core/markerSetRotation.js

@@ -0,0 +1,7 @@
+export function markerSetRotation(rotation) {
+  if (!Number.isFinite(rotation)) throw new TypeError('Marker rotation must be finite');
+  this.options.rotation = rotation;
+  this.update();
+  this._nativeGPU?.refresh?.();
+  return this;
+}

package/src/core/markerUpdateZIndex.js

@@ -0,0 +1,8 @@
+import { mapCameraState } from '../constants/mapCameraState.js';
+
+export function markerUpdateZIndex(offset) {
+  mapCameraState.markerMethods._updateZIndex.call(this, offset);
+  const changed = this._cameraZIndexOffset !== offset;
+  this._cameraZIndexOffset = offset;
+  if (changed) this._nativeGPU?.refresh?.();
+}

package/src/core/nativeAddLatLng.js

@@ -0,0 +1,3 @@
+import { nativeLayerMethod } from './nativeLayerMethod.js';
+
+export function nativeAddLatLng(...args) { return nativeLayerMethod('addLatLng', this, args); }

package/src/core/nativeBringToBack.js

@@ -0,0 +1,3 @@
+import { nativeLayerMethod } from './nativeLayerMethod.js';
+
+export function nativeBringToBack(...args) { return nativeLayerMethod('bringToBack', this, args); }

package/src/core/nativeBringToFront.js

@@ -0,0 +1,3 @@
+import { nativeLayerMethod } from './nativeLayerMethod.js';
+
+export function nativeBringToFront(...args) { return nativeLayerMethod('bringToFront', this, args); }

package/src/core/nativeEvents.js

@@ -0,0 +1,26 @@
+import { cityMapper } from '../constants/cityMapper.js';
+import { raycast } from '../picking/raycast.js';
+import { nativeEventMaps } from '../constants/nativeEventMaps.js';
+import { restoreNativeEvents } from './restoreNativeEvents.js';
+import { handleNativeMapEvent } from './handleNativeMapEvent.js';
+
+/** One GPU hit test per map event, rather than one invisible SVG path per feature. */
+export function nativeEvents(state) {
+  const { map } = state;
+  let context = nativeEventMaps.get(map);
+  if (!context) {
+    context = { map, states: new Set(), hovered: null };
+    const pointer = L.version.startsWith('2');
+    context.move = pointer ? 'pointermove' : 'mousemove';
+    context.out = pointer ? 'pointerout' : 'mouseout';
+    context.over = pointer ? 'pointerover' : 'mouseover';
+    context.descriptor = Object.getOwnPropertyDescriptor(map, '_fireDOMEvent');
+    context.fireDOMEvent = map._fireDOMEvent;
+    context.handle = handleNativeMapEvent;
+    context.restore = restoreNativeEvents;
+    nativeEventMaps.set(map, context);
+    map._fireDOMEvent = handleNativeMapEvent;
+  }
+  context.states.add(state);
+  state._nativeEventContext = context;
+}

package/src/core/nativeImageError.js

@@ -0,0 +1,8 @@
+import { nativeLayerState } from '../constants/nativeLayerState.js';
+
+export function nativeImageError(event) {
+  let state;
+  for (state of nativeLayerState.imageStates.get(event.currentTarget) || []) {
+    state.source.fire('error', { error: new Error('Unable to load native layer image') });
+  }
+}

package/src/core/nativeImageRefresh.js

@@ -0,0 +1,7 @@
+import { nativeLayerState } from '../constants/nativeLayerState.js';
+import { refreshNativeLayer } from './refreshNativeLayer.js';
+
+export function nativeImageRefresh(event) {
+  let state;
+  for (state of nativeLayerState.imageStates.get(event.currentTarget) || []) refreshNativeLayer(state);
+}

package/src/core/nativeLayer.js

@@ -0,0 +1,97 @@
+import { nativeMethodHandlers } from '../constants/nativeMethodHandlers.js';
+import { createMesh } from '../rendering/createMesh.js';
+import { destroyTexture } from '../rendering/destroyTexture.js';
+import { disposeMesh } from '../rendering/disposeMesh.js';
+import { nativeGeometry } from '../geometry/nativeGeometry.js';
+import { nativeEvents } from './nativeEvents.js';
+import { removeNativeEvents } from './removeNativeEvents.js';
+import { parseColor } from '../utils/parseColor.js';
+import { update } from '../scene/update.js';
+import { nativeLayerState } from '../constants/nativeLayerState.js';
+import { current } from './current.js';
+import { refreshNativeLayer } from './refreshNativeLayer.js';
+import { refreshNativeEvent } from './refreshNativeEvent.js';
+import { reorderNativeLayer } from './reorderNativeLayer.js';
+import { nativeSetLatLng } from './nativeSetLatLng.js';
+import { nativeSetLatLngs } from './nativeSetLatLngs.js';
+import { nativeAddLatLng } from './nativeAddLatLng.js';
+import { nativeSetRadius } from './nativeSetRadius.js';
+import { nativeSetStyle } from './nativeSetStyle.js';
+import { nativeRedraw } from './nativeRedraw.js';
+import { nativeSetIcon } from './nativeSetIcon.js';
+import { nativeSetUrl } from './nativeSetUrl.js';
+import { nativeSetBounds } from './nativeSetBounds.js';
+import { nativeSetOpacity } from './nativeSetOpacity.js';
+import { nativeSetZIndex } from './nativeSetZIndex.js';
+import { nativeSetZIndexOffset } from './nativeSetZIndexOffset.js';
+import { nativeBringToFront } from './nativeBringToFront.js';
+import { nativeBringToBack } from './nativeBringToBack.js';
+import { disposeNativeLayer } from './disposeNativeLayer.js';
+import { resolveNativeReady } from './resolveNativeReady.js';
+import { rejectNativeReady } from './rejectNativeReady.js';
+import { forwardNativeError } from './forwardNativeError.js';
+import { updateNativeLayerView } from './updateNativeLayerView.js';
+import { synchronizeNativeLayer } from './synchronizeNativeLayer.js';
+import { beforeNativeRender } from './beforeNativeRender.js';
+
+nativeLayerState.imageStates = new WeakMap();
+nativeLayerState.geometryPixelStates = [];
+
+/** Render from coordinates and detached raster sources; only accessible marker controls remain DOM. */
+export async function nativeLayer(state) {
+  const { source, map } = state;
+  const backend = state.backend = new L.Layer({ source: { type: '3d' } });
+  state.meshes = new Map();
+  state.textures = new Map();
+  state.methods = new Map();
+  state.originalMethods = new Map();
+  state.images = new Set();
+  map._nativeGPUOrder ||= 0;
+  map._nativeGPUBack ||= 0;
+  state.dirty = true;
+  state.viewDirty = true;
+  state.failed = false;
+  state.order = ++map._nativeGPUOrder;
+  state.marker = source instanceof L.Marker;
+  state.paneOrder = Number(getComputedStyle(source.getPane()).zIndex) || 0;
+  state.refresh = refreshNativeLayer;
+  state.reorder = reorderNativeLayer;
+  state.dispose = disposeNativeLayer;
+  const currentEvents = 'load tileload tileunload move drag';
+  source.on(currentEvents, refreshNativeEvent, state);
+  map.on('zoomend', refreshNativeEvent, state);
+  if (state.marker) map.on('move zoom rotate pitch resize viewreset', updateNativeLayerView, state);
+  nativeEvents(state);
+  let name, own, original;
+  for (name of ['setLatLng', 'setLatLngs', 'addLatLng', 'setRadius', 'setStyle', 'redraw',
+    'setIcon', 'setUrl', 'setBounds', 'setOpacity', 'setZIndex', 'setZIndexOffset', 'bringToFront', 'bringToBack']) {
+    if (typeof source[name] !== 'function') continue;
+    own = Object.getOwnPropertyDescriptor(source, name), original = source[name];
+    state.methods.set(name, { own, original });
+    state.originalMethods.set(name, original);
+    source[name] = nativeMethodHandlers[name];
+  }
+  const ready = state.ready = Promise.withResolvers();
+  backend.once('ready', resolveNativeReady, state);
+  backend.once('error', rejectNativeReady, state);
+  backend.on('error', forwardNativeError, state);
+  refreshNativeLayer(state);
+  backend.addTo(map);
+  try {
+    await ready.promise;
+  } catch (error) {
+    disposeNativeLayer.call(state);
+    throw error;
+  }
+  if (!current(state)) return source;
+
+  backend._beforeRender = beforeNativeRender.bind(null, state);
+  try {
+    synchronizeNativeLayer(state);
+  } catch (error) {
+    disposeNativeLayer.call(state);
+    throw error;
+  }
+  update(state.backend);
+  return source;
+}

package/src/core/nativeLayerMethod.js

@@ -0,0 +1,21 @@
+import { refreshNativeLayer } from './refreshNativeLayer.js';
+
+export function nativeLayerMethod(name, source, args) {
+  const state = source._nativeGPU, original = state.originalMethods.get(name);
+  const result = original.apply(source, args);
+  let layer, zIndex;
+  if ((name === 'bringToFront' || name === 'bringToBack') && source instanceof L.GridLayer) {
+    let extreme = name === 'bringToFront' ? -Infinity : Infinity;
+    for (layer of Object.values(state.map._layers)) {
+      if (layer === source || !(layer instanceof L.GridLayer) || layer.getPane() !== source.getPane()) continue;
+      zIndex = layer.options.zIndex || 0;
+      extreme = name === 'bringToFront' ? Math.max(extreme, zIndex) : Math.min(extreme, zIndex);
+    }
+    const edge = name === 'bringToFront' ? extreme + 1 : extreme - 1;
+    if (Number.isFinite(edge)) source.setZIndex(edge);
+  }
+  if (name === 'bringToFront') state.order = ++state.map._nativeGPUOrder;
+  if (name === 'bringToBack') state.order = --state.map._nativeGPUBack;
+  refreshNativeLayer(state);
+  return result;
+}