@guardian/interactive-component-library 0.2.0 → 0.3.1

package/dist/interactive-component-library.umd.cjs

@@ -3658,9 +3658,33 @@
       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.
      *
@@ -3923,7 +3947,10 @@
       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];
@@ -3954,27 +3981,22 @@
       }
     }
     /**
-     *
      * @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();
@@ -6009,7 +6031,12 @@
     }
     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;
@@ -6472,7 +6499,12 @@
   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 {
@@ -7625,90 +7657,90 @@
     mobileHelpText: mobileHelpText$1
   };
   const mobileHelpText = "Use two fingers to zoom";
-  Map$1.Component = compat.forwardRef(
-    ({
-      config,
-      inModalState = false,
-      onLoad,
-      children
-    }, ref) => {
-      const targetRef = hooks.useRef();
-      const [map, setMap] = hooks.useState(
-        /** @type {Map | null} */
-        null
-      );
-      const [zoomHelpText, setZoomHelpText] = hooks.useState("");
-      const [showHelpText, setShowHelpText] = hooks.useState(false);
-      hooks.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 = hooks.useRef();
+    const [map, setMap] = hooks.useState(
+      /** @type {Map | null} */
+      null
+    );
+    const [zoomHelpText, setZoomHelpText] = hooks.useState("");
+    const [showHelpText, setShowHelpText] = hooks.useState(false);
+    hooks.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]);
+    hooks.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]);
+    hooks.useEffect(() => {
+      if (!map) return;
+      map.collaborativeGesturesEnabled(!inModalState);
+    }, [map, inModalState]);
+    return /* @__PURE__ */ jsxRuntime.jsxs("figure", { ref: targetRef, className: styles$2.mapContainer, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: styles$2.helpTextContainer,
+          style: { opacity: showHelpText ? 1 : 0 },
+          "aria-hidden": true,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: [styles$2.helpText, styles$2.desktopHelpText].join(" "), children: zoomHelpText }),
+            /* @__PURE__ */ jsxRuntime.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]);
-      hooks.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]);
-      hooks.useEffect(() => {
-        if (!map) return;
-        map.collaborativeGesturesEnabled(!inModalState);
-      }, [map, inModalState]);
-      return /* @__PURE__ */ jsxRuntime.jsxs("figure", { ref: targetRef, className: styles$2.mapContainer, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: styles$2.helpTextContainer,
-            style: { opacity: showHelpText ? 1 : 0 },
-            "aria-hidden": true,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: [styles$2.helpText, styles$2.desktopHelpText].join(" "), children: zoomHelpText }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: [styles$2.helpText, styles$2.mobileHelpText].join(" "), children: mobileHelpText })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(MapProvider, { map, children })
-      ] });
-    }
-  );
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(MapProvider, { map, children })
+    ] });
+  };
+  Map$1.Component = Component;
   const optionPicker = "_optionPicker_1b561_1";
   const title$1 = "_title_1b561_13";
   const options = "_options_1b561_20";