@geospatial-sdk/openlayers 0.0.5-dev.47 → 0.0.5-dev.48

package/dist/map/apply-context-diff.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"apply-context-diff.d.ts","sourceRoot":"","sources":["../../lib/map/apply-context-diff.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,WAAW,CAAC;AAC5B,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAQtD;;;;GAIG;AACH,wBAAsB,qBAAqB,CACzC,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,cAAc,GAC1B,OAAO,CAAC,GAAG,CAAC,CA2Fd"}
+{"version":3,"file":"apply-context-diff.d.ts","sourceRoot":"","sources":["../../lib/map/apply-context-diff.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,WAAW,CAAC;AAC5B,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAQtD;;;;GAIG;AACH,wBAAsB,qBAAqB,CACzC,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,cAAc,GAC1B,OAAO,CAAC,GAAG,CAAC,CA6Fd"}

package/dist/map/apply-context-diff.js

@@ -1,4 +1,4 @@
-import { createLayer, createView } from "./create-map.js";
+import { createLayer, createView, updateLayerInMap } from "./create-map.js";
 import { fromLonLat, transformExtent } from "ol/proj.js";
 import GeoJSON from "ol/format/GeoJSON.js";
 const GEOJSON = new GeoJSON();
@@ -38,12 +38,9 @@ export async function applyContextDiffToMap(map, contextDiff) {
         }
         map.setLayers([...layersArray]);
     }
