Merge pull request #91 from anas-sarkez/main

feature: add ExampleWrapper component with code toggle functionality
tscircuit · Nov 23, 2024 · 90bac7b · 90bac7b
2 parents 16182b5 + 216918a
commit 90bac7b
Show file tree

Hide file tree

Showing 37 changed files with 574 additions and 349 deletions.
diff --git a/examples/array-based-subtraction.fixture.tsx b/examples/array-based-subtraction.fixture.tsx
@@ -1,13 +1,16 @@
-import { JsCadFixture } from "../lib/components/jscad-fixture"
-import { Colorize, Cuboid, Sphere, Subtract } from "../lib/jscad-fns"
+import { ExampleWrapper } from "lib/components/Example-wrapper"
+import { JsCadView } from "../lib/components/jscad-view"
+import { Cuboid, Subtract } from "../lib/jscad-fns"
 
 export default () => (
-  <JsCadFixture zAxisUp showGrid>
-    <Subtract>
-      <Cuboid size={[10, 5, 2]} />
-      {[-4, -2, 0, 2, 4].map((value, index) => (
-        <Cuboid key={index} center={[value, 0, 0]} size={[1, 1, 4]} />
-      ))}
-    </Subtract>
-  </JsCadFixture>
+  <ExampleWrapper fileName={import.meta.url}>
+    <JsCadView zAxisUp showGrid>
+      <Subtract>
+        <Cuboid size={[10, 5, 2]} />
+        {[-4, -2, 0, 2, 4].map((value, index) => (
+          <Cuboid key={index} center={[value, 0, 0]} size={[1, 1, 4]} />
+        ))}
+      </Subtract>
+    </JsCadView>
+  </ExampleWrapper>
 )
diff --git a/examples/circle.fixture.tsx b/examples/circle.fixture.tsx
@@ -1,8 +1,11 @@
+import { ExampleWrapper } from "lib/components/Example-wrapper"
 import { Circle } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import { JsCadView } from "../lib/components/jscad-view"
 
 export default () => (
-  <JsCadFixture>
-    <Circle radius={10} />
-  </JsCadFixture>
+  <ExampleWrapper fileName={import.meta.url}>
+    <JsCadView>
+      <Circle radius={10} />
+    </JsCadView>
+  </ExampleWrapper>
 )
diff --git a/examples/colorize.fixture.tsx b/examples/colorize.fixture.tsx
@@ -1,10 +1,13 @@
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import { ExampleWrapper } from "lib/components/Example-wrapper"
+import { JsCadView } from "../lib/components/jscad-view"
 import { Colorize, Cube } from "../lib/jscad-fns"
 
 export default () => (
-  <JsCadFixture>
-    <Colorize color={"red"}>
-      <Cube size={10} />
-    </Colorize>
-  </JsCadFixture>
+  <ExampleWrapper fileName={import.meta.url}>
+    <JsCadView>
+      <Colorize color={"red"}>
+        <Cube size={10} />
+      </Colorize>
+    </JsCadView>
+  </ExampleWrapper>
 )
diff --git a/examples/cone.fixture.tsx b/examples/cone.fixture.tsx
@@ -1,17 +1,20 @@
+import { ExampleWrapper } from "lib/components/Example-wrapper"
 import { CylinderElliptic } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import { JsCadView } from "../lib/components/jscad-view"
 
 export default () => (
-  <JsCadFixture wireframe>
-    <CylinderElliptic
-      height={5}
-      startRadius={[2, 2]}
-      endRadius={[0, 0]}
-      segments={32}
-      startAngle={0}
-      endAngle={Math.PI * 2}
-      color="green"
-      center={[0, 5, 5]}
-    />
-  </JsCadFixture>
+  <ExampleWrapper fileName={import.meta.url}>
+    <JsCadView wireframe>
+      <CylinderElliptic
+        height={5}
+        startRadius={[2, 2]}
+        endRadius={[0, 0]}
+        segments={32}
+        startAngle={0}
+        endAngle={Math.PI * 2}
+        color="green"
+        center={[0, 5, 5]}
+      />
+    </JsCadView>
+  </ExampleWrapper>
 )
diff --git a/examples/cube.fixture.tsx b/examples/cube.fixture.tsx
@@ -1,8 +1,11 @@
 import { Cube } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
-
+import { JsCadView } from "../lib/components/jscad-view"
+import { ExampleWrapper } from "../lib/components/Example-wrapper"
+console.log("import.meta.path", import.meta.path)
 export default () => (
-  <JsCadFixture>
-    <Cube size={10} color="orange" center={[0, 0, 10]} />
-  </JsCadFixture>
+  <ExampleWrapper fileName={import.meta.url}>
+    <JsCadView>
+      <Cube size={10} color="orange" center={[0, 0, 10]} />
+    </JsCadView>
+  </ExampleWrapper>
 )
