Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-10 15:25:51 +01:00
Code Issues Packages Projects Releases Activity

chore(react): reintroduce map type toggles

Browse Source
This commit is contained in:
Elian Doran
2025-10-04 12:55:08 +03:00
parent c127e19cfa
commit 20dcbff68f
3 changed files with 26 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
apps/client/src/widgets/note_map/NoteMap.tsx
View File

@@ -7,6 +7,8 @@ import { useElementSize, useNoteContext, useNoteLabel } from "../react/hooks";
import ForceGraph, { LinkObject, NodeObject } from "force-graph";
import { loadNotesAndRelations, NotesAndRelationsData } from "./data";
import { CssData, setupRendering } from "./rendering";
import ActionButton from "../react/ActionButton";
import { t } from "../../services/i18n";
interface NoteMapProps {
note: FNote;
@@ -19,8 +21,7 @@ type MapType = "tree" | "link";
export default function NoteMap({ note, widgetMode, parentRef }: NoteMapProps) {
const containerRef = useRef<HTMLDivElement>(null);
const styleResolverRef = useRef<HTMLDivElement>(null);
const [ cssData, setCssData ] = useState<CssData>();
const [ mapTypeRaw ] = useNoteLabel(note, "mapType");
const [ mapTypeRaw, setMapType ] = useNoteLabel(note, "mapType");
const mapType: MapType = mapTypeRaw === "tree" ? "tree" : "link";
const graphRef = useRef<ForceGraph<NodeObject, LinkObject<NodeObject>>>();
@@ -35,7 +36,6 @@ export default function NoteMap({ note, widgetMode, parentRef }: NoteMapProps) {
graphRef.current = graph;
const mapRootId = getMapRootNoteId(note.noteId, note, widgetMode);
console.log("Map root ID ", mapRootId);
if (!mapRootId) return;
const labelValues = (name: string) => note.getLabels(name).map(l => l.value) ?? [];
@@ -56,7 +56,7 @@ export default function NoteMap({ note, widgetMode, parentRef }: NoteMapProps) {
});
return () => container.replaceChildren();
}, [ note ]);
}, [ note, mapType ]);
// React to container size
useEffect(() => {
@@ -66,6 +66,24 @@ export default function NoteMap({ note, widgetMode, parentRef }: NoteMapProps) {
return (
<div className="note-map-widget">
<div className="btn-group btn-group-sm map-type-switcher content-floating-buttons top-left" role="group">
<ActionButton
icon="bx bx-network-chart"
text={t("note-map.button-link-map")}
disabled={mapType === "link"}
onClick={() => setMapType("link")}
frame
/>
<ActionButton
icon="bx bx-sitemap"
text={t("note-map.button-tree-map")}
disabled={mapType === "tree"}
onClick={() => setMapType("tree")}
frame
/>
</div>
<div ref={styleResolverRef} class="style-resolver" />
<div ref={containerRef} className="note-map-container" />
</div>