FHS-Creative-Technologies · thekatze · Jul 17, 2025 · Jul 8, 2025 · Jul 8, 2025 · Jul 8, 2025
diff --git a/playground/csharp/Program.cs b/playground/csharp/Program.cs
@@ -46,6 +46,37 @@ int test(int a, int b)
     Z = 37,
 };
 
+var nested = new NestedClass
+{
+    mat = new Matrix()
+    {
+        Row0 = new Vector
+        {
+            X = 32,
+            Y = 64,
+            Z = 128,
+        },
+
+        Row1 = new Vector
+        {
+            X = 1,
+            Y = 2,
+            Z = 3,
+        },
+
+        Row2 = new Vector
+        {
+            X = 5,
+            Y = 6,
+            Z = 9,
+        },
+    },
+
+    name = "mat",
+    age = 33
+};
+
+
 var result = mat.Apply(vec);
 
 for (int i = 0; i < 10; ++i)
@@ -77,3 +108,11 @@ public Vector Apply(Vector target)
         };
     }
 }
+
+class NestedClass
+{
+    public required Matrix mat { get; init; }
+    public required string name { get; init; }
+    public required int age { get; init; }
+}
+
diff --git a/server/index.html b/server/index.html
@@ -10,7 +10,7 @@
   <title>dapviz</title>
 </head>
 
-<body style="margin: 0; padding: 0; background-color: #2e2e2e;">
+<body style="margin: 0; padding: 0; background-color: #1d2021;">
   <div id="app" style="height: 100vh"></div>
   <script type="module" src="/src/main.tsx"></script>
 </body>

diff --git a/server/src/App.tsx b/server/src/App.tsx
@@ -3,6 +3,7 @@ import DapvizProvider, { useDapviz } from "./DapvizProvider";
 import Visualizer from "./Visualizer";
 import Controls from "./Controls";
 import { useState } from "react";
