Add column hit testing and align column defaults

packages/viewer/src/components/renderers/column/column-renderer.tsx

@@ -181,23 +181,55 @@ function FlatEndedBeam({
       [3, 7, 4, 0],
     ];
     const positions: number[] = [];
-    const pushTriangle = (a: number, b: number, c: number) => {
+    const uvs: number[] = [];
+    const pushVertex = (vertexIndex: number, uv: [number, number]) => {
+      const vertex = vertices[vertexIndex];
+      if (!vertex) return false;
+      positions.push(...vertex);
+      uvs.push(...uv);
+      return true;
+    };
+    const pushTriangle = (
+      a: number,
+      b: number,
+      c: number,
+      uvA: [number, number],
+      uvB: [number, number],
+      uvC: [number, number],
+    ) => {
       const va = vertices[a];
       const vb = vertices[b];
       const vc = vertices[c];
       if (!va || !vb || !vc) return;
-      positions.push(...va, ...vb, ...vc);
+      pushVertex(a, uvA);
+      pushVertex(b, uvB);
+      pushVertex(c, uvC);
     };
 
     for (const [a, b, c, d] of faceQuads) {
-      pushTriangle(a, b, c);
-      pushTriangle(a, c, d);
-      pushTriangle(a, c, b);
-      pushTriangle(a, d, c);
+      const va = vertices[a];
+      const vb = vertices[b];
+      const vc = vertices[c];
+      const vd = vertices[d];
+      if (!va || !vb || !vc || !vd) continue;
+
+      const edgeU = Math.hypot(vb[0] - va[0], vb[1] - va[1], vb[2] - va[2]);
+      const edgeV = Math.hypot(vd[0] - va[0], vd[1] - va[1], vd[2] - va[2]);
+      const uvA: [number, number] = [0, 0];
+      const uvB: [number, number] = [edgeU, 0];
+      const uvC: [number, number] = [edgeU, edgeV];
+      const uvD: [number, number] = [0, edgeV];
+
+      pushTriangle(a, b, c, uvA, uvB, uvC);
+      pushTriangle(a, c, d, uvA, uvC, uvD);
+      pushTriangle(a, c, b, uvA, uvC, uvB);
+      pushTriangle(a, d, c, uvA, uvD, uvC);
     }
 
     const geometry = new BufferGeometry();
     geometry.setAttribute("position", new Float32BufferAttribute(positions, 3));
+    geometry.setAttribute("uv", new Float32BufferAttribute(uvs, 2));
+    geometry.setAttribute("uv2", new Float32BufferAttribute(uvs.slice(), 2));
     geometry.computeVertexNormals();
     return geometry;
   }, [depth, length, start, end, width]);

packages/viewer/src/systems/slab/slab-system.tsx

@@ -1,11 +1,12 @@
-import { useFrame } from '@react-three/fiber'
 import {
   type AnyNodeId,
   getRenderableSlabPolygon,
-  sceneRegistry,
   type SlabNode,
+  sceneRegistry,
   useScene,
 } from '@pascal-app/core'
+import { useFrame } from '@react-three/fiber'
+import { useEffect } from 'react'
 import * as THREE from 'three'
 
 function ensureUv2Attribute(geometry: THREE.BufferGeometry) {
@@ -22,6 +23,16 @@ function ensureUv2Attribute(geometry: THREE.BufferGeometry) {
 export const SlabSystem = () => {
   const dirtyNodes = useScene((state) => state.dirtyNodes)
   const clearDirty = useScene((state) => state.clearDirty)
+  const markDirty = useScene((state) => state.markDirty)
+
+  useEffect(() => {
+    const nodes = useScene.getState().nodes
+    for (const node of Object.values(nodes)) {
+      if (node.type === 'slab') {
+        markDirty(node.id)
+      }
+    }
+  }, [markDirty])
 
   useFrame(() => {
     if (dirtyNodes.size === 0) return