jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(rnetwork): convert graph viewer from 2D SVG to 3D WebGL 

Replace custom SVG force-directed layout with 3d-force-graph (Three.js)
loaded via CDN importmap. Left-drag pans, scroll zooms, right-drag orbits.
Nodes rendered as colored spheres with sprite labels and trust badges.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-11 20:25:16 -07:00
parent 28dbb059eb
commit 1f4b28aee1
3 changed files with 526 additions and 638 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1151
modules/rnetwork/components/folk-graph-viewer.ts
View File

File diff suppressed because it is too large Load Diff

12
modules/rnetwork/mod.ts
View File

@ -12,6 +12,17 @@ import { getModuleInfoList } from "../../shared/module";
import type { RSpaceModule } from "../../shared/module"; import type { RSpaceModule } from "../../shared/module";
import { renderLanding } from "./landing"; import { renderLanding } from "./landing";
// ── CDN importmap for Three.js + 3d-force-graph ──
const GRAPH3D_IMPORTMAP = `<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/",
"3d-force-graph": "https://cdn.jsdelivr.net/npm/3d-force-graph@1/dist/3d-force-graph.mjs"
}
}
</script>`;
const routes = new Hono(); const routes = new Hono();
const TWENTY_API_URL = process.env.TWENTY_API_URL || "https://crm.rspace.online"; const TWENTY_API_URL = process.env.TWENTY_API_URL || "https://crm.rspace.online";
@ -375,6 +386,7 @@ routes.get("/", (c) => {
moduleId: "rnetwork", moduleId: "rnetwork",
spaceSlug: space, spaceSlug: space,
modules: getModuleInfoList(), modules: getModuleInfoList(),
head: GRAPH3D_IMPORTMAP,
body: `<div class="rapp-nav" style="padding:0 1rem;margin-top:8px"><span class="rapp-nav__title"></span><a href="/${space}/rnetwork/crm" class="rapp-nav__btn--app-toggle">Open CRM</a></div> body: `<div class="rapp-nav" style="padding:0 1rem;margin-top:8px"><span class="rapp-nav__title"></span><a href="/${space}/rnetwork/crm" class="rapp-nav__btn--app-toggle">Open CRM</a></div>
<folk-graph-viewer space="${space}"></folk-graph-viewer>`, <folk-graph-viewer space="${space}"></folk-graph-viewer>`,
scripts: `<script type="module" src="/modules/rnetwork/folk-graph-viewer.js"></script>`, scripts: `<script type="module" src="/modules/rnetwork/folk-graph-viewer.js"></script>`,

1
vite.config.ts
View File

@ -644,6 +644,7 @@ export default defineConfig({
fileName: () => "folk-graph-viewer.js", fileName: () => "folk-graph-viewer.js",
}, },
rollupOptions: { rollupOptions: {
external: ["three", "three/addons/", "3d-force-graph"],
output: { output: {
entryFileNames: "folk-graph-viewer.js", entryFileNames: "folk-graph-viewer.js",
}, },