🌈 Colorful Playground

.github/workflows/test.yml

@@ -9,21 +9,29 @@ jobs:
   build:
     runs-on: ubuntu-latest
     strategy:
+      fail-fast: false
       matrix:
-        node: [ 18, 20, 22 ]
-    name: Node${{ matrix.node }}
+        node: [
+          {"name": "LTS", "version": "lts/-2"},
+          {"name": "latest", "version": "latest"}
+        ]
+    name: Node ${{ matrix.node.name }}
+    env:
+      CI: true
     steps:
       - uses: actions/checkout@v4
-      - name: Setup node ${{ matrix.node }}
+      - name: Setup node ${{ matrix.node.name }}
         uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node }}
+          node-version: ${{ matrix.node.version }}
       - run: npm install
       - run: make public
       - run: npm run build
       - name: Archive production artifacts
         uses: actions/upload-artifact@v4
         with:
-          name: dist-node${{ matrix.node }}
+          name: dist-node-${{ matrix.node.name }}
           path: dist
           retention-days: 30
+      - run: NODE_ENV=development npm run test:e2e
+      - run: NODE_ENV=production  npm run test:e2e

LICENSE.md

@@ -22,6 +22,7 @@ The WASM build was made possible by https://github.com/DSchroer/openscad-wasm.
 * [GNU MP](#gnu-mp)
 * [OpenSCAD](#openscad)
 * [CGAL](#cgal)
+* [JSZip](#jszip)
 * [Manifold](#manifold)
 * [Eigen](#eigen)
 * [glib2](#glib2)
@@ -59,6 +60,12 @@ https://github.com/elalish/manifold
 
 Licensed under the [Apache 2.0](#apache2) license.
 
+## JSZip
+
+https://github.com/Stuk/jszip
+
+Licensed under the [GPLv3](#gplv3) (actually dual-licensed under MIT, but we're picking this one here for brevity).
+
 ## PrimeReact
 
 https://github.com/primefaces/primereact

Makefile

@@ -1,5 +1,5 @@
-# Pinning WASM build to last good revision (https://github.com/openscad/openscad-playground/issues/60)
-WASM_BUILD_URL=https://files.openscad.org/snapshots/OpenSCAD-2024.09.27.wasm20596-WebAssembly.zip
+# Pin WASM build to a version known to work
+WASM_BUILD_URL=https://output.circle-artifacts.com/output/job/fdf49786-06c1-4775-aaa3-15dc089efc12/artifacts/0/wasm/OpenSCAD-2024.12.22.wasm21804-WebAssembly-web.zip
 # WASM_SNAPSHOT_JS_URL=https://files.openscad.org/snapshots/.snapshot_wasm.js
 # WASM_BUILD_URL=$(shell curl ${WASM_SNAPSHOT_JS_URL} 2>/dev/null | grep https | sed -E "s/.*(https:[^']+)'.*/\1/" )
 
@@ -47,13 +47,21 @@ clean:
 dist/index.js: public
 	npm run build
 
-dist/openscad-worker.js: src/openscad-worker.ts
+dist/openscad-worker.js: src/openscad-worker.ts src/wasm/openscad.js
 	npx rollup -c
 
 src/wasm: libs/openscad-wasm
 	rm -f src/wasm
 	ln -sf "$(shell pwd)/libs/openscad-wasm" src/wasm
 
+# libs/openscad/build/openscad.js: libs/openscad
+# 	( cd libs/openscad && ./scripts/wasm-base-docker-run.sh emcmake cmake -B build -DCMAKE_BUILD_TYPE=Release -DEXPERIMENTAL=1 )
+# 	( cd libs/openscad && ./scripts/wasm-base-docker-run.sh /bin/bash -c "cmake --build build -j || cmake --build build -j2 || cmake --build build" )
+
+# libs/openscad-wasm: libs/openscad/build/openscad.js
+# 	mkdir -p libs/openscad-wasm
+# 	cp libs/openscad/build/openscad.* libs/openscad-wasm/
+
 libs/openscad-wasm:
 	mkdir -p libs/openscad-wasm
 	wget ${WASM_BUILD_URL} -O libs/openscad-wasm.zip
@@ -116,7 +124,8 @@ NOTO_FONTS=\
 # libs/noto/NotoSansCJKtc-Regular.otf
 
 public/libraries/fonts.zip: $(NOTO_FONTS) libs/liberation
-	zip -r $@ -j fonts.conf libs/noto/{*.ttf,*.otf} libs/liberation/{*.ttf,LICENSE,AUTHORS}
+	mkdir -p public/libraries
+	zip -r $@ -j fonts.conf libs/noto/*.ttf libs/liberation/{*.ttf,LICENSE,AUTHORS}
 
 libs/noto/%.ttf:
 	mkdir -p libs/noto
@@ -130,7 +139,7 @@ libs/liberation:
 	git clone --recurse https://github.com/shantigilbert/liberation-fonts-ttf.git ${SHALLOW} ${SINGLE_BRANCH} $@
 
 libs/openscad:
-	git clone https://github.com/openscad/openscad.git ${SHALLOW} ${SINGLE_BRANCH} $@
+	git clone --recurse https://github.com/openscad/openscad.git ${SHALLOW} ${SINGLE_BRANCH} $@
 
 public/libraries/openscad.zip: libs/openscad
 	mkdir -p public/libraries
@@ -176,7 +185,7 @@ libs/YAPP_Box:
 
 public/libraries/YAPP_Box.zip: libs/YAPP_Box
 	mkdir -p public/libraries
-	( cd libs/YAPP_Box ; zip -r ../../public/libraries/YAPP_Box.zip *.scad LICENSE )
+	( cd libs/YAPP_Box ; zip -r ../../public/libraries/YAPP_Box.zip `find . -name '*.scad'` LICENSE )
 
 libs/MCAD:
 	git clone --recurse https://github.com/openscad/MCAD.git ${SHALLOW} ${SINGLE_BRANCH} $@

README.md

@@ -47,11 +47,17 @@ Prerequisites:
 *   wget
 *   GNU make
 *   npm
+*   Docker able to run amd64 containers. If running on a different platform (including Silicon Mac), you can add support for amd64 images through QEMU with:
+
+  ```bash
+  docker run --privileged --rm tonistiigi/binfmt --install all
+  ```
 
 Local dev:
 
 ```bash
 make public
+npm install
 npm start
 # http://localhost:4000/
 ```
@@ -60,6 +66,7 @@ Local prod (test both the different inlining and serving under a prefix):
 
 ```bash
 make public
+npm install
 npm run start:prod
 # http://localhost:3000/dist/
 ```
@@ -68,7 +75,8 @@ Deployment (edit "homepage" in `package.json` to match your deployment root!):
 
 ```bash
 make public
-npm run build
+npm install
+NODE_ENV=production npm run build
 
 rm -fR ../ochafik.github.io/openscad2 && cp -R dist ../ochafik.github.io/openscad2 
 # Now commit and push changes, wait for site update and enjoy!

jest-puppeteer.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  launch: {
+    headless: process.env.CI === "true",
+  },
+  server: {
+    command: `npm run start:${process.env.NODE_ENV}`,
+    port: process.env.NODE_ENV === 'production' ? 3000 : 4000,
+    launchTimeout: 180000,
+  },
+};

jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  preset: "jest-puppeteer",
+  testMatch: [
+    "**/tests/**/*.js",
+  ],
+};

package.json

@@ -4,6 +4,8 @@
   "private": true,
   "homepage": "https://ochafik.com/openscad2/",
   "dependencies": {
+    "@gltf-transform/core": "^4.1.1",
+    "@gltf-transform/extensions": "^4.1.1",
     "@monaco-editor/loader": "^1.3.2",
     "@monaco-editor/react": "^4.4.6",
     "@testing-library/jest-dom": "^5.16.5",
@@ -14,18 +16,20 @@
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "debug": "^4.3.4",
+    "jszip": "^3.10.1",
     "monaco-editor": "^0.36.1",
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
     "primereact": "9.3.x",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-stl-viewer": "^2.2.5",
-    "react-widgets": "^5.8.4"
+    "react-stl-viewer": "^2.2.5"
   },
   "scripts": {
-    "start": "concurrently 'npx webpack serve --mode=development' 'NODE_ENV=development npx rollup --config openscad-worker.rollup.config.js --watch'",
-    "start:prod": "PUBLIC_URL=http://localhost:3000/dist/ npm run build && npx serve",
+    "test:e2e": "jest",
+    "start:development": "concurrently 'npx webpack serve --mode=development' 'NODE_ENV=development npx rollup --config openscad-worker.rollup.config.js --watch'",
+    "start:production": "NODE_ENV=production PUBLIC_URL=http://localhost:3000/dist/ npm run build && npx serve",
+    "start": "npm run start:development",
     "build": "NODE_ENV=production npx rollup --config openscad-worker.rollup.config.js && webpack --mode=production"
   },
   "eslintConfig": {
@@ -57,7 +61,10 @@
     "concurrently": "^7.6.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
+    "jest": "^29.7.0",
+    "jest-puppeteer": "^11.0.0",
     "livereload": "^0.9.3",
+    "puppeteer": "^23.11.1",
     "rollup": "^2.79.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-css": "^1.0.0",
@@ -68,7 +75,7 @@
     "serve": "^14.2.0",
     "style-loader": "^3.3.3",
     "ts-loader": "^9.4.2",
-    "tslib": "^2.5.0",
+    "tslib": "^2.6.3",
     "webpack": "^5.76.3",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.2",

src/components/App.tsx

@@ -12,10 +12,6 @@ import { ConfirmDialog } from 'primereact/confirmdialog';
 import CustomizerPanel from './CustomizerPanel';
 
 
-// import "primereact/resources/themes/lara-light-indigo/theme.css";
-// import "primereact/resources/primereact.min.css";
-// import "primeicons/primeicons.css"; 
-
 export function App({initialState, statePersister, fs}: {initialState: State, statePersister: StatePersister, fs: FS}) {
   const [state, setState] = useState(initialState);
 

src/components/CustomizerPanel.tsx

@@ -1,7 +1,7 @@
 // Portions of this file are Copyright 2021 Google LLC, and licensed under GPL2+. See COPYING.
 
 import { CSSProperties, useContext } from 'react';
-import { ModelContext, FSContext } from './contexts';
+import { ModelContext } from './contexts';
 
 import { Dropdown } from 'primereact/dropdown';
 import { Slider } from 'primereact/slider';
@@ -48,6 +48,7 @@ export default function CustomizerPanel({className, style}: {className?: string,
         style={{
           display: 'flex',
           flexDirection: 'column',
+          maxHeight: '80vh',
           overflow: 'scroll',
           ...style,
           bottom: 'unset',
@@ -81,8 +82,6 @@ export default function CustomizerPanel({className, style}: {className?: string,
 function ParameterInput({param, value, className, style, handleChange}: {param: Parameter, value: any, className?: string, style?: CSSProperties, handleChange: (key: string, value: any) => void}) {
   return (
     <div 
-      // ref={ref} 
-      // onClick={state.view.layout.mode === 'single' ? handleClick : undefined}
       style={{
         flex: 1,
         ...style,
@@ -99,7 +98,6 @@ function ParameterInput({param, value, className, style, handleChange}: {param:
           justifyContent: 'space-between',
         }}>
         <div 
-          // onClick={swallowClick}
           style={{
             flex: 1,
             display: 'flex',
@@ -109,10 +107,7 @@ function ParameterInput({param, value, className, style, handleChange}: {param:
           <div>{param.caption}</div>
         </div>
         <div 
-          // onClick={swallowClick}
           style={{
-            // flex: 1,
-            // margin: '10px',
             display: 'flex',
             flexDirection: 'row',
             alignItems: 'center',
@@ -130,7 +125,6 @@ function ParameterInput({param, value, className, style, handleChange}: {param:
           )}
           {param.type === 'string' && param.options && (
             <Dropdown
-              // style={{flex: 1}}
               value={value || param.initial}
               options={param.options}
               onChange={(e) => handleChange(param.name, e.value)}
@@ -140,18 +134,15 @@ function ParameterInput({param, value, className, style, handleChange}: {param:
           )}
           {param.type === 'boolean' && (
             <Checkbox
-              // style={{flex: 1}}
               checked={value ?? param.initial}
               onChange={(e) => handleChange(param.name, e.checked)}
             />
           )}
           {!Array.isArray(param.initial) && param.type === 'number' && !('options' in param) && (
             <InputNumber
-              // style={{flex: 1}}
               value={value || param.initial}
               showButtons
               size={5}
-              // buttonLayout='horizontal'
               onValueChange={(e) => handleChange(param.name, e.value)}
             />
           )}
@@ -176,7 +167,6 @@ function ParameterInput({param, value, className, style, handleChange}: {param:
                   min={param.min}
                   max={param.max}
                   showButtons
-                  // buttonLayout='horizontal'
                   size={5}
                   step={param.step}
                   onValueChange={(e) => {
@@ -194,7 +184,6 @@ function ParameterInput({param, value, className, style, handleChange}: {param:
               marginRight: '0',
               visibility: value === undefined || (JSON.stringify(value) === JSON.stringify(param.initial)) ? 'hidden' : 'visible',
             }}
-            // tooltip={`Reset to default value (${JSON.stringify(param.initial)})`}
             tooltipOptions={{position: 'left'}}
             icon='pi pi-refresh'
             className='p-button-text'/>