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

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

@@ -0,0 +1,133 @@
+import { FeatureRenderer } from "./FeatureRenderer.js";
+import { replaceChildren } from "../util/dom.js";
+class TextLayerRenderer {
+  constructor(layer) {
+    this.layer = layer;
+    this.featureRenderer = new FeatureRenderer();
+    this._element = document.createElement("div");
+    this._element.className = "gv-text-layer";
+    const style = this._element.style;
+    style.position = "absolute";
+    style.width = "100%";
+    style.height = "100%";
+    style.pointerEvents = "none";
+    style.overflow = "hidden";
+  }
+  renderFrame(frameState, targetElement) {
+    if (this.layer.opacity === 0) return targetElement;
+    const { declutterTree } = frameState;
+    const { projection, viewPortSize, sizeInPixels, visibleExtent, transform } = frameState.viewState;
+    this._element.style.opacity = this.layer.opacity;
+    const source = this.layer.source;
+    const features = source.getFeaturesInExtent(visibleExtent);
+    const textElements = [];
+    for (const feature of features) {
+      const geometries = feature.getProjectedGeometries(projection);
+      const point = geometries.find((d) => d.type === "Point");
+      if (!point) {
+        throw new Error(
+          `Expected Point geometry for feature in TextLayer: ${feature}`
+        );
+      }
+      const styleFunction = feature.getStyleFunction() || this.layer.getStyleFunction();
+      const featureStyle = styleFunction(feature);
+      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, {
+        x: relativeX * viewPortSize[0],
+        y: relativeY * viewPortSize[1]
+      });
+      if (declutterTree.collides(bbox)) {
+        continue;
+      }
+      declutterTree.insert(bbox);
+      if (this.layer.drawCollisionBoxes) {
+        const collisionBoxDebugElement = this.getCollisionBoxElement(bbox);
+        textElements.push(collisionBoxDebugElement);
+      }
+      textElements.push(textElement);
+    }
+    replaceChildren(this._element, textElements);
+    return this._element;
+  }
+  getTextElementWithID(id) {
+    const elementId = `text-feature-${id}`;
+    let textElement = this._element.querySelector(`#${elementId}`);
+    if (!textElement) {
+      textElement = document.createElement("div");
+      textElement.id = elementId;
+    }
+    return textElement;
+  }
+  styleTextElement(element, textStyle, position) {
+    const style = element.style;
+    style.position = "absolute";
+    style.left = position.left;
+    style.top = position.top;
+    style.textAlign = "center";
+    style.whiteSpace = "nowrap";
+    style.fontFamily = textStyle.fontFamily;
+    style.fontSize = textStyle.fontSize;
+    style.fontWeight = textStyle.fontWeight;
+    style.lineHeight = textStyle.lineHeight;
+    style.color = textStyle.color;
+    style.textShadow = textStyle.textShadow;
+    const { width, height } = this.getElementSize(element);
+    style.transform = textStyle.getTransform(width, height);
+  }
+  getElementSize(element) {
+    if (!element.parentElement) {
+      document.body.appendChild(element);
+    }
+    const { width, height } = element.getBoundingClientRect();
+    if (element.parentElement !== this._element) {
+      element.remove();
+    }
+    return { width, height };
+  }
+  getElementBBox(element, textStyle, position) {
+    const collissionPadding = {
+      top: 2,
+      right: 2,
+      bottom: 2,
+      left: 2
+    };
+    const { width, height } = this.getElementSize(element);
+    const { x: translateX, y: translateY } = textStyle.getTranslation(
+      width,
+      height
+    );
+    const minX = Math.floor(position.x + translateX - collissionPadding.left);
+    const minY = Math.floor(position.y + translateY - collissionPadding.top);
+    return {
+      minX,
+      minY,
+      maxX: Math.ceil(
+        minX + width + collissionPadding.left + collissionPadding.right
+      ),
+      maxY: Math.ceil(
+        minY + height + collissionPadding.top + collissionPadding.bottom
+      )
+    };
+  }
+  getCollisionBoxElement(bbox) {
+    const element = document.createElement("div");
+    const style = element.style;
+    style.position = "absolute";
+    style.left = `${bbox.minX}px`;
+    style.top = `${bbox.minY}px`;
+    style.width = `${bbox.maxX - bbox.minX}px`;
+    style.height = `${bbox.maxY - bbox.minY}px`;
+    style.border = "1px solid red";
+    return element;
+  }
+}
+export {
+  TextLayerRenderer
+};

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

