@guardian/interactive-component-library 0.2.0 → 0.3.1

package/dist/interactive-component-library.js

@@ -3663,9 +3663,33 @@ class Extent {
     this.maxX = maxX;
     this.maxY = maxY;
   }
+  get width() {
+    return this.maxX - this.minX;
+  }
+  get height() {
+    return this.maxY - this.minY;
+  }
+  /**
+   * Turn extent into a flat array of numbers: [minX, minY, maxX, maxY].
+   *
+   * @returns {[number, number, number, number]} - The extent as a flat array
+   */
   flat() {
     return [this.minX, this.minY, this.maxX, this.maxY];
   }
+  /**
+   * Create a new extent where the coordinates are multiplied by scaleFactor.
+   *
+   * @param {number} scaleFactor
+   * @returns {Extent} - The scaled
+   */
+  scale(scaleFactor) {
+    const scaled = (
+      /** @type {ExtentLike} */
+      [this.minX, this.minY, this.maxX, this.maxY].map((d2) => d2 * scaleFactor)
+    );
+    return Extent.convert(scaled);
+  }
   /**
    * Check if the passed coordinate is contained or on the edge of the extent.
    *
@@ -3928,7 +3952,10 @@ class View {
     const baseResolution = resolutionForExtent(baseExtent, this.viewPortSize);
     return baseResolution;
   }
-  // calculates the upper and lower zoom scales
+  /**
+   * Get the lower and upper zoom scales
+   * @returns {[number, number]} - The lower and upper zoom scales
+   */
   get scaleExtent() {
     const maxScale = zoomLevelToZoomScale(this.maxZoom, this.baseResolution);
     return [1, maxScale];
@@ -3959,27 +3986,22 @@ class View {
     }
   }
   /**
-   *
    * @param {import("./formats/GeoJSON").GeoJSONFeature} geoJSON
    */
   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]
-    ];
+  /**
+   * Returns extent in projection coordinates
+   *
+   * @param {Extent} extent
+   * @returns {Extent} - The extent relative to the current viewport
+   */
+  projectExtent(extent) {
+    const [minX, minY] = this.projection([extent.minX, extent.minY]);
+    const [maxX, maxY] = this.projection([extent.maxX, extent.maxY]);
+    return new Extent(minX, minY, maxX, maxY).scale(1 / this.pixelRatio);
   }
   invert(point) {
     const { projection, pixelRatio, transform } = this.getState();
@@ -6014,7 +6036,12 @@ let Map$1 = class Map2 {
   }
   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 {
+      minX: featureX,
+      minY: featureY,
+      width: featureWidth,
+      height: featureHeight
+    } = this.view.projectExtent(extent);
     const [viewPortWidth, viewPortHeight] = this.view.viewPortSize;
     const paddedViewPortWidth = viewPortWidth - padding.left - padding.right;
     const paddedViewPortHeight = viewPortHeight - padding.top - padding.bottom;
@@ -6477,7 +6504,12 @@ class Polygon extends Geometry {
 class Point extends Geometry {
   constructor({ type = "Point", coordinates }) {
     super({ type, extent: null, coordinates });
-    this.extent = [...coordinates, ...coordinates];
+    this.extent = new Extent(
+      coordinates[0],
+      coordinates[1],
+      coordinates[0],
+      coordinates[1]
+    );
   }
   _getProjected(projection) {
     return {
@@ -7630,90 +7662,90 @@ const styles$2 = {
   mobileHelpText: mobileHelpText$1
 };
 const mobileHelpText = "Use two fingers to zoom";
-Map$1.Component = forwardRef(
-  ({
-    config,
-    inModalState = false,
-    onLoad,
-    children
-  }, ref) => {
-    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$1({
-        ...config,
-        target: targetRef.current
-      });
-      map2.collaborativeGesturesEnabled(true);
-      setMap(map2);
-      if (ref) {
-        ref.current = map2;
+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$1({
+      ...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;
       }
-      if (onLoad) {
-        onLoad(map2);
+    };
+  }, [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);
       }
-      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";
+    });
+    return () => {
+      if (timeoutID) clearTimeout(timeoutID);
+    };
+  }, [map]);
+  useEffect(() => {
+    if (!map) return;
+    map.collaborativeGesturesEnabled(!inModalState);
+  }, [map, inModalState]);
+  return /* @__PURE__ */ jsxs("figure", { ref: targetRef, className: styles$2.mapContainer, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: styles$2.helpTextContainer,
+        style: { opacity: showHelpText ? 1 : 0 },
+        "aria-hidden": true,
+        children: [
+          /* @__PURE__ */ jsx("p", { className: [styles$2.helpText, styles$2.desktopHelpText].join(" "), children: zoomHelpText }),
+          /* @__PURE__ */ jsx("p", { className: [styles$2.helpText, styles$2.mobileHelpText].join(" "), children: mobileHelpText })
+        ]
       }
-      setZoomHelpText(zoomHelpText2);
-      return () => {
-        map2.destroy();
-        setMap(null);
-        if (ref) {
-          ref.current = null;
-        }
-      };
-    }, [config, onLoad, ref]);
-    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$2.mapContainer, children: [
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: styles$2.helpTextContainer,
-          style: { opacity: showHelpText ? 1 : 0 },
-          "aria-hidden": true,
-          children: [
-            /* @__PURE__ */ jsx("p", { className: [styles$2.helpText, styles$2.desktopHelpText].join(" "), children: zoomHelpText }),
-            /* @__PURE__ */ jsx("p", { className: [styles$2.helpText, styles$2.mobileHelpText].join(" "), children: mobileHelpText })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(MapProvider, { map, children })
-    ] });
-  }
-);
+    ),
+    /* @__PURE__ */ jsx(MapProvider, { map, children })
+  ] });
+};
+Map$1.Component = Component;
 const optionPicker = "_optionPicker_1b561_1";
 const title$1 = "_title_1b561_13";
 const options = "_options_1b561_20";