@jscad/web 2.5.9 → 2.5.10

package/examples/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.3.4](https://github.com/jscad/OpenJSCAD.org/compare/@jscad/examples@2.3.3...@jscad/examples@2.3.4) (2022-04-24)
+
+**Note:** Version bump only for package @jscad/examples
+
+
+
+
+
 ## [2.3.3](https://github.com/jscad/OpenJSCAD.org/compare/@jscad/examples@2.3.2...@jscad/examples@2.3.3) (2022-04-03)
 
 **Note:** Version bump only for package @jscad/examples

package/examples/core/extrusions/nutsAndBolts.js

@@ -0,0 +1,94 @@
+/**
+ * Nuts and Bolts
+ * @category Creating Shapes
+ * @skillLevel 8
+ * @description Demonstrating the advanced extrusion using slices to generate screw threads.
+ * @tags extrude, slice, slices, extrudefromslices, callback
+ * @authors platypii
+ * @licence MIT License
+ */
+
+const jscad = require('@jscad/modeling')
+const { cylinder } = jscad.primitives
+const { subtract, union } = jscad.booleans
+const { colorize } = jscad.colors
+const { extrudeFromSlices, slice } = jscad.extrusions
+const { translate } = jscad.transforms
+
+const options = {
+  hexWidth: 10,
+  hexHeight: 8,
+  threadLength: 32,
+  threadSize: 4,
+  innerRadius: 4,
+  outerRadius: 5.6,
+  slicesPerRevolution: 12,
+  segments: 32
+}
+
+const main = () => {
+  return [
+    colorize([0.9, 0.6, 0.2], bolt(options)),
+    colorize([0.4, 0.4, 0.4], translate([30, 0, 0], nut(options)))
+  ]
+}
+
+// generate bolt by attaching threads to a hex head
+const bolt = (options) => {
+  return union(
+    translate([0, 0, options.threadLength], hex(options)),
+    threads(options)
+  )
+}
+
+// generate nut by subtracting threads from a hex block
+const nut = (options) => {
+  return subtract(
+    hex(options),
+    threads({ ...options, threadLength: options.hexHeight })
+  )
+}
+
+// generate hexagonal block
+const hex = (options) => {
+  const radius = options.hexWidth * 1.1547005 // hexagon outer radius
+  const height = options.hexHeight
+  return cylinder({ center: [0, 0, height / 2], height, radius, segments: 6 })
+}
+
+// generate a threaded shaft using extrudeFromSlices
+const threads = (options) => {
+  const { innerRadius, outerRadius, segments, threadLength } = options
+  const revolutions = threadLength / options.threadSize
+  const numberOfSlices = options.slicesPerRevolution * revolutions
+  return extrudeFromSlices({
+    numberOfSlices,
+    callback: (progress, index, base) => {
+      // generate each slice manually
+      const points = []
+      for (let i = 0; i < segments; i++) {
+        const pointAngle = Math.PI * 2 * i / segments
+        const threadAngle = (2 * Math.PI * revolutions * progress) % (Math.PI * 2)
+
+        // define the shape of the threads
+        const phase = angleDiff(threadAngle, pointAngle) / Math.PI
+        const radius = lerp(innerRadius, outerRadius, 1.4 * phase - 0.2)
+
+        const x = radius * Math.cos(pointAngle)
+        const y = radius * Math.sin(pointAngle)
+        points.push([x, y, threadLength * progress])
+      }
+      return slice.fromPoints(points)
+    }
+  }, {})
+}
+
+// linear interpolation with bounding
+const lerp = (a, b, t) => Math.max(a, Math.min(b, a + (b - a) * t))
+
+const angleDiff = (angle1, angle2) => {
+  const diff = Math.abs((angle1 - angle2) % (Math.PI * 2))
+  return diff > Math.PI ? Math.PI * 2 - diff : diff
+}
+
+module.exports = { main }

package/examples/examples.json

@@ -1 +1 @@
-{"Creating Shapes":[{"title":"2D Primitives Demonstration","filePath":"examples/core/primitives/primitives2D.js","sort":1,"description":"Demonstrating the basics of a variety of 2D primitives"},{"title":"3D Primitives Demonstration","filePath":"examples/core/primitives/primitives3D.js","sort":1,"description":"Demonstrating the basics of a variety of 3D primitives"},{"title":"Rounded Cuboid","filePath":"examples/core/primitives/roundedCuboid.js","sort":1,"description":"Demonstrating the roundedCuboid() functiom"},{"title":"Spheres of all sorts","filePath":"examples/core/primitives/sphere.js","sort":1,"description":"Demonstrating the sphere() and geodesicSphere() functions"},{"title":"Building a Dodecahedron","filePath":"examples/core/primitives/dodecahedron.js","sort":2,"description":"building dodecahedron() from cuboids"},{"title":"Torus Variety","filePath":"examples/core/primitives/torus.js","sort":2,"description":"Demonstrating the capabilities and variations of the torus() primitive"},{"title":"Building a Polyhedron from scratch","filePath":"examples/core/primitives/polyhedron.js","sort":4,"description":"Demonstrating the polyhedron() function"},{"title":"Basic Extrude Functions","filePath":"examples/core/extrusions/basicExtrusions.js","sort":5,"description":"Demonstrating the basic types of extrusions, and the variety of objects they can create."},{"title":"Extrude Along a Bezier Path","filePath":"examples/core/curves/bezier/extrudeAlongPath.js","sort":5,"description":"Using a 3D bezier path to create a solid tube"},{"title":"Extrude From Slices","filePath":"examples/core/extrusions/extrudeFromSlices.js","sort":5,"description":"Demonstrating the advanced extrusion using slices with varying numbers of points."},{"title":"Simple Bezier Extrude","filePath":"examples/core/curves/bezier/simpleExtrude.js","sort":5,"description":"Using a 1D bezier function to create a non-uniform extrusion"},{"title":"Hull and HullChain 2D example","filePath":"examples/core/hulls/hull2D.js","sort":8,"description":"Demonstrating the basics of Hulls in two dimensions"},{"title":"Hull and HullChain 3D example","filePath":"examples/core/hulls/hull3D.js","sort":8,"description":"Demonstrating the basics of Hulls in three dimensions"},{"title":"Basic Text Creation","filePath":"examples/core/text/text.js","sort":10,"description":"Demonstrating methods of building 3D text"}],"Manipulating Shapes":[{"title":"Basic Booleans Demonstration","filePath":"examples/core/booleans/basicBooleans.js","sort":2,"description":"Demonstrating the basics of boolean shape combinations"},{"title":"Align function demonstration","filePath":"examples/core/transforms/align.js","sort":3,"description":"Demonstrating aligning shapes using the align function"},{"title":"Expanding 2D and 3D Shapes","filePath":"examples/core/expansions/expand.js","sort":5,"description":"Exploring the expand() function on 2D and 3D geometries"},{"title":"Offsetting 2D Shapes","filePath":"examples/core/expansions/offset.js","sort":5,"description":"Demonstrating the offset() function. Moves all points in a 2d path or 2D geometry perpendicular to the line's tangent."},{"title":"Center function demonstration","filePath":"examples/core/transforms/center.js","sort":10,"description":"Using center() to translate objects"},{"title":"Measure Aggregate Bounding Box","filePath":"examples/core/measurements/measureAggregateBounds.js","sort":10,"description":"Examples of measureAggregateBoundingBox function"},{"title":"Measure Area and Volume","filePath":"examples/core/measurements/measureAreaAndVolume.js","sort":10,"description":"Examples of measureArea() and measureVolume() function"},{"title":"Measure Bounding Box","filePath":"examples/core/measurements/measureBounds.js","sort":10,"description":"Examples of measureBoundingBox function"}],"Colors":[{"title":"Basic Colors","filePath":"examples/core/colors/basicColors.js","sort":1,"description":"showing various color functions"},{"title":"Color Cube","filePath":"examples/core/colors/colorCube.js","sort":2,"description":"looking at the different ways to specify a color"},{"title":"Transparency","filePath":"examples/core/colors/transparency.js","sort":2,"description":"showing transparent objects"}],"Parameters":[{"title":"All Parameter Types Demo","filePath":"examples/parameters/allParamTypes.js","sort":1,"description":"Example of interactive parameters"},{"title":"Birthday Balloons","filePath":"examples/parameters/balloons.js","sort":1,"description":"Example of building models from interactive parameters"},{"title":"Parametric Involute Gear","filePath":"examples/parameters/gear.js","sort":1,"description":"Build a proper involute gear, demonstrating parameters, and how they can be used in complex math."}],"Other":[{"title":"Coordinate system and Rotation demonstration","filePath":"examples/core/other/orientation.js","sort":1,"description":"Demonstrating rotation about the three axes."}]}
+{"Creating Shapes":[{"title":"2D Primitives Demonstration","filePath":"examples/core/primitives/primitives2D.js","sort":1,"description":"Demonstrating the basics of a variety of 2D primitives"},{"title":"3D Primitives Demonstration","filePath":"examples/core/primitives/primitives3D.js","sort":1,"description":"Demonstrating the basics of a variety of 3D primitives"},{"title":"Rounded Cuboid","filePath":"examples/core/primitives/roundedCuboid.js","sort":1,"description":"Demonstrating the roundedCuboid() functiom"},{"title":"Spheres of all sorts","filePath":"examples/core/primitives/sphere.js","sort":1,"description":"Demonstrating the sphere() and geodesicSphere() functions"},{"title":"Building a Dodecahedron","filePath":"examples/core/primitives/dodecahedron.js","sort":2,"description":"building dodecahedron() from cuboids"},{"title":"Torus Variety","filePath":"examples/core/primitives/torus.js","sort":2,"description":"Demonstrating the capabilities and variations of the torus() primitive"},{"title":"Building a Polyhedron from scratch","filePath":"examples/core/primitives/polyhedron.js","sort":4,"description":"Demonstrating the polyhedron() function"},{"title":"Basic Extrude Functions","filePath":"examples/core/extrusions/basicExtrusions.js","sort":5,"description":"Demonstrating the basic types of extrusions, and the variety of objects they can create."},{"title":"Extrude Along a Bezier Path","filePath":"examples/core/curves/bezier/extrudeAlongPath.js","sort":5,"description":"Using a 3D bezier path to create a solid tube"},{"title":"Extrude From Slices","filePath":"examples/core/extrusions/extrudeFromSlices.js","sort":5,"description":"Demonstrating the advanced extrusion using slices with varying numbers of points."},{"title":"Simple Bezier Extrude","filePath":"examples/core/curves/bezier/simpleExtrude.js","sort":5,"description":"Using a 1D bezier function to create a non-uniform extrusion"},{"title":"Hull and HullChain 2D example","filePath":"examples/core/hulls/hull2D.js","sort":8,"description":"Demonstrating the basics of Hulls in two dimensions"},{"title":"Hull and HullChain 3D example","filePath":"examples/core/hulls/hull3D.js","sort":8,"description":"Demonstrating the basics of Hulls in three dimensions"},{"title":"Nuts and Bolts","filePath":"examples/core/extrusions/nutsAndBolts.js","sort":8,"description":"Demonstrating the advanced extrusion using slices to generate screw threads."},{"title":"Basic Text Creation","filePath":"examples/core/text/text.js","sort":10,"description":"Demonstrating methods of building 3D text"}],"Manipulating Shapes":[{"title":"Basic Booleans Demonstration","filePath":"examples/core/booleans/basicBooleans.js","sort":2,"description":"Demonstrating the basics of boolean shape combinations"},{"title":"Align function demonstration","filePath":"examples/core/transforms/align.js","sort":3,"description":"Demonstrating aligning shapes using the align function"},{"title":"Expanding 2D and 3D Shapes","filePath":"examples/core/expansions/expand.js","sort":5,"description":"Exploring the expand() function on 2D and 3D geometries"},{"title":"Offsetting 2D Shapes","filePath":"examples/core/expansions/offset.js","sort":5,"description":"Demonstrating the offset() function. Moves all points in a 2d path or 2D geometry perpendicular to the line's tangent."},{"title":"Center function demonstration","filePath":"examples/core/transforms/center.js","sort":10,"description":"Using center() to translate objects"},{"title":"Measure Aggregate Bounding Box","filePath":"examples/core/measurements/measureAggregateBounds.js","sort":10,"description":"Examples of measureAggregateBoundingBox function"},{"title":"Measure Area and Volume","filePath":"examples/core/measurements/measureAreaAndVolume.js","sort":10,"description":"Examples of measureArea() and measureVolume() function"},{"title":"Measure Bounding Box","filePath":"examples/core/measurements/measureBounds.js","sort":10,"description":"Examples of measureBoundingBox function"}],"Colors":[{"title":"Basic Colors","filePath":"examples/core/colors/basicColors.js","sort":1,"description":"showing various color functions"},{"title":"Color Cube","filePath":"examples/core/colors/colorCube.js","sort":2,"description":"looking at the different ways to specify a color"},{"title":"Transparency","filePath":"examples/core/colors/transparency.js","sort":2,"description":"showing transparent objects"}],"Parameters":[{"title":"All Parameter Types Demo","filePath":"examples/parameters/allParamTypes.js","sort":1,"description":"Example of interactive parameters"},{"title":"Birthday Balloons","filePath":"examples/parameters/balloons.js","sort":1,"description":"Example of building models from interactive parameters"},{"title":"Parametric Involute Gear","filePath":"examples/parameters/gear.js","sort":1,"description":"Build a proper involute gear, demonstrating parameters, and how they can be used in complex math."}],"Other":[{"title":"Coordinate system and Rotation demonstration","filePath":"examples/core/other/orientation.js","sort":1,"description":"Demonstrating rotation about the three axes."}]}

package/examples/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jscad/examples",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "description": "Example Files for JSCAD",
   "homepage": "https://openjscad.xyz/",
   "repository": "https://github.com/jscad/OpenJSCAD.org",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jscad/web",
-  "version": "2.5.9",
+  "version": "2.5.10",
   "description": "Web Application for JSCAD",
   "homepage": "https://openjscad.xyz/",
   "repository": "https://github.com/jscad/OpenJSCAD.org",
@@ -36,11 +36,11 @@
   "license": "MIT",
   "dependencies": {
     "@jscad/array-utils": "2.1.4",
-    "@jscad/core": "2.5.9",
-    "@jscad/examples": "2.3.4",
-    "@jscad/io": "2.3.2",
-    "@jscad/modeling": "2.9.3",
-    "@jscad/regl-renderer": "2.5.9",
+    "@jscad/core": "2.6.0",
+    "@jscad/examples": "2.4.0",
+    "@jscad/io": "2.3.3",
+    "@jscad/modeling": "2.9.4",
+    "@jscad/regl-renderer": "2.6.0",
     "@most/create": "2.0.1",
     "brace": "0.11.1",
     "codemirror": "5.65.2",
@@ -67,5 +67,5 @@
     "url": "https://opencollective.com/openjscad",
     "logo": "https://opencollective.com/openjscad/logo.txt"
   },
-  "gitHead": "85fa1fcdfb2d516a201ecf31da242e64b5b3274e"
+  "gitHead": "662965f40a1ce628aa97f30b814586e72a3acb36"
 }

