@guardian/interactive-component-library 0.2.0-rc1 → 0.2.0-rc2

package/dist/components/molecules/canvas-map/lib/formats/GeoJSON.js

@@ -0,0 +1,96 @@
+import { Feature } from "../Feature.js";
+import { LineString } from "../geometry/LineString.js";
+import { Polygon } from "../geometry/Polygon.js";
+import { Point } from "../geometry/Point.js";
+import { extentForCoordinates } from "../util/extent.js";
+class GeoJSON {
+  readFeaturesFromObject(object) {
+    const geoJSONObject = object;
+    let features = null;
+    if (geoJSONObject["type"] === "FeatureCollection") {
+      const geoJSONFeatureCollection = object;
+      features = [];
+      const geoJSONFeatures = geoJSONFeatureCollection["features"];
+      for (let i = 0, ii = geoJSONFeatures.length; i < ii; ++i) {
+        const featureObject = this.readFeatureFromObject(geoJSONFeatures[i]);
+        if (!featureObject) {
+          continue;
+        }
+        features.push(featureObject);
+      }
+    } else if (geoJSONObject["type"] === "Feature") {
+      features = [this.readFeatureFromObject(geoJSONObject)];
+    } else if (Array.isArray(geoJSONObject)) {
+      features = [];
+      for (let i = 0, ii = geoJSONObject.length; i < ii; ++i) {
+        const featureObject = this.readFeatureFromObject(geoJSONObject[i]);
+        if (!featureObject) {
+          continue;
+        }
+        features.push(featureObject);
+      }
+    } else {
+      try {
+        const geometries = this.readGeometriesFromObject(geoJSONObject);
+        const feature = new Feature({ geometries });
+        features = [feature];
+      } catch {
+        console.warn("Unable to interpret GeoJSON:", geoJSONObject);
+        return;
+      }
+    }
+    return features.flat();
+  }
+  readFeatureFromObject(geoJSONObject) {
+    const geometries = this.readGeometriesFromObject(geoJSONObject["geometry"]);
+    if (geometries.length > 0) {
+      return new Feature({
+        id: geoJSONObject["id"],
+        geometries,
+        properties: geoJSONObject["properties"]
+      });
+    }
+    return null;
+  }
+  readGeometriesFromObject(geometry) {
+    const geometries = [];
+    if (geometry.type === "Polygon") {
+      const polygon = this.readPolygonForCoordinates(geometry.coordinates);
+      geometries.push(polygon);
+    } else if (geometry.type === "MultiPolygon") {
+      for (const polygonCoordinates of geometry.coordinates) {
+        const polygon = this.readPolygonForCoordinates(polygonCoordinates);
+        geometries.push(polygon);
+      }
+    } else if (geometry.type === "LineString") {
+      const lineString = this.readLineStringForCoordinates(geometry.coordinates);
+      geometries.push(lineString);
+    } else if (geometry.type === "MultiLineString") {
+      for (const lineStringCoordinates of geometry.coordinates) {
+        const lineString = this.readLineStringForCoordinates(
+          lineStringCoordinates
+        );
+        geometries.push(lineString);
+      }
+    } else if (geometry.type === "Point") {
+      const point = this.readPointForCoordinates(geometry.coordinates);
+      geometries.push(point);
+    }
+    return geometries;
+  }
+  readPolygonForCoordinates(coordinates) {
+    const outerRing = coordinates[0];
+    const extent = extentForCoordinates(outerRing);
+    return new Polygon({ extent, coordinates });
+  }
+  readLineStringForCoordinates(coordinates) {
+    const extent = extentForCoordinates(coordinates);
+    return new LineString({ extent, coordinates });
+  }
+  readPointForCoordinates(coordinates) {
+    return new Point({ coordinates });
+  }
+}
+export {
+  GeoJSON
+};

package/dist/components/molecules/canvas-map/lib/geometry/Geometry.d.ts

