gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-04 05:28:59 +01:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

refactor(react/collections/geomap): display reactive icon, text

Browse Source
This commit is contained in:
Elian Doran 2025-09-04 16:17:27 +03:00
parent 3382ccc7bf
commit 4a02981c09
No known key found for this signature in database
3 changed files with 36 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
apps/client/src/widgets/collections/geomap/index.tsx
View File

@ -1,13 +1,15 @@
import Map from "./map"; import Map from "./map";
import "./index.css"; import "./index.css";
import { ViewModeProps } from "../interface"; import { ViewModeProps } from "../interface";
import { useNoteLabel, useSpacedUpdate } from "../../react/hooks"; import { useNoteLabel, useNoteProperty, useSpacedUpdate } from "../../react/hooks";
import { DEFAULT_MAP_LAYER_NAME } from "./map_layer"; import { DEFAULT_MAP_LAYER_NAME } from "./map_layer";
import { LatLng } from "leaflet"; import { divIcon, LatLng } from "leaflet";
import { useEffect, useState } from "preact/hooks"; import { useEffect, useMemo, useState } from "preact/hooks";
import Marker from "./marker"; import Marker from "./marker";
import froca from "../../../services/froca"; import froca from "../../../services/froca";
import FNote from "../../../entities/fnote"; import FNote from "../../../entities/fnote";
import markerIcon from "leaflet/dist/images/marker-icon.png";
import markerIconShadow from "leaflet/dist/images/marker-shadow.png";
const DEFAULT_COORDINATES: [number, number] = [3.878638227135724, 446.6630455551659]; const DEFAULT_COORDINATES: [number, number] = [3.878638227135724, 446.6630455551659];
const DEFAULT_ZOOM = 2; const DEFAULT_ZOOM = 2;
@ -51,7 +53,33 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
function NoteMarker({ note }: { note: FNote }) { function NoteMarker({ note }: { note: FNote }) {
const [ location ] = useNoteLabel(note, LOCATION_ATTRIBUTE); const [ location ] = useNoteLabel(note, LOCATION_ATTRIBUTE);
const [ colorClass ] = useNoteLabel(note, "colorClass");
useNoteLabel(note, "iconClass"); // React to icon changes.
const title = useNoteProperty(note, "title");
const iconClass = note.getIcon();
const latLng = location?.split(",", 2).map((el) => parseFloat(el)) as [ number, number ] | undefined; const latLng = location?.split(",", 2).map((el) => parseFloat(el)) as [ number, number ] | undefined;
const icon = useMemo(() => buildIcon(iconClass, colorClass ?? undefined, title, note.noteId), [ iconClass, colorClass, title, note.noteId]);
return latLng && <Marker coordinates={latLng} /> return latLng && <Marker
coordinates={latLng}
icon={icon}
/>
}
function buildIcon(bxIconClass: string, colorClass?: string, title?: string, noteIdLink?: string) {
let html = /*html*/`\
<img class="icon" src="${markerIcon}" />
<img class="icon-shadow" src="${markerIconShadow}" />
<span class="bx ${bxIconClass} ${colorClass ?? ""}"></span>
<span class="title-label">${title ?? ""}</span>`;
if (noteIdLink) {
html = `<div data-href="#root/${noteIdLink}">${html}</div>`;
}
return divIcon({
html,
iconSize: [25, 41],
iconAnchor: [12, 41]
});
} }

7
apps/client/src/widgets/collections/geomap/marker.tsx
View File

@ -1,19 +1,20 @@
import { useContext, useEffect } from "preact/hooks"; import { useContext, useEffect } from "preact/hooks";
import { ParentMap } from "./map"; import { ParentMap } from "./map";
import { marker } from "leaflet"; import { DivIcon, Icon, marker } from "leaflet";
export interface MarkerProps { export interface MarkerProps {
coordinates: [ number, number ]; coordinates: [ number, number ];
icon?: Icon | DivIcon;
} }
export default function Marker({ coordinates }: MarkerProps) { export default function Marker({ coordinates, icon }: MarkerProps) {
const parentMap = useContext(ParentMap); const parentMap = useContext(ParentMap);
useEffect(() => { useEffect(() => {
if (!parentMap) return; if (!parentMap) return;
const newMarker = marker(coordinates, { const newMarker = marker(coordinates, {
icon
}); });
newMarker.addTo(parentMap); newMarker.addTo(parentMap);

22
apps/client/src/widgets/view_widgets/geo_view/markers.ts
View File

@ -1,5 +1,3 @@
import markerIcon from "leaflet/dist/images/marker-icon.png";
import markerIconShadow from "leaflet/dist/images/marker-shadow.png";
import { marker, latLng, divIcon, Map, type Marker } from "leaflet"; import { marker, latLng, divIcon, Map, type Marker } from "leaflet";
import type FNote from "../../../entities/fnote.js"; import type FNote from "../../../entities/fnote.js";
import openContextMenu from "./context_menu.js"; import openContextMenu from "./context_menu.js";
@ -11,8 +9,6 @@ import L from "leaflet";
let gpxLoaded = false; let gpxLoaded = false;
export default function processNoteWithMarker(map: Map, note: FNote, location: string, isEditable: boolean) { export default function processNoteWithMarker(map: Map, note: FNote, location: string, isEditable: boolean) {
const icon = buildIcon(note.getIcon(), note.getColorClass(), note.title, note.noteId);
const newMarker = marker(latLng(lat, lng), { const newMarker = marker(latLng(lat, lng), {
icon, icon,
draggable: isEditable, draggable: isEditable,
@ -78,21 +74,3 @@ export async function processNoteWithGpxTrack(map: Map, note: FNote) {
track.addTo(map); track.addTo(map);
return track; return track;
} }
function buildIcon(bxIconClass: string, colorClass?: string, title?: string, noteIdLink?: string) {
let html = /*html*/`\
<img class="icon" src="${markerIcon}" />
<img class="icon-shadow" src="${markerIconShadow}" />
<span class="bx ${bxIconClass} ${colorClass ?? ""}"></span>
<span class="title-label">${title ?? ""}</span>`;
if (noteIdLink) {
html = `<div data-href="#root/${noteIdLink}">${html}</div>`;
}
return divIcon({
html,
iconSize: [25, 41],
iconAnchor: [12, 41]
});
}