Merge pull request #3845 from terrestris/use-wmslayer-type

feat: use `WmsLayer` from `ol-util` instead of `react-util`

package.json

@@ -74,8 +74,8 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@terrestris/base-util": "^1.1.0",
-    "@terrestris/ol-util": "^17.0.0",
-    "@terrestris/react-util": "^5.0.0-beta.1",
+    "@terrestris/ol-util": "^18.0.0",
+    "@terrestris/react-util": "^5.0.0",
     "@types/geojson": "^7946.0.14",
     "@types/lodash": "^4.17.1",
     "ag-grid-community": "^31.3.1",
@@ -101,7 +101,7 @@
     "@semantic-release/git": "^10.0.1",
     "@terrestris/eslint-config-typescript": "^5.0.0",
     "@terrestris/eslint-config-typescript-react": "^2.0.0",
-    "@terrestris/ol-util": "^17.0.0",
+    "@terrestris/ol-util": "^18.0.0",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.6",
@@ -153,7 +153,7 @@
     "whatwg-fetch": "^3.6.20"
   },
   "peerDependencies": {
-    "@terrestris/ol-util": ">=17",
+    "@terrestris/ol-util": ">=18",
     "@types/react": ">=18",
     "antd": "^5",
     "ol": ">=9",

src/Container/AddWmsPanel/AddWmsLayerEntry/AddWmsLayerEntry.tsx

@@ -2,7 +2,7 @@ import './AddWmsLayerEntry.less';
 
 import { faCopyright, faInfo } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { WmsLayer } from '@terrestris/react-util/dist/Util/typeUtils';
+import { WmsLayer } from '@terrestris/ol-util';
 import { Checkbox, Tooltip } from 'antd';
 import OlMap from 'ol/Map';
 import React, { useEffect, useState } from 'react';

src/Container/AddWmsPanel/AddWmsPanel.example.md

@@ -9,7 +9,7 @@ import AddWmsPanel from '@terrestris/react-geo/dist/Container/AddWmsPanel/AddWms
 import MapComponent from '@terrestris/react-geo/dist/Map/MapComponent/MapComponent';
 import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext';
 import useMap from '@terrestris/react-util/dist/Hooks/useMap/useMap';
-import { WmsLayer } from '@terrestris/react-util/dist/Util/typeUtils';
+import { WmsLayer } from '@terrestris/ol-util';
 import OlLayerTile from 'ol/layer/Tile';
 import OlMap from 'ol/Map';
 import { fromLonLat } from 'ol/proj';

src/Container/AddWmsPanel/AddWmsPanel.tsx

@@ -1,11 +1,10 @@
 import './AddWmsPanel.less';
 
 import Logger from '@terrestris/base-util/dist/Logger';
+import { WmsLayer } from '@terrestris/ol-util';
 import useMap from '@terrestris/react-util/dist/Hooks/useMap/useMap';
-import { WmsLayer } from '@terrestris/react-util/dist/Util/typeUtils';
 import { Checkbox } from 'antd';
 import { CheckboxValueType } from 'antd/lib/checkbox/Group';
-import _isFunction from 'lodash/isFunction';
 import React, { useState } from 'react';
 
 import SimpleButton from '../../Button/SimpleButton/SimpleButton';

src/Legend/Legend.tsx

@@ -1,13 +1,8 @@
 import { faCircleNotch } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import Logger from '@terrestris/base-util/dist/Logger';
-import MapUtil from '@terrestris/ol-util/dist/MapUtil/MapUtil';
+import { MapUtil, WmsLayer } from '@terrestris/ol-util';
 import { Spin } from 'antd';
-import _isEqual from 'lodash/isEqual';
-import OlLayerImage from 'ol/layer/Image';
-import OlLayerTile from 'ol/layer/Tile';
-import OlSourceImageWMS from 'ol/source/ImageWMS';
-import OlSourceTileWMS from 'ol/source/TileWMS';
 import * as React from 'react';
 import { useCallback, useEffect, useState } from 'react';
 
@@ -22,7 +17,7 @@ import { CSS_PREFIX } from '../constants';
  * @param params The extra params.
  */
 const getLegendUrl = (
-  legendLayer: OlLayerTile<OlSourceTileWMS> | OlLayerImage<OlSourceImageWMS>,
+  legendLayer: WmsLayer,
   params: any
 ) => {
   let url;
@@ -44,7 +39,7 @@ export interface BaseProps {
   /**
    * The layer you want to display the legend of.
    */
-  layer: OlLayerTile<OlSourceTileWMS> | OlLayerImage<OlSourceImageWMS>;
+  layer: WmsLayer;
   /**
    * An object containing additional request params like "{HEIGHT: 400}" will
    * be transformed to "&HEIGHT=400" an added to the GetLegendGraphic request.

src/Panel/TimeLayerSliderPanel/TimeLayerSliderPanel.tsx

@@ -1,12 +1,10 @@
+import { WmsLayer } from '@terrestris/ol-util';
 import { DatePicker, Popover, Select } from 'antd';
 import dayjs from 'dayjs';
 import _isEqual from 'lodash/isEqual';
 import _isFinite from 'lodash/isFinite';
 import moment, { Moment } from 'moment';
 import { getUid } from 'ol';
-import OlLayer from 'ol/layer/Layer';
-import OlImageWMS from 'ol/source/ImageWMS';
-import OlTileWMS from 'ol/source/TileWMS';
 import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 const RangePicker = DatePicker.RangePicker;
 const Option = Select.Option;
@@ -41,7 +39,7 @@ export type PlaybackSpeedType = 'hours' | 'days' | 'weeks' | 'months' | 'years';
 export interface TimeLayerSliderPanelProps {
   className?: string;
   onChange?: (arg: moment.Moment) => void;
-  timeAwareLayers: OlLayer<OlImageWMS | OlTileWMS>[];
+  timeAwareLayers: WmsLayer[];
   value?: moment.Moment;
   dateFormat?: string;
   tooltips?: Tooltips;
@@ -95,7 +93,7 @@ export const TimeLayerSliderPanel: React.FC<TimeLayerSliderPanelProps> = memo(
 
     const wrapTimeSlider = useCallback(() => {
       const wmsTimeLayers: TimeLayerAwareConfig[] = [];
-      timeAwareLayers.forEach((l: OlLayer<OlImageWMS | OlTileWMS>) => {
+      timeAwareLayers.forEach(l => {
         if (l.get('type') === 'WMSTime') {
           wmsTimeLayers.push({ layer: l });
         }
@@ -188,7 +186,7 @@ export const TimeLayerSliderPanel: React.FC<TimeLayerSliderPanelProps> = memo(
       const startDatesFromLayers: moment.Moment[] = [];
       const endDatesFromLayers: moment.Moment[] = [];
 
-      timeAwareLayers.forEach((l: OlLayer<OlImageWMS | OlTileWMS, any>) => {
+      timeAwareLayers.forEach(l => {
         const layerType = l.get('type');
         if (layerType === 'WMSTime') {
           const layerStartDate = l.get('startDate');