@@ -0,0 +1,32 @@
+export class Geometry {
+    /**
+     * Represents vector geometry
+     * @constructor
+     * @param {Object} options
+     * @param {string} options.type - The type of geometry (e.g., 'Point', 'LineString', 'Polygon')
+     * @param {Array} options.extent - The extent of the geometry (e.g., [xmin, ymin, xmax, ymax])
+     * @param {Array} options.coordinates - The coordinates of the geometry (e.g., [[x1, y1], [x2, y2], ...])
+     */
+    constructor({ type, extent, coordinates }: {
+        type: string;
+        extent: any[];
+        coordinates: any[];
+    });
+    type: string;
+    extent: any[];
+    coordinates: any[];
+    getProjected: any;
+    /**
+     * Returns the geometry as a GeoJSON object
+     * @function
+     * @param {import("../projection").Projection} projection - The projection to use for the geometry
+     * @returns {Object} A GeoJSON representation of the projected geometry
+     * @private
+     */
+    private _getProjected;
+    /**
+     * Returns the geometry as a GeoJSON object
+     * @returns {Object} The GeoJSON representation of the geometry
+     */
+    getGeoJSON(): any;
+}

package/dist/components/molecules/canvas-map/lib/geometry/Geometry.js

@@ -0,0 +1,41 @@
+import { memoise } from "../util/memoise.js";
+class Geometry {
+  /**
+   * Represents vector geometry
+   * @constructor
+   * @param {Object} options
+   * @param {string} options.type - The type of geometry (e.g., 'Point', 'LineString', 'Polygon')
+   * @param {Array} options.extent - The extent of the geometry (e.g., [xmin, ymin, xmax, ymax])
+   * @param {Array} options.coordinates - The coordinates of the geometry (e.g., [[x1, y1], [x2, y2], ...])
+   */
+  constructor({ type, extent, coordinates }) {
+    this.type = type;
+    this.extent = extent;
+    this.coordinates = coordinates;
+    this.getProjected = memoise(this._getProjected).bind(this);
+  }
+  /**
+   * Returns the geometry as a GeoJSON object
+   * @function
+   * @param {import("../projection").Projection} projection - The projection to use for the geometry
+   * @returns {Object} A GeoJSON representation of the projected geometry
+   * @private
+   */
+  // eslint-disable-next-line no-unused-vars
+  _getProjected(projection) {
+    throw new Error("Not implemented");
+  }
+  /**
+   * Returns the geometry as a GeoJSON object
+   * @returns {Object} The GeoJSON representation of the geometry
+   */
+  getGeoJSON() {
+    return {
+      type: this.type,
+      coordinates: this.coordinates
+    };
+  }
+}
+export {
+  Geometry
+};

package/dist/components/molecules/canvas-map/lib/geometry/LineString.d.ts

@@ -0,0 +1,12 @@
+import { Geometry } from './Geometry';
+export class LineString extends Geometry {
+    constructor({ type, extent, coordinates }: {
+        type?: string;
+        extent: any;
+        coordinates: any;
+    });
+    _getProjected(projection: any): {
+        type: string;
+        coordinates: any[];
+    };
+}

package/dist/components/molecules/canvas-map/lib/geometry/LineString.js

@@ -0,0 +1,19 @@
+import { Geometry } from "./Geometry.js";
+class LineString extends Geometry {
+  constructor({ type = "LineString", extent, coordinates }) {
+    super({ type, extent, coordinates });
+  }
+  _getProjected(projection) {
+    const projected = [];
+    for (const point of this.coordinates) {
+      projected.push(projection(point));
+    }
+    return {
+      type: this.type,
+      coordinates: projected
+    };
+  }
+}
+export {
+  LineString
+};

package/dist/components/molecules/canvas-map/lib/geometry/Point.d.ts

@@ -0,0 +1,11 @@
+import { Geometry } from './Geometry';
+export class Point extends Geometry {
+    constructor({ type, coordinates }: {
+        type?: string;
+        coordinates: any;
+    });
+    _getProjected(projection: any): {
+        type: string;
+        coordinates: any;
+    };
+}