package/src/sideEffects/worker/index.js

@@ -3,24 +3,28 @@ const WebWorkify = require('webworkify')
 const callBackToStream = require('../../most-utils/callbackToObservable')
 
 const makeWorkerEffect = (workerPath) => {
+  const workerEventsCb = callBackToStream()
+
   let _worker = WebWorkify(workerPath)
   _worker.onerror = (error) => workerEventsCb.callback({ error })
   _worker.onmessage = (message) => workerEventsCb.callback(message)
-  const workerEventsCb = callBackToStream()
 
   const workerSink = (outToWorker$) => {
     // cancel whatever is going on in the worker by terminating it
     outToWorker$.filter(({ cmd }) => cmd === 'cancel')
       .forEach((_) => _worker.terminate())
+
     // send other messages to the worker
     outToWorker$
       .filter(({ cmd }) => cmd !== 'cancel')
-      .forEach((message) => {
-        _worker.terminate()// FIXME: sub optimal ! worker recreation is SLOW and should not be systematic
-        _worker = WebWorkify(workerPath)// new Worker(workerPath)
+      .forEach((task) => {
+        // FIXME: sub optimal ! worker recreation is SLOW and should not be systematic
+        _worker.terminate()
+        _worker = WebWorkify(workerPath)
         _worker.onerror = (error) => workerEventsCb.callback({ error })
         _worker.onmessage = (message) => workerEventsCb.callback(message)
-        _worker.postMessage(message)
+        // do the task
+        _worker.postMessage(task)
       })
   }
 

package/src/ui/flow/design.js

@@ -575,6 +575,17 @@ const actions = ({ sources }) => {
     .multicast()
     .delay(10) // needed , why ?
 
+  // errors retrieved from worker
+  const errorsFromWorker$ = sources.solidWorker
+    .filter((event) => event.data instanceof Object && event.data.type === 'errors')
+    .map(({ data }) => ({ error: data, origin: 'worker' }))
+
+  const reportErrorsFromWorker$ = most.mergeArray([
+    errorsFromWorker$
+  ])
+    .skipRepeatsWith(jsonCompare)
+    .tap((x) => console.log('errors', x))
+
   // ui/toggles
   const toggleAutoReload$ = most.mergeArray([
     sources.dom.select('#toggleAutoReload').events('click')
@@ -615,6 +626,8 @@ const actions = ({ sources }) => {
     setDesignParameterDefinitions$,
     setDesignParameterValues$,
 
+    reportErrorsFromWorker$,
+
     requestGeometryRecompute$,
     timeoutGeometryRecompute$,
     cancelGeometryRecompute$,

package/src/ui/views/parameterControls.js

@@ -263,19 +263,19 @@ const createInputControl = (definition, prevValue) => {
 
   // check for required parameters
   if (!('type' in definition)) {
-    throw new Error('Parameter definition (' + definition + ") must include a 'type' parameter")
+    throw new Error(`Parameter definition (${definition.name}) must include a 'type' parameter`)
   }
   let typeData = controlList.filter((x) => definition.type === x.type)
   typeData = (typeData && typeData.length > 0) ? typeData[0] : undefined
   if (!typeData) {
-    throw new Error('Parameter definition (' + definition + ') is not known')
+    throw new Error(`Parameter definition (${definition.name}), invalid type "${definition.type}"`)
   }
 
   // validate fields
   const definitionFields = Object.keys(definition)
   typeData.required.forEach((requiredField) => {
     if (!definitionFields.includes(requiredField)) {
-      throw new Error(`Parameter definition for "${definition.name}" must include a "${requiredField}" parameter`)
+      throw new Error(`Parameter definition of type "${definition.type}" must include a "${requiredField}" parameter`)
     }
   })
 

package/src/ui/views/status.js

@@ -3,29 +3,36 @@ const html = require('nanohtml')
 // status display
 const status = (state, paramsCallbacktoStream) => {
   const status = state.status
-  const errorMessage = status.error !== undefined && status.error.message ? `${status.error.message}` : ''
-  const errorLine = status.error !== undefined && status.error.lineno ? `Line: ${status.error.lineno}` : ''
-  const errorStack = status.error !== undefined && status.error.stack ? `Stack: ${status.error.stack}` : ''
+  let errorWhere = ''
+  let errorMessage = ''
+  let errorStack = ''
+  if (status.error) {
+    if (status.error.fileName && !status.error.fileName.startsWith('blob')) {
+      // syntax errors provide file name, line, and column number
+      errorWhere = `${status.error.fileName}:${status.error.lineNumber}:${status.error.columnNumber}`
+    }
+    errorMessage = `${status.error.name}: ${status.error.message}`
+    if (status.error.stack) {
+      errorStack = status.error.stack.trim().split('\n').map((s) => html`<ul>${s}</ul>`)
+    }
+  }
 
   const statusMessage = status.error !== undefined
     ? html`<span>
-    <div>
-      ERROR: 
+    <div id='errormessage'>
+      <p>
+        ${errorWhere}
+      </p>
+      <p>
+        ${errorMessage}
+      </p>
     </div>
-    <div>
-      ${errorMessage}
-    </div>
-    <div>
-      ${errorLine}
-    </div>
-    <div>
+    <div id='stacktrace'>
       ${errorStack}
     </div>
   </span>`
     : ''
 
-  // ? `Error: ${status.error.message} line: ${status.error.lineno}, filename:${status.error.filename} stack:  ${status.error.stack}` : ''
-  // ${statusMessage}
   const busy = status.busy
   return html`
       <span id='status'>