@guardian/interactive-component-library 0.2.0-rc4 → 0.3.0

package/dist/components/molecules/canvas-map/lib/View.js

@@ -1,179 +0,0 @@
-import { scaleSize, scalePadding, sizeMinusPadding } from "./util/size.js";
-import { bboxFeature } from "./util/bboxFeature.js";
-import { zoomIdentity, ZoomTransform } from "d3-zoom";
-import { zoomLevelToZoomScale, zoomLevelForResolution } from "./util/zoomLevel.js";
-import { resolutionForExtent } from "./util/resolution.js";
-import { Projection } from "./projection/index.js";
-import { generateDebugUrl } from "./util/debug.js";
-class View {
-  constructor({
-    projection = Projection.geoIdentity,
-    extent,
-    minZoom = 1,
-    maxZoom = 10,
-    padding = { top: 0, right: 0, bottom: 0, left: 0 }
-  }, debug = false) {
-    this.debug = debug;
-    projection.revision = 0;
-    this.projection = projection;
-    this.extent = extent;
-    this.minZoom = minZoom;
-    this.maxZoom = maxZoom;
-    this._transform = zoomIdentity;
-    this._padding = padding;
-    this._viewPortSize = [0, 0];
-    this.pixelRatio = window.devicePixelRatio;
-  }
-  set viewPortSize(size) {
-    const previousSize = this._viewPortSize;
-    this._viewPortSize = size;
-    if (previousSize !== size) {
-      if (this.extent) {
-        this.fitExtent(this.extent);
-      }
-    }
-  }
-  get viewPortSize() {
-    return this._viewPortSize;
-  }
-  set transform(transform) {
-    this._transform = transform;
-  }
-  get transform() {
-    return new ZoomTransform(
-      this._transform.k,
-      this._transform.x * this.pixelRatio,
-      this._transform.y * this.pixelRatio
-    );
-  }
-  // map size in pixels (i.e. scaled by device pixel ratio)
-  get mapSize() {
-    return scaleSize(this.viewPortSize, this.pixelRatio);
-  }
-  get padding() {
-    return this._padding;
-  }
-  // padding in pixels (i.e. scaled by device pixel ratio)
-  get scaledPadding() {
-    const scaledPadding = { ...this._padding };
-    return scalePadding(scaledPadding, this.pixelRatio);
-  }
-  get baseResolution() {
-    const baseExtent = this.getVisibleExtent(zoomIdentity, this.projection);
-    const baseResolution = resolutionForExtent(baseExtent, this.viewPortSize);
-    return baseResolution;
-  }
-  // calculates the upper and lower zoom scales
-  get scaleExtent() {
-    const maxScale = zoomLevelToZoomScale(this.maxZoom, this.baseResolution);
-    return [1, maxScale];
-  }
-  setProjection(projection) {
-    this.projection = projection;
-    this.fitObject(bboxFeature(this.extent));
-  }
-  // only set the raw projection when it has already been configured with projection.fitExtent()
-  setRawProjection(projection) {
-    this.projection = projection;
-  }
-  fitExtent(extent) {
-    const extentFeature = bboxFeature(extent);
-    this.fitObject(extentFeature);
-    if (this.debug) {
-      console.log("Fit extent", extent, generateDebugUrl(extentFeature, false));
-    }
-  }
-  fitObject(geoJSON) {
-    this.projection.fitExtent(this.getMapExtent(), geoJSON);
-    ++this.projection.revision;
-  }
-  // returns bounds relative to the viewport
-  boundsForExtent(extent) {
-    const SW = this.projection([extent[0], extent[1]]);
-    const NE = this.projection([extent[2], extent[3]]);
-    const minX = SW[0] / this.pixelRatio;
-    const minY = NE[1] / this.pixelRatio;
-    const maxX = NE[0] / this.pixelRatio;
-    const maxY = SW[1] / this.pixelRatio;
-    const width = maxX - minX;
-    const height = maxY - minY;
-    return [
-      [minX, minY],
-      [width, height]
-    ];
-  }
-  invert(point) {
-    const { projection, pixelRatio, transform } = this.getState();
-    const scaledPoint = [point[0] * pixelRatio, point[1] * pixelRatio];
-    const untransformedPoint = transform.invert(scaledPoint);
-    const mapCoordinate = projection.invert(untransformedPoint);
-    return mapCoordinate;
-  }
-  // bounds is defined as [[minX, minY], [maxX, maxY]]
-  invertBounds(bounds) {
-    const topLeft = bounds[0];
-    const topRight = [bounds[1][0], bounds[0][1]];
-    const bottomRight = [bounds[1][0], bounds[1][1]];
-    const bottomLeft = [bounds[0][0], bounds[1][1]];
-    const points = [topLeft, topRight, bottomRight, bottomLeft, topLeft];
-    return points.map((d) => this.invert(d));
-  }
-  // map resolution (meters per pixel)
-  getResolution() {
-    return resolutionForExtent(
-      this.getVisibleExtent(this.transform, this.projection),
-      this.viewPortSize
-    );
-  }
-  // map zoom level (0 = the entire world)
-  getZoomLevel() {
-    return zoomLevelForResolution(this.getResolution());
-  }
-  //
-  /**
-   * Function that returns the extent of the view in screen coordinates
-   * The extent is defined as [[minX, minY], [maxX, maxY]]
-   * @function getMapExtent
-   * @returns {[[number, number], [number, number]]}
-   */
-  getMapExtent() {
-    const mapSizeInPixels = this.mapSize;
-    const paddingInPixels = this.scaledPadding;
-    return [
-      [paddingInPixels.left, paddingInPixels.top],
-      sizeMinusPadding(mapSizeInPixels, {
-        ...paddingInPixels,
-        left: 0,
-        top: 0
-      })
-    ];
-  }
-  // visible extent in map coordinates
-  getVisibleExtent(transform, projection) {
-    if (this.projection === Projection.geoIdentity) {
-      const [width2, height2] = this.mapSize;
-      return [0, 0, width2, height2];
-    }
-    const [width, height] = this.mapSize;
-    const southWest = projection.invert(transform.invert([0, height]));
-    const northEast = projection.invert(transform.invert([width, 0]));
-    return [southWest[0], southWest[1], northEast[0], northEast[1]];
-  }
-  getState() {
-    const transform = this.transform;
-    const projection = this.projection;
-    return {
-      transform,
-      projection,
-      zoomLevel: transform.k,
-      pixelRatio: this.pixelRatio,
-      padding: this.padding,
-      viewPortSize: this.viewPortSize,
-      sizeInPixels: scaleSize(this.viewPortSize, this.pixelRatio),
-      visibleExtent: this.getVisibleExtent(transform, projection)
-    };
-  }
-}
-export {
-  View
-};

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

@@ -1,8 +0,0 @@
-export class Dispatcher {
-    constructor(target: any);
-    _listenersByEvent: Map<any, any>;
-    target: any;
-    on(eventType: any, callback: any): string;
-    unsubscribe(eventType: any, listenerKey: any): void;
-    dispatch(eventType: any, payload: any): void;
-}

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

@@ -1,35 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

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

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

@@ -1,10 +0,0 @@
-import { Feature } from '../Feature';
-import { LineString, Polygon, Point } from '../geometry';
-export class GeoJSON {
-    readFeaturesFromObject(object: any): Feature[];
-    readFeatureFromObject(geoJSONObject: any): Feature;
-    readGeometriesFromObject(geometry: any): (LineString | Polygon | Point)[];
-    readPolygonForCoordinates(coordinates: any): Polygon;
-    readLineStringForCoordinates(coordinates: any): LineString;
-    readPointForCoordinates(coordinates: any): Point;
-}

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

@@ -1,96 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

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

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

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

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

@@ -1,5 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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;