@opengeoweb/webmap-react 9.35.1-spike-oltanstack.0 → 9.37.0

package/index.esm.js

@@ -1948,8 +1948,9 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
               screenCoords: result.screenCoords
             };
             onHoverFeature(_this2.featureEvent);
-          } else {
+          } else if (_this2.featureEvent) {
             _this2.featureEvent = undefined;
+            onHoverFeature(undefined);
           }
           var webmapjs = webmapUtils.getWMJSMapById(mapId);
           webmapjs && webmapjs.draw('MapDraw::onHoverFeature');
@@ -2809,7 +2810,8 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props9 = this.props,
         selectedFeatureIndex = _this$props9.selectedFeatureIndex,
         isInEditMode = _this$props9.isInEditMode,
-        mapId = _this$props9.mapId;
+        mapId = _this$props9.mapId,
+        linkedFeatures = _this$props9.linkedFeatures;
       if (!((_this$geojson3 = this.geojson) !== null && _this$geojson3 !== void 0 && (_this$geojson3 = _this$geojson3.features) !== null && _this$geojson3 !== void 0 && _this$geojson3.length)) {
         return;
       }
@@ -2969,8 +2971,8 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
       }
       /* Draw selected feature to display it on top */
       drawFeatureGeometry(this.getSelectedFeature(), selectedFeatureIndex);