package/dist/components/molecules/canvas-map/lib/geometry/Point.js

@@ -0,0 +1,16 @@
+import { Geometry } from "./Geometry.js";
+class Point extends Geometry {
+  constructor({ type = "Point", coordinates }) {
+    super({ type, extent: null, coordinates });
+    this.extent = [...coordinates, ...coordinates];
+  }
+  _getProjected(projection) {
+    return {
+      type: this.type,
+      coordinates: projection(this.coordinates)
+    };
+  }
+}
+export {
+  Point
+};

package/dist/components/molecules/canvas-map/lib/geometry/Polygon.d.ts

@@ -0,0 +1,16 @@
+import { Geometry } from './Geometry';
+export class Polygon extends Geometry {
+    constructor({ type, extent, coordinates }: {
+        type?: string;
+        extent: any;
+        coordinates: any;
+    });
+    _getProjected(projection: any): {
+        type: string;
+        coordinates: any[][];
+    };
+    getOuterRing(): any;
+    setOuterRing(coordinates: any): void;
+    setCoordinates(coordinates: any): void;
+    clone(): Polygon;
+}

package/dist/components/molecules/canvas-map/lib/geometry/Polygon.js

@@ -0,0 +1,46 @@
+import { Geometry } from "./Geometry.js";
+class Polygon extends Geometry {
+  constructor({ type = "Polygon", extent, coordinates }) {
+    super({ type, extent, coordinates });
+  }
+  _getProjected(projection) {
+    const projected = [];
+    const rings = this.coordinates;
+    for (const ring of rings) {
+      const projectedRing = [];
+      for (const point of ring) {
+        const projectedPoint = projection(point);
+        if (projectedPoint) {
+          projectedRing.push(projectedPoint);
+        } else {
+          break;
+        }
+      }
+      if (projectedRing.length > 0) {
+        projected.push(projectedRing);
+      }
+    }
+    return {
+      type: this.type,
+      coordinates: projected
+    };
+  }
+  getOuterRing() {
+    return this.coordinates[0];
+  }
+  setOuterRing(coordinates) {
+    this.coordinates[0] = coordinates;
+  }
+  setCoordinates(coordinates) {
+    this.coordinates = coordinates;
+  }
+  clone() {
+    return new Polygon({
+      extent: this.extent,
+      coordinates: JSON.parse(JSON.stringify(this.coordinates))
+    });
+  }
+}
+export {
+  Polygon
+};

package/dist/components/molecules/canvas-map/lib/geometry/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Geometry';
+export * from './LineString';
+export * from './Polygon';
+export * from './Point';

package/dist/components/molecules/canvas-map/lib/interpolators/index.d.ts

@@ -0,0 +1,2 @@
+export * from './interpolateFeatures';
+export * from './interpolateStyles';

package/dist/components/molecules/canvas-map/lib/interpolators/interpolateFeatures.d.ts

@@ -0,0 +1,5 @@
+export function interpolateFeatures(currentFeatures: any, newFeatures: any, { interpolate, separate, combine }: {
+    interpolate: any;
+    separate: any;
+    combine: any;
+}): (t: any) => any;

package/dist/components/molecules/canvas-map/lib/interpolators/interpolateFeatures.js

