@guardian/interactive-component-library 0.3.2 → 0.4.1

package/dist/components/molecules/canvas-map/context/MapContext.d.ts

@@ -1,3 +1,5 @@
+import { Layer } from '../lib/layers';
+import { ReactNode } from 'preact/compat';
 /**
  * @param {Object} params
  * @param {import('../lib/Map').Map} params.map
@@ -8,10 +10,18 @@ export function MapProvider({ map, children }: {
     children: import('preact').ComponentChildren;
 }): import("preact").JSX.Element;
 export type MapContext = {
-    registerLayer: ((layer: import('../lib/layers').Layer) => void) | null;
+    registerLayer: ((layer: Layer, comp: ReactNode) => void) | null;
+    unregisterLayer: ((layer: Layer) => void) | null;
 };
 /**
- * @typedef {{ registerLayer: ((layer: import("../lib/layers").Layer) => void) | null }} MapContext
+ * @import { Layer } from "../lib/layers"
+ * @import { ReactNode } from "preact/compat"
+ */
+/**
+ * @typedef {{
+ *   registerLayer: ((layer: Layer, comp: ReactNode) => void) | null,
+ *   unregisterLayer: ((layer: Layer) => void) | null
+ * }} MapContext
  */
 /**
  * @type {import('preact').Context<MapContext | null>}

package/dist/components/molecules/canvas-map/context/MapContext.js

@@ -1,18 +1,52 @@
 import { jsx } from "preact/jsx-runtime";
 import { createContext } from "preact";
-import { useEffect } from "preact/hooks";
+import { useState, useEffect } from "preact/hooks";
 const MapContext = createContext(null);
 function MapProvider({ map, children }) {
-  const registeredLayers = [];
-  const registerLayer = (layer) => {
-    registeredLayers.push(layer);
+  const [layers, setLayers] = useState([]);
+  const registerLayer = (layer, comp) => {
+    if (!layers.includes(layer)) {
+      const position = getCompTreePosition(comp, children);
+      if (position === null) return;
+      setLayers((prevLayers) => {
+        const newLayers = [...prevLayers];
+        newLayers.splice(position, 0, layer);
+        return newLayers;
+      });
+    }
+  };
+  const unregisterLayer = (layerToRemove) => {
+    setLayers(
+      (prevLayers) => prevLayers.filter((layer) => layer !== layerToRemove)
+    );
   };
   useEffect(() => {
-    if (map && !map.hasLayers(registeredLayers)) {
-      map.setLayers(registeredLayers);
+    if (!map) return;
+    map.setLayers(layers);
+  }, [map, layers]);
+  return /* @__PURE__ */ jsx(MapContext.Provider, { value: { registerLayer, unregisterLayer }, children });
+}
+function getCompTreePosition(targetComponent, children) {
+  let index = 0;
+  function traverse(nodes) {
+    var _a, _b;
+    for (const node of nodes) {
+      const childNodes = (_b = (_a = node == null ? void 0 : node.__c) == null ? void 0 : _a.__v) == null ? void 0 : _b.__k;
+      if (childNodes && childNodes.length > 1 && childNodes[0] !== null) {
+        const result = traverse(childNodes);
+        if (result !== null) {
+          return result;
+        }
+      } else {
+        if ((node == null ? void 0 : node.__c) === targetComponent) {
+          return index;
+        }
+        index++;
+      }
     }
-  }, [map, children]);
-  return /* @__PURE__ */ jsx(MapContext.Provider, { value: { registerLayer }, children });
+    return null;
+  }
+  return traverse(Array.isArray(children) ? children : [children]);
 }
 export {
   MapContext,

package/dist/components/molecules/canvas-map/lib/interpolators/interpolateStyles.js

@@ -1,6 +1,6 @@
-import { Style } from "../styles/Style.js";
 import { Stroke } from "../styles/Stroke.js";
 import { Fill } from "../styles/Fill.js";
+import { Style } from "../styles/Style.js";
 function interpolateStyles(firstStyle, secondStyle, interpolateColors, interpolateNumbers) {
   const fillInterpolator = interpolateFill(
     firstStyle.fill,

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

@@ -6,7 +6,7 @@ import { Dispatcher } from '../events/Dispatcher';
 /** @typedef {TextLayerOptions & { features: import("../Feature").Feature[] | import("../FeatureCollection").FeatureCollection }} TextLayerComponentProps */
 export class TextLayer {
     /** @param {TextLayerComponentProps} props */
-    static Component({ features: featureCollection, style, minZoom, opacity, declutter, drawCollisionBoxes, }: TextLayerComponentProps): any;
+    static Component({ features: featureCollection, style, minZoom, opacity, declutter, drawCollisionBoxes, }: TextLayerComponentProps): boolean;
     /**
      * @param {import("../Feature").Feature[]} features
      * @param {TextLayerOptions} options

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

@@ -1,6 +1,6 @@
 import { TextLayerRenderer } from "../renderers/TextLayerRenderer.js";
-import { Style } from "../styles/Style.js";
 import { Text } from "../styles/Text.js";
+import { Style } from "../styles/Style.js";
 import { Dispatcher } from "../events/Dispatcher.js";
 import { combineExtents } from "../util/extent.js";
 import { MapEvent } from "../events/MapEvent.js";
@@ -18,7 +18,7 @@ class TextLayer {
     declutter,
     drawCollisionBoxes
   }) {
-    const { registerLayer } = useContext(MapContext);
+    const { registerLayer, unregisterLayer } = useContext(MapContext);
     const layer = useMemo(
       () => {
         const features = featureCollection instanceof FeatureCollection ? featureCollection.features : (
@@ -36,11 +36,16 @@ class TextLayer {
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [featureCollection, minZoom, opacity, declutter, drawCollisionBoxes]
     );
-    registerLayer(layer);
+    useEffect(() => {
+      registerLayer(layer, this);
+      return () => {
+        unregisterLayer(layer);
+      };
+    }, [layer]);
     useEffect(() => {
       layer.style = style;
     }, [style]);
-    return null;
+    return false;
   }
   /**
    * @param {import("../Feature").Feature[]} features

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

@@ -6,7 +6,7 @@ import { VectorSource } from '../sources/VectorSource';
 /** @typedef {VectorLayerOptions & { features: import("../Feature").Feature[] | import("../FeatureCollection").FeatureCollection }} VectorLayerComponentProps */
 export class VectorLayer {
     /** @param {VectorLayerComponentProps} props */
-    static Component({ features: featureCollection, style, minZoom, opacity, hitDetectionEnabled, }: VectorLayerComponentProps): any;
+    static Component({ features: featureCollection, style, minZoom, opacity, hitDetectionEnabled, }: VectorLayerComponentProps): boolean;
     /**
      * @param {import("../Feature").Feature[]} features
      * @param {VectorLayerOptions} options

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

@@ -1,6 +1,6 @@
 import { VectorLayerRenderer } from "../renderers/VectorLayerRenderer.js";
-import { Style } from "../styles/Style.js";
 import { Stroke } from "../styles/Stroke.js";
+import { Style } from "../styles/Style.js";
 import { combineExtents } from "../util/extent.js";
 import { Dispatcher } from "../events/Dispatcher.js";
 import { MapEvent } from "../events/MapEvent.js";
@@ -17,7 +17,7 @@ class VectorLayer {
     opacity,
     hitDetectionEnabled = true
   }) {
-    const { registerLayer } = useContext(MapContext);
+    const { registerLayer, unregisterLayer } = useContext(MapContext);
     const layer = useMemo(
       () => {
         const features = featureCollection instanceof FeatureCollection ? featureCollection.features : (
@@ -34,11 +34,16 @@ class VectorLayer {
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [featureCollection, minZoom, opacity, hitDetectionEnabled]
     );
-    registerLayer(layer);
+    useEffect(() => {
+      registerLayer(layer, this);
+      return () => {
+        unregisterLayer(layer);
+      };
+    }, [layer]);
     useEffect(() => {
       layer.style = style;
     }, [style]);
-    return null;
+    return false;
   }
   /**
    * @param {import("../Feature").Feature[]} features

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

@@ -33,8 +33,7 @@ class FeatureRenderer {
     }
     this.drawPath(geometries, context);
     if (fill) {
-      context.fillStyle = fill.getRgba();
-      context.fill();
+      fill.drawInContext(context, transform.k);
     }
     if (stroke) {
       context.save();

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

@@ -1,7 +1,33 @@
+/**
+ * @class Fill
+ * @description Represents a fill style for a feature
+ * @property {string} color - The color of the fill
+ * @property {number} opacity - The opacity of the fill
+ * @property {HashPattern} pattern - The pattern of the fill
+ */
 export class Fill {
-    constructor(options: any);
-    color: any;
-    opacity: any;
+    /**
+     * @constructor
+     * @description Creates a new instance of the Fill class
+     * @param {Object} [options] - The options for the fill
+     * @param {string} [options.color="#CCC"] - The color of the fill
+     * @param {number} [options.opacity=1] - The opacity of the fill
+     * @param {Object} [options.pattern=null] - The pattern of the fill
+     */
+    constructor(options?: {
+        color?: string;
+        opacity?: number;
+        pattern?: any;
+    });
+    color: string;
+    opacity: number;
+    pattern: any;
     _getRgba: (...arg0: any[]) => string;
+    /**
+     * @function getRgba
+     * @description Returns the fill color as an RGBA string
+     * @returns {string} The fill color with opacity applied
+     */
     getRgba(): string;
+    drawInContext(context: any, scale: any): void;
 }

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

@@ -1,14 +1,36 @@
 import { memoise } from "../util/memoise.js";
 import { toRgba } from "../util/toRgba.js";
 class Fill {
+  /**
+   * @constructor
+   * @description Creates a new instance of the Fill class
+   * @param {Object} [options] - The options for the fill
+   * @param {string} [options.color="#CCC"] - The color of the fill
+   * @param {number} [options.opacity=1] - The opacity of the fill
+   * @param {Object} [options.pattern=null] - The pattern of the fill
+   */
   constructor(options) {
     this.color = (options == null ? void 0 : options.color) || "#CCC";
     this.opacity = (options == null ? void 0 : options.opacity) || 1;
+    this.pattern = (options == null ? void 0 : options.pattern) || null;
     this._getRgba = memoise(toRgba);
   }
+  /**
+   * @function getRgba
+   * @description Returns the fill color as an RGBA string
+   * @returns {string} The fill color with opacity applied
+   */
   getRgba() {
     return this._getRgba(this.color, this.opacity);
   }
+  drawInContext(context, scale) {
+    if (this.pattern) {
+      context.fillStyle = this.pattern.createPatternInContext(context, scale);
+    } else {
+      context.fillStyle = this.getRgba();
+    }
+    context.fill();
+  }
 }
 export {
   Fill

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

@@ -0,0 +1,38 @@
+/**
+ * HashPattern creates a diagonally-striped pattern used to fill a canvas element.
+ *
+ * Use `createPatternInContext` to create a pattern that can be used as a `fillStyle`.
+ */
+export class HashPattern {
+    /**
+     * @param {Object} options
+     * @param {number} [options.stripeWidth=4] - width of the pattern's stripes
+     * @param {number} [options.gapWidth =10] - width of the gap between the stripes
+     * @param {string} [options.stripeColor="#eee"]
+     * @param {string} [options.gapColor="#777"]
+     */
+    constructor({ stripeWidth, gapWidth, gapColor, stripeColor, }: {
+        stripeWidth?: number;
+        gapWidth?: number;
+        stripeColor?: string;
+        gapColor?: string;
+    });
+    stripeWidth: number;
+    stripeColor: string;
+    gapwidth: number;
+    gapColor: string;
+    tileSize: number;
+    offscreenCanvas: HTMLCanvasElement;
+    lastDrawnScale: any;
+    lastDrawnPattern: CanvasPattern;
+    /**
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {number} scale
+     */
+    createPatternInContext(ctx: CanvasRenderingContext2D, scale: number): CanvasPattern;
+    /**
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {number} scale
+     */
+    _createPattern(ctx: CanvasRenderingContext2D, scale: number): CanvasPattern;
+}

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

@@ -0,0 +1,72 @@
+class HashPattern {
+  /**
+   * @param {Object} options
+   * @param {number} [options.stripeWidth=4] - width of the pattern's stripes
+   * @param {number} [options.gapWidth =10] - width of the gap between the stripes
+   * @param {string} [options.stripeColor="#eee"]
+   * @param {string} [options.gapColor="#777"]
+   */
+  constructor({
+    stripeWidth = 4,
+    gapWidth = 8,
+    gapColor = "#eee",
+    stripeColor = "#777"
+  }) {
+    this.stripeWidth = stripeWidth;
+    this.stripeColor = stripeColor;
+    this.gapwidth = gapWidth;
+    this.gapColor = gapColor;
+    const hypot = stripeWidth * 2 + gapWidth * 2;
+    this.tileSize = Math.round(hypot / Math.SQRT2);
+    this.offscreenCanvas = document.createElement("canvas");
+    this.lastDrawnScale = null;
+    this.lastDrawnPattern = null;
+  }
+  /**
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {number} scale
+   */
+  createPatternInContext(ctx, scale) {
+    const roundedScale = Math.round(scale);
+    if (roundedScale === this.lastDrawnScale) {
+      return this.lastDrawnPattern;
+    }
+    this.lastDrawnPattern = this._createPattern(ctx, roundedScale);
+    this.lastDrawnScale = roundedScale;
+    return this.lastDrawnPattern;
+  }
+  /**
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {number} scale
+   */
+  _createPattern(ctx, scale) {
+    const size = this.tileSize * scale;
+    this.offscreenCanvas.width = size;
+    this.offscreenCanvas.height = size;
+    const offCtx = this.offscreenCanvas.getContext("2d");
+    if (this.gapColor) {
+      offCtx.fillStyle = this.gapColor;
+      offCtx.fillRect(0, 0, size, size);
+    }
+    const lineWidth = this.stripeWidth * scale;
+    offCtx.strokeStyle = this.stripeColor;
+    offCtx.lineWidth = lineWidth;
+    offCtx.lineCap = "square";
+    offCtx.beginPath();
+    offCtx.moveTo(-1, 1);
+    offCtx.lineTo(1, -1);
+    offCtx.moveTo(0, size);
+    offCtx.lineTo(size, 0);
+    offCtx.moveTo(size - 1, size + 1);
+    offCtx.lineTo(size + 1, size - 1);
+    offCtx.stroke();
+    const pattern = ctx.createPattern(this.offscreenCanvas, "repeat");
+    pattern.setTransform(
+      new DOMMatrix().scale(1 / Math.round(scale), 1 / Math.round(scale))
+    );
+    return pattern;
+  }
+}
+export {
+  HashPattern
+};

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

@@ -8,7 +8,7 @@
  * @class
  * @property {Object} properties - The properties of the style
  * @property {Object} properties.stroke - The stroke color of the style
- * @property {Object} properties.fill - The fill color of the style
+ * @property {Fill} properties.fill - The fill color of the style
  * @property {Object} properties.text - The text color of the style
  */
 export class Style {

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

@@ -1,4 +1,5 @@
-export * from './Style';
 export * from './Stroke';
+export * from './HashPattern';
 export * from './Fill';
 export * from './Text';
+export * from './Style';

package/dist/index.js

@@ -42,10 +42,11 @@ import { MapEvent } from "./components/molecules/canvas-map/lib/events/MapEvent.
 import { Projection } from "./components/molecules/canvas-map/lib/projection/index.js";
 import { TextLayer } from "./components/molecules/canvas-map/lib/layers/TextLayer.js";
 import { VectorLayer } from "./components/molecules/canvas-map/lib/layers/VectorLayer.js";
-import { Style } from "./components/molecules/canvas-map/lib/styles/Style.js";
 import { Stroke, StrokePosition } from "./components/molecules/canvas-map/lib/styles/Stroke.js";
+import { HashPattern } from "./components/molecules/canvas-map/lib/styles/HashPattern.js";
 import { Fill } from "./components/molecules/canvas-map/lib/styles/Fill.js";
 import { Text } from "./components/molecules/canvas-map/lib/styles/Text.js";
+import { Style } from "./components/molecules/canvas-map/lib/styles/Style.js";
 import { GeoCoordinate } from "./components/molecules/canvas-map/lib/util/coordinate.js";
 import { GeoBounds } from "./components/molecules/canvas-map/lib/util/bounds.js";
 import { Extent, combineExtents, containsCoordinate, containsXY, extentForCoordinates } from "./components/molecules/canvas-map/lib/util/extent.js";
@@ -89,6 +90,7 @@ export {
   GeoJSON,
   GradientIcon,
   GridType,
+  HashPattern,
   InfoButton,
   LabelOverlapConfig,
   LabelType,

package/dist/shared/hooks/useContainerSize.js

@@ -8,7 +8,11 @@ function useContainerSize(containerRef) {
       for (let entry of entries) {
         setContainerSize({
           width: entry.contentRect.width,
-          height: entry.contentRect.height
+          height: entry.contentRect.height,
+          left: entry.contentRect.left,
+          right: entry.contentRect.right,
+          bottom: entry.contentRect.bottom,
+          top: entry.contentRect.top
         });
       }
     });

package/package.json

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