@emuanalytics/flow-rdf-core 4.0.3 → 4.0.5

package/dist/lib/map/plugins/url-sync.plugin.mjs

@@ -0,0 +1,55 @@
+import { MapPluginBase } from './map-plugin-base.mjs';
+import Debug from 'debug';
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+const debug = Debug("flow:url-sync-plugin");
+class UrlSyncPlugin extends MapPluginBase {
+  constructor(pluginManager) {
+    super(pluginManager);
+    __publicField(this, "name", "UrlSyncPlugin");
+  }
+  initialize() {
+    const searchParams = new URLSearchParams(window.location.search);
+    const hash = searchParams.get(this.map.id);
+    if (hash) {
+      const center = this.hashToMapState(hash);
+      debug("Setting map position from URL", center);
+      this.map.setCenter(center);
+    }
+  }
+  handleMoveEnd(event) {
+    const center = this.mapStateToHash(this.map.getCenter());
+    const searchParams = new URLSearchParams(window.location.search);
+    searchParams.set(this.map.id, center);
+    const newUrl = `${location.pathname}?${searchParams.toString()}`;
+    debug("Updating URL with map position", center);
+    window.history.replaceState({}, "", newUrl);
+  }
+  mapStateToHash(mapCenter) {
+    const state = {
+      z: mapCenter.zoom.toFixed(3),
+      x: mapCenter.lng.toFixed(3),
+      y: mapCenter.lat.toFixed(3),
+      pitch: mapCenter.pitch.toFixed(1),
+      bearing: mapCenter.bearing.toFixed(1)
+    };
+    return `${state.z}_${state.x}_${state.y}_${state.pitch}_${state.bearing}`;
+  }
+  hashToMapState(hash) {
+    const [zoom, x, y, pitch, bearing] = hash.split("_");
+    return {
+      lng: +x,
+      lat: +y,
+      zoom: +zoom,
+      pitch: +pitch,
+      bearing: +bearing
+    };
+  }
+}
+
+export { UrlSyncPlugin };

package/dist/lib/map/support/image-registry.mjs

@@ -0,0 +1,82 @@
+import Debug from 'debug';
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+Debug("flow:image-registry");
+const unknownImageSVG = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='flowicon'%3E%3C!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256 256-114.6 256-256S397.4 0 256 0zm0 400c-18 0-32-14-32-32s13.1-32 32-32c17.1 0 32 14 32 32s-14.9 32-32 32zm69.1-142L280 286v2c0 13-11 24-24 24s-24-11-24-24v-16c0-8 4-16 12-21l57-34c7-4 11-11 11-19 0-12-10.9-22-22.9-22H238c-12.9 0-22 10-22 22 0 13-11 24-24 24s-24-11-24-24c0-39 31-70 69.1-70h51.1c40.8 0 71.8 31 71.8 70 0 24-13 47-34.9 60z'/%3E%3C/svg%3E`;
+class ImageRegistry {
+  constructor() {
+    __publicField(this, "_registry", /* @__PURE__ */ new Map());
+    __publicField(this, "_unknownImage", null);
+  }
+  get unknownImage() {
+    if (!this._unknownImage) {
+      const image = new Image(40, 40);
+      image.src = unknownImageSVG;
+      this._unknownImage = {
+        id: "unknown-image",
+        src: unknownImageSVG,
+        pixelDensity: 2,
+        image
+      };
+    }
+    return this._unknownImage;
+  }
+  /**
+   * Register a map icon image.
+   *
+   * @param id Image ID.
+   * @param src Image source URL.
+   * @param width Image display width.
+   * @param height Image display height.
+   * @param pixelDensity Image pixel density. Defaults to `2` - the source image should be @2x resolution to enable better quality rendering on high-resolution displays.
+   * @param recolor Set to `true` to allow recoloring of map icon image using map layer style properties.
+   */
+  registerImage(id, src, width, height, pixelDensity = 2, recolor = false) {
+    const entry = { id, src, width, height, pixelDensity, recolor };
+    this._registry.set(id, entry);
+    return entry;
+  }
+  /**
+   * Get an image registry entry.
+   *
+   * @param id Image ID.
+   * @returns The image registry entry.
+   */
+  getImage(id) {
+    const registryEntry = this._registry.get(id);
+    if (!registryEntry) {
+      return this.unknownImage;
+    }
+    if (!registryEntry.image) {
+      registryEntry.image = this.loadImage(
+        registryEntry.src,
+        registryEntry.width,
+        registryEntry.height,
+        registryEntry.pixelDensity
+      );
+    }
+    return registryEntry;
+  }
+  /**
+   *
+   * @param src Image source URL.
+   * @param width Image display width in pixels.
+   * @param height Image display height in pixels.
+   * @param pixelDensity Image pixel density. Defaults to `2` - the source image should be @2x resolution to enable better quality rendering on high-resolution displays.
+   */
+  loadImage(src, width, height, pixelDensity = 2) {
+    const image = new Image();
+    image.crossOrigin = "Anonymous";
+    image.width = width ? width * pixelDensity : image.width;
+    image.height = height ? height * pixelDensity : image.height;
+    image.src = src;
+    return image;
+  }
+}
+
+export { ImageRegistry };

