{ if (open) { if (!get(selection).has(item)) { selectItem(item); } let layer = gpxLayers.get(item.getFileId()); if (layer) { hidden = layer.hidden; } } }} > {#if item instanceof ListFileItem || item instanceof ListTrackItem} {$_('menu.metadata.name')} {$_('menu.metadata.description')} <Button variant="outline" on:click={() => { dbUtils.applyToFile(item.getFileId(), (file) => { if (item instanceof ListFileItem && node instanceof GPXFile) { file.metadata.name = name; file.metadata.desc = description; } else if (item instanceof ListTrackItem && node instanceof Track) { file.trk[item.getTrackIndex()].name = name; file.trk[item.getTrackIndex()].desc = description; } return file; }); openEditMetadata = false; }} > <Save size="16" class="mr-1" /> {$_('menu.metadata.save')} </Button> </Popover.Content> </Popover.Root> <Popover.Root bind:open={openEditStyle}> <Popover.Trigger /> <Popover.Content side="top" sideOffset={22} class="flex flex-col gap-3"> <Label class="flex flex-row gap-2 items-center justify-between"> {$_('menu.style.color')} <Input bind:value={color} type="color" class="p-0 h-6 w-40" on:change={() => (colorChanged = true)} /> </Label> <Label class="flex flex-row gap-2 items-center justify-between"> {$_('menu.style.opacity')} <div class="w-40 p-2"> <Slider bind:value={opacity} min={0.3} max={1} step={0.1} onValueChange={() => (opacityChanged = true)} /> </div> </Label> <Label class="flex flex-row gap-2 items-center justify-between"> {$_('menu.style.weight')} <div class="w-40 p-2"> <Slider bind:value={weight} id="weight" min={1} max={10} step={1} onValueChange={() => (weightChanged = true)} /> </div> </Label> <Button variant="outline" disabled={!colorChanged && !opacityChanged && !weightChanged} on:click={() => { let style = {}; if (colorChanged) { style.color = color; } if (opacityChanged) { style.opacity = opacity[0]; } if (weightChanged) { style.weight = weight[0]; } dbUtils.setStyleToSelection(style); if (item instanceof ListFileItem && $selection.size === gpxLayers.size) { if (style.opacity) { $defaultOpacity = style.opacity; } if (style.weight) { $defaultWeight = style.weight; } } openEditStyle = false; }} > <Save size="16" class="mr-1" /> {$_('menu.metadata.save')} </Button> </Popover.Content> </Popover.Root> {/if} {#if item.level === ListLevel.FILE || item.level === ListLevel.TRACK} <div class="absolute {$verticalFileView ? 'top-0 bottom-0 right-1 w-1' : 'top-0 h-1 left-0 right-0'}" style="background:linear-gradient(to {$verticalFileView ? 'bottom' : 'right'},{nodeColors .map( (c, i) => `${c} ${Math.floor((100 * i) / nodeColors.length)}% ${Math.floor((100 * (i + 1)) / nodeColors.length)}%` ) .join(',')})" /> {/if} <span class="w-full text-left truncate py-1 flex flex-row items-center" on:contextmenu={(e) => { if (e.ctrlKey) { // Add to selection instead of opening context menu e.preventDefault(); e.stopPropagation(); $selection.toggle(item); } }} on:mouseenter={() => { if (item instanceof ListWaypointItem) { let layer = gpxLayers.get(item.getFileId()); let file = getFile(item.getFileId()); if (layer && file) { let waypoint = file.wpt[item.getWaypointIndex()]; if (waypoint) { layer.showWaypointPopup(waypoint); } } } }} on:mouseleave={() => { if (item instanceof ListWaypointItem) { let layer = gpxLayers.get(item.getFileId()); if (layer) { layer.hideWaypointPopup(); } } }} > {#if item.level === ListLevel.SEGMENT} <Waypoints size="16" class="mr-1 shrink-0" /> {:else if item.level === ListLevel.WAYPOINT} <MapPin size="16" class="mr-1 shrink-0" /> {/if} <span class="grow truncate {$verticalFileView ? 'mr-2' : ''}"> {label} </span> </span> </Button> </ContextMenu.Trigger> <ContextMenu.Content> {#if item instanceof ListFileItem || item instanceof ListTrackItem} <ContextMenu.Item disabled={!singleSelection} on:click={() => (openEditMetadata = true)}> <Info size="16" class="mr-1" /> {$_('menu.metadata.button')} </ContextMenu.Item> <ContextMenu.Item on:click={() => (openEditStyle = true)}> <PaintBucket size="16" class="mr-1" /> {$_('menu.style.button')} </ContextMenu.Item> {#if item instanceof ListFileItem} <ContextMenu.Item on:click={toggleSelectionVisibility}> {#if hidden} <Eye size="16" class="mr-1" /> {$_('menu.unhide')} {:else} <EyeOff size="16" class="mr-1" /> {$_('menu.hide')} {/if} <Shortcut key="H" ctrl={true} /> </ContextMenu.Item> {/if} <ContextMenu.Separator /> {/if} {#if $verticalFileView} {#if item instanceof ListFileItem} <ContextMenu.Item disabled={!singleSelection} on:click={() => dbUtils.applyToFile( item.getFileId(), (file) => file.replaceTracks(file.trk.length, file.trk.length, [new Track()])[0] )} > <Plus size="16" class="mr-1" /> {$_('menu.new_track')} </ContextMenu.Item> <ContextMenu.Separator /> {:else if item instanceof ListTrackItem} <ContextMenu.Item disabled={!singleSelection} on:click={() => { let trackIndex = item.getTrackIndex(); dbUtils.applyToFile( item.getFileId(), (file) => file.replaceTrackSegments( trackIndex, file.trk[trackIndex].trkseg.length, file.trk[trackIndex].trkseg.length, [new TrackSegment()] )[0] ); }} > <Plus size="16" class="mr-1" /> {$_('menu.new_segment')} </ContextMenu.Item> <ContextMenu.Separator /> {/if} {/if} {#if $verticalFileView || item.level !== ListLevel.WAYPOINTS} {#if item.level !== ListLevel.WAYPOINTS} <ContextMenu.Item on:click={dbUtils.duplicateSelection}> <Copy size="16" class="mr-1" /> {$_('menu.duplicate')} <Shortcut key="D" ctrl={true} /></ContextMenu.Item > {/if} {#if $verticalFileView} <ContextMenu.Item on:click={copySelection}> <ClipboardCopy size="16" class="mr-1" /> {$_('menu.copy')} <Shortcut key="C" ctrl={true} /> </ContextMenu.Item> <ContextMenu.Item on:click={cutSelection}> <Scissors size="16" class="mr-1" /> {$_('menu.cut')} <Shortcut key="X" ctrl={true} /> </ContextMenu.Item> <ContextMenu.Item disabled={$copied === undefined || $copied.length === 0 || !allowedPastes[$copied[0].level].includes(item.level)} on:click={pasteSelection} > <ClipboardPaste size="16" class="mr-1" /> {$_('menu.paste')} <Shortcut key="V" ctrl={true} /> </ContextMenu.Item> {/if} <ContextMenu.Separator /> {/if} <ContextMenu.Item on:click={dbUtils.deleteSelection}> <Trash2 size="16" class="mr-1" /> {$_('menu.delete')} <Shortcut key="⌫" ctrl={true} /> </ContextMenu.Item> </ContextMenu.Content> </ContextMenu.Root>