@geospatial-sdk/openlayers 0.0.5-dev.38 → 0.0.5-dev.40

package/dist/map/register-events.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"register-events.d.ts","sourceRoot":"","sources":["../../lib/map/register-events.ts"],"names":[],"mappings":"AAAA,OAAO,GAA4B,MAAM,QAAQ,CAAC;AAClD,OAAO,EAIL,eAAe,EAEhB,MAAM,sBAAsB,CAAC;AAM9B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,OAAO,MAAM,mBAAmB,CAAC;AACxC,OAAO,QAAQ,MAAM,oBAAoB,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,KAAK,EAAE,OAAO,EAAqB,MAAM,SAAS,CAAC;AAM1D,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,GAAG,EACV,KAAK,EAAE,KAAK,GACX,OAAO,EAAE,CAOX;AAED,wBAAgB,SAAS,CACvB,MAAM,EAAE,OAAO,GAAG,QAAQ,EAC1B,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,GACrB,MAAM,GAAG,IAAI,CAWf;AAED,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,GAAG,EACV,UAAU,EAAE,UAAU,GACrB,OAAO,CAAC,OAAO,EAAE,CAAC,CA2BpB;AAyCD,wBAAgB,MAAM,CAAC,CAAC,SAAS,MAAM,eAAe,EACpD,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAC,EACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,IAAI,QAmE9C"}
+{"version":3,"file":"register-events.d.ts","sourceRoot":"","sources":["../../lib/map/register-events.ts"],"names":[],"mappings":"AAAA,OAAO,GAA4B,MAAM,QAAQ,CAAC;AAClD,OAAO,EAKL,eAAe,EAEhB,MAAM,sBAAsB,CAAC;AAM9B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,OAAO,MAAM,mBAAmB,CAAC;AACxC,OAAO,QAAQ,MAAM,oBAAoB,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,KAAK,EAAE,OAAO,EAAqB,MAAM,SAAS,CAAC;AAO1D,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,GAAG,EACV,KAAK,EAAE,KAAK,GACX,OAAO,EAAE,CAOX;AAED,wBAAgB,SAAS,CACvB,MAAM,EAAE,OAAO,GAAG,QAAQ,EAC1B,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,GACrB,MAAM,GAAG,IAAI,CAWf;AAED,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,GAAG,EACV,UAAU,EAAE,UAAU,GACrB,OAAO,CAAC,OAAO,EAAE,CAAC,CA2BpB;AA8ED,wBAAgB,MAAM,CAAC,CAAC,SAAS,MAAM,eAAe,EACpD,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAC,EACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,IAAI,QA0E9C"}

package/dist/map/register-events.js

@@ -7,13 +7,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { FeaturesClickEventType, FeaturesHoverEventType, MapClickEventType, SourceLoadErrorType, } from "@geospatial-sdk/core";
-import { toLonLat } from "ol/proj";
+import { FeaturesClickEventType, FeaturesHoverEventType, MapClickEventType, MapExtentChangeEventType, SourceLoadErrorType, } from "@geospatial-sdk/core";
+import { toLonLat, transformExtent } from "ol/proj";
 import GeoJSON from "ol/format/GeoJSON";
 import TileWMS from "ol/source/TileWMS";
 import ImageWMS from "ol/source/ImageWMS";
 import Layer from "ol/layer/Layer";
 import throttle from "lodash.throttle";
+import { equals } from "ol/extent";
 const GEOJSON = new GeoJSON();
 export function getFeaturesFromVectorSources(olMap, pixel) {
     const olFeatures = olMap.getFeaturesAtPixel(pixel);
@@ -83,6 +84,28 @@ function registerFeatureHoverEvent(map) {
     }));
     map.set(FeaturesHoverEventType, true);
 }
+function registerMapExtentChangeEvent(map) {
+    if (map.get(MapExtentChangeEventType))
+        return;
+    let lastExtent = null;
+    const handleExtentChange = () => {
+        const extent = map.getView().calculateExtent(map.getSize());
+        const reprojectedExtent = transformExtent(extent, map.getView().getProjection(), "EPSG:4326");
+        if (lastExtent && equals(lastExtent, reprojectedExtent)) {
+            return;
+        }
+        lastExtent = reprojectedExtent;
+        map.dispatchEvent({
+            type: MapExtentChangeEventType,
+            extent: reprojectedExtent,
+        });
+    };
+    map.getView().on("change:center", handleExtentChange);
+    map.getView().on("change:resolution", handleExtentChange);
+    map.getView().on("change:rotation", handleExtentChange);
+    map.on("change:size", handleExtentChange);
+    map.set(MapExtentChangeEventType, true);
+}
 export function listen(map, eventType, callback) {
     switch (eventType) {
         case FeaturesClickEventType:
@@ -108,6 +131,13 @@ export function listen(map, eventType, callback) {
                 });
             });
             break;
