fix(lit-components): fix rendering and interaction issues in force-graph, html-table, and draggable-dom

- 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.
2026-05-17 00:41:14 -07:00
parent bbdbeb9788
commit b9e42c3ef4
253 changed files with 2555 additions and 4471 deletions
@@ -0,0 +1,45 @@
+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;
+}