From 9a8d1563e5c8b4fb1f0a7d129621b6af5b2fcec4 Mon Sep 17 00:00:00 2001 From: Fabian Polakowski Date: Fri, 24 Jan 2025 14:34:28 +0100 Subject: [PATCH 01/10] initial TerraDraw setup --- package.json | 2 + .../MlFeatureDraw/MlFeatureDraw.stories.tsx | 35 +++++++++ .../MlFeatureDraw/MlFeatureDraw.tsx | 13 ++++ src/hooks/useFeatureDraw.tsx | 71 +++++++++++++++++++ yarn.lock | 10 +++ 5 files changed, 131 insertions(+) create mode 100644 src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx create mode 100644 src/components/MlFeatureDraw/MlFeatureDraw.tsx create mode 100644 src/hooks/useFeatureDraw.tsx diff --git a/package.json b/package.json index 8f73721e4..6f52932bc 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,8 @@ "react-redux": "^9.1.2", "redux": "^5.0.1", "redux-thunk": "^3.1.0", + "terra-draw": "^1.0.0", + "terra-draw-maplibre-gl-adapter": "^1.0.1", "three": "^0.161.0", "topojson-client": "^3.1.0", "uuid": "^9.0.1", diff --git a/src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx b/src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx new file mode 100644 index 000000000..58a94f09e --- /dev/null +++ b/src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import mapContextDecorator from '../../decorators/MapContextDecorator'; +import MlFeatureDraw from './MlFeatureDraw'; +import Sidebar from '../../ui_components/Sidebar'; +import useFeatureDraw from '../../hooks/useFeatureDraw'; +import { TerraDrawPolygonMode } from 'terra-draw'; + +const storyoptions = { + title: 'MapComponents/MlFeatureDraw', + component: MlFeatureDraw, + argTypes: {}, + decorators: mapContextDecorator, +}; + +export default storyoptions; +const Template = () => { + const { startDrawing, stopDrawing, isDrawing } = useFeatureDraw({ + mapId: 'map_1', + mode: [new TerraDrawPolygonMode()], + }); + return ( + <> + + + + + + ); +}; +export const DrawPolygon = Template.bind({}); +DrawPolygon.args = {}; diff --git a/src/components/MlFeatureDraw/MlFeatureDraw.tsx b/src/components/MlFeatureDraw/MlFeatureDraw.tsx new file mode 100644 index 000000000..c5b627e04 --- /dev/null +++ b/src/components/MlFeatureDraw/MlFeatureDraw.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import useFeatureDraw, { useFeatureDrawProps } from '../../hooks/useFeatureDraw'; + +const MlFeatureDraw: React.FC = (props) => { + useFeatureDraw({ + mapId: props.mapId, + mode: props.mode, + }); + + return <>; +}; + +export default MlFeatureDraw; diff --git a/src/hooks/useFeatureDraw.tsx b/src/hooks/useFeatureDraw.tsx new file mode 100644 index 000000000..9d0c2bb70 --- /dev/null +++ b/src/hooks/useFeatureDraw.tsx @@ -0,0 +1,71 @@ +import useMap from './useMap'; +import { useEffect, useRef, useState } from 'react'; +import { TerraDraw } from 'terra-draw'; +import { TerraDrawMapLibreGLAdapter } from 'terra-draw-maplibre-gl-adapter'; +import { TerraDrawBaseDrawMode } from 'terra-draw/dist/modes/base.mode'; + +export interface useFeatureDrawProps { + /** + * Id of the target MapLibre instance in mapContext + */ + mapId?: string; + /** + * Id of an existing layer in the mapLibre instance to help specify the layer order + * This layer will be visually beneath the layer with the "insertBeforeLayer" id. + */ + insertBeforeLayer?: string; + /** + * drawing mode + */ + mode: TerraDrawBaseDrawMode[]; +} + +const useFeatureDraw = (props: useFeatureDrawProps) => { + const draw = useRef(null); + const [isDrawing, setIsDrawing] = useState(false); + const mapHook = useMap({ + mapId: props.mapId, + waitForLayer: props.insertBeforeLayer, + }); + + const initializeDraw = () => { + if (mapHook.map && !draw.current) { + draw.current = new TerraDraw({ + adapter: new TerraDrawMapLibreGLAdapter(mapHook.map), + modes: props.mode, + }); + } + }; + + useEffect(() => { + initializeDraw(); + }, [mapHook.map, props.mode]); + + const setMode = (mode: string): void => { + if (draw.current) { + draw.current?.setMode(mode); + setIsDrawing(true); + } + }; + + const startDrawing = (mode: string): void => { + if (!draw.current) { + initializeDraw(); + } + if (draw.current) { + draw.current.start(); + setMode(mode); + } + }; + + const stopDrawing = (): void => { + if (draw.current) { + draw.current.stop(); + draw.current = null; + setIsDrawing(false); + } + }; + + return { startDrawing, stopDrawing, isDrawing }; +}; +export default useFeatureDraw; diff --git a/yarn.lock b/yarn.lock index f3f81b3a7..4205dd38d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15239,6 +15239,16 @@ tempy@^1.0.1: type-fest "^0.16.0" unique-string "^2.0.0" +terra-draw-maplibre-gl-adapter@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/terra-draw-maplibre-gl-adapter/-/terra-draw-maplibre-gl-adapter-1.0.1.tgz#1b85fbe3c50836e8e8b0bae796cc1ce018ebcca4" + integrity sha512-B5zM6OhOEwcYegNLP2HybOc+V0ZaQNYuSkOiAcGABV6ZVd5zZCX51GIXcAgOL07okcs1D+7a+4zCgqtD/fLgTg== + +terra-draw@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/terra-draw/-/terra-draw-1.0.0.tgz#ffd6339a8644ed66e589457bc22a670381ea95cd" + integrity sha512-LMD5wLHHSfkXOX0eGjhUV/Pnxedn5MvsKBvGOP6txCY1D1LAIVnIx1g+trTXfBHUjogDJj/vmswsGMD/5LtNKQ== + terser-webpack-plugin@^5.3.1, terser-webpack-plugin@^5.3.10: version "5.3.10" resolved "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz" From 69efed85d7bc08dc3cf21f39e2815b73f1fb788a Mon Sep 17 00:00:00 2001 From: Fabian Polakowski Date: Fri, 24 Jan 2025 17:04:34 +0100 Subject: [PATCH 02/10] add select/edit mode --- .../MlFeatureDraw/MlFeatureDraw.stories.tsx | 34 +++++++++++++++---- src/hooks/useFeatureDraw.tsx | 20 ++++++----- 2 files changed, 39 insertions(+), 15 deletions(-) diff --git a/src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx b/src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx index 58a94f09e..feed9640b 100644 --- a/src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx +++ b/src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx @@ -3,7 +3,8 @@ import mapContextDecorator from '../../decorators/MapContextDecorator'; import MlFeatureDraw from './MlFeatureDraw'; import Sidebar from '../../ui_components/Sidebar'; import useFeatureDraw from '../../hooks/useFeatureDraw'; -import { TerraDrawPolygonMode } from 'terra-draw'; +import { TerraDrawPolygonMode, TerraDrawSelectMode } from 'terra-draw'; +import DeleteIcon from '@mui/icons-material/Delete'; const storyoptions = { title: 'MapComponents/MlFeatureDraw', @@ -14,18 +15,39 @@ const storyoptions = { export default storyoptions; const Template = () => { - const { startDrawing, stopDrawing, isDrawing } = useFeatureDraw({ + const { startDrawing, stopDrawing, clearDrawing, isDrawing } = useFeatureDraw({ mapId: 'map_1', - mode: [new TerraDrawPolygonMode()], + mode: [ + new TerraDrawPolygonMode(), + new TerraDrawSelectMode({ + flags: { + polygon: { + feature: { + draggable: true, + rotateable: true, + scaleable: true, + coordinates: { + midpoints: true, + draggable: true, + deletable: true, + }, + }, + }, + }, + }), + ], }); return ( <> - + diff --git a/src/hooks/useFeatureDraw.tsx b/src/hooks/useFeatureDraw.tsx index 9d0c2bb70..8dd7f4557 100644 --- a/src/hooks/useFeatureDraw.tsx +++ b/src/hooks/useFeatureDraw.tsx @@ -42,17 +42,15 @@ const useFeatureDraw = (props: useFeatureDrawProps) => { }, [mapHook.map, props.mode]); const setMode = (mode: string): void => { - if (draw.current) { - draw.current?.setMode(mode); - setIsDrawing(true); - } + draw.current?.setMode(mode); + setIsDrawing(mode !== 'select'); }; const startDrawing = (mode: string): void => { if (!draw.current) { initializeDraw(); } - if (draw.current) { + if (draw.current && !isDrawing) { draw.current.start(); setMode(mode); } @@ -60,12 +58,16 @@ const useFeatureDraw = (props: useFeatureDrawProps) => { const stopDrawing = (): void => { if (draw.current) { - draw.current.stop(); - draw.current = null; - setIsDrawing(false); + setMode('select'); + } + }; + + const clearDrawing = (): void => { + if (draw.current) { + draw.current.clear(); } }; - return { startDrawing, stopDrawing, isDrawing }; + return { startDrawing, stopDrawing, clearDrawing, isDrawing }; }; export default useFeatureDraw; From 3d42ff1a2facea9acafad0622d26e820dfcb67eb Mon Sep 17 00:00:00 2001 From: Fabian Polakowski Date: Fri, 24 Jan 2025 17:31:27 +0100 Subject: [PATCH 03/10] bugfixes --- .../MlFeatureDraw/MlFeatureDraw.stories.tsx | 59 ++++++++++++------- src/hooks/useFeatureDraw.tsx | 54 ++++++++++++----- 2 files changed, 77 insertions(+), 36 deletions(-) diff --git a/src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx b/src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx index feed9640b..01fd0b7ed 100644 --- a/src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx +++ b/src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx @@ -3,7 +3,7 @@ import mapContextDecorator from '../../decorators/MapContextDecorator'; import MlFeatureDraw from './MlFeatureDraw'; import Sidebar from '../../ui_components/Sidebar'; import useFeatureDraw from '../../hooks/useFeatureDraw'; -import { TerraDrawPolygonMode, TerraDrawSelectMode } from 'terra-draw'; +import { TerraDrawPointMode, TerraDrawPolygonMode, TerraDrawSelectMode } from 'terra-draw'; import DeleteIcon from '@mui/icons-material/Delete'; const storyoptions = { @@ -14,28 +14,10 @@ const storyoptions = { }; export default storyoptions; -const Template = () => { +const Template = (args) => { const { startDrawing, stopDrawing, clearDrawing, isDrawing } = useFeatureDraw({ mapId: 'map_1', - mode: [ - new TerraDrawPolygonMode(), - new TerraDrawSelectMode({ - flags: { - polygon: { - feature: { - draggable: true, - rotateable: true, - scaleable: true, - coordinates: { - midpoints: true, - draggable: true, - deletable: true, - }, - }, - }, - }, - }), - ], + mode: args.mode, }); return ( <> @@ -54,4 +36,37 @@ const Template = () => { ); }; export const DrawPolygon = Template.bind({}); -DrawPolygon.args = {}; +DrawPolygon.args = { + mode: [ + new TerraDrawPolygonMode(), + new TerraDrawSelectMode({ + flags: { + polygon: { + feature: { + draggable: true, + rotateable: true, + scaleable: true, + coordinates: { + midpoints: true, + draggable: true, + deletable: true, + }, + }, + }, + }, + }), + ], +}; +export const DrawPoint = Template.bind({}); +DrawPoint.args = { + mode: [ + new TerraDrawPointMode(), + new TerraDrawSelectMode({ + flags: { + point: { + feature: { draggable: true, deletable: true }, + }, + }, + }), + ], +}; diff --git a/src/hooks/useFeatureDraw.tsx b/src/hooks/useFeatureDraw.tsx index 8dd7f4557..ead586b52 100644 --- a/src/hooks/useFeatureDraw.tsx +++ b/src/hooks/useFeatureDraw.tsx @@ -28,31 +28,56 @@ const useFeatureDraw = (props: useFeatureDrawProps) => { waitForLayer: props.insertBeforeLayer, }); - const initializeDraw = () => { - if (mapHook.map && !draw.current) { - draw.current = new TerraDraw({ - adapter: new TerraDrawMapLibreGLAdapter(mapHook.map), - modes: props.mode, - }); + const cleanup = () => { + if (draw.current) { + // Proper cleanup sequence + draw.current.stop(); + draw.current.clear(); + draw.current = null; } + setIsDrawing(false); + }; + + const initializeDraw = () => { + if (!mapHook.map) return; + // Clean up any existing instance first + cleanup(); + draw.current = new TerraDraw({ + adapter: new TerraDrawMapLibreGLAdapter(mapHook.map), + modes: props.mode, + }); }; useEffect(() => { initializeDraw(); + return () => cleanup(); }, [mapHook.map, props.mode]); const setMode = (mode: string): void => { - draw.current?.setMode(mode); - setIsDrawing(mode !== 'select'); - }; + if (!draw.current) return; - const startDrawing = (mode: string): void => { - if (!draw.current) { - initializeDraw(); + try { + draw.current.setMode(mode); + setIsDrawing(mode !== 'select'); + } catch (error) { + console.error('Error setting mode:', error); + setIsDrawing(false); } - if (draw.current && !isDrawing) { - draw.current.start(); + }; + + const startDrawing = (mode: string) => { + if (!draw.current) initializeDraw(); + if (!draw.current) return; + + try { + // Start TerraDraw if not already started + if (!isDrawing) { + draw.current.start(); + } setMode(mode); + } catch (error) { + console.error('Error starting drawing:', error); + cleanup(); } }; @@ -65,6 +90,7 @@ const useFeatureDraw = (props: useFeatureDrawProps) => { const clearDrawing = (): void => { if (draw.current) { draw.current.clear(); + initializeDraw(); } }; From d024166db03878024d65d3436062ed64acd38eed Mon Sep 17 00:00:00 2001 From: Fabian Polakowski Date: Fri, 24 Jan 2025 18:06:46 +0100 Subject: [PATCH 04/10] add all feature types --- .../MlFeatureDraw/MlFeatureDraw.stories.tsx | 199 ++++++++++++++---- 1 file changed, 158 insertions(+), 41 deletions(-) diff --git a/src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx b/src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx index 01fd0b7ed..aa929f5db 100644 --- a/src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx +++ b/src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx @@ -3,70 +3,187 @@ import mapContextDecorator from '../../decorators/MapContextDecorator'; import MlFeatureDraw from './MlFeatureDraw'; import Sidebar from '../../ui_components/Sidebar'; import useFeatureDraw from '../../hooks/useFeatureDraw'; -import { TerraDrawPointMode, TerraDrawPolygonMode, TerraDrawSelectMode } from 'terra-draw'; +import { + TerraDrawPointMode, + TerraDrawLineStringMode, + TerraDrawPolygonMode, + TerraDrawRectangleMode, + TerraDrawFreehandMode, + TerraDrawCircleMode, + TerraDrawSelectMode, +} from 'terra-draw'; import DeleteIcon from '@mui/icons-material/Delete'; const storyoptions = { title: 'MapComponents/MlFeatureDraw', component: MlFeatureDraw, - argTypes: {}, + argTypes: { + modeType: { + control: { + type: 'select', + options: ['point', 'linestring', 'polygon', 'rectangle', 'freehand', 'circle'], + }, + defaultValue: 'polygon', + }, + }, decorators: mapContextDecorator, }; export default storyoptions; -const Template = (args) => { + +const Template = (args: { modeType: string }) => { + const modes = React.useMemo(() => { + let baseMode; + let selectConfig; + + switch (args.modeType) { + case 'point': + baseMode = new TerraDrawPointMode(); + selectConfig = { + flags: { + point: { + feature: { draggable: true }, + }, + }, + }; + break; + + case 'linestring': + baseMode = new TerraDrawLineStringMode(); + selectConfig = { + flags: { + linestring: { + feature: { + draggable: true, + coordinates: { + midpoints: true, + draggable: true, + deletable: true, + }, + }, + }, + }, + }; + break; + + case 'polygon': + baseMode = new TerraDrawPolygonMode(); + selectConfig = { + flags: { + polygon: { + feature: { + draggable: true, + rotateable: true, + scaleable: true, + coordinates: { + midpoints: true, + draggable: true, + deletable: true, + }, + }, + }, + }, + }; + break; + + case 'rectangle': + baseMode = new TerraDrawRectangleMode(); + selectConfig = { + flags: { + polygon: { + // Rectangles are typically stored as polygons + feature: { + draggable: true, + rotateable: true, + scaleable: true, + coordinates: { + midpoints: true, + draggable: true, + deletable: true, + }, + }, + }, + }, + }; + break; + + case 'freehand': + baseMode = new TerraDrawFreehandMode(); + selectConfig = { + flags: { + polygon: { + // Freehand creates polygon-like features + feature: { + draggable: true, + coordinates: { + midpoints: true, + draggable: true, + deletable: true, + }, + }, + }, + }, + }; + break; + + case 'circle': + baseMode = new TerraDrawCircleMode(); + selectConfig = { + flags: { + polygon: { + // Circles are often represented as polygons + feature: { + draggable: true, + rotateable: true, + scaleable: true, + }, + }, + }, + }; + break; + + default: + throw new Error(`Unknown mode type: ${args.modeType}`); + } + + return [baseMode, new TerraDrawSelectMode(selectConfig)]; + }, [args.modeType]); + const { startDrawing, stopDrawing, clearDrawing, isDrawing } = useFeatureDraw({ mapId: 'map_1', - mode: args.mode, + mode: modes, }); return ( <> - ); }; -export const DrawPolygon = Template.bind({}); -DrawPolygon.args = { - mode: [ - new TerraDrawPolygonMode(), - new TerraDrawSelectMode({ - flags: { - polygon: { - feature: { - draggable: true, - rotateable: true, - scaleable: true, - coordinates: { - midpoints: true, - draggable: true, - deletable: true, - }, - }, - }, - }, - }), - ], -}; + export const DrawPoint = Template.bind({}); -DrawPoint.args = { - mode: [ - new TerraDrawPointMode(), - new TerraDrawSelectMode({ - flags: { - point: { - feature: { draggable: true, deletable: true }, - }, - }, - }), - ], -}; +DrawPoint.args = { modeType: 'point' }; + +export const DrawLine = Template.bind({}); +DrawLine.args = { modeType: 'linestring' }; + +export const DrawPolygon = Template.bind({}); +DrawPolygon.args = { modeType: 'polygon' }; + +export const DrawRectangle = Template.bind({}); +DrawRectangle.args = { modeType: 'rectangle' }; + +export const DrawFreehand = Template.bind({}); +DrawFreehand.args = { modeType: 'freehand' }; + +export const DrawCircle = Template.bind({}); +DrawCircle.args = { modeType: 'circle' }; From e6df563d3c5627f86e452081aba72dbb10f785b4 Mon Sep 17 00:00:00 2001 From: Fabian Polakowski Date: Sun, 26 Jan 2025 17:40:41 +0100 Subject: [PATCH 05/10] remove comments --- src/hooks/useFeatureDraw.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/hooks/useFeatureDraw.tsx b/src/hooks/useFeatureDraw.tsx index ead586b52..93436f6ae 100644 --- a/src/hooks/useFeatureDraw.tsx +++ b/src/hooks/useFeatureDraw.tsx @@ -30,7 +30,6 @@ const useFeatureDraw = (props: useFeatureDrawProps) => { const cleanup = () => { if (draw.current) { - // Proper cleanup sequence draw.current.stop(); draw.current.clear(); draw.current = null; @@ -70,7 +69,6 @@ const useFeatureDraw = (props: useFeatureDrawProps) => { if (!draw.current) return; try { - // Start TerraDraw if not already started if (!isDrawing) { draw.current.start(); } From 80d69529a6708f0829eb93a19bfd03ba9903882e Mon Sep 17 00:00:00 2001 From: Fabian Polakowski Date: Fri, 31 Jan 2025 11:23:47 +0100 Subject: [PATCH 06/10] remove comments --- src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx b/src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx index aa929f5db..5d9de5419 100644 --- a/src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx +++ b/src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx @@ -91,7 +91,6 @@ const Template = (args: { modeType: string }) => { selectConfig = { flags: { polygon: { - // Rectangles are typically stored as polygons feature: { draggable: true, rotateable: true, @@ -112,7 +111,6 @@ const Template = (args: { modeType: string }) => { selectConfig = { flags: { polygon: { - // Freehand creates polygon-like features feature: { draggable: true, coordinates: { @@ -131,7 +129,6 @@ const Template = (args: { modeType: string }) => { selectConfig = { flags: { polygon: { - // Circles are often represented as polygons feature: { draggable: true, rotateable: true, From 3dda246286fe650b448bdce82be927dd21c899cb Mon Sep 17 00:00:00 2001 From: Fabian Polakowski Date: Fri, 31 Jan 2025 14:18:03 +0100 Subject: [PATCH 07/10] add console logs to debug --- src/hooks/useFeatureDraw.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/hooks/useFeatureDraw.tsx b/src/hooks/useFeatureDraw.tsx index 93436f6ae..54df78357 100644 --- a/src/hooks/useFeatureDraw.tsx +++ b/src/hooks/useFeatureDraw.tsx @@ -48,8 +48,12 @@ const useFeatureDraw = (props: useFeatureDrawProps) => { }; useEffect(() => { + console.log('Initializing TerraDraw'); initializeDraw(); - return () => cleanup(); + return () => { + console.log('Cleanup TerraDraw'); + cleanup(); + }; }, [mapHook.map, props.mode]); const setMode = (mode: string): void => { @@ -69,7 +73,7 @@ const useFeatureDraw = (props: useFeatureDrawProps) => { if (!draw.current) return; try { - if (!isDrawing) { + if (!draw.current.enabled) { draw.current.start(); } setMode(mode); From c793a0333f8d5ddc3a471f032ef7df991736c12d Mon Sep 17 00:00:00 2001 From: Fabian Polakowski Date: Fri, 31 Jan 2025 15:41:25 +0100 Subject: [PATCH 08/10] fix storyswitching --- src/hooks/useFeatureDraw.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/hooks/useFeatureDraw.tsx b/src/hooks/useFeatureDraw.tsx index 54df78357..207d1f42c 100644 --- a/src/hooks/useFeatureDraw.tsx +++ b/src/hooks/useFeatureDraw.tsx @@ -31,7 +31,6 @@ const useFeatureDraw = (props: useFeatureDrawProps) => { const cleanup = () => { if (draw.current) { draw.current.stop(); - draw.current.clear(); draw.current = null; } setIsDrawing(false); @@ -39,7 +38,6 @@ const useFeatureDraw = (props: useFeatureDrawProps) => { const initializeDraw = () => { if (!mapHook.map) return; - // Clean up any existing instance first cleanup(); draw.current = new TerraDraw({ adapter: new TerraDrawMapLibreGLAdapter(mapHook.map), @@ -92,7 +90,6 @@ const useFeatureDraw = (props: useFeatureDrawProps) => { const clearDrawing = (): void => { if (draw.current) { draw.current.clear(); - initializeDraw(); } }; From eccb5bd89a639607504b43caad1758984c208ad6 Mon Sep 17 00:00:00 2001 From: Fabian Polakowski Date: Sun, 2 Feb 2025 21:12:15 +0100 Subject: [PATCH 09/10] button styling --- .../MlFeatureDraw/MlFeatureDraw.stories.tsx | 30 +++++++++++++------ 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx b/src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx index 5d9de5419..209214a07 100644 --- a/src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx +++ b/src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx @@ -13,6 +13,10 @@ import { TerraDrawSelectMode, } from 'terra-draw'; import DeleteIcon from '@mui/icons-material/Delete'; +import ButtonGroup from '@mui/material/ButtonGroup'; +import EditIcon from '@mui/icons-material/Edit'; +import { Button, Tooltip } from '@mui/material'; +import DrawIcon from '@mui/icons-material/Draw'; const storyoptions = { title: 'MapComponents/MlFeatureDraw', @@ -153,15 +157,23 @@ const Template = (args: { modeType: string }) => { return ( <> - - - + + + + + + + ); From 483b864d3f4264408cf74cfd66dd688153a98000 Mon Sep 17 00:00:00 2001 From: Fabian Polakowski Date: Fri, 7 Feb 2025 12:23:42 +0100 Subject: [PATCH 10/10] fix edit geoms --- src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx | 8 +++----- src/hooks/useFeatureDraw.tsx | 3 +-- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx b/src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx index 209214a07..aeaf2274a 100644 --- a/src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx +++ b/src/components/MlFeatureDraw/MlFeatureDraw.stories.tsx @@ -94,7 +94,7 @@ const Template = (args: { modeType: string }) => { baseMode = new TerraDrawRectangleMode(); selectConfig = { flags: { - polygon: { + rectangle: { feature: { draggable: true, rotateable: true, @@ -114,7 +114,7 @@ const Template = (args: { modeType: string }) => { baseMode = new TerraDrawFreehandMode(); selectConfig = { flags: { - polygon: { + freehand: { feature: { draggable: true, coordinates: { @@ -132,11 +132,9 @@ const Template = (args: { modeType: string }) => { baseMode = new TerraDrawCircleMode(); selectConfig = { flags: { - polygon: { + circle: { feature: { draggable: true, - rotateable: true, - scaleable: true, }, }, }, diff --git a/src/hooks/useFeatureDraw.tsx b/src/hooks/useFeatureDraw.tsx index 207d1f42c..19eebd80b 100644 --- a/src/hooks/useFeatureDraw.tsx +++ b/src/hooks/useFeatureDraw.tsx @@ -46,10 +46,8 @@ const useFeatureDraw = (props: useFeatureDrawProps) => { }; useEffect(() => { - console.log('Initializing TerraDraw'); initializeDraw(); return () => { - console.log('Cleanup TerraDraw'); cleanup(); }; }, [mapHook.map, props.mode]); @@ -83,6 +81,7 @@ const useFeatureDraw = (props: useFeatureDrawProps) => { const stopDrawing = (): void => { if (draw.current) { + console.log('select mode'); setMode('select'); } };