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

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

@@ -1,104 +0,0 @@
-import { createUid } from "./util/uid.js";
-import { combineExtents, containsCoordinate } from "./util/extent.js";
-import { geoContains } from "d3-geo";
-class Feature {
-  /**
-   * Represents a feature on the map
-   * @constructor
-   * @param {Object} props - The properties for the feature.
-   * @property {string} id - The unique identifier of the feature
-   * @property {Array} geometries - The geometries of the feature
-   * @property {Object} properties - The properties of the feature
-   * @property {import("./styles").Style | import("./styles").StyleFunction} style - The style of the feature
-   */
-  constructor({ id, geometries, properties, style }) {
-    this.id = id;
-    this.geometries = geometries;
-    this.properties = properties;
-    this.style = style;
-    this.uid = createUid();
-  }
-  getExtent() {
-    if (this._extent) return this._extent;
-    const extent = this.geometries.reduce((combinedExtent, geometries) => {
-      if (!combinedExtent) return geometries.extent;
-      return combineExtents(geometries.extent, combinedExtent);
-    }, null);
-    this._extent = extent;
-    return extent;
-  }
-  setgeometries(geometries) {
-    this.geometries = geometries;
-    this._extent = void 0;
-  }
-  getProjectedGeometries(projection) {
-    return this.geometries.map(
-      (d) => d.getProjected(projection, projection.revision)
-    );
-  }
-  getStyleFunction() {
-    const style = this.style;
-    if (!style) return null;
-    if (typeof style === "function") return style;
-    return () => {
-      return style;
-    };
-  }
-  containsCoordinate(coordinate) {
-    if (!containsCoordinate(this.getExtent(), coordinate)) {
-      return false;
-    }
-    for (const geometries of this.geometries) {
-      if (geoContains(geometries.getGeoJSON(), coordinate)) {
-        return true;
-      }
-    }
-    return false;
-  }
-  clone() {
-    return new Feature({
-      id: this.id,
-      geometries: this.geometries.map((d) => d.clone()),
-      properties: this.properties,
-      style: this.style
-    });
-  }
-  /**
-   * Returns the geometries as a GeoJSON object
-   * @returns {Object} The GeoJSON representation of the geometries
-   */
-  getGeoJSON() {
-    const geometries = this.geometries.map((d) => d.getGeoJSON());
-    if (geometries.length === 1) return geometries[0];
-    return {
-      type: "Feature",
-      geometry: this._getGeometryGeoJSON(),
-      properties: this.properties
-    };
-  }
-  _getGeometryGeoJSON() {
-    const geometries = this.geometries.map((d) => d.getGeoJSON());
-    if (geometries.length === 0) throw new Error("Feature has no geometries");
-    if (geometries.length === 1) return geometries[0];
-    if (geometries[0].type === "Polygon") {
-      return {
-        type: "MultiPolygon",
-        coordinates: geometries.map((d) => d.coordinates)
-      };
-    } else if (geometries[0].type === "LineString") {
-      return {
-        type: "MultiLineString",
-        coordinates: geometries.map((d) => d.coordinates)
-      };
-    } else if (geometries[0].type === "Point") {
-      return {
-        type: "MultiPoint",
-        coordinates: geometries.map((d) => d.coordinates)
-      };
-    }
-    throw new Error("Could not determine geometry type");
-  }
-}
-export {
-  Feature
-};

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

@@ -1,20 +0,0 @@
-/**
- * Class representing a collection of map features.
- * @class
- * @property {import("./Feature").Feature[]} features - The features in the feature collection
- */
-export class FeatureCollection {
-    /**
-     * Create a feature collection from GeoJSON features.
-     * @param {Object[]} geoJSON - The GeoJSON object
-     * @returns {FeatureCollection} The feature collection
-     */
-    static fromGeoJSON(geoJSON: any[]): FeatureCollection;
-    /**
-     * Create a feature collection.
-     * @constructor
-     * @param {import("./Feature").Feature[]} features - The features to put in the collection
-     */
-    constructor(features: import('./Feature').Feature[]);
-    features: import('./Feature').Feature[];
-}

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

@@ -1,23 +0,0 @@
-import { GeoJSON } from "./formats/GeoJSON.js";
-class FeatureCollection {
-  /**
-   * Create a feature collection from GeoJSON features.
-   * @param {Object[]} geoJSON - The GeoJSON object
-   * @returns {FeatureCollection} The feature collection
-   */
-  static fromGeoJSON(geoJSON) {
-    const features = new GeoJSON().readFeaturesFromObject(geoJSON);
-    return new FeatureCollection(features);
-  }
-  /**
-   * Create a feature collection.
-   * @constructor
-   * @param {import("./Feature").Feature[]} features - The features to put in the collection
-   */
-  constructor(features) {
-    this.features = features;
-  }
-}
-export {
-  FeatureCollection
-};

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

@@ -1,69 +0,0 @@
-import { View } from './View';
-import { Dispatcher } from './events';
-import { MapRenderer } from './renderers/MapRenderer';
-/**
- * Map component that renders into a canvas
- * It has built-in support for zooming and panning, as well as support for vector layers
- * @constructor
- * @param {Object} config - The configuration for the map.
- * @param {Object} config.view - The view configuration for the map.
- * @param {boolean} config.debug - Whether to enable debug mode or not.
- * @param {HTMLElement} config.target - The target element to render the map into.
- */
-export class Map {
-    constructor(config: any);
-    options: any;
-    view: View;
-    target: any;
-    layers: any[];
-    dispatcher: Dispatcher;
-    _viewport: HTMLDivElement;
-    _renderer: MapRenderer;
-    _resizeObserver: ResizeObserver;
-    destroy(): void;
-    /** PUBLIC GETTERS */
-    get size(): number[];
-    get viewPort(): HTMLDivElement;
-    get zoomScale(): any;
-    get isTransitioning(): boolean;
-    /** PUBLIC METHODS */
-    collaborativeGesturesEnabled(enabled: any): any;
-    _collaborativeGesturesEnabled: any;
-    onFilterEvent(callback: any): void;
-    _filterEventCallback: any;
-    fitObject(geoJSON: any): void;
-    addLayer(layer: any): void;
-    addLayers(layers: any): void;
-    setLayers(layers: any): void;
-    removeLayer(layer: any): void;
-    zoomIn(options: any): Promise<any>;
-    zoomOut(options: any): Promise<any>;
-    zoomTo(zoomScale: any, options?: {
-        duration: number;
-    }): Promise<any>;
-    zoomToFeature(feature: any, focalPoint: any, padding?: {
-        top: number;
-        right: number;
-        bottom: number;
-        left: number;
-    }): void;
-    /** @param {import("./layers").Layer[]} layers */
-    hasLayers(layers: import('./layers').Layer[]): boolean;
-    resetZoom(options: any): Promise<any>;
-    findFeatures(point: any): any[];
-    changed(): void;
-    transition(options: {
-        duration: number;
-    }, callback: any): Promise<any>;
-    _isTransitioning: boolean;
-    /** PRIVATE METHODS */
-    _updateSize(): void;
-    _size: number[];
-    _updateViewportSize(size: any): void;
-    _createZoomBehaviour(viewPortSize: any): void;
-    _zoomBypassKey: string;
-    _zoomBehaviour: any;
-    _requestRender(): void;
-    _animationFrameRequestID: number;
-    _renderFrame(): void;
-}

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

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

@@ -1,136 +0,0 @@
-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[];
-    };
-}