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

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

@@ -0,0 +1,254 @@
+import { View } from "./View.js";
+import { sizeForElement } from "./util/size.js";
+import { arrayEquals } from "./util/array.js";
+import { containsCoordinate } from "./util/extent.js";
+import { MapRenderer } from "./renderers/MapRenderer.js";
+import { zoomIdentity, zoom } from "d3-zoom";
+import { select } from "d3-selection";
+import { timer } from "d3-timer";
+import { Dispatcher } from "./events/Dispatcher.js";
+import { MapEvent } from "./events/MapEvent.js";
+import "d3-transition";
+class Map {
+  constructor(config) {
+    if (config.debug) {
+      console.log("Map config", config);
+    }
+    this.options = config;
+    this.view = new View(config.view, config.debug);
+    this.target = config.target;
+    this.layers = [];
+    this.dispatcher = new Dispatcher(this);
+    this._viewport = document.createElement("div");
+    this._viewport.className = "gv-map";
+    this._viewport.style.position = "relative";
+    this._viewport.style.overflow = "hidden";
+    this._viewport.style.width = "100%";
+    this._viewport.style.height = "100%";
+    this.target.appendChild(this._viewport);
+    this._renderer = new MapRenderer(this);
+    this._resizeObserver = new ResizeObserver(() => {
+      this._updateSize();
+    });
+    this._resizeObserver.observe(this.target);
+    this._viewport.addEventListener("touchmove", (event) => {
+      if (event.targetTouches.length < 2 && this._collaborativeGesturesEnabled) {
+        this._filterEventCallback(true);
+      }
+    });
+  }
+  destroy() {
+    this._resizeObserver.disconnect();
+    this._viewport.remove();
+  }
+  /** PUBLIC GETTERS */
+  get size() {
+    return this._size;
+  }
+  get viewPort() {
+    return this._viewport;
+  }
+  get zoomScale() {
+    return this.view.transform.k;
+  }
+  get isTransitioning() {
+    return this._isTransitioning;
+  }
+  /** PUBLIC METHODS */
+  collaborativeGesturesEnabled(enabled) {
+    if (enabled === void 0) return this._collaborativeGesturesEnabled;
+    this._collaborativeGesturesEnabled = enabled;
+  }
+  onFilterEvent(callback) {
+    this._filterEventCallback = callback;
+  }
+  fitObject(geoJSON) {
+    this.view.fitObject(geoJSON);
+    this._requestRender();
+  }
+  addLayer(layer) {
+    this.addLayers([layer]);
+  }
+  addLayers(layers) {
+    this.layers = this.layers.concat(layers);
+    layers.forEach((layer) => {
+      layer.on(MapEvent.CHANGE, () => {
+        this._requestRender();
+      });
+    });
+    this._requestRender();
+  }
+  setLayers(layers) {
+    if (layers === this.layers) {
+      return;
+    }
+    new Array(...this.layers).forEach((layer) => {
+      if (!layers.includes(layer)) {
+        this.removeLayer(layer);
+      }
+    });
+    this.layers = [];
+    this.addLayers(layers);
+  }
+  removeLayer(layer) {
+    layer.tearDown();
+    const layerIndex = this.layers.indexOf(layer);
+    if (layerIndex < 0) return;
+    this.layers.splice(layerIndex, 1);
+  }
+  async zoomIn(options) {
+    return this.zoomTo(this.zoomScale * 2, options);
+  }
+  async zoomOut(options) {
+    return this.zoomTo(this.zoomScale * 0.5, options);
+  }
+  async zoomTo(zoomScale, options = { duration: 500 }) {
+    return select(this._viewport).transition().duration(options.duration).call(this._zoomBehaviour.scaleTo, zoomScale).end();
+  }
+  zoomToFeature(feature, focalPoint, padding = { top: 40, right: 40, bottom: 40, left: 40 }) {
+    const extent = feature.getExtent();
+    const [[featureX, featureY], [featureWidth, featureHeight]] = this.view.boundsForExtent(extent);
+    const [viewPortWidth, viewPortHeight] = this.view.viewPortSize;
+    const paddedViewPortWidth = viewPortWidth - padding.left - padding.right;
+    const paddedViewPortHeight = viewPortHeight - padding.top - padding.bottom;
+    const featureScale = Math.min(
+      paddedViewPortWidth / featureWidth,
+      paddedViewPortHeight / featureHeight
+    );
+    const zoomScale = Math.min(this.view.scaleExtent[1], featureScale);
+    const scaledPadding = {
+      top: padding.top / zoomScale,
+      right: padding.right / zoomScale,
+      bottom: padding.bottom / zoomScale,
+      left: padding.left / zoomScale
+    };
+    const paddedFeatureBounds = {
+      x: featureX - scaledPadding.left,
+      y: featureY - scaledPadding.top,
+      width: featureWidth + scaledPadding.left + scaledPadding.right,
+      height: featureHeight + scaledPadding.top + scaledPadding.bottom
+    };
+    const newTransform = zoomIdentity.translate(viewPortWidth / 2, viewPortHeight / 2).scale(zoomScale).translate(
+      -(paddedFeatureBounds.x + paddedFeatureBounds.width / 2),
+      -(paddedFeatureBounds.y + paddedFeatureBounds.height / 2)
+    );
+    select(this._viewport).transition().duration(500).call(this._zoomBehaviour.transform, newTransform, focalPoint);
+  }
+  /** @param {import("./layers").Layer[]} layers */
+  hasLayers(layers) {
+    if (layers.length !== this.layers.length) {
+      return false;
+    }
+    for (let i = 0; i < layers.length; i++) {
+      if (layers[i] !== this.layers[i]) {
+        return false;
+      }
+    }
+    return true;
+  }
+  async resetZoom(options) {
+    return this.zoomTo(1, options);
+  }
+  findFeatures(point) {
+    const mapCoordinate = this.view.invert(point);
+    const matchingFeatures = [];
+    for (const layer of this.layers) {
+      const layerExtent = layer.getExtent();
+      if (layer.hitDetectionEnabled && containsCoordinate(layerExtent, mapCoordinate)) {
+        const features = layer.findFeatures(mapCoordinate);
+        if (features) {
+          matchingFeatures.push(...features);
+        }
+      }
+    }
+    return matchingFeatures;
+  }
+  changed() {
+    this._requestRender();
+  }
+  async transition(options = { duration: 500 }, callback) {
+    const ease = options.ease || ((t) => t);
+    return new Promise((resolve) => {
+      this._isTransitioning = true;
+      this.dispatcher.dispatch(MapEvent.TRANSITION_START);
+      const _timer = timer((elapsed) => {
+        const t = Math.min(elapsed / options.duration, 1);
+        callback(ease(t));
+        this._renderFrame();
+        if (elapsed >= options.duration) {
+          _timer.stop();
+          this._isTransitioning = false;
+          this.dispatcher.dispatch(MapEvent.TRANSITION_END);
+          resolve();
+        }
+      });
+    });
+  }
+  /** PRIVATE METHODS */
+  _updateSize() {
+    const targetElement = this.target;
+    let newSize = sizeForElement(targetElement);
+    const oldSize = this.size;
+    if (newSize && (!oldSize || !arrayEquals(newSize, oldSize))) {
+      this._size = newSize;
+      this._updateViewportSize(newSize);
+    }
+  }
+  _updateViewportSize(size) {
+    const view = this.view;
+    if (view) {
+      view.viewPortSize = size;
+      this._createZoomBehaviour(size);
+    }
+    this._requestRender();
+  }
+  _createZoomBehaviour(viewPortSize) {
+    if (this._zoomBehaviour) {
+      this._zoomBehaviour.on("zoom", null);
+    }
+    this._zoomBypassKey = navigator.userAgent.indexOf("Mac") !== -1 ? "metaKey" : "ctrlKey";
+    this._zoomBehaviour = zoom().extent([[0, 0], viewPortSize]).translateExtent([[0, 0], viewPortSize]).scaleExtent(this.view.scaleExtent).filter((event) => {
+      const filterEvent = (filter) => {
+        this._filterEventCallback(filter);
+        return !filter;
+      };
+      if (event.type === "wheel" && !event[this._zoomBypassKey]) {
+        return filterEvent(true);
+      }
+      if ("targetTouches" in event && this.collaborativeGesturesEnabled) {
+        if (event.targetTouches.length < 2) {
+          return false;
+        }
+        event.preventDefault();
+        return filterEvent(false);
+      }
+      return (!event.ctrlKey || event.type === "wheel") && !event.button;
+    }).on("zoom", (event) => {
+      this.view.transform = event.transform;
+      this._requestRender();
+      this.dispatcher.dispatch(MapEvent.ZOOM, {
+        zoomScale: event.transform.k
+      });
+    });
+    select(this._viewport).call(this._zoomBehaviour);
+  }
+  _requestRender() {
+    if (!this._renderer || !!this._animationFrameRequestID || this._isTransitioning)
+      return;
+    this._animationFrameRequestID = requestAnimationFrame(
+      this._renderFrame.bind(this)
+    );
+  }
+  _renderFrame() {
+    const frameState = {
+      size: this.size,
+      viewState: this.view.getState(),
+      debug: this.options.debug || false
+    };
+    this._renderer.renderFrame(frameState);
+    this._animationFrameRequestID = null;
+  }
+}
+export {
+  Map
+};

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

