@guardian/interactive-component-library 0.5.3 → 0.5.4

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

@@ -19,14 +19,26 @@ export class TextLayer {
      * @param {number} [params.opacity=1]
      * @param {boolean} [params.declutter=true]
      * @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]
+     * A callback that's called when the mouse hovers over a feature in this layer. The callback is
+     * 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.
+     * @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, }: {
+    constructor({ source, style, minZoom, opacity, declutter, drawCollisionBoxes, onClick, onHover, restyleOnHover, }: {
         source: VectorSource;
         style?: Style | (() => Style);
         minZoom?: number;
         opacity?: number;
         declutter?: boolean;
         drawCollisionBoxes?: boolean;
+        onClick?: (feature: import('../Feature').Feature, event: MouseEvent) => void;
+        onHover?: (feature: import('../Feature').Feature, event: MouseEvent) => (() => void) | void;
+        restyleOnHover?: boolean;
     });
     /**
      * @type {VectorSource}
@@ -57,6 +69,9 @@ export class TextLayer {
      * @public
      */
     public drawCollisionBoxes: boolean;
+    onClick: (feature: import('../Feature').Feature, event: MouseEvent) => void;
+    onHover: (feature: import('../Feature').Feature, event: MouseEvent) => (() => void) | void;
+    restyleOnHover: boolean;
     /**
      * @type {TextLayerRenderer}
      * @public
@@ -80,7 +95,7 @@ export class TextLayer {
 }
 export namespace TextLayer {
     /** @param {TextLayerComponentProps} props */
-    function Component({ features: featureCollection, style, minZoom, opacity, declutter, drawCollisionBoxes, }: TextLayerComponentProps): any;
+    function Component({ features: featureCollection, style, minZoom, opacity, declutter, drawCollisionBoxes, onClick, onHover, restyleOnHover, }: TextLayerComponentProps): any;
     namespace Component {
         let displayName: string;
     }

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

@@ -16,7 +16,10 @@ class TextLayer {
     minZoom,
     opacity,
     declutter,
-    drawCollisionBoxes
+    drawCollisionBoxes,
+    onClick,
+    onHover,
+    restyleOnHover
   }) {
     const { registerLayer, unregisterLayer } = useContext(MapContext);
     const layer = useMemo(
@@ -30,7 +33,10 @@ class TextLayer {
           minZoom,
           opacity,
           declutter,
-          drawCollisionBoxes
+          drawCollisionBoxes,
+          onClick,
+          onHover,
+          restyleOnHover
         });
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -64,6 +70,15 @@ class TextLayer {
    * @param {number} [params.opacity=1]
    * @param {boolean} [params.declutter=true]
    * @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]
+   * A callback that's called when the mouse hovers over a feature in this layer. The callback is
+   * 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.
+   * @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,
@@ -71,7 +86,10 @@ class TextLayer {
     minZoom = 0,
     opacity = 1,
     declutter = true,
-    drawCollisionBoxes = false
+    drawCollisionBoxes = false,
+    onClick,
+    onHover,
+    restyleOnHover
   }) {
     this.source = source;
     this._style = style;
@@ -79,6 +97,9 @@ class TextLayer {
     this.opacity = opacity;
     this.declutter = declutter;
     this.drawCollisionBoxes = drawCollisionBoxes;
+    this.onClick = onClick;
+    this.onHover = onHover;
+    this.restyleOnHover = restyleOnHover;
     this.renderer = new TextLayerRenderer(this);
     this.dispatcher = new Dispatcher(this);
   }

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

@@ -58,8 +58,6 @@ class FeatureRenderer {
     }
     if (clipPath) {
       context.clip();
-    } else {
-      context.closePath();
     }
   }
   drawStroke(frameState, context, { style, width: strokeWidth, position }) {

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

@@ -10,12 +10,21 @@ export class TextLayerRenderer {
     layer: import('../layers/TextLayer').TextLayer;
     featureRenderer: FeatureRenderer;
     _element: HTMLDivElement;
+    _mouseInteractionsEnabled: boolean | ((feature: import('../Feature').Feature, event: MouseEvent) => void);
     /**
      * @param {import("./MapRenderer").CanvasSingleton} canvasSingleton
      */
     renderFrame(frameState: any, canvasSingleton: import('./MapRenderer').CanvasSingleton): HTMLDivElement;
     getTextElementWithID(id: any): Element;
-    styleTextElement(element: any, textStyle: any, position: any): {
+    /**
+     * @param {HTMLDivElement} element
+     * @param {import("../styles/Text").Text} textStyle
+     * @param {{left: string, top: string}} position
+     */
+    styleTextElement(element: HTMLDivElement, textStyle: import('../styles/Text').Text, position: {
+        left: string;
+        top: string;
+    }): {
         width: any;
         height: any;
     };
@@ -63,4 +72,6 @@ export class TextLayerRenderer {
      * @param {import("../styles/Text").IconOptions} icon
      */
     drawTextIcon(context: CanvasRenderingContext2D, icon: import('../styles/Text').IconOptions): void;
+    attachClickAndHoverListeners(): void;
+    _hoveredFeature: import('../Feature').Feature;
 }

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

@@ -1,5 +1,6 @@
 import { FeatureRenderer } from "./FeatureRenderer.js";
 import { replaceChildren } from "../util/dom.js";
+import { MapEvent } from "../events/MapEvent.js";
 class TextLayerRenderer {
   /**
    * @param {import("../layers/TextLayer").TextLayer} layer
@@ -13,8 +14,10 @@ class TextLayerRenderer {
     style.position = "absolute";
     style.width = "100%";
     style.height = "100%";
-    style.pointerEvents = "none";
     style.overflow = "hidden";
+    style.pointerEvents = "none";
+    this._mouseInteractionsEnabled = this.layer.onClick || this.layer.onHover || this.layer.restyleOnHover;
+    this.attachClickAndHoverListeners();
   }
   /**
    * @param {import("./MapRenderer").CanvasSingleton} canvasSingleton
@@ -38,7 +41,11 @@ class TextLayerRenderer {
         );
       }
       const styleFunction = feature.getStyleFunction() || this.layer.getStyleFunction();
-      const featureStyle = styleFunction(feature, transform.k);
+      const featureStyle = styleFunction(
+        feature,
+        transform.k,
+        this._hoveredFeature === feature
+      );
       const textElement = this.getTextElementWithID(feature.uid);
       textElement.innerText = featureStyle.text.content;
       const [canvasX, canvasY] = transform.apply(point.coordinates);
@@ -120,9 +127,19 @@ class TextLayerRenderer {
     if (!textElement) {
       textElement = document.createElement("div");
       textElement.id = elementId;
+      textElement.dataset.featureId = id;
+    }
+    if (this._mouseInteractionsEnabled) {
+      textElement.style.pointerEvents = "auto";
+      textElement.style.cursor = "pointer";
     }
     return textElement;
   }
+  /**
+   * @param {HTMLDivElement} element
+   * @param {import("../styles/Text").Text} textStyle
+   * @param {{left: string, top: string}} position
+   */
   styleTextElement(element, textStyle, position) {
     const style = element.style;
     style.position = "absolute";
@@ -136,7 +153,20 @@ class TextLayerRenderer {
     style.lineHeight = textStyle.lineHeight;
     style.color = textStyle.color;
     style.textShadow = textStyle.textShadow;
-    const { width, height } = this.getElementSize(element);
+    let { width, height } = this.getElementSize(element);
+    if (textStyle.icon) {
+      const iconSize = textStyle.icon.size;
+      if (textStyle.icon.position === "left") {
+        style.paddingLeft = `${iconSize + textStyle.icon.padding * 2}px`;
+      } else if (textStyle.icon.position === "right") {
+        style.paddingRight = `${iconSize + textStyle.icon.padding * 2}px`;
+      }
+      const iconSizeHeightDiff = iconSize - height;
+      if (iconSizeHeightDiff > 0) {
+        style.paddingTop = `${iconSizeHeightDiff / 2}px`;
+        style.paddingBottom = `${iconSizeHeightDiff / 2}px`;
+      }
+    }
     style.transform = textStyle.getTransform(width, height);
     return { width, height };
   }
@@ -176,16 +206,6 @@ class TextLayerRenderer {
       maxX += textStyle.callout.offsetBy.x;
       maxY += textStyle.callout.offsetBy.y;
     }
-    if (textStyle.icon) {
-      if (textStyle.icon.position === "left" || textStyle.icon.position === "right") {
-        maxX += textStyle.icon.size + textStyle.icon.padding;
-      }
-      const iconSizeHeightDiff = textStyle.icon.size - dimens.height;
-      if (iconSizeHeightDiff > 0) {
-        minY -= iconSizeHeightDiff / 2;
-        maxY += iconSizeHeightDiff / 2;
-      }
-    }
     minX = Math.floor(minX);
     minY = Math.floor(minY);
     maxX = Math.ceil(maxX);
@@ -203,29 +223,11 @@ class TextLayerRenderer {
    */
   getElementPosition(textStyle, position) {
     if (textStyle.callout) {
-      if (textStyle.icon.position === "left") {
-        return {
-          left: `calc(${position.x * 100}% + ${textStyle.callout.offsetBy.x + (textStyle.icon.size + textStyle.icon.padding * 2)}px)`,
-          top: `calc(${position.y * 100}% + ${textStyle.callout.offsetBy.y}px)`
-        };
-      }
-      if (textStyle.icon.position === "right") {
-        return {
-          left: `calc(${position.x * 100}% + ${textStyle.callout.offsetBy.x}px)`,
-          top: `calc(${position.y * 100}% + ${textStyle.callout.offsetBy.y}px)`
-        };
-      }
       return {
         left: `calc(${position.x * 100}% + ${textStyle.callout.offsetBy.x}px)`,
         top: `calc(${position.y * 100}% + ${textStyle.callout.offsetBy.y}px)`
       };
     }
-    if (textStyle.icon && (textStyle.icon.position === "left" || textStyle.icon.position === "right")) {
-      return {
-        left: `calc(${position.x * 100}% + ${textStyle.icon.size + textStyle.icon.padding * 2}px)`,
-        top: `${position.y * 100}%`
-      };
-    }
     return {
       left: `${position.x * 100}%`,
       top: `${position.y * 100}%`
@@ -276,6 +278,55 @@ class TextLayerRenderer {
       }
     }
   }
+  attachClickAndHoverListeners() {
+    if (this.layer.onClick) {
+      this._element.addEventListener("click", (event) => {
+        if (!event.target) return;
+        const clickedFeature = this.layer.source.getFeatures().find((feature) => {
+          var _a;
+          return ((_a = event.target.dataset) == null ? void 0 : _a.featureId) === feature.uid;
+        });
+        if (!clickedFeature) return;
+        this.layer.onClick(clickedFeature, event);
+      });
+    }
+    if (this.layer.onHover) {
+      this._element.addEventListener("mouseover", (event) => {
+        if (!event.target) return;
+        const hoveredFeature = this.layer.source.getFeatures().find((feature) => {
+          var _a;
+          return ((_a = event.target.dataset) == null ? void 0 : _a.featureId) === feature.uid;
+        });
+        if (!hoveredFeature) return;
+        const onHoverLeave = this.layer.onHover(hoveredFeature, event);
+        if (onHoverLeave) {
+          this._element.addEventListener("mouseout", onHoverLeave, {
+            once: true
+          });
+        }
+      });
+    }
+    if (this.layer.restyleOnHover) {
+      this._element.addEventListener("mouseover", (event) => {
+        if (!event.target) return;
+        const hoveredFeature = this.layer.source.getFeatures().find((feature) => {
+          var _a;
+          return ((_a = event.target.dataset) == null ? void 0 : _a.featureId) === feature.uid;
+        });
+        if (!hoveredFeature) return;
+        this._hoveredFeature = hoveredFeature;
+        this.layer.dispatcher.dispatch(MapEvent.CHANGE);
+        this._element.addEventListener(
+          "mouseout",
+          () => {
+            this._hoveredFeature = void 0;
+            this.layer.dispatcher.dispatch(MapEvent.CHANGE);
+          },
+          { once: true }
+        );
+      });
+    }
+  }
 }
 export {
   TextLayerRenderer

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

@@ -9,6 +9,8 @@ import { Text } from './Text';
  * @callback StyleFunction
  * @param {import("../Feature").Feature} feature The feature to style.
  * @param {number} zoom The current map zoom level
+ * @param {boolean} [isHovering] If the layer has `restyleOnHover` enabled, this will be true if the
+ * feature is currently being hovered over.
  * @returns {Style}
  */
 /**
@@ -52,4 +54,4 @@ export class Style {
     pointRadius: number;
     clone(): Style;
 }
-export type StyleFunction = (feature: import('../Feature').Feature, zoom: number) => Style;
+export type StyleFunction = (feature: import('../Feature').Feature, zoom: number, isHovering?: boolean) => Style;

package/dist/components/molecules/result-summary/index.d.ts

@@ -1,9 +1,10 @@
-export function ResultSummary({ previous, next, title, text, timestamp, isSlim, styles, }: {
+export function ResultSummary({ previous, next, title, text, timestamp, onClick, isSlim, styles, }: {
     previous: any;
     next: any;
     title: any;
     text: any;
     timestamp: any;
+    onClick: any;
     isSlim?: boolean;
     styles: any;
 }): import("preact").JSX.Element;

package/dist/components/molecules/result-summary/index.js

@@ -28,30 +28,38 @@ function ResultSummary({
   title,
   text,
   timestamp,
+  onClick,
   isSlim = false,
   styles
 }) {
   styles = mergeStyles({ ...defaultStyles }, styles);
   if (isSlim) {
     let hasChanged = next !== previous;
-    return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${styles.containerSlim}`, children: [
-      hasChanged ? /* @__PURE__ */ jsx(
-        GradientIcon,
-        {
-          previous,
-          next,
-          styles: {
-            previous: styles.previous,
-            next: styles.next
-          }
-        }
-      ) : /* @__PURE__ */ jsx(CircleIcon, { styles: { circle: `fill-color--${next}` } }),
-      /* @__PURE__ */ jsxs("p", { className: styles.titleSlim, children: [
-        title,
-        " "
-      ] }),
-      /* @__PURE__ */ jsx(RelativeTimeSentence, { timeStamp: timestamp })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${styles.container} ${styles.containerSlim}`,
+        onClick,
+        children: [
+          hasChanged ? /* @__PURE__ */ jsx(
+            GradientIcon,
+            {
+              previous,
+              next,
+              styles: {
+                previous: styles.previous,
+                next: styles.next
+              }
+            }
+          ) : /* @__PURE__ */ jsx(CircleIcon, { styles: { circle: `fill-color--${next}` } }),
+          /* @__PURE__ */ jsxs("p", { className: styles.titleSlim, children: [
+            title,
+            " "
+          ] }),
+          /* @__PURE__ */ jsx(RelativeTimeSentence, { timeStamp: timestamp })
+        ]
+      }
+    );
   } else {
     return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
       /* @__PURE__ */ jsx(ControlChange, { previous, next, text: title }),

package/package.json

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