@guardian/interactive-component-library 0.5.7 → 0.7.0

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

@@ -1,6 +1,15 @@
-export function ZoomControl({ resetEnabled, onZoomIn, onZoomOut, onReset }: {
-    resetEnabled: any;
-    onZoomIn: any;
-    onZoomOut: any;
-    onReset: any;
+/**
+ * @param {Object} props
+ * @param {boolean} props.resetEnabled
+ * @param {boolean} props.resetVisible
+ * @param {(event: MouseEvent) => {}} props.onZoomIn
+ * @param {(event: MouseEvent) => {}} props.onZoomOut
+ * @param {(event: MouseEvent) => {}} props.onReset
+ */
+export function ZoomControl({ resetEnabled, resetVisible, onZoomIn, onZoomOut, onReset, }: {
+    resetEnabled: boolean;
+    resetVisible: boolean;
+    onZoomIn: (event: MouseEvent) => {};
+    onZoomOut: (event: MouseEvent) => {};
+    onReset: (event: MouseEvent) => {};
 }): import("preact").JSX.Element;

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

@@ -3,7 +3,13 @@ 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 }) {
+function ZoomControl({
+  resetEnabled,
+  resetVisible,
+  onZoomIn,
+  onZoomOut,
+  onReset
+}) {
   const _onZoomIn = (event) => {
     event.stopPropagation();
     onZoomIn(event);
@@ -23,6 +29,7 @@ function ZoomControl({ resetEnabled, onZoomIn, onZoomOut, onReset }) {
       "button",
       {
         className: styles.button,
+        style: { display: resetVisible ? "block" : "none" },
         onClick: _onReset,
         disabled: !resetEnabled,
         children: /* @__PURE__ */ jsx(

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

@@ -18,6 +18,7 @@ export class TextLayer {
      * @param {number} [params.minZoom=0]
      * @param {number} [params.opacity=1]
      * @param {boolean} [params.declutter=true]
+     * @param {number} [params.declutterBoundingBoxPadding=2] Padding added to the bounding box around the TextLayer, that's used to detect collisions for decluttering.
      * @param {boolean} [params.drawCollisionBoxes=false]
      * @param {(feature: import('../Feature').Feature, event: MouseEvent) => void} [params.onClick]
      * @param {(feature: import('../Feature').Feature, event: MouseEvent) => (() => void) | void} [params.onHover]
@@ -29,12 +30,13 @@ export class TextLayer {
      *
      * The provided style function will be called with the `isHovering` parameter set to `true` for the hovered feature.
      */
-    constructor({ source, style, minZoom, opacity, declutter, drawCollisionBoxes, onClick, onHover, restyleOnHover, }: {
+    constructor({ source, style, minZoom, opacity, declutter, declutterBoundingBoxPadding, drawCollisionBoxes, onClick, onHover, restyleOnHover, }: {
         source: VectorSource;
         style?: Style | (() => Style);
         minZoom?: number;
         opacity?: number;
         declutter?: boolean;
+        declutterBoundingBoxPadding?: number;
         drawCollisionBoxes?: boolean;
         onClick?: (feature: import('../Feature').Feature, event: MouseEvent) => void;
         onHover?: (feature: import('../Feature').Feature, event: MouseEvent) => (() => void) | void;
@@ -69,6 +71,11 @@ export class TextLayer {
      * @public
      */
     public drawCollisionBoxes: boolean;
+    /**
+     * @type {number}
+     * @public
+     */
+    public declutterBoundingBoxPadding: number;
     onClick: (feature: import('../Feature').Feature, event: MouseEvent) => void;
     onHover: (feature: import('../Feature').Feature, event: MouseEvent) => (() => void) | void;
     restyleOnHover: boolean;
@@ -95,7 +102,7 @@ export class TextLayer {
 }
 export namespace TextLayer {
     /** @param {TextLayerComponentProps} props */
-    function Component({ features: featureCollection, style, minZoom, opacity, declutter, drawCollisionBoxes, onClick, onHover, restyleOnHover, }: TextLayerComponentProps): any;
+    function Component({ features: featureCollection, style, minZoom, opacity, declutter, declutterBoundingBoxPadding, drawCollisionBoxes, onClick, onHover, restyleOnHover, }: TextLayerComponentProps): any;
     namespace Component {
         let displayName: string;
     }

package/dist/components/molecules/canvas-map/lib/layers/TextLayer.js

@@ -16,6 +16,7 @@ class TextLayer {
     minZoom,
     opacity,
     declutter,
+    declutterBoundingBoxPadding,
     drawCollisionBoxes,
     onClick,
     onHover,
@@ -33,6 +34,7 @@ class TextLayer {
           minZoom,
           opacity,
           declutter,
+          declutterBoundingBoxPadding,
           drawCollisionBoxes,
           onClick,
           onHover,
@@ -40,7 +42,17 @@ class TextLayer {
         });
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [featureCollection, minZoom, opacity, declutter, drawCollisionBoxes]
+      [
+        featureCollection,
+        minZoom,
+        opacity,
+        declutter,
+        declutterBoundingBoxPadding,
+        drawCollisionBoxes,
+        onClick,
+        onHover,
+        restyleOnHover
+      ]
     );
     useEffect(() => {
       registerLayer(layer, this);
@@ -69,6 +81,7 @@ class TextLayer {
    * @param {number} [params.minZoom=0]
    * @param {number} [params.opacity=1]
    * @param {boolean} [params.declutter=true]
+   * @param {number} [params.declutterBoundingBoxPadding=2] Padding added to the bounding box around the TextLayer, that's used to detect collisions for decluttering.
    * @param {boolean} [params.drawCollisionBoxes=false]
    * @param {(feature: import('../Feature').Feature, event: MouseEvent) => void} [params.onClick]
    * @param {(feature: import('../Feature').Feature, event: MouseEvent) => (() => void) | void} [params.onHover]
@@ -86,6 +99,7 @@ class TextLayer {
     minZoom = 0,
     opacity = 1,
     declutter = true,
+    declutterBoundingBoxPadding = 2,
     drawCollisionBoxes = false,
     onClick,
     onHover,
@@ -97,6 +111,7 @@ class TextLayer {
     this.opacity = opacity;
     this.declutter = declutter;
     this.drawCollisionBoxes = drawCollisionBoxes;
+    this.declutterBoundingBoxPadding = declutterBoundingBoxPadding;
     this.onClick = onClick;
     this.onHover = onHover;
     this.restyleOnHover = restyleOnHover;

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

@@ -43,11 +43,11 @@ export class TextLayerRenderer {
     }, textStyle: import('../styles/Text').Text, position: {
         x: number;
         y: number;
-    }): {
+    }, padding: any): {
         minX: number;
         minY: number;
-        maxX: number;
-        maxY: number;
+        maxX: any;
+        maxY: any;
     };
     getCollisionBoxElement(bbox: any): HTMLDivElement;
     /**

package/dist/components/molecules/canvas-map/lib/renderers/TextLayerRenderer.js

@@ -67,10 +67,15 @@ class TextLayerRenderer {
         featureStyle.text,
         position
       );
-      const bbox = this.getElementBBox(elementDimens, featureStyle.text, {
-        x: relativeX * viewPortSize[0],
-        y: relativeY * viewPortSize[1]
-      });
+      const bbox = this.getElementBBox(
+        elementDimens,
+        featureStyle.text,
+        {
+          x: relativeX * viewPortSize[0],
+          y: relativeY * viewPortSize[1]
+        },
+        this.layer.declutterBoundingBoxPadding
+      );
       if (declutterTree) {
         if (declutterTree.collides(bbox)) {
           continue;
@@ -187,12 +192,12 @@ class TextLayerRenderer {
    * @param {import("../styles/Text").Text} textStyle
    * @param {{x: number, y: number}} position
    */
-  getElementBBox(dimens, textStyle, position) {
+  getElementBBox(dimens, textStyle, position, padding) {
     const collisionPadding = {
-      top: 2,
-      right: 2,
-      bottom: 2,
-      left: 2
+      top: padding,
+      right: padding,
+      bottom: padding,
+      left: padding
     };
     const { x: translateX, y: translateY } = textStyle.getTranslation(
       dimens.width,

package/package.json

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