+        case MapExtentChangeEventType:
+            registerMapExtentChangeEvent(map);
+            // see comment above
+            map.on(eventType, (event) => {
+                callback(event);
+            });
+            break;
         case SourceLoadErrorType: {
             const errorCallback = (event) => {
                 callback(event);

package/lib/map/register-events.test.ts

@@ -16,6 +16,11 @@ import Point from "ol/geom/Point";
 import TileLayer from "ol/layer/Tile";
 import OlFeature from "ol/Feature";
 
+const EXPECTED_MAP_EXTENT_EPSG4326 = [
+  -0.0035932611364780857, -0.0026949458513598756, 0.0035932611364780857,
+  0.0026949458513740865,
+];
+
 const gfiResult = {
   type: "Feature",
   properties: {
@@ -57,6 +62,7 @@ function createMap(): Map {
     getEventPixel: { value: vi.fn(() => [10, 10]) },
     getCoordinateFromPixel: { value: vi.fn(() => [123, 123]) },
     getFeaturesAtPixel: { value: vi.fn(() => [feature]) },
+    getSize: { value: vi.fn(() => [800, 600]) },
   });
   return map;
 }
@@ -196,4 +202,106 @@ describe("event registration", () => {
       });
     });
   });
+  describe("map extent change event", () => {
+    let callback: Mock;
+
+    beforeEach(() => {
+      callback = vi.fn();
+      listen(map, "map-extent-change", callback);
+    });
+
+    it("should registers the event on the map when center changed", () => {
+      map.getView().dispatchEvent(createMapEvent(map, "change:center"));
+
+      expect(callback).toHaveBeenCalledOnce();
+      expect(callback).toHaveBeenCalledWith({
+        type: "map-extent-change",
+        extent: EXPECTED_MAP_EXTENT_EPSG4326,
+        target: expect.anything(),
+      });
+    });
+
+    it("should registers the event on the map when resolution changed", () => {
+      map.getView().dispatchEvent(createMapEvent(map, "change:resolution"));
+
+      expect(callback).toHaveBeenCalledOnce();
+      expect(callback).toHaveBeenCalledWith({
+        type: "map-extent-change",
+        extent: EXPECTED_MAP_EXTENT_EPSG4326,
+        target: expect.anything(),
+      });
+    });
+
+    it("should registers the event on the map when rotation changed", () => {
+      map.getView().dispatchEvent(createMapEvent(map, "change:rotation"));
+
+      expect(callback).toHaveBeenCalledOnce();
+      expect(callback).toHaveBeenCalledWith({
+        type: "map-extent-change",
+        extent: EXPECTED_MAP_EXTENT_EPSG4326,
+        target: expect.anything(),
+      });
+    });
+
+    it("should registers the event on the map when size changed", () => {
+      map.dispatchEvent(createMapEvent(map, "change:size"));
+
+      expect(callback).toHaveBeenCalledOnce();
+      expect(callback).toHaveBeenCalledWith({
+        type: "map-extent-change",
+        extent: EXPECTED_MAP_EXTENT_EPSG4326,
+        target: expect.anything(),
+      });
+    });
+
+    it("should send map-extent-change only once when multiple events occur with same extent", () => {
+      map.getView().dispatchEvent(createMapEvent(map, "change:center"));
+      map.getView().dispatchEvent(createMapEvent(map, "change:resolution"));
+      map.getView().dispatchEvent(createMapEvent(map, "change:rotation"));
+      map.dispatchEvent(createMapEvent(map, "change:size"));
+
+      expect(callback).toHaveBeenCalledOnce();
+      expect(callback).toHaveBeenCalledWith({
+        type: "map-extent-change",
+        extent: EXPECTED_MAP_EXTENT_EPSG4326,
+        target: expect.anything(),
+      });
+    });
+
+    it("should send map-extent-change twice when view properties actually change", () => {
+      map.getView().setCenter([1000, 1000]);
+      map.getView().dispatchEvent(createMapEvent(map, "change:center"));
+
+      map.getView().setResolution(2);
+      map.getView().dispatchEvent(createMapEvent(map, "change:resolution"));
+
+      expect(callback).toHaveBeenCalledTimes(2);
+      expect(callback).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: "map-extent-change",
+          extent: expect.any(Array),
+        }),
+      );
+
+      const firstCall = callback.mock.calls[0][0];
+      const lastCall = callback.mock.calls[1][0];
+      expect(firstCall.extent).not.toEqual(lastCall.extent);
+    });
+
+    it("should send map-extent-change only once when same view property is set multiple times to same value", () => {
+      map.getView().setCenter([1000, 1000]);
+      map.getView().dispatchEvent(createMapEvent(map, "change:center"));
+
+      map.getView().setCenter([1000, 1000]);
+      map.getView().dispatchEvent(createMapEvent(map, "change:center"));
+
+      expect(callback).toHaveBeenCalledTimes(1);
+      expect(callback).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: "map-extent-change",
+          extent: expect.any(Array),
+        }),
+      );
+    });
+  });
 });

