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 link distance

Browse Source
This commit is contained in:
Elian Doran
2025-10-04 14:14:02 +03:00
parent 5efe05490d
commit 0da66617a8
3 changed files with 36 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,6 +11,7 @@ import ActionButton from "../react/ActionButton";
import { t } from "../../services/i18n";
import link_context_menu from "../../menus/link_context_menu";
import appContext from "../../components/app_context";
import Slider from "../react/Slider";
interface NoteMapProps {
note: FNote;
@@ -27,6 +28,8 @@ export default function NoteMap({ note, widgetMode, parentRef }: NoteMapProps) {
const graphRef = useRef<ForceGraph<NodeObject, LinkObject<NodeObject>>>();
const containerSize = useElementSize(parentRef);
const [ fixNodes, setFixNodes ] = useState(false);
const [ linkDistance, setLinkDistance ] = useState(40);
const notesAndRelationsRef = useRef<NotesAndRelationsData>();
// Build the note graph instance.
useEffect(() => {
@@ -71,11 +74,18 @@ export default function NoteMap({ note, widgetMode, parentRef }: NoteMapProps) {
// Set data
graph.graphData(notesAndRelations);
notesAndRelationsRef.current = notesAndRelations;
});
return () => container.replaceChildren();
}, [ note, mapType ]);
useEffect(() => {
if (!graphRef.current || !notesAndRelationsRef.current) return;
graphRef.current.d3Force("link")?.distance(linkDistance);
graphRef.current.graphData(notesAndRelationsRef.current);
}, [ linkDistance ]);
// React to container size
useEffect(() => {
if (!containerSize || !graphRef.current) return;
@@ -110,6 +120,12 @@ export default function NoteMap({ note, widgetMode, parentRef }: NoteMapProps) {
onClick={() => setFixNodes(!fixNodes)}
frame
/>
<Slider
min={1} max={100}
value={linkDistance} onChange={setLinkDistance}
title={t("note_map.link-distance")}
/>
</div>
<div ref={styleResolverRef} class="style-resolver" />