toggle button on map for better usage

src/App.module.css

@@ -188,3 +188,20 @@
 .sidebarOpenButton:hover svg {
     fill: black;
 }
+
+.drawIcon {
+    position: absolute;
+    right: 62px;
+    top: 10px;
+    background-color: white;
+
+    padding: 4px;
+    width: 34px;
+    height: 34px;
+}
+
+.drawIcon svg {
+    color: gray;
+    width: 100%;
+    height: 100%;
+}

src/App.tsx

@@ -43,6 +43,9 @@ import PlainButton from '@/PlainButton'
 import useAreasLayer from '@/layers/UseAreasLayer'
 import useExternalMVTLayer from '@/layers/UseExternalMVTLayer'
 import LocationButton from '@/map/LocationButton'
+import DrawIcon from './map/gesture.svg'
+import Dispatcher from '@/stores/Dispatcher'
+import { DrawHandfreeQueryPoints, ToggleRoutingGraph } from '@/actions/Actions'
 
 export const POPUP_CONTAINER_ID = 'popup-container'
 export const SIDEBAR_CONTENT_ID = 'sidebar-content'
@@ -105,7 +108,13 @@ export default function App() {
     useAreasLayer(map, settings.drawAreasEnabled, query.customModelStr, query.customModelEnabled)
     useRoutingGraphLayer(map, mapOptions.routingGraphEnabled)
     useUrbanDensityLayer(map, mapOptions.urbanDensityEnabled)
-    usePathsLayer(map, route.routingResult.paths, route.selectedPath, query.queryPoints)
+    usePathsLayer(
+        map,
+        route.routingResult.paths,
+        route.selectedPath,
+        query.queryPoints,
+        settings.drawHandfreeQueryPointsEnabled
+    )
     useQueryPointsLayer(map, query.queryPoints)
     usePathDetailsLayer(map, pathDetails)
     const isSmallScreen = useMediaQuery({ query: '(max-width: 44rem)' })
@@ -123,6 +132,7 @@ export default function App() {
                         error={error}
                         encodedValues={info.encoded_values}
                         drawAreas={settings.drawAreasEnabled}
+                        drawHandfreeQueryPoints={settings.drawHandfreeQueryPointsEnabled}
                     />
                 ) : (
                     <LargeScreenLayout
@@ -133,6 +143,7 @@ export default function App() {
                         error={error}
                         encodedValues={info.encoded_values}
                         drawAreas={settings.drawAreasEnabled}
+                        drawHandfreeQueryPoints={settings.drawHandfreeQueryPointsEnabled}
                     />
                 )}
             </div>
@@ -148,9 +159,19 @@ interface LayoutProps {
     error: ErrorStoreState
     encodedValues: object[]
     drawAreas: boolean
+    drawHandfreeQueryPoints: boolean
 }
 
-function LargeScreenLayout({ query, route, map, error, mapOptions, encodedValues, drawAreas }: LayoutProps) {
+function LargeScreenLayout({
+    query,
+    route,
+    map,
+    error,
+    mapOptions,
+    encodedValues,
+    drawAreas,
+    drawHandfreeQueryPoints,
+}: LayoutProps) {
     const [showSidebar, setShowSidebar] = useState(true)
     const [showCustomModelBox, setShowCustomModelBox] = useState(false)
     return (
@@ -200,6 +221,13 @@ function LargeScreenLayout({ query, route, map, error, mapOptions, encodedValues
             <div className={styles.popupContainer} id={POPUP_CONTAINER_ID} />
             <div className={styles.onMapRightSide}>
                 <MapOptions {...mapOptions} />
+                <div
+                    style={drawHandfreeQueryPoints ? { backgroundColor: 'black' } : {}}
+                    className={styles.drawIcon}
+                    onClick={e => Dispatcher.dispatch(new DrawHandfreeQueryPoints(!drawHandfreeQueryPoints))}
+                >
+                    <DrawIcon />
+                </div>
                 <LocationButton queryPoints={query.queryPoints} />
             </div>
             <div className={styles.map}>
@@ -213,7 +241,16 @@ function LargeScreenLayout({ query, route, map, error, mapOptions, encodedValues
     )
 }
 
-function SmallScreenLayout({ query, route, map, error, mapOptions, encodedValues, drawAreas }: LayoutProps) {
+function SmallScreenLayout({
+    query,
+    route,
+    map,
+    error,
+    mapOptions,
+    encodedValues,
+    drawAreas,
+    drawHandfreeQueryPoints,
+}: LayoutProps) {
     return (
         <>
             <div className={styles.smallScreenSidebar}>
@@ -231,6 +268,13 @@ function SmallScreenLayout({ query, route, map, error, mapOptions, encodedValues
             <div className={styles.smallScreenMapOptions}>
                 <div className={styles.onMapRightSide}>
                     <MapOptions {...mapOptions} />
+                    <div
+                        style={drawHandfreeQueryPoints ? { backgroundColor: 'black' } : {}}
+                        className={styles.drawIcon}
+                        onClick={e => Dispatcher.dispatch(new DrawHandfreeQueryPoints(!drawHandfreeQueryPoints))}
+                    >
+                        <DrawIcon />
+                    </div>
                     <LocationButton queryPoints={query.queryPoints} />
                 </div>
             </div>

src/actions/Actions.ts

@@ -240,7 +240,15 @@ export class InstructionClicked implements Action {
 
 export class ToggleDistanceUnits implements Action {}
 
-export class DrawAreas implements Action {
+export class DrawCustomModelAreas implements Action {
+    readonly enabled: boolean
+
+    constructor(enabled: boolean) {
+        this.enabled = enabled
+    }
+}
+
+export class DrawHandfreeQueryPoints implements Action {
     readonly enabled: boolean
 
     constructor(enabled: boolean) {

src/api/Api.ts

@@ -229,7 +229,7 @@ export class ApiImpl implements Api {
         const routeNumber = this.routeCounter++
 
         this.mapMatch(args)
-        // this.route(args)
+            // this.route(args)
             .then(result => {
                 if (routeNumber > this.lastRouteNumber) {
                     this.lastRouteNumber = routeNumber

src/layers/UsePathsLayer.tsx

@@ -7,7 +7,7 @@ import VectorSource from 'ol/source/Vector'
 import { GeoJSON } from 'ol/format'
 import { Stroke, Style } from 'ol/style'
 import { fromLonLat } from 'ol/proj'
-import { Draw, Select } from 'ol/interaction'
+import { Draw, Modify, Select, Snap } from 'ol/interaction'
 import { click, primaryAction } from 'ol/events/condition'
 import Dispatcher from '@/stores/Dispatcher'
 import { SetQueryPoints, SetSelectedPath } from '@/actions/Actions'
@@ -22,10 +22,18 @@ const selectedPathLayerKey = 'selectedPathLayer'
 const accessNetworkLayerKey = 'accessNetworkLayer'
 const handDrawQueryPointsLayerKey = 'handDrawQueryPointsLayer'
 
-export default function usePathsLayer(map: Map, paths: Path[], selectedPath: Path, queryPoints: QueryPoint[]) {
+export default function usePathsLayer(
+    map: Map,
+    paths: Path[],
+    selectedPath: Path,
+    queryPoints: QueryPoint[],
+    drawFreehandQueryPoints: boolean
+) {
     useEffect(() => {
-        removeHandDrawQueryPointsLayers(map)
-        addHandDrawQueryPointLayer(map)
+        removeDrawHandfreeQueryPointsLayers(map)
+
+        if (drawFreehandQueryPoints) addDrawFreehandQueryPointsLayer(map)
+        else removeDrawHandfreeQueryPointsLayers(map)
 
         removeCurrentPathLayers(map)
         addUnselectedPathsLayer(
@@ -36,9 +44,9 @@ export default function usePathsLayer(map: Map, paths: Path[], selectedPath: Pat
         addAccessNetworkLayer(map, selectedPath, queryPoints)
         return () => {
             removeCurrentPathLayers(map)
-            removeHandDrawQueryPointsLayers(map)
+            removeDrawHandfreeQueryPointsLayers(map)
         }
-    }, [map, paths, selectedPath])
+    }, [map, paths, selectedPath, drawFreehandQueryPoints])
 }
 
 function removeCurrentPathLayers(map: Map) {
@@ -48,14 +56,20 @@ function removeCurrentPathLayers(map: Map) {
         .forEach(l => map.removeLayer(l))
 }
 
-function removeHandDrawQueryPointsLayers(map: Map) {
+function removeDrawHandfreeQueryPointsLayers(map: Map) {
+    map.getInteractions()
+        .getArray()
+        .forEach(i => {
+            if ('gh:draw_handfree' == i.get('source') && i instanceof Draw) i.setActive(false)
+        })
+
     map.getLayers()
         .getArray()
         .filter(l => l.get(handDrawQueryPointsLayerKey))
         .forEach(l => map.removeLayer(l))
 }
 
-function addHandDrawQueryPointLayer(map: Map) {
+function addDrawFreehandQueryPointsLayer(map: Map) {
     const source = new VectorSource()
 
     // TODO NOW cache style
@@ -87,7 +101,7 @@ function addHandDrawQueryPointLayer(map: Map) {
             return [style]
         },
     })
-
+    vectorLayer.set(handDrawQueryPointsLayerKey, true)
     map.addLayer(vectorLayer)
 
     const draw = new Draw({
@@ -98,8 +112,7 @@ function addHandDrawQueryPointLayer(map: Map) {
         // we handle this later
         // maxPoints: 200,
 
-        /* TODO how to move the map? */
-        // freehand: false,
+        freehand: true,
         source: source,
         type: 'LineString',
     })
@@ -149,7 +162,7 @@ function addHandDrawQueryPointLayer(map: Map) {
         }
         return false
     })
-
+    draw.set('source', 'gh:draw_handfree')
     map.addInteraction(draw)
 }
 

src/sidebar/CustomModelBox.tsx

@@ -6,7 +6,13 @@ import styles from '@/sidebar/CustomModelBox.module.css'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { create } from 'custom-model-editor/src/index'
 import Dispatcher from '@/stores/Dispatcher'
-import { ClearRoute, DismissLastError, DrawAreas, SetCustomModel, SetCustomModelEnabled } from '@/actions/Actions'
+import {
+    ClearRoute,
+    DismissLastError,
+    DrawCustomModelAreas,
+    SetCustomModel,
+    SetCustomModelEnabled,
+} from '@/actions/Actions'
 import { tr } from '@/translation/Translation'
 import PlainButton from '@/PlainButton'
 import { customModel2prettyString, customModelExamples } from '@/sidebar/CustomModelExamples'
@@ -101,7 +107,7 @@ export default function CustomModelBox({
                         className={styles.drawAreas}
                         title={tr('draw_areas_enabled')}
                         style={{ color: drawAreas ? '' : 'lightgray' }}
-                        onClick={() => Dispatcher.dispatch(new DrawAreas(!drawAreas))}
+                        onClick={() => Dispatcher.dispatch(new DrawCustomModelAreas(!drawAreas))}
                     >
                         {drawAreas ? <DrawAreasIcon /> : <DrawAreasDisabledIcon />}
                     </PlainButton>

src/stores/SettingsStore.ts

@@ -1,19 +1,24 @@
 import Store from '@/stores/Store'
 import { Action } from '@/stores/Dispatcher'
-import { DrawAreas, SetCustomModelEnabled, ToggleDistanceUnits } from '@/actions/Actions'
+import {
+    DrawCustomModelAreas,
+    DrawHandfreeQueryPoints,
+    SetCustomModelEnabled,
+    ToggleDistanceUnits,
+} from '@/actions/Actions'
 
 export interface Settings {
     showDistanceInMiles: boolean
     drawAreasEnabled: boolean
-    handDrawQueryPointsEnabled: boolean
+    drawHandfreeQueryPointsEnabled: boolean
 }
 
 export default class SettingsStore extends Store<Settings> {
     constructor() {
         super({
             showDistanceInMiles: false,
             drawAreasEnabled: false,
-            handDrawQueryPointsEnabled: true,
+            drawHandfreeQueryPointsEnabled: false,
         })
     }
 
@@ -29,7 +34,12 @@ export default class SettingsStore extends Store<Settings> {
                     ...state,
                     drawAreasEnabled: false,
                 }
-        } else if (action instanceof DrawAreas) {
+        } else if (action instanceof DrawHandfreeQueryPoints) {
+            return {
+                ...state,
+                drawHandfreeQueryPointsEnabled: action.enabled,
+            }
+        } else if (action instanceof DrawCustomModelAreas) {
             return {
                 ...state,
                 drawAreasEnabled: action.enabled,