fix translating issue with multiple children

tscircuit · Oct 20, 2024 · 84ef892 · 84ef892
1 parent fb20292
commit 84ef892
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 21 deletions.
diff --git a/examples/translate.fixture.tsx b/examples/translate.fixture.tsx
@@ -7,7 +7,20 @@ export default () => (
     <Cuboid size={[20, 10, 10]} />
     <Cuboid center={[0, 0, 15]} size={[15, 10, 15]} color="red" />
     <Translate offset={[0, 0, -15]}>
-      <Cuboid size={[15, 10, 15]} />
+      <Cuboid size={[15, 10, 15]} color="blue" />
+      <Cuboid size={[5, 25, 5]} color="white" />
+    </Translate>
+    <Translate offset={[0, 15, 0]}>
+      <Translate offset={[0, 0, -15]}>
+        <Cuboid size={[3, 3, 3]} color="green" />
+        <Cuboid size={[4, 2, 4]} color="white" />
+        <Cuboid size={[5, 1, 5]} color="red" />
+        <Translate offset={[0, 0, -10]}>
+          <Cuboid size={[3, 3, 3]} color="blue" />
+          <Cuboid size={[4, 2, 4]} color="white" />
+          <Cuboid size={[5, 1, 5]} color="red" />
+        </Translate>
+      </Translate>
     </Translate>
   </JsCadFixture>
 )
diff --git a/lib/components/jscad-fixture.tsx b/lib/components/jscad-fixture.tsx
@@ -66,29 +66,39 @@ export function JsCadFixture({
       scene.add(gridHelper)
       gridRef.current = gridHelper
 
-      for (const csg of jscadGeoms) {
-        const geometry = convertCSGToThreeGeom(csg)
-
-        if (csg.sides) {
-          // 2D shape
-          const material = new THREE.LineBasicMaterial({
-            vertexColors: true,
-            linewidth: 2, // Note: linewidth > 1 only works in WebGL 2
-          })
-          const lineLoop = new THREE.LineLoop(geometry, material)
-          scene.add(lineLoop)
+      function processCGS(csg: any) {
+        if (Array.isArray(csg)) {
+          for (const child of csg) {
+            processCGS(child)
+          }
         } else {
-          // 3D shape
-          const material = new THREE.MeshStandardMaterial({
-            vertexColors: true,
-            wireframe: wireframe,
-            side: THREE.DoubleSide, // Ensure both sides are visible
-          })
-          const mesh = new THREE.Mesh(geometry, material)
-          scene.add(mesh)
+          const geometry = convertCSGToThreeGeom(csg)
+
+          if (csg.sides) {
+            // 2D shape
+            const material = new THREE.LineBasicMaterial({
+              vertexColors: true,
+              linewidth: 2, // Note: linewidth > 1 only works in WebGL 2
+            })
+            const lineLoop = new THREE.LineLoop(geometry, material)
+            scene.add(lineLoop)
+          } else {
+            // 3D shape
+            const material = new THREE.MeshStandardMaterial({
+              vertexColors: true,
+              wireframe: wireframe,
+              side: THREE.DoubleSide, // Ensure both sides are visible
+            })
+            const mesh = new THREE.Mesh(geometry, material)
+            scene.add(mesh)
+          }
         }
       }
 
+      for (const csg of jscadGeoms) {
+        processCGS(csg)
+      }
+
       camera.position.x = 20
       camera.position.y = 20
       camera.position.z = 20

diff --git a/lib/create-host-config.ts b/lib/create-host-config.ts
@@ -40,7 +40,15 @@ export function createHostConfig(jscad: JSCADModule) {
   ) => {
     const renderChildren = (children: any) => {
       if (Array.isArray(children)) {
-        throw new Error("Unioning multiple children is not yet supported")
+        return children.map((child) =>
+          createInstance(
+            child.type,
+            child.props,
+            [],
+            hostContext,
+            internalInstanceHandle,
+          ),
+        )
       }
       if (children) {
         return createInstance(