diff --git a/website/src/lib/components/Menu.svelte b/website/src/lib/components/Menu.svelte index ed13e1ec..a39160e8 100644 --- a/website/src/lib/components/Menu.svelte +++ b/website/src/lib/components/Menu.svelte @@ -1,598 +1,651 @@
-
- - - - - - - - - - - - - {$_('menu.new')} - - - - - - {$_('menu.open')} - - - - - - {$_('menu.duplicate')} - - - - - - {$_('menu.close')} - - - - - {$_('menu.close_all')} - - - - ($exportState = ExportState.SELECTION)} - disabled={$selection.size == 0} - > - - {$_('menu.export')} - - - ($exportState = ExportState.ALL)} - disabled={$fileObservers.size == 0} - > - - {$_('menu.export_all')} - - - - - - - - - - - - - {$_('menu.undo')} - - - - - {$_('menu.redo')} - - - - item instanceof ListFileItem || item instanceof ListTrackItem)} - on:click={() => ($editMetadata = true)} - > - - {$_('menu.metadata.button')} - - - item instanceof ListFileItem || item instanceof ListTrackItem)} - on:click={() => ($editStyle = true)} - > - - {$_('menu.style.button')} - - { - if ($allHidden) { - dbUtils.setHiddenToSelection(false); - } else { - dbUtils.setHiddenToSelection(true); - } - }} - disabled={$selection.size == 0} - > - {#if $allHidden} - - {$_('menu.unhide')} - {:else} - - {$_('menu.hide')} - {/if} - - - - - - {$_('menu.select_all')} - - - { - if ($selection.size > 0) { - centerMapOnSelection(); - } - }} - > - - {$_('menu.center')} - - - {#if $verticalFileView} - - - - {$_('menu.copy')} - - - - - {$_('menu.cut')} - - - 0 && - !allowedPastes[$copied[0].level].includes($selection.getSelected().pop()?.level))} - on:click={pasteSelection} - > - - {$_('menu.paste')} - - - {/if} - - - - {$_('menu.delete')} - - - - - - - - - - - - - {$_('menu.elevation_profile')} - - - - - {$_('menu.vertical_file_view')} - - - - - {$_('menu.switch_basemap')} - - - {$_('menu.toggle_overlays')} - - - - {$_('menu.distance_markers')} - - - {$_('menu.direction_markers')} - - - - - {$_('menu.toggle_3d')} - - - - - - - - - - - - {$_('menu.distance_units')} - - - - {$_('menu.metric')} - {$_('menu.imperial')} - {$_('menu.nautical')} - - - - - {$_('menu.velocity_units')} - - - {$_('quantities.speed')} - {$_('quantities.pace')} - - - - - - {$_('menu.temperature_units')} - - - - {$_('menu.celsius')} - {$_('menu.fahrenheit')} - - - - - - - - {$_('menu.language')} - - - - {#each Object.entries(languages) as [lang, label]} - - {label} - - {/each} - - - - - - {#if selectedMode === 'light'} - - {:else} - - {/if} - {$_('menu.mode')} - - - { - setMode(value); - }} - > - {$_('menu.light')} - {$_('menu.dark')} - - - - - - - - {$_('menu.street_view_source')} - - - - {$_('menu.mapillary')} - {$_('menu.google')} - - - - (layerSettingsOpen = true)}> - - {$_('menu.layers')} - - - - -
- - -
-
+
+ + + + + + + + + + + + + {$_('menu.new')} + + + + + + {$_('menu.open')} + + + + + + {$_('menu.duplicate')} + + + + + + {$_('menu.close')} + + + + + {$_('menu.close_all')} + + + + ($exportState = ExportState.SELECTION)} + disabled={$selection.size == 0} + > + + {$_('menu.export')} + + + ($exportState = ExportState.ALL)} + disabled={$fileObservers.size == 0} + > + + {$_('menu.export_all')} + + + + + + + + + + + + + {$_('menu.undo')} + + + + + {$_('menu.redo')} + + + + + item instanceof ListFileItem || + item instanceof ListTrackItem + )} + on:click={() => ($editMetadata = true)} + > + + {$_('menu.metadata.button')} + + + + item instanceof ListFileItem || + item instanceof ListTrackItem + )} + on:click={() => ($editStyle = true)} + > + + {$_('menu.style.button')} + + { + if ($allHidden) { + dbUtils.setHiddenToSelection(false); + } else { + dbUtils.setHiddenToSelection(true); + } + }} + disabled={$selection.size == 0} + > + {#if $allHidden} + + {$_('menu.unhide')} + {:else} + + {$_('menu.hide')} + {/if} + + + + + + {$_('menu.select_all')} + + + { + if ($selection.size > 0) { + centerMapOnSelection(); + } + }} + > + + {$_('menu.center')} + + + {#if $verticalFileView} + + + + {$_('menu.copy')} + + + + + {$_('menu.cut')} + + + 0 && + !allowedPastes[$copied[0].level].includes( + $selection.getSelected().pop()?.level + ))} + on:click={pasteSelection} + > + + {$_('menu.paste')} + + + {/if} + + + + {$_('menu.delete')} + + + + + + + + + + + + + {$_('menu.elevation_profile')} + + + + + {$_('menu.vertical_file_view')} + + + + + {$_('menu.switch_basemap')} + + + {$_('menu.toggle_overlays')} + + + + {$_('menu.distance_markers')} + + + {$_('menu.direction_markers')} + + + + + {$_('menu.toggle_3d')} + + + + + + + + + + + + {$_('menu.distance_units')} + + + + {$_('menu.metric')} + {$_('menu.imperial')} + {$_('menu.nautical')} + + + + + {$_( + 'menu.velocity_units' + )} + + + {$_('quantities.speed')} + {$_('quantities.pace')} + + + + + + {$_('menu.temperature_units')} + + + + {$_('menu.celsius')} + {$_('menu.fahrenheit')} + + + + + + + + {$_('menu.language')} + + + + {#each Object.entries(languages) as [lang, label]} + + {label} + + {/each} + + + + + + {#if selectedMode === 'light'} + + {:else} + + {/if} + {$_('menu.mode')} + + + { + setMode(value); + }} + > + {$_('menu.light')} + {$_('menu.dark')} + + + + + + + + {$_('menu.street_view_source')} + + + + {$_('menu.mapillary')} + {$_('menu.google')} + + + + (layerSettingsOpen = true)}> + + {$_('menu.layers')} + + + + +
+ + +
+
{ - let targetInput = - e.target.tagName === 'INPUT' || - e.target.tagName === 'TEXTAREA' || - e.target.tagName === 'SELECT' || - e.target.role === 'combobox' || - e.target.role === 'radio' || - e.target.role === 'menu' || - e.target.role === 'menuitem' || - e.target.role === 'menuitemradio' || - e.target.role === 'menuitemcheckbox'; + on:keydown={(e) => { + let targetInput = + e.target.tagName === 'INPUT' || + e.target.tagName === 'TEXTAREA' || + e.target.tagName === 'SELECT' || + e.target.role === 'combobox' || + e.target.role === 'radio' || + e.target.role === 'menu' || + e.target.role === 'menuitem' || + e.target.role === 'menuitemradio' || + e.target.role === 'menuitemcheckbox'; - if (e.key === '+' && (e.metaKey || e.ctrlKey)) { - createFile(); - e.preventDefault(); - } else if (e.key === 'o' && (e.metaKey || e.ctrlKey)) { - triggerFileInput(); - e.preventDefault(); - } else if (e.key === 'd' && (e.metaKey || e.ctrlKey)) { - dbUtils.duplicateSelection(); - e.preventDefault(); - } else if (e.key === 'c' && (e.metaKey || e.ctrlKey)) { - if (!targetInput) { - copySelection(); - e.preventDefault(); - } - } else if (e.key === 'x' && (e.metaKey || e.ctrlKey)) { - if (!targetInput) { - cutSelection(); - e.preventDefault(); - } - } else if (e.key === 'v' && (e.metaKey || e.ctrlKey)) { - if (!targetInput) { - pasteSelection(); - e.preventDefault(); - } - } else if ((e.key === 's' || e.key == 'S') && (e.metaKey || e.ctrlKey)) { - if (e.shiftKey) { - if ($fileObservers.size > 0) { - $exportState = ExportState.ALL; - } - } else if ($selection.size > 0) { - $exportState = ExportState.SELECTION; - } - e.preventDefault(); - } else if ((e.key === 'z' || e.key == 'Z') && (e.metaKey || e.ctrlKey)) { - if (e.shiftKey) { - dbUtils.redo(); - } else { - dbUtils.undo(); - } - } else if ((e.key === 'Backspace' || e.key === 'Delete') && (e.metaKey || e.ctrlKey)) { - if (!targetInput) { - if (e.shiftKey) { - dbUtils.deleteAllFiles(); - } else { - dbUtils.deleteSelection(); - } - e.preventDefault(); - } - } else if (e.key === 'a' && (e.metaKey || e.ctrlKey)) { - if (!targetInput) { - selectAll(); - e.preventDefault(); - } - } else if (e.key === 'i' && (e.metaKey || e.ctrlKey)) { - if ( - $selection.size === 1 && - $selection - .getSelected() - .every((item) => item instanceof ListFileItem || item instanceof ListTrackItem) - ) { - $editMetadata = true; - } - e.preventDefault(); - } else if (e.key === 'p' && (e.metaKey || e.ctrlKey)) { - $elevationProfile = !$elevationProfile; - e.preventDefault(); - } else if (e.key === 'l' && (e.metaKey || e.ctrlKey)) { - $verticalFileView = !$verticalFileView; - e.preventDefault(); - } else if (e.key === 'h' && (e.metaKey || e.ctrlKey)) { - if ($allHidden) { - dbUtils.setHiddenToSelection(false); - } else { - dbUtils.setHiddenToSelection(true); - } - e.preventDefault(); - } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { - if ($selection.size > 0) { - centerMapOnSelection(); - } - } else if (e.key === 'F1') { - switchBasemaps(); - e.preventDefault(); - } else if (e.key === 'F2') { - toggleOverlays(); - e.preventDefault(); - } else if (e.key === 'F3') { - $distanceMarkers = !$distanceMarkers; - e.preventDefault(); - } else if (e.key === 'F4') { - $directionMarkers = !$directionMarkers; - e.preventDefault(); - } else if (e.key === 'F5') { - $routing = !$routing; - e.preventDefault(); - } else if ( - e.key === 'ArrowRight' || - e.key === 'ArrowDown' || - e.key === 'ArrowLeft' || - e.key === 'ArrowUp' - ) { - if (!targetInput) { - updateSelectionFromKey(e.key === 'ArrowRight' || e.key === 'ArrowDown', e.shiftKey); - e.preventDefault(); - } - } - }} - on:dragover={(e) => e.preventDefault()} - on:drop={(e) => { - e.preventDefault(); - if (e.dataTransfer.files.length > 0) { - loadFiles(e.dataTransfer.files); - } - }} + if (e.key === '+' && (e.metaKey || e.ctrlKey)) { + createFile(); + e.preventDefault(); + } else if (e.key === 'o' && (e.metaKey || e.ctrlKey)) { + triggerFileInput(); + e.preventDefault(); + } else if (e.key === 'd' && (e.metaKey || e.ctrlKey)) { + dbUtils.duplicateSelection(); + e.preventDefault(); + } else if (e.key === 'c' && (e.metaKey || e.ctrlKey)) { + if (!targetInput) { + copySelection(); + e.preventDefault(); + } + } else if (e.key === 'x' && (e.metaKey || e.ctrlKey)) { + if (!targetInput) { + cutSelection(); + e.preventDefault(); + } + } else if (e.key === 'v' && (e.metaKey || e.ctrlKey)) { + if (!targetInput) { + pasteSelection(); + e.preventDefault(); + } + } else if ((e.key === 's' || e.key == 'S') && (e.metaKey || e.ctrlKey)) { + if (e.shiftKey) { + if ($fileObservers.size > 0) { + $exportState = ExportState.ALL; + } + } else if ($selection.size > 0) { + $exportState = ExportState.SELECTION; + } + e.preventDefault(); + } else if ((e.key === 'z' || e.key == 'Z') && (e.metaKey || e.ctrlKey)) { + if (e.shiftKey) { + dbUtils.redo(); + } else { + dbUtils.undo(); + } + } else if ((e.key === 'Backspace' || e.key === 'Delete') && (e.metaKey || e.ctrlKey)) { + if (!targetInput) { + if (e.shiftKey) { + dbUtils.deleteAllFiles(); + } else { + dbUtils.deleteSelection(); + } + e.preventDefault(); + } + } else if (e.key === 'a' && (e.metaKey || e.ctrlKey)) { + if (!targetInput) { + selectAll(); + e.preventDefault(); + } + } else if (e.key === 'i' && (e.metaKey || e.ctrlKey)) { + if ( + $selection.size === 1 && + $selection + .getSelected() + .every((item) => item instanceof ListFileItem || item instanceof ListTrackItem) + ) { + $editMetadata = true; + } + e.preventDefault(); + } else if (e.key === 'p' && (e.metaKey || e.ctrlKey)) { + $elevationProfile = !$elevationProfile; + e.preventDefault(); + } else if (e.key === 'l' && (e.metaKey || e.ctrlKey)) { + $verticalFileView = !$verticalFileView; + e.preventDefault(); + } else if (e.key === 'h' && (e.metaKey || e.ctrlKey)) { + if ($allHidden) { + dbUtils.setHiddenToSelection(false); + } else { + dbUtils.setHiddenToSelection(true); + } + e.preventDefault(); + } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { + if ($selection.size > 0) { + centerMapOnSelection(); + } + } else if (e.key === 'F1') { + switchBasemaps(); + e.preventDefault(); + } else if (e.key === 'F2') { + toggleOverlays(); + e.preventDefault(); + } else if (e.key === 'F3') { + $distanceMarkers = !$distanceMarkers; + e.preventDefault(); + } else if (e.key === 'F4') { + $directionMarkers = !$directionMarkers; + e.preventDefault(); + } else if (e.key === 'F5') { + $routing = !$routing; + e.preventDefault(); + } else if ( + e.key === 'ArrowRight' || + e.key === 'ArrowDown' || + e.key === 'ArrowLeft' || + e.key === 'ArrowUp' + ) { + if (!targetInput) { + updateSelectionFromKey(e.key === 'ArrowRight' || e.key === 'ArrowDown', e.shiftKey); + e.preventDefault(); + } + } + }} + on:dragover={(e) => e.preventDefault()} + on:drop={(e) => { + e.preventDefault(); + if (e.dataTransfer.files.length > 0) { + loadFiles(e.dataTransfer.files); + } + }} />