@guardian/interactive-component-library 0.3.0 → 0.3.2-rc1

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

@@ -0,0 +1,52 @@
+import { VectorSource } from '../sources/VectorSource';
+import { Style } from '../styles';
+import { TextLayerRenderer } from '../renderers/TextLayerRenderer';
+import { Dispatcher } from '../events/Dispatcher';
+/** @typedef {Omit<ConstructorParameters<typeof TextLayer>[0], "source">} TextLayerOptions */
+/** @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;
+    /**
+     * @param {import("../Feature").Feature[]} features
+     * @param {TextLayerOptions} options
+     */
+    static with(features: import('../Feature').Feature[], options: TextLayerOptions): TextLayer;
+    /**
+     * @constructor
+     * @param {Object} params
+     * @param {VectorSource} params.source
+     * @param {Style | (() => Style)} [params.style=undefined]
+     * @param {number} [params.minZoom=0]
+     * @param {number} [params.opacity=1]
+     * @param {boolean} [params.declutter=true]
+     * @param {boolean} [params.drawCollisionBoxes=false]
+     */
+    constructor({ source, style, minZoom, opacity, declutter, drawCollisionBoxes, }: {
+        source: VectorSource;
+        style?: Style | (() => Style);
+        minZoom?: number;
+        opacity?: number;
+        declutter?: boolean;
+        drawCollisionBoxes?: boolean;
+    });
+    source: VectorSource;
+    _style: Style | (() => Style);
+    minZoom: number;
+    opacity: number;
+    declutter: boolean;
+    drawCollisionBoxes: boolean;
+    renderer: TextLayerRenderer;
+    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;
+}
+export type TextLayerOptions = Omit<ConstructorParameters<typeof TextLayer>[0], "source">;
+export type TextLayerComponentProps = TextLayerOptions & {
+    features: import('../Feature').Feature[] | import('../FeatureCollection').FeatureCollection;
+};

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

