Skip to content

Commit c9d1ce4

Browse files
tonaiocruze
tonai
authored and
ocruze
committed
refactor: service map
1 parent 19d957a commit c9d1ce4

File tree

3 files changed

+75
-102
lines changed

3 files changed

+75
-102
lines changed

‎assets/components/Utils/RMap.tsx‎

Lines changed: 56 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import GetFeatureInfo from "geopf-extensions-openlayers/src/packages/Controls/GetFeatureInfo/GetFeatureInfo";
1+
// import GetFeatureInfo from "geopf-extensions-openlayers/src/packages/Controls/GetFeatureInfo/GetFeatureInfo";
22
import LayerSwitcher from "geopf-extensions-openlayers/src/packages/Controls/LayerSwitcher/LayerSwitcher";
33
import SearchEngine from "geopf-extensions-openlayers/src/packages/Controls/SearchEngine/SearchEngine";
44
import GeoportalZoom from "geopf-extensions-openlayers/src/packages/Controls/Zoom/GeoportalZoom";
@@ -41,19 +41,52 @@ export interface MapInitial {
4141

4242
type RMapProps = {
4343
initial: MapInitial;
44-
currentStyle?: CartesStyle;
4544
};
4645

47-
const RMap: FC<RMapProps> = ({ initial, currentStyle }) => {
46+
const RMap: FC<RMapProps> = ({ initial }) => {
47+
// const gfinfo = useMemo(() => {
48+
// return [OfferingDetailResponseDtoTypeEnum.WFS, OfferingDetailResponseDtoTypeEnum.WMSVECTOR, OfferingDetailResponseDtoTypeEnum.WMTSTMS].includes(
49+
// initial.type
50+
// );
51+
// }, [initial.type]);
52+
4853
const mapTargetRef = useRef<HTMLDivElement>(null);
4954
const mapRef = useRef<Map>();
55+
const layerSwitcherControl = useRef(
56+
new LayerSwitcher({
57+
options: {
58+
position: "top-right",
59+
collapsed: true,
60+
panel: true,
61+
counter: true,
62+
},
63+
})
64+
);
65+
const controls = useRef([
66+
new GeoportalZoom({ position: "top-left" }),
67+
new Attribution({ collapsible: true, collapsed: true }),
68+
layerSwitcherControl.current,
69+
new ScaleLine(),
70+
new SearchEngine({
71+
collapsed: false,
72+
displayAdvancedSearch: false,
73+
apiKey: "essentiels",
74+
zoomTo: "auto",
75+
}),
76+
// gfinfo
77+
// ? new GetFeatureInfo({
78+
// options: {
79+
// active: true,
80+
// hidden: true,
81+
// },
82+
// position: "top-right",
83+
// })
84+
// : undefined,
85+
]);
86+
const bkLayer = useRef(new TileLayer({ properties: { title: null, description: null } }));
5087

5188
const { data: capabilities } = useCapabilities();
5289

53-
const bkLayer = useMemo(() => {
54-
return new TileLayer({ properties: { title: null, description: null } });
55-
}, []);
56-
5790
// Extent dans la configuration
5891
const extent = useMemo(() => {
5992
let extent;
@@ -66,28 +99,12 @@ const RMap: FC<RMapProps> = ({ initial, currentStyle }) => {
6699
return extent;
67100
}, [initial.bbox]);
68101

69-
const gfinfo = useMemo(() => {
70-
return [OfferingDetailResponseDtoTypeEnum.WFS, OfferingDetailResponseDtoTypeEnum.WMSVECTOR, OfferingDetailResponseDtoTypeEnum.WMTSTMS].includes(
71-
initial.type
72-
);
73-
}, [initial.type]);
74-
75-
const getControl = (className: string): typeof LayerSwitcher | typeof GetFeatureInfo => {
76-
const controls = mapRef.current
77-
?.getControls()
78-
.getArray()
79-
.filter((c) => {
80-
return c.constructor.name === className;
81-
});
82-
return controls ? controls[0] : controls;
83-
};
84-
85102
const getWorkingLayers = useCallback((): BaseLayer[] => {
86103
const workingLayers = mapRef.current
87104
?.getLayers()
88105
.getArray()
89106
.filter((l) => l.get("name") !== olDefaults.default_background_layer);
90-
return workingLayers ? workingLayers : [];
107+
return workingLayers ?? [];
91108
}, []);
92109

93110
/**
@@ -100,7 +117,7 @@ const RMap: FC<RMapProps> = ({ initial, currentStyle }) => {
100117
}
101118
// Ajout du layer dans la carte et dans le LayerSwitcher
102119
mapRef.current?.addLayer(layer);
103-
getControl("LayerSwitcher")?.addLayer(layer, {
120+
layerSwitcherControl.current.addLayer(layer, {
104121
title: layer.get("title"),
105122
description: layer.get("abstract"),
106123
});
@@ -111,46 +128,14 @@ const RMap: FC<RMapProps> = ({ initial, currentStyle }) => {
111128
useEffect(() => {
112129
// Creation de la carte
113130
if (!mapRef.current) {
114-
const controls = [
115-
new GeoportalZoom({ position: "top-left" }),
116-
new Attribution({ collapsible: true, collapsed: true }),
117-
new LayerSwitcher({
118-
options: {
119-
position: "top-right",
120-
collapsed: true,
121-
panel: true,
122-
counter: true,
123-
},
124-
}),
125-
new ScaleLine(),
126-
new SearchEngine({
127-
collapsed: false,
128-
displayAdvancedSearch: false,
129-
apiKey: "essentiels",
130-
zoomTo: "auto",
131-
}),
132-
];
133-
134-
if (gfinfo) {
135-
controls.push(
136-
new GetFeatureInfo({
137-
options: {
138-
active: true,
139-
hidden: true,
140-
},
141-
position: "top-right",
142-
})
143-
);
144-
}
145-
146131
mapRef.current = new Map({
147132
view: new View({
148133
projection: olDefaults.projection,
149134
center: fromLonLat(olDefaults.center),
150135
zoom: olDefaults.zoom,
151136
}),
152137
interactions: defaultInteractions(),
153-
controls: controls,
138+
controls: controls.current,
154139
});
155140
}
156141
mapRef.current.setTarget(mapTargetRef.current || "");
@@ -161,25 +146,25 @@ const RMap: FC<RMapProps> = ({ initial, currentStyle }) => {
161146
* re-render.
162147
*/
163148
return () => mapRef.current?.setTarget(undefined);
164-
}, [gfinfo]);
149+
}, []);
165150