-    // recreate changed layers
+    // update or recreate changed layers
     for (const layerChanged of contextDiff.layersChanged) {
-        layers.item(layerChanged.position).dispose();
-        createLayer(layerChanged.layer).then((layer) => {
-            layers.setAt(layerChanged.position, layer);
-        });
+        updateLayerInMap(map, layerChanged.layer, layerChanged.position, layerChanged.previousLayer);
     }
     if (typeof contextDiff.viewChanges !== "undefined") {
         const { viewChanges } = contextDiff;

package/dist/map/create-map.d.ts

@@ -3,6 +3,7 @@ import Map from "ol/Map.js";
 import View from "ol/View.js";
 import Layer from "ol/layer/Layer.js";
 export declare function createLayer(layerModel: MapContextLayer): Promise<Layer>;
+export declare function updateLayerInMap(map: Map, layerModel: MapContextLayer, layerPosition: number, previousLayer: MapContextLayer): void;
 export declare function createView(viewModel: MapContextView | null, map: Map): View;
 /**
  * Create an OpenLayers map from a context; optionally specify a target (root element) for the map

package/dist/map/create-map.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-map.d.ts","sourceRoot":"","sources":["../../lib/map/create-map.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,eAAe,EACf,cAAc,EAEf,MAAM,sBAAsB,CAAC;AAC9B,OAAO,GAAG,MAAM,WAAW,CAAC;AAC5B,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,KAAK,MAAM,mBAAmB,CAAC;AAkCtC,wBAAsB,WAAW,CAAC,UAAU,EAAE,eAAe,GAAG,OAAO,CAAC,KAAK,CAAC,CA8N7E;AAED,wBAAgB,UAAU,CAAC,SAAS,EAAE,cAAc,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,IAAI,CAkC3E;AAED;;;;GAIG;AACH,wBAAsB,oBAAoB,CACxC,OAAO,EAAE,UAAU,EACnB,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,GAC5B,OAAO,CAAC,GAAG,CAAC,CAKd;AAED;;;;GAIG;AACH,wBAAsB,mBAAmB,CACvC,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,UAAU,GAClB,OAAO,CAAC,GAAG,CAAC,CAQd"}
+{"version":3,"file":"create-map.d.ts","sourceRoot":"","sources":["../../lib/map/create-map.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,eAAe,EACf,cAAc,EAEf,MAAM,sBAAsB,CAAC;AAC9B,OAAO,GAAG,MAAM,WAAW,CAAC;AAC5B,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,KAAK,MAAM,mBAAmB,CAAC;AA6CtC,wBAAsB,WAAW,CAAC,UAAU,EAAE,eAAe,GAAG,OAAO,CAAC,KAAK,CAAC,CAyN7E;AAED,wBAAgB,gBAAgB,CAC9B,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,eAAe,EAC3B,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,eAAe,QAgB/B;AAED,wBAAgB,UAAU,CAAC,SAAS,EAAE,cAAc,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,IAAI,CAkC3E;AAED;;;;GAIG;AACH,wBAAsB,oBAAoB,CACxC,OAAO,EAAE,UAAU,EACnB,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,GAC5B,OAAO,CAAC,GAAG,CAAC,CAKd;AAED;;;;GAIG;AACH,wBAAsB,mBAAmB,CACvC,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,UAAU,GAClB,OAAO,CAAC,GAAG,CAAC,CAQd"}

package/dist/map/create-map.js

@@ -19,8 +19,18 @@ import { OgcApiEndpoint, WfsEndpoint, WmtsEndpoint, } from "@camptocamp/ogc-clie
 import { MapboxVectorLayer } from "ol-mapbox-style";
 import { handleEndpointError, tileLoadErrorCatchFunction, } from "./handle-errors.js";
 import VectorTile from "ol/source/VectorTile.js";
+import { canDoIncrementalUpdate } from "./layer-update.js";
 const GEOJSON = new GeoJSON();
 const WFS_MAX_FEATURES = 10000;
+function updateLayerProperties(layerModel, olLayer) {
+    typeof layerModel.visibility !== "undefined" &&
+        olLayer.setVisible(layerModel.visibility);
+    typeof layerModel.opacity !== "undefined" &&
+        olLayer.setOpacity(layerModel.opacity);
+    typeof layerModel.attributions !== "undefined" &&
+        olLayer.getSource()?.setAttributions(layerModel.attributions);
+    olLayer.set("label", layerModel.label);
+}
 export async function createLayer(layerModel) {
     const { type } = layerModel;
     let layer;
@@ -216,15 +226,23 @@ export async function createLayer(layerModel) {
     if (!layer) {
         throw new Error(`Layer could not be created for type: ${layerModel.type}`);
     }
-    typeof layerModel.visibility !== "undefined" &&
-        layer.setVisible(layerModel.visibility);
-    typeof layerModel.opacity !== "undefined" &&
-        layer.setOpacity(layerModel.opacity);
-    typeof layerModel.attributions !== "undefined" &&
-        layer.getSource()?.setAttributions(layerModel.attributions);
-    layer.set("label", layerModel.label);
+    updateLayerProperties(layerModel, layer);
     return layer;
 }
+export function updateLayerInMap(map, layerModel, layerPosition, previousLayer) {
+    const layers = map.getLayers();
+    const updatedLayer = layers.item(layerPosition);
+    // if an incremental update is possible, do it to avoid costly layer recreation
+    if (canDoIncrementalUpdate(previousLayer, layerModel)) {
+        updateLayerProperties(layerModel, updatedLayer);
+        return;
+    }
+    // dispose and recreate layer
+    updatedLayer.dispose();
+    createLayer(layerModel).then((layer) => {
+        layers.setAt(layerPosition, layer);
+    });
+}
 export function createView(viewModel, map) {
     if (viewModel === null) {
         return new View({

package/dist/map/layer-update.d.ts

@@ -0,0 +1,13 @@
+import { MapContextLayer } from "@geospatial-sdk/core";
+/**
+ * Incremental update is possible only if certain properties are changed: opacity,
+ * visibility, zIndex, etc.
+ *
+ * Note: we assume that both layers are different versions of the same layer (this
+ * will not be checked again)
+ * @param oldLayer
+ * @param newLayer
+ * @return Returns `true` if the only properties changed are the updatable ones
+ */
+export declare function canDoIncrementalUpdate(oldLayer: MapContextLayer, newLayer: MapContextLayer): boolean;
+//# sourceMappingURL=layer-update.d.ts.map

package/dist/map/layer-update.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layer-update.d.ts","sourceRoot":"","sources":["../../lib/map/layer-update.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAahE;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,eAAe,GACxB,OAAO,CAIT"}

package/dist/map/layer-update.js

@@ -0,0 +1,25 @@
+import { getHash } from "@geospatial-sdk/core";
+const UPDATABLE_PROPERTIES = [
+    "opacity",
+    "visibility",
+    "label",
+    "attributions",
+    "extras",
+    "version",
+    // TODO (when available) "zIndex"
+];
+/**
+ * Incremental update is possible only if certain properties are changed: opacity,
+ * visibility, zIndex, etc.
+ *
+ * Note: we assume that both layers are different versions of the same layer (this
+ * will not be checked again)
+ * @param oldLayer
+ * @param newLayer
+ * @return Returns `true` if the only properties changed are the updatable ones
+ */
+export function canDoIncrementalUpdate(oldLayer, newLayer) {
+    const oldHash = getHash(oldLayer, UPDATABLE_PROPERTIES);
+    const newHash = getHash(newLayer, UPDATABLE_PROPERTIES);
+    return oldHash === newHash;
+}

package/lib/map/apply-context-diff.test.ts

@@ -127,6 +127,7 @@ describe("applyContextDiffToMap", () => {
               ...SAMPLE_LAYER2,
               url: "http://changed/",
             } as MapContextLayer,
+            previousLayer: SAMPLE_LAYER2,
             position: 0,
           },
           {
@@ -137,6 +138,7 @@ describe("applyContextDiffToMap", () => {
                 changed: true,
               },
             } as MapContextLayer,
+            previousLayer: SAMPLE_LAYER1,
             position: 1,
           },
         ],