package/dist/lib/map/support/map-events.mjs

@@ -0,0 +1,71 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class MapEvent {
+  constructor(type, map, originalEvent) {
+    __publicField(this, "type");
+    __publicField(this, "map");
+    __publicField(this, "originalEvent");
+    this.type = type;
+    this.map = map;
+    this.originalEvent = originalEvent;
+  }
+  static fromMaplibreEvent(type, map, maplibreEvent) {
+    return new MapEvent(type, map, maplibreEvent.originalEvent);
+  }
+}
+class MapMouseEvent extends MapEvent {
+  constructor(type, map, point, lngLat, features, originalEvent) {
+    super(type, map, originalEvent);
+    /**
+     * The pixel coordinates of the mouse cursor, relative to the map and measured from the top left corner.
+     */
+    __publicField(this, "point");
+    /**
+     * The geographic location on the map of the mouse cursor.
+     */
+    __publicField(this, "lngLat");
+    __publicField(this, "features");
+    this.point = point;
+    this.lngLat = lngLat;
+    this.features = features;
+  }
+  static fromMaplibreMouseEvent(type, maplibreMouseEvent, map, features) {
+    return new MapMouseEvent(
+      type,
+      map,
+      [maplibreMouseEvent.point.x, maplibreMouseEvent.point.y],
+      [maplibreMouseEvent.lngLat.lng, maplibreMouseEvent.lngLat.lat],
+      features,
+      maplibreMouseEvent.originalEvent
+    );
+  }
+}
+class MapSourceEvent extends MapEvent {
+  constructor(type, map, source) {
+    super(type, map);
+    __publicField(this, "source");
+    this.source = source;
+  }
+}
+class MapLoadingEvent extends MapEvent {
+  constructor(map, loading) {
+    super("loading", map);
+    __publicField(this, "loading");
+    this.loading = loading;
+  }
+}
+class MapStyleChangeEvent extends MapEvent {
+  constructor(type, map, oldStyle, newStyle) {
+    super(type, map);
+    __publicField(this, "oldStyle");
+    __publicField(this, "newStyle");
+    this.oldStyle = oldStyle;
+    this.newStyle = newStyle;
+  }
+}
+
+export { MapEvent, MapLoadingEvent, MapMouseEvent, MapSourceEvent, MapStyleChangeEvent };

package/dist/lib/map/support/map-feature-stream.mjs

