@guardian/interactive-component-library 0.1.0-alpha.43 → 0.1.0-alpha.44

package/dist/interactive-component-library.js

@@ -145,10 +145,10 @@ const LegendItem = ({
     })]
   });
 };
-const bar$2 = "_bar_1jxh9_1";
-const label$1 = "_label_1jxh9_5";
-const labelStroke = "_labelStroke_1jxh9_11";
-const backgroundRect = "_backgroundRect_1jxh9_17";
+const bar$2 = "_bar_1b3uz_1";
+const label$1 = "_label_1b3uz_5";
+const labelStroke = "_labelStroke_1b3uz_12";
+const backgroundRect = "_backgroundRect_1b3uz_18";
 const defaultStyles$v = {
   bar: bar$2,
   label: label$1,
@@ -5921,32 +5921,6 @@ let Map$2 = class Map2 {
     this._renderer = new MapRenderer(this);
     this._resizeObserver = new ResizeObserver(() => this._updateSize());
     this._resizeObserver.observe(this.target);
-    this.view.transform = zoomIdentity;
-    this._zoomBypassKey = navigator.userAgent.indexOf("Mac") !== -1 ? "metaKey" : "ctrlKey";
-    this._zoomBehaviour = zoom().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, {
-        currentZoomLevel: event.transform.k
-      });
-    });
-    select(this._viewport).call(this._zoomBehaviour);
     this._viewport.addEventListener("touchmove", (event) => {
       if (event.targetTouches.length < 2) {
         this._filterEventCallback(true);
@@ -6031,7 +6005,7 @@ let Map$2 = class Map2 {
     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.maxZoom, featureScale);
+    const zoomScale = Math.min(this.view.scaleExtent[1], featureScale);
     const scaledPadding = {
       top: padding.top / zoomScale,
       right: padding.right / zoomScale,
@@ -6110,11 +6084,40 @@ let Map$2 = class Map2 {
     const view = this.view;
     if (view) {
       view.viewPortSize = size;
+      this._createZoomBehaviour(size);
     }
-    this._zoomBehaviour.extent([[0, 0], size]);
-    this._zoomBehaviour.translateExtent([[0, 0], 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) {
+        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;
@@ -6144,6 +6147,32 @@ function bboxFeature(bounds) {
   };
   return feature;
 }
+const BASE_RESOLUTION = 156543.03392;
+function zoomLevelToZoomScale(zoomLevel, initialResolution) {
+  const resolution = BASE_RESOLUTION / Math.pow(2, zoomLevel);
+  const zoomScale = initialResolution / resolution;
+  return zoomScale;
+}
+function zoomLevelForResolution(currentResolution) {
+  const zoomLevel = Math.log2(BASE_RESOLUTION / currentResolution);
+  return zoomLevel;
+}
+function haversineDistance(lat1, lon1, lat2, lon2) {
+  const R2 = 6371e3;
+  const toRadians = (degrees2) => degrees2 * Math.PI / 180;
+  const dLat = toRadians(lat2 - lat1);
+  const dLon = toRadians(lon2 - lon1);
+  const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(toRadians(lat1)) * Math.cos(toRadians(lat2)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
+  const c2 = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+  return R2 * c2;
+}
+function resolutionForExtent(extent, viewportSize) {
+  const [lonMin, latMin, lonMax, latMax] = extent;
+  const latMid = (latMin + latMax) / 2;
+  const distance = haversineDistance(latMid, lonMin, latMid, lonMax);
+  const resolution = distance / viewportSize[0];
+  return resolution;
+}
 class View {
   constructor({
     projection,
@@ -6157,6 +6186,7 @@ class View {
     this.extent = extent;
     this.minZoom = minZoom;
     this.maxZoom = maxZoom;
+    this._transform = zoomIdentity;
     this._padding = padding;
     this._viewPortSize = [0, 0];
     this.pixelRatio = window.devicePixelRatio;
@@ -6166,6 +6196,8 @@ class View {
     this._viewPortSize = size;
     if (previousSize !== size) {
       this.fitObject(bboxFeature(this.extent));
+      const initialExtent = this.getVisibleExtent(zoomIdentity, this.projection);
+      this.initialResolution = resolutionForExtent(initialExtent, size);
     }
   }
   get viewPortSize() {
@@ -6191,9 +6223,10 @@ class View {
     };
     return scalePadding(scaledPadding, this.pixelRatio);
   }
-  // defines the upper and lower limits for zoom behaviour
+  // calculates the upper and lower zoom scales
   get scaleExtent() {
-    return [this.minZoom, this.maxZoom];
+    const maxScale = zoomLevelToZoomScale(this.maxZoom, this.initialResolution);
+    return [1, maxScale];
   }
   setProjection(projection) {
     this.projection = projection;
@@ -6239,6 +6272,14 @@ class View {
     const points = [topLeft, topRight, bottomRight, bottomLeft, topLeft];
     return points.map((d2) => this.invert(d2));
   }
+  // map resolution (meters per pixel)
+  getResolution() {
+    return resolutionForExtent(this.getVisibleExtent(this.transform, this.projection), this.viewPortSize);
+  }
+  // map zoom level (0 = the entire world)
+  getZoomLevel() {
+    return zoomLevelForResolution(this.getResolution());
+  }
   // get extent for drawn map
   getMapExtent() {
     const mapSizeInPixels = this.mapSize;
@@ -6265,6 +6306,7 @@ class View {
       zoomLevel: transform.k,
       pixelRatio: this.pixelRatio,
       padding: this.padding,
+      viewPortSize: this.viewPortSize,
       sizeInPixels: scaleSize(this.viewPortSize, this.pixelRatio),
       visibleExtent: this.getVisibleExtent(transform, projection)
     };
@@ -6513,12 +6555,15 @@ class TextLayerRenderer {
     style2.pointerEvents = "none";
     style2.overflow = "hidden";
   }
-  renderFrame(frameState) {
+  renderFrame(frameState, targetElement) {
+    if (this.layer.opacity === 0)
+      return targetElement;
     const {
       declutterTree
     } = frameState;
     const {
       projection,
+      viewPortSize,
       sizeInPixels,
       visibleExtent,
       transform
@@ -6537,15 +6582,15 @@ class TextLayerRenderer {
       const featureStyle = styleFunction2(feature);
       const textElement = this.getTextElementWithID(feature.uid);
       textElement.innerText = featureStyle.text.content;
-      const [x, y] = transform.apply(point.coordinates);
+      const [relativeX, relativeY] = transform.apply(point.coordinates).map((d2, i) => d2 / sizeInPixels[i]);
       const position = {
-        left: `${x / sizeInPixels[0] * 100}%`,
-        top: `${y / sizeInPixels[1] * 100}%`
+        left: `${relativeX * 100}%`,
+        top: `${relativeY * 100}%`
       };
       this.styleTextElement(textElement, featureStyle.text, position);
       const bbox = this.getElementBBox(textElement, {
-        x,
-        y
+        x: relativeX * viewPortSize[0],
+        y: relativeY * viewPortSize[1]
       });
       if (declutterTree.collides(bbox)) {
         continue;
@@ -6611,7 +6656,7 @@ class TextLayerRenderer {
     style2.top = `${bbox.minY}px`;
     style2.width = `${bbox.maxX - bbox.minX}px`;
     style2.height = `${bbox.maxY - bbox.minY}px`;
-    style2.border = "1px solid black";
+    style2.border = "2px solid black";
     return element;
   }
 }