@guardian/interactive-component-library 0.5.2 → 0.5.3

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

@@ -28,25 +28,59 @@ export class TextLayer {
         declutter?: boolean;
         drawCollisionBoxes?: 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;
+    /**
+     * @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, }: TextLayerComponentProps): any;
     namespace Component {
         let displayName: string;
     }

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

@@ -45,7 +45,7 @@ class TextLayer {
     useEffect(() => {
       layer.style = style;
     }, [style]);
-    return false;
+    return null;
   }
   /**
    * @param {import("../Feature").Feature[]} features
@@ -107,6 +107,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/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,66 @@
 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;
+    /**
+     * @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;
+    styleTextElement(element: any, textStyle: any, position: any): {
+        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;
 }

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

@@ -1,6 +1,9 @@
 import { FeatureRenderer } from "./FeatureRenderer.js";
 import { replaceChildren } from "../util/dom.js";
 class TextLayerRenderer {
+  /**
+   * @param {import("../layers/TextLayer").TextLayer} layer
+   */
   constructor(layer) {
     this.layer = layer;
     this.featureRenderer = new FeatureRenderer();
@@ -13,13 +16,18 @@ class TextLayerRenderer {
     style.pointerEvents = "none";
     style.overflow = "hidden";
   }
-  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 +38,24 @@ class TextLayerRenderer {
         );
       }
       const styleFunction = feature.getStyleFunction() || this.layer.getStyleFunction();
-      const featureStyle = styleFunction(feature);
+      const featureStyle = styleFunction(feature, transform.k);
       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 +65,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);
@@ -82,6 +138,7 @@ class TextLayerRenderer {
     style.textShadow = textStyle.textShadow;
     const { width, height } = this.getElementSize(element);
     style.transform = textStyle.getTransform(width, height);
+    return { width, height };
   }
   getElementSize(element) {
     if (!element.parentElement) {
@@ -93,29 +150,85 @@ 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;
+    }
+    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);
+    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) {
+      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}%`
     };
   }
   getCollisionBoxElement(bbox) {
@@ -129,6 +242,40 @@ 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();
+      }
+    }
+  }
 }
 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;
 }