@guardian/interactive-component-library 0.3.1 → 0.3.2-rc1

package/dist/components/molecules/canvas-map/lib/events/Dispatcher.js

@@ -0,0 +1,35 @@
+import { createUid } from "../util/uid.js";
+class Dispatcher {
+  constructor(target) {
+    this._listenersByEvent = /* @__PURE__ */ new Map();
+    this.target = target;
+    target.on = this.on.bind(this);
+    target.unsubscribe = this.unsubscribe.bind(this);
+  }
+  on(eventType, callback) {
+    let listenersForEvent = this._listenersByEvent.get(eventType);
+    if (!listenersForEvent) {
+      listenersForEvent = /* @__PURE__ */ new Map();
+      this._listenersByEvent.set(eventType, listenersForEvent);
+    }
+    const uid = createUid();
+    listenersForEvent.set(uid, callback);
+    return uid;
+  }
+  unsubscribe(eventType, listenerKey) {
+    const listenersForEvent = this._listenersByEvent.get(eventType);
+    if (!listenersForEvent) return;
+    if (!listenersForEvent.has(listenerKey)) return;
+    listenersForEvent.delete(listenerKey);
+  }
+  dispatch(eventType, payload) {
+    const listenersForEvent = this._listenersByEvent.get(eventType);
+    if (!listenersForEvent) return;
+    listenersForEvent.forEach((callback) => {
+      callback(this.target, payload);
+    });
+  }
+}
+export {
+  Dispatcher
+};

package/dist/components/molecules/canvas-map/lib/events/MapEvent.d.ts

@@ -0,0 +1,6 @@
+export namespace MapEvent {
+    let CHANGE: string;
+    let ZOOM: string;
+    let TRANSITION_START: string;
+    let TRANSITION_END: string;
+}

package/dist/components/molecules/canvas-map/lib/events/MapEvent.js

@@ -0,0 +1,9 @@
+const MapEvent = {
+  CHANGE: "change",
+  ZOOM: "zoom",
+  TRANSITION_START: "transition_start",
+  TRANSITION_END: "transition_end"
+};
+export {
+  MapEvent
+};

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

@@ -0,0 +1,2 @@
+export * from './Dispatcher';
+export * from './MapEvent';

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

@@ -0,0 +1,63 @@
+import { Feature } from '../Feature';
+import { LineString, Polygon, Point } from '../geometry';
+/**
+ * @typedef {Object} GeoJSONFeature
+ * @property {string} type
+ * @property {Object} geometry
+ * @property {Record<string, any>} properties
+ */
+/**
+ * @typedef {Object} GeoJSONFeatureCollection
+ * @property {string} type
+ * @property {GeoJSONFeature[]} features
+ */
+/**
+ * @typedef GeoJSONParseOptions
+ * @property {boolean} [isProjected=false] - Tells the parser whether the geometry is already projected or not
+ */
+export class GeoJSON {
+    /**
+     * @constructor
+     * @param {GeoJSONParseOptions} [parseOptions]
+     */
+    constructor(parseOptions?: GeoJSONParseOptions);
+    isProjected: boolean;
+    /**
+     * Convert GeoJSON object(s) to array of {@link Feature} objects.
+     *
+     * @function
+     * @param {GeoJSONFeature | GeoJSONFeatureCollection | GeoJSONFeature[]} object GeoJSON object
+     * @returns {Feature[]}
+     */
+    readFeaturesFromObject(object: GeoJSONFeature | GeoJSONFeatureCollection | GeoJSONFeature[]): Feature[];
+    /**
+     * Convert single GeoJSON feature to {@link Feature} object.
+     *
+     * @function
+     * @param {GeoJSONFeature} geoJSONObject GeoJSON object
+     * @returns {Feature | null}
+     */
+    readFeatureFromObject(geoJSONObject: GeoJSONFeature): Feature | null;
+    readGeometriesFromObject(geometry: any): (LineString | Polygon | Point)[];
+    readPolygonForCoordinates(coordinates: any): Polygon;
+    readLineStringForCoordinates(coordinates: any): LineString;
+    readPointForCoordinates(coordinates: any): Point;
+}
+export type GeoJSONFeature = {
+    type: string;
+    geometry: any;
+    properties: Record<string, any>;
+};
+export type GeoJSONFeatureCollection = {
+    type: string;
+    features: GeoJSONFeature[];
+};
+export type GeoJSONParseOptions = {
+    /**
+     * - Tells the parser whether the geometry is already projected or not
+     */
+    /**
+     * - Tells the parser whether the geometry is already projected or not
+     */
+    isProjected?: boolean;
+};

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

@@ -0,0 +1,122 @@
+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 {
+  /**
+   * @constructor
+   * @param {GeoJSONParseOptions} [parseOptions]
+   */
+  constructor(parseOptions = {}) {
+    this.isProjected = parseOptions == null ? void 0 : parseOptions.isProjected;
+  }
+  /**
+   * Convert GeoJSON object(s) to array of {@link Feature} objects.
+   *
+   * @function
+   * @param {GeoJSONFeature | GeoJSONFeatureCollection | GeoJSONFeature[]} object GeoJSON object
+   * @returns {Feature[]}
+   */
+  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(
+          /** @type {GeoJSONFeature} */
+          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();
+  }
+  /**
+   * Convert single GeoJSON feature to {@link Feature} object.
+   *
+   * @function
+   * @param {GeoJSONFeature} geoJSONObject GeoJSON object
+   * @returns {Feature | null}
+   */
+  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 {import("../util").Extent} 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: import('../util').Extent;
+        coordinates: any[];
+    });
+    type: string;
+    extent: import('../util').Extent;
+    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 {import("../util").Extent} 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,22 @@
+import { Extent } from "../util/extent.js";
+import { Geometry } from "./Geometry.js";
+class Point extends Geometry {
+  constructor({ type = "Point", coordinates }) {
+    super({ type, extent: null, coordinates });
+    this.extent = new Extent(
+      coordinates[0],
+      coordinates[1],
+      coordinates[0],
+      coordinates[1]
+    );
+  }
+  _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
+};