GraphRenderer
Unofficial
Renderer for the graph view, managing PixiJS rendering, user interactions, and layout.
Import:
import type { GraphRenderer } from '@obsidian-typings/obsidian-public-latest';Signature:
export interface GraphRendererProperties
| Property | Type | Description | |
|---|---|---|---|
| colors | Record<GraphColor, GraphColorAttributes> | General colors of the elements in the graph view, computed from the app CSS. | |
| containerEl | HTMLDivElement | <div> element containing the graph, with class .view-content. | |
| dragNode | GraphNode | null | Node currently being dragged, if any. | |
| fLineSizeMult | number | Factor for the thickness of the links. | |
| fNodeSizeMult | number | Factor for the size of the nodes. | |
| fShowArrow | boolean | Indicates if arrows should be displayed. | |
| fTextShowMult | number | Text fade threshold. | |
| hanger | Container | Main container to which nodes, links and arrows are added. | |
| height | number | Height of the graph view, in pixel. | |
| hidePowerTag | boolean | Whether to hide the power tag indicator in the graph view. | |
| highlightNode | GraphNode | null | Node currently being highlighted, if any. | |
| idleFrames | number | Number of idle frames. The simulation stops running at 60. | |
| iframeEl | HTMLIFrameElement | <iframe> element in which the graph is rendered. | |
| interactiveEl | HTMLCanvasElement | <canvas> element bound to the event system of GraphRenderer.px to capture events. | |
| keyboardActions | KeyboardActions | Keyboard action bindings for graph interaction. | |
| links | GraphLink[] | List of links currently rendered. | |
| mouseX | null | number | Mouse x coordinate in the graph view. | |
| mouseY | null | number | Mouse y coordinate in the graph view. | |
| nodeLookup | Record<string, GraphNode> | Record of the nodes currently rendered, with GraphNode.id used as key. | |
| nodes | GraphNode[] | List of nodes currently rendered. | |
| nodeScale | number | Scale of the nodes based on the zoom level of the graph view. | |
| panning | boolean | Whether the user is currently panning the graph view. | |
| panvX | number | Current pan velocity along the x axis. | |
| panvY | number | Current pan velocity along the y axis. | |
| panX | number | Current pan offset along the x axis. | |
| panY | number | Current pan offset along the y axis. | |
| powerTag | PowerTag | Power tag configuration for the graph view. | |
| px | Application | PixiJS application rendering everything. | |
| renderTimer | null | number | Timer (request ID) associated to the requestAnimationFrame rendering the graph. | |
| scale | number | Current zoom level of the graph view, interpolated between the previous one and the GraphRenderer.targetScale. | |
| targetScale | number | Target zoom level of the graph view. | |
| textAlpha | number | Current alpha of the nodes names based on the graph scale. | |
| viewport | Coords | Current visible viewport bounds of the graph view. | |
| width | number | Width of the graph view, in pixel. | |
| worker | Worker | Web Worker thread running the graph simulation. | |
| workerResults | WorkerResults | Results received from the graph simulation worker. | |
| zoomCenterX | number | X coordinate of the zoom action. | |
| zoomCenterY | number | Y coordinate of the zoom action. |
Methods
| Method | Returns | Description | |
|---|---|---|---|
| changed() | void | Specify that the renderer has changed and needs to be rendered again. | |
| destroy() | void | Destroy the renderer and release all resources. | |
| destroyGraphics() | void | Destroy all the graphics of the graph. | |
| getBackgroundScreenshot() | HTMLCanvasElement | Capture a screenshot of the graph with the background included. | |
| getHighlightNode() | GraphNode | null | Returns the currently highlighted node, if any. | |
| getTransparentScreenshot() | ICanvas | Capture a screenshot of the graph with a transparent background. | |
| initGraphics() | void | Initialize all the graphics of the graph. | |
| onIframeLoad() | void | Called when the graph iframe finishes loading. | |
| onIframeUnload() | void | Called when the graph iframe is unloaded. | |
| onMouseMove(evt) | void | Handle mouse movement over the graph view. | |
| onNodeClick(evt, id, type) | void | Handle a click on a graph node. | |
| onNodeHover(evt, id, type) | void | Handle hover over a graph node. | |
| onNodeRightClick(evt, id, type) | void | Handle a right-click on a graph node. | |
| onNodeUnhover() | void | Handle the pointer leaving a graph node. | |
| onPointerDown(renderer, evt) | void | Handle a pointer down event on the graph. | |
| onPointerOut() | void | Handle the pointer leaving the graph view. | |
| onPointerOver(renderer, evt) | void | Handle the pointer entering the graph view. | |
| onResize() | void | Handle a resize of the graph container. | |
| onWheel(evt) | void | Handle a wheel (scroll/zoom) event on the graph view. | |
| queueRender() | void | Queue a render frame to be executed on the next animation frame. | |
| renderCallback() | void | Callback invoked on each render frame. | |
| resetPan() | void | Reset the pan offset to the origin. | |
| setData(data) | void | Set the graph data (nodes and links) to render. | |
| setForces(forces) | void | Set the force simulation parameters. | |
| setPan(panX, panY) | void | Set the pan offset to the given coordinates. | |
| setRenderOptions(options) | void | Set the rendering options for the graph view. | |
| setScale(scale) | void | Set the zoom scale of the graph view. | |
| testCSS() | void | Re-read CSS variables and update the graph colors accordingly. | |
| updateZoom() | void | Interpolate the current zoom level towards the target scale. | |
| zoomTo(scale, pointer) | void | Zoom the graph view to the given scale, centered on the given point. |
Links to this page: