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

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

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

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

@@ -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,22 @@
+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

@@ -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,6 @@
+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

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

@@ -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,17 @@
+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;
+}

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

@@ -0,0 +1,119 @@
+import { FeatureRenderer } from "./FeatureRenderer.js";
+import { replaceChildren } from "../util/dom.js";
+const textPadding = {
+  top: 20,
+  right: 20,
+  bottom: 20,
+  left: 20
+};
+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, {
+        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.transform = `translate(-50%, -50%)`;
+    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;
+    style.padding = `${textPadding.top}px ${textPadding.right}px ${textPadding.bottom}px ${textPadding.left}px`;
+  }
+  getElementBBox(element, position) {
+    if (!element.parentElement) {
+      document.body.appendChild(element);
+    }
+    const { width, height } = element.getBoundingClientRect();
+    if (element.parentElement !== this._element) {
+      element.remove();
+    }
+    return {
+      minX: Math.floor(position.x) - width / 2,
+      minY: Math.floor(position.y) - height / 2,
+      maxX: Math.ceil(position.x + width / 2),
+      maxY: Math.ceil(position.y + height / 2)
+    };
+  }
+  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 = "2px solid black";
+    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,78 @@
+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.render(frameState, feature, 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,56 @@
+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 [lon, lat] = coordinate;
+    const features = knn(
+      this._featuresRtree,
+      lon,
+      lat,
+      10,
+      (d) => 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 - lon, midY - lat);
+      return d;
+    });
+    features.sort((a, b) => a.distance - b.distance);
+    return features.map((d) => d.feature);
+  }
+  getFeaturesInExtent(extent) {
+    const [minX, minY, maxX, maxY] = extent;
+    return this._featuresRtree.search({ minX, minY, maxX, maxY }).map((d) => d.feature);
+  }
+  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,8 @@
+export class Stroke {
+    constructor(options: any);
+    color: any;
+    width: any;
+    opacity: any;
+    _getRgba: (...arg0: any[]) => string;
+    getRgba(): string;
+}