166151
useEffect(() => {
167152
(async () => {
168153
// Suppression de tous les layers
169154
mapRef.current?.getLayers().clear();
170155

171156
// Ajout de la couche de fond PlanIgnV2
172-
addLayer(bkLayer);
157+
addLayer(bkLayer.current);
173158

174159
// Ajout des autres couches
175160
const layers = initial.layers;
176161

177-
const gfiLayers: object[] = [];
162+
// const gfiLayers: object[] = [];
178163
layers.forEach((layer) => {
179164
addLayer(layer);
180-
if (gfinfo) {
181-
gfiLayers.push({ obj: layer });
182-
}
165+
// if (gfinfo) {
166+
// gfiLayers.push({ obj: layer });
167+
// }
183168
});
184169
// NOTE : il me semble que ce n'est plus nécessaire et plus possible sur geopf-ext-ol, à vérifier
185170
// getControl("GetFeatureInfo")?.setLayers(gfiLayers);
@@ -189,7 +174,7 @@ const RMap: FC<RMapProps> = ({ initial, currentStyle }) => {
189174
mapRef.current?.getView().fit(extent);
190175
}
191176
})();
192-
}, [gfinfo, bkLayer, extent, initial.layers, addLayer]);
177+
}, [extent, initial.layers, addLayer]);
193178

