mirror of
https://github.com/foambubble/foam.git
synced 2026-04-24 03:01:01 -04:00
* Add graph style to VSCode settings * Update default to an empty object * Add function to retrieve the graph style from the settings * Implement the graph custom styling setting The implementation makes use of the webview communication mechanism to switch messages between the webview and the graph. It works as follows: - When the webview is loaded, it now sends a single request to VSCode, the request asks VSCode for the graph style - When VSCode answers with the style, the graph style is updated and the webview loading process continues as normal. The style change does not modify the API, in fact it makes use of the shadiest programming tatic ever, *global variables* to remain compatible. The style object *currently* supports four base fields: - background: string - fontSize: int - highlightedForeground: string - node: object - note: string - nonExistingNote: string - unknown: string * Simplify null handling logic * Remove debug logs * Rename style setting * Rename message style type * Remove forgotten debug log * Refactor the code to match model & action * Add missing break * Allow for dynamic style updates * Fix the window loading bug * Implement a permanent fix to the bug * Replace `nonExistingNote` with `placeholder` * Include the new graph style feature in the docs * Remove unnecessary async * Remove unused case
1.3 KiB
1.3 KiB
Graph Visualisation
Foam comes with a graph visualisation. The graph will:
- allow you to highlight a node by hovering on it, to quickly see how it's connected to the rest of your notes
- allow you to select one or more (by keeping
SHIFTpressed while selecting) nodes by clicking on them, to better understand the structure of your notes - to navigate to a note by clicking on it while pressing
CTRLorCMD - automatically center the graph on the currently edited note, to immediately see it's connections
Custom Graph Styles
Currently, custom graph styles are supported through the foam.graph.style setting.
A sample configuration object is provided below:
"background": "#202020",
"fontSize": 12,
"highlightedForeground": "#f9c74f",
"node": {
"note": "#277da1",
"placeholder": "#545454",
"unknown": "#f94144"
}
Markdown Links
Another extension that provides a great graph visualisation is Markdown Links. The extension doesn't use the Foam model, so discrepancies might arise, but it's a great visualisation extension nonetheless!

