rodydavis
b9e42c3ef4
Build and Deploy / build-and-deploy (push) Has been cancelled
- lit-force-graph: Refactored for instance reuse, better lifecycle management, and added dynamic imports for AR/VR modes. - lit-html-table: Improved visual design, readability of headers, and fixed reactivity in editable mode. - lit-draggable-dom: Fixed clipping issues by switching to relative/absolute positioning and resolved a panning speed bug caused by CSS variable inheritance.
46 lines
1.5 KiB
TypeScript
46 lines
1.5 KiB
TypeScript
import ForceGraph from "3d-force-graph";
|
|
import { RenderContext } from "../classes/context.js";
|
|
|
|
export function render(context: RenderContext) {
|
|
const graph = context.instance || ForceGraph({
|
|
controlType: "trackball",
|
|
rendererConfig: { antialias: true, alpha: true },
|
|
});
|
|
const style = getComputedStyle(context.element);
|
|
const lineColor = style.getPropertyValue("--graph-line-color").trim() || "#555";
|
|
const bgColor = style.getPropertyValue("--graph-background-color").trim() || "#000011";
|
|
const nodeColor = style.getPropertyValue("--graph-node-color").trim() || "#999";
|
|
const width = context.element.clientWidth || Number(style.width.slice(0, -2)) || window.innerWidth;
|
|
const height = context.element.clientHeight || Number(style.height.slice(0, -2)) || window.innerHeight;
|
|
|
|
if (!context.instance) {
|
|
graph(context.element);
|
|
}
|
|
|
|
graph
|
|
.graphData(context.data)
|
|
.width(width)
|
|
.height(height)
|
|
.showNavInfo(false)
|
|
.linkColor(() => lineColor)
|
|
.backgroundColor(bgColor)
|
|
.nodeThreeObject((node: any) => {
|
|
const color = node.color ?? nodeColor;
|
|
node.color = color;
|
|
return false as any;
|
|
})
|
|
.nodeThreeObjectExtend(true)
|
|
.onNodeHover((node: any, prev: any) => {
|
|
if (node) {
|
|
const graphNode = context.data.nodes.find((n) => n.id === node.id);
|
|
context.onHover(graphNode);
|
|
}
|
|
if (prev) {
|
|
context.onHover(undefined);
|
|
}
|
|
})
|
|
.cooldownTicks(100);
|
|
|
|
return graph;
|
|
}
|