Polygon and Line Geometry Editor

.container {
  display: flex;
  flex-direction: row;

  width: 100%;
  height: 100%;
}

.container .map {
  flex-grow: 1;
}

.area {
  padding: 8px 12px;

  font-size: 14px;
  font-style: normal;
  line-height: 20px;

  color: #fff;
  border-radius: 12px;
  background-color: #212326;
  box-shadow: 0 0 2px 0 rgba(95, 105, 131, 0.08), 0 2px 4px 0 #5f698333;
}

.edit-mode-control {
  display: flex;
  flex-direction: row;
  align-items: center;

  padding: 10px 16px;

  font-size: 16px;
  font-style: normal;
  line-height: 22px;
  user-select: none;

  color: #000;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 12px 0 #5f69831a, 0 4px 24px 0 #5f69830a;
  gap: 12px;
}

.edit-mode-control input {
  display: none;
}

.edit-mode-control input + label.toggle-control {
  position: relative;

  display: inline-block;

  width: 34px;
  height: 20px;

  cursor: pointer;

  border-radius: 10px;
  background-color: #5c5e6624;

  transition: 0.3s;
}

.edit-mode-control input:checked + label.toggle-control {
  background-color: var(--interact-action-color);
}

.edit-mode-control input + label.toggle-control::after {
  position: absolute;
  top: 2px;
  left: 2px;

  width: 16px;
  height: 16px;

  content: '';

  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 2px 0 #5f698314, 0 2px 4px 0 #5f698333;

  transition: 0.3s;
}

.edit-mode-control input:checked + label.toggle-control::after {
  transform: translateX(14px);
}

.geojson-editor {
  position: relative;

  width: 25%;
}

.geojson-editor button {
  position: absolute;
  z-index: 1000;
  bottom: 8px;
  left: calc(50% - (133px / 2));

  width: 133px;
  padding: 8px 12px;

  font-size: 14px;
  font-weight: bold;
  font-style: normal;
  line-height: 16px;
  cursor: pointer;

  color: #4d4d4d;
  border: none;
  border-radius: 8px;
  outline: none;
  background: #fff;
  box-shadow: 0 0 2px 0 #5f698314, 0 2px 4px 0 #5f698333;
}

.geojson-editor button:hover {
  box-shadow: 0 4px 12px 0 #5f69831a, 0 4px 24px 0 #5f69830a;
}

import {LngLat} from '@mappable-world/mappable-types';
import {EditorConfiguration} from 'codemirror';

export const CODE_MIRROR_OPTIONS: EditorConfiguration = {
  mode: 'json',
  theme: 'material',
  lineNumbers: true
};

export const MAX_VERTEX_COUNT = 10;
export const MIN_VERTEX_COUNT = 4;

// helper utils
export const lngLatEqual = (a: LngLat, b: LngLat): boolean => {
  const [aLng, aLat] = a;
  const [bLng, bLat] = b;
  return aLng === bLng && aLat === bLat;
};

export const loopLineString = (coordinates: LngLat[]): LngLat[] => {
  return [...coordinates, coordinates[0]];
};

.geometry-editor-marker {
  position: absolute;

  width: 8px;
  height: 8px;

  cursor: pointer;

  border: 1.5px solid var(--editor-point-color);
  border-radius: 8px;
  background-color: #fff;

  transform: translate(-50%, -50%);
}

.geometry-editor-marker:hover {
  width: 16px;
  height: 16px;

  border: none;
  border-radius: 8px;
  background-color: var(--editor-point-color);
}

.geometry-editor-marker.preview {
  cursor: copy;

  opacity: 0;
}

.geometry-editor-marker.preview:hover {
  opacity: 1;
}

import type {
  DomEventHandler,
  LineStringGeometry,
  LngLat,
  PolygonGeometry,
  MMapMarkerEventHandler,
  MMapMarkerProps
} from '@mappable-world/mappable-types';
import type {Reactify} from '@mappable-world/mappable-types/reactify';
import {loopLineString} from './common';
import {DEFAULT_FEATURE_LINE_STYLE, DEFAULT_FEATURE_POLYGON_STYLE} from './variables';

const {useContext, useCallback, useEffect, useState, useMemo, useRef, forwardRef} = React;

const Z_INDEX_BASE = 2600;
const Z_INDEX_POLYGON = Z_INDEX_BASE;
const Z_INDEX_LINE = Z_INDEX_BASE + 0.1;
const Z_INDEX_PREVIEW_MARKERS = -1;
const Z_INDEX_MARKERS = Z_INDEX_BASE + 0.3;

const LINE_FEATURE_ID = 'GEOMETRY_EDITOR_LINE_FEATURE';
const PREVIEW_MARKER_FEATURE_ID = 'GEOMETRY_EDITOR_PREVIEW_MARKER_FEATURE';

export const MMapsReactifyContext = React.createContext<Reactify | null>(null);