-      /* Higlight polygon with mousehover */
-      if (isInEditMode === true && this.mouseOverPolygonFeatureIndex === selectedFeatureIndex && this.mouseIsOverVertexNr === VERTEX.NONE && this.snappedPolygonIndex === SNAPPEDFEATURE.NONE && this.selectedEdge === EDGE.NONE || this.mouseIsOverVertexNr === VERTEX.MIDDLE_POINT_OF_FEATURE) {
+      /* Highlight polygon with mousehover */
+      if (isInEditMode === true && this.mouseOverPolygonFeatureIndex === selectedFeatureIndex && this.mouseIsOverVertexNr === VERTEX.NONE && this.snappedPolygonIndex === SNAPPEDFEATURE.NONE && this.selectedEdge === EDGE.NONE || this.mouseIsOverVertexNr === VERTEX.MIDDLE_POINT_OF_FEATURE || linkedFeatures) {
         var _feature3 = this.getSelectedFeature();
         var featureProperties = _feature3.properties;
         if (this.mouseOverPolygonCoordinates.length >= 2) {
@@ -3491,6 +3493,7 @@ MapDraw.defaultProps = {
 
 var MapDrawContainer = function MapDrawContainer(_ref) {
   var featureLayers = _ref.featureLayers,
+    linkedFeatures = _ref.linkedFeatures,
     mapId = _ref.mapId;
   return jsx(Fragment, {
     children: featureLayers.map(function (layer) {
@@ -3501,6 +3504,7 @@ var MapDrawContainer = function MapDrawContainer(_ref) {
         },
         children: jsx(MapDraw, {
           geojson: layer.geojson,
+          linkedFeatures: linkedFeatures,
           isInEditMode: layer.isInEditMode,
           isInDeleteMode: layer.isInDeleteMode,
           drawMode: layer.drawMode,
@@ -6704,7 +6708,16 @@ var makeLayerPropListFromChildren = function makeLayerPropListFromChildren(child
   return myChildren;
 };
 var parseWMJSLayer = function parseWMJSLayer(wmLayer, forceReload) {
-  return wmLayer.parseLayer(forceReload);
+  return new Promise(function (resolve, reject) {
+    var callback = function callback() {
+      if (wmLayer.hasError) {
+        reject(new Error(wmLayer.lastError));
+      } else {
+        resolve(wmLayer);
+      }
+    };
+    wmLayer.parseLayer(callback, forceReload, 'ReactMapView parseWMJSLayer');
+  });
 };
 var setWMLayerPropsBasedOnChildProps = function setWMLayerPropsBasedOnChildProps(child, wmLayer, mapViewProps) {
   var needsRedraw = false;
@@ -6762,7 +6775,7 @@ var setWMLayerPropsBasedOnChildProps = function setWMLayerPropsBasedOnChildProps
 };
 var addWMLayerPropsBasedOnChildProps = function addWMLayerPropsBasedOnChildProps(child, mapId, props, onUpdateLayerInformation) {
   var wmjsMap = getWMJSMapById(mapId);
-  if (!wmjsMap || wmjsMap.isDestroyed) {
+  if (!wmjsMap) {
     return;
   }
   var keepOnTop = child.layerType === LayerType.overLayer || false;
@@ -6787,18 +6800,11 @@ var addWMLayerPropsBasedOnChildProps = function addWMLayerPropsBasedOnChildProps
       if (newWMLayer.hasError === true) {
         child.onLayerError && child.onLayerError(newWMLayer, new Error(newWMLayer.lastError));
       }
-      // This ensures that MultiMapViewConnect works properly.
-      setTimeout(function () {
-        var wmjsMap = getWMJSMapById(mapId);
-        if (!wmjsMap || wmjsMap.isDestroyed) {
-          return;
-        }
-        setWMLayerPropsBasedOnChildProps(child, newWMLayer, props);
-        var layerInfo = getLayerUpdateInfo(newWMLayer, mapId);
-        onUpdateLayerInformation && onUpdateLayerInformation(layerInfo);
-        child.onLayerReady && child.onLayerReady(newWMLayer, wmjsMap);
-        wmjsMap.draw();
-      }, 1);
+      setWMLayerPropsBasedOnChildProps(child, newWMLayer, props);
+      var layerInfo = getLayerUpdateInfo(newWMLayer, mapId);
+      onUpdateLayerInformation && onUpdateLayerInformation(layerInfo);
+      child.onLayerReady && child.onLayerReady(newWMLayer, wmjsMap);
+      wmjsMap.draw();
     })["catch"](function (e) {
       child.onLayerError && child.onLayerError(e);
     });
@@ -6895,6 +6901,10 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
      */
     _this.onStartRefetchTimer = function (force) {
       var shouldAutoFetch = _this.props.shouldAutoFetch;
+      /* TODO, Maarten Plieger, 2021-09-02
+        This causes many issues, we should improve the update strategy.
+        Certain presets have >20 layers. This causes 20 times parsing the GetCapabilities for a minor update of the store.
+      */
       _this.clearRefetchTimer();
       var autoFetchInterval = Number(shouldAutoFetch); // Default true -> 1 minute
       var refetch = function refetch() {
@@ -6904,40 +6914,20 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
           var mapId = _this.props.mapId;
           var wmjsMap = webmapUtils.getWMJSMapById(mapId);
           var layers = wmjsMap === null || wmjsMap === void 0 ? void 0 : wmjsMap.getLayers();
-          layers === null || layers === void 0 || layers.forEach( /*#__PURE__*/function () {
-            var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(layer) {
-              var _this2, _props, _mapId, onUpdateLayerInformation, layerInfo;
-              return _regeneratorRuntime().wrap(function _callee$(_context) {
-                while (1) switch (_context.prev = _context.next) {
-                  case 0:
-                    if (!(layer.enabled !== false)) {
-                      _context.next = 13;
-                      break;
-                    }
-                    _context.prev = 1;
-                    _context.next = 4;
-                    return layer.parseLayer();
-                  case 4:
-                    _this2 = _this, _props = _this2.props;
-                    _mapId = _props.mapId, onUpdateLayerInformation = _props.onUpdateLayerInformation;
-                    layerInfo = getLayerUpdateInfo(layer, _mapId);
-                    onUpdateLayerInformation && onUpdateLayerInformation(layerInfo);
-                    _context.next = 13;
-                    break;
-                  case 10:
-                    _context.prev = 10;
-                    _context.t0 = _context["catch"](1);
-                    console.error(_context.t0);
-                  case 13:
-                  case "end":
-                    return _context.stop();
-                }
-              }, _callee, null, [[1, 10]]);
-            }));
-            return function (_x) {
-              return _ref.apply(this, arguments);
-            };
-          }());
+          layers === null || layers === void 0 || layers.forEach(function (layer) {
+            if (layer.enabled !== false) {
+              parseWMJSLayer(layer, true).then(function (wmLayer) {
+                var _this2 = _this,
+                  props = _this2.props;
+                var mapId = props.mapId,
+                  onUpdateLayerInformation = props.onUpdateLayerInformation;
+                var layerInfo = getLayerUpdateInfo(wmLayer, mapId);
+                onUpdateLayerInformation && onUpdateLayerInformation(layerInfo);
+              })["catch"](function (e) {
+                console.error(e);
+              });
+            }
+          });
         }
       };
       if (autoFetchInterval > 0) {
@@ -7220,13 +7210,13 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
         // ReactWMJSLayer Layer Childs: Detect all ReactLayers connected to WMJSLayers, remove WMJSLayer if there is no ReactLayer
         var wmjsLayers = wmjsMap.getLayers();
         var onUpdateLayerInformation = props.onUpdateLayerInformation,
-          _mapId2 = props.mapId;
+          _mapId = props.mapId;
         wmjsLayers.forEach(function (wmLayer) {
           var isWMLayerInReactMapViewChildren = myChildren.find(function (child) {
             return child.id === wmLayer.ReactWMJSLayerId;
           });
           if (!isWMLayerInReactMapViewChildren) {
-            removeWMLayerFromMap(wmLayer, _mapId2, onUpdateLayerInformation);
+            removeWMLayerFromMap(wmLayer, _mapId, onUpdateLayerInformation);
           }
         });
         // ReactWMJSLayer BaseLayer Childs: For the baseLayers, detect all ReactLayers connected to WMJSLayers, remove WMJSLayer if there is no ReactLayer
@@ -7253,29 +7243,29 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
           var layerIsInThisMap = wmjsMap.hasLayer(wmLayer);
           if (!layerIsInThisMap) {
             // Add a new layer, it is not in the this map
-            addWMLayerPropsBasedOnChildProps(child, _mapId2, props, onUpdateLayerInformation);
+            addWMLayerPropsBasedOnChildProps(child, _mapId, props, onUpdateLayerInformation);
             needsRedraw = true;
           } else {
             // Handle existing layer
             if (child.name !== undefined && wmLayer.name !== child.name) {
               // Handle layer name change
-              wmLayer.setName(child.name).then( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+              wmLayer.setName(child.name).then( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
                 var layerInfo;
-                return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-                  while (1) switch (_context2.prev = _context2.next) {
+                return _regeneratorRuntime().wrap(function _callee$(_context) {
+                  while (1) switch (_context.prev = _context.next) {
                     case 0:
-                      _context2.next = 2;
-                      return wmLayer.parseLayer();
+                      _context.next = 2;
+                      return parseWMJSLayer(wmLayer, false);
                     case 2:
-                      layerInfo = getLayerUpdateInfo(wmLayer, _mapId2);
+                      layerInfo = getLayerUpdateInfo(wmLayer, _mapId);
                       setWMLayerPropsBasedOnChildProps(child, wmLayer, props);
                       onUpdateLayerInformation && onUpdateLayerInformation(layerInfo);
                       wmjsMap.draw();
                     case 6:
                     case "end":
-                      return _context2.stop();
+                      return _context.stop();
                   }
-                }, _callee2);
+                }, _callee);
               })))["catch"](function (e) {
                 child.onLayerError && child.onLayerError(wmLayer, e);
               });
@@ -7418,9 +7408,11 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
         passiveMap = _this$props5.passiveMap,
         children = _this$props5.children,
         onClick = _this$props5.onClick,
-        mapId = _this$props5.mapId;
+        mapId = _this$props5.mapId,
+        linkedFeatures = _this$props5.linkedFeatures;
       var adagucInitialised = this.state.adagucInitialised;
       var featureLayers = getFeatureLayers(children);
+      // TODO: Improve in https://gitlab.com/opengeoweb/opengeoweb/-/issues/4579
       featureLayers.forEach(function (featureLayer) {
         var wmFeatureLayer = getWMLayerById(featureLayer.id);
         if (!wmFeatureLayer) {
@@ -7480,6 +7472,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
               children: children
             }), adagucInitialised && featureLayers && featureLayers.length ? jsx(MapDrawContainer, {
               featureLayers: featureLayers,
+              linkedFeatures: linkedFeatures,
               mapId: mapId
             }) : null]
           }), passiveMap &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/webmap-react",
-  "version": "9.35.1-spike-oltanstack.0",
+  "version": "9.37.0",
   "description": "GeoWeb react wrapper for webmap",
   "license": "Apache-2.0",
   "repository": {
@@ -19,8 +19,7 @@
     "react-resize-detector": "^9.1.0",
     "i18next": "^23.11.5",
     "@mui/material": "^6.1.1",
-    "react-i18next": "^15.1.1",
-    "@tanstack/react-query": "^5.61.5"
+    "react-i18next": "^15.1.1"
   },
   "peerDependencies": {
     "react": "18",

package/src/lib/components/MapDraw/MapDraw.d.ts

@@ -28,6 +28,7 @@ export interface FeatureEvent {
 export interface MapDrawProps {
     mapId: string;
     geojson: GeoJSON.FeatureCollection;
+    linkedFeatures?: GeoJSON.FeatureCollection;
     drawMode: string;
     deletePolygonCallback?: string;
     exitDrawModeCallback: (reason: DrawModeExitCallback, newGeoJSON?: GeoJSON.FeatureCollection) => void;

package/src/lib/components/MapDraw/MapDrawContainer.d.ts

@@ -17,6 +17,7 @@ export interface FeatureLayer {
 }
 interface MapDrawContainerProps {
     featureLayers: FeatureLayer[];
+    linkedFeatures?: GeoJSON.FeatureCollection;
     mapId: string;
 }
 export declare const MapDrawContainer: React.FC<MapDrawContainerProps>;

package/src/lib/components/ReactMapView/types.d.ts

@@ -31,6 +31,7 @@ export interface ReactMapViewProps {
     holdShiftToScroll?: boolean;
     shouldDisablePrefetching?: boolean;
     t?: TFunction;
+    linkedFeatures?: GeoJSON.FeatureCollection;
     onWMJSMount?: (mapId: string) => void;
     onWMJSUnMount?: (mapId: string) => void;
     onMapChangeDimension?: (payload: SetMapDimensionPayload) => void;

package/src/lib/components/TanStackDemo/TanStackDemo.GetCapabilitiesLiveUpdate.stories.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const MapViewRadar: {
-    (): React.ReactElement;
-    storyName: string;
-};

package/src/lib/hooks/useHooksGetCapabilities.d.ts

@@ -1,46 +0,0 @@
-import { GetCapabilitiesJson, WMSServiceInfo, LayerTree, LayerProps, WMLayer } from '@opengeoweb/webmap';
-import { UseQueryResult } from '@tanstack/react-query';
-/**
- * Queries the WMS GetCapabilities. This is the base TanStack hook for the other hooks in this file.
- *
- * @param {string} serviceUrl
- * @returns {UseQueryResult<GetCapabilitiesJson>}
- */
-export declare const useQueryGetWMSGetCapabilities: (serviceUrl: string) => UseQueryResult<GetCapabilitiesJson>;
-/**
- * Returns details about the WMS service
- *
- * @param {string} serviceUrl
- * @returns {(WMSServiceInfo | null)}
- */
-export declare const useQueryGetWMSServiceInfo: (serviceUrl: string) => WMSServiceInfo | null;
-/**
- * Gets the layer tree in hierarchical order for a WMS service. Cached by TanStack. Uses the same store as in queryWMSGetCapabilities.
- *
- * @param {string} serviceUrl
- * @returns {(LayerTree | null)}
- */
-export declare const useQueryGetWMSLayersTree: (serviceUrl: string) => LayerTree | null;
-/**
- * Gets the flat layer list (without hierarchy) for a WMS service. Cached by TanStack. Uses the same store as in queryWMSGetCapabilities.
- *
- * @param {string} serviceUrl
- * @returns {LayerProps[]}
- */
-export declare const useQueryGetWMSLayers: (serviceUrl: string) => LayerProps[];
-/**
- * Returns specific layer from the WMS service
- *
- * @param {string} serviceUrl
- * @param {string} name
- * @returns {(LayerProps | null)}
- */
-export declare const useQueryGetWMSLayer: (serviceUrl: string, name: string) => LayerProps | null;
-/**
- * Returns WMLayer instance. The layer will contains parsed dimensions and styles and keeps a state for these properties.
- *
- * @param {string} serviceUrl
- * @param {string} name
- * @returns {(WMLayer | null)}
- */
-export declare const useGetWMLayerInstance: (serviceUrl: string, name: string) => WMLayer | null;