Design/sketch tool (#222)

lenaghub · web-flow · commit 4fce341cdbce · 2025-05-05T11:10:09.000+02:00
Co-authored-by: jannik brack &lt;jannik.brack@wheregroup.com&gt;
Co-authored-by: Martin Alzueta &lt;martin.alzueta@wheregroup.com&gt;

Errors fixed tests done by Martin and myself.
diff --git a/public/thumbnails/MlSketchTool.png b/public/thumbnails/MlSketchTool.png
diff --git a/src/components/MlGeoJsonLayer/util/getDefaultPaintPropsByType.ts b/src/components/MlGeoJsonLayer/util/getDefaultPaintPropsByType.ts
@@ -13,7 +13,7 @@ const getDefaultPaintPropsByType = (
 				// 'fill-color': 'rgba(10,240,256,0.6)',
 				// 'fill-outline-color': 'rgba(20,230,256,0.8)',
 				'fill-color': '#009EE0',
-				'fill-outline-color': '#009EE0',
+				'fill-outline-color': '#009EE0'
 			};
 		case 'line':
 			if (defaultPaintOverrides?.line) {
@@ -25,7 +25,7 @@ const getDefaultPaintPropsByType = (
 				// 'line-width': 5,
 				// 'line-blur': 0,
 				'line-color': '#009EE0',
-				'line-width': 5,
+				'line-width': 4,
 				'line-blur': 0,
 			};
 		case 'circle':
@@ -41,6 +41,7 @@ const getDefaultPaintPropsByType = (
 				'circle-stroke-color': '#fff',
 				'circle-stroke-width': 2,
 				'circle-radius': 5,
+		
 			};
 		default:
 			return {};
diff --git a/src/components/MlSketchTool/MlSketchTool.stories.tsx b/src/components/MlSketchTool/MlSketchTool.stories.tsx
@@ -42,9 +42,11 @@ const Template = () => {
 
 const catalgoueTemplate = () => {
 	// const mediaIsMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('lg'));
+	// const mediaIsMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('lg'));
 
 	const [openSidebar, setOpenSidebar] = useState(true);
 	const [instructionText, setInstructionText] = useState('Select a sketch tool.');
+	const [showInstruction, setShowInstruction] = useState(true);
 
 	const getInstructionText = (drawMode?: keyof MapboxDraw.Modes, selectedGeoJson?: Feature) => {
 		if (drawMode === 'simple_select' && selectedGeoJson) {
@@ -81,29 +83,33 @@ const catalgoueTemplate = () => {
 			/>
 			<Sidebar open={openSidebar} setOpen={setOpenSidebar} name={'Sketch Tool'}>
 				<MlSketchTool
+					showInstruction={showInstruction}
+					onShowInstructionChange={setShowInstruction}
 					onChange={(state) => {
 						const { drawMode, selectedGeoJson } = state;
 						setInstructionText(getInstructionText(drawMode, selectedGeoJson));
 					}}
 				/>
 			</Sidebar>
 
-			<Paper
-				sx={{
-					position: 'fixed',
-					bottom: '25px',
-					left: '50%',
-					padding: '10px',
-					zIndex: 101,
-				}}
-			>
-				<Typography>
-					{/* {mediaIsMobile
+			{showInstruction && (
+				<Paper
+					sx={{
+						position: 'fixed',
+						bottom: '25px',
+						left: '50%',
+						padding: '10px',
+						zIndex: 101,
+					}}
+				>
+					<Typography>
+						{/* {mediaIsMobile
 						? 'Zum Beenden erneut auf denselben Punkt klicken.'
 						: 'Die Zeichnung kann beendet werden, indem erneut auf den zuletzt gezeichneten Punkt geklickt wird.'} */}
-					{instructionText}
-				</Typography>
-			</Paper>
+						{instructionText}
+					</Typography>
+				</Paper>
+			)}
 		</>
 	);
 };
@@ -113,4 +119,4 @@ ExampleConfig.parameters = {};
 ExampleConfig.args = {};
 
 export const CatalogueDemo = catalgoueTemplate.bind({});
-CatalogueDemo.args = {};
+CatalogueDemo.args = {};
diff --git a/src/components/MlSketchTool/MlSketchTool.tsx b/src/components/MlSketchTool/MlSketchTool.tsx
@@ -15,7 +15,7 @@ import GpsFixedIcon from '@mui/icons-material/GpsFixed';
 import { Feature } from 'geojson';
 import { LngLatLike } from 'maplibre-gl';
 import { SxProps } from '@mui/system/styleFunctionSx/styleFunctionSx';
-import { Button, Theme } from '@mui/material';
+import { Button, Checkbox, FormControlLabel, FormGroup, Theme, Typography } from '@mui/material';
 import ScatterPlotIcon from '@mui/icons-material/ScatterPlot';
 import PolylineIcon from '@mui/icons-material/Polyline';
 
@@ -45,6 +45,14 @@ export interface MlSketchToolProps {
 	 * First parameter contains all geometries in the `geometries` prop.
 	 */
 	onChange?: (para: SketchStateType) => void;
+	/**
+	 * Determines whether the instruction text should be shown.
+	 */
+	showInstruction?: boolean;
+	/**
+	 * Callback function triggered when the "Show instructions" checkbox is toggled.
+	 */
+	onShowInstructionChange?: (value: boolean) => void;
 }
 
 type SketchStateType = {
@@ -136,6 +144,10 @@ const MlSketchTool = (props: MlSketchToolProps) => {
 		});
 	};
 
+	const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		props.onShowInstructionChange?.(event.target.checked);
+	};
+
 	const SketchToolButtons = () => {
 		return (
 			<>
@@ -194,6 +206,21 @@ const MlSketchTool = (props: MlSketchToolProps) => {
 				</ButtonGroup>
 			</Box>
 
+			<Box sx={{ marginTop: '10px' }}>
+				<FormGroup>
+					<FormControlLabel
+						control={
+							<Checkbox
+								size="small"
+								checked={props.showInstruction}
+								onChange={handleCheckboxChange}
+							/>
+						}
+						label="Show instructions"
+					/>
+				</FormGroup>
+			</Box>
+
 			{sketchState.drawMode && (
 				<MlFeatureEditor
 					mode={sketchState.drawMode}
@@ -268,7 +295,7 @@ const MlSketchTool = (props: MlSketchToolProps) => {
 			)}
 
 			<List sx={{ zIndex: 105, marginBottom: '-10px' }}>
-				{sketchState.geometries.map((el) => (
+				{sketchState.geometries.map((el, index) => (
 					<>
 						<Box key={el.id} sx={{ display: 'flex', flexDirection: 'column' }}>
 							<br />
@@ -287,6 +314,50 @@ const MlSketchTool = (props: MlSketchToolProps) => {
 									setHoveredGeometry(undefined);
 								}}
 							>
+								{/* Input field for user-defined name */}
+								{!el.properties?.customName && (
+									<input
+										type="text"
+										value={el.properties?.name || ''}
+										placeholder="Assign name"
+										onChange={(e) => {
+											const newName = e.target.value;
+											setSketchState((_sketchState) => {
+												const updatedGeometries = [..._sketchState.geometries];
+												if (!updatedGeometries[index].properties) {
+													updatedGeometries[index].properties = {};
+												}
+												updatedGeometries[index].properties!.name = newName;
+												return {
+													..._sketchState,
+													geometries: updatedGeometries,
+												};
+											});
+										}}
+										style={{
+											padding: '5px',
+											border: '1px solid #ccc',
+											borderRadius: '4px',
+											outline: 'none',
+										}}
+										onFocus={(e) => (e.target.style.borderColor = '#009ee0')}
+										onBlur={(e) => {
+											e.target.style.borderColor = '#ccc';
+											setSketchState((_sketchState) => {
+												const updatedGeometries = [..._sketchState.geometries];
+												if (!updatedGeometries[index].properties) {
+													updatedGeometries[index].properties = {};
+												}
+												updatedGeometries[index].properties!.customName = true;
+												return {
+													..._sketchState,
+													geometries: updatedGeometries,
+												};
+											});
+										}}
+									/>
+								)}
+
 								{/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
 								{/* @ts-ignore-next-line */}
 								<LayerListItem
@@ -303,7 +374,30 @@ const MlSketchTool = (props: MlSketchToolProps) => {
 										/>
 									}
 									type={'layer'}
-									name={String(el.id)}
+									name={
+										<Typography
+											onClick={() => {
+												setSketchState((_sketchState) => {
+													const updatedGeometries = [..._sketchState.geometries];
+													if (!updatedGeometries[index].properties) {
+														updatedGeometries[index].properties = {};
+													}
+													updatedGeometries[index].properties!.customName = false;
+													return {
+														..._sketchState,
+														geometries: updatedGeometries,
+													};
+												});
+											}}
+											sx={{
+												cursor: 'pointer',
+												overflow: 'hidden',
+												whiteSpace: 'nowrap',
+											}}
+										>
+											{el.properties?.name || String(el.id)}
+										</Typography>
+									}
 									description={el.geometry.type}
 								></LayerListItem>
 								<Box
diff --git a/src/hooks/useFeatureEditor/utils/FeatureEditorStyle.tsx b/src/hooks/useFeatureEditor/utils/FeatureEditorStyle.tsx
@@ -1,4 +1,5 @@
 import { Theme, useMediaQuery } from '@mui/material';
+
 function featureEditorStyle() {
 	const mediaIsMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
 
@@ -78,8 +79,7 @@ function featureEditorStyle() {
 			},
 			paint: {
 				'line-color': '#009EE0',
-				'line-width': 10,
-				'line-opacity': 0.2,
+				'line-width': 4,
 			},
 		},
 		{
@@ -234,4 +234,5 @@ function featureEditorStyle() {
 	];
 	return featureEditorStyle;
 }
+
 export default featureEditorStyle;
diff --git a/src/ui_components/LayerList/LayerListFolder.tsx b/src/ui_components/LayerList/LayerListFolder.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { ReactNode, useMemo, useState } from 'react';
 import { Box, styled } from '@mui/system';
 import { Checkbox, IconButton, List, ListItem, ListItemIcon, ListItemText } from '@mui/material';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
@@ -30,7 +30,7 @@ const ListStyled = styled(List)({
 
 interface LayerListFolderProps {
 	visible: boolean;
-	name?: string;
+	name?: string | ReactNode;
 	children: JSX.Element | JSX.Element[];
 	setVisible?: (visible: boolean | ((val: unknown) => boolean)) => void;
 }
diff --git a/src/ui_components/LayerList/LayerListItem.tsx b/src/ui_components/LayerList/LayerListItem.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 import { LayerSpecification } from 'maplibre-gl';
 import { IconButton, ListItemText, styled, SxProps } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -28,7 +28,7 @@ interface LayerListItemProps {
 	visible: boolean;
 	configurable: boolean;
 	type?: 'background' | 'background-labels' | 'layer' | 'wms-layer' | 'vector-tile-layer';
-	name: string;
+	name: string | ReactNode;
 	description?: string;
 	setLayerState?: (state: unknown) => void;
 	showDeleteButton?: boolean;