@@ -0,0 +1,118 @@
+import { TextLayerRenderer } from "../renderers/TextLayerRenderer.js";
+import { Style } from "../styles/Style.js";
+import { Text } from "../styles/Text.js";
+import { Dispatcher } from "../events/Dispatcher.js";
+import { combineExtents } from "../util/extent.js";
+import { MapEvent } from "../events/MapEvent.js";
+import { VectorSource } from "../sources/VectorSource.js";
+import { MapContext } from "../../context/MapContext.js";
+import { useContext, useMemo, useEffect } from "preact/hooks";
+import { FeatureCollection } from "../FeatureCollection.js";
+class TextLayer {
+  /** @param {TextLayerComponentProps} props */
+  static Component({
+    features: featureCollection,
+    style,
+    minZoom,
+    opacity,
+    declutter,
+    drawCollisionBoxes
+  }) {
+    const { registerLayer } = useContext(MapContext);
+    const layer = useMemo(
+      () => {
+        const features = featureCollection instanceof FeatureCollection ? featureCollection.features : (
+          /** @type {import("../Feature").Feature[]} */
+          featureCollection
+        );
+        return TextLayer.with(features, {
+          style,
+          minZoom,
+          opacity,
+          declutter,
+          drawCollisionBoxes
+        });
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [featureCollection, minZoom, opacity, declutter, drawCollisionBoxes]
+    );
+    registerLayer(layer);
+    useEffect(() => {
+      layer.style = style;
+    }, [style]);
+    return null;
+  }
+  /**
+   * @param {import("../Feature").Feature[]} features
+   * @param {TextLayerOptions} options
+   */
+  static with(features, options) {
+    const source = new VectorSource({ features });
+    return new TextLayer({ source, ...options });
+  }
+  /**
+   * @constructor
+   * @param {Object} params
+   * @param {VectorSource} params.source
+   * @param {Style | (() => Style)} [params.style=undefined]
+   * @param {number} [params.minZoom=0]
+   * @param {number} [params.opacity=1]
+   * @param {boolean} [params.declutter=true]
+   * @param {boolean} [params.drawCollisionBoxes=false]
+   */
+  constructor({
+    source,
+    style,
+    minZoom = 0,
+    opacity = 1,
+    declutter = true,
+    drawCollisionBoxes = false
+  }) {
+    this.source = source;
+    this._style = style;
+    this.minZoom = minZoom;
+    this.opacity = opacity;
+    this.declutter = declutter;
+    this.drawCollisionBoxes = drawCollisionBoxes;
+    this.renderer = new TextLayerRenderer(this);
+    this.dispatcher = new Dispatcher(this);
+  }
+  tearDown() {
+    this.dispatcher = null;
+  }
+  get style() {
+    if (this._style) return this._style;
+    const defaultStyle = new Style({
+      text: new Text()
+    });
+    return defaultStyle;
+  }
+  set style(style) {
+    this._style = style;
+    this.dispatcher.dispatch(MapEvent.CHANGE);
+  }
+  getExtent() {
+    if (this._extent) return this._extent;
+    const features = this.source.getFeatures();
+    const extent = features.reduce((combinedExtent, feature) => {
+      const featureExtent = feature.getExtent();
+      if (!combinedExtent) return featureExtent;
+      return combineExtents(featureExtent, combinedExtent);
+    }, null);
+    this._extent = extent;
+    return extent;
+  }
+  getStyleFunction() {
+    const style = this.style;
+    if (typeof style === "function") return style;
+    return () => {
+      return style;
+    };
+  }
+  renderFrame(frameState, targetElement) {
+    return this.renderer.renderFrame(frameState, targetElement);
+  }
+}
+export {
+  TextLayer
+};

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

@@ -0,0 +1,57 @@
+import { Dispatcher } from '../events';
+import { VectorLayerRenderer } from '../renderers/VectorLayerRenderer';
+import { Style } from '../styles';
+import { VectorSource } from '../sources/VectorSource';
+/** @typedef {Omit<ConstructorParameters<typeof VectorLayer>[0], "source">} VectorLayerOptions */
+/** @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;
+    /**
+     * @param {import("../Feature").Feature[]} features
+     * @param {VectorLayerOptions} options
+     */
+    static with(features: import('../Feature').Feature[], options: VectorLayerOptions): VectorLayer;
+    /**
+     * @param {Object} params
+     * @param {VectorSource} params.source
+     * @param {Style | (() => Style)} [params.style=undefined]
+     * @param {number} [params.minZoom=0]
+     * @param {number} [params.opacity=1]
+     * @param {boolean} [params.hitDetectionEnabled=true]
+     */
+    constructor({ source, style, minZoom, opacity, hitDetectionEnabled, }: {
+        source: VectorSource;
+        style?: Style | (() => Style);
+        minZoom?: number;
+        opacity?: number;
+        hitDetectionEnabled?: boolean;
+    });
+    dispatcher: Dispatcher;
+    renderer: VectorLayerRenderer;
+    set source(source: any);
+    get source(): any;
+    _style: Style | (() => Style);
+    minZoom: number;
+    opacity: number;
+    hitDetectionEnabled: boolean;
+    _source: any;
+    _extent: any;
+    setRawProjection(projection: any): void;
+    projection: any;
+    tearDown(): void;
+    set style(style: Style | (() => Style));
+    get style(): Style | (() => Style);
+    getStyleFunction(): () => Style;
+    /**
+     * 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.
+     */
+    getExtent(): import('../util').Extent | null;
+    findFeatures(coordinate: any): any;
+    renderFrame(frameState: any, targetElement: any): any;
+}
+export type VectorLayerOptions = Omit<ConstructorParameters<typeof VectorLayer>[0], "source">;
+export type VectorLayerComponentProps = VectorLayerOptions & {
+    features: import('../Feature').Feature[] | import('../FeatureCollection').FeatureCollection;
+};

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

