zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-16 02:18:29 +08:00
Code Issues Projects Releases Packages Wiki Activity

chore(react): bring back fixing nodes

Browse source
This commit is contained in:
Elian Doran 2025-10-04 13:37:36 +03:00
parent a4d6da72a1
commit 845c76fc42
No known key found for this signature in database
2 changed files with 24 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
apps/client/src/widgets/note_map.ts
View file

@ -15,8 +15,7 @@ const esc = utils.escapeHtml;
const TPL = /*html*/`<div class="note-map-widget"> const TPL = /*html*/`<div class="note-map-widget">
<!-- UI for dragging Notes and link force --> <!-- UI for dragging Notes and link force -->
<div class="btn-group-sm fixnodes-type-switcher content-floating-buttons bottom-left" role="group"> <button type="button" data-toggle="button" class="btn tn-tool-button" title="${}" data-type="moveable"></button>
<button type="button" data-toggle="button" class="btn bx bx-lock-alt tn-tool-button" title="${t("note_map.fix-nodes")}" data-type="moveable"></button>
<input type="range" class="slider" min="1" title="${t("note_map.link-distance")}" max="100" value="40" > <input type="range" class="slider" min="1" title="${t("note_map.link-distance")}" max="100" value="40" >
</div> </div>
@ -70,22 +69,8 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
const ForceGraph = (await import("force-graph")).default; const ForceGraph = (await import("force-graph")).default;
this.graph = new ForceGraph(this.$container[0]) this.graph = new ForceGraph(this.$container[0])
//Code to fixate nodes when dragged
.onNodeDragEnd((node) => {
if (this.fixNodes) {
node.fx = node.x;
node.fy = node.y;
} else {
node.fx = undefined;
node.fy = undefined;
}
})
// Rendering code was here // Rendering code was here
const nodeLinkRatio = data.nodes.length / data.links.length; const nodeLinkRatio = data.nodes.length / data.links.length;
const magnifiedRatio = Math.pow(nodeLinkRatio, 1.5); const magnifiedRatio = Math.pow(nodeLinkRatio, 1.5);
const charge = -20 / magnifiedRatio; const charge = -20 / magnifiedRatio;

23
apps/client/src/widgets/note_map/NoteMap.tsx
View file

@ -26,6 +26,7 @@ export default function NoteMap({ note, widgetMode, parentRef }: NoteMapProps) {
const graphRef = useRef<ForceGraph<NodeObject, LinkObject<NodeObject>>>(); const graphRef = useRef<ForceGraph<NodeObject, LinkObject<NodeObject>>>();
const containerSize = useElementSize(parentRef); const containerSize = useElementSize(parentRef);
const [ fixNodes, setFixNodes ] = useState(false);
// Build the note graph instance. // Build the note graph instance.
useEffect(() => { useEffect(() => {
@ -80,6 +81,19 @@ export default function NoteMap({ note, widgetMode, parentRef }: NoteMapProps) {
graphRef.current.width(containerSize.width).height(containerSize.height); graphRef.current.width(containerSize.width).height(containerSize.height);
}, [ containerSize?.width, containerSize?.height ]); }, [ containerSize?.width, containerSize?.height ]);
// Fixing nodes when dragged.
useEffect(() => {
graphRef.current?.onNodeDragEnd((node) => {
if (fixNodes) {
node.fx = node.x;
node.fy = node.y;
} else {
node.fx = undefined;
node.fy = undefined;
}
})
}, [ fixNodes ]);
return ( return (
<div className="note-map-widget"> <div className="note-map-widget">
<div className="btn-group btn-group-sm map-type-switcher content-floating-buttons top-left" role="group"> <div className="btn-group btn-group-sm map-type-switcher content-floating-buttons top-left" role="group">
@ -87,6 +101,15 @@ export default function NoteMap({ note, widgetMode, parentRef }: NoteMapProps) {
<MapTypeSwitcher type="tree" icon="bx bx-sitemap" text={t("note-map.button-tree-map")} currentMapType={mapType} setMapType={setMapType} /> <MapTypeSwitcher type="tree" icon="bx bx-sitemap" text={t("note-map.button-tree-map")} currentMapType={mapType} setMapType={setMapType} />
</div> </div>
<div class="btn-group-sm fixnodes-type-switcher content-floating-buttons bottom-left" role="group">
<ActionButton
icon="bx bx-lock-alt"
text={t("note_map.fix-nodes")}
className={fixNodes ? "toggled" : ""}
onClick={() => setFixNodes(!fixNodes)}
/>
</div>
<div ref={styleResolverRef} class="style-resolver" /> <div ref={styleResolverRef} class="style-resolver" />
<div ref={containerRef} className="note-map-container" /> <div ref={containerRef} className="note-map-container" />
</div> </div>