@guardian/interactive-component-library 0.7.11 → 0.7.12

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

@@ -1,4 +1,4 @@
-import { Extent } from './util';
+import { GeoBounds, Extent } from './util';
 import { ZoomTransform } from 'd3-zoom';
 /**
  * @typedef ViewConfig
@@ -64,7 +64,7 @@ export class View {
         fitWidth(width: any, object: any): any;
         fitHeight(height: any, object: any): any;
     };
-    bounds: Extent;
+    bounds: GeoBounds;
     extent: Extent;
     minZoom: number;
     maxZoom: number;
@@ -75,10 +75,15 @@ export class View {
         bottom: number;
         left: number;
     };
-    _viewPortSize: number[];
+    /** @type { [number, number] } */
+    _viewPortSize: [number, number];
     pixelRatio: number;
-    set viewPortSize(size: number[]);
-    get viewPortSize(): number[];
+    readonly set viewPortSize(size: [number, number]);
+    /**
+     * @returns {[number, number]} - The size of the viewport in pixels
+     * @readonly
+     */
+    readonly get viewPortSize(): [number, number];
     set transform(transform: ZoomTransform);
     get transform(): ZoomTransform;
     get mapSize(): any;
@@ -135,9 +140,9 @@ export class View {
      * @function getBounds
      * @param {ZoomTransform} transform
      * @param {*} projection
-     * @returns {import("./util").GeoBoundsLike}
+     * @returns {import("./util").GeoBounds}
      */
-    getVisibleBounds(transform: ZoomTransform, projection: any): import('./util').GeoBoundsLike;
+    getVisibleBounds(transform: ZoomTransform, projection: any): import('./util').GeoBounds;
     getState(): {
         transform: ZoomTransform;
         projection: {
@@ -164,9 +169,9 @@ export class View {
             bottom: number;
             left: number;
         };
-        viewPortSize: number[];
+        viewPortSize: [number, number];
         sizeInPixels: any;
-        visibleExtent: import('./util').GeoBoundsLike;
+        visibleExtent: Extent;
     };
 }
 export type ViewConfig = {

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

@@ -4,7 +4,7 @@ import { zoomLevelToZoomScale, zoomLevelForResolution } from "./util/zoomLevel.j
 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 { resolutionForBounds } from "./util/resolution.js";
 import { Projection } from "./projection/index.js";
 import { generateDebugUrl } from "./util/debug.js";
 class View {
@@ -23,7 +23,8 @@ class View {
     this.debug = debug;
     projection.revision = 0;
     this.projection = projection;
-    this.bounds = this.extent = Extent.convert(extent) || GeoBounds.convert(bounds).toExtent();
+    this.bounds = bounds && GeoBounds.convert(bounds);
+    this.extent = Extent.convert(extent) || GeoBounds.convert(bounds).toExtent();
     this.minZoom = minZoom;
     this.maxZoom = maxZoom;
     this._transform = zoomIdentity;
@@ -40,6 +41,10 @@ class View {
       }
     }
   }
+  /**
+   * @returns {[number, number]} - The size of the viewport in pixels
+   * @readonly
+   */
   get viewPortSize() {
     return this._viewPortSize;
   }
@@ -66,8 +71,8 @@ class View {
     return scalePadding(scaledPadding, this.pixelRatio);
   }
   get baseResolution() {
-    const baseExtent = this.getVisibleBounds(zoomIdentity, this.projection);
-    const baseResolution = resolutionForExtent(baseExtent, this.viewPortSize);
+    const bounds = this.bounds ?? this.getVisibleBounds(zoomIdentity, this.projection);
+    const baseResolution = resolutionForBounds(bounds, this.viewPortSize);
     return baseResolution;
   }
   /**
@@ -139,7 +144,7 @@ class View {
   }
   // map resolution (meters per pixel)
   getResolution() {
-    return resolutionForExtent(
+    return resolutionForBounds(
       this.getVisibleBounds(this.transform, this.projection),
       this.viewPortSize
     );
@@ -173,20 +178,13 @@ class View {
    * @function getBounds
    * @param {ZoomTransform} transform
    * @param {*} projection
-   * @returns {import("./util").GeoBoundsLike}
+   * @returns {import("./util").GeoBounds}
    */
   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]];
-    }
+    return GeoBounds.convert({ sw: southWest, ne: northEast });
   }
   getState() {
     const transform = this.transform;
@@ -199,7 +197,7 @@ class View {
       padding: this.padding,
       viewPortSize: this.viewPortSize,
       sizeInPixels: scaleSize(this.viewPortSize, this.pixelRatio),
-      visibleExtent: this.getVisibleBounds(transform, projection)
+      visibleExtent: this.getVisibleBounds(transform, projection).toExtent()
     };
   }
 }

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

@@ -21,10 +21,10 @@ export class VectorSource {
      */
     getFeaturesAtCoordinate(coordinate: [number, number]): import('../Feature').Feature[];
     /**
-     * @param {[number, number, number, number]} extent TODO: should this be an `Extent`?
+     * @param {import("../util/extent").Extent} extent
      * @returns {import("../Feature").Feature[]}
      */
-    getFeaturesInExtent(extent: [number, number, number, number]): import('../Feature').Feature[];
+    getFeaturesInExtent(extent: import('../util/extent').Extent): import('../Feature').Feature[];
     /**
      * @param {import("../Feature").Feature[]} features
      */

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

@@ -39,11 +39,11 @@ class VectorSource {
     return items.map((d) => d.feature);
   }
   /**
-   * @param {[number, number, number, number]} extent TODO: should this be an `Extent`?
+   * @param {import("../util/extent").Extent} extent
    * @returns {import("../Feature").Feature[]}
    */
   getFeaturesInExtent(extent) {
-    const [minX, minY, maxX, maxY] = extent;
+    const { minX, minY, maxX, maxY } = extent;
     const features = this._featuresRtree.search({ minX, minY, maxX, maxY }).map((d) => d.feature);
     return features;
   }

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

@@ -41,6 +41,12 @@ class HashPattern {
    */
   _createPattern(ctx, scale) {
     const size = this.tileSize * scale;
+    if (size <= 0) {
+      console.error(
+        `HashPattern: size (${size}) is too small to draw a pattern. Pattern width and height must be > 0`
+      );
+      return;
+    }
     this.offscreenCanvas.width = size;
     this.offscreenCanvas.height = size;
     const offCtx = this.offscreenCanvas.getContext("2d");

package/dist/components/molecules/canvas-map/lib/util/bounds.js

@@ -23,12 +23,24 @@ class GeoBounds {
     ];
   }
   toExtent() {
-    return new Extent(
-      this.southWest.lng,
-      this.southWest.lat,
-      this.northEast.lng,
-      this.northEast.lat
-    );
+    const southWestLatitude = this.southWest.lat;
+    const northEastLatitude = this.northEast.lat;
+    const flippedY = southWestLatitude < northEastLatitude;
+    if (flippedY) {
+      return new Extent(
+        this.southWest.lng,
+        this.southWest.lat,
+        this.northEast.lng,
+        this.northEast.lat
+      );
+    } else {
+      return new Extent(
+        this.southWest.lng,
+        this.northEast.lat,
+        this.northEast.lng,
+        this.southWest.lat
+      );
+    }
   }
   /**
    * Converts an array to a `GeoBounds` object.

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

@@ -1,9 +1,9 @@
 /**
  * Get map resolution
  *
- * @param {Extent} extent Geographical extent: [ lonMin, latMin, lonMax, latMax ]
- * @param {size} viewportSize Viewport size: [ width, height ]
+ * @param {import("./bounds").GeoBounds} bounds
+ * @param {[Number, Number]} viewportSize
  * @return {number} Map resolution (horizontal)
  * @api
  */
-export function resolutionForExtent(extent: Extent, viewportSize: size): number;
+export function resolutionForBounds(bounds: import('./bounds').GeoBounds, viewportSize: [number, number]): number;

package/dist/components/molecules/canvas-map/lib/util/resolution.js

@@ -1,11 +1,16 @@
 import { haversineDistance } from "./distance.js";
-function resolutionForExtent(extent, viewportSize) {
-  const [lonMin, latMin, lonMax, latMax] = extent;
-  const latMid = (latMin + latMax) / 2;
-  const distance = haversineDistance(latMid, lonMin, latMid, lonMax);
+function resolutionForBounds(bounds, viewportSize) {
+  const { southWest, northEast } = bounds;
+  const latMid = (southWest.lat + northEast.lat) / 2;
+  const distance = haversineDistance(
+    latMid,
+    southWest.lng,
+    latMid,
+    northEast.lng
+  );
   const resolution = distance / viewportSize[0];
   return resolution;
 }
 export {
-  resolutionForExtent
+  resolutionForBounds
 };

package/dist/index.js

@@ -51,7 +51,7 @@ import { GeoCoordinate } from "./components/molecules/canvas-map/lib/util/coordi
 import { GeoBounds } from "./components/molecules/canvas-map/lib/util/bounds.js";
 import { Extent, combineExtents, containsCoordinate, containsXY, extentForCoordinates } from "./components/molecules/canvas-map/lib/util/extent.js";
 import { bboxFeature } from "./components/molecules/canvas-map/lib/util/bboxFeature.js";
-import { resolutionForExtent } from "./components/molecules/canvas-map/lib/util/resolution.js";
+import { resolutionForBounds } from "./components/molecules/canvas-map/lib/util/resolution.js";
 import { zoomLevelForResolution, zoomLevelToZoomScale } from "./components/molecules/canvas-map/lib/util/zoomLevel.js";
 import { interpolateFeatures } from "./components/molecules/canvas-map/lib/interpolators/interpolateFeatures.js";
 import { interpolateFill, interpolateStroke, interpolateStyles } from "./components/molecules/canvas-map/lib/interpolators/interpolateStyles.js";
@@ -141,7 +141,7 @@ export {
   interpolateFill,
   interpolateStroke,
   interpolateStyles,
-  resolutionForExtent,
+  resolutionForBounds,
   saveSVG,
   useContainerSize,
   useTouchOrHover,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@guardian/interactive-component-library",
   "private": false,
-  "version": "0.7.11",
+  "version": "0.7.12",
   "packageManager": "pnpm@8.4.0",
   "repository": {
     "type": "git",