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

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './particles';
+export * from './molecules';
+export * from './organisms';

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

@@ -0,0 +1,8 @@
+import { Map } from './lib/Map';
+export type MapComponentProps = {
+    config: any;
+    inModalState?: boolean;
+    onLoad?: (map: Map) => void;
+    children: import('preact').ComponentChildren;
+    mapRef?: import('preact').Ref<Map>;
+};

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

@@ -0,0 +1,90 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import { useRef, useState, useEffect } from "preact/hooks";
+import { Map } from "./lib/Map.js";
+import { MapProvider } from "./context/MapContext.js";
+import styles from "./style.module.scss.js";
+const mobileHelpText = "Use two fingers to zoom";
+const Component = ({
+  config,
+  inModalState = false,
+  onLoad,
+  children,
+  mapRef
+}) => {
+  const targetRef = useRef();
+  const [map, setMap] = useState(
+    /** @type {Map | null} */
+    null
+  );
+  const [zoomHelpText, setZoomHelpText] = useState("");
+  const [showHelpText, setShowHelpText] = useState(false);
+  useEffect(() => {
+    var _a;
+    if (!targetRef.current) return;
+    const map2 = new Map({
+      ...config,
+      target: targetRef.current
+    });
+    map2.collaborativeGesturesEnabled(true);
+    setMap(map2);
+    if (mapRef) {
+      mapRef.current = map2;
+    }
+    if (onLoad) {
+      onLoad(map2);
+    }
+    let zoomHelpText2 = "";
+    if (
+      // @ts-ignore
+      ((_a = navigator.userAgentData) == null ? void 0 : _a.mobile) || navigator.userAgent.indexOf("Mobile") !== -1
+    ) {
+      zoomHelpText2 = mobileHelpText;
+    } else {
+      zoomHelpText2 = navigator.userAgent.indexOf("Mac") !== -1 ? "Use ⌘ + scroll to zoom" : "Use Ctrl + scroll to zoom";
+    }
+    setZoomHelpText(zoomHelpText2);
+    return () => {
+      map2.destroy();
+      setMap(null);
+      if (mapRef) {
+        mapRef.current = null;
+      }
+    };
+  }, [config, onLoad, mapRef]);
+  useEffect(() => {
+    if (!map) return;
+    let timeoutID;
+    map.onFilterEvent((showHelpText2) => {
+      if (timeoutID) clearTimeout(timeoutID);
+      setShowHelpText(showHelpText2);
+      if (showHelpText2) {
+        timeoutID = setTimeout(() => {
+          setShowHelpText(false);
+        }, 1e3);
+      }
+    });
+    return () => {
+      if (timeoutID) clearTimeout(timeoutID);
+    };
+  }, [map]);
+  useEffect(() => {
+    if (!map) return;
+    map.collaborativeGesturesEnabled(!inModalState);
+  }, [map, inModalState]);
+  return /* @__PURE__ */ jsxs("figure", { ref: targetRef, className: styles.mapContainer, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: styles.helpTextContainer,
+        style: { opacity: showHelpText ? 1 : 0 },
+        "aria-hidden": true,
+        children: [
+          /* @__PURE__ */ jsx("p", { className: [styles.helpText, styles.desktopHelpText].join(" "), children: zoomHelpText }),
+          /* @__PURE__ */ jsx("p", { className: [styles.helpText, styles.mobileHelpText].join(" "), children: mobileHelpText })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(MapProvider, { map, children })
+  ] });
+};
+Map.Component = Component;

package/dist/components/molecules/canvas-map/context/MapContext.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @param {Object} params
+ * @param {import('../lib/Map').Map} params.map
+ * @param {import('preact').ComponentChildren} params.children
+ */
+export function MapProvider({ map, children }: {
+    map: import('../lib/Map').Map;
+    children: import('preact').ComponentChildren;
+}): import("preact").JSX.Element;
+export type MapContext = {
+    registerLayer: ((layer: import('../lib/layers').Layer) => void) | null;
+};
+/**
+ * @typedef {{ registerLayer: ((layer: import("../lib/layers").Layer) => void) | null }} MapContext
+ */
+/**
+ * @type {import('preact').Context<MapContext | null>}
+ */
+export const MapContext: import('preact').Context<MapContext | null>;

package/dist/components/molecules/canvas-map/context/MapContext.js

@@ -0,0 +1,20 @@
+import { jsx } from "preact/jsx-runtime";
+import { createContext } from "preact";
+import { useEffect } from "preact/hooks";
+const MapContext = createContext(null);
+function MapProvider({ map, children }) {
+  const registeredLayers = [];
+  const registerLayer = (layer) => {
+    registeredLayers.push(layer);
+  };
+  useEffect(() => {
+    if (map && !map.hasLayers(registeredLayers)) {
+      map.setLayers(registeredLayers);
+    }
+  }, [map, children]);
+  return /* @__PURE__ */ jsx(MapContext.Provider, { value: { registerLayer }, children });
+}
+export {
+  MapContext,
+  MapProvider
+};

