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

package/dist/components/molecules/canvas-map/lib/Map.js

@@ -0,0 +1,267 @@
+import { View } from "./View.js";
+import { sizeForElement } from "./util/size.js";
+import { arrayEquals } from "./util/array.js";
+import { containsCoordinate } from "./util/extent.js";
+import { MapRenderer } from "./renderers/MapRenderer.js";
+import { zoomIdentity, zoom } from "d3-zoom";
+import { select } from "d3-selection";
+import { timer } from "d3-timer";
+import { Dispatcher } from "./events/Dispatcher.js";
+import { MapEvent } from "./events/MapEvent.js";
+import "d3-transition";
+class Map {
+  /**
+   * @constructor
+   * @param {Object} config - The configuration for the map.
+   * @param {Object} config.view - The view configuration for the map.
+   * @param {boolean} config.debug - Whether to enable debug mode or not.
+   * @param {HTMLElement} config.target - The target element to render the map into.
+   */
+  constructor(config) {
+    if (config.debug) {
+      console.log("Map config", config);
+    }
+    this.options = config;
+    this.view = new View(config.view, config.debug);
+    this.target = config.target;
+    this.layers = [];
+    this.dispatcher = new Dispatcher(this);
+    this._viewport = document.createElement("div");
+    this._viewport.className = "gv-map";
+    this._viewport.style.position = "relative";
+    this._viewport.style.overflow = "hidden";
+    this._viewport.style.width = "100%";
+    this._viewport.style.height = "100%";
+    this.target.appendChild(this._viewport);
+    this._renderer = new MapRenderer(this);
+    this._resizeObserver = new ResizeObserver(() => {
+      this._updateSize();
+    });
+    this._resizeObserver.observe(this.target);
+    this._viewport.addEventListener("touchmove", (event) => {
+      if (event.targetTouches.length < 2 && this._collaborativeGesturesEnabled) {
+        this._filterEventCallback(true);
+      }
+    });
+  }
+  destroy() {
+    this._resizeObserver.disconnect();
+    this._viewport.remove();
+  }
+  /** PUBLIC GETTERS */
+  get size() {
+    return this._size;
+  }
+  get viewPort() {
+    return this._viewport;
+  }
+  get zoomScale() {
+    return this.view.transform.k;
+  }
+  get isTransitioning() {
+    return this._isTransitioning;
+  }
+  /** PUBLIC METHODS */
+  collaborativeGesturesEnabled(enabled) {
+    if (enabled === void 0) return this._collaborativeGesturesEnabled;
+    this._collaborativeGesturesEnabled = enabled;
+  }
+  onFilterEvent(callback) {
+    this._filterEventCallback = callback;
+  }
+  fitObject(geoJSON) {
+    this.view.fitObject(geoJSON);
+    this._requestRender();
+  }
+  addLayer(layer) {
+    this.addLayers([layer]);
+  }
+  addLayers(layers) {
+    this.layers = this.layers.concat(layers);
+    layers.forEach((layer) => {
+      layer.on(MapEvent.CHANGE, () => {
+        this._requestRender();
+      });
+    });
+    this._requestRender();
+  }
+  setLayers(layers) {
+    if (layers === this.layers) {
+      return;
+    }
+    new Array(...this.layers).forEach((layer) => {
+      if (!layers.includes(layer)) {
+        this.removeLayer(layer);
+      }
+    });
+    this.layers = [];
+    this.addLayers(layers);
+  }
+  removeLayer(layer) {
+    layer.tearDown();
+    const layerIndex = this.layers.indexOf(layer);
+    if (layerIndex < 0) return;
+    this.layers.splice(layerIndex, 1);
+  }
+  async zoomIn(options) {
+    return this.zoomTo(this.zoomScale * 2, options);
+  }
+  async zoomOut(options) {
+    return this.zoomTo(this.zoomScale * 0.5, options);
+  }
+  async zoomTo(zoomScale, options = { duration: 500 }) {
+    return select(this._viewport).transition().duration(options.duration).call(this._zoomBehaviour.scaleTo, zoomScale).end();
+  }
+  zoomToFeature(feature, focalPoint, padding = { top: 40, right: 40, bottom: 40, left: 40 }) {
+    const extent = feature.getExtent();
+    const {
+      minX: featureX,
+      minY: featureY,
+      width: featureWidth,
+      height: featureHeight
+    } = this.view.projectExtent(extent);
+    const [viewPortWidth, viewPortHeight] = this.view.viewPortSize;
+    const paddedViewPortWidth = viewPortWidth - padding.left - padding.right;
+    const paddedViewPortHeight = viewPortHeight - padding.top - padding.bottom;
+    const featureScale = Math.min(
+      paddedViewPortWidth / featureWidth,
+      paddedViewPortHeight / featureHeight
+    );
+    const zoomScale = Math.min(this.view.scaleExtent[1], featureScale);
+    const scaledPadding = {
+      top: padding.top / zoomScale,
+      right: padding.right / zoomScale,
+      bottom: padding.bottom / zoomScale,
+      left: padding.left / zoomScale
+    };
+    const paddedFeatureBounds = {
+      x: featureX - scaledPadding.left,
+      y: featureY - scaledPadding.top,
+      width: featureWidth + scaledPadding.left + scaledPadding.right,
+      height: featureHeight + scaledPadding.top + scaledPadding.bottom
+    };
+    const newTransform = zoomIdentity.translate(viewPortWidth / 2, viewPortHeight / 2).scale(zoomScale).translate(
+      -(paddedFeatureBounds.x + paddedFeatureBounds.width / 2),
+      -(paddedFeatureBounds.y + paddedFeatureBounds.height / 2)
+    );
+    select(this._viewport).transition().duration(500).call(this._zoomBehaviour.transform, newTransform, focalPoint);
+  }
+  /** @param {import("./layers").Layer[]} layers */
+  hasLayers(layers) {
+    if (layers.length !== this.layers.length) {
+      return false;
+    }
+    for (let i = 0; i < layers.length; i++) {
+      if (layers[i] !== this.layers[i]) {
+        return false;
+      }
+    }
+    return true;
+  }
+  async resetZoom(options) {
+    return this.zoomTo(1, options);
+  }
+  findFeatures(point) {
+    const mapCoordinate = this.view.invert(point);
+    const matchingFeatures = [];
+    for (const layer of this.layers) {
+      const layerExtent = layer.getExtent();
+      if (layer.hitDetectionEnabled && containsCoordinate(layerExtent, mapCoordinate)) {
+        const features = layer.findFeatures(mapCoordinate);
+        if (features) {
+          matchingFeatures.push(...features);
+        }
+      }
+    }
+    return matchingFeatures;
+  }
+  changed() {
+    this._requestRender();
+  }
+  async transition(options = { duration: 500 }, callback) {
+    const ease = options.ease || ((t) => t);
+    return new Promise((resolve) => {
+      this._isTransitioning = true;
+      this.dispatcher.dispatch(MapEvent.TRANSITION_START);
+      const _timer = timer((elapsed) => {
+        const t = Math.min(elapsed / options.duration, 1);
+        callback(ease(t));
+        this._renderFrame();
+        if (elapsed >= options.duration) {
+          _timer.stop();
+          this._isTransitioning = false;
+          this.dispatcher.dispatch(MapEvent.TRANSITION_END);
+          resolve();
+        }
+      });
+    });
+  }
+  /** PRIVATE METHODS */
+  _updateSize() {
+    const targetElement = this.target;
+    let newSize = sizeForElement(targetElement);
+    const oldSize = this.size;
+    if (newSize && (!oldSize || !arrayEquals(newSize, oldSize))) {
+      this._size = newSize;
+      this._updateViewportSize(newSize);
+    }
+  }
+  _updateViewportSize(size) {
+    const view = this.view;
+    if (view) {
+      view.viewPortSize = size;
+      this._createZoomBehaviour(size);
+    }
+    this._requestRender();
+  }
+  _createZoomBehaviour(viewPortSize) {
+    if (this._zoomBehaviour) {
+      this._zoomBehaviour.on("zoom", null);
+    }
+    this._zoomBypassKey = navigator.userAgent.indexOf("Mac") !== -1 ? "metaKey" : "ctrlKey";
+    this._zoomBehaviour = zoom().extent([[0, 0], viewPortSize]).translateExtent([[0, 0], viewPortSize]).scaleExtent(this.view.scaleExtent).filter((event) => {
+      const filterEvent = (filter) => {
+        this._filterEventCallback(filter);
+        return !filter;
+      };
+      if (event.type === "wheel" && !event[this._zoomBypassKey]) {
+        return filterEvent(true);
+      }
+      if ("targetTouches" in event && this.collaborativeGesturesEnabled) {
+        if (event.targetTouches.length < 2) {
+          return false;
+        }
+        event.preventDefault();
+        return filterEvent(false);
+      }
+      return (!event.ctrlKey || event.type === "wheel") && !event.button;
+    }).on("zoom", (event) => {
+      this.view.transform = event.transform;
+      this._requestRender();
+      this.dispatcher.dispatch(MapEvent.ZOOM, {
+        zoomScale: event.transform.k
+      });
+    });
+    select(this._viewport).call(this._zoomBehaviour);
+  }
+  _requestRender() {
+    if (!this._renderer || !!this._animationFrameRequestID || this._isTransitioning)
+      return;
+    this._animationFrameRequestID = requestAnimationFrame(
+      this._renderFrame.bind(this)
+    );
+  }
+  _renderFrame() {
+    const frameState = {
+      size: this.size,
+      viewState: this.view.getState(),
+      debug: this.options.debug || false
+    };
+    this._renderer.renderFrame(frameState);
+    this._animationFrameRequestID = null;
+  }
+}
+Map.Component = void 0;
+export {
+  Map
+};

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