@@ -0,0 +1,136 @@
+import { VectorLayerRenderer } from "../renderers/VectorLayerRenderer.js";
+import { Style } from "../styles/Style.js";
+import { Stroke } from "../styles/Stroke.js";
+import { combineExtents } from "../util/extent.js";
+import { Dispatcher } from "../events/Dispatcher.js";
+import { MapEvent } from "../events/MapEvent.js";
+import { VectorSource } from "../sources/VectorSource.js";
+import { useContext, useMemo, useEffect } from "preact/hooks";
+import { MapContext } from "../../context/MapContext.js";
+import { FeatureCollection } from "../FeatureCollection.js";
+class VectorLayer {
+  /** @param {VectorLayerComponentProps} props */
+  static Component({
+    features: featureCollection,
+    style,
+    minZoom,
+    opacity,
+    hitDetectionEnabled = true
+  }) {
+    const { registerLayer } = useContext(MapContext);
+    const layer = useMemo(
+      () => {
+        const features = featureCollection instanceof FeatureCollection ? featureCollection.features : (
+          /** @type {import("../Feature").Feature[]} */
+          featureCollection
+        );
+        return VectorLayer.with(features, {
+          style,
+          minZoom,
+          opacity,
+          hitDetectionEnabled
+        });
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [featureCollection, minZoom, opacity, hitDetectionEnabled]
+    );
+    registerLayer(layer);
+    useEffect(() => {
+      layer.style = style;
+    }, [style]);
+    return null;
+  }
+  /**
+   * @param {import("../Feature").Feature[]} features
+   * @param {VectorLayerOptions} options
+   */
+  static with(features, options) {
+    const source = new VectorSource({ features });
+    return new VectorLayer({ source, ...options });
+  }
+  /**
+   * @param {Object} params
+   * @param {VectorSource} params.source
+   * @param {Style | (() => Style)} [params.style=undefined]
+   * @param {number} [params.minZoom=0]
+   * @param {number} [params.opacity=1]
+   * @param {boolean} [params.hitDetectionEnabled=true]
+   */
+  constructor({
+    source,
+    style,
+    minZoom = 0,
+    opacity = 1,
+    hitDetectionEnabled = true
+  }) {
+    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;
+  }
+  get source() {
+    return this._source;
+  }
+  set source(source) {
+    if (this._source && source !== this._source) {
+      this._source.tearDown();
+    }
+    this._source = source;
+    source.on(MapEvent.CHANGE, () => {
+      this._extent = null;
+      this.dispatcher.dispatch(MapEvent.CHANGE);
+    });
+  }
+  setRawProjection(projection) {
+    this.projection = projection;
+  }
+  tearDown() {
+    this.dispatcher = null;
+  }
+  get style() {
+    if (this._style) return this._style;
+    const defaultStyle = new Style({
+      stroke: new Stroke()
+    });
+    return defaultStyle;
+  }
+  set style(style) {
+    this._style = style;
+    this.dispatcher.dispatch(MapEvent.CHANGE);
+  }
+  getStyleFunction() {
+    const style = this.style;
+    if (typeof style === "function") return style;
+    return () => {
+      return style;
+    };
+  }
+  /**
+   * 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.
+   */
+  getExtent() {
+    if (this._extent) return this._extent;
+    const features = this.source.getFeatures();
+    const extent = features.reduce((combinedExtent, feature) => {
+      const featureExtent = feature.getExtent();
+      if (!combinedExtent) return featureExtent;
+      return combineExtents(featureExtent, combinedExtent);
+    }, null);
+    this._extent = extent;
+    return extent;
+  }
+  findFeatures(coordinate) {
+    if (!this.hitDetectionEnabled) return;
+    return this.source.getFeaturesAtCoordinate(coordinate);
+  }
+  renderFrame(frameState, targetElement) {
+    return this.renderer.renderFrame(frameState, targetElement);
+  }
+}
+export {
+  VectorLayer
+};

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

@@ -0,0 +1,3 @@
+export * from './TextLayer';
+export * from './VectorLayer';
+export type Layer = import('./TextLayer').TextLayer | import('./VectorLayer').VectorLayer;

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

@@ -0,0 +1,27 @@
+/**
+ * Projection functions for different map projections.
+ */
+export type Projection = ProjectionFunction;
+export namespace Projection {
+    let geoIdentity: {
+        (p: any): number[];
+        invert(p: any): number[];
+        stream(stream: any): any;
+        postclip(_: any, ...args: any[]): any;
+        clipExtent(_: any, ...args: any[]): any[][] | any;
+        scale(_: any, ...args: any[]): number | any;
+        translate(_: any, ...args: any[]): number[] | any;
+        angle(_: any, ...args: any[]): number | any;
+        reflectX(_: any, ...args: any[]): boolean | any;
+        reflectY(_: any, ...args: any[]): boolean | any;
+        fitExtent(extent: any, object: any): any;
+        fitSize(size: any, object: any): any;
+        fitWidth(width: any, object: any): any;
+        fitHeight(height: any, object: any): any;
+    };
+    let geoMercator: any;
+    let geoAlbersUS: any;
+    let geoAlbersUKComposite: any;
+    let geoAlbersEngland: any;
+}
+export type ProjectionFunction = (point: [number, number]) => [number, number] | null;

package/dist/components/molecules/canvas-map/lib/projection/index.js

@@ -0,0 +1,12 @@
+import { geoIdentity, geoMercator, geoAlbersUsa, geoAlbers } from "d3-geo";
+import { geoAlbersUk } from "d3-composite-projections";
+const Projection = {
+  geoIdentity: geoIdentity(),
+  geoMercator: geoMercator(),
+  geoAlbersUS: geoAlbersUsa().scale(1070).translate([487.5, 305]),
+  geoAlbersUKComposite: geoAlbersUk(),
+  geoAlbersEngland: geoAlbers().center([0, 52.7]).rotate([1.1743, 0]).parallels([50, 54])
+};
+export {
+  Projection
+};

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

@@ -0,0 +1,16 @@
+export class FeatureRenderer {
+    drawingFunction: any;
+    setStyle(style: any): void;
+    style: any;
+    setFeature(feature: any): void;
+    feature: any;
+    render(frameState: any, context: any): void;
+    drawPath(geometries: any, context: any, clipPath?: boolean): void;
+    drawStroke(frameState: any, context: any, { style, width: strokeWidth, position }: {
+        style: any;
+        width: any;
+        position: any;
+    }): void;
+    createCanvas(width: any, height: any): HTMLCanvasElement;
+    getProjectedExtent(projection: any): any;
+}

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

@@ -0,0 +1,90 @@
+import { geoPath } from "d3-geo";
+import { validateGeometries, generateDebugUrl } from "../util/debug.js";
+import { StrokePosition } from "../styles/Stroke.js";
+import { combineExtents } from "../util/extent.js";
+class FeatureRenderer {
+  constructor() {
+    this.drawingFunction = geoPath();
+  }
+  setStyle(style) {
+    this.style = style;
+  }
+  setFeature(feature) {
+    this.feature = feature;
+  }
+  render(frameState, context) {
+    if (!this.style) {
+      return;
+    }
+    const feature = this.feature;
+    const { projection, transform, pixelRatio } = frameState.viewState;
+    const { stroke, fill } = this.style;
+    const geometries = feature.getProjectedGeometries(projection);
+    if (frameState.debug) {
+      try {
+        validateGeometries(geometries);
+      } catch {
+        console.error(
+          `Invalid geometry. Feature skipped during rendering. Click here to inspect geometry: ${generateDebugUrl(feature)} 
+`,
+          feature
+        );
+      }
+    }
+    this.drawPath(geometries, context);
+    if (fill) {
+      context.fillStyle = fill.getRgba();
+      context.fill();
+    }
+    if (stroke) {
+      context.save();
+      this.drawStroke(frameState, context, {
+        style: stroke.getRgba(),
+        width: stroke.width / transform.k * pixelRatio,
+        position: stroke.position
+      });
+      context.restore();
+    }
+  }
+  drawPath(geometries, context, clipPath = false) {
+    this.drawingFunction.context(context);
+    context.beginPath();
+    for (const geometry of geometries) {
+      this.drawingFunction(geometry);
+    }
+    if (clipPath) {
+      context.clip();
+    } else {
+      context.closePath();
+    }
+  }
+  drawStroke(frameState, context, { style, width: strokeWidth, position }) {
+    const { projection } = frameState.viewState;
+    context.lineWidth = strokeWidth;
+    context.strokeStyle = style;
+    if (position === StrokePosition.INSIDE) {
+      context.lineWidth = strokeWidth * 2;
+      const geometries = this.feature.getProjectedGeometries(projection);
+      this.drawPath(geometries, context, true);
+    }
+    context.stroke();
+  }
+  createCanvas(width, height) {
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    return canvas;
+  }
+  getProjectedExtent(projection) {
+    const geometries = this.feature.getProjectedGeometries(projection);
+    const extent = geometries.reduce((combinedExtent, geometry) => {
+      const bounds = this.drawingFunction.bounds(geometry);
+      if (!combinedExtent) return bounds;
+      return combineExtents(bounds, combinedExtent);
+    }, null);
+    return extent;
+  }
+}
+export {
+  FeatureRenderer
+};

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

@@ -0,0 +1,6 @@
+export class MapRenderer {
+    constructor(map: any);
+    map: any;
+    _element: HTMLDivElement;
+    renderFrame(frameState: any): void;
+}

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

@@ -0,0 +1,53 @@
+import { replaceChildren } from "../util/dom.js";
+import RBush from "rbush";
+class MapRenderer {
+  constructor(map) {
+    this.map = map;
+    this._element = document.createElement("div");
+    this._element.className = "gv-layer-container";
+    const style = this._element.style;
+    style.position = "absolute";
+    style.width = "100%";
+    style.height = "100%";
+    style.zIndex = "0";
+    const container = map.viewPort;
+    container.insertBefore(this._element, container.firstChild || null);
+  }
+  renderFrame(frameState) {
+    const { zoomLevel, projection } = frameState.viewState;
+    const layers = this.map.layers;
+    const mapElements = [];
+    let previousElement = null;
+    const visibleLayers = layers.filter((layer) => {
+      return zoomLevel > (layer.minZoom || 0);
+    });
+    const renderLayer = (layer, declutterTree2) => {
+      const viewState = frameState.viewState;
+      if (layer.projection) {
+        viewState.projection = layer.projection;
+      }
+      const element = layer.renderFrame(
+        { ...frameState, viewState, declutterTree: declutterTree2 },
+        previousElement
+      );
+      if (element !== previousElement) {
+        mapElements.push(element);
+        previousElement = element;
+      }
+      viewState.projection = projection;
+    };
+    const baseLayers = visibleLayers.filter((layer) => !layer.declutter);
+    for (const layer of baseLayers) {
+      renderLayer(layer);
+    }
+    const declutterTree = new RBush();
+    const layersToDeclutter = [...visibleLayers].filter((layer) => !!layer.declutter).reverse();
+    for (const layer of layersToDeclutter) {
+      renderLayer(layer, declutterTree);
+    }
+    replaceChildren(this._element, mapElements);
+  }
+}
+export {
+  MapRenderer
+};

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

@@ -0,0 +1,21 @@
+import { FeatureRenderer } from './FeatureRenderer';
+export class TextLayerRenderer {
+    constructor(layer: any);
+    layer: any;
+    featureRenderer: FeatureRenderer;
+    _element: HTMLDivElement;
+    renderFrame(frameState: any, targetElement: any): any;
+    getTextElementWithID(id: any): Element;
+    styleTextElement(element: any, textStyle: any, position: any): void;
+    getElementSize(element: any): {
+        width: any;
+        height: any;
+    };
+    getElementBBox(element: any, textStyle: any, position: any): {
+        minX: number;
+        minY: number;
+        maxX: number;
+        maxY: number;
+    };
+    getCollisionBoxElement(bbox: any): HTMLDivElement;
+}