@@ -0,0 +1,10 @@
+import { FeatureRenderer } from './FeatureRenderer';
+export class VectorLayerRenderer {
+    constructor(layer: any);
+    layer: any;
+    featureRenderer: FeatureRenderer;
+    renderFrame(frameState: any, targetElement: any): any;
+    getOrCreateContainer(targetElement: any, sizeInPixels: any): any;
+    _container: any;
+    createContainer(): HTMLDivElement;
+}

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

@@ -0,0 +1,79 @@
+import { FeatureRenderer } from "./FeatureRenderer.js";
+class VectorLayerRenderer {
+  constructor(layer) {
+    this.layer = layer;
+    this.featureRenderer = new FeatureRenderer();
+  }
+  renderFrame(frameState, targetElement) {
+    if (this.layer.opacity === 0) return targetElement;
+    const { projection, sizeInPixels, visibleExtent, transform } = frameState.viewState;
+    const container = this.getOrCreateContainer(targetElement, sizeInPixels);
+    const context = container.firstElementChild.getContext("2d");
+    context.save();
+    context.translate(transform.x, transform.y);
+    context.scale(transform.k, transform.k);
+    context.lineJoin = "round";
+    context.lineCap = "round";
+    context.globalAlpha = this.layer.opacity;
+    const source = this.layer.source;
+    const features = source.getFeaturesInExtent(visibleExtent);
+    for (const feature of features) {
+      const styleFunction = feature.getStyleFunction() || this.layer.getStyleFunction();
+      const featureStyle = styleFunction(feature);
+      if ((featureStyle == null ? void 0 : featureStyle.stroke) || (featureStyle == null ? void 0 : featureStyle.fill)) {
+        context.save();
+        this.featureRenderer.setStyle(featureStyle);
+        this.featureRenderer.setFeature(feature);
+        this.featureRenderer.render(frameState, context);
+        context.restore();
+      }
+    }
+    if (Object.prototype.hasOwnProperty.call(projection, "getCompositionBorders")) {
+      context.beginPath();
+      context.lineWidth = 1 / transform.k;
+      context.strokeStyle = "#999";
+      projection.drawCompositionBorders(context);
+      context.stroke();
+    }
+    context.restore();
+    return container;
+  }
+  getOrCreateContainer(targetElement, sizeInPixels) {
+    let container = null;
+    let containerReused = false;
+    let canvas = targetElement && targetElement.firstElementChild;
+    if (canvas instanceof HTMLCanvasElement) {
+      container = targetElement;
+      containerReused = true;
+    } else if (this._container) {
+      container = this._container;
+    } else {
+      container = this.createContainer();
+    }
+    if (!containerReused) {
+      const canvas2 = container.firstElementChild;
+      canvas2.width = sizeInPixels[0];
+      canvas2.height = sizeInPixels[1];
+    }
+    this._container = container;
+    return container;
+  }
+  createContainer() {
+    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%";
+    container.appendChild(canvas);
+    return container;
+  }
+}
+export {
+  VectorLayerRenderer
+};

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

@@ -0,0 +1,15 @@
+import { Dispatcher } from '../events';
+import { default as RBush } from 'rbush';
+export class VectorSource {
+    constructor({ features }: {
+        features: any;
+    });
+    dispatcher: Dispatcher;
+    _featuresRtree: RBush;
+    tearDown(): void;
+    getFeatures(): any;
+    getFeaturesAtCoordinate(coordinate: any): any[];
+    getFeaturesInExtent(extent: any): any[];
+    setFeatures(features: any): void;
+    _features: any;
+}

package/dist/components/molecules/canvas-map/lib/sources/VectorSource.js