194179
useEffect(() => {
195180
if (!capabilities) return;
@@ -203,15 +188,15 @@ const RMap: FC<RMapProps> = ({ initial, currentStyle }) => {
203188
return l.Identifier === olDefaults.default_background_layer;
204189
});
205190

206-
bkLayer.setSource(new WMTS(wmtsOptions));
207-
bkLayer.set("name", capLayer?.Identifier);
208-
bkLayer.set("title", capLayer?.Title);
191+
bkLayer.current.setSource(new WMTS(wmtsOptions));
192+
bkLayer.current.set("name", capLayer?.Identifier);
193+
bkLayer.current.set("title", capLayer?.Title);
209194
}
210-
}, [capabilities, bkLayer]);
195+
}, [capabilities]);
211196

212197
useEffect(() => {
213-
getWorkingLayers().forEach((layer) => StyleHelper.applyStyle(layer, currentStyle));
214-
}, [currentStyle, getWorkingLayers]);
198+
getWorkingLayers().forEach((layer) => StyleHelper.applyStyle(layer, initial.currentStyle));
199+
}, [initial.currentStyle, getWorkingLayers]);
215200

216201
return <div className={"map-view"} ref={mapTargetRef} />;
217202
};

‎assets/entrepot/pages/service/view/ManageStylesTab.tsx‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { fr } from "@codegouvfr/react-dsfr";
22
import Button from "@codegouvfr/react-dsfr/Button";
33
import RadioButtons from "@codegouvfr/react-dsfr/RadioButtons";
44
import { useMutation, useQueryClient } from "@tanstack/react-query";
5-
import React, { FC, useCallback, useMemo, useState } from "react";
5+
import { FC, useMemo, useState } from "react";
66

77
import { CartesStyle, Service } from "../../../../@types/app";
88
import ConfirmDialog, { ConfirmDialogModal } from "../../../../components/Utils/ConfirmDialog";
@@ -20,10 +20,9 @@ type ManageStylesTabProps = {
2020
datasheetName: string;
2121
offeringId: string;
2222
service?: Service;
23-
setCurrentStyle: React.Dispatch<React.SetStateAction<CartesStyle | undefined>>;
2423
};
2524