+import { ThemeProvider } from "./ThemeProvider";
 
 const NoConnectionError = () => (
   <h1 style={{ margin: "auto", textAlign: "center" }}>No Connection</h1>
@@ -24,11 +25,13 @@ const DapvizApp = () => {
 }
 
 const App = () => (
-  <DapvizProvider
-    noConnection={<NoConnectionError />}
-  >
-    <DapvizApp />
-  </DapvizProvider>
+  <ThemeProvider>
+    <DapvizProvider
+      noConnection={<NoConnectionError />}
+    >
+      <DapvizApp />
+    </DapvizProvider>
+  </ThemeProvider>
 );
 
 export default App;

diff --git a/server/src/HeapConnectionsProvider.tsx b/server/src/HeapConnectionsProvider.tsx
@@ -0,0 +1,141 @@
+import { Variable } from "./DapvizProvider";
+import { QuadraticBezierLine, QuadraticBezierLineRef } from "@react-three/drei";
+import React, { createContext, useContext, useMemo, useRef } from "react";
+import { useCallback, useState } from "react";
+import * as THREE from "three";
+import { useFrame } from "@react-three/fiber";
+import { useTheme } from "./ThemeProvider";
+
+export type HeapConnectionContextType = {
+  registerNode: (id: number, ref: React.RefObject<THREE.Group | null>) => void;
+  unregisterNode: (id: number) => void;
+};
+
+export const HeapConnectionContext = createContext<HeapConnectionContextType | null>(null);
+
+export const useHeapConnections = () => {
+  const context = useContext(HeapConnectionContext);
+  if (!context) {
+    throw new Error("useHeapConnections called outside of HeapConnectionsProvider");
+  }
+  return context;
+}
+
+interface ConnectionLineProps {
+  parentRef: React.RefObject<THREE.Group | null>;
+  childRef: React.RefObject<THREE.Group | null>;
+}
+
+const ConnectionLine = ({ parentRef, childRef }: ConnectionLineProps) => {
+  const theme = useTheme();
+
+  const lineRef = useRef<QuadraticBezierLineRef>(null);
+
+  const startCircleRef = useRef<THREE.Mesh>(null);
+  const endCircleRef = useRef<THREE.Mesh>(null);
+
+  useFrame(() => {
+    if (!parentRef.current || !childRef.current || !lineRef.current) return;
+
+    const startPos = new THREE.Vector3();
+    const endPos = new THREE.Vector3();
+    const midPos = new THREE.Vector3();
+    const box = new THREE.Box3();
+    const size = new THREE.Vector3();
+
+    parentRef.current.getWorldPosition(startPos);
+    childRef.current.getWorldPosition(endPos);
+
+    box.setFromObject(parentRef.current);
+    box.getSize(size);
+    const startOffset = size.x / 2;
+
+    box.setFromObject(childRef.current);
+    box.getSize(size);
+    const endOffset = size.x / 2;
+
+    const padding = 3;
+
+    const finalStart = startPos.clone();
+    finalStart.x += startOffset + padding;
+
+    const finalEnd = endPos.clone();
+    finalEnd.x -= endOffset + padding;
+
+    midPos.addVectors(finalStart, finalEnd).multiplyScalar(0.5);
+    midPos.y += 80;
+
+    lineRef.current.setPoints(finalStart, finalEnd, midPos);
+    startCircleRef.current?.position.copy(finalStart);
+    endCircleRef.current?.position.copy(finalEnd);
+  });
+
+  return (
+    <>
+      <QuadraticBezierLine
+        ref={lineRef}
+        start={[0, 0, 0]}
+        end={[0, 0, 0]}
+        color={theme.connection.line}
+        lineWidth={1}
+      />
+
+      <mesh ref={startCircleRef}>
+        <circleGeometry args={[2.5, 16]} />
+        <meshBasicMaterial color={theme.connection.start} />
+      </mesh>
+      <mesh ref={endCircleRef}>
+        <circleGeometry args={[2.5, 16]} />
+        <meshBasicMaterial color={theme.connection.end} />
+      </mesh>
+    </>
+  );
+}
+
+type VariableWithParent = Variable & { parent: NonNullable<Variable["parent"]> };
+
+function hasParent(v: Variable): v is VariableWithParent {
+  return !!v.parent && v.reference > 0;
+}
+
+export const HeapConnectionsProvider = ({ children, allVariables }: { children: React.ReactNode, allVariables: Variable[] }) => {
+  const [nodeRefs, setNodeRefs] = useState<Map<number, React.RefObject<THREE.Group | null>>>(new Map());
+
+  const registerNode = useCallback((id: number, ref: React.RefObject<THREE.Group | null>) => {
+    setNodeRefs(prev => new Map(prev).set(id, ref));
+  }, [setNodeRefs]);
+
+  const unregisterNode = useCallback((id: number) => {
+    setNodeRefs(prev => {
+      const newMap = new Map(prev);
+      newMap.delete(id);
+      return newMap;
+    });
+  }, [setNodeRefs]);
+
+  const connections = useMemo(() =>
+    allVariables.filter(hasParent), [allVariables]
+  );
+
+  return (
+    <HeapConnectionContext.Provider value={{ registerNode, unregisterNode }}>
+      {children}
+
+      <group>
+        {connections.map(variable => {
+          const parentRef = nodeRefs.get(variable.parent);
+          const childRef = nodeRefs.get(variable.reference);
+
+          if (!parentRef || !childRef) return null;
+          return (
+            <ConnectionLine
+              key={`${variable.parent}-${variable.reference}`}
+              parentRef={parentRef}
+              childRef={childRef}
+            />
+          );
+        })}
+      </group>
+    </HeapConnectionContext.Provider>
+  );
+}
diff --git a/server/src/ThemeProvider.tsx b/server/src/ThemeProvider.tsx
@@ -0,0 +1,63 @@
+import { createContext, ReactNode, useContext } from "react"
+
+interface AppTheme {
+  grid: {
+    cell: string,
+    section: string,
+  },
+  text: {
+    primary: string,
+    secondary: string,
+    type: string,
+  },
+  node: {
+    background: string,
+    backgroundHover: string,
+    border: string,
+    divider: string,
+  },
+  connection: {
+    line: string,
+    start: string,
+    end: string,
+  },
+}
+
+export const gruvboxTheme: AppTheme = {
+  grid: {
+    cell: "#3c3836",
+    section: "#504945",
+  },
+  text: {
+    primary: "#ebdbb2",
+    secondary: "#a89984",
+    type: "#d65d0e",
+  },
+  node: {
+    background: "#282828",
+    backgroundHover: "#504945",
+    border: "#504945",
+    divider: "#4a4a5a",
+  },
+  connection: {
+    line: "#a89984",
+    start: "#689d6a",
+    end: "#d79921",
+  }
+}
+
+const ThemeContext = createContext(gruvboxTheme);
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme called outside of ThemeProvider");
+  }
+  return context;
+}
+
+export const ThemeProvider = ({ children }: { children: ReactNode }) => {
+  return <ThemeContext.Provider value={gruvboxTheme}>
+    {children}
+  </ThemeContext.Provider>;
+};