Merge branch 'master' into fecach

src/components/FeaturePanel/EditDialog/EditContent/EditContent.tsx

@@ -30,6 +30,7 @@ export const EditContent = () => {
         direction={isSmallScreen ? 'column' : 'row'}
         gap={2}
         overflow="hidden"
+        flex={1}
       >
         {items.length > 1 && (
           <Tabs

src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/EditFeatureMap/EditFeatureMap.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  CircularProgress,
+  Typography,
+} from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+import styled from '@emotion/styled';
+import { t } from '../../../../../../services/intl';
+import { useFeatureEditData } from '../SingleFeatureEditContext';
+import { useInitEditFeatureMap } from './useInitEditFeatureMap';
+
+const Container = styled.div`
+  width: 100%;
+  height: 500px;
+  position: relative;
+`;
+
+const LoadingContainer = styled.div`
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Map = styled.div<{ $isVisible: boolean }>`
+  visibility: ${({ $isVisible }) => ($isVisible ? 'visible' : 'hidden')};
+  height: 100%;
+  width: 100%;
+`;
+
+export default function EditFeatureMap() {
+  const { containerRef, isMapLoaded } = useInitEditFeatureMap();
+  const [expanded, setExpanded] = useState(false);
+
+  const { shortId } = useFeatureEditData();
+  const isNode = shortId[0] === 'n';
+  if (!isNode) return null;
+
+  return (
+    <Accordion
+      disableGutters
+      elevation={0}
+      square
+      expanded={expanded}
+      onChange={() => setExpanded(!expanded)}
+    >
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography variant="button">{t('editdialog.location')}</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Container>
+          {!isMapLoaded && (
+            <LoadingContainer>
+              <CircularProgress color="primary" />
+            </LoadingContainer>
+          )}
+          <Map $isVisible={isMapLoaded} ref={containerRef} />
+        </Container>
+      </AccordionDetails>
+    </Accordion>
+  );
+}

src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/EditFeatureMap/useDraggableMarker.ts

@@ -0,0 +1,59 @@
+import React, { useRef } from 'react';
+import maplibregl, { LngLat } from 'maplibre-gl';
+import { createMapEffectHook } from '../../../../../helpers';
+import { LonLat } from '../../../../../../services/types';
+
+const useUpdateDraggableFeatureMarker = createMapEffectHook<
+  [
+    {
+      onMarkerChange: (lngLat: LngLat) => void;
+      nodeLonLat: LonLat;
+      markerRef: React.MutableRefObject<maplibregl.Marker>;
+    },
+  ]
+>((map, props) => {
+  const { markerRef, nodeLonLat, onMarkerChange } = props;
+
+  const onDragEnd = () => {
+    const lngLat = markerRef.current?.getLngLat();
+    if (lngLat) {
+      onMarkerChange(lngLat);
+    }
+  };
+
+  markerRef.current?.remove();
+  markerRef.current = undefined;
+
+  if (nodeLonLat) {
+    const [lng, lat] = nodeLonLat;
+    markerRef.current = new maplibregl.Marker({
+      color: 'salmon',
+      draggable: true,
+    })
+      .setLngLat({
+        lng: parseFloat(lng.toFixed(6)),
+        lat: parseFloat(lat.toFixed(6)),
+      })
+      .addTo(map);
+
+    markerRef.current?.on('dragend', onDragEnd);
+  }
+});
+
+export function useDraggableFeatureMarker(
+  mapRef: React.MutableRefObject<maplibregl.Map>,
+  currentItem: any,
+) {
+  const markerRef = useRef<maplibregl.Marker>();
+
+  const onMarkerChange = ({ lng, lat }: LngLat) => {
+    const newLonLat = [lng, lat];
+    currentItem.setNodeLonLat(newLonLat);
+  };
+
+  useUpdateDraggableFeatureMarker(mapRef.current, {
+    onMarkerChange,
+    nodeLonLat: currentItem?.nodeLonLat,
+    markerRef,
+  });
+}