package/dist/components/molecules/canvas-map/controls/ZoomControl.d.ts

@@ -0,0 +1,6 @@
+export function ZoomControl({ resetEnabled, onZoomIn, onZoomOut, onReset }: {
+    resetEnabled: any;
+    onZoomIn: any;
+    onZoomOut: any;
+    onReset: any;
+}): import("preact").JSX.Element;

package/dist/components/molecules/canvas-map/controls/ZoomControl.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import { IconMinus } from "./icons/minus.js";
+import { IconPlus } from "./icons/plus.js";
+import { IconReset } from "./icons/reset.js";
+import styles from "./style.module.css.js";
+function ZoomControl({ resetEnabled, onZoomIn, onZoomOut, onReset }) {
+  const _onZoomIn = (event) => {
+    event.stopPropagation();
+    onZoomIn(event);
+  };
+  const _onZoomOut = (event) => {
+    event.stopPropagation();
+    onZoomOut(event);
+  };
+  const _onReset = (event) => {
+    event.stopPropagation();
+    onReset(event);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: styles.zoomControl, children: [
+    /* @__PURE__ */ jsx("button", { className: styles.button, onClick: _onZoomIn, children: /* @__PURE__ */ jsx(IconPlus, {}) }),
+    /* @__PURE__ */ jsx("button", { className: styles.button, onClick: _onZoomOut, children: /* @__PURE__ */ jsx(IconMinus, {}) }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: styles.button,
+        onClick: _onReset,
+        disabled: !resetEnabled,
+        children: /* @__PURE__ */ jsx(
+          IconReset,
+          {
+            fill: resetEnabled ? "var(--primary-text-color)" : "var(--news-grey-03)"
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  ZoomControl
+};

package/dist/components/molecules/canvas-map/controls/icons/index.d.ts

@@ -0,0 +1,3 @@
+export * from './minus';
+export * from './plus';
+export * from './reset';

package/dist/components/molecules/canvas-map/controls/icons/minus.d.ts

@@ -0,0 +1 @@
+export function IconMinus(): import("preact").JSX.Element;

package/dist/components/molecules/canvas-map/controls/icons/minus.js

@@ -0,0 +1,25 @@
+import { jsx } from "preact/jsx-runtime";
+function IconMinus() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "22",
+      height: "4",
+      viewBox: "0 0 22 4",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M0 0.75V3.24999H21.9999V0.75H0Z",
+          fill: "var(--news-grey-01)"
+        }
+      )
+    }
+  );
+}
+export {
+  IconMinus
+};

package/dist/components/molecules/canvas-map/controls/icons/plus.d.ts

@@ -0,0 +1 @@
+export function IconPlus(): import("preact").JSX.Element;

package/dist/components/molecules/canvas-map/controls/icons/plus.js

@@ -0,0 +1,25 @@
+import { jsx } from "preact/jsx-runtime";
+function IconPlus() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "22",
+      height: "22",
+      viewBox: "0 0 22 22",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M9.79997 12.2L10.225 21.9999H11.75L12.2 12.2L21.9999 11.75V10.225L12.2 9.79997L11.75 0H10.225L9.79997 9.79997L0 10.225V11.75L9.79997 12.2Z",
+          fill: "var(--news-grey-01)"
+        }
+      )
+    }
+  );
+}
+export {
+  IconPlus
+};

package/dist/components/molecules/canvas-map/controls/icons/reset.d.ts

@@ -0,0 +1,3 @@
+export function IconReset({ fill }: {
+    fill?: string;
+}): import("preact").JSX.Element;

package/dist/components/molecules/canvas-map/controls/icons/reset.js

@@ -0,0 +1,25 @@
+import { jsx } from "preact/jsx-runtime";
+function IconReset({ fill = "#121212" }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "40",
+      height: "40",
+      viewBox: "0 0 40 40",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M32.107 33.107L26.5535 27.5535C24.7984 29.0775 22.5069 30 20 30L19.9916 30L19.9811 30C17.4476 30 15.1269 29.0482 13.3721 27.4882C11.3038 25.6561 10 22.9803 10 20H11.8C11.8 24.5287 15.4713 28.2 20 28.2C20.0567 28.2 20.1134 28.1994 20.1698 28.1983C24.5716 28.0965 28.1587 24.4465 28.1587 19.9772C28.1587 15.467 24.4685 11.7995 19.9811 11.7995C17.407 11.7995 15.1975 12.9385 13.6713 14.7608L16.9742 15.3075V16.4465L11.1428 16.4465L10.71 16.0137V10H11.8262L12.3956 13.4396C14.218 11.3212 16.9059 10 19.9811 10C25.5164 10 30.0039 14.4647 30.0039 19.9772C30.0039 21.8429 29.4982 23.5854 28.6171 25.0771C28.4764 25.3155 28.326 25.5474 28.1666 25.7725L33.8221 31.428C33.2844 32.0212 32.7116 32.5819 32.107 33.107Z",
+          fill
+        }
+      )
+    }
+  );
+}
+export {
+  IconReset
+};

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