@@ -0,0 +1,158 @@
+import Debug from 'debug';
+import { makeObservable, observable, computed, onBecomeObserved, onBecomeUnobserved, runInAction } from 'mobx';
+import { toStream } from 'mobx-utils';
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+Debug("flow:map-feature-stream");
+class MapFeatureStream {
+  constructor(options) {
+    __publicField(this, "_boundHandleLoading");
+    __publicField(this, "_boundHandleSourceFeatureState");
+    __publicField(this, "_options");
+    __publicField(this, "_sourceLoadCount", 0);
+    __publicField(this, "_sourceLoaded", true);
+    var _a;
+    this._options = {
+      fireImmediately: true,
+      ...options
+    };
+    const sourceType = options.map.getSource(options.source).type;
+    if (sourceType === "vector")
+      (_a = this._options).sourceLayer ?? (_a.sourceLayer = "geometry");
+    makeObservable(this, {
+      _options: observable,
+      _sourceLoadCount: observable,
+      featureData: computed.struct
+    });
+    this._boundHandleLoading = this.handleLoading.bind(this);
+    this._boundHandleSourceFeatureState = this.handleSourceFeatureState.bind(this);
+    onBecomeObserved(this, "featureData", this.resume.bind(this));
+    onBecomeUnobserved(this, "featureData", this.suspend.bind(this));
+  }
+  /**
+   * Returns feature data corresponding to the requested feature IDs. This is a computed property that will
+   * automatically update when the feature data changes. Accessing this property within a reactive
+   * context will automatically trigger a reactive update.
+   *
+   * :::info
+   * This method provides an alternative to {@link subscribe} for responding to feature data upates.
+   * :::
+   *
+   * @example
+   * ```js
+   * const featureStream = myMap.featureStream({
+   *   featureIds: ['feature1', 'feature2'],
+   *   source: 'my-source'
+   * });
+   *
+   * const disposer = appState.autoRun(() => {
+   *   const featureData = featureStream.featureData;
+   *   console.log('Feature data changed:', featureData);
+   * });
+   * ...
+   * disposer();
+   * ```
+   *
+   */
+  get featureData() {
+    this._sourceLoadCount;
+    const featureData = this.queryFeatureData(this._options.featureIds);
+    return featureData;
+  }
+  /** Returns the feature IDs being tracked. */
+  get featureIds() {
+    return this._options.featureIds;
+  }
+  /** Update the feature IDs being tracked. */
+  set featureIds(featureIds) {
+    runInAction(() => {
+      this._options.featureIds = featureIds;
+    });
+  }
+  /**
+   * Subscribe to the feature stream. The supplied handler will be called whenever the feature data changes.
+   *
+   * :::warning
+   * Subscriptions should be disposed of when no longer required by calling their `unsubscribe()` method.
+   * :::
+   */
+  subscribe(handler) {
+    const mobxSubscription = toStream(() => this.featureData, this._options.fireImmediately).subscribe(handler);
+    return {
+      unsubscribe: () => {
+        mobxSubscription.unsubscribe();
+      }
+    };
+  }
+  featureFromMaplibreFeature(feature) {
+    return {
+      id: feature.id,
+      geometry: feature.geometry,
+      source: this._options.source,
+      sourceLayer: this._options.sourceLayer,
+      properties: feature.properties,
+      state: this._options.map.maplibreMap.getFeatureState({
+        id: feature.id,
+        source: this._options.source,
+        sourceLayer: this._options.sourceLayer
+      })
+    };
+  }
+  handleLoading(event) {
+    let loaded = false;
+    if (event.type === "sourcedata" && event.sourceId === this._options.source) {
+      loaded = event.isSourceLoaded;
+    } else if (event.type === "idle") {
+      loaded = true;
+    }
+    if (this._sourceLoaded !== loaded) {
+      this._sourceLoaded = loaded;
+      if (loaded) {
+        runInAction(() => {
+          this._sourceLoadCount++;
+        });
+      }
+    }
+  }
+  handleSourceFeatureState(event) {
+    if (event.type === "sourceFeatureState" && event.source === this._options.source) {
+      runInAction(() => {
+        this._sourceLoadCount++;
+      });
+    }
+  }
+  queryFeatureData(featureIDs) {
+    if (featureIDs.length === 0) {
+      return {};
+    }
+    const featureIdProp = this._options.map.getSource(this._options.source).featureId;
+    let features = this._options.map.maplibreMap.querySourceFeatures(this._options.source, {
+      sourceLayer: this._options.sourceLayer,
+      filter: ["in", ["get", featureIdProp], ["literal", featureIDs]]
+    });
+    const ids = /* @__PURE__ */ new Set();
+    features = features.filter((feature) => ids.has(feature.id) ? false : ids.add(feature.id) && true);
+    const featureData = features.reduce((accum, f) => {
+      accum[f.id] = this.featureFromMaplibreFeature(f);
+      return accum;
+    }, {});
+    return featureData;
+  }
+  resume() {
+    this._options.map.maplibreMap.on("sourcedata", this._boundHandleLoading);
+    this._options.map.maplibreMap.on("idle", this._boundHandleLoading);
+    this._options.map.on("sourceFeatureState", this._boundHandleSourceFeatureState);
+  }
+  suspend() {
+    this._options.map.maplibreMap.off("sourcedata", this._boundHandleLoading);
+    this._options.map.maplibreMap.off("idle", this._boundHandleLoading);
+    this._options.map.off("sourceFeatureState", this._boundHandleSourceFeatureState);
+  }
+}
+
+export { MapFeatureStream };

package/dist/lib/map/support/map-popup.mjs

