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

layer selection

Browse Source
This commit is contained in:
vcoppe
2024-05-05 18:59:09 +02:00
parent b3d016e2af
commit a261193267
8 changed files with 295 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
website/src/lib/components/Menu.svelte
View File

@@ -19,6 +19,8 @@
import { resetMode, setMode } from 'mode-watcher';
import { _ } from 'svelte-i18n';
import { anySelectedLayer } from './layer-control/utils';
import { defaultOverlays } from '$lib/assets/layers';
let showDistanceMarkers = false;
let showDirectionMarkers = false;
@@ -229,10 +231,10 @@
[$currentBasemap, $previousBasemap] = [$previousBasemap, $currentBasemap];
e.preventDefault();
} else if (e.key === 'F2') {
if ($currentOverlays.length > 0) {
[$currentOverlays, $previousOverlays] = [[], $currentOverlays];
if (anySelectedLayer($currentOverlays)) {
[$currentOverlays, $previousOverlays] = [defaultOverlays, $currentOverlays];
} else {
[$currentOverlays, $previousOverlays] = [$previousOverlays, []];
[$currentOverlays, $previousOverlays] = [$previousOverlays, defaultOverlays];
}
e.preventDefault();
}

45
website/src/lib/components/layer-control/LayerControl.svelte
View File

@@ -12,6 +12,7 @@
import { settings } from '$lib/db';
import { map } from '$lib/stores';
import { get, writable } from 'svelte/store';
import { getLayers } from './utils';
const {
currentBasemap,
@@ -30,21 +31,21 @@
$: if ($map) {
// Add or remove overlay layers depending on the current overlays
// Object.keys(overlays).forEach((id) => {
// if ($currentOverlays.includes(id)) {
// if (!addOverlayLayer.hasOwnProperty(id)) {
// addOverlayLayer[id] = addOverlayLayerForId(id);
// }
// if (!$map.getLayer(id)) {
// addOverlayLayer[id]();
// $map.on('style.load', addOverlayLayer[id]);
// }
// } else if ($map.getLayer(id)) {
// $map.removeLayer(id);
// $map.off('style.load', addOverlayLayer[id]);
// }
// });
console.log($currentOverlays);
let overlayLayers = getLayers($currentOverlays);
Object.keys(overlayLayers).forEach((id) => {
if (overlayLayers[id]) {
if (!addOverlayLayer.hasOwnProperty(id)) {
addOverlayLayer[id] = addOverlayLayerForId(id);
}
if (!$map.getLayer(id)) {
addOverlayLayer[id]();
$map.on('style.load', addOverlayLayer[id]);
}
} else if ($map.getLayer(id)) {
$map.removeLayer(id);
$map.off('style.load', addOverlayLayer[id]);
}
});
}
let selectedBasemap = writable(get(currentBasemap));
@@ -60,18 +61,6 @@
selectedBasemap.set(value);
});
let selectedOverlays = writable(get(currentOverlays));
selectedOverlays.subscribe((value) => {
// Updates coming from checkboxes
if (value != get(currentOverlays)) {
currentOverlays.set(value);
}
});
currentOverlays.subscribe((value) => {
// Updates coming from the database, or from the user toggling overlays
selectedOverlays.set(value);
});
let addOverlayLayer: { [key: string]: () => void } = {};
function addOverlayLayerForId(id: string) {
return () => {
@@ -124,7 +113,7 @@
layerTree={$selectedOverlayTree}
name="overlays"
multiple={true}
bind:checked={$selectedOverlays}
bind:checked={$currentOverlays}
/>
</div>
<Separator class="w-full" />

21
website/src/lib/components/layer-control/LayerControlSettings.svelte
View File

@@ -9,21 +9,12 @@
import { Settings } from 'lucide-svelte';
import { basemapTree, overlayTree, type CollapsedInfoTreeType } from '$lib/assets/layers';
import { basemapTree, overlayTree } from '$lib/assets/layers';
import { settings } from '$lib/db';
import { _ } from 'svelte-i18n';
const { selectedBasemapTree, selectedOverlayTree } = settings;
let checkedBasemaps: CollapsedInfoTreeType<{ [key: string]: boolean }> = {
self: {},
children: {}
};
let checkedOverlays: CollapsedInfoTreeType<{ [key: string]: boolean }> = {
self: {},
children: {}
};
</script>
<Sheet.Root>
@@ -48,10 +39,7 @@
layerTree={basemapTree}
name="basemapSettings"
multiple={true}
onValueChange={(id, checked) => {
console.log('basemap', id, checked);
}}
bind:checked={checkedBasemaps}
bind:checked={$selectedBasemapTree}
/>
</ScrollArea>
<Separator />
@@ -60,10 +48,7 @@
layerTree={overlayTree}
name="overlaySettings"
multiple={true}
onValueChange={(id, checked) => {
console.log('overlay', id, checked);
}}
bind:checked={checkedOverlays}
bind:checked={$selectedOverlayTree}
/>
</ScrollArea>
</Accordion.Content>

8
website/src/lib/components/layer-control/LayerTree.svelte
View File

@@ -1,10 +1,6 @@
<script lang="ts">
import LayerTreeNode from './LayerTreeNode.svelte';
import {
type CheckedInfoTreeType,
type CollapsedInfoTreeType,
type LayerTreeType
} from '$lib/assets/layers';
import { type CollapsedInfoTreeType, type LayerTreeType } from '$lib/assets/layers';
export let layerTree: LayerTreeType;
export let name: string;
@@ -15,7 +11,7 @@
self: true,
children: {}
};
export let checked: CheckedInfoTreeType = {};
export let checked: LayerTreeType = {};
</script>
<form>

81
website/src/lib/components/layer-control/LayerTreeNode.svelte
View File

@@ -6,11 +6,8 @@
import { ChevronDown, ChevronUp } from 'lucide-svelte';
import {
type CheckedInfoTreeType,
type CollapsedInfoTreeType,
type LayerTreeType
} from '$lib/assets/layers';
import { type CollapsedInfoTreeType, type LayerTreeType } from '$lib/assets/layers';
import { anySelectedLayer } from './utils';
import { _ } from 'svelte-i18n';
@@ -31,48 +28,40 @@
});
}
export let checked: CheckedInfoTreeType;
if (Array.isArray(node)) {
if (multiple) {
node.forEach((id) => {
if (!checked.hasOwnProperty(id)) {
checked[id] = false;
}
});
}
} else {
Object.keys(node).forEach((id) => {
if (!checked.hasOwnProperty(id)) {
export let checked: LayerTreeType;
Object.keys(node).forEach((id) => {
if (!checked.hasOwnProperty(id)) {
if (typeof node[id] == 'boolean') {
checked[id] = false;
} else {
checked[id] = {};
}
});
}
}
});
</script>
{#if Array.isArray(node)}
<div class="flex flex-col gap-1 mt-1">
{#each node as id}
<div class="flex flex-row items-center gap-2">
{#if multiple}
<Checkbox
id="{name}-{id}"
{name}
value={id}
bind:checked={checked[id]}
class="scale-90"
/>
{:else}
<input id="{name}-{id}" type="radio" {name} value={id} bind:group={selected} />
{/if}
<Label for="{name}-{id}" class="flex flex-row items-center gap-1"
>{$_(`layers.label.${id}`)}</Label
>
</div>
{/each}
</div>
{:else}
<div class="flex flex-col gap-1">
{#each Object.keys(node) as id}
<div class="flex flex-col gap-1">
{#each Object.keys(node) as id}
{#if typeof node[id] == 'boolean'}
{#if node[id]}
<div class="flex flex-row items-center gap-2 first:mt-1">
{#if multiple}
<Checkbox
id="{name}-{id}"
{name}
value={id}
bind:checked={checked[id]}
class="scale-90"
/>
{:else}
<input id="{name}-{id}" type="radio" {name} value={id} bind:group={selected} />
{/if}
<Label for="{name}-{id}" class="flex flex-row items-center gap-1"
>{$_(`layers.label.${id}`)}</Label
>
</div>
{/if}
{:else if anySelectedLayer(node[id])}
<Collapsible.Root bind:open={open.children[id].self} class="ml-1">
<Collapsible.Trigger class="w-full"
><Button
@@ -98,9 +87,9 @@
/>
</Collapsible.Content>
</Collapsible.Root>
{/each}
</div>
{/if}
{/if}
{/each}
</div>
<style lang="postcss">
div :global(input[type='radio']) {

27
website/src/lib/components/layer-control/utils.ts Normal file
View File

@@ -0,0 +1,27 @@
import type { LayerTreeType } from "$lib/assets/layers";
export function anySelectedLayer(node: LayerTreeType) {
return Object.keys(node).find((id) => {
if (typeof node[id] == "boolean") {
if (node[id]) {
return true;
}
} else {
if (anySelectedLayer(node[id])) {
return true;
}
}
return false;
}) !== undefined;
}
export function getLayers(node: LayerTreeType, layers: { [key: string]: boolean } = {}): { [key: string]: boolean } {
Object.keys(node).find((id) => {
if (typeof node[id] == "boolean") {
layers[id] = node[id];
} else {
getLayers(node[id], layers);
}
});
return layers;
}