zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-08 22:49:12 +08:00
Code Issues Projects Releases Packages Wiki Activity

chore(views/geomap): reintroduce display of tracks

Browse source
This commit is contained in:
Elian Doran 2025-07-06 12:19:04 +03:00
parent 6d03304cbb
commit 579a261612
No known key found for this signature in database
3 changed files with 36 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
apps/client/src/widgets/type_widgets/geo_map.ts
View file

@ -40,7 +40,6 @@ export default class GeoMapTypeWidget extends TypeWidget {
private geoMapWidget: GeoMapWidget; private geoMapWidget: GeoMapWidget;
private _state: State; private _state: State;
private L!: Leaflet; private L!: Leaflet;
private gpxLoaded?: boolean;
private ignoreNextZoomEvent?: boolean; private ignoreNextZoomEvent?: boolean;
static getType() { static getType() {
@ -86,42 +85,6 @@ export default class GeoMapTypeWidget extends TypeWidget {
// } // }
} }
// async #processNoteWithGpxTrack(note: FNote) {
// if (!this.L || !this.geoMapWidget.map) {
// return;
// }
// if (!this.gpxLoaded) {
// await import("leaflet-gpx");
// this.gpxLoaded = true;
// }
// const xmlResponse = await server.get<string | Uint8Array>(`notes/${note.noteId}/open`, undefined, true);
// let stringResponse: string;
// if (xmlResponse instanceof Uint8Array) {
// stringResponse = new TextDecoder().decode(xmlResponse);
// } else {
// stringResponse = xmlResponse;
// }
// const track = new this.L.GPX(stringResponse, {
// markers: {
// startIcon: this.#buildIcon(note.getIcon(), note.getColorClass(), note.title),
// endIcon: this.#buildIcon("bxs-flag-checkered"),
// wptIcons: {
// "": this.#buildIcon("bx bx-pin")
// }
// },
// polyline_options: {
// color: note.getLabelValue("color") ?? "blue"
// }
// });
// track.addTo(this.geoMapWidget.map);
// this.currentTrackData[note.noteId] = track;
// }
#changeState(newState: State) { #changeState(newState: State) {
this._state = newState; this._state = newState;
this.geoMapWidget.$container.toggleClass("placing-note", newState === State.NewNote); this.geoMapWidget.$container.toggleClass("placing-note", newState === State.NewNote);

5
apps/client/src/widgets/view_widgets/geo_view/index.ts
View file

@ -3,7 +3,7 @@ import L from "leaflet";
import type { GPX, LatLng, Map, Marker } from "leaflet"; import type { GPX, LatLng, Map, Marker } from "leaflet";
import SpacedUpdate from "../../../services/spaced_update.js"; import SpacedUpdate from "../../../services/spaced_update.js";
import { t } from "../../../services/i18n.js"; import { t } from "../../../services/i18n.js";
import processNoteWithMarker from "./markers.js"; import processNoteWithMarker, { processNoteWithGpxTrack } from "./markers.js";
import froca from "../../../services/froca.js"; import froca from "../../../services/froca.js";
const TPL = /*html*/` const TPL = /*html*/`
@ -202,7 +202,8 @@ export default class GeoView extends ViewMode<MapData> {
} }
if (childNote.mime === "application/gpx+xml") { if (childNote.mime === "application/gpx+xml") {
// this.#processNoteWithGpxTrack(childNote); const track = await processNoteWithGpxTrack(this.map, childNote);
this.currentTrackData[childNote.noteId] = track;
continue; continue;
} }

33
apps/client/src/widgets/view_widgets/geo_view/markers.ts
View file

@ -4,6 +4,9 @@ import { marker, latLng, divIcon, Map } from "leaflet";
import type FNote from "../../../entities/fnote.js"; import type FNote from "../../../entities/fnote.js";
import note_tooltip from "../../../services/note_tooltip.js"; import note_tooltip from "../../../services/note_tooltip.js";
import openContextMenu from "../../type_widgets/geo_map_context_menu.js"; import openContextMenu from "../../type_widgets/geo_map_context_menu.js";
import server from "../../../services/server.js";
let gpxLoaded = false;
export default function processNoteWithMarker(map: Map, note: FNote, location: string) { export default function processNoteWithMarker(map: Map, note: FNote, location: string) {
const [lat, lng] = location.split(",", 2).map((el) => parseFloat(el)); const [lat, lng] = location.split(",", 2).map((el) => parseFloat(el));
@ -42,6 +45,36 @@ export default function processNoteWithMarker(map: Map, note: FNote, location: s
return newMarker; return newMarker;
} }
export async function processNoteWithGpxTrack(map: Map, note: FNote) {
if (!gpxLoaded) {
await import("leaflet-gpx");
gpxLoaded = true;
}
const xmlResponse = await server.get<string | Uint8Array>(`notes/${note.noteId}/open`, undefined, true);
let stringResponse: string;
if (xmlResponse instanceof Uint8Array) {
stringResponse = new TextDecoder().decode(xmlResponse);
} else {
stringResponse = xmlResponse;
}
const track = new L.GPX(stringResponse, {
markers: {
startIcon: buildIcon(note.getIcon(), note.getColorClass(), note.title),
endIcon: buildIcon("bxs-flag-checkered"),
wptIcons: {
"": buildIcon("bx bx-pin")
}
},
polyline_options: {
color: note.getLabelValue("color") ?? "blue"
}
});
track.addTo(map);
return track;
}
function buildIcon(bxIconClass: string, colorClass?: string, title?: string) { function buildIcon(bxIconClass: string, colorClass?: string, title?: string) {
return divIcon({ return divIcon({
html: /*html*/`\ html: /*html*/`\