Draggable notes

[CobriMediaJulien]

@zadam
I just added 4 lines of code to make the note mape even more usefull. But unfortunetly i don´t know how to compile it or create a .exe. Do you mind adding it to the next main version you release? I think it´s also usefull for others and it´s not a big change.

I know, trilium is in maintance mode. Just a suggestion. Here a Gif how the code provides draggable notes in the note map for better analysis:

All you need to do is add this to the note_map.js file when creating the graph.

this.graph
.onNodeDragEnd(node => {
node.fx = node.x;
node.fy = node.y;
}

I would appreciate any feedback. It works in the browser. Didn´t test it in desktop cause i don´t know how to compile.

[CobriMediaJulien]

Hey guys, thanks to @perfectra1n i was able to compile the exe files.

Unfortunately my changes and the code i did add in the src\public\app\widgets\note_map.js are not transferred to the build .exe file. I don´t understand why. Maybe sb. can help me. I would be interested in improving the note_map further in the future regarding the forces pulling at the notes.

This code makes notes draggable in the dev env:

async refreshWithNote(note) {
        this.$widget.show();

        this.css = {
            fontFamily: this.$container.css("font-family"),
            textColor: this.rgb2hex(this.$container.css("color")),
            mutedTextColor: this.rgb2hex(this.$styleResolver.css("color"))
        };

        this.mapType = this.note.getLabelValue("mapType") === "tree" ? "tree" : "link";

        await libraryLoader.requireLibrary(libraryLoader.FORCE_GRAPH);

        this.graph = ForceGraph()(this.$container[0])
            .width(this.$container.width())
            .height(this.$container.height())
            .onZoom(zoom => this.setZoomLevel(zoom.k))
            .d3AlphaDecay(0.01)
            .d3VelocityDecay(0.08)
            .nodeCanvasObject((node, ctx) => this.paintNode(node, this.getColorForNode(node), ctx))
            .nodePointerAreaPaint((node, ctx) => this.paintNode(node, this.getColorForNode(node), ctx))
            .nodePointerAreaPaint((node, color, ctx) => {
                ctx.fillStyle = color;
                ctx.beginPath();
                ctx.arc(node.x, node.y, this.noteIdToSizeMap[node.id], 0, 2 * Math.PI, false);
                ctx.fill();
            })
            .nodeLabel(node => esc(node.name))
            .maxZoom(7)
            .warmupTicks(30)
            .linkDirectionalArrowLength(5)
            .linkDirectionalArrowRelPos(1)
            .linkWidth(1)
            .linkColor(() => this.css.mutedTextColor)
            .onNodeClick(node => appContext.tabManager.getActiveContext().setNote(node.id))
            .onNodeRightClick((node, e) => linkContextMenuService.openContextMenu(node.id, e));

        if (this.mapType === 'link') {
            this.graph
                .linkLabel(l => `${esc(l.source.name)} - <strong>${esc(l.name)}</strong> - ${esc(l.target.name)}`)
                .linkCanvasObject((link, ctx) => this.paintLink(link, ctx))
                .linkCanvasObjectMode(() => "after");
        }

        const mapRootNoteId = this.getMapRootNoteId();
        const data = await this.loadNotesAndRelations(mapRootNoteId);

        const nodeLinkRatio = data.nodes.length / data.links.length;
        const magnifiedRatio = Math.pow(nodeLinkRatio, 1.5);
        const charge = -20 / magnifiedRatio;
        const boundedCharge = Math.min(-3, charge);

        this.graph.d3Force('link').distance(40);
        this.graph.d3Force('center').strength(0.2);
        this.graph.d3Force('charge').strength(boundedCharge);
        this.graph.d3Force('charge').distanceMax(1000);
        this.graph.onNodeDragEnd(node => {
            node.fx = node.x;
            node.fy = node.y;
        });
        this.renderData(data);
    }

Iz allows me to drag the note like in the video but only if I start it via npm run start-server:

Note_Map_-_Trilium.mp4

In the built .exe file (build with the skript in ./bin) for the windows app (desktop), the functionality is gone and the code in the dev mode of the electron app doesn´t include my changes. I checked it in the started app, entering dev mode there via ctr+shift+i:

async refreshWithNote(e) {
                this.$widget.show(),
                this.css = {
                    fontFamily: this.$container.css("font-family"),
                    textColor: this.rgb2hex(this.$container.css("color")),
                    mutedTextColor: this.rgb2hex(this.$styleResolver.css("color"))
                },
                this.mapType = "tree" === this.note.getLabelValue("mapType") ? "tree" : "link",
                await at.A.requireLibrary(at.A.FORCE_GRAPH),
                this.graph = ForceGraph()(this.$container[0]).width(this.$container.width()).height(this.$container.height()).onZoom((t=>this.setZoomLevel(t.k))).d3AlphaDecay(.01).d3VelocityDecay(.08).nodeCanvasObject(((t,e)=>this.paintNode(t, this.getColorForNode(t), e))).nodePointerAreaPaint(((t,e)=>this.paintNode(t, this.getColorForNode(t), e))).nodePointerAreaPaint(((t,e,n)=>{
                    n.fillStyle = e,
                    n.beginPath(),
                    n.arc(t.x, t.y, this.noteIdToSizeMap[t.id], 0, 2 * Math.PI, !1),
                    n.fill()
                }
                )).nodeLabel((t=>Rt(t.name))).maxZoom(7).warmupTicks(30).linkDirectionalArrowLength(5).linkDirectionalArrowRelPos(1).linkWidth(1).linkColor((()=>this.css.mutedTextColor)).onNodeClick((e=>t.default.tabManager.getActiveContext().setNote(e.id))).onNodeRightClick(((t,e)=>Et.A.openContextMenu(t.id, e))),
                "link" === this.mapType && this.graph.linkLabel((t=>`${Rt(t.source.name)} - <strong>${Rt(t.name)}</strong> - ${Rt(t.target.name)}`)).linkCanvasObject(((t,e)=>this.paintLink(t, e))).linkCanvasObjectMode((()=>"after"));
                const n = this.getMapRootNoteId()
                  , i = await this.loadNotesAndRelations(n)
                  , o = i.nodes.length / i.links.length
                  , s = -20 / Math.pow(o, 1.5)
                  , a = Math.min(-3, s);
                this.graph.d3Force("link").distance(40),
                this.graph.d3Force("center").strength(.2),
                this.graph.d3Force("charge").strength(a),
                this.graph.d3Force("charge").distanceMax(1e3),
                this.renderData(i)
            }

Somebody who can help me make this work? Seems like the desktop App or the electron-builder doesn´t use my changes but some other scrips...

I would appreciate any help. For me this is one of the last features that makes the App perfect because it does help analysis a big highly relates mass if notes.

Greetings.

[CobriMediaJulien]

I DID IT!

You have to give it a new Version in the Package.json

[CobriMediaJulien]

NoteMap-TriliumNotes2024-06-2500-33-35-ezgif.com-crop-video.mp4

Updated version. Now u can turn the fixed position of nodes after dragging on and off. If u drag a note again the position resets and will be relative again.

I would like to update the note_map further. If sb. can help me adding and loading a package i could tackle overlapped and colliding nodes in the graph. I have allready a solution in mind but im struggling with loading a package. I think for an expierenced dev thats less than 15-30 Min. I would handle the adjustments on the graph then and playing around with the library.

Would appreciate support.