@@ -0,0 +1,95 @@
+function interpolateFeatures(currentFeatures, newFeatures, { interpolate, separate, combine }) {
+  if (currentFeatures.length !== newFeatures.length) {
+    throw new Error(
+      "interpolateFeatures expects an equal number of features for start and end"
+    );
+  }
+  const featureInterpolators = [];
+  for (let i = 0; i < currentFeatures.length; i++) {
+    const geometryInterpolators = [];
+    const currentGeometries = currentFeatures[i].geometries;
+    const newGeometries = newFeatures[i].geometries;
+    if (newGeometries.length === currentGeometries.length) {
+      for (let e = 0; e < currentGeometries.length; e++) {
+        const currentGeometry = currentGeometries[e];
+        const newGeometry = newGeometries[e];
+        if (currentGeometry.type !== "Polygon" || newGeometry.type !== "Polygon") {
+          throw new Error("interpolateFeatures expects only Polygon geometry");
+        }
+        const shapeInterpolator = interpolate(
+          currentGeometries[e].getOuterRing(),
+          newGeometries[e].getOuterRing(),
+          { string: false }
+        );
+        geometryInterpolators.push({
+          type: "default",
+          interpolator: shapeInterpolator
+        });
+      }
+    } else if (currentGeometries.length === 1 && newGeometries.length > 1) {
+      const separationInterpolator = separate(
+        currentGeometries[0].getOuterRing(),
+        newGeometries.map((geometry) => geometry.getOuterRing()),
+        { string: false, single: true }
+      );
+      geometryInterpolators.push({
+        type: "separate",
+        interpolator: separationInterpolator
+      });
+    } else if (currentGeometries.length > 1 && newGeometries.length === 1) {
+      const combinationInterpolator = combine(
+        currentGeometries.map((geometry) => geometry.getOuterRing()),
+        newGeometries[0].getOuterRing(),
+        { string: false, single: true }
+      );
+      geometryInterpolators.push({
+        type: "combine",
+        interpolator: combinationInterpolator
+      });
+    } else {
+      throw new Error(
+        `Encountered an unexpected number of geometries: ${currentGeometries.length} and ${newGeometries.length}`
+      );
+    }
+    featureInterpolators.push(geometryInterpolators);
+  }
+  return (t) => {
+    if (t >= 1) {
+      return newFeatures;
+    }
+    const features = [];
+    for (let i = 0; i < featureInterpolators.length; i++) {
+      const feature = newFeatures[i].clone();
+      const geometries = [];
+      const geometryInterpolators = featureInterpolators[i];
+      for (const [
+        index,
+        { type, interpolator }
+      ] of geometryInterpolators.entries()) {
+        let geometry = feature.geometries[index].clone();
+        let interpolated;
+        switch (type) {
+          case "separate":
+          case "combine":
+            interpolated = interpolator(t);
+            interpolated.forEach((d) => {
+              const polygon = geometry.clone();
+              polygon.setCoordinates([d]);
+              geometries.push(polygon);
+            });
+            break;
+          default:
+            geometry.setOuterRing(interpolator(t));
+            geometries.push(geometry);
+            break;
+        }
+      }
+      feature.setGeometry(geometries);
+      features.push(feature);
+    }
+    return features;
+  };
+}
+export {
+  interpolateFeatures
+};

package/dist/components/molecules/canvas-map/lib/interpolators/interpolateStyles.d.ts

@@ -0,0 +1,4 @@
+import { Style, Fill, Stroke } from '../styles';
+export function interpolateStyles(firstStyle: any, secondStyle: any, interpolateColors: any, interpolateNumbers: any): (t: any) => Style;
+export function interpolateFill(fillA: any, fillB: any, interpolateColors: any, interpolateNumbers: any): (t: any) => Fill;
+export function interpolateStroke(strokeA: any, strokeB: any, interpolateColors: any, interpolateNumbers: any): (t: any) => Stroke;

package/dist/components/molecules/canvas-map/lib/interpolators/interpolateStyles.js