@@ -0,0 +1,159 @@
+import maplibre from '@emuanalytics/maplibre-gl';
+import Debug from 'debug';
+import EventEmitter from 'eventemitter3';
+import * as lit from 'lit-html';
+import { assert } from '../../utils/assert.mjs';
+import { isArray, isStringFull, isFunction, isString } from '../../utils/type-checks.mjs';
+import { isFeatureWithId } from '../types.mjs';
+import { MapFeatureStream } from './map-feature-stream.mjs';
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+Debug("flow:map-popup");
+class MapPopup extends EventEmitter {
+  /**
+   * Constructs a new `MapPopup` instance.
+   *
+   * This is called by the `FlowMap::openPopup` method.
+   *
+   * @param map Parent Flo.w map.
+   * @param options Popup options.
+   */
+  constructor(map, options) {
+    super();
+    this.map = map;
+    this.options = options;
+    __publicField(this, "_feature");
+    __publicField(this, "_contentContainer");
+    __publicField(this, "_featureStream", null);
+    //private _featureStreamSubscription: ISubscription | null = null;
+    __publicField(this, "_maplibrePopup", null);
+    __publicField(this, "_featureStreamDisposer");
+    this.options = {
+      // Defaults
+      closeButton: true,
+      closeOnClick: false,
+      closeOnMove: false,
+      maxWidth: "300px",
+      trackFeature: true,
+      //
+      ...this.options
+    };
+  }
+  get feature() {
+    return this._feature;
+  }
+  /**
+   * Close the popup.
+   */
+  close() {
+    if (this._maplibrePopup) {
+      this._maplibrePopup.remove();
+      this._maplibrePopup = null;
+    }
+  }
+  /**
+   * Move the popup to a new location.
+   *
+   * @param lngLat New location.
+   */
+  moveTo(lngLat) {
+    this._maplibrePopup.setLngLat(lngLat);
+  }
+  open(eventOrLngLat, feature) {
+    if (this._maplibrePopup) {
+      return;
+    }
+    if (!isArray(eventOrLngLat)) {
+      if (isFeatureWithId(eventOrLngLat.features[0])) {
+        feature = eventOrLngLat.features[0];
+      }
+      eventOrLngLat = eventOrLngLat.lngLat;
+    }
+    if (feature) {
+      assert(isFeatureWithId(feature), "MapPopup.open(): feature must have unique ID");
+    }
+    this._maplibrePopup = new maplibre.Popup({
+      className: this.cssClasses().join(" "),
+      closeButton: this.options.closeButton,
+      closeOnClick: this.options.closeOnClick,
+      closeOnMove: this.options.closeOnMove,
+      maxWidth: this.options.maxWidth
+    });
+    this._maplibrePopup.once("close", this.popupCloseHandler.bind(this));
+    this._contentContainer = document.createElement("div");
+    this._contentContainer.classList.add("flow-map-popup-content");
+    this._maplibrePopup.setLngLat(eventOrLngLat).setDOMContent(this._contentContainer).addTo(this.map.maplibreMap);
+    if (feature) {
+      this._feature = feature;
+      this._featureStream = new MapFeatureStream({
+        map: this.map,
+        source: feature.source,
+        sourceLayer: feature.sourceLayer,
+        featureIds: [feature.id]
+      });
+      this._featureStreamDisposer = this.map.context.state.autorun(() => {
+        const data = this._featureStream?.featureData;
+        if (data) {
+          this.handleFeatureUpdate(data[feature.id]);
+        }
+      });
+    } else {
+      this.moveTo(eventOrLngLat);
+      this.renderContent(null);
+    }
+  }
+  cssClasses() {
+    const classes = ["flow-map-popup"];
+    if (isStringFull(this.options.class)) {
+      classes.push(this.options.class);
+    }
+    if (this.options.closeButton) {
+      classes.push("flow-map-popup--with-close");
+    }
+    return classes;
+  }
+  handleFeatureUpdate(feature) {
+    if (!feature) {
+      this.close();
+      return;
+    }
+    if (this.options.trackFeature) {
+      switch (feature.geometry.type) {
+        case "Point":
+          this.moveTo(feature.geometry.coordinates);
+          break;
+        case "MultiPoint":
+          this.moveTo(feature.geometry.coordinates[0]);
+          break;
+      }
+    }
+    this.renderContent(feature);
+  }
+  popupCloseHandler() {
+    if (this._featureStreamDisposer) {
+      this._featureStreamDisposer();
+      this._featureStreamDisposer = void 0;
+    }
+    this.emit("closed", this);
+    this.removeAllListeners();
+  }
+  renderContent(feature) {
+    const state = this.map.context.state;
+    const content = isFunction(this.options.content) ? this.options.content(feature, state) : this.options.content;
+    if (isString(content)) {
+      this._contentContainer.innerHTML = content;
+    } else if (content instanceof Node) {
+      this._contentContainer.innerHTML = "";
+      this._contentContainer.appendChild(content);
+    } else {
+      lit.render(content, this._contentContainer);
+    }
+  }
+}
+
+export { MapPopup };

package/dist/lib/map/types.mjs

@@ -0,0 +1,7 @@
+import { isDefined } from '../utils/type-checks.mjs';
+
+function isFeatureWithId(f) {
+  return isDefined(f) && isDefined(f.source) && isDefined(f.id);
+}
+
+export { isFeatureWithId };