@@ -0,0 +1,222 @@
+import { Extent } from './util';
+import { ZoomTransform } from 'd3-zoom';
+/**
+ * @typedef ViewConfig
+ * @property {import("./projection").ProjectionFunction} projection - The projection to use for the view.
+ * @property {import("./util/bounds").GeoBounds} [bounds] - The bounds of the map view in projection coordinates.
+ * @property {import("./util/extent").ExtentLike} [extent] - The extent of the map view in screen coordinates (for preprojected geometry).
+ * @property {number} minZoom - The minimum zoom level for the view.
+ * @property {number} maxZoom - The maximum zoom level for the view.
+ * @property {Object} padding - The padding for the view in pixels.
+ * @property {boolean} [debug="false"] - Enable/disable debug mode.
+ */
+/**
+ * Represents how the map is viewed.
+ * @class
+ */
+export class View {
+    /**
+     * @constructor
+     * @property {ViewConfig} config - A view configuration object
+     */
+    constructor({ projection, bounds, extent, minZoom, maxZoom, padding, }: {
+        projection?: {
+            (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;
+        };
+        bounds: any;
+        extent: any;
+        minZoom?: number;
+        maxZoom?: number;
+        padding?: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+    }, debug?: boolean);
+    debug: boolean;
+    projection: {
+        (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;
+    };
+    bounds: Extent;
+    extent: Extent;
+    minZoom: number;
+    maxZoom: number;
+    _transform: ZoomTransform;
+    _padding: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    _viewPortSize: number[];
+    pixelRatio: number;
+    set viewPortSize(size: number[]);
+    get viewPortSize(): number[];
+    set transform(transform: ZoomTransform);
+    get transform(): ZoomTransform;
+    get mapSize(): any;
+    get padding(): {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    get scaledPadding(): {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    get baseResolution(): number;
+    /**
+     * Get the lower and upper zoom scales
+     * @returns {[number, number]} - The lower and upper zoom scales
+     */
+    get scaleExtent(): [number, number];
+    setProjection(projection: any): void;
+    setRawProjection(projection: any): void;
+    /**
+     * @param {import("./util").Extent} extent
+     */
+    fitExtent(extent: import('./util').Extent): void;
+    fitBounds(bounds: any): void;
+    /**
+     * @param {import("./formats/GeoJSON").GeoJSONFeature} geoJSON
+     */
+    fitObject(geoJSON: import('./formats/GeoJSON').GeoJSONFeature): void;
+    /**
+     * Returns extent in projection coordinates
+     *
+     * @param {Extent} extent
+     * @returns {Extent} - The extent relative to the current viewport
+     */
+    projectExtent(extent: Extent): Extent;
+    invert(point: any): number[];
+    invertBounds(bounds: any): number[][];
+    getResolution(): number;
+    getZoomLevel(): number;
+    /**
+     * Function that returns the extent of the view in screen coordinates
+     * The extent is defined as [[minX, minY], [maxX, maxY]]
+     * @function getMapExtent
+     * @returns {[[number, number], [number, number]]}
+     */
+    getMapExtent(): [[number, number], [number, number]];
+    /**
+     * Get map bounds for current view
+     *
+     * @function getBounds
+     * @param {ZoomTransform} transform
+     * @param {*} projection
+     * @returns {import("./util").GeoBoundsLike}
+     */
+    getVisibleBounds(transform: ZoomTransform, projection: any): import('./util').GeoBoundsLike;
+    getState(): {
+        transform: ZoomTransform;
+        projection: {
+            (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;
+        };
+        zoomLevel: any;
+        pixelRatio: number;
+        padding: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+        viewPortSize: number[];
+        sizeInPixels: any;
+        visibleExtent: import('./util').GeoBoundsLike;
+    };
+}
+export type ViewConfig = {
+    /**
+     * - The projection to use for the view.
+     */
+    /**
+     * - The projection to use for the view.
+     */
+    projection: import('./projection').ProjectionFunction;
+    /**
+     * - The bounds of the map view in projection coordinates.
+     */
+    /**
+     * - The bounds of the map view in projection coordinates.
+     */
+    bounds?: import('./util/bounds').GeoBounds;
+    /**
+     * - The extent of the map view in screen coordinates (for preprojected geometry).
+     */
+    /**
+     * - The extent of the map view in screen coordinates (for preprojected geometry).
+     */
+    extent?: import('./util/extent').ExtentLike;
+    /**
+     * - The minimum zoom level for the view.
+     */
+    /**
+     * - The minimum zoom level for the view.
+     */
+    minZoom: number;
+    /**
+     * - The maximum zoom level for the view.
+     */
+    /**
+     * - The maximum zoom level for the view.
+     */
+    maxZoom: number;
+    /**
+     * - The padding for the view in pixels.
+     */
+    /**
+     * - The padding for the view in pixels.
+     */
+    padding: any;
+    /**
+     * - Enable/disable debug mode.
+     */
+    /**
+     * - Enable/disable debug mode.
+     */
+    debug?: boolean;
+};

package/dist/components/molecules/canvas-map/lib/View.js

@@ -0,0 +1,208 @@
+import { scaleSize, scalePadding, sizeMinusPadding } from "./util/size.js";
+import { zoomIdentity, ZoomTransform } from "d3-zoom";
+import { zoomLevelToZoomScale, zoomLevelForResolution } from "./util/zoomLevel.js";
+import { GeoBounds } from "./util/bounds.js";
+import { Extent } from "./util/extent.js";
+import { bboxFeature } from "./util/bboxFeature.js";
+import { resolutionForExtent } from "./util/resolution.js";
+import { Projection } from "./projection/index.js";
+import { generateDebugUrl } from "./util/debug.js";
+class View {
+  /**
+   * @constructor
+   * @property {ViewConfig} config - A view configuration object
+   */
+  constructor({
+    projection = Projection.geoIdentity,
+    bounds,
+    extent,
+    minZoom = 1,
+    maxZoom = 10,
+    padding = { top: 0, right: 0, bottom: 0, left: 0 }
+  }, debug = false) {
+    this.debug = debug;
+    projection.revision = 0;
+    this.projection = projection;
+    this.bounds = this.extent = Extent.convert(extent) || GeoBounds.convert(bounds).toExtent();
+    this.minZoom = minZoom;
+    this.maxZoom = maxZoom;
+    this._transform = zoomIdentity;
+    this._padding = padding;
+    this._viewPortSize = [0, 0];
+    this.pixelRatio = window.devicePixelRatio;
+  }
+  set viewPortSize(size) {
+    const previousSize = this._viewPortSize;
+    this._viewPortSize = size;
+    if (previousSize !== size) {
+      if (this.extent) {
+        this.fitBounds(this.extent);
+      }
+    }
+  }
+  get viewPortSize() {
+    return this._viewPortSize;
+  }
+  set transform(transform) {
+    this._transform = transform;
+  }
+  get transform() {
+    return new ZoomTransform(
+      this._transform.k,
+      this._transform.x * this.pixelRatio,
+      this._transform.y * this.pixelRatio
+    );
+  }
+  // map size in pixels (i.e. scaled by device pixel ratio)
+  get mapSize() {
+    return scaleSize(this.viewPortSize, this.pixelRatio);
+  }
+  get padding() {
+    return this._padding;
+  }
+  // padding in pixels (i.e. scaled by device pixel ratio)
+  get scaledPadding() {
+    const scaledPadding = { ...this._padding };
+    return scalePadding(scaledPadding, this.pixelRatio);
+  }
+  get baseResolution() {
+    const baseExtent = this.getVisibleBounds(zoomIdentity, this.projection);
+    const baseResolution = resolutionForExtent(baseExtent, this.viewPortSize);
+    return baseResolution;
+  }
+  /**
+   * Get the lower and upper zoom scales
+   * @returns {[number, number]} - The lower and upper zoom scales
+   */
+  get scaleExtent() {
+    const maxScale = zoomLevelToZoomScale(this.maxZoom, this.baseResolution);
+    return [1, maxScale];
+  }
+  setProjection(projection) {
+    this.projection = projection;
+    this.fitObject(bboxFeature(this.extent));
+  }
+  // only set the raw projection when it has already been configured with projection.fitExtent()
+  setRawProjection(projection) {
+    this.projection = projection;
+  }
+  /**
+   * @param {import("./util").Extent} extent
+   */
+  fitExtent(extent) {
+    const boundsFeature = bboxFeature(extent);
+    this.fitObject(boundsFeature);
+    if (this.debug) {
+      console.log("Fit extent", extent, generateDebugUrl(boundsFeature, false));
+    }
+  }
+  fitBounds(bounds) {
+    const boundsFeature = bboxFeature(bounds);
+    this.fitObject(boundsFeature);
+    if (this.debug) {
+      console.log("Fit extent", bounds, generateDebugUrl(boundsFeature, false));
+    }
+  }
+  /**
+   * @param {import("./formats/GeoJSON").GeoJSONFeature} geoJSON
+   */
+  fitObject(geoJSON) {
+    this.projection.fitExtent(this.getMapExtent(), geoJSON);
+    ++this.projection.revision;
+  }
+  /**
+   * Returns extent in projection coordinates
+   *
+   * @param {Extent} extent
+   * @returns {Extent} - The extent relative to the current viewport
+   */
+  projectExtent(extent) {
+    const [minX, minY] = this.projection([extent.minX, extent.minY]);
+    const [maxX, maxY] = this.projection([extent.maxX, extent.maxY]);
+    return new Extent(minX, minY, maxX, maxY).scale(1 / this.pixelRatio);
+  }
+  invert(point) {
+    const { projection, pixelRatio, transform } = this.getState();
+    const scaledPoint = [point[0] * pixelRatio, point[1] * pixelRatio];
+    const untransformedPoint = transform.invert(scaledPoint);
+    const mapCoordinate = projection.invert(untransformedPoint);
+    return mapCoordinate;
+  }
+  // bounds is defined as [[minX, minY], [maxX, maxY]]
+  invertBounds(bounds) {
+    const topLeft = bounds[0];
+    const topRight = [bounds[1][0], bounds[0][1]];
+    const bottomRight = [bounds[1][0], bounds[1][1]];
+    const bottomLeft = [bounds[0][0], bounds[1][1]];
+    const points = [topLeft, topRight, bottomRight, bottomLeft, topLeft];
+    return points.map((d) => this.invert(d));
+  }
+  // map resolution (meters per pixel)
+  getResolution() {
+    return resolutionForExtent(
+      this.getVisibleBounds(this.transform, this.projection),
+      this.viewPortSize
+    );
+  }
+  // map zoom level (0 = the entire world)
+  getZoomLevel() {
+    return zoomLevelForResolution(this.getResolution());
+  }
+  //
+  /**
+   * Function that returns the extent of the view in screen coordinates
+   * The extent is defined as [[minX, minY], [maxX, maxY]]
+   * @function getMapExtent
+   * @returns {[[number, number], [number, number]]}
+   */
+  getMapExtent() {
+    const mapSizeInPixels = this.mapSize;
+    const paddingInPixels = this.scaledPadding;
+    return [
+      [paddingInPixels.left, paddingInPixels.top],
+      sizeMinusPadding(mapSizeInPixels, {
+        ...paddingInPixels,
+        left: 0,
+        top: 0
+      })
+    ];
+  }
+  /**
+   * Get map bounds for current view
+   *
+   * @function getBounds
+   * @param {ZoomTransform} transform
+   * @param {*} projection
+   * @returns {import("./util").GeoBoundsLike}
+   */
+  getVisibleBounds(transform, projection) {
+    const [width, height] = this.mapSize;
+    const southWest = projection.invert(transform.invert([0, height]));
+    const northEast = projection.invert(transform.invert([width, 0]));
+    const southWestLatitude = southWest[1];
+    const northEastLatitude = northEast[1];
+    const flippedY = southWestLatitude < northEastLatitude;
+    if (flippedY) {
+      return [southWest[0], southWest[1], northEast[0], northEast[1]];
+    } else {
+      return [southWest[0], northEast[1], northEast[0], southWest[1]];
+    }
+  }
+  getState() {
+    const transform = this.transform;
+    const projection = this.projection;
+    return {
+      transform,
+      projection,
+      zoomLevel: transform.k,
+      pixelRatio: this.pixelRatio,
+      padding: this.padding,
+      viewPortSize: this.viewPortSize,
+      sizeInPixels: scaleSize(this.viewPortSize, this.pixelRatio),
+      visibleExtent: this.getVisibleBounds(transform, projection)
+    };
+  }
+}
+export {
+  View
+};

package/dist/components/molecules/canvas-map/lib/events/Dispatcher.d.ts

@@ -0,0 +1,8 @@
+export class Dispatcher {
+    constructor(target: any);
+    _listenersByEvent: Map<any, any>;
+    target: any;
+    on(eventType: any, callback: any): string;
+    unsubscribe(eventType: any, listenerKey: any): void;
+    dispatch(eventType: any, payload: any): void;
+}