steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-09-04 17:32:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

waypoint sym icons, and change layer color design

Browse Source
This commit is contained in:
vcoppe
2024-08-08 23:20:09 +02:00
parent f10b18afe2
commit 00d6c9b45d
5 changed files with 72 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
website/src/lib/components/gpx-layer/GPXLayer.ts
View File

@@ -9,7 +9,8 @@ import type { Waypoint } from "gpx";
import { getElevation, resetCursor, setGrabbingCursor, setPointerCursor, setScissorsCursor } from "$lib/utils";
import { font } from "$lib/assets/layers";
import { selectedWaypoint } from "$lib/components/toolbar/tools/Waypoint.svelte";
import { MapPin } from "lucide-static";
import { MapPin, Square } from "lucide-static";
import { getSymbolKey, symbols } from "$lib/assets/symbols";
const colors = [
'#ff0000',
@@ -43,6 +44,25 @@ function decrementColor(color: string) {
}
}
function getMarkerForSymbol(symbol: string | undefined, layerColor: string) {
let symbolSvg = symbol ? symbols[symbol]?.iconSvg : undefined;
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
${Square
.replace('stroke="currentColor"', 'stroke="SteelBlue" stroke-width="1.5" transform="translate(9.6, 0.4) scale(0.5)"')
.replace('fill="none"', `fill="${layerColor}"`)}
${MapPin
.replace('width="24"', '')
.replace('height="24"', '')
.replace('stroke="currentColor"', '')
.replace('path', `path fill="#3fb1ce" stroke="SteelBlue" stroke-width="1"`)
.replace('circle', `circle fill="${symbolSvg ? 'none' : 'white'}" stroke="${symbolSvg ? 'none' : 'white'}" stroke-width="2"`)}
${symbolSvg?.replace('stroke="currentColor"', 'stroke="white" stroke-width="2.5" transform="translate(7.2, 5) scale(0.4)"') ?? ''}
</svg>`
}
const { directionMarkers, verticalFileView, currentBasemap, defaultOpacity, defaultWeight } = settings;
export class GPXLayer {
@@ -184,19 +204,15 @@ export class GPXLayer {
if (get(selection).hasAnyChildren(new ListFileItem(this.fileId))) {
file.wpt.forEach((waypoint) => { // Update markers
let symbolKey = getSymbolKey(waypoint.sym);
if (markerIndex < this.markers.length) {
this.markers[markerIndex].getElement().querySelector('circle')?.setAttribute('fill', this.layerColor);
this.markers[markerIndex].getElement().innerHTML = getMarkerForSymbol(symbolKey, this.layerColor);
this.markers[markerIndex].setLngLat(waypoint.getCoordinates());
Object.defineProperty(this.markers[markerIndex], '_waypoint', { value: waypoint, writable: true });
} else {
let element = document.createElement('div');
element.classList.add('w-8', 'h-8', 'drop-shadow-xl');
element.innerHTML = MapPin
.replace('width="24"', '')
.replace('height="24"', '')
.replace('stroke="currentColor"', '')
.replace('path', `path fill="#3fb1ce" stroke="SteelBlue" stroke-width="1"`)
.replace('circle', `circle fill="${this.layerColor}" stroke="white" stroke-width="2.5"`);
element.innerHTML = getMarkerForSymbol(symbolKey, this.layerColor);
let marker = new mapboxgl.Marker({
draggable: this.draggable,
element,

11
website/src/lib/components/gpx-layer/WaypointPopup.svelte
View File

@@ -7,7 +7,7 @@
import { Dot, Trash2 } from 'lucide-svelte';
import { onMount } from 'svelte';
import { Tool, currentTool } from '$lib/stores';
import { symbols } from '$lib/assets/symbols';
import { getSymbolKey, symbols } from '$lib/assets/symbols';
import { _ } from 'svelte-i18n';
let popupElement: HTMLDivElement;
@@ -17,10 +17,7 @@
popupElement.classList.remove('hidden');
});
$: symbolKey =
$currentPopupWaypoint && $currentPopupWaypoint[0].sym
? Object.keys(symbols).find((key) => symbols[key].value === $currentPopupWaypoint[0].sym)
: undefined;
$: symbolKey = $currentPopupWaypoint ? getSymbolKey($currentPopupWaypoint[0].sym) : undefined;
</script>
<div bind:this={popupElement} class="hidden">
@@ -30,8 +27,8 @@
<Card.Title class="text-md">{$currentPopupWaypoint[0].name}</Card.Title>
</Card.Header>
<Card.Content class="flex flex-col p-0 text-sm">
<div class="flex flex-row items-center text-muted-foreground text-xs">
{#if symbolKey && symbols.hasOwnProperty(symbolKey)}
<div class="flex flex-row items-center text-muted-foreground text-xs whitespace-nowrap">
{#if symbolKey}
<span>
{#if symbols[symbolKey].icon}
<svelte:component

4
website/src/lib/components/toolbar/tools/Waypoint.svelte
View File

@@ -21,7 +21,7 @@
import { map } from '$lib/stores';
import { resetCursor, setCrosshairCursor } from '$lib/utils';
import { CirclePlus, CircleX, Save } from 'lucide-svelte';
import { symbols } from '$lib/assets/symbols';
import { getSymbolKey, symbols } from '$lib/assets/symbols';
let name: string;
let description: string;
@@ -68,7 +68,7 @@
description += '\n\n' + $selectedWaypoint[0].cmt;
}
let symbol = $selectedWaypoint[0].sym ?? '';
let symbolKey = Object.keys(symbols).find((key) => symbols[key].value === symbol);
let symbolKey = getSymbolKey(symbol);
if (symbolKey) {
selectedSymbol = {
value: symbol,