@guardian/interactive-component-library 0.2.0-rc3 → 0.2.0

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

@@ -1,65 +0,0 @@
-import { Style } from "../styles/Style.js";
-import { Stroke } from "../styles/Stroke.js";
-import { Fill } from "../styles/Fill.js";
-function interpolateStyles(firstStyle, secondStyle, interpolateColors, interpolateNumbers) {
-  const fillInterpolator = interpolateFill(
-    firstStyle.fill,
-    secondStyle.fill,
-    interpolateColors,
-    interpolateNumbers
-  );
-  const strokeInterpolator = interpolateStroke(
-    firstStyle.stroke,
-    secondStyle.stroke,
-    interpolateColors,
-    interpolateNumbers
-  );
-  return (t) => {
-    return new Style({
-      fill: fillInterpolator(t),
-      stroke: strokeInterpolator(t)
-    });
-  };
-}
-function interpolateFill(fillA, fillB, interpolateColors, interpolateNumbers) {
-  const colorInterpolator = interpolateColors(
-    (fillA == null ? void 0 : fillA.color) ?? "transparent",
-    (fillB == null ? void 0 : fillB.color) ?? "transparent"
-  );
-  const opacityInterpolator = interpolateNumbers(
-    (fillA == null ? void 0 : fillA.opacity) ?? 1,
-    (fillB == null ? void 0 : fillB.opacity) ?? 1
-  );
-  return (t) => {
-    return new Fill({
-      color: colorInterpolator(t),
-      opacity: opacityInterpolator(t)
-    });
-  };
-}
-function interpolateStroke(strokeA, strokeB, interpolateColors, interpolateNumbers) {
-  const colorInterpolator = interpolateColors(
-    (strokeA == null ? void 0 : strokeA.color) ?? "transparent",
-    (strokeB == null ? void 0 : strokeB.color) ?? "transparent"
-  );
-  const opacityInterpolator = interpolateNumbers(
-    (strokeA == null ? void 0 : strokeA.opacity) ?? 1,
-    (strokeB == null ? void 0 : strokeB.opacity) ?? 1
-  );
-  const widthInterpolator = interpolateNumbers(
-    (strokeA == null ? void 0 : strokeA.width) ?? 1,
-    (strokeB == null ? void 0 : strokeB.width) ?? 1
-  );
-  return (t) => {
-    return new Stroke({
-      color: colorInterpolator(t),
-      opacity: opacityInterpolator(t),
-      width: widthInterpolator(t)
-    });
-  };
-}
-export {
-  interpolateFill,
-  interpolateStroke,
-  interpolateStyles
-};

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

@@ -1,52 +0,0 @@
-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[]}} TextLayerComponentProps */
-export class TextLayer {
-    /** @param {TextLayerComponentProps} props */
-    static Component({ features, 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[];
-};

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

@@ -1,111 +0,0 @@
-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";
-class TextLayer {
-  /** @param {TextLayerComponentProps} props */
-  static Component({
-    features,
-    style,
-    minZoom,
-    opacity,
-    declutter,
-    drawCollisionBoxes
-  }) {
-    const { registerLayer } = useContext(MapContext);
-    const layer = useMemo(
-      () => TextLayer.with(features, {
-        style,
-        minZoom,
-        opacity,
-        declutter,
-        drawCollisionBoxes
-      }),
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [features, 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

@@ -1,53 +0,0 @@
-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;
-    getExtent(): any;
-    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

@@ -1,132 +0,0 @@
-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;
-    };
-  }
-  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

@@ -1,3 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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;
-}

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

@@ -1,12 +0,0 @@
-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

@@ -1,6 +0,0 @@
-export class FeatureRenderer {
-    drawingFunction: any;
-    setStyle(style: any): void;
-    style: any;
-    render(frameState: any, feature: any, context: any): void;
-}

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

@@ -1,46 +0,0 @@
-import { geoPath } from "d3-geo";
-import { validateGeometries, generateDebugUrl } from "../util/debug.js";
-class FeatureRenderer {
-  constructor() {
-    this.drawingFunction = geoPath();
-  }
-  setStyle(style) {
-    this.style = style;
-  }
-  render(frameState, feature, context) {
-    if (!this.style) {
-      return;
-    }
-    const { projection, transform, pixelRatio } = frameState.viewState;
-    const { stroke, fill } = this.style;
-    this.drawingFunction.context(context);
-    context.beginPath();
-    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
-        );
-      }
-    }
-    for (const geometry of geometries) {
-      this.drawingFunction(geometry);
-    }
-    if (fill) {
-      context.fillStyle = fill.getRgba();
-      context.fill();
-    }
-    if (stroke) {
-      context.lineWidth = stroke.width * pixelRatio / transform.k;
-      context.strokeStyle = stroke.getRgba();
-      context.stroke();
-    }
-  }
-}
-export {
-  FeatureRenderer
-};

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

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

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

@@ -1,53 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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;
-    getElementBBox(element: any, position: any): {
-        minX: number;
-        minY: number;
-        maxX: number;
-        maxY: number;
-    };
-    getCollisionBoxElement(bbox: any): HTMLDivElement;
-}