@opengeoweb/core 10.2.0 → 11.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -16
- package/index.esm.js +137 -61
- package/package.json +2 -2
- package/src/lib/components/Search/types.d.ts +1 -1
- package/src/lib/components/Search/utils.d.ts +2 -0
- package/src/lib/components/SyncGroups/SimpleTimeSliderConnect.d.ts +2 -2
- package/src/lib/components/SyncGroups/SyncGroupViewer.d.ts +1 -1
- package/src/lib/components/TimeSliderConnect/TimeSliderConnect.d.ts +1 -1
- package/src/lib/components/TimeSliderConnect/TimeSliderLegendConnect.d.ts +4 -0
- package/src/lib/store/index.d.ts +1 -0
- package/src/lib/store/store.d.ts +13 -0
- package/src/lib/utils/location-api/fakeApi.d.ts +31 -1
- package/src/lib/utils/location-api/hooks.d.ts +1 -6
- package/src/lib/utils/testUtils.d.ts +1 -4
package/README.md
CHANGED
|
@@ -24,28 +24,15 @@ import {
|
|
|
24
24
|
LegendMapButtonConnect,
|
|
25
25
|
CoreThemeStoreProvider,
|
|
26
26
|
} from '@opengeoweb/core';
|
|
27
|
-
import {
|
|
28
|
-
genericListener,
|
|
29
|
-
mapStoreModuleConfig,
|
|
30
|
-
mapStoreReducers,
|
|
31
|
-
mapActions,
|
|
32
|
-
syncGroupsReducer,
|
|
33
|
-
uiReducer,
|
|
34
|
-
} from '@opengeoweb/store';
|
|
27
|
+
import { storeMiddlewares, storeReducerMap } from '@opengeoweb/store';
|
|
35
28
|
import { TimeSliderConnect } from '@opengeoweb/timeslider';
|
|
36
29
|
import { configureStore } from '@reduxjs/toolkit';
|
|
37
30
|
|
|
38
31
|
const store = configureStore({
|
|
39
32
|
reducer: {
|
|
40
|
-
...
|
|
41
|
-
ui: uiReducer,
|
|
42
|
-
syncGroups: syncGroupsReducer,
|
|
43
|
-
snackbar: snackbarReducer,
|
|
33
|
+
...storeReducerMap,
|
|
44
34
|
},
|
|
45
|
-
middleware: [
|
|
46
|
-
...mapStoreModuleConfig.middlewares!,
|
|
47
|
-
genericListener.middleware,
|
|
48
|
-
],
|
|
35
|
+
middleware: [...storeMiddlewares],
|
|
49
36
|
});
|
|
50
37
|
|
|
51
38
|
const ConnectedMapWithTimeSlider = ({ mapId }) => {
|
package/index.esm.js
CHANGED
|
@@ -6,13 +6,13 @@ import { SHARED_NAMESPACE, sharedTranslations, CustomIconButton, CustomTooltip,
|
|
|
6
6
|
import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, LayersAdd, CloudLoading, ColumnCollapsed, ColumnCollapse, Copy, None, FastForward, AutoUpdateActive, Both, Visibility, VisibilityOff, Delete, DragHandle as DragHandle$1, Cached, Add, MapAdd, WorldMapProjection, Layers, Search, Exclamation, MyLocation, Close, ExitDomain, Info, ThemeWrapper, lightTheme, FlagBritain, FlagNetherlands, FlagFinland, FlagNorway } from '@opengeoweb/theme';
|
|
7
7
|
import i18n from 'i18next';
|
|
8
8
|
import { initReactI18next, useTranslation, I18nextProvider } from 'react-i18next';
|
|
9
|
-
import { TIMESLIDER_NAMESPACE, timesliderTranslations, defaultTimeSpan, TIME_SLIDER_LEGEND_HEIGHT, SpeedButton, TimeStepButton, AnimationLengthButton, AnimationLength, TimeSpanButton, secondsPerPxFromCanvasWidth, getNewCenterOfFixedPointZoom, OptionsMenuButton, PlayButton, defaultTimeStep, BackwardForwardStepButton, AutoUpdateButton, NowButton, handleSetNowEvent, TimeSliderButtons, TimeSliderCurrentTimeBox, TimeSliderLegend,
|
|
10
|
-
import { WEBMAP_REACT_NAMESPACE, webmapReactTranslations, WEBMAP_NAMESPACE, webmapTranslations, LayerInfoButton, LayerInfoDialog, MapControlButton, MapDimensionSelect, dimensionConfig, DimensionSelectDialog, DimensionSelectButton, emptyGeoJSON, registerDrawFunction,
|
|
9
|
+
import { TIMESLIDER_NAMESPACE, timesliderTranslations, defaultTimeSpan, TIME_SLIDER_LEGEND_HEIGHT, SpeedButton, TimeStepButton, AnimationLengthButton, AnimationLength, TimeSpanButton, secondsPerPxFromCanvasWidth, getNewCenterOfFixedPointZoom, OptionsMenuButton, PlayButton, defaultTimeStep, BackwardForwardStepButton, AutoUpdateButton, NowButton, handleSetNowEvent, TimeSliderButtons, TimeSliderCurrentTimeBox, TimeSliderLegend, onsetNewDateDebounced, defaultSecondsPerPx, moveSelectedTimePx, TimeSlider, getFilteredTime, ControlButtons, OptionsMenu, TimeSliderClock } from '@opengeoweb/timeslider';
|
|
10
|
+
import { WEBMAP_REACT_NAMESPACE, webmapReactTranslations, WEBMAP_NAMESPACE, webmapTranslations, LayerInfoButton, LayerInfoDialog, MapControlButton, MapDimensionSelect, dimensionConfig, DimensionSelectDialog, DimensionSelectButton, emptyGeoJSON, registerDrawFunction, ZoomControls, LegendDialog, LegendButton, MapView, MapViewLayer, MapControls, publicLayers } from '@opengeoweb/webmap-react';
|
|
11
11
|
import { useDispatch, useSelector, connect, useStore, Provider } from 'react-redux';
|
|
12
12
|
import { ReactSortable } from 'react-sortablejs';
|
|
13
13
|
import Sortable from 'sortablejs';
|
|
14
|
-
import { layerTypes, layerUtils, mapSelectors, layerActions, layerSelectors, serviceSelectors, serviceActions, mapActions, mapEnums, uiSelectors, uiTypes, useSetupDialog, filterLayers, getUserAddedServices, uiActions, genericSelectors, genericActions,
|
|
15
|
-
import _, { isArray, isEqual,
|
|
14
|
+
import { layerTypes, layerUtils, mapSelectors, layerActions, layerSelectors, serviceSelectors, serviceActions, mapActions, mapEnums, uiSelectors, uiTypes, useSetupDialog, filterLayers, getUserAddedServices, uiActions, genericSelectors, genericActions, drawingToolSelectors, syncConstants, loadingIndicatorActions, syncGroupsSelectors, defaultLayers, getSingularDrawtoolDrawLayerId, syncGroupsSelector, syncGroupsActions, routerUtils } from '@opengeoweb/store';
|
|
15
|
+
import _, { isArray, isEqual, debounce, range } from 'lodash';
|
|
16
16
|
import { webmapUtils, queryWMSServiceInfo, queryWMSLayers, queryWMSLayersTree, invalidateWMSGetCapabilities, LayerType, getWMSServiceId, generateLayerId, getWMJSMapById, getWMSGetFeatureInfoRequestURL, handleDateUtilsISOString, wmServiceListener, EVENT_GETCAPABILITIES_START, EVENT_GETCAPABILITIES_READY, WMLayer } from '@opengeoweb/webmap';
|
|
17
17
|
import { Box as Box$1, styled as styled$1 } from '@mui/system';
|
|
18
18
|
import { LayerSelectButtonConnect, LayerSelectConnect } from '@opengeoweb/layer-select';
|
|
@@ -5747,35 +5747,41 @@ var getLocationDetail = function getLocationDetail(id, source) {
|
|
|
5747
5747
|
return fetch(locationBaseUrl + "/locationdetail?id=" + id + "&source=" + source).then(handleResponse);
|
|
5748
5748
|
};
|
|
5749
5749
|
|
|
5750
|
-
/* *
|
|
5751
|
-
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
5752
|
-
* you may not use this file except in compliance with the License.
|
|
5753
|
-
* You may obtain a copy of the License at
|
|
5754
|
-
*
|
|
5755
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
|
5756
|
-
*
|
|
5757
|
-
* Unless required by applicable law or agreed to in writing, software
|
|
5758
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
5759
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
5760
|
-
* See the License for the specific language governing permissions and
|
|
5761
|
-
* limitations under the License.
|
|
5762
|
-
*
|
|
5763
|
-
* Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
|
|
5764
|
-
* Copyright 2025 - Finnish Meteorological Institute (FMI)
|
|
5765
|
-
* Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
|
|
5766
|
-
* */
|
|
5767
5750
|
var useLocationList = function useLocationList(search) {
|
|
5768
5751
|
return useQuery({
|
|
5769
5752
|
queryKey: ['location-list', search],
|
|
5770
|
-
queryFn: function
|
|
5771
|
-
|
|
5772
|
-
|
|
5773
|
-
|
|
5753
|
+
queryFn: function () {
|
|
5754
|
+
var _queryFn = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
|
|
5755
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
5756
|
+
while (1) switch (_context.prev = _context.next) {
|
|
5757
|
+
case 0:
|
|
5758
|
+
if (!(search.length > 0)) {
|
|
5759
|
+
_context.next = 2;
|
|
5760
|
+
break;
|
|
5761
|
+
}
|
|
5762
|
+
return _context.abrupt("return", getLocationList(search));
|
|
5763
|
+
case 2:
|
|
5764
|
+
return _context.abrupt("return", []);
|
|
5765
|
+
case 3:
|
|
5766
|
+
case "end":
|
|
5767
|
+
return _context.stop();
|
|
5768
|
+
}
|
|
5769
|
+
}, _callee);
|
|
5770
|
+
}));
|
|
5771
|
+
function queryFn() {
|
|
5772
|
+
return _queryFn.apply(this, arguments);
|
|
5773
|
+
}
|
|
5774
|
+
return queryFn;
|
|
5775
|
+
}()
|
|
5774
5776
|
});
|
|
5775
5777
|
};
|
|
5776
|
-
var useLocationDetail = function useLocationDetail(
|
|
5777
|
-
|
|
5778
|
-
|
|
5778
|
+
var useLocationDetail = function useLocationDetail(id, source) {
|
|
5779
|
+
if (id === void 0) {
|
|
5780
|
+
id = '';
|
|
5781
|
+
}
|
|
5782
|
+
if (source === void 0) {
|
|
5783
|
+
source = '';
|
|
5784
|
+
}
|
|
5779
5785
|
return useQuery({
|
|
5780
5786
|
queryKey: ['location-detail', {
|
|
5781
5787
|
id: id,
|
|
@@ -5810,14 +5816,15 @@ var SearchDialog = function SearchDialog(_ref) {
|
|
|
5810
5816
|
var debouncedInputValue = useDebounce(inputValue, 300);
|
|
5811
5817
|
var _useLocationList = useLocationList(debouncedInputValue),
|
|
5812
5818
|
locationListData = _useLocationList.data;
|
|
5813
|
-
var _useLocationDetail = useLocationDetail(
|
|
5814
|
-
|
|
5815
|
-
|
|
5816
|
-
}),
|
|
5817
|
-
locationDetail = _useLocationDetail.data;
|
|
5819
|
+
var _useLocationDetail = useLocationDetail(selectedValue == null ? void 0 : selectedValue.id, selectedValue == null ? void 0 : selectedValue.source),
|
|
5820
|
+
locationDetail = _useLocationDetail.data,
|
|
5821
|
+
isFetchingDetail = _useLocationDetail.isFetching;
|
|
5818
5822
|
useEffect(function () {
|
|
5819
|
-
|
|
5820
|
-
|
|
5823
|
+
if (isFetchingDetail || !isOpen) {
|
|
5824
|
+
return;
|
|
5825
|
+
}
|
|
5826
|
+
onSelectLocation(selectedValue ? locationDetail : undefined);
|
|
5827
|
+
}, [locationDetail, onSelectLocation, selectedValue, isFetchingDetail, isOpen]);
|
|
5821
5828
|
return isOpen && mapId ? jsxs(Box, {
|
|
5822
5829
|
sx: {
|
|
5823
5830
|
display: 'flex',
|
|
@@ -5866,6 +5873,9 @@ var SearchDialog = function SearchDialog(_ref) {
|
|
|
5866
5873
|
getOptionLabel: function getOptionLabel(option) {
|
|
5867
5874
|
return option.name;
|
|
5868
5875
|
},
|
|
5876
|
+
getOptionKey: function getOptionKey(option) {
|
|
5877
|
+
return option.id + option.name;
|
|
5878
|
+
},
|
|
5869
5879
|
filterOptions: function filterOptions(x) {
|
|
5870
5880
|
return x;
|
|
5871
5881
|
},
|
|
@@ -5937,6 +5947,7 @@ var myLocationDrawFunction = function myLocationDrawFunction(args) {
|
|
|
5937
5947
|
var ctx = args.context,
|
|
5938
5948
|
coord = args.coord;
|
|
5939
5949
|
// Draw outer circle
|
|
5950
|
+
ctx.strokeStyle = '#fff';
|
|
5940
5951
|
ctx.fillStyle = '#fff';
|
|
5941
5952
|
ctx.shadowColor = '#00000080';
|
|
5942
5953
|
ctx.shadowBlur = 4;
|
|
@@ -5953,6 +5964,7 @@ var myLocationDrawFunction = function myLocationDrawFunction(args) {
|
|
|
5953
5964
|
var selectedLocationDrawFunction = function selectedLocationDrawFunction(args) {
|
|
5954
5965
|
var ctx = args.context,
|
|
5955
5966
|
coord = args.coord;
|
|
5967
|
+
ctx.strokeStyle = '#051039';
|
|
5956
5968
|
ctx.fillStyle = '#051039';
|
|
5957
5969
|
ctx.beginPath();
|
|
5958
5970
|
var topRadius = 7;
|
|
@@ -5968,9 +5980,26 @@ var selectedLocationDrawFunction = function selectedLocationDrawFunction(args) {
|
|
|
5968
5980
|
ctx.arc(coord.x, coord.y - topHeight, topRadius / 2.5, Math.PI * 2, 0);
|
|
5969
5981
|
ctx.fill();
|
|
5970
5982
|
};
|
|
5983
|
+
var geometryStyling = {
|
|
5984
|
+
fill: '#FF7800',
|
|
5985
|
+
'fill-opacity': 0.25,
|
|
5986
|
+
stroke: '#FF7800',
|
|
5987
|
+
'stroke-opacity': 1,
|
|
5988
|
+
'stroke-width': 4
|
|
5989
|
+
};
|
|
5971
5990
|
var makeGeoJSONFeatureFromLocation = function makeGeoJSONFeatureFromLocation(location, drawFunctionId, hoverDrawFunctionId) {
|
|
5972
|
-
var
|
|
5973
|
-
|
|
5991
|
+
var _location$geometry;
|
|
5992
|
+
var collection = {
|
|
5993
|
+
type: 'FeatureCollection',
|
|
5994
|
+
features: []
|
|
5995
|
+
};
|
|
5996
|
+
var geometry = Object.assign({}, location.geometry, {
|
|
5997
|
+
properties: Object.assign({}, geometryStyling, {
|
|
5998
|
+
name: location.name,
|
|
5999
|
+
hoverDrawFunctionId: hoverDrawFunctionId
|
|
6000
|
+
})
|
|
6001
|
+
});
|
|
6002
|
+
var marker = {
|
|
5974
6003
|
type: 'Feature',
|
|
5975
6004
|
properties: {
|
|
5976
6005
|
name: location.name,
|
|
@@ -5981,8 +6010,17 @@ var makeGeoJSONFeatureFromLocation = function makeGeoJSONFeatureFromLocation(loc
|
|
|
5981
6010
|
type: 'Point',
|
|
5982
6011
|
coordinates: [location.lon, location.lat]
|
|
5983
6012
|
}
|
|
5984
|
-
}
|
|
5985
|
-
|
|
6013
|
+
};
|
|
6014
|
+
switch ((_location$geometry = location.geometry) == null ? void 0 : _location$geometry.geometry.type) {
|
|
6015
|
+
case 'Point':
|
|
6016
|
+
case 'MultiLineString':
|
|
6017
|
+
case undefined:
|
|
6018
|
+
collection.features.push(marker);
|
|
6019
|
+
break;
|
|
6020
|
+
default:
|
|
6021
|
+
collection.features.push(geometry);
|
|
6022
|
+
}
|
|
6023
|
+
return collection;
|
|
5986
6024
|
};
|
|
5987
6025
|
var fitText = function fitText(ctx, text, x, y, lineheight) {
|
|
5988
6026
|
var lines = text.split('\n');
|
|
@@ -6019,6 +6057,7 @@ var hoverDrawFunction = function hoverDrawFunction(args) {
|
|
|
6019
6057
|
ctx.font = fontSize + "px Roboto";
|
|
6020
6058
|
var x = coord.x,
|
|
6021
6059
|
y = coord.y;
|
|
6060
|
+
ctx.strokeStyle = '#000';
|
|
6022
6061
|
ctx.fillStyle = '#000';
|
|
6023
6062
|
roundRect(ctx, ctx.measureText(feature.properties.name).width + padding, fontSize + padding, x - padding * 0.5 - ctx.measureText(feature.properties.name).width * 0.5, y + padding);
|
|
6024
6063
|
// eslint-disable-next-line no-param-reassign
|
|
@@ -6731,26 +6770,26 @@ var MapViewConnect = function MapViewConnect(_ref) {
|
|
|
6731
6770
|
var geojson = _ref2.geojson,
|
|
6732
6771
|
reason = _ref2.reason,
|
|
6733
6772
|
layerId = _ref2.layerId;
|
|
6734
|
-
var activeDrawToolId =
|
|
6735
|
-
var activeDrawMode =
|
|
6773
|
+
var activeDrawToolId = drawingToolSelectors.getActiveDrawToolId(store.getState());
|
|
6774
|
+
var activeDrawMode = drawingToolSelectors.getActiveDrawMode(store.getState(), activeDrawToolId);
|
|
6736
6775
|
dispatch(layerActions.updateFeature({
|
|
6737
6776
|
geojson: geojson,
|
|
6738
6777
|
reason: reason,
|
|
6739
6778
|
layerId: layerId,
|
|
6740
|
-
shouldAllowMultipleShapes:
|
|
6741
|
-
geoJSONIntersectionLayerId:
|
|
6742
|
-
geoJSONIntersectionBoundsLayerId:
|
|
6779
|
+
shouldAllowMultipleShapes: drawingToolSelectors.getShouldAllowMultipleShapes(store.getState(), activeDrawToolId),
|
|
6780
|
+
geoJSONIntersectionLayerId: drawingToolSelectors.getGeoJSONIntersectionLayerId(store.getState(), activeDrawToolId),
|
|
6781
|
+
geoJSONIntersectionBoundsLayerId: drawingToolSelectors.getGeoJSONIntersectionBoundsLayerId(store.getState(), activeDrawToolId),
|
|
6743
6782
|
selectionType: activeDrawMode == null ? void 0 : activeDrawMode.selectionType
|
|
6744
6783
|
}));
|
|
6745
6784
|
}, [dispatch, store]);
|
|
6746
6785
|
var exitFeatureDrawMode = React.useCallback(function (_ref3) {
|
|
6747
6786
|
var reason = _ref3.reason,
|
|
6748
6787
|
layerId = _ref3.layerId;
|
|
6749
|
-
var activeDrawToolId =
|
|
6788
|
+
var activeDrawToolId = drawingToolSelectors.getActiveDrawToolId(store.getState());
|
|
6750
6789
|
dispatch(layerActions.exitFeatureDrawMode({
|
|
6751
6790
|
reason: reason,
|
|
6752
6791
|
layerId: layerId,
|
|
6753
|
-
shouldAllowMultipleShapes:
|
|
6792
|
+
shouldAllowMultipleShapes: drawingToolSelectors.getShouldAllowMultipleShapes(store.getState(), activeDrawToolId)
|
|
6754
6793
|
}));
|
|
6755
6794
|
}, [dispatch, store]);
|
|
6756
6795
|
var isActiveWindowId = useSelector(function (store) {
|
|
@@ -6885,7 +6924,7 @@ var MapViewConnect = function MapViewConnect(_ref) {
|
|
|
6885
6924
|
onLayerError: function onLayerError(_, error) {
|
|
6886
6925
|
layerError({
|
|
6887
6926
|
layerId: layer.id,
|
|
6888
|
-
error:
|
|
6927
|
+
error: (error == null ? void 0 : error.message) || 'unknown error'
|
|
6889
6928
|
});
|
|
6890
6929
|
}
|
|
6891
6930
|
}, layer), layer.id);
|
|
@@ -6895,7 +6934,7 @@ var MapViewConnect = function MapViewConnect(_ref) {
|
|
|
6895
6934
|
onLayerError: function onLayerError(_, error) {
|
|
6896
6935
|
layerError({
|
|
6897
6936
|
layerId: layer.id,
|
|
6898
|
-
error:
|
|
6937
|
+
error: (error == null ? void 0 : error.message) || 'unknown error'
|
|
6899
6938
|
});
|
|
6900
6939
|
}
|
|
6901
6940
|
}, layer), layer.id);
|
|
@@ -6939,7 +6978,7 @@ var MapViewConnect = function MapViewConnect(_ref) {
|
|
|
6939
6978
|
onLayerError: function onLayerError(_, error) {
|
|
6940
6979
|
layerError({
|
|
6941
6980
|
layerId: layer.id,
|
|
6942
|
-
error:
|
|
6981
|
+
error: (error == null ? void 0 : error.message) || 'unknown error'
|
|
6943
6982
|
});
|
|
6944
6983
|
},
|
|
6945
6984
|
onClickFeature: function onClickFeature(event) {
|
|
@@ -6978,7 +7017,7 @@ var MapViewConnect = function MapViewConnect(_ref) {
|
|
|
6978
7017
|
onLayerError: function onLayerError(_, error) {
|
|
6979
7018
|
layerError({
|
|
6980
7019
|
layerId: layer.id,
|
|
6981
|
-
error:
|
|
7020
|
+
error: (error == null ? void 0 : error.message) || 'unknown error'
|
|
6982
7021
|
});
|
|
6983
7022
|
}
|
|
6984
7023
|
}, layer), layer.id);
|
|
@@ -7513,7 +7552,8 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
|
|
|
7513
7552
|
onSetTimeSliderSpan = _ref.onSetTimeSliderSpan,
|
|
7514
7553
|
unfilteredSelectedTime = _ref.unfilteredSelectedTime,
|
|
7515
7554
|
setUnfilteredSelectedTime = _ref.setUnfilteredSelectedTime,
|
|
7516
|
-
mapWindowRef = _ref.mapWindowRef
|
|
7555
|
+
mapWindowRef = _ref.mapWindowRef,
|
|
7556
|
+
adjustSelectedTimeOnWheel = _ref.adjustSelectedTimeOnWheel;
|
|
7517
7557
|
var isTimeScrollingEnabled = useSelector(syncGroupsSelectors.isTimeScrollingEnabled);
|
|
7518
7558
|
var centerTime = useSelector(function (store) {
|
|
7519
7559
|
return mapSelectors.getMapTimeSliderCenterTime(store, mapId);
|
|
@@ -7645,7 +7685,8 @@ var TimeSliderLegendConnect = function TimeSliderLegendConnect(_ref) {
|
|
|
7645
7685
|
}));
|
|
7646
7686
|
}
|
|
7647
7687
|
}
|
|
7648
|
-
}
|
|
7688
|
+
},
|
|
7689
|
+
adjustSelectedTimeOnWheel: adjustSelectedTimeOnWheel
|
|
7649
7690
|
});
|
|
7650
7691
|
};
|
|
7651
7692
|
|
|
@@ -7720,7 +7761,7 @@ var useUpdateTimeSpan = function useUpdateTimeSpan(mapId, myOnSetTimeSliderSpan)
|
|
|
7720
7761
|
updateTimeSliderSpan(_spanInSeconds, _newCenterTime, _newSecondsPerPx);
|
|
7721
7762
|
}
|
|
7722
7763
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
7723
|
-
}, [autoTimeStepLayerId, isTimeSpanAuto,
|
|
7764
|
+
}, [autoTimeStepLayerId, isTimeSpanAuto, mapId]);
|
|
7724
7765
|
};
|
|
7725
7766
|
var timeToIso = function timeToIso(selectedTime) {
|
|
7726
7767
|
return handleDateUtilsISOString(dateUtils.fromUnix(selectedTime).toISOString());
|
|
@@ -7801,9 +7842,6 @@ var TimeSliderConnect = function TimeSliderConnect(_ref) {
|
|
|
7801
7842
|
});
|
|
7802
7843
|
useUpdateTimestep(mapId);
|
|
7803
7844
|
useUpdateTimeSpan(mapId, onSetTimeSliderSpan);
|
|
7804
|
-
var makeFilteredSelectedTime = function makeFilteredSelectedTime(timeValue) {
|
|
7805
|
-
return getFilteredTime(timeValue, timeStep, dataStartTime, dataEndTime);
|
|
7806
|
-
};
|
|
7807
7845
|
// Local state for unfiltered selected time
|
|
7808
7846
|
var _React$useState = React.useState(selectedTime),
|
|
7809
7847
|
unfilteredSelectedTime = _React$useState[0],
|
|
@@ -7811,7 +7849,7 @@ var TimeSliderConnect = function TimeSliderConnect(_ref) {
|
|
|
7811
7849
|
// Reference to the last time value set by this timeslider
|
|
7812
7850
|
var lastTimeValueAsSetByThisTimeSlider = React.useRef();
|
|
7813
7851
|
// Set new time in the redux state
|
|
7814
|
-
var _onSetNewDate = function
|
|
7852
|
+
var _onSetNewDate = React.useCallback(function (newDate) {
|
|
7815
7853
|
// Remember that this timeslider has set this time
|
|
7816
7854
|
lastTimeValueAsSetByThisTimeSlider.current = newDate;
|
|
7817
7855
|
if (isAnimating) {
|
|
@@ -7824,7 +7862,7 @@ var TimeSliderConnect = function TimeSliderConnect(_ref) {
|
|
|
7824
7862
|
origin: 'TimeSliderConnect',
|
|
7825
7863
|
value: handleDateUtilsISOString(newDate)
|
|
7826
7864
|
}));
|
|
7827
|
-
};
|
|
7865
|
+
}, [dispatch, isAnimating, mapId, sourceId]);
|
|
7828
7866
|
// Update local state when time is updated outside of this component, e.g. during animation or syncgroups
|
|
7829
7867
|
React.useEffect(function () {
|
|
7830
7868
|
var selectedTimeAsIsoString = timeToIso(selectedTime);
|
|
@@ -7833,13 +7871,16 @@ var TimeSliderConnect = function TimeSliderConnect(_ref) {
|
|
|
7833
7871
|
}
|
|
7834
7872
|
}, [selectedTime]);
|
|
7835
7873
|
// Function used by timeslider components to update the unfiltered selected time
|
|
7836
|
-
var setUnfilteredSelectedTime = function
|
|
7874
|
+
var setUnfilteredSelectedTime = React.useCallback(function (unfilteredSelectedTimeFromComponents) {
|
|
7875
|
+
var makeFilteredSelectedTime = function makeFilteredSelectedTime(timeValue) {
|
|
7876
|
+
return getFilteredTime(timeValue, timeStep, dataStartTime, dataEndTime);
|
|
7877
|
+
};
|
|
7837
7878
|
setUnfilteredSelectedTimeViaState(unfilteredSelectedTimeFromComponents);
|
|
7838
7879
|
var filteredIsoTime = makeFilteredSelectedTime(unfilteredSelectedTimeFromComponents);
|
|
7839
7880
|
if (selectedTime !== filteredIsoTime) {
|
|
7840
7881
|
onsetNewDateDebounced(timeToIso(filteredIsoTime), _onSetNewDate);
|
|
7841
7882
|
}
|
|
7842
|
-
};
|
|
7883
|
+
}, [dataEndTime, dataStartTime, _onSetNewDate, selectedTime, timeStep]);
|
|
7843
7884
|
// Move animation bar when user changes time using time picker
|
|
7844
7885
|
// Animation bar however cannot be moved into a time where there is no data
|
|
7845
7886
|
var moveAnimationUsingCalendar = function moveAnimationUsingCalendar(newTime) {
|
|
@@ -7865,6 +7906,40 @@ var TimeSliderConnect = function TimeSliderConnect(_ref) {
|
|
|
7865
7906
|
setUnfilteredSelectedTime(newSelectedTime);
|
|
7866
7907
|
moveAnimationUsingCalendar(newSelectedTime);
|
|
7867
7908
|
};
|
|
7909
|
+
var secondsPerPx = useSelector(function (store) {
|
|
7910
|
+
return mapSelectors.getMapTimeSliderSecondsPerPx(store, mapId);
|
|
7911
|
+
}) || defaultSecondsPerPx;
|
|
7912
|
+
var timeSliderWidth = useSelector(function (store) {
|
|
7913
|
+
return mapSelectors.getMapTimeSliderWidth(store, mapId);
|
|
7914
|
+
}) || 0;
|
|
7915
|
+
var centerTime = useSelector(function (store) {
|
|
7916
|
+
return mapSelectors.getMapTimeSliderCenterTime(store, mapId);
|
|
7917
|
+
});
|
|
7918
|
+
var isTimeScrollingEnabled = useSelector(syncGroupsSelectors.isTimeScrollingEnabled);
|
|
7919
|
+
var adjustSelectedTimeOnWheel = React.useCallback(function (_ref2) {
|
|
7920
|
+
var event = _ref2.event,
|
|
7921
|
+
deltaY = _ref2.deltaY;
|
|
7922
|
+
if (!(event.ctrlKey || event.metaKey || event.shiftKey || event.altKey)) {
|
|
7923
|
+
var pixelsPerScroll = -deltaY * timeStep / (2 * secondsPerPx);
|
|
7924
|
+
moveSelectedTimePx(pixelsPerScroll, timeSliderWidth, centerTime, dataStartTime, dataEndTime, secondsPerPx, timeStep, unfilteredSelectedTime, setUnfilteredSelectedTime);
|
|
7925
|
+
}
|
|
7926
|
+
}, [timeSliderWidth, centerTime, dataEndTime, dataStartTime, secondsPerPx, setUnfilteredSelectedTime, timeStep, unfilteredSelectedTime]);
|
|
7927
|
+
React.useEffect(function () {
|
|
7928
|
+
if (isTimeScrollingEnabled && mapWindowRef != null && mapWindowRef.current) {
|
|
7929
|
+
var handleWheel = function handleWheel(event) {
|
|
7930
|
+
adjustSelectedTimeOnWheel({
|
|
7931
|
+
event: event,
|
|
7932
|
+
deltaY: event.deltaY
|
|
7933
|
+
});
|
|
7934
|
+
};
|
|
7935
|
+
var element = mapWindowRef.current;
|
|
7936
|
+
element.addEventListener('wheel', handleWheel);
|
|
7937
|
+
return function () {
|
|
7938
|
+
element.removeEventListener('wheel', handleWheel);
|
|
7939
|
+
};
|
|
7940
|
+
}
|
|
7941
|
+
return undefined;
|
|
7942
|
+
}, [isTimeScrollingEnabled, mapWindowRef, adjustSelectedTimeOnWheel]);
|
|
7868
7943
|
return jsx(TimeSlider, {
|
|
7869
7944
|
timeStep: timeStep,
|
|
7870
7945
|
dataStartTime: dataStartTime,
|
|
@@ -7894,7 +7969,8 @@ var TimeSliderConnect = function TimeSliderConnect(_ref) {
|
|
|
7894
7969
|
onSetTimeSliderSpan: onSetTimeSliderSpan,
|
|
7895
7970
|
unfilteredSelectedTime: unfilteredSelectedTime,
|
|
7896
7971
|
setUnfilteredSelectedTime: setUnfilteredSelectedTime,
|
|
7897
|
-
mapWindowRef: mapWindowRef
|
|
7972
|
+
mapWindowRef: mapWindowRef,
|
|
7973
|
+
adjustSelectedTimeOnWheel: adjustSelectedTimeOnWheel
|
|
7898
7974
|
}),
|
|
7899
7975
|
mapIsActive: mapIsActive,
|
|
7900
7976
|
onToggleTimeSlider: onToggleTimeSliderVisibility,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@opengeoweb/core",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "11.0.0",
|
|
4
4
|
"description": "GeoWeb Core library for the opengeoweb project",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -30,8 +30,8 @@
|
|
|
30
30
|
"dompurify": "^3.0.6",
|
|
31
31
|
"@mui/material": "^6.1.1",
|
|
32
32
|
"@sentry/react": "^8.34.0",
|
|
33
|
-
"@tanstack/react-query": "^5.62.7",
|
|
34
33
|
"@opengeoweb/authentication": "*",
|
|
34
|
+
"@tanstack/react-query": "^5.62.7",
|
|
35
35
|
"@opengeoweb/api": "*",
|
|
36
36
|
"msw": "^1.3.3"
|
|
37
37
|
},
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { MapDrawDrawFunctionArgs } from '@opengeoweb/webmap-react';
|
|
2
|
+
import { GeoJsonProperties } from 'geojson';
|
|
2
3
|
import { LocationDetail } from './types';
|
|
3
4
|
export declare const myLocationDrawFunction: (args: MapDrawDrawFunctionArgs) => void;
|
|
4
5
|
export declare const selectedLocationDrawFunction: (args: MapDrawDrawFunctionArgs) => void;
|
|
6
|
+
export declare const geometryStyling: GeoJsonProperties;
|
|
5
7
|
export declare const hoverDrawFunction: (args: MapDrawDrawFunctionArgs) => void;
|
|
6
8
|
export declare const useDrawOnMap: (mapId: string, drawFunction: (args: MapDrawDrawFunctionArgs) => void) => [(location?: LocationDetail) => void];
|
|
@@ -11,8 +11,8 @@ export declare const SimpleTimeSliderConnect: import("react-redux").ConnectedCom
|
|
|
11
11
|
id: string;
|
|
12
12
|
timeValue?: string | null | undefined;
|
|
13
13
|
setTime?: import("@reduxjs/toolkit").ActionCreatorWithPayload<import("dist/libs/store/src/store/generic/types").SetTimePayload, string> | undefined;
|
|
14
|
-
syncGroupAddSource?: import("@reduxjs/toolkit").ActionCreatorWithPayload<import("dist/libs/store/src/store/generic/
|
|
15
|
-
syncGroupRemoveSource?: import("@reduxjs/toolkit").ActionCreatorWithPayload<import("dist/libs/store/src/store/generic/
|
|
14
|
+
syncGroupAddSource?: import("@reduxjs/toolkit").ActionCreatorWithPayload<import("dist/libs/store/src/store/generic/syncGroups/types").SyncGroupsAddSourcePayload, "synchronizationGroupsReducer/syncGroupAddSource"> | undefined;
|
|
15
|
+
syncGroupRemoveSource?: import("@reduxjs/toolkit").ActionCreatorWithPayload<import("dist/libs/store/src/store/generic/syncGroups/types").SyncGroupRemoveSourcePayload, "synchronizationGroupsReducer/syncGroupRemoveSource"> | undefined;
|
|
16
16
|
context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").AnyAction>> | undefined;
|
|
17
17
|
store?: import("redux").Store<any, import("redux").AnyAction> | undefined;
|
|
18
18
|
}>;
|
|
@@ -5,7 +5,7 @@ interface TimeSliderConnectProps {
|
|
|
5
5
|
sourceId: string;
|
|
6
6
|
mapId: string;
|
|
7
7
|
isAlwaysVisible?: boolean;
|
|
8
|
-
mapWindowRef?: React.MutableRefObject<null>;
|
|
8
|
+
mapWindowRef?: React.MutableRefObject<HTMLElement | null>;
|
|
9
9
|
}
|
|
10
10
|
export declare const TimeSliderConnect: React.FC<TimeSliderConnectProps>;
|
|
11
11
|
export {};
|
|
@@ -5,6 +5,10 @@ interface TimeSliderLegendConnectProps {
|
|
|
5
5
|
unfilteredSelectedTime: number;
|
|
6
6
|
setUnfilteredSelectedTime: (unfilteredSelectedTime: number) => void;
|
|
7
7
|
mapWindowRef?: React.MutableRefObject<HTMLElement | null>;
|
|
8
|
+
adjustSelectedTimeOnWheel?: ({ event, deltaY, }: {
|
|
9
|
+
event: WheelEvent | KeyboardEvent;
|
|
10
|
+
deltaY: number;
|
|
11
|
+
}) => void;
|
|
8
12
|
}
|
|
9
13
|
export declare const TimeSliderLegendConnect: React.FC<TimeSliderLegendConnectProps>;
|
|
10
14
|
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './store';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { SnackbarModuleStore } from '@opengeoweb/snackbar';
|
|
2
|
+
import { WebMapStateModuleState, SynchronizationGroupModuleState, UIModuleState } from '@opengeoweb/store';
|
|
3
|
+
import { ToolkitStore } from '@reduxjs/toolkit/dist/configureStore';
|
|
4
|
+
export declare const coreReducerMap: {
|
|
5
|
+
webmap: import("redux").Reducer<import("dist/libs/store/src/store/map/types").WebMapState, import("redux").AnyAction>;
|
|
6
|
+
services: import("redux").Reducer<import("dist/libs/store/src/store/map/types").ServiceState, import("redux").AnyAction>;
|
|
7
|
+
layers: import("redux").Reducer<import("dist/libs/store/src/store/map/types").LayerState, import("redux").AnyAction>;
|
|
8
|
+
syncGroups: import("redux").Reducer<import("dist/libs/store/src/store/generic/syncGroups/types").SynchronizationGroupState, import("redux").AnyAction>;
|
|
9
|
+
ui: import("redux").Reducer<import("dist/libs/store/src/store/ui/types").UIStoreType, import("redux").AnyAction>;
|
|
10
|
+
snackbar: import("redux").Reducer<import("dist/libs/snackbar/src/lib/store/types").SnackbarState, import("redux").AnyAction>;
|
|
11
|
+
};
|
|
12
|
+
export declare const coreMiddlewares: import("@reduxjs/toolkit").ListenerMiddleware<import("@opengeoweb/store").CoreAppStore, import("@reduxjs/toolkit").ThunkDispatch<import("@opengeoweb/store").CoreAppStore, unknown, import("redux").AnyAction>, unknown>[];
|
|
13
|
+
export declare const createMockStore: (mockState?: WebMapStateModuleState | SynchronizationGroupModuleState | UIModuleState | SnackbarModuleStore) => ToolkitStore;
|
|
@@ -22,19 +22,49 @@ export declare const fakeLocationDetailList: ({
|
|
|
22
22
|
type: string;
|
|
23
23
|
coordinates: number[];
|
|
24
24
|
};
|
|
25
|
+
properties?: undefined;
|
|
25
26
|
};
|
|
26
27
|
} | {
|
|
28
|
+
id: string;
|
|
29
|
+
name: string;
|
|
30
|
+
source: string;
|
|
27
31
|
lat: number;
|
|
28
32
|
lon: number;
|
|
29
|
-
|
|
33
|
+
geometry: {
|
|
34
|
+
type: string;
|
|
35
|
+
properties: {};
|
|
36
|
+
geometry: {
|
|
37
|
+
type: string;
|
|
38
|
+
coordinates: number[][];
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
} | {
|
|
30
42
|
id: string;
|
|
31
43
|
name: string;
|
|
44
|
+
source: string;
|
|
45
|
+
lat: number;
|
|
46
|
+
lon: number;
|
|
32
47
|
geometry: {
|
|
33
48
|
type: string;
|
|
34
49
|
geometry: {
|
|
35
50
|
type: string;
|
|
36
51
|
coordinates: number[][][];
|
|
37
52
|
};
|
|
53
|
+
properties: {};
|
|
54
|
+
};
|
|
55
|
+
} | {
|
|
56
|
+
id: string;
|
|
57
|
+
name: string;
|
|
58
|
+
source: string;
|
|
59
|
+
lat: number;
|
|
60
|
+
lon: number;
|
|
61
|
+
geometry: {
|
|
62
|
+
type: string;
|
|
63
|
+
geometry: {
|
|
64
|
+
type: string;
|
|
65
|
+
coordinates: number[][][][];
|
|
66
|
+
};
|
|
67
|
+
properties: {};
|
|
38
68
|
};
|
|
39
69
|
})[];
|
|
40
70
|
export declare const locationApiEndpoints: import("msw").RestHandler<import("msw").MockedRequest<import("msw").DefaultBodyType>>[];
|
|
@@ -1,9 +1,4 @@
|
|
|
1
1
|
import { UseQueryResult } from '@tanstack/react-query';
|
|
2
2
|
import { LocationDetail, LocationListResult } from '../../components/Search/types';
|
|
3
3
|
export declare const useLocationList: (search: string) => UseQueryResult<LocationListResult[]>;
|
|
4
|
-
|
|
5
|
-
id: string;
|
|
6
|
-
source: string;
|
|
7
|
-
}
|
|
8
|
-
export declare const useLocationDetail: ({ id, source, }: DetailProps) => UseQueryResult<LocationDetail>;
|
|
9
|
-
export {};
|
|
4
|
+
export declare const useLocationDetail: (id?: string, source?: string) => UseQueryResult<LocationDetail>;
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { WebMapStateModuleState, syncGroupsTypes, uiTypes } from '@opengeoweb/store';
|
|
3
|
-
import { Store } from '@reduxjs/toolkit';
|
|
1
|
+
import { WebMapStateModuleState } from '@opengeoweb/store';
|
|
4
2
|
export declare const mockStateMapWithDimensions: (layer: import("dist/libs/store/src/store/map/types").Layer, mapId: string) => WebMapStateModuleState;
|
|
5
3
|
export declare const mockStateMapWithDimensionsWithoutLayers: (mapId: string) => WebMapStateModuleState;
|
|
6
|
-
export declare const createMockStore: (mockState?: WebMapStateModuleState & snackbarTypes.SnackbarModuleStore & syncGroupsTypes.SynchronizationGroupModuleState & uiTypes.UIModuleState) => Store;
|