@@ -0,0 +1,53 @@
+import RBush from "rbush";
+import knn from "rbush-knn";
+import { Dispatcher } from "../events/Dispatcher.js";
+import { MapEvent } from "../events/MapEvent.js";
+class VectorSource {
+  constructor({ features }) {
+    this.dispatcher = new Dispatcher(this);
+    this._featuresRtree = new RBush();
+    this.setFeatures(features);
+  }
+  tearDown() {
+    this.dispatcher = null;
+  }
+  getFeatures() {
+    return this._features;
+  }
+  getFeaturesAtCoordinate(coordinate) {
+    const [x, y] = coordinate;
+    const items = knn(this._featuresRtree, x, y, 10, (d) => {
+      return d.feature.containsCoordinate(coordinate);
+    }).map((d) => {
+      const midX = d.minX + (d.minX + d.maxX) / 2;
+      const midY = d.minY + (d.minY + d.maxY) / 2;
+      d.distance = Math.hypot(midX - x, midY - y);
+      return d;
+    });
+    items.sort((a, b) => a.distance - b.distance);
+    return items.map((d) => d.feature);
+  }
+  getFeaturesInExtent(extent) {
+    const [minX, minY, maxX, maxY] = extent;
+    const features = this._featuresRtree.search({ minX, minY, maxX, maxY }).map((d) => d.feature);
+    return features;
+  }
+  setFeatures(features) {
+    this._featuresRtree.clear();
+    for (const feature of features) {
+      const { minX, minY, maxX, maxY } = feature.getExtent();
+      this._featuresRtree.insert({
+        minX: Math.floor(minX),
+        minY: Math.floor(minY),
+        maxX: Math.ceil(maxX),
+        maxY: Math.ceil(maxY),
+        feature
+      });
+    }
+    this._features = features;
+    this.dispatcher.dispatch(MapEvent.CHANGE);
+  }
+}
+export {
+  VectorSource
+};

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

@@ -0,0 +1,7 @@
+export class Fill {
+    constructor(options: any);
+    color: any;
+    opacity: any;
+    _getRgba: (...arg0: any[]) => string;
+    getRgba(): string;
+}

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

@@ -0,0 +1,15 @@
+import { memoise } from "../util/memoise.js";
+import { toRgba } from "../util/toRgba.js";
+class Fill {
+  constructor(options) {
+    this.color = (options == null ? void 0 : options.color) || "#CCC";
+    this.opacity = (options == null ? void 0 : options.opacity) || 1;
+    this._getRgba = memoise(toRgba);
+  }
+  getRgba() {
+    return this._getRgba(this.color, this.opacity);
+  }
+}
+export {
+  Fill
+};

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

@@ -0,0 +1,24 @@
+/**
+ * *
+ */
+export type StrokePosition = string;
+export namespace StrokePosition {
+    let CENTER: string;
+    let INSIDE: string;
+}
+/**
+ * @class Stroke
+ * @property {string} [color="#121212"] - The stroke color
+ * @property {number} [width=0.5] - The stroke width
+ * @property {number} [opacity=1] - The stroke opacity
+ * @property {StrokePosition} [position="center"] - Where the shape's stroke is rendered (ignored if geometry is not a Polygon)
+ */
+export class Stroke {
+    constructor(options: any);
+    color: any;
+    width: any;
+    opacity: any;
+    position: any;
+    _getRgba: (...arg0: any[]) => string;
+    getRgba(): string;
+}

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

@@ -0,0 +1,22 @@
+import { memoise } from "../util/memoise.js";
+import { toRgba } from "../util/toRgba.js";
+const StrokePosition = {
+  CENTER: "center",
+  INSIDE: "inside"
+};
+class Stroke {
+  constructor(options) {
+    this.color = (options == null ? void 0 : options.color) || "#121212";
+    this.width = (options == null ? void 0 : options.width) || 0.5;
+    this.opacity = (options == null ? void 0 : options.opacity) || 1;
+    this.position = (options == null ? void 0 : options.position) || StrokePosition.CENTER;
+    this._getRgba = memoise(toRgba);
+  }
+  getRgba() {
+    return this._getRgba(this.color, this.opacity);
+  }
+}
+export {
+  Stroke,
+  StrokePosition
+};

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

@@ -0,0 +1,24 @@
+/**
+ * A function that takes a {@link import("../Feature").Feature} and returns a {@link Style}
+ *
+ * @typedef {function(import("../Feature").Feature):(Style)} StyleFunction
+ */
+/**
+ * Class representing a style.
+ * @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 {Object} properties.text - The text color of the style
+ */
+export class Style {
+    constructor(properties: any);
+    stroke: any;
+    fill: any;
+    text: any;
+    clone(): Style;
+}
+/**
+ * A function that takes a {@link import ("../Feature").Feature} and returns a {@link Style}
+ */
+export type StyleFunction = (arg0: import('../Feature').Feature) => (Style);

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

@@ -0,0 +1,17 @@
+class Style {
+  constructor(properties) {
+    this.stroke = properties == null ? void 0 : properties.stroke;
+    this.fill = properties == null ? void 0 : properties.fill;
+    this.text = properties == null ? void 0 : properties.text;
+  }
+  clone() {
+    return new Style({
+      stroke: this.stroke,
+      fill: this.fill,
+      text: this.text
+    });
+  }
+}
+export {
+  Style
+};

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

