diff --git a/website/src/lib/components/toolbar/tools/routing/RoutingControls.ts b/website/src/lib/components/toolbar/tools/routing/RoutingControls.ts index 8bc791d7..c0d50319 100644 --- a/website/src/lib/components/toolbar/tools/routing/RoutingControls.ts +++ b/website/src/lib/components/toolbar/tools/routing/RoutingControls.ts @@ -14,6 +14,10 @@ import { resetCursor, setGrabbingCursor } from "$lib/utils"; export const canChangeStart = writable(false); +function stopPropagation(e: any) { + e.stopPropagation(); +} + export class RoutingControls { active: boolean = false; map: mapboxgl.Map; @@ -80,6 +84,7 @@ export class RoutingControls { this.map.on('move', this.toggleAnchorsForZoomLevelAndBoundsBinded); this.map.on('click', this.appendAnchorBinded); this.map.on('mousemove', this.fileId, this.showTemporaryAnchorBinded); + this.map.on('click', this.fileId, stopPropagation); this.fileUnsubscribe = this.file.subscribe(this.updateControls.bind(this)); } @@ -127,6 +132,7 @@ export class RoutingControls { this.map.off('move', this.toggleAnchorsForZoomLevelAndBoundsBinded); this.map.off('click', this.appendAnchorBinded); this.map.off('mousemove', this.fileId, this.showTemporaryAnchorBinded); + this.map.off('click', this.fileId, stopPropagation); this.map.off('mousemove', this.updateTemporaryAnchorBinded); this.temporaryAnchor.marker.remove(); @@ -139,7 +145,7 @@ export class RoutingControls { createAnchor(point: TrackPoint, segment: TrackSegment, trackIndex: number, segmentIndex: number): AnchorWithMarker { let element = document.createElement('div'); - element.className = `h-3 w-3 rounded-full bg-white border-2 border-black cursor-pointer`; + element.className = `h-5 w-5 xs:h-4 xs:w-4 md:h-3 md:w-3 rounded-full bg-white border-2 border-black cursor-pointer`; let marker = new mapboxgl.Marker({ draggable: true, diff --git a/website/src/lib/db.ts b/website/src/lib/db.ts index 6bbf08aa..c3163c86 100644 --- a/website/src/lib/db.ts +++ b/website/src/lib/db.ts @@ -9,6 +9,7 @@ import { ListFileItem, ListItem, ListTrackItem, ListLevel, ListTrackSegmentItem, import { updateAnchorPoints } from '$lib/components/toolbar/tools/routing/Simplify'; import { SplitType } from '$lib/components/toolbar/tools/Scissors.svelte'; import { getElevation } from '$lib/utils'; +import { browser } from '$app/environment'; enableMapSet(); @@ -98,7 +99,7 @@ export const settings = { streetViewSource: dexieSettingStore('streetViewSource', 'mapillary'), fileOrder: dexieSettingStore('fileOrder', []), defaultOpacity: dexieSettingStore('defaultOpacity', 0.7), - defaultWeight: dexieSettingStore('defaultWeight', 5), + defaultWeight: dexieSettingStore('defaultWeight', (browser && window.innerWidth < 600) ? 8 : 5), bottomPanelSize: dexieSettingStore('bottomPanelSize', 170), rightPanelSize: dexieSettingStore('rightPanelSize', 240), showWelcomeMessage: dexieSettingStore('showWelcomeMessage', true, false), diff --git a/website/src/lib/docs/en/toolbar/routing.mdx b/website/src/lib/docs/en/toolbar/routing.mdx index 26c0e6e2..f3b90a05 100644 --- a/website/src/lib/docs/en/toolbar/routing.mdx +++ b/website/src/lib/docs/en/toolbar/routing.mdx @@ -50,6 +50,7 @@ Creating a route or extending an existing one is as simple as clicking on the ma You can also drag an existing anchor point to reroute the segment connecting it with the previous and next anchor points. Furthermore, new anchor points can be inserted between existing ones by hovering over the segment connecting them and dragging the anchor point that appears to the desired location. +On touch devices, you can tap on the segment to insert a new anchor point.