gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-28 10:08:52 +01:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

refactor(react/collections): move layer name to view

Browse Source
This commit is contained in:
Elian Doran 2025-09-03 23:35:29 +03:00
parent 1969ce562a
commit 330b17bff8
No known key found for this signature in database
2 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,15 +1,21 @@
import Map from "./map"; import Map from "./map";
import "./index.css"; import "./index.css";
import { ViewModeProps } from "../interface";
import { useNoteLabel } from "../../react/hooks";
import { DEFAULT_MAP_LAYER_NAME } from "./map_layer";
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;
export default function GeoView() { export default function GeoView({ note }: ViewModeProps) {
const [ layerName ] = useNoteLabel(note, "map:style");
return ( return (
<div className="geo-view"> <div className="geo-view">
<Map <Map
coordinates={DEFAULT_COORDINATES} coordinates={DEFAULT_COORDINATES}
zoom={DEFAULT_ZOOM} zoom={DEFAULT_ZOOM}
layerName={layerName ?? DEFAULT_MAP_LAYER_NAME}
/> />
</div> </div>
); );

16
apps/client/src/widgets/collections/geomap/map.tsx
View File

@ -1,19 +1,17 @@
import { useEffect, useRef, useState } from "preact/hooks"; import { useEffect, useRef, useState } from "preact/hooks";
import L, { LatLng, Layer } from "leaflet"; import L, { LatLng, Layer } from "leaflet";
import "leaflet/dist/leaflet.css"; import "leaflet/dist/leaflet.css";
import { useNoteContext, useNoteLabel } from "../../react/hooks"; import { MAP_LAYERS } from "./map_layer";
import { DEFAULT_MAP_LAYER_NAME, MAP_LAYERS } from "./map_layer";
interface MapProps { interface MapProps {
coordinates: LatLng | [number, number]; coordinates: LatLng | [number, number];
zoom: number; zoom: number;
layerName: string;
} }
export default function Map({ coordinates, zoom }: MapProps) { export default function Map({ coordinates, zoom, layerName }: MapProps) {
const mapRef = useRef<L.Map>(null); const mapRef = useRef<L.Map>(null);
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const { note } = useNoteContext();
const [ layerName ] = useNoteLabel(note, "map:style");
useEffect(() => { useEffect(() => {
if (!containerRef.current) return; if (!containerRef.current) return;
@ -26,7 +24,7 @@ export default function Map({ coordinates, zoom }: MapProps) {
const [ layer, setLayer ] = useState<Layer>(); const [ layer, setLayer ] = useState<Layer>();
useEffect(() => { useEffect(() => {
async function load() { async function load() {
const layerData = MAP_LAYERS[layerName ?? DEFAULT_MAP_LAYER_NAME]; const layerData = MAP_LAYERS[layerName];
if (layerData.type === "vector") { if (layerData.type === "vector") {
const style = (typeof layerData.style === "string" ? layerData.style : await layerData.style()); const style = (typeof layerData.style === "string" ? layerData.style : await layerData.style());
@ -62,9 +60,5 @@ export default function Map({ coordinates, zoom }: MapProps) {
mapRef.current.setView(coordinates, zoom); mapRef.current.setView(coordinates, zoom);
}, [ mapRef, coordinates, zoom ]); }, [ mapRef, coordinates, zoom ]);
return ( return <div ref={containerRef} className="geo-map-container" />;
<div ref={containerRef} className="geo-map-container">
</div>
);
} }