package/lib/map/register-events.ts

@@ -3,10 +3,11 @@ import {
   FeaturesClickEventType,
   FeaturesHoverEventType,
   MapClickEventType,
+  MapExtentChangeEventType,
   MapEventsByType,
   SourceLoadErrorType,
 } from "@geospatial-sdk/core";
-import { toLonLat } from "ol/proj";
+import { toLonLat, transformExtent } from "ol/proj";
 import GeoJSON from "ol/format/GeoJSON";
 import OlFeature from "ol/Feature";
 import BaseEvent from "ol/events/Event";
@@ -19,6 +20,7 @@ import { Pixel } from "ol/pixel";
 import type { Feature, FeatureCollection } from "geojson";
 import throttle from "lodash.throttle";
 import { BaseLayerObjectEventTypes } from "ol/layer/Base";
+import { equals } from "ol/extent";
 
 const GEOJSON = new GeoJSON();
 
@@ -100,6 +102,7 @@ async function readFeaturesAtPixel(
 
 function registerFeatureClickEvent(map: Map) {
   if (map.get(FeaturesClickEventType)) return;
+
   map.on("click", async (event) => {
     const features = await readFeaturesAtPixel(map, event);
     map.dispatchEvent({
@@ -107,11 +110,13 @@ function registerFeatureClickEvent(map: Map) {
       features,
     } as unknown as BaseEvent);
   });
+
   map.set(FeaturesClickEventType, true);
 }
 
 function registerFeatureHoverEvent(map: Map) {
   if (map.get(FeaturesHoverEventType)) return;
+
   map.on("pointermove", async (event) => {
     const features = await readFeaturesAtPixel(map, event);
     map.dispatchEvent({
@@ -119,9 +124,43 @@ function registerFeatureHoverEvent(map: Map) {
       features,
     } as unknown as BaseEvent);
   });
+
   map.set(FeaturesHoverEventType, true);
 }
 
+function registerMapExtentChangeEvent(map: Map) {
+  if (map.get(MapExtentChangeEventType)) return;
+
+  let lastExtent: number[] | null = null;
+
+  const handleExtentChange = () => {
+    const extent = map.getView().calculateExtent(map.getSize());
+    const reprojectedExtent = transformExtent(
+      extent,
+      map.getView().getProjection(),
+      "EPSG:4326",
+    );
+
+    if (lastExtent && equals(lastExtent, reprojectedExtent)) {
+      return;
+    }
+
+    lastExtent = reprojectedExtent;
+
+    map.dispatchEvent({
+      type: MapExtentChangeEventType,
+      extent: reprojectedExtent,
+    } as unknown as BaseEvent);
+  };
+
+  map.getView().on("change:center", handleExtentChange);
+  map.getView().on("change:resolution", handleExtentChange);
+  map.getView().on("change:rotation", handleExtentChange);
+  map.on("change:size", handleExtentChange);
+
+  map.set(MapExtentChangeEventType, true);
+}
+
 export function listen<T extends keyof MapEventsByType>(
   map: Map,
   eventType: T,
@@ -154,6 +193,13 @@ export function listen<T extends keyof MapEventsByType>(
         });
       });
       break;
+    case MapExtentChangeEventType:
+      registerMapExtentChangeEvent(map);
+      // see comment above
+      map.on(eventType as unknown as MapObjectEventTypes, (event) => {
+        (callback as (event: unknown) => void)(event);
+      });
+      break;
     case SourceLoadErrorType: {
       const errorCallback = (event: BaseEvent) => {
         (callback as (event: unknown) => void)(event);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geospatial-sdk/openlayers",
-  "version": "0.0.5-dev.38+fe1fda8",
+  "version": "0.0.5-dev.40+17bad88",
   "description": "OpenLayers-related utilities",
   "keywords": [
     "ol",
@@ -37,10 +37,10 @@
     "ol": ">6.x"
   },
   "dependencies": {
-    "@geospatial-sdk/core": "^0.0.5-dev.38+fe1fda8",
+    "@geospatial-sdk/core": "^0.0.5-dev.40+17bad88",
     "chroma-js": "^2.4.2",
     "lodash.throttle": "^4.1.1",
     "ol-mapbox-style": "12.4.0"
   },
-  "gitHead": "fe1fda8882b1113ac9a52059a992836dd87cf23e"
+  "gitHead": "17bad885319e693911c2219422bfe3fca4437fa2"
 }