export type GeometryEditorGeometry = LineStringGeometry | PolygonGeometry;

export type GeometryEditorProps = {
  geometry: GeometryEditorGeometry;
  onChange?: (geometry: GeometryEditorGeometry) => void | false;
  maxVertex?: number;
  minVertex?: number;
  editMode?: boolean;
};

type GeometryEditorPoint = {
  coordinates: LngLat;
  key: string;
};

export const GeometryEditor = ({geometry, editMode = false, onChange, minVertex, maxVertex}: GeometryEditorProps) => {
  const reactify = useContext(MMapsReactifyContext);
  const MMapFeature = reactify.entity(mappable.MMapFeature);
  const MMapListener = reactify.entity(mappable.MMapListener);

  const id = useRef(0);
  const keyOrder = useRef<string[]>([]);
  const keyCoordinates = useRef<Record<string, LngLat>>({});
  const previewMarkerRef = useRef();

  const createNewKey = () => (id.current++).toString();

  const [previewCoordinates, setPreviewCoordinates] = useState<LngLat>();
  const [previewSegmentIndex, setPreviewSegmentIndex] = useState<number>();
  const [previewPointDrag, setPreviewPointDrag] = useState(false);

  const closed = useMemo(() => geometry.type === 'Polygon', [geometry]);

  const points = useMemo<GeometryEditorPoint[]>(() => {
    const coordinates: LngLat[] =
      geometry.type === 'LineString' ? geometry.coordinates : geometry.coordinates[0].slice(0, -1);

    keyOrder.current.length = coordinates.length;

    return coordinates.map((coordinates, index) => {
      let key: string;
      if (keyOrder.current[index] !== undefined) {
        key = keyOrder.current[index];
      } else {
        key = createNewKey();
        keyOrder.current[index] = key;
      }
      keyCoordinates.current[key] = coordinates;
      return {key, coordinates};
    });
  }, [geometry, maxVertex, minVertex]);

  const isMaxVertex = useMemo(() => maxVertex !== undefined && points.length >= maxVertex, [points, maxVertex]);
  const isMinVertex = useMemo(() => minVertex !== undefined && points.length <= minVertex, [points, minVertex]);

  const lineGeometry = useMemo<LineStringGeometry>(() => {
    const coordinates = points.map((p) => p.coordinates);
    return {type: 'LineString', coordinates: closed ? loopLineString(coordinates) : coordinates};
  }, [points, closed]);

  const polygonGeometry = useMemo<PolygonGeometry>(
    () => ({type: 'Polygon', coordinates: [points.map((p) => p.coordinates)]}),
    [points]
  );

  const updatePoint = () => {
    const coordinates = keyOrder.current.map((key) => keyCoordinates.current[key]);
    const geometry: GeometryEditorGeometry = closed
      ? (turf.polygon([loopLineString(coordinates)]).geometry as PolygonGeometry)
      : (turf.lineString(coordinates).geometry as LineStringGeometry);
    onChange?.(geometry);
  };

  const onMapClick = useCallback<DomEventHandler>(
    (object, event) => {
      if (object !== undefined && object.entity === previewMarkerRef.current) return;
      if (isMaxVertex) return;

      const newKey = createNewKey();
      keyOrder.current.push(newKey);
      keyCoordinates.current[newKey] = event.coordinates;
      updatePoint();
    },
    [isMaxVertex]
  );

  const onMapMouseMove = useCallback<DomEventHandler>(
    (object, event) => {
      if (object === undefined) return;

      if (object.type === 'feature' && object.entity.id === LINE_FEATURE_ID) {
        setPreviewCoordinates(event.coordinates);
      }
      if (object.type === 'marker' && object.entity === previewMarkerRef.current && !previewPointDrag) {
        const pointOnLineCoordinates = turf.nearestPointOnLine(lineGeometry, event.coordinates);
        setPreviewCoordinates(pointOnLineCoordinates.geometry.coordinates as LngLat);
        setPreviewSegmentIndex(pointOnLineCoordinates.properties.index);
      }
    },
    [lineGeometry, previewPointDrag]
  );

  const onClickPreviewPoint = useCallback<MMapMarkerProps['onClick']>(
    (_, {coordinates}) => {
      const newKey = createNewKey();
      keyOrder.current.splice(previewSegmentIndex + 1, 0, newKey);
      keyCoordinates.current[newKey] = coordinates;
      updatePoint();
    },
    [isMaxVertex, previewSegmentIndex]
  );

  const onDragMovePreviewPoint = useCallback<MMapMarkerEventHandler>(
    (coordinates) => {
      const key = keyOrder.current[previewSegmentIndex + 1];
      keyCoordinates.current[key] = coordinates;
      setPreviewCoordinates(coordinates);
      updatePoint();
    },
    [previewSegmentIndex]
  );

  const onDragStartPreviewPoint = useCallback<MMapMarkerEventHandler>(
    (coordinates) => {
      const newKey = createNewKey();
      keyOrder.current.splice(previewSegmentIndex + 1, 0, newKey);
      keyCoordinates.current[newKey] = coordinates;

      setPreviewPointDrag(true);
      updatePoint();
    },
    [previewSegmentIndex]
  );

  const onDragEndPreviewPoint = useCallback<MMapMarkerEventHandler>((coordinates) => {
    setPreviewPointDrag(false);
  }, []);

  const onDragMovePolygonFeature = useCallback((geometryCoordinates: LngLat[][]) => {
    const {geometry} = turf.polygon([loopLineString(geometryCoordinates[0])]);
    onChange?.(geometry as GeometryEditorGeometry);
  }, []);

  const renderPoints = useMemo(
    () =>
      points.map((point, index) => {
        const onDragMove = (coordinates: LngLat) => {
          keyCoordinates.current[point.key] = coordinates;
          updatePoint();
        };

        const onDoubleClick = () => {
          if (!editMode || isMinVertex) {
            return;
          }

          keyCoordinates.current[point.key] = undefined;
          keyOrder.current.splice(index, 1);
          updatePoint();
        };
        return {onDragMove, onDoubleClick, ...point};
      }),
    [points, isMinVertex, editMode]
  );

  return (
    <>
      {editMode && <MMapListener onClick={onMapClick} onMouseMove={onMapMouseMove} />}
      <MMapFeature
        id={LINE_FEATURE_ID}
        zIndex={Z_INDEX_LINE}
        geometry={lineGeometry}
        style={DEFAULT_FEATURE_LINE_STYLE}
      />
      {closed && (
        <MMapFeature
          zIndex={Z_INDEX_POLYGON}
          geometry={polygonGeometry}
          style={DEFAULT_FEATURE_POLYGON_STYLE}
          draggable={editMode}
          onDragMove={onDragMovePolygonFeature}
        />
      )}
      {editMode && renderPoints.map((point) => <GeometryEditorMarker draggable={editMode} {...point} />)}

      {editMode && previewCoordinates && (!isMaxVertex || previewPointDrag) && (
        <GeometryEditorPreviewMarker
          coordinates={previewCoordinates}
          draggable={editMode}
          onClick={onClickPreviewPoint}
          onDragMove={onDragMovePreviewPoint}
          onDragStart={onDragStartPreviewPoint}
          onDragEnd={onDragEndPreviewPoint}
          ref={previewMarkerRef}
        />
      )}
    </>
  );
};