@@ -151,6 +153,38 @@ describe("applyContextDiffToMap", () => {
       assertEqualsToModel(layersArray[0], diff.layersChanged[0].layer);
       assertEqualsToModel(layersArray[1], diff.layersChanged[1].layer);
     });
+
+    describe("layers changed (updatable properties only)", () => {
+      let prevOlLayer: BaseLayer;
+      let newOlLayer: BaseLayer;
+      beforeEach(() => {
+        diff = {
+          layersAdded: [],
+          layersChanged: [
+            {
+              layer: {
+                ...SAMPLE_LAYER1,
+                attributions: "new attributions!",
+              } as MapContextLayer,
+              previousLayer: SAMPLE_LAYER1,
+              position: 1,
+            },
+          ],
+          layersRemoved: [],
+          layersReordered: [],
+        };
+        prevOlLayer = map.getLayers().item(1);
+        applyContextDiffToMap(map, diff);
+        newOlLayer = map.getLayers().item(1);
+      });
+      it("modifies the layer without recreating it", () => {
+        expect(prevOlLayer).toBe(newOlLayer);
+        const newAttributions = (newOlLayer as any)
+          .getSource()
+          ?.getAttributions();
+        expect(newAttributions()).toEqual(["new attributions!"]);
+      });
+    });
   });
 
   describe("reordering", () => {
@@ -319,6 +353,7 @@ describe("applyContextDiffToMap", () => {
         layersChanged: [
           {
             layer: changedLayer,
+            previousLayer: SAMPLE_LAYER3,
             position: 1,
           },
         ],

package/lib/map/apply-context-diff.ts

@@ -1,6 +1,6 @@
 import Map from "ol/Map.js";
 import { MapContextDiff } from "@geospatial-sdk/core";
-import { createLayer, createView } from "./create-map.js";
+import { createLayer, createView, updateLayerInMap } from "./create-map.js";
 import { fromLonLat, transformExtent } from "ol/proj.js";
 import GeoJSON from "ol/format/GeoJSON.js";
 import SimpleGeometry from "ol/geom/SimpleGeometry.js";
@@ -58,12 +58,14 @@ export async function applyContextDiffToMap(
     map.setLayers([...layersArray]);
   }
 
-  // recreate changed layers
+  // update or recreate changed layers
   for (const layerChanged of contextDiff.layersChanged) {
-    layers.item(layerChanged.position).dispose();
-    createLayer(layerChanged.layer).then((layer) => {
-      layers.setAt(layerChanged.position, layer);
-    });
+    updateLayerInMap(
+      map,
+      layerChanged.layer,
+      layerChanged.position,
+      layerChanged.previousLayer,
+    );
   }
 
   if (typeof contextDiff.viewChanges !== "undefined") {

package/lib/map/create-map.ts

@@ -36,10 +36,21 @@ import {
   tileLoadErrorCatchFunction,
 } from "./handle-errors.js";
 import VectorTile from "ol/source/VectorTile.js";
+import { canDoIncrementalUpdate } from "./layer-update.js";
 
 const GEOJSON = new GeoJSON();
 const WFS_MAX_FEATURES = 10000;
 
+function updateLayerProperties(layerModel: MapContextLayer, olLayer: Layer) {
+  typeof layerModel.visibility !== "undefined" &&
+    olLayer.setVisible(layerModel.visibility);
+  typeof layerModel.opacity !== "undefined" &&
+    olLayer.setOpacity(layerModel.opacity);
+  typeof layerModel.attributions !== "undefined" &&
+    olLayer.getSource()?.setAttributions(layerModel.attributions);
+  olLayer.set("label", layerModel.label);
+}
+
 export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
   const { type } = layerModel;
   let layer: Layer | undefined;
@@ -253,17 +264,34 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
   if (!layer) {
     throw new Error(`Layer could not be created for type: ${layerModel.type}`);
   }
-  typeof layerModel.visibility !== "undefined" &&
-    layer.setVisible(layerModel.visibility);
-  typeof layerModel.opacity !== "undefined" &&
-    layer.setOpacity(layerModel.opacity);
-  typeof layerModel.attributions !== "undefined" &&
-    layer.getSource()?.setAttributions(layerModel.attributions);
-  layer.set("label", layerModel.label);
+
+  updateLayerProperties(layerModel, layer);
 
   return layer;
 }
 
+export function updateLayerInMap(
+  map: Map,
+  layerModel: MapContextLayer,
+  layerPosition: number,
+  previousLayer: MapContextLayer,
+) {
+  const layers = map.getLayers();
+  const updatedLayer = layers.item(layerPosition) as Layer;
+
+  // if an incremental update is possible, do it to avoid costly layer recreation
+  if (canDoIncrementalUpdate(previousLayer, layerModel)) {
+    updateLayerProperties(layerModel, updatedLayer);
+    return;
+  }
+
+  // dispose and recreate layer
+  updatedLayer.dispose();
+  createLayer(layerModel).then((layer) => {
+    layers.setAt(layerPosition, layer);
+  });
+}
+
 export function createView(viewModel: MapContextView | null, map: Map): View {
   if (viewModel === null) {
     return new View({

package/lib/map/layer-update.test.ts

@@ -0,0 +1,45 @@
+import { canDoIncrementalUpdate } from "./layer-update.js";
+import { MapContextLayer } from "@geospatial-sdk/core";
+
+describe("Layer update utils", () => {
+  describe("canDoIncrementalUpdate", () => {
+    it("returns true if only updatable properties are changed", () => {
+      const oldLayer = {
+        name: "layer1",
+        type: "wms",
+        url: "https://example.com/wms",
+        opacity: 0.5,
+        visibility: true,
+        label: "Layer 1",
+      } as MapContextLayer;
+      const newLayer = {
+        name: "layer1",
+        type: "wms",
+        url: "https://example.com/wms",
+        opacity: 0.8,
+        label: "Layer 1 Updated",
+        extras: { hello: "world" },
+      } as MapContextLayer;
+      expect(canDoIncrementalUpdate(oldLayer, newLayer)).toBe(true);
+    });
+    it("returns false if non-updatable properties are changed", () => {
+      const oldLayer = {
+        name: "layer1",
+        type: "wms",
+        url: "https://example.com/wms",
+        opacity: 0.5,
+        visibility: true,
+        label: "Layer 1",
+      } as MapContextLayer;
+      const newLayer = {
+        name: "layer1",
+        type: "wms",
+        url: "https://example.com/wms/CHANGED",
+        opacity: 0.5,
+        visibility: true,
+        label: "Layer 1",
+      } as MapContextLayer;
+      expect(canDoIncrementalUpdate(oldLayer, newLayer)).toBe(false);
+    });
+  });
+});

package/lib/map/layer-update.ts

@@ -0,0 +1,31 @@
+import { getHash, MapContextLayer } from "@geospatial-sdk/core";
+import { MapContextBaseLayer } from "@geospatial-sdk/core/lib/model/map-context.js";
+
+const UPDATABLE_PROPERTIES: (keyof MapContextBaseLayer)[] = [
+  "opacity",
+  "visibility",
+  "label",
+  "attributions",
+  "extras",
+  "version",
+  // TODO (when available) "zIndex"
+];
+
+/**
+ * Incremental update is possible only if certain properties are changed: opacity,
+ * visibility, zIndex, etc.
+ *
+ * Note: we assume that both layers are different versions of the same layer (this
+ * will not be checked again)
+ * @param oldLayer
+ * @param newLayer
+ * @return Returns `true` if the only properties changed are the updatable ones
+ */
+export function canDoIncrementalUpdate(
+  oldLayer: MapContextLayer,
+  newLayer: MapContextLayer,
+): boolean {
+  const oldHash = getHash(oldLayer, UPDATABLE_PROPERTIES);
+  const newHash = getHash(newLayer, UPDATABLE_PROPERTIES);
+  return oldHash === newHash;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geospatial-sdk/openlayers",
-  "version": "0.0.5-dev.47+37669e8",
+  "version": "0.0.5-dev.48+a6a661d",
   "description": "OpenLayers-related utilities",
   "keywords": [
     "ol",
@@ -37,10 +37,10 @@
     "ol": ">6.x"
   },
   "dependencies": {
-    "@geospatial-sdk/core": "^0.0.5-dev.47+37669e8",
+    "@geospatial-sdk/core": "^0.0.5-dev.48+a6a661d",
     "chroma-js": "^2.4.2",
     "lodash.throttle": "^4.1.1",
     "ol-mapbox-style": "12.4.0"
   },
-  "gitHead": "37669e815765d751c4795a67e671ae19e3bf5a92"
+  "gitHead": "a6a661d277224d3e0acef7e2df817a3c5b7360e1"
 }