@guardian/interactive-component-library 0.5.2 → 0.5.4

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

@@ -1,6 +1,10 @@
 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
+   */
   constructor(layer) {
     this.layer = layer;
     this.featureRenderer = new FeatureRenderer();
@@ -10,16 +14,23 @@ 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();
   }
-  renderFrame(frameState, targetElement) {
-    if (this.layer.opacity === 0) return targetElement;
+  /**
+   * @param {import("./MapRenderer").CanvasSingleton} canvasSingleton
+   */
+  renderFrame(frameState, canvasSingleton) {
+    var _a, _b;
+    if (this.layer.opacity === 0) return null;
     const { declutterTree } = frameState;
     const { projection, viewPortSize, sizeInPixels, visibleExtent, transform } = frameState.viewState;
-    this._element.style.opacity = this.layer.opacity;
+    this._element.style.opacity = `${this.layer.opacity}`;
     const source = this.layer.source;
     const features = source.getFeaturesInExtent(visibleExtent);
+    let canvasCtx;
     const textElements = [];
     for (const feature of features) {
       const geometries = feature.getProjectedGeometries(projection);
@@ -30,16 +41,28 @@ class TextLayerRenderer {
         );
       }
       const styleFunction = feature.getStyleFunction() || this.layer.getStyleFunction();
-      const featureStyle = styleFunction(feature);
+      const featureStyle = styleFunction(
+        feature,
+        transform.k,
+        this._hoveredFeature === feature
+      );
       const textElement = this.getTextElementWithID(feature.uid);
       textElement.innerText = featureStyle.text.content;
-      const [relativeX, relativeY] = transform.apply(point.coordinates).map((d, i) => d / sizeInPixels[i]);
-      const position = {
-        left: `${relativeX * 100}%`,
-        top: `${relativeY * 100}%`
-      };
-      this.styleTextElement(textElement, featureStyle.text, position);
-      const bbox = this.getElementBBox(textElement, featureStyle.text, {
+      const [canvasX, canvasY] = transform.apply(point.coordinates);
+      const [relativeX, relativeY] = [
+        canvasX / sizeInPixels[0],
+        canvasY / sizeInPixels[1]
+      ];
+      const position = this.getElementPosition(featureStyle.text, {
+        x: relativeX,
+        y: relativeY
+      });
+      const elementDimens = this.styleTextElement(
+        textElement,
+        featureStyle.text,
+        position
+      );
+      const bbox = this.getElementBBox(elementDimens, featureStyle.text, {
         x: relativeX * viewPortSize[0],
         y: relativeY * viewPortSize[1]
       });
@@ -49,6 +72,46 @@ class TextLayerRenderer {
         }
         declutterTree.insert(bbox);
       }
+      const callout = (_a = featureStyle == null ? void 0 : featureStyle.text) == null ? void 0 : _a.callout;
+      const icon = (_b = featureStyle == null ? void 0 : featureStyle.text) == null ? void 0 : _b.icon;
+      if (callout || icon) {
+        canvasCtx ?? (canvasCtx = canvasSingleton.getContext2d());
+      }
+      if (callout) {
+        const canvasOffsetX = (callout.offsetBy.x - callout.leaderGap) * window.devicePixelRatio;
+        const canvasOffsetY = callout.offsetBy.y * window.devicePixelRatio;
+        canvasCtx.beginPath();
+        canvasCtx.moveTo(canvasX, canvasY);
+        canvasCtx.lineTo(canvasX + canvasOffsetX / 2, canvasY + canvasOffsetY);
+        canvasCtx.moveTo(canvasX + canvasOffsetX / 2, canvasY + canvasOffsetY);
+        canvasCtx.lineTo(canvasX + canvasOffsetX, canvasY + canvasOffsetY);
+        canvasCtx.strokeStyle = callout.leaderColor;
+        canvasCtx.lineWidth = callout.leaderWidth;
+        canvasCtx.stroke();
+        canvasCtx.closePath();
+      }
+      if (icon) {
+        canvasCtx.beginPath();
+        canvasCtx.save();
+        let iconPosX = relativeX * viewPortSize[0];
+        let iconPosY = relativeY * viewPortSize[1];
+        if (callout) {
+          iconPosX += callout.offsetBy.x;
+          iconPosY += callout.offsetBy.y;
+        }
+        if (icon.position === "right") {
+          iconPosX += elementDimens.width;
+        } else if (icon.position === "left") {
+          iconPosX += icon.padding + icon.size / 2;
+        }
+        canvasCtx.translate(
+          iconPosX * window.devicePixelRatio,
+          iconPosY * window.devicePixelRatio
+        );
+        this.drawTextIcon(canvasCtx, icon);
+        canvasCtx.restore();
+        canvasCtx.closePath();
+      }
       if (this.layer.drawCollisionBoxes) {
         const collisionBoxDebugElement = this.getCollisionBoxElement(bbox);
         textElements.push(collisionBoxDebugElement);
@@ -64,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";
@@ -80,8 +153,22 @@ 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 };
   }
   getElementSize(element) {
     if (!element.parentElement) {
@@ -93,29 +180,57 @@ class TextLayerRenderer {
     }
     return { width, height };
   }
-  getElementBBox(element, textStyle, position) {
-    const collissionPadding = {
+  /**
+   * @param {{ height: number, width: number }} dimens
+   * @param {import("../styles/Text").Text} textStyle
+   * @param {{x: number, y: number}} position
+   */
+  getElementBBox(dimens, textStyle, position) {
+    const collisionPadding = {
       top: 2,
       right: 2,
       bottom: 2,
       left: 2
     };
-    const { width, height } = this.getElementSize(element);
     const { x: translateX, y: translateY } = textStyle.getTranslation(
-      width,
-      height
+      dimens.width,
+      dimens.height
     );
-    const minX = Math.floor(position.x + translateX - collissionPadding.left);
-    const minY = Math.floor(position.y + translateY - collissionPadding.top);
+    let minX = position.x + translateX - collisionPadding.left;
+    let minY = position.y + translateY - collisionPadding.top;
+    let maxX = minX + dimens.width + collisionPadding.left + collisionPadding.right;
+    let maxY = minY + dimens.height + collisionPadding.top + collisionPadding.bottom;
+    if (textStyle.callout) {
+      minX += textStyle.callout.offsetBy.x;
+      minY += textStyle.callout.offsetBy.y;
+      maxX += textStyle.callout.offsetBy.x;
+      maxY += textStyle.callout.offsetBy.y;
+    }
+    minX = Math.floor(minX);
+    minY = Math.floor(minY);
+    maxX = Math.ceil(maxX);
+    maxY = Math.ceil(maxY);
     return {
       minX,
       minY,
-      maxX: Math.ceil(
-        minX + width + collissionPadding.left + collissionPadding.right
-      ),
-      maxY: Math.ceil(
-        minY + height + collissionPadding.top + collissionPadding.bottom
-      )
+      maxX,
+      maxY
+    };
+  }
+  /**
+   * @param {import("../styles/Text").Text} textStyle
+   * @param {{x: number, y: number}} position
+   */
+  getElementPosition(textStyle, position) {
+    if (textStyle.callout) {
+      return {
+        left: `calc(${position.x * 100}% + ${textStyle.callout.offsetBy.x}px)`,
+        top: `calc(${position.y * 100}% + ${textStyle.callout.offsetBy.y}px)`
+      };
+    }
+    return {
+      left: `${position.x * 100}%`,
+      top: `${position.y * 100}%`
     };
   }
   getCollisionBoxElement(bbox) {
@@ -129,6 +244,89 @@ class TextLayerRenderer {
     style.border = "1px solid red";
     return element;
   }
+  /**
+   * Draws a `Text` element's icon on the canvas.
+   *
+   * Expects the canvas context to be translated to the text element's position.
+   *
+   * TODO: support more shapes?
+   *
+   * @param {CanvasRenderingContext2D} context
+   * @param {import("../styles/Text").IconOptions} icon
+   */
+  drawTextIcon(context, icon) {
+    var _a;
+    if (icon.shape === "circle") {
+      context.arc(
+        0,
+        0,
+        icon.size * devicePixelRatio / 2,
+        0,
+        2 * Math.PI,
+        false
+      );
+      if (icon.style) {
+        (_a = icon.style.fill) == null ? void 0 : _a.drawInContext(context);
+        if (icon.style.stroke) {
+          context.lineWidth = icon.style.stroke.width;
+          context.strokeStyle = icon.style.stroke.getRgba();
+          context.stroke();
+        }
+      } else if (icon.color) {
+        context.fillStyle = icon.color;
+        context.fill();
+      }
+    }
+  }
+  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/renderers/VectorLayerRenderer.d.ts

@@ -1,10 +1,17 @@
 import { FeatureRenderer } from './FeatureRenderer';
 export class VectorLayerRenderer {
-    constructor(layer: any);
-    layer: any;
+    /**
+     * @constructor
+     * @param {import('../layers').VectorLayer} layer
+     */
+    constructor(layer: import('../layers').VectorLayer);
+    /**
+     * @type {import('../layers').VectorLayer}
+     */
+    layer: import('../layers').VectorLayer;
     featureRenderer: FeatureRenderer;
-    renderFrame(frameState: any, targetElement: any): any;
-    getOrCreateContainer(targetElement: any, sizeInPixels: any): any;
-    _container: any;
-    createContainer(): HTMLDivElement;
+    /**
+     * @param {import("./MapRenderer").CanvasSingleton} canvasSingleton
+     */
+    renderFrame(frameState: any, canvasSingleton: import('./MapRenderer').CanvasSingleton): any;
 }

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

@@ -1,14 +1,20 @@
 import { FeatureRenderer } from "./FeatureRenderer.js";
 class VectorLayerRenderer {
+  /**
+   * @constructor
+   * @param {import('../layers').VectorLayer} layer
+   */
   constructor(layer) {
     this.layer = layer;
     this.featureRenderer = new FeatureRenderer();
   }
-  renderFrame(frameState, targetElement) {
-    if (this.layer.opacity === 0) return targetElement;
-    const { projection, sizeInPixels, visibleExtent, transform } = frameState.viewState;
-    const container = this.getOrCreateContainer(targetElement, sizeInPixels);
-    const context = container.firstElementChild.getContext("2d");
+  /**
+   * @param {import("./MapRenderer").CanvasSingleton} canvasSingleton
+   */
+  renderFrame(frameState, canvasSingleton) {
+    if (this.layer.opacity === 0) return null;
+    const { projection, visibleExtent, transform } = frameState.viewState;
+    const context = canvasSingleton.getContext2d();
     context.save();
     context.translate(transform.x, transform.y);
     context.scale(transform.k, transform.k);
@@ -19,7 +25,7 @@ class VectorLayerRenderer {
     const features = source.getFeaturesInExtent(visibleExtent);
     for (const feature of features) {
       const styleFunction = feature.getStyleFunction() || this.layer.getStyleFunction();
-      const featureStyle = styleFunction(feature);
+      const featureStyle = styleFunction(feature, transform.k);
       if ((featureStyle == null ? void 0 : featureStyle.stroke) || (featureStyle == null ? void 0 : featureStyle.fill)) {
         context.save();
         this.featureRenderer.setStyle(featureStyle);
@@ -36,42 +42,6 @@ class VectorLayerRenderer {
       context.stroke();
     }
     context.restore();
-    return container;
-  }
-  getOrCreateContainer(targetElement, sizeInPixels) {
-    let container = null;
-    let containerReused = false;
-    let canvas = targetElement && targetElement.firstElementChild;
-    if (canvas instanceof HTMLCanvasElement) {
-      container = targetElement;
-      containerReused = true;
-    } else if (this._container) {
-      container = this._container;
-    } else {
-      container = this.createContainer();
-    }
-    if (!containerReused) {
-      const canvas2 = container.firstElementChild;
-      canvas2.width = sizeInPixels[0];
-      canvas2.height = sizeInPixels[1];
-    }
-    this._container = container;
-    return container;
-  }
-  createContainer() {
-    const container = document.createElement("div");
-    container.className = "gv-map-layer";
-    let style = container.style;
-    style.position = "absolute";
-    style.width = "100%";
-    style.height = "100%";
-    const canvas = document.createElement("canvas");
-    style = canvas.style;
-    style.position = "absolute";
-    style.width = "100%";
-    style.height = "100%";
-    container.appendChild(canvas);
-    return container;
   }
 }
 export {

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

@@ -1,15 +1,33 @@
 import { Dispatcher } from '../events';
 import { default as RBush } from 'rbush';
 export class VectorSource {
+    /**
+     * @param {Object} props
+     * @param {import("../Feature").Feature[]} props.features
+     */
     constructor({ features }: {
-        features: any;
+        features: import('../Feature').Feature[];
     });
     dispatcher: Dispatcher;
     _featuresRtree: RBush;
     tearDown(): void;
-    getFeatures(): any;
-    getFeaturesAtCoordinate(coordinate: any): any[];
-    getFeaturesInExtent(extent: any): any[];
-    setFeatures(features: any): void;
-    _features: any;
+    /**
+     * @returns {import("../Feature").Feature[]}
+     */
+    getFeatures(): import('../Feature').Feature[];
+    /**
+     * @param {[number, number]} coordinate
+     * @returns {import("../Feature").Feature[]}
+     */
+    getFeaturesAtCoordinate(coordinate: [number, number]): import('../Feature').Feature[];
+    /**
+     * @param {[number, number, number, number]} extent TODO: should this be an `Extent`?
+     * @returns {import("../Feature").Feature[]}
+     */
+    getFeaturesInExtent(extent: [number, number, number, number]): import('../Feature').Feature[];
+    /**
+     * @param {import("../Feature").Feature[]} features
+     */
+    setFeatures(features: import('../Feature').Feature[]): void;
+    _features: import('../Feature').Feature[];
 }

package/dist/components/molecules/canvas-map/lib/sources/VectorSource.js

@@ -3,6 +3,10 @@ import knn from "rbush-knn";
 import { Dispatcher } from "../events/Dispatcher.js";
 import { MapEvent } from "../events/MapEvent.js";
 class VectorSource {
+  /**
+   * @param {Object} props
+   * @param {import("../Feature").Feature[]} props.features
+   */
   constructor({ features }) {
     this.dispatcher = new Dispatcher(this);
     this._featuresRtree = new RBush();
@@ -11,9 +15,16 @@ class VectorSource {
   tearDown() {
     this.dispatcher = null;
   }
+  /**
+   * @returns {import("../Feature").Feature[]}
+   */
   getFeatures() {
     return this._features;
   }
+  /**
+   * @param {[number, number]} coordinate
+   * @returns {import("../Feature").Feature[]}
+   */
   getFeaturesAtCoordinate(coordinate) {
     const [x, y] = coordinate;
     const items = knn(this._featuresRtree, x, y, 10, (d) => {
@@ -27,11 +38,18 @@ class VectorSource {
     items.sort((a, b) => a.distance - b.distance);
     return items.map((d) => d.feature);
   }
+  /**
+   * @param {[number, number, number, number]} extent TODO: should this be an `Extent`?
+   * @returns {import("../Feature").Feature[]}
+   */
   getFeaturesInExtent(extent) {
     const [minX, minY, maxX, maxY] = extent;
     const features = this._featuresRtree.search({ minX, minY, maxX, maxY }).map((d) => d.feature);
     return features;
   }
+  /**
+   * @param {import("../Feature").Feature[]} features
+   */
   setFeatures(features) {
     this._featuresRtree.clear();
     for (const feature of features) {

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

@@ -1,7 +1,17 @@
+import { Stroke } from './Stroke';
+import { Fill } from './Fill';
+import { Text } from './Text';
 /**
- * A function that takes a {@link import("../Feature").Feature} and returns a {@link Style}
+ * @import { Text } from "./Text";
+ * @import { Stroke } from "./Stroke"
+ * @import { Fill } from "./Fill"
  *
- * @typedef {function(import("../Feature").Feature):(Style)} StyleFunction
+ * @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}
  */
 /**
  * Class representing a style.
@@ -13,14 +23,35 @@
  * @property {number} properties.pointRadius - Radius of drawn "Point"-type geometries, if present
  */
 export class Style {
-    constructor(properties: any);
-    stroke: any;
-    fill: any;
-    text: any;
-    pointRadius: any;
+    /**
+     * @param {Object} [properties]
+     * @param {Stroke} [properties.stroke]
+     * @param {Fill} [properties.fill]
+     * @param {Text} [properties.text]
+     * @param {number} [properties.pointRadius]
+     */
+    constructor(properties?: {
+        stroke?: Stroke;
+        fill?: Fill;
+        text?: Text;
+        pointRadius?: number;
+    });
+    /**
+     * @type {Stroke}
+     * @public
+     */
+    public stroke: Stroke;
+    /**
+     * @type {Fill}
+     * @public
+     */
+    public fill: Fill;
+    /**
+     * @type {Text}
+     * @public
+     */
+    public text: Text;
+    pointRadius: number;
     clone(): Style;
 }
-/**
- * A function that takes a {@link import ("../Feature").Feature} and returns a {@link Style}
- */
-export type StyleFunction = (arg0: import('../Feature').Feature) => (Style);
+export type StyleFunction = (feature: import('../Feature').Feature, zoom: number, isHovering?: boolean) => Style;

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

@@ -1,4 +1,11 @@
 class Style {
+  /**
+   * @param {Object} [properties]
+   * @param {Stroke} [properties.stroke]
+   * @param {Fill} [properties.fill]
+   * @param {Text} [properties.text]
+   * @param {number} [properties.pointRadius]
+   */
   constructor(properties) {
     this.stroke = properties == null ? void 0 : properties.stroke;
     this.fill = properties == null ? void 0 : properties.fill;