From c3b27b6f4fbc96c1317342ec856ea5a5c3c8eaa7 Mon Sep 17 00:00:00 2001 From: Dev Date: Wed, 6 Nov 2024 14:07:20 +0530 Subject: [PATCH 1/2] code-view --- examples/array-based-subtraction.fixture.tsx | 6 +- examples/circle.fixture.tsx | 9 +- examples/colorize.fixture.tsx | 4 + examples/cone.fixture.tsx | 8 +- examples/cube.fixture.tsx | 8 +- examples/cuboid.fixture.tsx | 8 +- examples/custom-sphere.fixture.tsx | 8 +- examples/custom-torus.fixture.tsx | 8 +- examples/custom.fixture.tsx | 10 +- examples/cylinder.fixture.tsx | 8 +- examples/ellipsoid.fixture.tsx | 8 +- examples/extrude-from-slices.fixture.tsx | 10 +- examples/extrude-linear.fixture.tsx | 11 +- examples/extrude-rectangular.fixture.tsx | 4 + examples/high-geodesic-sphere.fixture.tsx | 4 + examples/hull-chain.fixture.tsx | 4 + examples/hull.fixture.tsx | 6 +- examples/low-geodesic-sphere.fixture.tsx | 4 + .../partial-cylindrical-elliptic.fixture.tsx | 6 +- examples/polygon.fixture.tsx | 4 + examples/project.fixture.tsx | 4 + examples/rectangle.fixture.tsx | 5 + examples/rotate.fixture.tsx | 4 + examples/rounded-cuboid.fixture.tsx | 4 + examples/rounded-cylinder.fixture.tsx | 4 + examples/sphere.fixture.tsx | 16 +- examples/subtract.fixture.tsx | 22 +- examples/torus.fixture.tsx | 21 +- examples/translate.fixture.tsx | 42 +- .../twisted-cylindrical-elliptic.fixture.tsx | 30 +- package.json | 4 +- src/CodeViewer.tsx | 75 +++ src/Example.tsx | 37 + src/designCode.ts | 630 ++++++++++++++++++ src/main.css | 36 + 35 files changed, 990 insertions(+), 82 deletions(-) create mode 100644 src/CodeViewer.tsx create mode 100644 src/Example.tsx create mode 100644 src/designCode.ts diff --git a/examples/array-based-subtraction.fixture.tsx b/examples/array-based-subtraction.fixture.tsx index 2fe1d9b..5c22a1d 100644 --- a/examples/array-based-subtraction.fixture.tsx +++ b/examples/array-based-subtraction.fixture.tsx @@ -1,7 +1,10 @@ +import Example from "src/Example" +import { designCodeArray } from "src/designCode" import { JsCadFixture } from "../lib/components/jscad-fixture" -import { Colorize, Cuboid, Sphere, Subtract } from "../lib/jscad-fns" +import { Cuboid, Subtract } from "../lib/jscad-fns" export default () => ( + @@ -10,4 +13,5 @@ export default () => ( ))} + ) diff --git a/examples/circle.fixture.tsx b/examples/circle.fixture.tsx index 67afa3a..27bfe45 100644 --- a/examples/circle.fixture.tsx +++ b/examples/circle.fixture.tsx @@ -1,8 +1,13 @@ -import { Circle } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" +import { designCodeCircle } from "src/designCode"; +import Example from "src/Example"; +import { Circle } from "../lib"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; + export default () => ( + + ) diff --git a/examples/colorize.fixture.tsx b/examples/colorize.fixture.tsx index ad8897a..0a79ba5 100644 --- a/examples/colorize.fixture.tsx +++ b/examples/colorize.fixture.tsx @@ -1,10 +1,14 @@ +import Example from "src/Example" +import { designCodeColorizeCube } from "src/designCode" import { JsCadFixture } from "../lib/components/jscad-fixture" import { Colorize, Cube } from "../lib/jscad-fns" export default () => ( + + ) diff --git a/examples/cone.fixture.tsx b/examples/cone.fixture.tsx index 7fe82a5..cee3186 100644 --- a/examples/cone.fixture.tsx +++ b/examples/cone.fixture.tsx @@ -1,7 +1,10 @@ -import { CylinderElliptic } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" +import { designCodeCone } from "src/designCode"; +import Example from "src/Example"; +import { CylinderElliptic } from "../lib"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( + ( center={[0, 5, 5]} /> + ) diff --git a/examples/cube.fixture.tsx b/examples/cube.fixture.tsx index 65ee63f..fe88f1b 100644 --- a/examples/cube.fixture.tsx +++ b/examples/cube.fixture.tsx @@ -1,8 +1,12 @@ -import { Cube } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" +import { designCodeCube } from "src/designCode"; +import Example from "src/Example"; +import { Cube } from "../lib"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( + + ) diff --git a/examples/cuboid.fixture.tsx b/examples/cuboid.fixture.tsx index f075400..24d0637 100644 --- a/examples/cuboid.fixture.tsx +++ b/examples/cuboid.fixture.tsx @@ -1,8 +1,12 @@ -import { Cuboid } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" +import { designCodeCuboid } from "src/designCode"; +import Example from "src/Example"; +import { Cuboid } from "../lib"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( + + ) diff --git a/examples/custom-sphere.fixture.tsx b/examples/custom-sphere.fixture.tsx index e8f8a9a..d77d106 100644 --- a/examples/custom-sphere.fixture.tsx +++ b/examples/custom-sphere.fixture.tsx @@ -1,8 +1,12 @@ -import { Sphere } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" +import { designCodeCustomSphere } from "src/designCode"; +import Example from "src/Example"; +import { Sphere } from "../lib"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( + + ) diff --git a/examples/custom-torus.fixture.tsx b/examples/custom-torus.fixture.tsx index a402c39..7e6adb7 100644 --- a/examples/custom-torus.fixture.tsx +++ b/examples/custom-torus.fixture.tsx @@ -1,7 +1,10 @@ -import { Torus } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" +import { designCodeCustomTorus } from "src/designCode"; +import Example from "src/Example"; +import { Torus } from "../lib"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( + ( startAngle={0} /> + ) diff --git a/examples/custom.fixture.tsx b/examples/custom.fixture.tsx index 25a00e1..95dc08c 100644 --- a/examples/custom.fixture.tsx +++ b/examples/custom.fixture.tsx @@ -1,6 +1,8 @@ -import { booleans, primitives } from "@jscad/modeling" -import { Custom } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" +import { booleans, primitives } from "@jscad/modeling"; +import { designCodeCustom } from "src/designCode"; +import Example from "src/Example"; +import { Custom } from "../lib"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; const cube = primitives.cube({ size: 10 }) const sphere = primitives.sphere({ radius: 6, segments: 32 }) @@ -8,7 +10,9 @@ const sphere = primitives.sphere({ radius: 6, segments: 32 }) const intersected = booleans.subtract(cube, sphere) export default () => ( + + ) diff --git a/examples/cylinder.fixture.tsx b/examples/cylinder.fixture.tsx index 973fe2a..8f29114 100644 --- a/examples/cylinder.fixture.tsx +++ b/examples/cylinder.fixture.tsx @@ -1,7 +1,10 @@ -import { Cylinder } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" +import { designCodeCylinder } from "src/designCode"; +import Example from "src/Example"; +import { Cylinder } from "../lib"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( + ( /> + ) diff --git a/examples/ellipsoid.fixture.tsx b/examples/ellipsoid.fixture.tsx index 3c4aab3..627118a 100644 --- a/examples/ellipsoid.fixture.tsx +++ b/examples/ellipsoid.fixture.tsx @@ -1,8 +1,12 @@ -import { Ellipsoid } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" +import { designCodeEllipsoid } from "src/designCode"; +import Example from "src/Example"; +import { Ellipsoid } from "../lib"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( + + ) diff --git a/examples/extrude-from-slices.fixture.tsx b/examples/extrude-from-slices.fixture.tsx index 64b30b7..4b93f31 100644 --- a/examples/extrude-from-slices.fixture.tsx +++ b/examples/extrude-from-slices.fixture.tsx @@ -1,6 +1,8 @@ -import { ExtrudeFromSlices } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" -import jscad from "@jscad/modeling" +import jscad from "@jscad/modeling"; +import { designCodeExtrudeFromSlices } from "src/designCode"; +import Example from "src/Example"; +import { ExtrudeFromSlices } from "../lib"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; const { bezier } = jscad.curves const { circle, line, polygon, rectangle, roundedRectangle, star } = @@ -20,6 +22,7 @@ const xCurve = bezier.create([1, 1.8, 0.4, 1]) const yCurve = bezier.create([1, 1.8, 0.5]) export default () => ( + ( }} /> + ) diff --git a/examples/extrude-linear.fixture.tsx b/examples/extrude-linear.fixture.tsx index be9fcc5..75c15ce 100644 --- a/examples/extrude-linear.fixture.tsx +++ b/examples/extrude-linear.fixture.tsx @@ -1,8 +1,12 @@ -import { JsCadFixture } from "../lib/components/jscad-fixture" -import { ExtrudeLinear } from "../lib/jscad-fns" -import { Polygon } from "../lib/jscad-fns/polygon" +import { designCodeExtrudeLinear } from "src/designCode"; +import Example from "src/Example"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; +import { ExtrudeLinear } from "../lib/jscad-fns"; +import { Polygon } from "../lib/jscad-fns/polygon"; export default () => ( + + ( /> + ) diff --git a/examples/extrude-rectangular.fixture.tsx b/examples/extrude-rectangular.fixture.tsx index 03876ca..74595bc 100644 --- a/examples/extrude-rectangular.fixture.tsx +++ b/examples/extrude-rectangular.fixture.tsx @@ -1,8 +1,11 @@ +import { designCodeExtrudeRectangular } from "src/designCode" +import Example from "src/Example" import { JsCadFixture } from "../lib/components/jscad-fixture" import { ExtrudeRectangular } from "../lib/jscad-fns" import { Polygon } from "../lib/jscad-fns/polygon" export default () => ( + ( /> + ) diff --git a/examples/high-geodesic-sphere.fixture.tsx b/examples/high-geodesic-sphere.fixture.tsx index 902b203..0c5aa99 100644 --- a/examples/high-geodesic-sphere.fixture.tsx +++ b/examples/high-geodesic-sphere.fixture.tsx @@ -1,7 +1,10 @@ +import { designCodeHighGeodesicsphere } from "src/designCode" +import Example from "src/Example" import { GeodesicSphere } from "../lib" import { JsCadFixture } from "../lib/components/jscad-fixture" export default () => ( + ( center={[10, 5, 0]} /> + ) diff --git a/examples/hull-chain.fixture.tsx b/examples/hull-chain.fixture.tsx index 6e6c048..deac085 100644 --- a/examples/hull-chain.fixture.tsx +++ b/examples/hull-chain.fixture.tsx @@ -1,7 +1,10 @@ +import { designCodeHullChain } from "src/designCode" +import Example from "src/Example" import { Cuboid, Ellipsoid, HullChain } from "../lib" import { JsCadFixture } from "../lib/components/jscad-fixture" export default () => ( + @@ -9,4 +12,5 @@ export default () => ( + ) diff --git a/examples/hull.fixture.tsx b/examples/hull.fixture.tsx index 488cb2d..c887e33 100644 --- a/examples/hull.fixture.tsx +++ b/examples/hull.fixture.tsx @@ -1,11 +1,15 @@ -import { Cuboid, Ellipsoid, Hull, Translate } from "../lib" +import { designCodeHull } from "src/designCode" +import Example from "src/Example" +import { Cuboid, Ellipsoid, Hull } from "../lib" import { JsCadFixture } from "../lib/components/jscad-fixture" export default () => ( + + ) diff --git a/examples/low-geodesic-sphere.fixture.tsx b/examples/low-geodesic-sphere.fixture.tsx index 647d09e..370e5de 100644 --- a/examples/low-geodesic-sphere.fixture.tsx +++ b/examples/low-geodesic-sphere.fixture.tsx @@ -1,8 +1,12 @@ +import { designCodeGeodesicSphere } from "src/designCode" +import Example from "src/Example" import { GeodesicSphere } from "../lib" import { JsCadFixture } from "../lib/components/jscad-fixture" export default () => ( + + ) diff --git a/examples/partial-cylindrical-elliptic.fixture.tsx b/examples/partial-cylindrical-elliptic.fixture.tsx index 84bb8f6..b5ed3c6 100644 --- a/examples/partial-cylindrical-elliptic.fixture.tsx +++ b/examples/partial-cylindrical-elliptic.fixture.tsx @@ -1,8 +1,11 @@ +import { designCodeCylinderElliptic } from "src/designCode" +import Example from "src/Example" import { CylinderElliptic } from "../lib" import { JsCadFixture } from "../lib/components/jscad-fixture" export default () => ( - + + ( endAngle={Math.PI / 2} /> + ) diff --git a/examples/polygon.fixture.tsx b/examples/polygon.fixture.tsx index d49d870..f7e2146 100644 --- a/examples/polygon.fixture.tsx +++ b/examples/polygon.fixture.tsx @@ -1,7 +1,10 @@ +import { designCodePolygon } from "src/designCode" +import Example from "src/Example" import { JsCadFixture } from "../lib/components/jscad-fixture" import { Polygon } from "../lib/jscad-fns/polygon" export default () => ( + ( ]} /> + ) diff --git a/examples/project.fixture.tsx b/examples/project.fixture.tsx index 22d7b1d..d4a1b7e 100644 --- a/examples/project.fixture.tsx +++ b/examples/project.fixture.tsx @@ -1,8 +1,11 @@ +import { designCodeProject } from "src/designCode" +import Example from "src/Example" import { JsCadFixture } from "../lib/components/jscad-fixture" import { Project } from "../lib/jscad-fns" import { Polygon } from "../lib/jscad-fns/polygon" export default () => ( + ( /> + ) diff --git a/examples/rectangle.fixture.tsx b/examples/rectangle.fixture.tsx index f8643ce..91ccee2 100644 --- a/examples/rectangle.fixture.tsx +++ b/examples/rectangle.fixture.tsx @@ -1,8 +1,13 @@ +import { designCodeRectangle } from "src/designCode" +import Example from "src/Example" import { Rectangle } from "../lib" import { JsCadFixture } from "../lib/components/jscad-fixture" + export default () => ( + + ) diff --git a/examples/rotate.fixture.tsx b/examples/rotate.fixture.tsx index 27fe756..a88581a 100644 --- a/examples/rotate.fixture.tsx +++ b/examples/rotate.fixture.tsx @@ -1,8 +1,11 @@ +import { designCodeRotate } from "src/designCode" +import Example from "src/Example" import { Polygon } from "../lib" import { JsCadFixture } from "../lib/components/jscad-fixture" import { Rotate } from "../lib/jscad-fns" export default () => ( + ( /> + ) diff --git a/examples/rounded-cuboid.fixture.tsx b/examples/rounded-cuboid.fixture.tsx index 2666fa5..f05e11c 100644 --- a/examples/rounded-cuboid.fixture.tsx +++ b/examples/rounded-cuboid.fixture.tsx @@ -1,7 +1,10 @@ +import { designCodeRoundedCuboid } from "src/designCode" +import Example from "src/Example" import { RoundedCuboid } from "../lib" import { JsCadFixture } from "../lib/components/jscad-fixture" export default () => ( + ( center={[0, 0, 10]} /> + ) diff --git a/examples/rounded-cylinder.fixture.tsx b/examples/rounded-cylinder.fixture.tsx index 5b5948a..c398602 100644 --- a/examples/rounded-cylinder.fixture.tsx +++ b/examples/rounded-cylinder.fixture.tsx @@ -1,7 +1,10 @@ +import { designCodeRoundedCylinder } from "src/designCode" +import Example from "src/Example" import { RoundedCylinder } from "../lib" import { JsCadFixture } from "../lib/components/jscad-fixture" export default () => ( + ( center={[0, 0, 10]} /> + ) diff --git a/examples/sphere.fixture.tsx b/examples/sphere.fixture.tsx index 35fa24b..e03e545 100644 --- a/examples/sphere.fixture.tsx +++ b/examples/sphere.fixture.tsx @@ -1,8 +1,12 @@ -import { Sphere } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" +import { designCodeSphere } from "src/designCode"; +import Example from "src/Example"; +import { Sphere } from "../lib"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( - - - -) + + + + + +); diff --git a/examples/subtract.fixture.tsx b/examples/subtract.fixture.tsx index 3d27252..e762d04 100644 --- a/examples/subtract.fixture.tsx +++ b/examples/subtract.fixture.tsx @@ -1,11 +1,15 @@ -import { Cube, Sphere, Subtract } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" +import { designCodeSubtract } from "src/designCode"; +import Example from "src/Example"; +import { Cube, Sphere, Subtract } from "../lib"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( - - - - - - -) + + + + + + + + +); diff --git a/examples/torus.fixture.tsx b/examples/torus.fixture.tsx index a26d1b8..7b7b7cd 100644 --- a/examples/torus.fixture.tsx +++ b/examples/torus.fixture.tsx @@ -1,8 +1,17 @@ -import { Torus } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" +import { designCodeTorus } from "src/designCode"; +import Example from "src/Example"; +import { Torus } from "../lib"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( - - - -) + + + + + +); diff --git a/examples/translate.fixture.tsx b/examples/translate.fixture.tsx index 1556fec..f28a613 100644 --- a/examples/translate.fixture.tsx +++ b/examples/translate.fixture.tsx @@ -1,26 +1,30 @@ -import { Cuboid } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" -import { Translate } from "../lib/jscad-fns" +import { designCodeTranslate } from "src/designCode"; +import Example from "src/Example"; +import { Cuboid } from "../lib"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; +import { Translate } from "../lib/jscad-fns"; export default () => ( - - - - - - - - + + + + - - - - - + + + + + + + + + + + - - -) + + +); diff --git a/examples/twisted-cylindrical-elliptic.fixture.tsx b/examples/twisted-cylindrical-elliptic.fixture.tsx index dbd78b4..d8b9665 100644 --- a/examples/twisted-cylindrical-elliptic.fixture.tsx +++ b/examples/twisted-cylindrical-elliptic.fixture.tsx @@ -1,15 +1,19 @@ -import { CylinderElliptic } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" +import { designCodeTwistedCylinderElliptic } from "src/designCode"; +import Example from "src/Example"; +import { CylinderElliptic } from "../lib"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( - - - -) + + + + + +); diff --git a/package.json b/package.json index 1147e38..8c47adb 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,9 @@ }, "dependencies": { "color": "^4.2.3", - "react-reconciler": "^0.29.2" + "react-icons": "^5.3.0", + "react-reconciler": "^0.29.2", + "react-syntax-highlighter": "^15.6.1" }, "devDependencies": { "@biomejs/biome": "^1.9.3", diff --git a/src/CodeViewer.tsx b/src/CodeViewer.tsx new file mode 100644 index 0000000..f97c162 --- /dev/null +++ b/src/CodeViewer.tsx @@ -0,0 +1,75 @@ +import React, { useState } from "react"; +import { FiCopy } from "react-icons/fi"; +import { LightAsync as SyntaxHighlighter } from "react-syntax-highlighter"; +import { vs2015 } from "react-syntax-highlighter/dist/esm/styles/hljs"; + +interface CodeViewerProps { + code: string; +} + +const CodeViewer: React.FC = ({ code }) => { + const [copySuccess, setCopySuccess] = useState(false); + + const handleCopy = async () => { + try { + await navigator.clipboard.writeText(code); + setCopySuccess(true); + setTimeout(() => setCopySuccess(false), 2000); + } catch (err) { + console.error("Failed to copy code: ", err); + } + }; + + return ( +
+ + {code} + + + {/* Copy button outside the SyntaxHighlighter, but within the container */} + + + {/* Optional message to show copy success */} + {copySuccess && ( + + Copied! + + )} +
+ ); +}; + +export default CodeViewer; diff --git a/src/Example.tsx b/src/Example.tsx new file mode 100644 index 0000000..308e20d --- /dev/null +++ b/src/Example.tsx @@ -0,0 +1,37 @@ +import React, { useState } from 'react'; +import CodeViewer from './CodeViewer'; +import './main.css'; + +interface ExampleProps { + designCode: string; + children: React.ReactNode; +} + +const Example: React.FC = ({ designCode, children }) => { + const [showCode, setShowCode] = useState(false); + + const handleToggleCode = () => { + setShowCode(!showCode); + console.log('showCode is now:', !showCode); // Debugging line + }; + + return ( +
+ {children} + + {/* Button to toggle code visibility */} + + + {/* Conditionally render the CodeViewer */} + {showCode && ( +
+ +
+ )} +
+ ); +}; + +export default Example; diff --git a/src/designCode.ts b/src/designCode.ts new file mode 100644 index 0000000..f7f235f --- /dev/null +++ b/src/designCode.ts @@ -0,0 +1,630 @@ +// src/code/designCode.ts + +export const designCodeArray = ` +import { JsCadFixture } from "../lib/components/jscad-fixture" +import { Colorize, Cuboid, Sphere, Subtract } from "../lib/jscad-fns" + +export default () => ( + + + + {[-4, -2, 0, 2, 4].map((value, index) => ( + + ))} + + +); +`; + + + +// Circle design code +export const designCodeCircle = ` +import { Circle } from "../lib"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; + +export default () => ( + + + +); +`; + + +export const designCodeColorizeCube = ` +import { Colorize, Cube } from "../lib/jscad-fns"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; + +export default () => ( + + + + + +); +`; + +//cone +export const designCodeCone = ` +import { CylinderElliptic } from "../lib" +import { JsCadFixture } from "../lib/components/jscad-fixture" + +export default () => ( + + + +); +`; + + +//cube + +export const designCodeCube = ` +import { Cube } from "../lib" +import { JsCadFixture } from "../lib/components/jscad-fixture" + +export default () => ( + + + +); +`; + +//cuboid + +export const designCodeCuboid = ` +import { Cuboid } from "../lib" +import { JsCadFixture } from "../lib/components/jscad-fixture" + +export default () => ( + + + +); +`; + +//custom + +export const designCodeCustom = ` +import { booleans, primitives } from "@jscad/modeling" +import { Custom } from "../lib" +import { JsCadFixture } from "../lib/components/jscad-fixture" + +const cube = primitives.cube({ size: 10 }) +const sphere = primitives.sphere({ radius: 6, segments: 32 }) + +const intersected = booleans.subtract(cube, sphere) + +export default () => ( + + + +) + +; +`; + + +//custom-sphere + +export const designCodeCustomSphere = ` +import { Sphere } from "../lib" +import { JsCadFixture } from "../lib/components/jscad-fixture" + +export default () => ( + + + +) +; +`; + +//custom-torus + +export const designCodeCustomTorus = ` +import { Torus } from "../lib" +import { JsCadFixture } from "../lib/components/jscad-fixture" + +export default () => ( + + + +) +; +`; + + +//cylinder + +export const designCodeCylinder = ` +import { Cylinder } from "../lib" +import { JsCadFixture } from "../lib/components/jscad-fixture" + +export default () => ( + + + + +); +`; + +//ellipsoid + +export const designCodeEllipsoid = ` +import { Ellipsoid } from "../lib" +import { JsCadFixture } from "../lib/components/jscad-fixture" + +export default () => ( + + + +); +`; + +//ExtrudeFromSlices + +export const designCodeExtrudeFromSlices = ` +import { ExtrudeFromSlices } from "../lib" +import { JsCadFixture } from "../lib/components/jscad-fixture" +import jscad from "@jscad/modeling" + +const { bezier } = jscad.curves +const { circle, line, polygon, rectangle, roundedRectangle, star } = + jscad.primitives +const { extrudeLinear, extrudeRotate, extrudeFromSlices, slice } = + jscad.extrusions +const { mat4 } = jscad.maths + +const baseSlice = slice.fromPoints([ + [2, 2], + [-2, 2], + [-2, -2], + [2, -2], +]) + +const xCurve = bezier.create([1, 1.8, 0.4, 1]) +const yCurve = bezier.create([1, 1.8, 0.5]) + +export default () => ( + + + +); +`; + +//extrude-helical + +//add code here + + +//extrude-linear + +export const designCodeExtrudeLinear = ` +import { JsCadFixture } from "../lib/components/jscad-fixture" +import { ExtrudeLinear } from "../lib/jscad-fns" +import { Polygon } from "../lib/jscad-fns/polygon" + +export default () => ( + + + + + +) +; +`; + +//ExtrudeRectangular + +export const designCodeExtrudeRectangular = ` +import { JsCadFixture } from "../lib/components/jscad-fixture" +import { ExtrudeRectangular } from "../lib/jscad-fns" +import { Polygon } from "../lib/jscad-fns/polygon" + +export default () => ( + + + + + +) + +; +`; + +//ExtrudeRotate + +//code here + + +//HighGeodesicsphere + +export const designCodeHighGeodesicsphere = ` +import { GeodesicSphere } from "../lib" +import { JsCadFixture } from "../lib/components/jscad-fixture" + +export default () => ( + + + +) +; +`; + +// hull + +export const designCodeHull = ` +import { Cuboid, Ellipsoid, Hull, Translate } from "../lib" +import { JsCadFixture } from "../lib/components/jscad-fixture" + +export default () => ( + + + + + + +) +; +`; + + +//hull-chain + +export const designCodeHullChain = ` +import { Cuboid, Ellipsoid, HullChain } from "../lib" +import { JsCadFixture } from "../lib/components/jscad-fixture" + +export default () => ( + + + + + + + +) + +; +`; + +//GeodesicSphere + +export const designCodeGeodesicSphere = ` +import { GeodesicSphere } from "../lib" +import { JsCadFixture } from "../lib/components/jscad-fixture" + +export default () => ( + + + +); +`; + +//CylinderElliptic + +export const designCodeCylinderElliptic = ` +import { CylinderElliptic } from "../lib" +import { JsCadFixture } from "../lib/components/jscad-fixture" + +export default () => ( + + + +) +; +`; + +//polygon + +export const designCodePolygon = ` +import { JsCadFixture } from "../lib/components/jscad-fixture" +import { Polygon } from "../lib/jscad-fns/polygon" + +export default () => ( + + + +) +; +`; + +//project + +export const designCodeProject = ` +import { JsCadFixture } from "../lib/components/jscad-fixture" +import { Project } from "../lib/jscad-fns" +import { Polygon } from "../lib/jscad-fns/polygon" + +export default () => ( + + + + + +); +`; + + +//rectangle + +export const designCodeRectangle = ` +import { Rectangle } from "../lib" +import { JsCadFixture } from "../lib/components/jscad-fixture" + +export default () => ( + + + +); +`; + +//rotate + +export const designCodeRotate = ` +import { Polygon } from "../lib" +import { JsCadFixture } from "../lib/components/jscad-fixture" +import { Rotate } from "../lib/jscad-fns" + +export default () => ( + + + + + +); +`; + +//RoundedCuboid + +export const designCodeRoundedCuboid = ` +import { RoundedCuboid } from "../lib" +import { JsCadFixture } from "../lib/components/jscad-fixture" + +export default () => ( + + + +); +`; + +//RoundedCylinder +//from dev + +export const designCodeRoundedCylinder = ` +import { RoundedCylinder } from "../lib" +import { JsCadFixture } from "../lib/components/jscad-fixture" + +export default () => ( + + + +); +`; + +//Sphere + +export const designCodeSphere = ` +import { Sphere } from "../lib" +import { JsCadFixture } from "../lib/components/jscad-fixture" + +export default () => ( + + + +); +`; + +//Subtract + +export const designCodeSubtract = ` +import { Cube, Sphere, Subtract } from "../lib" +import { JsCadFixture } from "../lib/components/jscad-fixture" + +export default () => ( + + + + + + +); +`; + +//torus + + +export const designCodeTorus = ` +import { Torus } from "../lib" +import { JsCadFixture } from "../lib/components/jscad-fixture" + +export default () => ( + + + +) +; +`; + +//Translate + +export const designCodeTranslate = ` +import { Cuboid } from "../lib" +import { JsCadFixture } from "../lib/components/jscad-fixture" +import { Translate } from "../lib/jscad-fns" + +export default () => ( + + + + + + + + + + + + + + + + + + + + +) +; +`; + +//Twisted-CylinderElliptic + +export const designCodeTwistedCylinderElliptic = ` +import { CylinderElliptic } from "../lib" +import { JsCadFixture } from "../lib/components/jscad-fixture" + +export default () => ( + + + +); +`; \ No newline at end of file diff --git a/src/main.css b/src/main.css index 4dc4eeb..aea7347 100644 --- a/src/main.css +++ b/src/main.css @@ -3,3 +3,39 @@ body { margin: 0; padding: 0; } + +.example-container { + position: relative; /* This allows absolute positioning of the button and code viewer */ +} + +.toggle-button { + position: absolute; + top: 10px; /* Position from the top */ + left: 10px; /* Position from the left */ + background-color: #3b82f6; /* Blue color */ + color: white; + padding: 8px 16px; + border-radius: 8px; + border: none; + cursor: pointer; + transition: background-color 0.3s ease; + z-index: 10; /* Ensure the button stays above other content */ +} + +.toggle-button:hover { + background-color: #2563eb; /* Darker blue on hover */ +} + +.code-viewer { + position: absolute; + top: 20px; + left: 10px; + right: 10px; + bottom: 10px; + background-color: black; + padding: 16px; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + overflow-y: auto; + height: 40vh; +} From cf51f5852d7df12ab0451d976032f2701b1de08a Mon Sep 17 00:00:00 2001 From: Dev Date: Sat, 9 Nov 2024 01:19:35 +0530 Subject: [PATCH 2/2] chaged as suggested --- examples/array-based-subtraction.fixture.tsx | 27 +- examples/circle.fixture.tsx | 12 +- examples/colorize.fixture.tsx | 21 +- examples/cone.fixture.tsx | 29 +- examples/cube.fixture.tsx | 11 +- examples/cuboid.fixture.tsx | 11 +- examples/custom-sphere.fixture.tsx | 11 +- examples/custom-torus.fixture.tsx | 27 +- examples/custom.fixture.tsx | 17 +- examples/cylinder.fixture.tsx | 25 +- examples/ellipsoid.fixture.tsx | 11 +- examples/extrude-from-slices.fixture.tsx | 81 ++- examples/extrude-linear.fixture.tsx | 36 +- examples/extrude-rectangular.fixture.tsx | 53 +- examples/high-geodesic-sphere.fixture.tsx | 29 +- examples/hull-chain.fixture.tsx | 25 +- examples/hull.fixture.tsx | 23 +- examples/low-geodesic-sphere.fixture.tsx | 17 +- .../partial-cylindrical-elliptic.fixture.tsx | 33 +- examples/polygon.fixture.tsx | 37 +- examples/project.fixture.tsx | 43 +- examples/rectangle.fixture.tsx | 20 +- examples/rotate.fixture.tsx | 45 +- examples/rounded-cuboid.fixture.tsx | 27 +- examples/rounded-cylinder.fixture.tsx | 29 +- examples/sphere.fixture.tsx | 3 +- examples/subtract.fixture.tsx | 3 +- examples/torus.fixture.tsx | 3 +- examples/translate.fixture.tsx | 3 +- .../twisted-cylindrical-elliptic.fixture.tsx | 3 +- package.json | 1 + src/CodeViewer.tsx | 15 +- src/Example.tsx | 27 +- src/designCode.ts | 630 ------------------ 34 files changed, 361 insertions(+), 1027 deletions(-) delete mode 100644 src/designCode.ts diff --git a/examples/array-based-subtraction.fixture.tsx b/examples/array-based-subtraction.fixture.tsx index 5c22a1d..88f0cf5 100644 --- a/examples/array-based-subtraction.fixture.tsx +++ b/examples/array-based-subtraction.fixture.tsx @@ -1,17 +1,16 @@ -import Example from "src/Example" -import { designCodeArray } from "src/designCode" -import { JsCadFixture } from "../lib/components/jscad-fixture" -import { Cuboid, Subtract } from "../lib/jscad-fns" +import Example from "src/Example"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; +import { Cuboid, Subtract } from "../lib/jscad-fns"; export default () => ( - - - - - {[-4, -2, 0, 2, 4].map((value, index) => ( - - ))} - - + + + + + {[-4, -2, 0, 2, 4].map((value, index) => ( + + ))} + + -) +); diff --git a/examples/circle.fixture.tsx b/examples/circle.fixture.tsx index 27bfe45..f13b336 100644 --- a/examples/circle.fixture.tsx +++ b/examples/circle.fixture.tsx @@ -1,13 +1,11 @@ -import { designCodeCircle } from "src/designCode"; import Example from "src/Example"; import { Circle } from "../lib"; import { JsCadFixture } from "../lib/components/jscad-fixture"; - export default () => ( - - - - + + + + -) +); diff --git a/examples/colorize.fixture.tsx b/examples/colorize.fixture.tsx index 0a79ba5..1787634 100644 --- a/examples/colorize.fixture.tsx +++ b/examples/colorize.fixture.tsx @@ -1,14 +1,13 @@ -import Example from "src/Example" -import { designCodeColorizeCube } from "src/designCode" -import { JsCadFixture } from "../lib/components/jscad-fixture" -import { Colorize, Cube } from "../lib/jscad-fns" +import Example from "src/Example"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; +import { Colorize, Cube } from "../lib/jscad-fns"; export default () => ( - - - - - - + + + + + + -) +); diff --git a/examples/cone.fixture.tsx b/examples/cone.fixture.tsx index cee3186..098bb14 100644 --- a/examples/cone.fixture.tsx +++ b/examples/cone.fixture.tsx @@ -1,21 +1,20 @@ -import { designCodeCone } from "src/designCode"; import Example from "src/Example"; import { CylinderElliptic } from "../lib"; import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( - - - - + + + + -) +); diff --git a/examples/cube.fixture.tsx b/examples/cube.fixture.tsx index fe88f1b..969cc45 100644 --- a/examples/cube.fixture.tsx +++ b/examples/cube.fixture.tsx @@ -1,12 +1,11 @@ -import { designCodeCube } from "src/designCode"; import Example from "src/Example"; import { Cube } from "../lib"; import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( - - - - + + + + -) +); diff --git a/examples/cuboid.fixture.tsx b/examples/cuboid.fixture.tsx index 24d0637..10b7df9 100644 --- a/examples/cuboid.fixture.tsx +++ b/examples/cuboid.fixture.tsx @@ -1,12 +1,11 @@ -import { designCodeCuboid } from "src/designCode"; import Example from "src/Example"; import { Cuboid } from "../lib"; import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( - - - - + + + + -) +); diff --git a/examples/custom-sphere.fixture.tsx b/examples/custom-sphere.fixture.tsx index d77d106..69492cb 100644 --- a/examples/custom-sphere.fixture.tsx +++ b/examples/custom-sphere.fixture.tsx @@ -1,12 +1,11 @@ -import { designCodeCustomSphere } from "src/designCode"; import Example from "src/Example"; import { Sphere } from "../lib"; import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( - - - - + + + + -) +); diff --git a/examples/custom-torus.fixture.tsx b/examples/custom-torus.fixture.tsx index 7e6adb7..8c2ad58 100644 --- a/examples/custom-torus.fixture.tsx +++ b/examples/custom-torus.fixture.tsx @@ -1,20 +1,19 @@ -import { designCodeCustomTorus } from "src/designCode"; import Example from "src/Example"; import { Torus } from "../lib"; import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( - - - - + + + + -) +); diff --git a/examples/custom.fixture.tsx b/examples/custom.fixture.tsx index 95dc08c..adcbf4b 100644 --- a/examples/custom.fixture.tsx +++ b/examples/custom.fixture.tsx @@ -1,18 +1,17 @@ import { booleans, primitives } from "@jscad/modeling"; -import { designCodeCustom } from "src/designCode"; import Example from "src/Example"; import { Custom } from "../lib"; import { JsCadFixture } from "../lib/components/jscad-fixture"; -const cube = primitives.cube({ size: 10 }) -const sphere = primitives.sphere({ radius: 6, segments: 32 }) +const cube = primitives.cube({ size: 10 }); +const sphere = primitives.sphere({ radius: 6, segments: 32 }); -const intersected = booleans.subtract(cube, sphere) +const intersected = booleans.subtract(cube, sphere); export default () => ( - - - - + + + + -) +); diff --git a/examples/cylinder.fixture.tsx b/examples/cylinder.fixture.tsx index 8f29114..793f3a6 100644 --- a/examples/cylinder.fixture.tsx +++ b/examples/cylinder.fixture.tsx @@ -1,19 +1,18 @@ -import { designCodeCylinder } from "src/designCode"; import Example from "src/Example"; import { Cylinder } from "../lib"; import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( - - - - - + + + + + -) +); diff --git a/examples/ellipsoid.fixture.tsx b/examples/ellipsoid.fixture.tsx index 627118a..25050b7 100644 --- a/examples/ellipsoid.fixture.tsx +++ b/examples/ellipsoid.fixture.tsx @@ -1,12 +1,11 @@ -import { designCodeEllipsoid } from "src/designCode"; import Example from "src/Example"; import { Ellipsoid } from "../lib"; import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( - - - - + + + + -) +); diff --git a/examples/extrude-from-slices.fixture.tsx b/examples/extrude-from-slices.fixture.tsx index 4b93f31..c9f510e 100644 --- a/examples/extrude-from-slices.fixture.tsx +++ b/examples/extrude-from-slices.fixture.tsx @@ -1,60 +1,59 @@ import jscad from "@jscad/modeling"; -import { designCodeExtrudeFromSlices } from "src/designCode"; import Example from "src/Example"; import { ExtrudeFromSlices } from "../lib"; import { JsCadFixture } from "../lib/components/jscad-fixture"; -const { bezier } = jscad.curves +const { bezier } = jscad.curves; const { circle, line, polygon, rectangle, roundedRectangle, star } = - jscad.primitives + jscad.primitives; const { extrudeLinear, extrudeRotate, extrudeFromSlices, slice } = - jscad.extrusions -const { mat4 } = jscad.maths + jscad.extrusions; +const { mat4 } = jscad.maths; const baseSlice = slice.fromPoints([ [2, 2], [-2, 2], [-2, -2], [2, -2], -]) +]); -const xCurve = bezier.create([1, 1.8, 0.4, 1]) -const yCurve = bezier.create([1, 1.8, 0.5]) +const xCurve = bezier.create([1, 1.8, 0.4, 1]); +const yCurve = bezier.create([1, 1.8, 0.5]); export default () => ( - - - + + - + return newslice; + }} + /> + -) +); diff --git a/examples/extrude-linear.fixture.tsx b/examples/extrude-linear.fixture.tsx index 75c15ce..1d8744a 100644 --- a/examples/extrude-linear.fixture.tsx +++ b/examples/extrude-linear.fixture.tsx @@ -1,26 +1,24 @@ -import { designCodeExtrudeLinear } from "src/designCode"; import Example from "src/Example"; import { JsCadFixture } from "../lib/components/jscad-fixture"; import { ExtrudeLinear } from "../lib/jscad-fns"; import { Polygon } from "../lib/jscad-fns/polygon"; export default () => ( - - - - - - - + + + + + + -) +); diff --git a/examples/extrude-rectangular.fixture.tsx b/examples/extrude-rectangular.fixture.tsx index 74595bc..cb9153c 100644 --- a/examples/extrude-rectangular.fixture.tsx +++ b/examples/extrude-rectangular.fixture.tsx @@ -1,30 +1,29 @@ -import { designCodeExtrudeRectangular } from "src/designCode" -import Example from "src/Example" -import { JsCadFixture } from "../lib/components/jscad-fixture" -import { ExtrudeRectangular } from "../lib/jscad-fns" -import { Polygon } from "../lib/jscad-fns/polygon" +import Example from "src/Example"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; +import { ExtrudeRectangular } from "../lib/jscad-fns"; +import { Polygon } from "../lib/jscad-fns/polygon"; export default () => ( - - - - - - + + + + + + -) +); diff --git a/examples/high-geodesic-sphere.fixture.tsx b/examples/high-geodesic-sphere.fixture.tsx index 0c5aa99..25ca143 100644 --- a/examples/high-geodesic-sphere.fixture.tsx +++ b/examples/high-geodesic-sphere.fixture.tsx @@ -1,17 +1,16 @@ -import { designCodeHighGeodesicsphere } from "src/designCode" -import Example from "src/Example" -import { GeodesicSphere } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" +import Example from "src/Example"; +import { GeodesicSphere } from "../lib"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( - - - - - -) + + + + + +); diff --git a/examples/hull-chain.fixture.tsx b/examples/hull-chain.fixture.tsx index deac085..e82f54c 100644 --- a/examples/hull-chain.fixture.tsx +++ b/examples/hull-chain.fixture.tsx @@ -1,16 +1,15 @@ -import { designCodeHullChain } from "src/designCode" -import Example from "src/Example" -import { Cuboid, Ellipsoid, HullChain } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" +import Example from "src/Example"; +import { Cuboid, Ellipsoid, HullChain } from "../lib"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( - - - - - - - - + + + + + + + + -) +); diff --git a/examples/hull.fixture.tsx b/examples/hull.fixture.tsx index c887e33..2313261 100644 --- a/examples/hull.fixture.tsx +++ b/examples/hull.fixture.tsx @@ -1,15 +1,14 @@ -import { designCodeHull } from "src/designCode" -import Example from "src/Example" -import { Cuboid, Ellipsoid, Hull } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" +import Example from "src/Example"; +import { Cuboid, Ellipsoid, Hull } from "../lib"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( - - - - - - - + + + + + + + -) +); diff --git a/examples/low-geodesic-sphere.fixture.tsx b/examples/low-geodesic-sphere.fixture.tsx index 370e5de..a94ea1d 100644 --- a/examples/low-geodesic-sphere.fixture.tsx +++ b/examples/low-geodesic-sphere.fixture.tsx @@ -1,12 +1,11 @@ -import { designCodeGeodesicSphere } from "src/designCode" -import Example from "src/Example" -import { GeodesicSphere } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" +import Example from "src/Example"; +import { GeodesicSphere } from "../lib"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( - - - - + + + + -) +); diff --git a/examples/partial-cylindrical-elliptic.fixture.tsx b/examples/partial-cylindrical-elliptic.fixture.tsx index b5ed3c6..0614301 100644 --- a/examples/partial-cylindrical-elliptic.fixture.tsx +++ b/examples/partial-cylindrical-elliptic.fixture.tsx @@ -1,19 +1,18 @@ -import { designCodeCylinderElliptic } from "src/designCode" -import Example from "src/Example" -import { CylinderElliptic } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" +import Example from "src/Example"; +import { CylinderElliptic } from "../lib"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( - - - - - -) + + + + + +); diff --git a/examples/polygon.fixture.tsx b/examples/polygon.fixture.tsx index f7e2146..7441711 100644 --- a/examples/polygon.fixture.tsx +++ b/examples/polygon.fixture.tsx @@ -1,22 +1,21 @@ -import { designCodePolygon } from "src/designCode" -import Example from "src/Example" -import { JsCadFixture } from "../lib/components/jscad-fixture" -import { Polygon } from "../lib/jscad-fns/polygon" +import Example from "src/Example"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; +import { Polygon } from "../lib/jscad-fns/polygon"; export default () => ( - - - - + + + + -) +); diff --git a/examples/project.fixture.tsx b/examples/project.fixture.tsx index d4a1b7e..e5a5288 100644 --- a/examples/project.fixture.tsx +++ b/examples/project.fixture.tsx @@ -1,25 +1,24 @@ -import { designCodeProject } from "src/designCode" -import Example from "src/Example" -import { JsCadFixture } from "../lib/components/jscad-fixture" -import { Project } from "../lib/jscad-fns" -import { Polygon } from "../lib/jscad-fns/polygon" +import Example from "src/Example"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; +import { Project } from "../lib/jscad-fns"; +import { Polygon } from "../lib/jscad-fns/polygon"; export default () => ( - - - - - - + + + + + + -) +); diff --git a/examples/rectangle.fixture.tsx b/examples/rectangle.fixture.tsx index 91ccee2..47b6de0 100644 --- a/examples/rectangle.fixture.tsx +++ b/examples/rectangle.fixture.tsx @@ -1,13 +1,11 @@ -import { designCodeRectangle } from "src/designCode" -import Example from "src/Example" -import { Rectangle } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" - +import Example from "src/Example"; +import { Rectangle } from "../lib"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( - - - - - -) + + + + + +); diff --git a/examples/rotate.fixture.tsx b/examples/rotate.fixture.tsx index a88581a..3f5a3ea 100644 --- a/examples/rotate.fixture.tsx +++ b/examples/rotate.fixture.tsx @@ -1,25 +1,24 @@ -import { designCodeRotate } from "src/designCode" -import Example from "src/Example" -import { Polygon } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" -import { Rotate } from "../lib/jscad-fns" +import Example from "src/Example"; +import { Polygon } from "../lib"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; +import { Rotate } from "../lib/jscad-fns"; export default () => ( - - - - - - - -) + + + + + + + +); diff --git a/examples/rounded-cuboid.fixture.tsx b/examples/rounded-cuboid.fixture.tsx index f05e11c..3ca5e67 100644 --- a/examples/rounded-cuboid.fixture.tsx +++ b/examples/rounded-cuboid.fixture.tsx @@ -1,17 +1,16 @@ -import { designCodeRoundedCuboid } from "src/designCode" -import Example from "src/Example" -import { RoundedCuboid } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" +import Example from "src/Example"; +import { RoundedCuboid } from "../lib"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( - - - - + + + + -) +); diff --git a/examples/rounded-cylinder.fixture.tsx b/examples/rounded-cylinder.fixture.tsx index c398602..59cebfd 100644 --- a/examples/rounded-cylinder.fixture.tsx +++ b/examples/rounded-cylinder.fixture.tsx @@ -1,18 +1,17 @@ -import { designCodeRoundedCylinder } from "src/designCode" -import Example from "src/Example" -import { RoundedCylinder } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" +import Example from "src/Example"; +import { RoundedCylinder } from "../lib"; +import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( - - - - + + + + -) +); diff --git a/examples/sphere.fixture.tsx b/examples/sphere.fixture.tsx index e03e545..2b0b56d 100644 --- a/examples/sphere.fixture.tsx +++ b/examples/sphere.fixture.tsx @@ -1,10 +1,9 @@ -import { designCodeSphere } from "src/designCode"; import Example from "src/Example"; import { Sphere } from "../lib"; import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( - + diff --git a/examples/subtract.fixture.tsx b/examples/subtract.fixture.tsx index e762d04..8d8afc5 100644 --- a/examples/subtract.fixture.tsx +++ b/examples/subtract.fixture.tsx @@ -1,10 +1,9 @@ -import { designCodeSubtract } from "src/designCode"; import Example from "src/Example"; import { Cube, Sphere, Subtract } from "../lib"; import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( - + diff --git a/examples/torus.fixture.tsx b/examples/torus.fixture.tsx index 7b7b7cd..b4a8f0d 100644 --- a/examples/torus.fixture.tsx +++ b/examples/torus.fixture.tsx @@ -1,10 +1,9 @@ -import { designCodeTorus } from "src/designCode"; import Example from "src/Example"; import { Torus } from "../lib"; import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( - + ( - + diff --git a/examples/twisted-cylindrical-elliptic.fixture.tsx b/examples/twisted-cylindrical-elliptic.fixture.tsx index d8b9665..1e9705f 100644 --- a/examples/twisted-cylindrical-elliptic.fixture.tsx +++ b/examples/twisted-cylindrical-elliptic.fixture.tsx @@ -1,10 +1,9 @@ -import { designCodeTwistedCylinderElliptic } from "src/designCode"; import Example from "src/Example"; import { CylinderElliptic } from "../lib"; import { JsCadFixture } from "../lib/components/jscad-fixture"; export default () => ( - + = ({ code }) => {
{code} - - {/* Copy button outside the SyntaxHighlighter, but within the container */} - - {/* Optional message to show copy success */} {copySuccess && ( = ({ designCode, children }) => { +const Example: React.FC = ({ children }) => { const [showCode, setShowCode] = useState(false); - const handleToggleCode = () => { - setShowCode(!showCode); - console.log('showCode is now:', !showCode); // Debugging line - }; + const handleToggleCode = () => setShowCode(!showCode); + + // Convert children to JSX string + const designCode = jsxToString(children, { + useFunctionCode: true, + functionNameOnly: true, + }); return (
{children} - - {/* Button to toggle code visibility */} - - {/* Conditionally render the CodeViewer */} {showCode && (
diff --git a/src/designCode.ts b/src/designCode.ts deleted file mode 100644 index f7f235f..0000000 --- a/src/designCode.ts +++ /dev/null @@ -1,630 +0,0 @@ -// src/code/designCode.ts - -export const designCodeArray = ` -import { JsCadFixture } from "../lib/components/jscad-fixture" -import { Colorize, Cuboid, Sphere, Subtract } from "../lib/jscad-fns" - -export default () => ( - - - - {[-4, -2, 0, 2, 4].map((value, index) => ( - - ))} - - -); -`; - - - -// Circle design code -export const designCodeCircle = ` -import { Circle } from "../lib"; -import { JsCadFixture } from "../lib/components/jscad-fixture"; - -export default () => ( - - - -); -`; - - -export const designCodeColorizeCube = ` -import { Colorize, Cube } from "../lib/jscad-fns"; -import { JsCadFixture } from "../lib/components/jscad-fixture"; - -export default () => ( - - - - - -); -`; - -//cone -export const designCodeCone = ` -import { CylinderElliptic } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" - -export default () => ( - - - -); -`; - - -//cube - -export const designCodeCube = ` -import { Cube } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" - -export default () => ( - - - -); -`; - -//cuboid - -export const designCodeCuboid = ` -import { Cuboid } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" - -export default () => ( - - - -); -`; - -//custom - -export const designCodeCustom = ` -import { booleans, primitives } from "@jscad/modeling" -import { Custom } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" - -const cube = primitives.cube({ size: 10 }) -const sphere = primitives.sphere({ radius: 6, segments: 32 }) - -const intersected = booleans.subtract(cube, sphere) - -export default () => ( - - - -) - -; -`; - - -//custom-sphere - -export const designCodeCustomSphere = ` -import { Sphere } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" - -export default () => ( - - - -) -; -`; - -//custom-torus - -export const designCodeCustomTorus = ` -import { Torus } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" - -export default () => ( - - - -) -; -`; - - -//cylinder - -export const designCodeCylinder = ` -import { Cylinder } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" - -export default () => ( - - - - -); -`; - -//ellipsoid - -export const designCodeEllipsoid = ` -import { Ellipsoid } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" - -export default () => ( - - - -); -`; - -//ExtrudeFromSlices - -export const designCodeExtrudeFromSlices = ` -import { ExtrudeFromSlices } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" -import jscad from "@jscad/modeling" - -const { bezier } = jscad.curves -const { circle, line, polygon, rectangle, roundedRectangle, star } = - jscad.primitives -const { extrudeLinear, extrudeRotate, extrudeFromSlices, slice } = - jscad.extrusions -const { mat4 } = jscad.maths - -const baseSlice = slice.fromPoints([ - [2, 2], - [-2, 2], - [-2, -2], - [2, -2], -]) - -const xCurve = bezier.create([1, 1.8, 0.4, 1]) -const yCurve = bezier.create([1, 1.8, 0.5]) - -export default () => ( - - - -); -`; - -//extrude-helical - -//add code here - - -//extrude-linear - -export const designCodeExtrudeLinear = ` -import { JsCadFixture } from "../lib/components/jscad-fixture" -import { ExtrudeLinear } from "../lib/jscad-fns" -import { Polygon } from "../lib/jscad-fns/polygon" - -export default () => ( - - - - - -) -; -`; - -//ExtrudeRectangular - -export const designCodeExtrudeRectangular = ` -import { JsCadFixture } from "../lib/components/jscad-fixture" -import { ExtrudeRectangular } from "../lib/jscad-fns" -import { Polygon } from "../lib/jscad-fns/polygon" - -export default () => ( - - - - - -) - -; -`; - -//ExtrudeRotate - -//code here - - -//HighGeodesicsphere - -export const designCodeHighGeodesicsphere = ` -import { GeodesicSphere } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" - -export default () => ( - - - -) -; -`; - -// hull - -export const designCodeHull = ` -import { Cuboid, Ellipsoid, Hull, Translate } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" - -export default () => ( - - - - - - -) -; -`; - - -//hull-chain - -export const designCodeHullChain = ` -import { Cuboid, Ellipsoid, HullChain } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" - -export default () => ( - - - - - - - -) - -; -`; - -//GeodesicSphere - -export const designCodeGeodesicSphere = ` -import { GeodesicSphere } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" - -export default () => ( - - - -); -`; - -//CylinderElliptic - -export const designCodeCylinderElliptic = ` -import { CylinderElliptic } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" - -export default () => ( - - - -) -; -`; - -//polygon - -export const designCodePolygon = ` -import { JsCadFixture } from "../lib/components/jscad-fixture" -import { Polygon } from "../lib/jscad-fns/polygon" - -export default () => ( - - - -) -; -`; - -//project - -export const designCodeProject = ` -import { JsCadFixture } from "../lib/components/jscad-fixture" -import { Project } from "../lib/jscad-fns" -import { Polygon } from "../lib/jscad-fns/polygon" - -export default () => ( - - - - - -); -`; - - -//rectangle - -export const designCodeRectangle = ` -import { Rectangle } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" - -export default () => ( - - - -); -`; - -//rotate - -export const designCodeRotate = ` -import { Polygon } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" -import { Rotate } from "../lib/jscad-fns" - -export default () => ( - - - - - -); -`; - -//RoundedCuboid - -export const designCodeRoundedCuboid = ` -import { RoundedCuboid } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" - -export default () => ( - - - -); -`; - -//RoundedCylinder -//from dev - -export const designCodeRoundedCylinder = ` -import { RoundedCylinder } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" - -export default () => ( - - - -); -`; - -//Sphere - -export const designCodeSphere = ` -import { Sphere } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" - -export default () => ( - - - -); -`; - -//Subtract - -export const designCodeSubtract = ` -import { Cube, Sphere, Subtract } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" - -export default () => ( - - - - - - -); -`; - -//torus - - -export const designCodeTorus = ` -import { Torus } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" - -export default () => ( - - - -) -; -`; - -//Translate - -export const designCodeTranslate = ` -import { Cuboid } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" -import { Translate } from "../lib/jscad-fns" - -export default () => ( - - - - - - - - - - - - - - - - - - - - -) -; -`; - -//Twisted-CylinderElliptic - -export const designCodeTwistedCylinderElliptic = ` -import { CylinderElliptic } from "../lib" -import { JsCadFixture } from "../lib/components/jscad-fixture" - -export default () => ( - - - -); -`; \ No newline at end of file