better clean up of touchstart/move/end

Author: karussell

src/layers/ContextMenu.tsx

@@ -37,26 +37,33 @@ export default function ContextMenu({ map, route, queryPoints }: ContextMenuProp
         map.addOverlay(overlay)
 
         const longTouchHandler = new LongTouchHandler(e => openContextMenu(e))
-
+        const handleTouchStart = (e: any) => longTouchHandler.onTouchStart(e)
+        const handleTouchMove = () => longTouchHandler.onTouchEnd()
+        const handleTouchEnd = () => longTouchHandler.onTouchEnd()
         function onMapTargetChange() {
-            // it is important to setup new listeners whenever the map target changes, like when we switch between the
+            // it is important to set up new listeners whenever the map target changes, like when we switch between the
             // small and large screen layout, see #203
 
             // we cannot listen to right-click simply using map.on('contextmenu') and need to add the listener to
             // the map container instead
             // https://github.com/openlayers/openlayers/issues/12512#issuecomment-879403189
             map.getTargetElement().addEventListener('contextmenu', openContextMenu)
 
-            map.getTargetElement().addEventListener('touchstart', e => longTouchHandler.onTouchStart(e))
-            map.getTargetElement().addEventListener('touchmove', () => longTouchHandler.onTouchEnd())
-            map.getTargetElement().addEventListener('touchend', () => longTouchHandler.onTouchEnd())
+            map.getTargetElement().addEventListener('touchstart', handleTouchStart)
+            map.getTargetElement().addEventListener('touchmove', handleTouchMove)
+            map.getTargetElement().addEventListener('touchend', handleTouchEnd)
 
             map.getTargetElement().addEventListener('click', closeContextMenu)
         }
         map.on('change:target', onMapTargetChange)
 
         return () => {
             map.getTargetElement().removeEventListener('contextmenu', openContextMenu)
+
+            map.getTargetElement().removeEventListener('touchstart', handleTouchStart)
+            map.getTargetElement().removeEventListener('touchmove', handleTouchMove)
+            map.getTargetElement().removeEventListener('touchend', handleTouchEnd)
+
             map.getTargetElement().removeEventListener('click', closeContextMenu)
             map.removeOverlay(overlay)
             map.un('change:target', onMapTargetChange)

src/layers/UsePathsLayer.tsx

@@ -133,7 +133,7 @@ function addAccessNetworkLayer(map: Map, selectedPath: Path, queryPoints: QueryP
     })
     layer.setStyle(style)
     for (let i = 0; i < selectedPath.snapped_waypoints.coordinates.length; i++) {
-        if(i >= queryPoints.length) break // can happen if deleted too fast
+        if (i >= queryPoints.length) break // can happen if deleted too fast
         const start = fromLonLat([queryPoints[i].coordinate.lng, queryPoints[i].coordinate.lat])
         const end = fromLonLat(selectedPath.snapped_waypoints.coordinates[i])
         layer.getSource()?.addFeature(new Feature(createBezierLineString(start, end)))