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

dexie progress

Browse Source
This commit is contained in:
vcoppe
2024-05-02 19:51:08 +02:00
parent 16c94eb973
commit cd919258ad
13 changed files with 277 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,8 @@
import type { GPXFile } from "gpx";
import { map, selectFiles, currentTool, Tool } from "$lib/stores";
import { get, type Writable } from "svelte/store";
import { get, type Readable, type Writable } from "svelte/store";
import mapboxgl from "mapbox-gl";
import type { FreezedObject } from "structurajs";
let defaultWeight = 6;
let defaultOpacity = 1;
@@ -38,7 +39,7 @@ function decrementColor(color: string) {
export class GPXLayer {
map: mapboxgl.Map;
file: Writable<GPXFile>;
file: Readable<FreezedObject<GPXFile>>;
fileId: string;
layerColor: string;
popup: mapboxgl.Popup;
@@ -49,7 +50,7 @@ export class GPXLayer {
addBinded: () => void = this.add.bind(this);
selectOnClickBinded: (e: any) => void = this.selectOnClick.bind(this);
constructor(map: mapboxgl.Map, file: Writable<GPXFile>, popup: mapboxgl.Popup, popupElement: HTMLElement) {
constructor(map: mapboxgl.Map, file: Readable<FreezedObject<GPXFile>>, popup: mapboxgl.Popup, popupElement: HTMLElement) {
this.map = map;
this.file = file;
this.fileId = get(file)._data.id;
@@ -58,8 +59,6 @@ export class GPXLayer {
this.popupElement = popupElement;
this.unsubscribe = file.subscribe(this.updateData.bind(this));
get(this.file)._data.layerColor = this.layerColor;
this.add();
this.map.on('style.load', this.addBinded);
}

14
website/src/lib/components/gpx-layer/GPXLayers.svelte
View File

@@ -1,28 +1,28 @@
<script lang="ts">
import { map, filestore, selectedFiles, gpxLayers } from '$lib/stores';
import { map, selectedFiles, gpxLayers } from '$lib/stores';
import { GPXLayer } from './GPXLayer';
import { get } from 'svelte/store';
import { onMount } from 'svelte';
import mapboxgl from 'mapbox-gl';
import WaypointPopup from './WaypointPopup.svelte';
import { fileObservers } from '$lib/db';
let popupElement: HTMLElement;
let popup: mapboxgl.Popup | null = null;
$: if ($map) {
$: if ($map && $fileObservers) {
gpxLayers.update(($layers) => {
// remove layers for deleted files
$layers.forEach((layer, fileId) => {
if (!get(filestore).find((file) => file._data.id === fileId)) {
if (!$fileObservers.has(fileId)) {
layer.remove();
$layers.delete(fileId);
}
});
// add layers for new files
$filestore.forEach((file) => {
if (!$layers.has(file._data.id)) {
let fileStore = filestore.getFileStore(file._data.id);
$layers.set(file._data.id, new GPXLayer(get(map), fileStore, popup, popupElement));
$fileObservers.forEach((file, fileId) => {
if (!$layers.has(fileId)) {
$layers.set(fileId, new GPXLayer(get(map), file, popup, popupElement));
}
});
return $layers;