format project

app/web/public/demo-worker.js

@@ -24,7 +24,7 @@
 const setPoints = (points, p, i)=>{
   points[i++] = p[0]
   points[i++] = p[1]
-  points[i++] = p[2] || 0         
+  points[i++] = p[2] || 0
 }
 
 function CSG2Vertices(csg){
@@ -54,11 +54,11 @@ function CSG2Vertices(csg){
       posOffset  +=2
       for(let i=2; i<len; i++){
         vertices.set(arr[i], vertOffset)
-          
+
           indices[indOffset++] = first
           indices[indOffset++] = first + i -1
-          indices[indOffset++] = first + i 
+          indices[indOffset++] = first + i
-          
+
           vertOffset += 3
           posOffset  += 1
       }
@@ -72,22 +72,22 @@ function CSG2LineVertices(csg){
   if(csg.isClosed) vLen += 3
 
   var vertices = new Float32Array(vLen)
-  
+
-  
+
   csg.points.forEach((p,idx)=>setPoints(vertices, p, idx * 3 ))
-  
+
   if(csg.isClosed){
     setPoints(vertices, csg.points[0], vertices.length - 3 )
   }
   return {vertices, type:'line'}
-}     
+}
 
 function CSG2LineSegmentsVertices(csg){
   let vLen = csg.sides.length * 6
 
   var vertices = new Float32Array(vLen)
   csg.sides.forEach((side,idx)=>{
-    let i = idx * 6 
+    let i = idx * 6
     setPoints(vertices, side[0], i)
     setPoints(vertices, side[1], i+3)
   })
@@ -104,14 +104,14 @@ function CSGCached(func, data, cacheKey, transferable){
   geo = func(data)
 
   // fill transferable array for postMessage optimization
-  if(transferable){       
+  if(transferable){
     const {vertices, indices} = geo
     transferable.push(vertices)
     if(indices) transferable.push(indices)
   }
 
     CSGToBuffers.cache.set(cacheKey, geo)
-    return geo      
+    return geo
 }
 
 function CSGToBuffers(csg, transferable){
@@ -159,7 +159,7 @@ function requireModule(url, source){
     try {
         const exports={};
         if(!source) source = requireFile(url)
-        const module = { id: url, uri: url, exports:exports, source }; //according to node.js modules 
+        const module = { id: url, uri: url, exports:exports, source }; //according to node.js modules
         // fix, add comment to show source on Chrome Dev Tools
         source="//@ sourceURL="+url+"\n" + source;
         //------
@@ -172,7 +172,7 @@ function requireModule(url, source){
     }
 }
 
-require.cache = {}  
+require.cache = {}
 require.alias = {}
 
 
@@ -189,7 +189,7 @@ const initCanvas = (canvas, callback)=>{
     const cmd = {
       worker: 'render',
       dx: lastX - ev.pageX,
-      dy: ev.pageY - lastY     
+      dy: ev.pageY - lastY
     }
 
     const shiftKey = (ev.shiftKey === true) || (ev.touches && ev.touches.length > 2)
@@ -244,7 +244,6 @@ const makeScriptWorker = ({callback, convertToSolids})=>{
   let workerBaseURI, onInit
 
   function runMain(params={}){
-    console.log('runMain');
     let time = Date.now()
     let solids
     try{
@@ -265,7 +264,7 @@ const makeScriptWorker = ({callback, convertToSolids})=>{
         obj.transforms = csg.transforms
         return obj
       })
-    }else if(convertToSolids === 'regl'){    
+    }else if(convertToSolids === 'regl'){
       const { entitiesFromSolids } = require('@jscad/regl-renderer')
       time = Date.now()
       entities = entitiesFromSolids({}, solids)
@@ -281,12 +280,12 @@ const makeScriptWorker = ({callback, convertToSolids})=>{
     runScript: ({script,url, params={}})=>{
       if(!initialized){
         onInit = ()=>handlers.runScript({script,url, params})
-      }    
+      }
       let script_module
       try{
         script_module = requireModule(url,script)
       }catch(e){
-        callback({action:'entities', worker:'render', error:e.message, stack:e.stack.toString()})      
+        callback({action:'entities', worker:'render', error:e.message, stack:e.stack.toString()})
         return
       }
       main = script_module.exports.main
@@ -304,12 +303,12 @@ const makeScriptWorker = ({callback, convertToSolids})=>{
       if(!baseURI && typeof document != 'undefined' && document.baseURI){
         baseURI = document.baseURI
       }
-      
+
       if(baseURI) workerBaseURI = baseURI.toString()
 
       alias.forEach(arr=>{
         let [orig, ...aliases] = arr
-        aliases.forEach(a=>{  
+        aliases.forEach(a=>{
           require.alias[a] = orig
           if(a.toLowerCase().substr(-3)!=='.js') require.alias[a+'.js'] = orig
         })
@@ -392,7 +391,7 @@ let perspectiveCamera
       glOptions: {gl}
     }
     if(type == 'webgl'){
-        setupOptions.glOptions.optionalExtensions = ['oes_element_index_uint']      
+        setupOptions.glOptions.optionalExtensions = ['oes_element_index_uint']
     }
     renderer = prepareRender(setupOptions)
 
@@ -412,7 +411,7 @@ let perspectiveCamera
     axisOptions = {
       visuals: {
         drawCmd: 'drawAxis',
-        show: axis.show || axis.show === undefined 
+        show: axis.show || axis.show === undefined
       },
       size: axis.size || 100,
     }
@@ -492,7 +491,7 @@ let perspectiveCamera
     }
   }
 
-  function resize({width,height}){  
+  function resize({width,height}){
     state.canvas.width = width
     state.canvas.height = height
     perspectiveCamera.setProjection(state.camera, state.camera, { width, height })
@@ -504,7 +503,7 @@ let perspectiveCamera
     pan: ({dx,dy})=>{
       panDelta[0] += dx
       panDelta[1] += dy
-      updateView()  
+      updateView()
     },
     rotate: ({dx,dy})=>{
       rotateDelta[0] -= dx
@@ -550,7 +549,7 @@ return (params)=>{
   workerBaseURI = baseURI
 
   const sendCmd = (params, transfer)=>{
-    if(params.worker === 'render') 
+    if(params.worker === 'render')
       sendToRender(params, transfer)
     else if(params.worker === 'script')
       scriptWorker.postMessage(params, transfer)
@@ -572,7 +571,7 @@ return (params)=>{
     console.log('render in scope: '+scope);
     renderWorker = makeRenderWorker({callback:sendCmd})
     sendToRender = (params, transfer)=>renderWorker.postMessage(params, transfer)
-  } 
+  }
 
   if(scope === 'main'){
 //    let extraScript = renderInWorker ? `,'https://unpkg.com/@jscad/regl-renderer'`:''
@@ -581,8 +580,8 @@ importScripts(new URL('${scriptUrl}',baseURI))
 let worker = jscadWorker({
   baseURI: baseURI,
   convertToSolids: ${convertToSolids},
-  scope:'worker', 
+  scope:'worker',
-  callback:(params)=>self.postMessage(params), 
+  callback:(params)=>self.postMessage(params),
   render:${renderInWorker}
 })
 self.addEventListener('message', (e)=>worker.postMessage(e.data))
@@ -602,7 +601,7 @@ self.addEventListener('message', (e)=>worker.postMessage(e.data))
     callback({action:'workerInit',worker:'main'})
   }
 
-  if(canvas){  
+  if(canvas){
     // redirect 'render' messages to renderWorker
     sendToRender = (params, transfer)=>renderWorker.postMessage(params, transfer)
     let width  = canvas.width  = canvas.clientWidth
@@ -613,7 +612,7 @@ self.addEventListener('message', (e)=>worker.postMessage(e.data))
     }
   }
 
-  return {  
+  return {
     updateSize,
     updateParams:({params={}})=>sendCmd({ action:'updateParams', worker:'script', params}),
     runScript: ({script,url=''})=>sendCmd({ action:'runScript', worker:'script', script, url}),

app/web/src/components/EditorMenu/helpers.ts

@@ -59,7 +59,7 @@ export const makeStlDownloadHandler =
         (quality === 'high' || ideType === 'openscad')
       ) {
         saveFile(makeStlBlobFromGeo(geometry))
-      } else if(ideType == 'jscad') {
+      } else if (ideType == 'jscad') {
         saveFile(makeStlBlobFromMesh(geometry))
       } else {
         thunkDispatch((dispatch, getState) => {

app/web/src/components/IdeEditor/IdeEditor.tsx

@@ -14,7 +14,7 @@ const IdeEditor = ({ Loading }) => {
   const [theme, setTheme] = useState('vs-dark')
   const saveCode = useSaveCode()
 
-  const ideTypeToLanguageMap: {[key in CadPackageType]: string} = {
+  const ideTypeToLanguageMap: { [key in CadPackageType]: string } = {
     cadquery: 'python',
     openscad: 'cpp',
     jscad: 'javascript',

app/web/src/components/IdeViewer/IdeViewer.tsx

@@ -25,18 +25,18 @@ function Asset({ geometry: incomingGeo }) {
   }, [incomingGeo])
   if (!incomingGeo) return null
 
-  let groupData = incomingGeo.children ? incomingGeo : null
+  const groupData = incomingGeo.children ? incomingGeo : null
-  if(lastGroup && lastGroup != groupData){
+  if (lastGroup && lastGroup != groupData) {
     state.scene.remove(lastGroup)
-    lastGroup.children.forEach(c=>c?.geometry?.dispose())
+    lastGroup.children.forEach((c) => c?.geometry?.dispose())
     // returning <primitive  object={groupData} /> does not add the new group to the scene
     // there is probably some useRef magic that would make this work, but I don't have time to reseach it
     /// FIXME - do this properly with useRef or other react magic
-    if(groupData) state.scene.add(groupData)
+    if (groupData) state.scene.add(groupData)
   }
   lastGroup = groupData
 
-  if(groupData) return <primitive object={groupData} />
+  if (groupData) return <primitive object={groupData} />
 
   if (incomingGeo.children) return <primitive object={incomingGeo} />
 

app/web/src/components/NavPlusButton/NavPlusButton.tsx

@@ -3,7 +3,6 @@ import Svg from 'src/components/Svg/Svg'
 import { Popover } from '@headlessui/react'
 import type { CadPackage } from 'src/helpers/hooks/useIdeState'
 
-
 const menuOptions: {
   name: string
   sub: string

app/web/src/helpers/cadPackages/CSGToBuffers.js

@@ -1,106 +1,109 @@
-const setPoints = (points, p, i)=>{
+const setPoints = (points, p, i) => {
-	points[i++] = p[0]
+  points[i++] = p[0]
-	points[i++] = p[1]
+  points[i++] = p[1]
-	points[i++] = p[2] || 0					
+  points[i++] = p[2] || 0
 }
 
-function CSG2Vertices(csg){
+function CSG2Vertices(csg) {
-    let idx = 0
+  let idx = 0
 
-    let vLen = 0, iLen = 0
+  let vLen = 0,
-    for (let poly of csg.polygons){
+    iLen = 0
-    	let len = poly.vertices.length
+  for (let poly of csg.polygons) {
-    	vLen += len *3
+    let len = poly.vertices.length
-    	iLen += 3 * (len-2)
+    vLen += len * 3
+    iLen += 3 * (len - 2)
+  }
+  const vertices = new Float32Array(vLen)
+  const indices = vLen > 65535 ? new Uint32Array(iLen) : new Uint16Array(iLen)
+
+  let vertOffset = 0
+  let indOffset = 0
+  let posOffset = 0
+  let first = 0
+  for (let poly of csg.polygons) {
+    let arr = poly.vertices
+    let len = arr.length
+    first = posOffset
+    vertices.set(arr[0], vertOffset)
+    vertOffset += 3
+    vertices.set(arr[1], vertOffset)
+    vertOffset += 3
+    posOffset += 2
+    for (let i = 2; i < len; i++) {
+      vertices.set(arr[i], vertOffset)
+
+      indices[indOffset++] = first
+      indices[indOffset++] = first + i - 1
+      indices[indOffset++] = first + i
+
+      vertOffset += 3
+      posOffset += 1
     }
-    const vertices = new Float32Array(vLen)
+  }
-    const indices  = vLen > 65535 ? new Uint32Array(iLen) : new Uint16Array(iLen)
+  return { vertices, indices, type: 'mesh' }
-
-    let vertOffset = 0
-    let indOffset = 0
-    let posOffset = 0
-    let first = 0
-    for (let poly of csg.polygons){
-    	let arr = poly.vertices
-    	let len = arr.length
-    	first = posOffset
-    	vertices.set(arr[0], vertOffset)
-    	vertOffset +=3
-    	vertices.set(arr[1], vertOffset)
-    	vertOffset +=3
-    	posOffset  +=2
-    	for(let i=2; i<len; i++){
-	    	vertices.set(arr[i], vertOffset)
-	        
-	        indices[indOffset++] = first
-	        indices[indOffset++] = first + i -1
-	        indices[indOffset++] = first + i 
-	        
-        	vertOffset += 3
-        	posOffset  += 1
-    	}
-    }
-    return {vertices, indices, type:'mesh'}
 }
 
+function CSG2LineVertices(csg) {
+  let vLen = csg.points.length * 3
+  if (csg.isClosed) vLen += 3
 
-function CSG2LineVertices(csg){
+  var vertices = new Float32Array(vLen)
-	let vLen = csg.points.length * 3
-	if(csg.isClosed) vLen += 3
 
-	var vertices = new Float32Array(vLen)
+  csg.points.forEach((p, idx) => setPoints(vertices, p, idx * 3))
-	
-	
-	csg.points.forEach((p,idx)=>setPoints(vertices, p, idx * 3 ))
-	
-	if(csg.isClosed){
-		setPoints(vertices, csg.points[0], vertices.length - 3 )
-	}
-	return {vertices, type:'line'}
-}			
-
-function CSG2LineSegmentsVertices(csg){
-	let vLen = csg.sides.length * 6
-
-	var vertices = new Float32Array(vLen)
-	csg.sides.forEach((side,idx)=>{
-		let i = idx * 6 
-		setPoints(vertices, side[0], i)
-		setPoints(vertices, side[1], i+3)
-	})
-	return {vertices, type:'lines'}
 
+  if (csg.isClosed) {
+    setPoints(vertices, csg.points[0], vertices.length - 3)
+  }
+  return { vertices, type: 'line' }
 }
 
-function CSGCached(func, data, cacheKey, transferable){
+function CSG2LineSegmentsVertices(csg) {
-	cacheKey = cacheKey || data
+  let vLen = csg.sides.length * 6
 
-	let geo = CSGToBuffers.cache.get(cacheKey)
+  var vertices = new Float32Array(vLen)
-	if(geo) return geo
+  csg.sides.forEach((side, idx) => {
-
+    let i = idx * 6
-	geo = func(data)
+    setPoints(vertices, side[0], i)
-
+    setPoints(vertices, side[1], i + 3)
-	// fill transferable array for postMessage optimization
+  })
-	if(transferable){				
+  return { vertices, type: 'lines' }
-		const {vertices, indices} = geo
-		transferable.push(vertices)
-		if(indices) transferable.push(indices)
-	}
-
-    CSGToBuffers.cache.set(cacheKey, geo)
-    return geo			
 }
 
-function CSGToBuffers(csg, transferable){
+function CSGCached(func, data, cacheKey, transferable) {
-	let obj
+  cacheKey = cacheKey || data
 
-	if(csg.polygons) obj = CSGCached(CSG2Vertices,csg,csg.polygons, transferable)
+  let geo = CSGToBuffers.cache.get(cacheKey)
-	if(csg.sides && !csg.points) obj = CSGCached(CSG2LineSegmentsVertices,csg,csg.sides, transferable)
+  if (geo) return geo
-	if(csg.points) obj = CSGCached(CSG2LineVertices,csg,csg.points, transferable)
 
-	return obj
+  geo = func(data)
+
+  // fill transferable array for postMessage optimization
+  if (transferable) {
+    const { vertices, indices } = geo
+    transferable.push(vertices)
+    if (indices) transferable.push(indices)
+  }
+
+  CSGToBuffers.cache.set(cacheKey, geo)
+  return geo
+}
+
+function CSGToBuffers(csg, transferable) {
+  let obj
+
+  if (csg.polygons)
+    obj = CSGCached(CSG2Vertices, csg, csg.polygons, transferable)
+  if (csg.sides && !csg.points)
+    obj = CSGCached(CSG2LineSegmentsVertices, csg, csg.sides, transferable)
+  if (csg.points)
+    obj = CSGCached(CSG2LineVertices, csg, csg.points, transferable)
+
+  return obj
+}
+CSGToBuffers.clearCache = () => {
+  CSGToBuffers.cache = new WeakMap()
 }
-CSGToBuffers.clearCache = ()=>{CSGToBuffers.cache = new WeakMap()}
 CSGToBuffers.clearCache()
 
-export  {CSGToBuffers}
+export { CSGToBuffers }

app/web/src/helpers/cadPackages/index.ts

@@ -5,7 +5,7 @@ import openscad from './openScadController'
 import cadquery from './cadQueryController'
 import jscad from './jsCadController'
 
-export const cadPackages: {[key in CadPackage]: DefaultKernelExport} = {
+export const cadPackages: { [key in CadPackage]: DefaultKernelExport } = {
   openscad,
   cadquery,
   jscad,

app/web/src/helpers/cadPackages/jsCadController.ts

@@ -1,46 +1,73 @@
-import { RenderArgs, DefaultKernelExport, createUnhealthyResponse, createHealthyResponse } from './common'
+import {
-import { MeshPhongMaterial, LineBasicMaterial, BufferGeometry , BufferAttribute, Line, LineSegments, Color, Mesh, Group} from 'three/build/three.module'
+  RenderArgs,
-
+  DefaultKernelExport,
+  createUnhealthyResponse,
+  createHealthyResponse,
+} from './common'
+import {
+  MeshPhongMaterial,
+  LineBasicMaterial,
+  BufferGeometry,
+  BufferAttribute,
+  Line,
+  LineSegments,
+  Color,
+  Mesh,
+  Group,
+} from 'three/build/three.module'
 
 const materials = {
-	mesh: {
+  mesh: {
-		def: new MeshPhongMaterial( { color: 0x0084d1, flatShading: true } ),
+    def: new MeshPhongMaterial({ color: 0x0084d1, flatShading: true }),
-		material: (params)=>new MeshPhongMaterial(params),
+    material: (params) => new MeshPhongMaterial(params),
-	},
+  },
-	line: {
+  line: {
-		def: new LineBasicMaterial( { color: 0x0000ff } ),
+    def: new LineBasicMaterial({ color: 0x0000ff }),
-		material: ({color,opacity,transparent})=>new LineBasicMaterial({color,opacity,transparent}),
+    material: ({ color, opacity, transparent }) =>
-	},
+      new LineBasicMaterial({ color, opacity, transparent }),
-  lines:null
+  },
+  lines: null,
 }
 materials.lines = materials.line
 
-function CSG2Object3D(obj){
+function CSG2Object3D(obj) {
-	const {vertices, indices, color, transforms} = obj
+  const { vertices, indices, color, transforms } = obj
 
-	let materialDef = materials[obj.type]
+  const materialDef = materials[obj.type]
-  if(!materialDef){
+  if (!materialDef) {
-      console.error('Can not hangle object type: '+obj.type, obj)
+    console.error('Can not hangle object type: ' + obj.type, obj)
-      return null
+    return null
   }
 
-	let material = materialDef.def
+  let material = materialDef.def
-	if(color){
+  if (color) {
-		let c = color
+    const c = color
-		material = new materialDef.material({ color: new Color(c[0],c[1],c[2]), flatShading: true, opacity: c[3] === void 0 ? 1:c[3], transparent: c[3] != 1 && c[3] !== void 0})
+    material = new materialDef.material({
-	}
+      color: new Color(c[0], c[1], c[2]),
+      flatShading: true,
+      opacity: c[3] === void 0 ? 1 : c[3],
+      transparent: c[3] != 1 && c[3] !== void 0,
+    })
+  }
 
-	var geo = new BufferGeometry()
+  const geo = new BufferGeometry()
-	geo.setAttribute('position', new BufferAttribute(vertices,3))
+  geo.setAttribute('position', new BufferAttribute(vertices, 3))
 
-	var mesh;
+  let mesh
-	switch(obj.type){
+  switch (obj.type) {
-		case 'mesh': geo.setIndex(new BufferAttribute(indices,1)); mesh = new THREE.Mesh(geo, material); break;
+    case 'mesh':
-		case 'line': mesh = new Line(geo, material); break;
+      geo.setIndex(new BufferAttribute(indices, 1))
-		case 'lines': mesh = new LineSegments(geo, material); break;
+      mesh = new THREE.Mesh(geo, material)
-	}
+      break
-	if(transforms) mesh.applyMatrix4({elements:transforms})
+    case 'line':
-	return mesh
+      mesh = new Line(geo, material)
+      break
+    case 'lines':
+      mesh = new LineSegments(geo, material)
+      break
+  }
+  if (transforms) mesh.applyMatrix4({ elements: transforms })
+  return mesh
 }
 
 let scriptWorker
@@ -48,8 +75,8 @@ const scriptUrl = '/demo-worker.js'
 let resolveReference = null
 let response = null
 
-const callResolve = ()=>{
+const callResolve = () => {
-  if(resolveReference) resolveReference()
+  if (resolveReference) resolveReference()
   resolveReference
 }
 
@@ -57,10 +84,9 @@ export const render: DefaultKernelExport['render'] = async ({
   code,
   settings,
 }: RenderArgs) => {
-
+  if (!scriptWorker) {
-  if(!scriptWorker){
     const baseURI = document.baseURI.toString()
-    const script =`let baseURI = '${baseURI}'
+    const script = `let baseURI = '${baseURI}'
 importScripts(new URL('${scriptUrl}',baseURI))
 let worker = jscadWorker({
   baseURI: baseURI,
@@ -70,18 +96,21 @@ let worker = jscadWorker({
 })
 self.addEventListener('message', (e)=>worker.postMessage(e.data))
 `
-    let blob = new Blob([script],{type: 'text/javascript'})
+    const blob = new Blob([script], { type: 'text/javascript' })
     scriptWorker = new Worker(window.URL.createObjectURL(blob))
-    scriptWorker.addEventListener('message',(e)=>{
+    scriptWorker.addEventListener('message', (e) => {
       console.log('message from worker', e.data)
-      let data = e.data
+      const data = e.data
-      if(data.action == 'entities'){
+      if (data.action == 'entities') {
-        if(data.error){
+        if (data.error) {
-          response = createUnhealthyResponse( new Date(),data.error )
+          response = createUnhealthyResponse(new Date(), data.error)
-        }else{
+        } else {
-          let group = new Group()
+          const group = new Group()
-          data.entities.map(CSG2Object3D).filter(o=>o).forEach(o=>group.add(o))
+          data.entities
-          response = createHealthyResponse( {
+            .map(CSG2Object3D)
+            .filter((o) => o)
+            .forEach((o) => group.add(o))
+          response = createHealthyResponse({
             type: 'geometry',
             data: group,
             consoleMessage: data.scriptStats,
@@ -94,11 +123,16 @@ self.addEventListener('message', (e)=>worker.postMessage(e.data))
 
     callResolve()
     response = null
-    scriptWorker.postMessage({action:'init', baseURI, alias:[]})
+    scriptWorker.postMessage({ action: 'init', baseURI, alias: [] })
   }
-  scriptWorker.postMessage({action:'runScript', worker:'script', script:code, url:'jscad_script' })
+  scriptWorker.postMessage({
+    action: 'runScript',
+    worker: 'script',
+    script: code,
+    url: 'jscad_script',
+  })
 
-  let waitResult = new Promise(resolve=>{
+  const waitResult = new Promise((resolve) => {
     resolveReference = resolve
   })
 

app/web/src/helpers/hooks/useIdeState.ts

@@ -11,7 +11,7 @@ function withThunk(dispatch, getState) {
 
 export type CadPackage = 'openscad' | 'cadquery' | 'jscad'
 
-const initCodeMap: {[key in CadPackage]: string} = {
+const initCodeMap: { [key in CadPackage]: string } = {
   openscad: `// involute donut
 
 // ^ first comment is used for download title (i.e "involute-donut.stl")
@@ -42,7 +42,7 @@ result = (cq.Workplane().circle(diam).extrude(20.0)
 
 show_object(result)
 `,
-jscad: `
+  jscad: `
 const { booleans, colors, primitives } = require('@jscad/modeling') // modeling comes from the included MODELING library
 
 const { intersect, subtract } = booleans
@@ -68,7 +68,7 @@ const main = ({scale=1}) => {
   return [transpCube, star2D, line2D, ...logo]
 }
 module.exports = {main}
-`
+`,
 }
 
 const codeStorageKey = 'Last-editor-code'