@guardian/interactive-component-library 0.5.2 → 0.5.4

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

@@ -32,7 +32,10 @@ export class Feature {
      */
     getExtent(): import('./util').Extent;
     getProjectedGeometries(projection: any): any;
-    getStyleFunction(): any;
+    /**
+     * @returns {import("./styles/Style").StyleFunction}
+     */
+    getStyleFunction(): import('./styles/Style').StyleFunction;
     containsCoordinate(coordinate: any): boolean;
     clone(): Feature;
     /**

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

@@ -45,6 +45,9 @@ class Feature {
   getProjectedGeometries(projection) {
     return this._getProjectedGeometries(projection, projection.revision);
   }
+  /**
+   * @returns {import("./styles/Style").StyleFunction}
+   */
   getStyleFunction() {
     const style = this.style;
     if (!style) return null;

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

@@ -19,34 +19,83 @@ 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;
     });
-    source: VectorSource;
-    _style: Style | (() => Style);
-    minZoom: number;
-    opacity: number;
-    declutter: boolean;
-    drawCollisionBoxes: boolean;
-    renderer: TextLayerRenderer;
-    dispatcher: Dispatcher;
+    /**
+     * @type {VectorSource}
+     * @public
+     */
+    public source: VectorSource;
+    /**
+     * @type {Style|import("../styles").StyleFunction}
+     */
+    _style: Style | import('../styles').StyleFunction;
+    /**
+     * @type {number}
+     * @public
+     */
+    public minZoom: number;
+    /**
+     * @type {number}
+     * @public
+     */
+    public opacity: number;
+    /**
+     * @type {boolean}
+     * @public
+     */
+    public declutter: boolean;
+    /**
+     * @type {boolean}
+     * @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
+     */
+    public renderer: TextLayerRenderer;
+    /**
+     * @type {Dispatcher}
+     * @public
+     */
+    public dispatcher: Dispatcher;
     tearDown(): void;