@@ -0,0 +1,146 @@
+/**
+ * @typedef TextStyle
+ * @property {string} content - The text to render
+ * @property {string} [id] - The id of the text element
+ * @property {TextAnchor} [anchor="center"] - The anchor point of the text}
+ * @property {number} [lineHeight=1.3] - The line height of the text
+ * @property {string} [color="#121212"] - The color of the text
+ * @property {string} [textShadow="1px 1px 0px #f6f6f6, -1px -1px 0px #f6f6f6, -1px 1px 0px #f6f6f6, 1px -1px #f6f6f6"] - The text shadow of the text
+ * @property {string} [fontFamily="var(--text-sans)"] - The font family of the text
+ * @property {string} [fontSize="17px"] - The font size of the text
+ * @property {string} [fontWeight="400"] - The font weight of the text
+ * @property {number} [radialOffset=0] - The radial offset of the text in ems
+ */
+/**
+ * Class that represents a text style
+ * @type Text
+ * @implements {TextStyle}
+ */
+export class Text implements TextStyle {
+    /**
+     * Create a text element style
+     * @constructor
+     * @param {TextStyle} [options] - Style options
+     */
+    constructor(options?: TextStyle);
+    content: any;
+    anchor: any;
+    fontFamily: any;
+    fontSize: any;
+    fontWeight: any;
+    lineHeight: any;
+    color: any;
+    textShadow: any;
+    radialOffset: any;
+    /**
+     * Get the relative translation for the text element based on its anchor. The translation does not take `radialOffset` into account
+     * @private
+     * @return {{x: number, y: number}} - The x and y translation in percentage points
+     */
+    private _getRelativeTranslation;
+    /**
+     * Get the translation for the text element in pixels
+     * @param {number} elementWidth - The width of the element
+     * @param {number} elementHeight - The height of the element
+     * @return {{x: number, y: number}} - The x and y translation in pixels
+     */
+    getTranslation(elementWidth: number, elementHeight: number): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Get the transform for the text element
+     * @param {number} elementWidth - The width of the element
+     * @param {number} elementHeight - The height of the element
+     * @return {string} - The transform for the text element
+     */
+    getTransform(elementWidth: number, elementHeight: number): string;
+}
+export type TextStyle = {
+    /**
+     * - The text to render
+     */
+    /**
+     * - The text to render
+     */
+    content: string;
+    /**
+     * - The id of the text element
+     */
+    /**
+     * - The id of the text element
+     */
+    id?: string;
+    /**
+     * - The anchor point of the text}
+     */
+    /**
+     * - The anchor point of the text}
+     */
+    anchor?: TextAnchor;
+    /**
+     * - The line height of the text
+     */
+    /**
+     * - The line height of the text
+     */
+    lineHeight?: number;
+    /**
+     * - The color of the text
+     */
+    /**
+     * - The color of the text
+     */
+    color?: string;
+    /**
+     * - The text shadow of the text
+     */
+    /**
+     * - The text shadow of the text
+     */
+    textShadow?: string;
+    /**
+     * - The font family of the text
+     */
+    /**
+     * - The font family of the text
+     */
+    fontFamily?: string;
+    /**
+     * - The font size of the text
+     */
+    /**
+     * - The font size of the text
+     */
+    fontSize?: string;
+    /**
+     * - The font weight of the text
+     */
+    /**
+     * - The font weight of the text
+     */
+    fontWeight?: string;
+    /**
+     * - The radial offset of the text in ems
+     */
+    /**
+     * - The radial offset of the text in ems
+     */
+    radialOffset?: number;
+};
+/**
+ * *
+ */
+type TextAnchor = string;
+declare namespace TextAnchor {
+    let TOP: string;
+    let BOTTOM: string;
+    let LEFT: string;
+    let RIGHT: string;
+    let CENTER: string;
+    let TOP_LEFT: string;
+    let TOP_RIGHT: string;
+    let BOTTOM_LEFT: string;
+    let BOTTOM_RIGHT: string;
+}
+export {};

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