@@ -0,0 +1,136 @@
+import { ZoomTransform } from 'd3-zoom';
+/**
+ * Represents how the map is viewed.
+ * @constructor
+ * @param {Object} options - The options for the view.
+ * @param {Projection} options.projection - The projection to use for the view.
+ * @param {Array} options.extent - The extent of the view in projection coordinates.
+ * @param {number} options.minZoom - The minimum zoom level for the view.
+ * @param {number} options.maxZoom - The maximum zoom level for the view.
+ * @param {Object} options.padding - The padding for the view in pixels.
+ * @param {boolean} debug - Whether to enable debug mode or not.
+ */
+export class View {
+    constructor({ projection, extent, minZoom, maxZoom, padding, }: {
+        projection?: {
+            (p: any): number[];
+            invert(p: any): number[];
+            stream(stream: any): any;
+            postclip(_: any, ...args: any[]): any;
+            clipExtent(_: any, ...args: any[]): any[][] | any;
+            scale(_: any, ...args: any[]): number | any;
+            translate(_: any, ...args: any[]): number[] | any;
+            angle(_: any, ...args: any[]): number | any;
+            reflectX(_: any, ...args: any[]): boolean | any;
+            reflectY(_: any, ...args: any[]): boolean | any;
+            fitExtent(extent: any, object: any): any;
+            fitSize(size: any, object: any): any;
+            fitWidth(width: any, object: any): any;
+            fitHeight(height: any, object: any): any;
+        };
+        extent: any;
+        minZoom?: number;
+        maxZoom?: number;
+        padding?: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+    }, debug?: boolean);
+    debug: boolean;
+    projection: {
+        (p: any): number[];
+        invert(p: any): number[];
+        stream(stream: any): any;
+        postclip(_: any, ...args: any[]): any;
+        clipExtent(_: any, ...args: any[]): any[][] | any;
+        scale(_: any, ...args: any[]): number | any;
+        translate(_: any, ...args: any[]): number[] | any;
+        angle(_: any, ...args: any[]): number | any;
+        reflectX(_: any, ...args: any[]): boolean | any;
+        reflectY(_: any, ...args: any[]): boolean | any;
+        fitExtent(extent: any, object: any): any;
+        fitSize(size: any, object: any): any;
+        fitWidth(width: any, object: any): any;
+        fitHeight(height: any, object: any): any;
+    };
+    extent: any;
+    minZoom: number;
+    maxZoom: number;
+    _transform: ZoomTransform;
+    _padding: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    _viewPortSize: number[];
+    pixelRatio: number;
+    set viewPortSize(size: number[]);
+    get viewPortSize(): number[];
+    set transform(transform: ZoomTransform);
+    get transform(): ZoomTransform;
+    get mapSize(): any;
+    get padding(): {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    get scaledPadding(): {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    get baseResolution(): number;
+    get scaleExtent(): number[];
+    setProjection(projection: any): void;
+    setRawProjection(projection: any): void;
+    fitExtent(extent: any): void;
+    fitObject(geoJSON: any): void;
+    boundsForExtent(extent: any): number[][];
+    invert(point: any): number[];
+    invertBounds(bounds: any): number[][];
+    getResolution(): number;
+    getZoomLevel(): number;
+    /**
+     * 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(): [[number, number], [number, number]];
+    getVisibleExtent(transform: any, projection: any): any[];
+    getState(): {
+        transform: ZoomTransform;
+        projection: {
+            (p: any): number[];
+            invert(p: any): number[];
+            stream(stream: any): any;
+            postclip(_: any, ...args: any[]): any;
+            clipExtent(_: any, ...args: any[]): any[][] | any;
+            scale(_: any, ...args: any[]): number | any;
+            translate(_: any, ...args: any[]): number[] | any;
+            angle(_: any, ...args: any[]): number | any;
+            reflectX(_: any, ...args: any[]): boolean | any;
+            reflectY(_: any, ...args: any[]): boolean | any;
+            fitExtent(extent: any, object: any): any;
+            fitSize(size: any, object: any): any;
+            fitWidth(width: any, object: any): any;
+            fitHeight(height: any, object: any): any;
+        };
+        zoomLevel: any;
+        pixelRatio: number;
+        padding: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+        viewPortSize: number[];
+        sizeInPixels: any;
+        visibleExtent: any[];
+    };
+}

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

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

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

@@ -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,10 @@
+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;
+}