diff --git a/assets/components/Utils/ExtentMap.tsx b/assets/components/Utils/ExtentMap.tsx index c6bad7da..497d7571 100644 --- a/assets/components/Utils/ExtentMap.tsx +++ b/assets/components/Utils/ExtentMap.tsx @@ -16,8 +16,6 @@ import { Geometry as EntrepotGeometry } from "../../@types/entrepot"; import olDefaults from "../../data/ol-defaults.json"; import useCapabilities from "../../hooks/useCapabilities"; -import "ol/ol.css"; - import "geoportal-extensions-openlayers/dist/GpPluginOpenLayers.css"; import "../../sass/components/map-view.scss"; import "../../sass/components/ol.scss"; diff --git a/assets/components/Utils/RMap.tsx b/assets/components/Utils/RMap.tsx index 34d63ef0..772e31c0 100644 --- a/assets/components/Utils/RMap.tsx +++ b/assets/components/Utils/RMap.tsx @@ -19,8 +19,6 @@ import olDefaults from "../../data/ol-defaults.json"; import useCapabilities from "../../hooks/useCapabilities"; import StyleHelper from "../../modules/Style/StyleHelper"; -import "ol/ol.css"; - import "geoportal-extensions-openlayers/dist/GpPluginOpenLayers.css"; import "../../sass/components/ol.scss"; diff --git a/assets/components/Utils/RangeSlider.tsx b/assets/components/Utils/RangeSlider.tsx index f88a24c0..88f252ea 100644 --- a/assets/components/Utils/RangeSlider.tsx +++ b/assets/components/Utils/RangeSlider.tsx @@ -23,7 +23,6 @@ const RangeSlider: FC = (props) => { value: v, label: v.toString(), }))} - getAriaLabel={() => "Minimum distance"} value={values} onChange={(_, newValue) => { if (!Array.isArray(newValue)) { diff --git a/assets/components/Utils/ZoomRange.tsx b/assets/components/Utils/ZoomRange.tsx index 5a409121..7845faa6 100644 --- a/assets/components/Utils/ZoomRange.tsx +++ b/assets/components/Utils/ZoomRange.tsx @@ -1,4 +1,6 @@ import { fr } from "@codegouvfr/react-dsfr"; +import Range, { RangeProps } from "@codegouvfr/react-dsfr/Range"; +import { cx } from "@codegouvfr/react-dsfr/tools/cx"; import Map from "ol/Map"; import { MapOptions } from "ol/PluggableMap"; import View, { ViewOptions } from "ol/View"; @@ -7,28 +9,31 @@ import BaseLayer from "ol/layer/Base"; import TileLayer from "ol/layer/Tile"; import { fromLonLat } from "ol/proj"; import WMTS, { optionsFromCapabilities } from "ol/source/WMTS"; -import { FC, memo, useCallback, useEffect, useRef } from "react"; +import { FC, memo, ReactNode, useCallback, useEffect, useRef } from "react"; +import { symToStr } from "tsafe/symToStr"; +import { tss } from "tss-react"; import olDefaults from "../../data/ol-defaults.json"; import useCapabilities from "../../hooks/useCapabilities"; -import RangeSlider from "./RangeSlider"; -import "ol/ol.css"; - -import "../../sass/components/zoom-range.scss"; +import imgMapZoomBottom from "../../img/zoom-range/map-zoom-bottom.png"; +import imgMapZoomTop from "../../img/zoom-range/map-zoom-top.png"; type ZoomRangeProps = { - min: number; - max: number; + min: RangeProps["min"]; + max: RangeProps["min"]; values: number[]; onChange: (values: number[]) => void; + step?: RangeProps["step"]; center?: number[]; + mode?: "top" | "bottom" | "both"; + overlayContent?: ReactNode; }; const ZoomRange: FC = (props) => { const { data: capabilities } = useCapabilities(); - const { min, max, values, center = olDefaults.center, onChange } = props; + const { min, max, values, center = olDefaults.center, onChange, step, mode = "both", overlayContent } = props; // References sur les deux cartes const leftMapRef = useRef(); @@ -112,15 +117,137 @@ const ZoomRange: FC = (props) => { rightMapRef.current?.updateSize(); }, [values]); + const handleChange = useCallback( + (newValue: number, zoomType?: "top" | "bottom") => { + switch (zoomType) { + case "top": + onChange([newValue, values[1]]); + break; + case "bottom": + onChange([values[0], newValue]); + break; + default: + onChange([newValue]); + break; + } + }, + [onChange, values] + ); + + const { classes } = useStyles(); + return (
-
-
-
+
+ {(mode === "both" || mode === "top") && ( +
+
+
+ )} + + {mode !== "both" && ( +
+
+ +
+ {overlayContent &&
{overlayContent}
} +
+
+
+ )} + + {(mode === "both" || mode === "bottom") && ( +
+
+
+ )}
- onChange(newValues)} /> + { + switch (mode) { + case "top": + return { + nativeInputProps: { + value: values?.[0] ?? min, + onChange: (e) => { + handleChange(e.currentTarget.valueAsNumber); + }, + }, + }; + case "bottom": + return { + nativeInputProps: { + value: values?.[0] ?? max, + onChange: (e) => { + handleChange(e.currentTarget.valueAsNumber); + }, + }, + }; + case "both": + return { + double: true, + nativeInputProps: [ + { + value: values?.[0] ?? min, + onChange: (e) => { + handleChange(e.currentTarget.valueAsNumber, "top"); + }, + }, + { + value: values?.[1] ?? max, + onChange: (e) => { + handleChange(e.currentTarget.valueAsNumber, "bottom"); + }, + }, + ], + }; + } + })()} + />
); }; +ZoomRange.displayName = symToStr({ ZoomRange }); + export default memo(ZoomRange); + +const useStyles = tss.withName(ZoomRange.displayName).create(() => ({ + map: { + height: "300px", + width: "100%", + }, + falseMapRoot: { + position: "relative", + display: "inline-block", + width: "100%", + height: "300px", + }, + falseMapImg: { + display: "block", + width: "100%", + height: "300px", + }, + falseMapOverlay: { + position: "absolute", + top: 0, + left: 0, + right: 0, + bottom: 0, + display: "flex", + justifyContent: "center", + alignItems: "center", + backgroundColor: "rgba(0, 0, 0, 0.6)", + textAlign: "center", + }, + falseMapOverlayContent: { + backgroundColor: fr.colors.decisions.background.default.grey.default, + color: fr.colors.decisions.text.default.grey.default, + padding: fr.spacing("2v"), + }, +})); diff --git a/assets/data/ol-defaults.json b/assets/data/ol-defaults.json index d8e61906..a688b3b7 100644 --- a/assets/data/ol-defaults.json +++ b/assets/data/ol-defaults.json @@ -4,7 +4,7 @@ "projection": "EPSG:3857", "zoom": 10, "zoom_levels": { - "TOP": 0, + "TOP": 1, "BOTTOM": 18 } -} \ No newline at end of file +} diff --git a/assets/entrepot/pages/service/tms/sample/RCSampleMap.tsx b/assets/entrepot/pages/service/tms/sample/RCSampleMap.tsx index 2bf637fd..1334594a 100644 --- a/assets/entrepot/pages/service/tms/sample/RCSampleMap.tsx +++ b/assets/entrepot/pages/service/tms/sample/RCSampleMap.tsx @@ -12,7 +12,6 @@ import { UseFormReturn } from "react-hook-form"; import { fr } from "@codegouvfr/react-dsfr"; import Translator from "../../../../../modules/Translator"; -import "ol/ol.css"; import "geoportal-extensions-openlayers/dist/GpPluginOpenLayers.css"; import "../../../../../sass/components/map-view.scss"; import "../../../../../sass/components/ol.scss"; diff --git a/assets/entrepot/pages/service/wms-raster-wmts/PyramidRasterGenerateForm.tsx b/assets/entrepot/pages/service/wms-raster-wmts/PyramidRasterGenerateForm.tsx index 09b0966e..983e230f 100644 --- a/assets/entrepot/pages/service/wms-raster-wmts/PyramidRasterGenerateForm.tsx +++ b/assets/entrepot/pages/service/wms-raster-wmts/PyramidRasterGenerateForm.tsx @@ -1,4 +1,5 @@ import { fr } from "@codegouvfr/react-dsfr"; +import Accordion from "@codegouvfr/react-dsfr/Accordion"; import Alert from "@codegouvfr/react-dsfr/Alert"; import Button from "@codegouvfr/react-dsfr/Button"; import ButtonsGroup from "@codegouvfr/react-dsfr/ButtonsGroup"; @@ -8,9 +9,12 @@ import { useQuery } from "@tanstack/react-query"; import { declareComponentKeys } from "i18nifty"; import { FC, useCallback, useState } from "react"; -import { Service } from "../../../../@types/app"; +import type { Service } from "../../../../@types/app"; +import type { ConfigurationWmsVectorDetailsContent } from "../../../../@types/entrepot"; import DatastoreLayout from "../../../../components/Layout/DatastoreLayout"; import LoadingText from "../../../../components/Utils/LoadingText"; +import ZoomRange from "../../../../components/Utils/ZoomRange"; +import olDefaults from "../../../../data/ol-defaults.json"; import useScrollToTopEffect from "../../../../hooks/useScrollToTopEffect"; import { Translations, useTranslation } from "../../../../i18n/i18n"; import RQKeys from "../../../../modules/entrepot/RQKeys"; @@ -33,7 +37,7 @@ const PyramidRasterGenerateForm: FC = ({ datasto const { t } = useTranslation("PyramidRasterGenerateForm"); const { t: tCommon } = useTranslation("Common"); - const [currentStep, setCurrentStep] = useState(STEPS.TECHNICAL_NAME); + const [currentStep, setCurrentStep] = useState(STEPS.TOP_ZOOM_LEVEL); const serviceQuery = useQuery({ queryKey: RQKeys.datastore_offering(datastoreId, offeringId), @@ -65,6 +69,8 @@ const PyramidRasterGenerateForm: FC = ({ datasto /*createServiceMutation, editServiceMutation, trigger, editMode*/ ]); + const [levels, setLevels] = useState([5, 15]); + return (

{t("title")}

@@ -115,6 +121,44 @@ const PyramidRasterGenerateForm: FC = ({ datasto de la carte de gauche. Le zoom maximum sur l’image de droite est fixe et ne peut être modifié. Tous les niveaux intermédiaires seront générés.`}

+ + {currentStep === STEPS.TOP_ZOOM_LEVEL && + (serviceQuery.data?.configuration.type_infos as ConfigurationWmsVectorDetailsContent).used_data?.[0]?.relations.map((rel) => ( + + { + console.log(values); + setLevels((prevLevels) => [values[0], prevLevels[1]]); + }} + step={1} + mode="top" + /> + { + console.log(values); + setLevels((prevLevels) => [prevLevels[0], values[0]]); + }} + step={1} + mode="bottom" + /> + { + console.log(values); + setLevels(values); + }} + step={1} + /> + + ))}