diff --git a/examples/cuboid.fixture.tsx b/examples/cuboid.fixture.tsx
@@ -1,8 +1,11 @@
+import { ExampleWrapper } from "lib/components/Example-wrapper"
 import { Cuboid } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import { JsCadView } from "../lib/components/jscad-view"
 
 export default () => (
-  <JsCadFixture zAxisUp showGrid>
-    <Cuboid color="blue" offset={{ x: 0, y: 0, z: 0 }} size={[15, 10, 10]} />
-  </JsCadFixture>
+  <ExampleWrapper fileName={import.meta.url}>
+    <JsCadView zAxisUp showGrid>
+      <Cuboid color="blue" offset={{ x: 0, y: 0, z: 0 }} size={[15, 10, 10]} />
+    </JsCadView>
+  </ExampleWrapper>
 )
diff --git a/examples/custom-sphere.fixture.tsx b/examples/custom-sphere.fixture.tsx
@@ -1,8 +1,11 @@
+import { ExampleWrapper } from "lib/components/Example-wrapper"
 import { Sphere } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import { JsCadView } from "../lib/components/jscad-view"
 
 export default () => (
-  <JsCadFixture wireframe>
-    <Sphere radius={10} segments={64} />
-  </JsCadFixture>
+  <ExampleWrapper fileName={import.meta.url}>
+    <JsCadView wireframe>
+      <Sphere radius={10} segments={64} />
+    </JsCadView>
+  </ExampleWrapper>
 )
diff --git a/examples/custom-torus.fixture.tsx b/examples/custom-torus.fixture.tsx
@@ -1,16 +1,19 @@
+import { ExampleWrapper } from "lib/components/Example-wrapper"
 import { Torus } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import { JsCadView } from "../lib/components/jscad-view"
 
 export default () => (
-  <JsCadFixture wireframe>
-    <Torus
-      innerRadius={15}
-      outerRadius={20}
-      innerSegments={64}
-      outerSegments={96}
-      innerRotation={Math.PI}
-      outerRotation={Math.PI / 2}
-      startAngle={0}
-    />
-  </JsCadFixture>
+  <ExampleWrapper fileName={import.meta.url}>
+    <JsCadView wireframe>
+      <Torus
+        innerRadius={15}
+        outerRadius={20}
+        innerSegments={64}
+        outerSegments={96}
+        innerRotation={Math.PI}
+        outerRotation={Math.PI / 2}
+        startAngle={0}
+      />
+    </JsCadView>
+  </ExampleWrapper>
 )
diff --git a/examples/custom.fixture.tsx b/examples/custom.fixture.tsx
@@ -1,14 +1,17 @@
 import { booleans, primitives } from "@jscad/modeling"
 import { Custom } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import { JsCadView } from "../lib/components/jscad-view"
+import { ExampleWrapper } from "lib/components/Example-wrapper"
 
 const cube = primitives.cube({ size: 10 })
 const sphere = primitives.sphere({ radius: 6, segments: 32 })
 
 const intersected = booleans.subtract(cube, sphere)
 
 export default () => (
-  <JsCadFixture>
-    <Custom geometry={intersected} />
-  </JsCadFixture>
+  <ExampleWrapper fileName={import.meta.url}>
+    <JsCadView>
+      <Custom geometry={intersected} />
+    </JsCadView>
+  </ExampleWrapper>
 )
diff --git a/examples/cylinder.fixture.tsx b/examples/cylinder.fixture.tsx
@@ -1,15 +1,18 @@
+import { ExampleWrapper } from "lib/components/Example-wrapper"
 import { Cylinder } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import { JsCadView } from "../lib/components/jscad-view"
 
 export default () => (
-  <JsCadFixture showGrid zAxisUp>
-    <Cylinder
-      radius={5}
-      height={10}
-      color="#F7E8AA"
-      center={[-20, 0, 0]}
-      rotation={["90deg", 0, 0]}
-    />
-    <Cylinder radius={5} height={10} color="#F7E8AA" center={[20, 0, 0]} />
-  </JsCadFixture>
+  <ExampleWrapper fileName={import.meta.url}>
+    <JsCadView showGrid zAxisUp>
+      <Cylinder
+        radius={5}
+        height={10}
+        color="#F7E8AA"
+        center={[-20, 0, 0]}
+        rotation={["90deg", 0, 0]}
+      />
+      <Cylinder radius={5} height={10} color="#F7E8AA" center={[20, 0, 0]} />
+    </JsCadView>
+  </ExampleWrapper>
 )