@@ -0,0 +1,116 @@
+const TextAnchor = {
+  TOP: "top",
+  BOTTOM: "bottom",
+  LEFT: "left",
+  RIGHT: "right",
+  CENTER: "center",
+  TOP_LEFT: "top-left",
+  TOP_RIGHT: "top-right",
+  BOTTOM_LEFT: "bottom-left",
+  BOTTOM_RIGHT: "bottom-right"
+};
+class Text {
+  /**
+   * Create a text element style
+   * @constructor
+   * @param {TextStyle} [options] - Style options
+   */
+  constructor(options) {
+    this.content = options == null ? void 0 : options.content;
+    this.anchor = (options == null ? void 0 : options.anchor) || TextAnchor.CENTER;
+    this.fontFamily = (options == null ? void 0 : options.fontFamily) || "var(--text-sans)";
+    this.fontSize = (options == null ? void 0 : options.fontSize) || "17px";
+    this.fontWeight = (options == null ? void 0 : options.fontWeight) || "400";
+    this.lineHeight = (options == null ? void 0 : options.lineHeight) || 1.3;
+    this.color = (options == null ? void 0 : options.color) || "#121212";
+    this.textShadow = (options == null ? void 0 : options.textShadow) || "1px 1px 0px #f6f6f6, -1px -1px 0px #f6f6f6, -1px 1px 0px #f6f6f6, 1px -1px #f6f6f6";
+    this.radialOffset = (options == null ? void 0 : options.radialOffset) || 0;
+  }
+  /**
+   * Get the relative translation for the text element based on its anchor. The translation does not take `radialOffset` into account
+   * @private
+   * @return {{x: number, y: number}} - The x and y translation in percentage points
+   */
+  _getRelativeTranslation() {
+    switch (this.anchor) {
+      case TextAnchor.TOP:
+        return { x: -50, y: 0 };
+      case TextAnchor.BOTTOM:
+        return { x: -50, y: -100 };
+      case TextAnchor.LEFT:
+        return { x: 0, y: -50 };
+      case TextAnchor.RIGHT:
+        return { x: -100, y: -50 };
+      case TextAnchor.CENTER:
+        return { x: -50, y: -50 };
+      case TextAnchor.TOP_LEFT:
+        return { x: 0, y: 0 };
+      case TextAnchor.TOP_RIGHT:
+        return { x: -100, y: 0 };
+      case TextAnchor.BOTTOM_LEFT:
+        return { x: 0, y: -100 };
+      case TextAnchor.BOTTOM_RIGHT:
+        return { x: -100, y: -100 };
+      default:
+        return { x: 0, y: 0 };
+    }
+  }
+  /**
+   * Get the translation for the text element in pixels
+   * @param {number} elementWidth - The width of the element
+   * @param {number} elementHeight - The height of the element
+   * @return {{x: number, y: number}} - The x and y translation in pixels
+   */
+  getTranslation(elementWidth, elementHeight) {
+    const translate = this._getRelativeTranslation();
+    let x = translate.x / 100 * elementWidth;
+    let y = translate.y / 100 * elementHeight;
+    const radialOffsetInPixels = this.radialOffset * this.fontSize.replace("px", "");
+    switch (this.anchor) {
+      case TextAnchor.TOP:
+        y += radialOffsetInPixels;
+        break;
+      case TextAnchor.BOTTOM:
+        y -= radialOffsetInPixels;
+        break;
+      case TextAnchor.LEFT:
+        x += radialOffsetInPixels;
+        break;
+      case TextAnchor.RIGHT:
+        x -= radialOffsetInPixels;
+        break;
+      case TextAnchor.CENTER:
+        break;
+      case TextAnchor.TOP_LEFT:
+        x += radialOffsetInPixels;
+        y += radialOffsetInPixels;
+        break;
+      case TextAnchor.TOP_RIGHT:
+        x -= radialOffsetInPixels;
+        y += radialOffsetInPixels;
+        break;
+      case TextAnchor.BOTTOM_LEFT:
+        x += radialOffsetInPixels;
+        y -= radialOffsetInPixels;
+        break;
+      case TextAnchor.BOTTOM_RIGHT:
+        x -= radialOffsetInPixels;
+        y -= radialOffsetInPixels;
+        break;
+    }
+    return { x, y };
+  }
+  /**
+   * Get the transform for the text element
+   * @param {number} elementWidth - The width of the element
+   * @param {number} elementHeight - The height of the element
+   * @return {string} - The transform for the text element
+   */
+  getTransform(elementWidth, elementHeight) {
+    const { x, y } = this.getTranslation(elementWidth, elementHeight);
+    return `translate(${x}px, ${y}px)`;
+  }
+}
+export {
+  Text
+};

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

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

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

@@ -0,0 +1,6 @@
+/**
+ * @param {Array<any>|Uint8ClampedArray} arr1 The first array to compare.
+ * @param {Array<any>|Uint8ClampedArray} arr2 The second array to compare.
+ * @return {boolean} Whether the two arrays are equal.
+ */
+export function arrayEquals(arr1: Array<any> | Uint8ClampedArray, arr2: Array<any> | Uint8ClampedArray): boolean;