@@ -0,0 +1 @@
+export * from './ZoomControl';

package/dist/components/molecules/canvas-map/controls/style.module.css.js

@@ -0,0 +1,11 @@
+const zoomControl = "_zoomControl_13wd1_1";
+const button = "_button_13wd1_7";
+const styles = {
+  zoomControl,
+  button
+};
+export {
+  button,
+  styles as default,
+  zoomControl
+};

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

@@ -0,0 +1,12 @@
+export * from './lib/Map';
+export * from './controls';
+export * from './lib/Feature';
+export * from './lib/FeatureCollection';
+export * from './lib/events';
+export * from './lib/projection';
+export * from './lib/layers';
+export * from './lib/styles';
+export * from './lib/util';
+export * from './lib/interpolators';
+export * from './lib/sources/VectorSource';
+export * from './lib/formats/GeoJSON';

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

@@ -0,0 +1,44 @@
+/**
+ * Class representing a map Feature.
+ * @class
+ * @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 {Style} style - The style of the feature
+ */
+export 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 }: any);
+    id: any;
+    geometries: any;
+    properties: any;
+    style: any;
+    uid: string;
+    _getProjectedGeometries: any;
+    setGeometries(geometries: any): void;
+    _extent: any;
+    /**
+     * Get the extent of the geometries in the feature.
+  
+     * @returns {import("./util").Extent}
+     */
+    getExtent(): import('./util').Extent;
+    getProjectedGeometries(projection: any): any;
+    getStyleFunction(): any;
+    containsCoordinate(coordinate: any): boolean;
+    clone(): Feature;
+    /**
+     * Returns the geometries as a GeoJSON object
+     * @returns {Object} The GeoJSON representation of the geometries
+     */
+    getGeoJSON(): any;
+    _getGeometryGeoJSON(): any;
+}

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

@@ -0,0 +1,113 @@
+import { createUid } from "./util/uid.js";
+import { combineExtents, containsCoordinate } from "./util/extent.js";
+import { polygonContains } from "d3-polygon";
+import { memoise } from "./util/memoise.js";
+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();
+    this._getProjectedGeometries = memoise((projection) => {
+      return this.geometries.map(
+        (d) => d.getProjected(projection, projection.revision)
+      );
+    }).bind(this);
+  }
+  setGeometries(geometries) {
+    this.geometries = geometries;
+    this._extent = void 0;
+  }
+  /**
+     * Get the extent of the geometries in the feature.
+  
+     * @returns {import("./util").Extent}
+     */
+  getExtent() {
+    if (this._extent) return this._extent;
+    const extent = this.geometries.reduce((combinedExtent, geometry) => {
+      if (!combinedExtent) return geometry.extent;
+      return combineExtents(geometry.extent, combinedExtent);
+    }, null);
+    this._extent = extent;
+    return extent;
+  }
+  getProjectedGeometries(projection) {
+    return this._getProjectedGeometries(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 geometry of this.geometries) {
+      if (polygonContains(geometry.getOuterRing(), 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

@@ -0,0 +1,21 @@
+/**
+ * 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 | Object[]} geoJSON - The GeoJSON object
+     * @param {import("./formats/GeoJSON").GeoJSONParseOptions} [parseOptions] - Options for parsing the GeoJSON object
+     * @returns {FeatureCollection} The feature collection
+     */
+    static fromGeoJSON(geoJSON: any | any[], parseOptions?: import('./formats/GeoJSON').GeoJSONParseOptions): 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

@@ -0,0 +1,24 @@
+import { GeoJSON } from "./formats/GeoJSON.js";
+class FeatureCollection {
+  /**
+   * Create a feature collection from GeoJSON features.
+   * @param {Object | Object[]} geoJSON - The GeoJSON object
+   * @param {import("./formats/GeoJSON").GeoJSONParseOptions} [parseOptions] - Options for parsing the GeoJSON object
+   * @returns {FeatureCollection} The feature collection
+   */
+  static fromGeoJSON(geoJSON, parseOptions) {
+    const features = new GeoJSON(parseOptions).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

@@ -0,0 +1,82 @@
+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
+ */
+export class Map {
+    /**
+     * @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.
+     */
+    constructor(config: {
+        view: any;
+        debug: boolean;
+        target: HTMLElement;
+    });
+    options: {
+        view: any;
+        debug: boolean;
+        target: HTMLElement;
+    };
+    view: View;
+    target: HTMLElement;
+    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;
+}
+export namespace Map {
+    let Component: any;
+}