@guardian/interactive-component-library 0.5.0 → 0.5.1

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

@@ -5,4 +5,5 @@ export type MapComponentProps = {
     onLoad?: (map: Map) => void;
     children: import('preact').ComponentChildren;
     mapRef?: import('preact').Ref<Map>;
+    allowZoomPan?: boolean;
 };

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

@@ -9,7 +9,8 @@ const Component = ({
   inModalState = false,
   onLoad,
   children,
-  mapRef
+  mapRef,
+  allowZoomPan = true
 }) => {
   const targetRef = useRef();
   const [map, setMap] = useState(
@@ -21,11 +22,12 @@ const Component = ({
   useEffect(() => {
     var _a;
     if (!targetRef.current) return;
+    config.allowZoomPan = allowZoomPan;
     const map2 = new Map({
       ...config,
       target: targetRef.current
     });
-    map2.collaborativeGesturesEnabled(true);
+    if (allowZoomPan) map2.collaborativeGesturesEnabled(true);
     setMap(map2);
     if (mapRef) {
       mapRef.current = map2;
@@ -50,9 +52,9 @@ const Component = ({
         mapRef.current = null;
       }
     };
-  }, [config, onLoad, mapRef]);
+  }, [config, onLoad, mapRef, allowZoomPan]);
   useEffect(() => {
-    if (!map) return;
+    if (!map || !allowZoomPan) return;
     let timeoutID;
     map.onFilterEvent((showHelpText2) => {
       if (timeoutID) clearTimeout(timeoutID);
@@ -66,13 +68,13 @@ const Component = ({
     return () => {
       if (timeoutID) clearTimeout(timeoutID);
     };
-  }, [map]);
+  }, [map, allowZoomPan]);
   useEffect(() => {
-    if (!map) return;
+    if (!map || !allowZoomPan) return;
     map.collaborativeGesturesEnabled(!inModalState);
-  }, [map, inModalState]);
+  }, [map, inModalState, allowZoomPan]);
   return /* @__PURE__ */ jsxs("figure", { ref: targetRef, className: styles.mapContainer, children: [
-    /* @__PURE__ */ jsxs(
+    allowZoomPan && /* @__PURE__ */ jsxs(
       "div",
       {
         className: styles.helpTextContainer,

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

@@ -11,16 +11,20 @@ export class Map {
      * @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 {boolean} config.allowZoomPan - Whether to enable zoom and pan functionality or not.
      * @param {HTMLElement} config.target - The target element to render the map into.
      */
     constructor(config: {
         view: any;
         debug: boolean;
+        allowZoomPan: boolean;
         target: HTMLElement;
     });
+    allowZoomPan: boolean;
     options: {
         view: any;
         debug: boolean;
+        allowZoomPan: boolean;
         target: HTMLElement;
     };
     view: View;

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

@@ -15,12 +15,14 @@ class Map {
    * @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 {boolean} config.allowZoomPan - Whether to enable zoom and pan functionality or not.
    * @param {HTMLElement} config.target - The target element to render the map into.
    */
   constructor(config) {
     if (config.debug) {
       console.log("Map config", config);
     }
+    this.allowZoomPan = config.allowZoomPan;
     this.options = config;
     this.view = new View(config.view, config.debug);
     this.target = config.target;
@@ -236,6 +238,9 @@ class Map {
       }
       return (!event.ctrlKey || event.type === "wheel") && !event.button;
     }).on("zoom", (event) => {
+      if (!this.allowZoomPan) {
+        return;
+      }
       this.view.transform = event.transform;
       this._requestRender();
       this.dispatcher.dispatch(MapEvent.ZOOM, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@guardian/interactive-component-library",
   "private": false,
-  "version": "0.5.0",
+  "version": "0.5.1",
   "packageManager": "pnpm@8.4.0",
   "repository": {
     "type": "git",