-    set style(style: Style | (() => Style));
-    get style(): Style | (() => Style);
-    getExtent(): any;
-    _extent: any;
-    getStyleFunction(): () => Style;
-    renderFrame(frameState: any, targetElement: any): any;
+    set style(style: Style | import('../styles').StyleFunction);
+    get style(): Style | import('../styles').StyleFunction;
+    getExtent(): import('../Feature').Feature;
+    _extent: import('../Feature').Feature;
+    /**
+     * @returns {import("../styles/Style").StyleFunction}
+     */
+    getStyleFunction(): import('../styles/Style').StyleFunction;
+    renderFrame(frameState: any, targetElement: any): HTMLDivElement;
 }
 export namespace TextLayer {
     /** @param {TextLayerComponentProps} props */
-    function Component({ features: featureCollection, style, minZoom, opacity, declutter, drawCollisionBoxes, }: TextLayerComponentProps): boolean;
+    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
@@ -45,7 +51,7 @@ class TextLayer {
     useEffect(() => {
       layer.style = style;
     }, [style]);
-    return false;
+    return null;
   }
   /**
    * @param {import("../Feature").Feature[]} features
@@ -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);
   }
@@ -107,6 +128,9 @@ class TextLayer {
     this._extent = extent;
     return extent;
   }
+  /**
+   * @returns {import("../styles/Style").StyleFunction}
+   */
   getStyleFunction() {
     const style = this.style;
     if (typeof style === "function") return style;

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

@@ -25,22 +25,48 @@ export class VectorLayer {
         opacity?: number;
         hitDetectionEnabled?: boolean;
     });
-    dispatcher: Dispatcher;
-    renderer: VectorLayerRenderer;
     set source(source: any);
     get source(): any;
-    _style: Style | (() => Style);
-    minZoom: number;
-    opacity: number;
-    hitDetectionEnabled: boolean;
+    /**
+     * @type {Dispatcher}
+     * @public
+     */
+    public dispatcher: Dispatcher;
+    /**
+     * @type {VectorLayerRenderer}
+     * @public
+     */
+    public renderer: VectorLayerRenderer;
+    /**
+     * @type {number}
+     * @public
+     */
+    public minZoom: number;
+    /**
+     * @type {number}
+     * @public
+     */
+    public opacity: number;
+    /**
+     * @type {boolean}
+     * @public
+     */
+    public hitDetectionEnabled: boolean;
+    /**
+     * @type {Style|import("../styles").StyleFunction}
+     */
+    _style: Style | import('../styles').StyleFunction;
     _source: any;
     _extent: any;
     setRawProjection(projection: any): void;
     projection: any;
     tearDown(): void;
-    set style(style: Style | (() => Style));
-    get style(): Style | (() => Style);
-    getStyleFunction(): () => Style;
+    set style(style: Style | import('../styles').StyleFunction);
+    get style(): Style | import('../styles').StyleFunction;
+    /**
+     * @returns {import("../styles/Style").StyleFunction}
+     */
+    getStyleFunction(): import('../styles/Style').StyleFunction;
     /**
      * Get the extent of the features in the layer.
      * @returns {import("../util").Extent | null} The extent of the features in the layer, or null if the layer is empty.
@@ -51,7 +77,7 @@ export class VectorLayer {
 }
 export namespace VectorLayer {
     /** @param {VectorLayerComponentProps} props */
-    function Component({ features: featureCollection, style, minZoom, opacity, hitDetectionEnabled, }: VectorLayerComponentProps): boolean;
+    function Component({ features: featureCollection, style, minZoom, opacity, hitDetectionEnabled, }: VectorLayerComponentProps): any;
     namespace Component {
         let displayName: string;
     }

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

@@ -43,7 +43,7 @@ class VectorLayer {
     useEffect(() => {
       layer.style = style;
     }, [style]);
-    return false;
+    return null;
   }
   /**
    * @param {import("../Feature").Feature[]} features
@@ -68,13 +68,13 @@ class VectorLayer {
     opacity = 1,
     hitDetectionEnabled = true
   }) {
+    this.source = source;
     this.dispatcher = new Dispatcher(this);
     this.renderer = new VectorLayerRenderer(this);
-    this.source = source;
-    this._style = style;
     this.minZoom = minZoom;
     this.opacity = opacity;
     this.hitDetectionEnabled = hitDetectionEnabled;
+    this._style = style;
   }
   get source() {
     return this._source;
@@ -106,6 +106,9 @@ class VectorLayer {
     this._style = style;
     this.dispatcher.dispatch(MapEvent.CHANGE);
   }
+  /**
+   * @returns {import("../styles/Style").StyleFunction}
+   */
   getStyleFunction() {
     const style = this.style;
     if (typeof style === "function") return style;

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/MapRenderer.d.ts

@@ -1,6 +1,20 @@
+/**
+ * @typedef {Object} CanvasSingleton
+ * @property {() => CanvasRenderingContext2D} getContext2d
+ * @property {() => HTMLDivElement} getContainer
+ * @property {() => boolean} isInitialised
+ *
+ * @typedef {Object} FrameState
+ */
 export class MapRenderer {
     constructor(map: any);
     map: any;
     _element: HTMLDivElement;
     renderFrame(frameState: any): void;
 }
+export type CanvasSingleton = {
+    getContext2d: () => CanvasRenderingContext2D;
+    getContainer: () => HTMLDivElement;
+    isInitialised: () => boolean;
+};
+export type FrameState = any;

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

@@ -14,25 +14,24 @@ class MapRenderer {
     container.insertBefore(this._element, container.firstChild || null);
   }
   renderFrame(frameState) {
-    const { zoomLevel, projection } = frameState.viewState;
+    const { zoomLevel, projection, sizeInPixels } = frameState.viewState;
     const layers = this.map.layers;
     const mapElements = [];
-    let previousElement = null;
     const visibleLayers = layers.filter((layer) => {
       return zoomLevel > (layer.minZoom || 0);
     });
+    const canvasSingleton = makeCanvasSingleton(sizeInPixels);
     const renderLayer = (layer, declutterTree2) => {
       const viewState = frameState.viewState;
       if (layer.projection) {
         viewState.projection = layer.projection;
       }
-      const element = layer.renderFrame(
+      const newContainer = layer.renderFrame(
         { ...frameState, viewState, declutterTree: declutterTree2 },
-        previousElement
+        canvasSingleton
       );
-      if (element !== previousElement) {
-        mapElements.push(element);
-        previousElement = element;
+      if (newContainer) {
+        mapElements.push(newContainer);
       }
       viewState.projection = projection;
     };
@@ -44,9 +43,54 @@ class MapRenderer {
         renderLayer(layer);
       }
     }
-    replaceChildren(this._element, mapElements);
+    if (canvasSingleton.isInitialised()) {
+      replaceChildren(this._element, [
+        canvasSingleton.getContainer(),
+        ...mapElements
+      ]);
+    } else {
+      replaceChildren(this._element, mapElements);
+    }
   }
 }
+function makeCanvasSingleton(sizeInPixels) {
+  let canvasLayer;
+  let canvasContext2d;
+  return {
+    getContext2d: () => {
+      if (!canvasLayer) {
+        canvasLayer = createCanvasMapLayer(sizeInPixels);
+        canvasContext2d = canvasLayer.firstElementChild.getContext("2d");
+      }
+      return canvasContext2d;
+    },
+    getContainer: () => {
+      if (!canvasLayer) {
+        canvasLayer = createCanvasMapLayer(sizeInPixels);
+        canvasContext2d = canvasLayer.firstElementChild.getContext("2d");
+      }
+      return canvasLayer;
+    },
+    isInitialised: () => !!canvasLayer
+  };
+}
+function createCanvasMapLayer(sizeInPixels) {
+  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%";
+  canvas.width = sizeInPixels[0];
+  canvas.height = sizeInPixels[1];
+  container.appendChild(canvas);
+  return container;
+}
 export {
   MapRenderer
 };

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

@@ -1,21 +1,77 @@
 import { FeatureRenderer } from './FeatureRenderer';
 export class TextLayerRenderer {
-    constructor(layer: any);
-    layer: any;
+    /**
+     * @param {import("../layers/TextLayer").TextLayer} layer
+     */
+    constructor(layer: import('../layers/TextLayer').TextLayer);
+    /**
+     * @type {import("../layers/TextLayer").TextLayer}
+     */
+    layer: import('../layers/TextLayer').TextLayer;
     featureRenderer: FeatureRenderer;
     _element: HTMLDivElement;
-    renderFrame(frameState: any, targetElement: any): any;
+    _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): void;
+    /**
+     * @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;
+    };
     getElementSize(element: any): {
         width: any;
         height: any;
     };
-    getElementBBox(element: any, textStyle: any, position: any): {
+    /**
+     * @param {{ height: number, width: number }} dimens
+     * @param {import("../styles/Text").Text} textStyle
+     * @param {{x: number, y: number}} position
+     */
+    getElementBBox(dimens: {
+        height: number;
+        width: number;
+    }, textStyle: import('../styles/Text').Text, position: {
+        x: number;
+        y: number;
+    }): {
         minX: number;
         minY: number;
         maxX: number;
         maxY: number;
     };
+    /**
+     * @param {import("../styles/Text").Text} textStyle
+     * @param {{x: number, y: number}} position
+     */
+    getElementPosition(textStyle: import('../styles/Text').Text, position: {
+        x: number;
+        y: number;
+    }): {
+        left: string;
+        top: string;
+    };
     getCollisionBoxElement(bbox: any): HTMLDivElement;
+    /**
+     * 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: CanvasRenderingContext2D, icon: import('../styles/Text').IconOptions): void;
+    attachClickAndHoverListeners(): void;
+    _hoveredFeature: import('../Feature').Feature;
 }