@@ -0,0 +1,65 @@
+import { Style } from "../styles/Style.js";
+import { Stroke } from "../styles/Stroke.js";
+import { Fill } from "../styles/Fill.js";
+function interpolateStyles(firstStyle, secondStyle, interpolateColors, interpolateNumbers) {
+  const fillInterpolator = interpolateFill(
+    firstStyle.fill,
+    secondStyle.fill,
+    interpolateColors,
+    interpolateNumbers
+  );
+  const strokeInterpolator = interpolateStroke(
+    firstStyle.stroke,
+    secondStyle.stroke,
+    interpolateColors,
+    interpolateNumbers
+  );
+  return (t) => {
+    return new Style({
+      fill: fillInterpolator(t),
+      stroke: strokeInterpolator(t)
+    });
+  };
+}
+function interpolateFill(fillA, fillB, interpolateColors, interpolateNumbers) {
+  const colorInterpolator = interpolateColors(
+    (fillA == null ? void 0 : fillA.color) ?? "transparent",
+    (fillB == null ? void 0 : fillB.color) ?? "transparent"
+  );
+  const opacityInterpolator = interpolateNumbers(
+    (fillA == null ? void 0 : fillA.opacity) ?? 1,
+    (fillB == null ? void 0 : fillB.opacity) ?? 1
+  );
+  return (t) => {
+    return new Fill({
+      color: colorInterpolator(t),
+      opacity: opacityInterpolator(t)
+    });
+  };
+}
+function interpolateStroke(strokeA, strokeB, interpolateColors, interpolateNumbers) {
+  const colorInterpolator = interpolateColors(
+    (strokeA == null ? void 0 : strokeA.color) ?? "transparent",
+    (strokeB == null ? void 0 : strokeB.color) ?? "transparent"
+  );
+  const opacityInterpolator = interpolateNumbers(
+    (strokeA == null ? void 0 : strokeA.opacity) ?? 1,
+    (strokeB == null ? void 0 : strokeB.opacity) ?? 1
+  );
+  const widthInterpolator = interpolateNumbers(
+    (strokeA == null ? void 0 : strokeA.width) ?? 1,
+    (strokeB == null ? void 0 : strokeB.width) ?? 1
+  );
+  return (t) => {
+    return new Stroke({
+      color: colorInterpolator(t),
+      opacity: opacityInterpolator(t),
+      width: widthInterpolator(t)
+    });
+  };
+}
+export {
+  interpolateFill,
+  interpolateStroke,
+  interpolateStyles
+};

package/dist/components/molecules/canvas-map/lib/layers/TextLayer.d.ts

@@ -0,0 +1,52 @@
+import { VectorSource } from '../sources/VectorSource';
+import { Style } from '../styles';
+import { TextLayerRenderer } from '../renderers/TextLayerRenderer';
+import { Dispatcher } from '../events/Dispatcher';
+/** @typedef {Omit<ConstructorParameters<typeof TextLayer>[0], "source">} TextLayerOptions */
+/** @typedef {TextLayerOptions & { features: import("../Feature").Feature[]}} TextLayerComponentProps */
+export class TextLayer {
+    /** @param {TextLayerComponentProps} props */
+    static Component({ features, style, minZoom, opacity, declutter, drawCollisionBoxes, }: TextLayerComponentProps): any;
+    /**
+     * @param {import("../Feature").Feature[]} features
+     * @param {TextLayerOptions} options
+     */
+    static with(features: import('../Feature').Feature[], options: TextLayerOptions): TextLayer;
+    /**
+     * @constructor
+     * @param {Object} params
+     * @param {VectorSource} params.source
+     * @param {Style | (() => Style)} [params.style=undefined]
+     * @param {number} [params.minZoom=0]
+     * @param {number} [params.opacity=1]
+     * @param {boolean} [params.declutter=true]
+     * @param {boolean} [params.drawCollisionBoxes=false]
+     */
+    constructor({ source, style, minZoom, opacity, declutter, drawCollisionBoxes, }: {
+        source: VectorSource;
+        style?: Style | (() => Style);
+        minZoom?: number;
+        opacity?: number;
+        declutter?: boolean;
+        drawCollisionBoxes?: boolean;
+    });
+    source: VectorSource;
+    _style: Style | (() => Style);
+    minZoom: number;
+    opacity: number;
+    declutter: boolean;
+    drawCollisionBoxes: boolean;
+    renderer: TextLayerRenderer;
+    dispatcher: Dispatcher;
+    tearDown(): void;
+    set style(style: Style | (() => Style));
+    get style(): Style | (() => Style);
+    getExtent(): any;
+    _extent: any;
+    getStyleFunction(): () => Style;
+    renderFrame(frameState: any, targetElement: any): any;
+}
+export type TextLayerOptions = Omit<ConstructorParameters<typeof TextLayer>[0], "source">;
+export type TextLayerComponentProps = TextLayerOptions & {
+    features: import('../Feature').Feature[];
+};

