Merge pull request #1298 from Tampere/feature/new-map-drawing-tool

Add possibility to use map features as base for project or object geo…
Tampere · Sep 19, 2024 · 37b6a60 · 37b6a60
2 parents 01fdfbd + ec338f7
commit 37b6a60
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 4 deletions.
diff --git a/frontend/src/components/Map/MapToolbar.tsx b/frontend/src/components/Map/MapToolbar.tsx
@@ -1,6 +1,7 @@
 import { css } from '@emotion/react';
 import {
   Clear,
+  CopyAllTwoTone,
   DeleteForeverTwoTone,
   EditTwoTone,
   PanToolAltTwoTone,
@@ -53,12 +54,13 @@ export type ToolType =
   | 'tracedFeature'
   | 'editFeature'
   | 'clearSelectedFeature'
-  | 'deleteFeature';
+  | 'deleteFeature'
+  | 'copyFromSelection';
 
 interface Tool {
   type: ToolType;
   icon: JSX.Element;
-  tooltip: TranslationKey;
+  tooltip: TranslationKey | Record<string, TranslationKey>;
   disabledTooltip?: TranslationKey;
   color?: 'primary' | 'secondary';
 }
@@ -81,6 +83,14 @@ const tools: readonly Tool[] = [
     icon: <PanToolAltTwoTone />,
     tooltip: 'mapEdit.selectFeatureTooltip',
   },
+  {
+    type: 'copyFromSelection',
+    icon: <CopyAllTwoTone />,
+    tooltip: {
+      new: 'mapEdit.copyFromSelectionTooltip.new',
+      existing: 'mapEdit.copyFromSelectionTooltip.existing',
+    },
+  },
   {
     type: 'tracedFeature',
     icon: <RoundedCornerTwoTone />,
@@ -108,14 +118,19 @@ interface Props {
   toolsDisabled: Partial<Record<ToolType, boolean>>;
   toolsHidden?: ToolType[];
   onToolChange: (tool: ToolType | null) => void;
+  geometryExists?: boolean;
 }
 
 export function MapToolbar(props: Props) {
   const tr = useTranslations();
   const [selectedTool, setSelectedTool] = useState<ToolType | null>(null);
 
   function handleToolClick(tool: ToolType | null) {
-    setSelectedTool(tool);
+    if (tool === 'copyFromSelection') {
+      setSelectedTool(null);
+    } else {
+      setSelectedTool(tool);
+    }
     props.onToolChange(tool);
   }
 
@@ -130,7 +145,9 @@ export function MapToolbar(props: Props) {
             title={
               tool.disabledTooltip && props.toolsDisabled[tool.type]
                 ? tr(tool.disabledTooltip)
-                : tr(tool.tooltip)
+                : typeof tool.tooltip === 'object'
+                  ? tr(tool.tooltip[props.geometryExists ? 'existing' : 'new'])
+                  : tr(tool.tooltip)
             }
           >
             <Box>

diff --git a/frontend/src/components/Map/MapWrapper.tsx b/frontend/src/components/Map/MapWrapper.tsx
@@ -8,6 +8,7 @@ import VectorLayer from 'ol/layer/Vector';
 import { Projection } from 'ol/proj';
 import VectorSource from 'ol/source/Vector';
 import Style from 'ol/style/Style';
+import * as olUtil from 'ol/util';
 import { useEffect, useMemo, useRef, useState } from 'react';
 
 import {
@@ -218,6 +219,10 @@ export function MapWrapper<TProject extends ProjectData, TProjectObject extends
       ?.some((feature) => feature.getGeometry()?.getType() === geometryType);
   }
 
+  /* function savedFeaturesSelected() {
+    return selectionSource.getFeatures().some((feature) => );
+  } */
+
   const drawLayer = useMemo(() => createDrawLayer(drawSource, props.drawOptions?.drawStyle), []);
 
   const registerDrawInteraction = useMemo(
@@ -288,11 +293,26 @@ export function MapWrapper<TProject extends ProjectData, TProjectObject extends
     setSelectedTool(null);
   }
 
+  function copySelectionToDrawSource() {
+    const drawFeatureIds = drawSource.getFeatures().map((feature) => olUtil.getUid(feature));
+    const selectionFeatures = selectionSource.getFeatures();
+    const featuresToCopy = selectionFeatures.filter(
+      (feature) => !drawFeatureIds.includes(olUtil.getUid(feature)),
+    );
+    drawSource.addFeatures(featuresToCopy);
+    selectionSource.clear();
+    drawFinished();
+    setDirty(true);
+  }
+
   useEffect(() => {
     switch (selectedTool) {
       case 'selectFeature':
         setInteractions([registerSelectInteraction]);
         break;
+      case 'copyFromSelection':
+        copySelectionToDrawSource();
+        break;
       case 'newFeature':
       case 'newPointFeature':
         setInteractions([registerDrawInteraction]);
@@ -473,9 +493,14 @@ export function MapWrapper<TProject extends ProjectData, TProjectObject extends
         </Map>
         {props.drawOptions?.editable && (
           <MapToolbar
+            geometryExists={drawSource.getFeatures().length > 0}
             toolsHidden={props.drawOptions?.toolsHidden}
             toolsDisabled={{
               selectFeature: infoBoxVisible,
+              copyFromSelection:
+                featureSelector.features.every(
+                  (feature) => feature.getProperties().layer === 'drawLayer',
+                ) || infoBoxVisible,
               newFeature: drawSourceHasGeometryOfType('Point') || infoBoxVisible,
               newPointFeature: drawSourceHasGeometryOfType('Polygon') || infoBoxVisible,
               tracedFeature:

diff --git a/shared/src/language/fi.ts b/shared/src/language/fi.ts
@@ -256,6 +256,8 @@ export const fi = {
   'mapEdit.editFeatureTooltip': 'Muokkaa valittuja alueita',
   'mapEdit.clearSelectedFeatureTooltip': 'Tyhjennä valinta',
   'mapEdit.removeFeatureTooltip': 'Poista valitut alueet',
+  'mapEdit.copyFromSelectionTooltip.new': 'Käytä hankealueena',
+  'mapEdit.copyFromSelectionTooltip.existing': 'Lisää hankealueeseen',
   'errorPage.error': 'Virhe',
   'errorPage.warning': 'Varoitus',
   'errorPage.navigateBack': 'Palaa takaisin',