feat: add AOI editing to map during project creation (#1135)

* feat (createNewProject): mapControlComponent - mapControlComponent including edit, undo added * feat AssetModules: icons added * feat (createNewProject): splitTasks - edit task on editBtn click * fix codeRefactor: consoles removed * fix mapControlComponent: undoIcon removed
hotosm · Jan 25, 2024 · b382fde · b382fde
1 parent c8246ce
commit b382fde
Show file tree

Hide file tree

Showing 10 changed files with 108 additions and 12 deletions.
diff --git a/src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js b/src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js
@@ -161,12 +161,18 @@ const LayerSwitcherControl = ({ map, visible = 'osm' }) => {
       layerSwitcher.style.justifyContent = 'center';
       layerSwitcher.style.alignItems = 'center';
     }
-    if (location.pathname.includes('project_details')) {
+    if (
+      location.pathname.includes('project_details') ||
+      location.pathname.includes('upload-area') ||
+      location.pathname.includes('select-form') ||
+      location.pathname.includes('data-extract') ||
+      location.pathname.includes('split-tasks')
+    ) {
       const olZoom = document.querySelector('.ol-zoom');
       if (olZoom) {
         olZoom.style.display = 'none';
       }
-      if (layerSwitcher) {
+      if (layerSwitcher && location.pathname.includes('project_details')) {
         layerSwitcher.style.right = '19px';
         layerSwitcher.style.top = '250px';
         layerSwitcher.style.zIndex = '1000';

diff --git a/src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/VectorLayer.js b/src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/VectorLayer.js
@@ -83,7 +83,9 @@ const VectorLayer = ({
     map.addInteraction(select);
 
     return () => {
-      // map.removeInteraction(defaultInteractions().extend([select, modify]))
+      // map.removeInteraction(defaultInteractions().extend([select, modify]));
+      map.removeInteraction(modify);
+      map.removeInteraction(select);
     };
   }, [map, vectorLayer, onModify]);
 
@@ -213,7 +215,7 @@ const VectorLayer = ({
           ]
         : [getStyles({ style, feature, resolution })];
     });
-  }, [vectorLayer, style, setStyle]);
+  }, [vectorLayer, style, setStyle, onModify]);
 
   useEffect(() => {
     if (!vectorLayer) return;

diff --git a/src/frontend/src/components/createnewproject/MapControlComponent.tsx b/src/frontend/src/components/createnewproject/MapControlComponent.tsx
@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import AssetModules from '../../shared/AssetModules';
+import VectorLayer from 'ol/layer/Vector';
+import CoreModules from '../../shared/CoreModules.js';
+import { CreateProjectActions } from '../../store/slices/CreateProjectSlice';
+
+const MapControlComponent = ({ map, hasEditUndo }) => {
+  const dispatch = CoreModules.useAppDispatch();
+  const toggleSplittedGeojsonEdit = CoreModules.useAppSelector(
+    (state) => state.createproject.toggleSplittedGeojsonEdit,
+  );
+  const btnList = [
+    {
+      id: 'Add',
+      icon: <AssetModules.AddIcon style={{ fontSize: '20px' }} className="fmtm-text-[#666666]" />,
+    },
+    {
+      id: 'Minus',
+      icon: <AssetModules.RemoveIcon style={{ fontSize: '20px' }} className="fmtm-text-[#666666]" />,
+    },
+    {
+      id: 'Edit',
+      icon: (
+        <AssetModules.TimelineIcon
+          style={{ fontSize: '20px' }}
+          className={`${toggleSplittedGeojsonEdit ? 'fmtm-text-primaryRed' : 'fmtm-text-[#666666]'}`}
+        />
+      ),
+    },
+  ];
+
+  const handleOnClick = (btnId) => {
+    if (btnId === 'Add') {
+      const actualZoom = map.getView().getZoom();
+      map.getView().setZoom(actualZoom + 1);
+    } else if (btnId === 'Minus') {
+      const actualZoom = map.getView().getZoom();
+      map.getView().setZoom(actualZoom - 1);
+    } else if (btnId === 'Edit') {
+      dispatch(CreateProjectActions.SetToggleSplittedGeojsonEdit(!toggleSplittedGeojsonEdit));
+    }
+  };
+
+  return (
+    <div className="fmtm-absolute fmtm-top-[20px] fmtm-left-3 fmtm-z-50 fmtm-bg-white fmtm-rounded-md fmtm-p-[2px] fmtm-shadow-xl fmtm-flex fmtm-flex-col fmtm-gap-[2px]">
+      {btnList.map((btn) => {
+        return (
+          <div key={btn.id} title={btn.id}>
+            {((btn.id !== 'Edit' && btn.id !== 'Undo') || (btn.id === 'Edit' && hasEditUndo)) && (
+              <div
+                className={` fmtm-p-1 fmtm-rounded-md fmtm-duration-200 fmtm-cursor-pointer ${
+                  toggleSplittedGeojsonEdit && btn.id === 'Edit'
+                    ? 'fmtm-bg-red-50'
+                    : 'fmtm-bg-white hover:fmtm-bg-gray-100'
+                }`}
+                onClick={() => handleOnClick(btn.id)}
+              >
+                {btn.icon}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default MapControlComponent;
diff --git a/src/frontend/src/components/createnewproject/SplitTasks.tsx b/src/frontend/src/components/createnewproject/SplitTasks.tsx
@@ -62,6 +62,9 @@ const SplitTasks = ({ flag, geojsonFile, setGeojsonFile, customLineUpload, custo
   );
   const isTasksGenerated = CoreModules.useAppSelector((state) => state.createproject.isTasksGenerated);
   const isFgbFetching = CoreModules.useAppSelector((state) => state.createproject.isFgbFetching);
+  const toggleSplittedGeojsonEdit = CoreModules.useAppSelector(
+    (state) => state.createproject.toggleSplittedGeojsonEdit,
+  );
 
   const toggleStep = (step, url) => {
     dispatch(CommonActions.SetCurrentStepFormStep({ flag: flag, step: step }));
@@ -427,11 +430,17 @@ const SplitTasks = ({ flag, geojsonFile, setGeojsonFile, customLineUpload, custo
                   splittedGeojson={dividedTaskGeojson}
                   uploadedOrDrawnGeojsonFile={drawnGeojson}
                   buildingExtractedGeojson={dataExtractGeojson}
-                  onModify={(geojson) => {
-                    handleCustomChange('drawnGeojson', geojson);
-                    dispatch(CreateProjectActions.SetDividedTaskGeojson(JSON.parse(geojson)));
-                    setGeojsonFile(null);
-                  }}
+                  onModify={
+                    toggleSplittedGeojsonEdit
+                      ? (geojson) => {
+                          handleCustomChange('drawnGeojson', geojson);
+                          dispatch(CreateProjectActions.SetDividedTaskGeojson(JSON.parse(geojson)));
+                          setGeojsonFile(null);
+                        }
+                      : null
+                  }
+                  // toggleSplittedGeojsonEdit
+                  hasEditUndo
                 />
               </div>
               {generateProjectLog ? (

diff --git a/src/frontend/src/components/createnewproject/validation/DataExtractValidation.tsx b/src/frontend/src/components/createnewproject/validation/DataExtractValidation.tsx
@@ -36,7 +36,6 @@ function DataExtractValidation(values: ProjectValues) {
     errors.customPolygonUpload = 'A GeoJSON file is required.';
   }
 
-  console.log(errors);
   return errors;
 }
 

diff --git a/src/frontend/src/hooks/Prompt.tsx b/src/frontend/src/hooks/Prompt.tsx
@@ -5,7 +5,6 @@ import { unstable_useBlocker as useBlocker } from 'react-router-dom';
 function Prompt(props) {
   const block = props.when;
   useBlocker(({ nextLocation }) => {
-    console.log(nextLocation, 'next');
     if (block && !pathNotToBlock.includes(nextLocation.pathname)) {
       return !window.confirm(props.message);
     }

diff --git a/src/frontend/src/shared/AssetModules.js b/src/frontend/src/shared/AssetModules.js
@@ -56,6 +56,8 @@ import {
   AccessTime as AccessTimeIcon,
   ImportExport as ImportExportIcon,
   Check as CheckIcon,
+  Undo as UndoIcon,
+  Timeline as TimelineIcon,
 } from '@mui/icons-material';
 import LockPng from '../assets/images/lock.png';
 import RedLockPng from '../assets/images/red-lock.png';
@@ -122,4 +124,6 @@ export default {
   AccessTimeIcon,
   ImportExportIcon,
   CheckIcon,
+  UndoIcon,
+  TimelineIcon,
 };
diff --git a/src/frontend/src/store/slices/CreateProjectSlice.ts b/src/frontend/src/store/slices/CreateProjectSlice.ts
@@ -49,6 +49,7 @@ export const initialState: CreateProjectStateTypes = {
   canSwitchCreateProjectSteps: false,
   isTasksGenerated: { divide_on_square: false, task_splitting_algorithm: false },
   isFgbFetching: false,
+  toggleSplittedGeojsonEdit: false,
 };
 
 const CreateProject = createSlice({
@@ -225,6 +226,9 @@ const CreateProject = createSlice({
       state.dataExtractGeojson = null;
       state.projectDetails = { ...action.payload, customLineUpload: null, customPolygonUpload: null };
     },
+    SetToggleSplittedGeojsonEdit(state, action) {
+      state.toggleSplittedGeojsonEdit = action.payload;
+    },
   },
 });
 

diff --git a/src/frontend/src/store/types/ICreateProject.ts b/src/frontend/src/store/types/ICreateProject.ts
@@ -35,6 +35,7 @@ export type CreateProjectStateTypes = {
   canSwitchCreateProjectSteps: boolean;
   isTasksGenerated: {};
   isFgbFetching: boolean;
+  toggleSplittedGeojsonEdit: boolean;
 };
 export type ValidateCustomFormResponse = {
   detail: { message: string; possible_reason: string };

diff --git a/src/frontend/src/views/NewDefineAreaMap.tsx b/src/frontend/src/views/NewDefineAreaMap.tsx
@@ -4,6 +4,7 @@ import { MapContainer as MapComponent } from '../components/MapComponent/OpenLay
 import LayerSwitcherControl from '../components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js';
 import { VectorLayer } from '../components/MapComponent/OpenLayersComponent/Layers';
 import { GeoJSONFeatureTypes } from '../store/types/ICreateProject';
+import MapControlComponent from '../components/createnewproject/MapControlComponent';
 
 type NewDefineAreaMapProps = {
   drawToggle?: boolean;
@@ -12,7 +13,8 @@ type NewDefineAreaMapProps = {
   buildingExtractedGeojson?: GeoJSONFeatureTypes;
   lineExtractedGeojson?: GeoJSONFeatureTypes;
   onDraw?: (geojson: any, area: number) => void;
-  onModify?: (geojson: any, area?: number) => void;
+  onModify?: ((geojson: any, area?: number) => void) | null;
+  hasEditUndo?: boolean;
 };
 const NewDefineAreaMap = ({
   drawToggle,
@@ -22,6 +24,7 @@ const NewDefineAreaMap = ({
   lineExtractedGeojson,
   onDraw,
   onModify,
+  hasEditUndo,
 }: NewDefineAreaMapProps) => {
   const { mapRef, map } = useOLMap({
     // center: fromLonLat([85.3, 27.7]),
@@ -43,6 +46,7 @@ const NewDefineAreaMap = ({
         }}
       >
         <LayerSwitcherControl />
+        <MapControlComponent map={map} hasEditUndo={hasEditUndo} />
         {splittedGeojson && (
           <VectorLayer
             geojson={splittedGeojson}