package/dist/components/molecules/canvas-map/lib/layers/TextLayer.js

@@ -0,0 +1,111 @@
+import { TextLayerRenderer } from "../renderers/TextLayerRenderer.js";
+import { Style } from "../styles/Style.js";
+import { Text } from "../styles/Text.js";
+import { Dispatcher } from "../events/Dispatcher.js";
+import { combineExtents } from "../util/extent.js";
+import { MapEvent } from "../events/MapEvent.js";
+import { VectorSource } from "../sources/VectorSource.js";
+import { MapContext } from "../../context/MapContext.js";
+import { useContext, useMemo, useEffect } from "preact/hooks";
+class TextLayer {
+  /** @param {TextLayerComponentProps} props */
+  static Component({
+    features,
+    style,
+    minZoom,
+    opacity,
+    declutter,
+    drawCollisionBoxes
+  }) {
+    const { registerLayer } = useContext(MapContext);
+    const layer = useMemo(
+      () => TextLayer.with(features, {
+        style,
+        minZoom,
+        opacity,
+        declutter,
+        drawCollisionBoxes
+      }),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [features, minZoom, opacity, declutter, drawCollisionBoxes]
+    );
+    registerLayer(layer);
+    useEffect(() => {
+      layer.style = style;
+    }, [style]);
+    return null;
+  }
+  /**
+   * @param {import("../Feature").Feature[]} features
+   * @param {TextLayerOptions} options
+   */
+  static with(features, options) {
+    const source = new VectorSource({ features });
+    return new TextLayer({ source, ...options });
+  }
+  /**
+   * @constructor
+   * @param {Object} params
+   * @param {VectorSource} params.source
+   * @param {Style | (() => Style)} [params.style=undefined]
+   * @param {number} [params.minZoom=0]
+   * @param {number} [params.opacity=1]
+   * @param {boolean} [params.declutter=true]
+   * @param {boolean} [params.drawCollisionBoxes=false]
+   */
+  constructor({
+    source,
+    style,
+    minZoom = 0,
+    opacity = 1,
+    declutter = true,
+    drawCollisionBoxes = false
+  }) {
+    this.source = source;
+    this._style = style;
+    this.minZoom = minZoom;
+    this.opacity = opacity;
+    this.declutter = declutter;
+    this.drawCollisionBoxes = drawCollisionBoxes;
+    this.renderer = new TextLayerRenderer(this);
+    this.dispatcher = new Dispatcher(this);
+  }
+  tearDown() {
+    this.dispatcher = null;
+  }
+  get style() {
+    if (this._style) return this._style;
+    const defaultStyle = new Style({
+      text: new Text()
+    });
+    return defaultStyle;
+  }
+  set style(style) {
+    this._style = style;
+    this.dispatcher.dispatch(MapEvent.CHANGE);
+  }
+  getExtent() {
+    if (this._extent) return this._extent;
+    const features = this.source.getFeatures();
+    const extent = features.reduce((combinedExtent, feature) => {
+      const featureExtent = feature.getExtent();
+      if (!combinedExtent) return featureExtent;
+      return combineExtents(featureExtent, combinedExtent);
+    }, null);
+    this._extent = extent;
+    return extent;
+  }
+  getStyleFunction() {
+    const style = this.style;
+    if (typeof style === "function") return style;
+    return () => {
+      return style;
+    };
+  }
+  renderFrame(frameState, targetElement) {
+    return this.renderer.renderFrame(frameState, targetElement);
+  }
+}
+export {
+  TextLayer
+};