const GeometryEditorMarker = forwardRef((props: MMapMarkerProps, ref) => {
  const reactify = useContext(MMapsReactifyContext);
  const MMapMarker = reactify.entity(mappable.MMapMarker);

  return (
    <MMapMarker {...props} zIndex={Z_INDEX_MARKERS} ref={ref}>
      <div className="geometry-editor-marker"></div>
    </MMapMarker>
  );
});

const GeometryEditorPreviewMarker = forwardRef((props: MMapMarkerProps, ref) => {
  const reactify = useContext(MMapsReactifyContext);
  const MMapMarker = reactify.entity(mappable.MMapMarker);

  return (
    <MMapMarker {...props} zIndex={Z_INDEX_PREVIEW_MARKERS} id={PREVIEW_MARKER_FEATURE_ID} ref={ref}>
      <div className="geometry-editor-marker preview"></div>
    </MMapMarker>
  );
});

:root {
  --editor-point-color: #1921ff;
  --interact-action-color: #122db2;
}

import type {BehaviorType, DrawingStyle, MMapLocationRequest} from '@mappable-world/mappable-types';
import {GeometryEditorGeometry} from './react-geometry-editor';

export const LOCATION: MMapLocationRequest = {
  center: [55.2744, 25.1972], // starting position [lng, lat]
  zoom: 12 // starting zoom
};

export const BEHAVIORS: BehaviorType[] = ['drag', 'scrollZoom', 'pinchZoom'];

export const INITIAL_GEOMETRY = turf.polygon([
  [
    [55.302408, 25.189178],
    [55.298089, 25.176713],
    [55.276003, 25.172635],
    [55.258304, 25.16725],
    [55.247538, 25.177221],
    [55.242686, 25.187418],
    [55.249911, 25.20896],
    [55.268689, 25.216328],
    [55.302408, 25.189178]
  ]
]).geometry as GeometryEditorGeometry;

export const DEFAULT_FEATURE_LINE_STYLE: DrawingStyle = {
  stroke: [{width: 4, color: '#747FFC', opacity: 0.8}],
  cursor: 'pointer',
  simplificationRate: 0
};

export const DEFAULT_FEATURE_POLYGON_STYLE: DrawingStyle = {
  fill: '#747FFC',
  fillOpacity: 0.14,
  stroke: [{width: 4, color: '#747FFC', opacity: 0.8}],
  cursor: 'grab',
  simplificationRate: 0
};