@guardian/interactive-component-library 0.6.0 → 0.7.1

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]
@@ -25,16 +26,20 @@ export class TextLayer {
      * called with the hovered feature, and the mouse event.
      *
      * The callback can optionally return a cleanup function that will be called when the mouse leaves this feature.
+     *
+     * Note that this callback is attached to the "pointerover" and "pointerout" events, so touch
+     * events will not trigger it.
      * @param {boolean} [params.restyleOnHover] If true, the layer will re-render when the mouse hovers over a feature.
      *
      * 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 +74,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 +105,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]
@@ -76,6 +89,9 @@ class TextLayer {
    * called with the hovered feature, and the mouse event.
    *
    * The callback can optionally return a cleanup function that will be called when the mouse leaves this feature.
+   *
+   * Note that this callback is attached to the "pointerover" and "pointerout" events, so touch
+   * events will not trigger it.
    * @param {boolean} [params.restyleOnHover] If true, the layer will re-render when the mouse hovers over a feature.
    *
    * The provided style function will be called with the `isHovering` parameter set to `true` for the hovered feature.
@@ -86,6 +102,7 @@ class TextLayer {
     minZoom = 0,
     opacity = 1,
     declutter = true,
+    declutterBoundingBoxPadding = 2,
     drawCollisionBoxes = false,
     onClick,
     onHover,
@@ -97,6 +114,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,
@@ -271,7 +276,7 @@ class TextLayerRenderer {
       });
     }
     if (this.layer.onHover) {
-      this._element.addEventListener("mouseover", (event) => {
+      this._element.addEventListener("pointerover", (event) => {
         if (!event.target) return;
         const hoveredFeature = this.layer.source.getFeatures().find((feature) => {
           var _a;
@@ -280,14 +285,14 @@ class TextLayerRenderer {
         if (!hoveredFeature) return;
         const onHoverLeave = this.layer.onHover(hoveredFeature, event);
         if (onHoverLeave) {
-          this._element.addEventListener("mouseout", onHoverLeave, {
+          this._element.addEventListener("pointerout", onHoverLeave, {
             once: true
           });
         }
       });
     }
     if (this.layer.restyleOnHover) {
-      this._element.addEventListener("mouseover", (event) => {
+      this._element.addEventListener("pointerover", (event) => {
         if (!event.target) return;
         const hoveredFeature = this.layer.source.getFeatures().find((feature) => {
           var _a;
@@ -297,7 +302,7 @@ class TextLayerRenderer {
         this._hoveredFeature = hoveredFeature;
         this.layer.dispatcher.dispatch(MapEvent.CHANGE);
         this._element.addEventListener(
-          "mouseout",
+          "pointerout",
           () => {
             this._hoveredFeature = void 0;
             this.layer.dispatcher.dispatch(MapEvent.CHANGE);

package/package.json

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