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

chore(react): fix obtaining of CSS data for note map

Browse Source
This commit is contained in:
Elian Doran
2025-10-04 12:31:35 +03:00
parent e32237559e
commit c127e19cfa
1 changed files with 8 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,27 +23,6 @@ export default function NoteMap({ note, widgetMode, parentRef }: NoteMapProps) {
const [ mapTypeRaw ] = useNoteLabel(note, "mapType"); const [ mapTypeRaw ] = useNoteLabel(note, "mapType");
const mapType: MapType = mapTypeRaw === "tree" ? "tree" : "link"; const mapType: MapType = mapTypeRaw === "tree" ? "tree" : "link";
useEffect(() => {
if (!containerRef.current || !styleResolverRef.current) return;
setCssData(getCssData(containerRef.current, styleResolverRef.current));
}, []);
return (
<div className="note-map-widget">
<div ref={styleResolverRef} class="style-resolver" />
<NoteGraph parentRef={parentRef} containerRef={containerRef} note={note} widgetMode={widgetMode} mapType={mapType} cssData={cssData} />
</div>
)
}
function NoteGraph({ containerRef, parentRef, note, widgetMode, mapType, cssData }: {
containerRef: RefObject<HTMLDivElement>;
parentRef: RefObject<HTMLElement>;
note: FNote;
widgetMode: NoteMapWidgetMode;
mapType: MapType;
cssData: CssData;
}) {
const graphRef = useRef<ForceGraph<NodeObject, LinkObject<NodeObject>>>(); const graphRef = useRef<ForceGraph<NodeObject, LinkObject<NodeObject>>>();
const containerSize = useElementSize(parentRef); const containerSize = useElementSize(parentRef);
@@ -63,6 +42,8 @@ function NoteGraph({ containerRef, parentRef, note, widgetMode, mapType, cssData
const excludeRelations = labelValues("mapExcludeRelation"); const excludeRelations = labelValues("mapExcludeRelation");
const includeRelations = labelValues("mapIncludeRelation"); const includeRelations = labelValues("mapIncludeRelation");
loadNotesAndRelations(mapRootId, excludeRelations, includeRelations, mapType).then((notesAndRelations) => { loadNotesAndRelations(mapRootId, excludeRelations, includeRelations, mapType).then((notesAndRelations) => {
if (!containerRef.current || !styleResolverRef.current) return;
const cssData = getCssData(containerRef.current, styleResolverRef.current);
setupRendering(graph, { setupRendering(graph, {
cssData, cssData,
noteId: note.noteId, noteId: note.noteId,
@@ -83,7 +64,12 @@ function NoteGraph({ containerRef, parentRef, note, widgetMode, mapType, cssData
graphRef.current.width(containerSize.width).height(containerSize.height); graphRef.current.width(containerSize.width).height(containerSize.height);
}, [ containerSize?.width, containerSize?.height ]); }, [ containerSize?.width, containerSize?.height ]);
return <div ref={containerRef} className="note-map-container" />; return (
<div className="note-map-widget">
<div ref={styleResolverRef} class="style-resolver" />
<div ref={containerRef} className="note-map-container" />
</div>
)
} }
function getCssData(container: HTMLElement, styleResolver: HTMLElement): CssData { function getCssData(container: HTMLElement, styleResolver: HTMLElement): CssData {