26-
const ManageStylesTab: FC<ManageStylesTabProps> = ({ service, offeringId, datastoreId, datasheetName, setCurrentStyle }) => {
25+
const ManageStylesTab: FC<ManageStylesTabProps> = ({ service, offeringId, datastoreId, datasheetName }) => {
2726
const { t: tStyle } = useTranslation("Style");
2827
const { t: tCommon } = useTranslation("Common");
2928

@@ -60,12 +59,6 @@ const ManageStylesTab: FC<ManageStylesTabProps> = ({ service, offeringId, datast
6059

6160
const queryClient = useQueryClient();
6261

63-
const getCurrentStyle = useCallback(() => {
64-
if (service?.configuration.styles) {
65-
return service?.configuration.styles.find((style) => style.current === true);
66-
}
67-
}, [service?.configuration.styles]);
68-
6962
// Suppression d'un style
7063
const { isPending: isRemovePending, mutate: mutateRemove } = useMutation<CartesStyle[], CartesApiException, string>({
7164
mutationFn: (name: string) => {
@@ -79,10 +72,13 @@ const ManageStylesTab: FC<ManageStylesTabProps> = ({ service, offeringId, datast
7972
queryClient.refetchQueries({ queryKey: RQKeys.datastore_datasheet_service_list(datastoreId, datasheetName) });
8073
queryClient.setQueryData<Service>(RQKeys.datastore_offering(datastoreId, offeringId), (oldService) => {
8174
if (oldService) {
82-
const newService = { ...oldService } as Service;
83-
newService.configuration.styles = styles;
84-
setCurrentStyle(getCurrentStyle());
85-
return newService;
75+
return {
76+
...oldService,
77+
configuration: {
78+
...oldService.configuration,
79+
styles,
80+
},
81+
} as Service;
8682
}
8783
});
8884
}
@@ -101,10 +97,13 @@ const ManageStylesTab: FC<ManageStylesTabProps> = ({ service, offeringId, datast
10197
if (service) {
10298
queryClient.setQueryData<Service>(RQKeys.datastore_offering(datastoreId, offeringId), (oldService) => {
10399
if (oldService) {
104-
const newService = { ...oldService } as Service;
105-
newService.configuration.styles = styles;
106-
setCurrentStyle(getCurrentStyle());
107-
return newService;
100+
return {
101+
...oldService,
102+
configuration: {
103+
...oldService.configuration,
104+
styles,
105+
},
106+
} as Service;
108107
}
109108
});
110109
}

‎assets/entrepot/pages/service/view/ServiceView.tsx‎

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Tabs, TabsProps } from "@codegouvfr/react-dsfr/Tabs";
66
import { useQuery } from "@tanstack/react-query";
77
import { FC, useEffect, useMemo, useState } from "react";
88

9-
import { type CartesStyle, OfferingStatusEnum, OfferingTypeEnum, type Service, StoredDataTypeEnum, type TypeInfosWithBbox } from "../../../../@types/app";
9+
import { OfferingStatusEnum, OfferingTypeEnum, type Service, StoredDataTypeEnum, type TypeInfosWithBbox } from "../../../../@types/app";
1010
import Main from "../../../../components/Layout/Main";
1111
import LoadingText from "../../../../components/Utils/LoadingText";
1212
import type { MapInitial } from "../../../../components/Utils/RMap";
@@ -38,7 +38,6 @@ const ServiceView: FC<ServiceViewProps> = ({ datastoreId, offeringId, datasheetN
3838
});
3939

4040
const [initialValues, setInitialValues] = useState<MapInitial>();
41-
const [currentStyle, setCurrentStyle] = useState<CartesStyle | undefined>();
4241

4342
useEffect(() => {
4443
if (!serviceQuery.data || serviceQuery.data?.open === false) return;
@@ -80,15 +79,7 @@ const ServiceView: FC<ServiceViewProps> = ({ datastoreId, offeringId, datasheetN
8079
if (canManageStyles) {
8180
_tabs.push({
8281
label: "Gérer les styles",
83-
content: (
84-
<ManageStylesTab
85-
service={serviceQuery.data}
86-
offeringId={offeringId}
87-
datastoreId={datastoreId}
88-
datasheetName={datasheetName}
89-
setCurrentStyle={setCurrentStyle}
90-
/>
91-
),
82+
content: <ManageStylesTab service={serviceQuery.data} offeringId={offeringId} datastoreId={datastoreId} datasheetName={datasheetName} />,
9283
isDefault: route.params["activeTab"] === "styles",
9384
});
9485
}
@@ -154,9 +145,7 @@ const ServiceView: FC<ServiceViewProps> = ({ datastoreId, offeringId, datasheetN
154145

155146
{serviceQuery.data?.open === true ? (
156147
<div className={fr.cx("fr-grid-row", "fr-mb-4w")}>
157-
<div className={fr.cx("fr-col-12", "fr-col-md-8")}>
158-
{initialValues && <RMap initial={initialValues} currentStyle={currentStyle} />}
159-
</div>
148+
<div className={fr.cx("fr-col-12", "fr-col-md-8")}>{initialValues && <RMap initial={initialValues} />}</div>
160149
<div className={fr.cx("fr-col-12", "fr-col-md-4", "fr-p-1w", "fr-px-2w")}>
161150
<Tabs tabs={tabs} />
162151
</div>

0 commit comments

Comments
 (0)