ratibus11 / folders2graph

Display your Obsidian vault folder structure into your graphs.
MIT License
17 stars 3 forks source link

Need help understanding how the plugin works #7

Open BlitzVI opened 4 months ago

BlitzVI commented 4 months ago

Hey, i need help understanding how u coded this plugin because i want to make my own plugin related to adding nodes in the graph aswell but i have no idea where to start and i haven't gotten much help from the discord aswell. I would really appreciate it if i could get some help from you. Thank you very much!

ratibus11 commented 2 months ago

Hi @BlitzVI. The plugin is inspired from drPilman's obsidian-graph-nested-tags plugin.

They both work on the same way: Obsidian uses functions to render its tabs. Depending of the context, the "obsidian engine" will provide data. In the graph tab, those data are the graph nodes the plugin will mutate by adding new "tag nodes" (and link them to the existing nodes). This mutation is made through a custom function that will be executed before the Obsidian renderer. We replace the Obsidian renderer by our custome one. Obsidian will think he's calling its render, but he doesn't know he's actually calling our custom one. We just need to alterate the data and not the whole process, so our "custom renderer" will then call the Obsidian original renderer and pass the mutated data.

Here's an "example code". In normal case:

// Obsidian is calling its renderer to render the tab.
function obsidianRenderer(data) {
    // Do its work. We don't care about how it works.
}

With a "prerenderer":

// Original renderer
function obsidianRenderer(data) {
    // Do its work. We don't care about it.
}

// Our custom renderer
// We reassign our custom renderer to the "Obsidian engine" with Object.setProperty(...);
function customRenderer(data) {
    // We mutate the data.
    // ...

    // As we just want to alterate the data, we call the original renderer with out mutated data.
    return obsidianRenderer(data);
}

It's kinda tricky to edit this kind of part of Obsidian since there is no real documentation about it. We directly mutate the Obsidian app object instead of using the dev API.

Don't forget to keep a copy of the original renderer function. If you unload the plugin, you need to reset the renderer to its original version.

If you need more details, feel free to ask here. If not, you can close the issue. Happy coding!

BlitzVI commented 2 months ago

Hi @BlitzVI. The plugin is inspired from drPilman's obsidian-graph-nested-tags plugin.

They both work on the same way: Obsidian uses functions to render its tabs. Depending of the context, the "obsidian engine" will provide data. In the graph tab, those data are the graph nodes the plugin will mutate by adding new "tag nodes" (and link them to the existing nodes). This mutation is made through a custom function that will be executed before the Obsidian renderer. We replace the Obsidian renderer by our custome one. Obsidian will think he's calling its render, but he doesn't know he's actually calling our custom one. We just need to alterate the data and not the whole process, so our "custom renderer" will then call the Obsidian original renderer and pass the mutated data.

Here's an "example code". In normal case:

// Obsidian is calling its renderer to render the tab.
function obsidianRenderer(data) {
    // Do its work. We don't care about how it works.
}

With a "prerenderer":

// Original renderer
function obsidianRenderer(data) {
    // Do its work. We don't care about it.
}

// Our custom renderer
// We reassign our custom renderer to the "Obsidian engine" with Object.setProperty(...);
function customRenderer(data) {
    // We mutate the data.
    // ...

    // As we just want to alterate the data, we call the original renderer with out mutated data.
    return obsidianRenderer(data);
}

It's kinda tricky to edit this kind of part of Obsidian since there is no real documentation about it. We directly mutate the Obsidian app object instead of using the dev API.

Don't forget to keep a copy of the original renderer function. If you unload the plugin, you need to reset the renderer to its original version.

If you need more details, feel free to ask here. If not, you can close the issue. Happy coding!

Hey tysm for the detailed reply! I've yet to read it but I was wondering if there's another way I can contact u like on discord or something?

ratibus11 commented 2 months ago

Yes, no problem! You can contact me on my email ratibus11@icloud.com or my discord account bastian.lucas!

BlitzVI commented 2 months ago

Yes, no problem! You can contact me on my email ratibus11@icloud.com or my discord account bastian.lucas!

Hey so I just sent you a request on discord again tysm for the help!