diff --git a/examples/ellipsoid.fixture.tsx b/examples/ellipsoid.fixture.tsx
@@ -1,8 +1,11 @@
+import { ExampleWrapper } from "lib/components/Example-wrapper"
 import { Ellipsoid } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import { JsCadView } from "../lib/components/jscad-view"
 
 export default () => (
-  <JsCadFixture wireframe>
-    <Ellipsoid radius={[15, 10, 10]} color="brown" center={[0, 0, 10]} />
-  </JsCadFixture>
+  <ExampleWrapper fileName={import.meta.url}>
+    <JsCadView wireframe>
+      <Ellipsoid radius={[15, 10, 10]} color="brown" center={[0, 0, 10]} />
+    </JsCadView>
+  </ExampleWrapper>
 )
diff --git a/examples/extrude-from-slices.fixture.tsx b/examples/extrude-from-slices.fixture.tsx
@@ -1,5 +1,6 @@
+import { ExampleWrapper } from "lib/components/Example-wrapper"
 import { ExtrudeFromSlices } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import { JsCadView } from "../lib/components/jscad-view"
 import jscad from "@jscad/modeling"
 
 const { bezier } = jscad.curves
@@ -20,37 +21,39 @@ const xCurve = bezier.create([1, 1.8, 0.4, 1])
 const yCurve = bezier.create([1, 1.8, 0.5])
 
 export default () => (
-  <JsCadFixture zAxisUp showGrid>
-    <ExtrudeFromSlices
-      numberOfSlices={10}
-      capStart={true}
-      capEnd={true}
-      close={true}
-      repair={true}
-      baseSlice={baseSlice}
-      callback={function (progress, count, base) {
-        let newslice = slice.transform(
-          mat4.fromTranslation(mat4.create(), [0, 0, 10 * progress]),
-          baseSlice,
-        )
-        newslice = slice.transform(
-          mat4.fromScaling(mat4.create(), [
-            bezier.valueAt(progress, xCurve) as any,
-            bezier.valueAt(progress, yCurve) as any,
-            1,
-          ]),
-          newslice,
-        )
+  <ExampleWrapper fileName={import.meta.url}>
+    <JsCadView zAxisUp showGrid>
+      <ExtrudeFromSlices
+        numberOfSlices={10}
+        capStart={true}
+        capEnd={true}
+        close={true}
+        repair={true}
+        baseSlice={baseSlice}
+        callback={function (progress, count, base) {
+          let newslice = slice.transform(
+            mat4.fromTranslation(mat4.create(), [0, 0, 10 * progress]),
+            baseSlice,
+          )
+          newslice = slice.transform(
+            mat4.fromScaling(mat4.create(), [
+              bezier.valueAt(progress, xCurve) as any,
+              bezier.valueAt(progress, yCurve) as any,
+              1,
+            ]),
+            newslice,
+          )
 
-        // Rotate the slice 90 degrees along the path
-        const rotationAngle = (Math.PI / 2) * progress // 90 degrees in radians
-        newslice = slice.transform(
-          mat4.fromXRotation(mat4.create(), rotationAngle),
-          newslice,
-        )
+          // Rotate the slice 90 degrees along the path
+          const rotationAngle = (Math.PI / 2) * progress // 90 degrees in radians
+          newslice = slice.transform(
+            mat4.fromXRotation(mat4.create(), rotationAngle),
+            newslice,
+          )
 
-        return newslice
-      }}
-    />
-  </JsCadFixture>
+          return newslice
+        }}
+      />
+    </JsCadView>
+  </ExampleWrapper>
 )
diff --git a/examples/extrude-helical.fixture.tsx b/examples/extrude-helical.fixture.tsx
@@ -1,28 +1,31 @@
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import { ExampleWrapper } from "lib/components/Example-wrapper"
+import { JsCadView } from "../lib/components/jscad-view"
 import { ExtrudeHelical } from "../lib/jscad-fns"
 import { Polygon } from "../lib/jscad-fns/polygon"
 
 export default () => (
-  <JsCadFixture>
-    <ExtrudeHelical
-      height={5}
-      angle={Math.PI * 4}
-      pitch={10}
-      segmetsPerRotation={64}
-      center={[0, 0, 10]}
-      color="red"
-    >
-      <Polygon
-        points={[
-          [-2, -1],
-          [2, -1],
-          [2.5, 2],
-          [1, 1],
-          [0, 2],
-          [-1, 1],
-          [-2, 2],
-        ]}
-      />
-    </ExtrudeHelical>
-  </JsCadFixture>
+  <ExampleWrapper fileName={import.meta.url}>
+    <JsCadView>
+      <ExtrudeHelical
+        height={5}
+        angle={Math.PI * 4}
+        pitch={10}
+        segmetsPerRotation={64}
+        center={[0, 0, 10]}
+        color="red"
+      >
+        <Polygon
+          points={[
+            [-2, -1],
+            [2, -1],
+            [2.5, 2],
+            [1, 1],
+            [0, 2],
+            [-1, 1],
+            [-2, 2],
+          ]}
+        />
+      </ExtrudeHelical>
+    </JsCadView>
+  </ExampleWrapper>
 )