@jscad/web 2.5.8 → 2.5.11

package/examples/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.4.0](https://github.com/jscad/OpenJSCAD.org/compare/@jscad/examples@2.3.4...@jscad/examples@2.4.0) (2022-05-15)
+
+
+### Features
+
+* **examples:** new Nuts and Bolts example ([#1081](https://github.com/jscad/OpenJSCAD.org/issues/1081)) ([cd78003](https://github.com/jscad/OpenJSCAD.org/commit/cd7800351e56f7cd75f0add07cf068df328b7839))
+
+
+
+
+
+## [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
+
+
+
+
+
 ## [2.3.2](https://github.com/jscad/OpenJSCAD.org/compare/@jscad/examples@2.3.1...@jscad/examples@2.3.2) (2022-02-19)
 
 **Note:** Version bump only for package @jscad/examples

package/examples/README.md

@@ -32,8 +32,8 @@ Install this package if you need access to the various examples.
 
 ## Documentation
 
-- [JSCAD User Guide](https://www.openjscad.xyz/guide.html)
-- [JSCAD API Reference](https://www.openjscad.xyz/docs)
+- [JSCAD User Guide](https://openjscad.xyz/guide.html)
+- [JSCAD API Reference](https://openjscad.xyz/docs/)
 
 ## Contributing
 
@@ -42,11 +42,11 @@ We welcome and encourage anyone to pitch in but please take a moment to read the
 
 * If you want to submit a bug report please make sure to follow the [Reporting Issues](https://github.com/jscad/OpenJSCAD.org/wiki/Reporting-Issues) guide. Bug reports are accepted as [Issues](https://github.com/jscad/OpenJSCAD.org/issues/) via GitHub.
 
-* If you want to submit a change or a patch, please read the [Contributing Guide](../../CONTRIBUTING.md) . New contributions are accepted as [Pull Requests](https://github.com/jscad/OpenJSCAD.org/pulls/) via GithHub.
+* If you want to submit a change or a patch, please read the [Contributing Guide](../../CONTRIBUTING.md). New contributions are accepted as [Pull Requests](https://github.com/jscad/OpenJSCAD.org/pulls/) via GitHub.
 
 * We only accept bug reports and pull requests on **GitHub**.
 
-* If you have a question about how to use JSCAD, then please start a conversation at the [JSCAD User Group](https://openjscad.xyz/forum.html). You might find the answer in the [JSCAD User Guide](https://www.openjscad.xyz/guide.html).
+* If you have a question about how to use JSCAD, then please start a conversation at the [JSCAD User Group](https://openjscad.xyz/forum.html). You might find the answer in the [JSCAD User Guide](https://openjscad.xyz/guide.html).
 
 * If you have a change or new feature in mind, please start a conversation with the [Core Developers](https://openjscad.xyz/forum.html) and start contributing changes.
 

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,7 +1,8 @@
 {
   "name": "@jscad/examples",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "description": "Example Files for JSCAD",
+  "homepage": "https://openjscad.xyz/",
   "repository": "https://github.com/jscad/OpenJSCAD.org",
   "scripts": {},
   "contributors": [

package/examples/parameters/gear.js

@@ -50,7 +50,7 @@ const createSingleToothPolygon = (maxAngle, baseRadius, angularToothWidthAtBase)
   const points = [[0, 0]]
   for (let i = 0; i <= toothCurveResolution; i++) {
     // first side of the tooth:
-    const angle = maxAngle * i / toothCurveResolution
+    const angle = maxAngle * Math.pow(i / toothCurveResolution, 2 / 3)
     const tanLength = angle * baseRadius
     let radiantVector = vec2.fromAngleRadians(vec2.create(), angle)
     let tangentVector = vec2.scale(vec2.create(), vec2.normal(vec2.create(), radiantVector), -tanLength)

package/locales/de.json

@@ -14,12 +14,6 @@
   "enable geometry caching":"Experimenteles caching von Geometrie,",
   "timeout for generation":"Abfallzeit für generieren von Soliden (ms)",
 
-  "Storage":"Speicher",
-  "settings storage path":"Dateipfad für Einstellungen",
-
-  "File Handling":"File Handling",
-  "enable conversion to scripts":"Convert external formats to JSCAD scripts",
-
   "Shortcuts":"Tastenkombinationen",
 
   "Command":"Befehl",

package/locales/en.json

@@ -14,12 +14,6 @@
   "enable geometry caching":"Enable Experimental Geometry Caching, ",
   "timeout for generation":"Timeout for Solid Generation (ms)",
 
-  "Storage": "Storage",
-  "settings storage path":"Storage path of settings",
-
-  "File Handling": "File Handling",
-  "enable conversion to scripts":"Convert external formats to JSCAD scripts",
-
   "Shortcuts":"Keyboard Shortcuts",
 
   "Command":"Command",

package/locales/fr.json

@@ -14,12 +14,6 @@
   "enable geometry caching":"Systeme de cache experimental de la geometrie",
   "timeout for generation": "Timeout génération de solides (ms)",
 
-  "Storage":"Stockage",
-  "settings storage path":"Chemin de stockage des paramètres",
-
-  "File Handling": "File Handling",
-  "enable conversion to scripts":"Convert external formats to JSCAD scripts",
-
   "Shortcuts":"Racourcis Clavier",
 
   "Command":"Commande",

package/locales/hr.json

@@ -14,12 +14,6 @@
   "enable geometry caching":"Omogući eksperimentalno cachiranje geometrije, ",
   "timeout for generation":"Timeout za generiranje modela (ms)",
 
-  "Storage": "Spremanje",
-  "settings storage path":"Putanja za spremanje postavki",
-
-  "File Handling": "Obrada datoteka",
-  "enable conversion to scripts":"Prevedi vanjske formate u JSCAD skripte",
-
   "Shortcuts":"Kratice za tipkovnicu",
 
   "Command":"Komanda",

package/locales/ja.json

@@ -14,12 +14,6 @@
   "enable geometry caching":"experimental geometry caching",
   "timeout for generation":"図形の生成タイムアウト",
 
-  "Storage": "ストレージ",
-  "settings storage path":"ストレージ パス",
-
-  "File Handling":"ファイル処理",
-  "enable conversion to scripts":"外部形式をスクリプトに変換",
-
   "Shortcuts":"キーボード ショートカット",
 
   "Command":"コマンド",

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@jscad/web",
-  "version": "2.5.8",
+  "version": "2.5.11",
   "description": "Web Application for JSCAD",
+  "homepage": "https://openjscad.xyz/",
   "repository": "https://github.com/jscad/OpenJSCAD.org",
   "main": "src/index.js",
   "unpkg": "dist/jscad-web.min.js",
@@ -34,12 +35,12 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@jscad/array-utils": "2.1.3",
-    "@jscad/core": "2.5.8",
-    "@jscad/examples": "2.3.3",
-    "@jscad/io": "2.3.1",
-    "@jscad/modeling": "2.9.2",
-    "@jscad/regl-renderer": "2.5.8",
+    "@jscad/array-utils": "2.1.4",
+    "@jscad/core": "2.6.1",
+    "@jscad/examples": "2.4.1",
+    "@jscad/io": "2.4.0",
+    "@jscad/modeling": "2.9.5",
+    "@jscad/regl-renderer": "2.6.1",
     "@most/create": "2.0.1",
     "brace": "0.11.1",
     "codemirror": "5.65.2",
@@ -66,5 +67,5 @@
     "url": "https://opencollective.com/openjscad",
     "logo": "https://opencollective.com/openjscad/logo.txt"
   },
-  "gitHead": "0cebde0166c104e3c08cc05d2c03d9defc7eca26"
+  "gitHead": "225b034db0d94f748992da72b269833954a2e212"
 }

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

@@ -50,9 +50,6 @@ const reducers = {
       // code
       instantUpdate: false,
       autoReload: false,
-      // if set to true, will overwrite existing code with the converted imput
-      // if set to false, will create a script with an import of the input
-      convertSupportedTypes: false,
       // parameters
       parameterDefinitions: [],
       parameterValues: {},
@@ -578,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')
@@ -618,6 +626,8 @@ const actions = ({ sources }) => {
     setDesignParameterDefinitions$,
     setDesignParameterValues$,
 
+    reportErrorsFromWorker$,
+
     requestGeometryRecompute$,
     timeoutGeometryRecompute$,
     cancelGeometryRecompute$,

package/src/ui/views/options.js

@@ -38,20 +38,6 @@ const options = (state, i18n) => {
     </label>
   </fieldset>
 
-  <fieldset>
-    <legend> <h3> ${i18n`Storage`} </h3> </legend>
-    <label>${i18n`settings storage path`} ${i18n`not settable`}
-      <input type='text' disabled value='${state.storage.path}' disabled />
-    </label>
-  </fieldset>
-
-  <fieldset>
-    <legend> <h3> ${i18n`File Handling`} </h3> </legend>
-    <label>${i18n`enable conversion to scripts`}
-      <input type='checkbox' checked=false id='design-convertSupportedTypes' checked=${state.design.convertSupportedTypes}/>
-    </label>
-  </fieldset>
-
   ${shortcuts}
 
 </section>`

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'>

package/src/ui/views/toolbar.js

@@ -6,13 +6,13 @@ const toolbar = (state, i18n) => {
   const helpIcon = html`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12" y2="17"/></svg>`
 
   return html`<span id='toolbar'>
-        <button id='toggleOptions'>
+        <button id='toggleOptions' aria-label='options'>
           ${optionsIcon}
         </button>
-        <button id='toggleEditor'>
+        <button id='toggleEditor' aria-label='editor'>
           ${editorIcon}
         </button>
-        <button id='toggleHelp'>
+        <button id='toggleHelp' aria-label='help'>
           ${helpIcon}
         </button>
       </span>`

package/css/big.css

@@ -1,107 +0,0 @@
-/*
- * min.css for OpenJSCAD.org viewer
- */
-
-.jscad-container {
-  margin: 5px 15px 5px 5px; /* not inherited */
-  padding: 20px; /* not inherited */
-  color: Black;
-  font-weight: bold;
-  font-family: Helvetica, Arial, Sans;
-  border: thin solid black;
-  min-width: 410px;
-}
-
-#header {
-  margin: 5px; /* not inherited */
-}
-
-#viewerContext {
-  margin: 5px; /* not inherited */
-  border: thin solid gray; /* not inherited */
-  padding: 0px; /* not inherited */
-
-  background: white;
-  width:  1200px;
-  height:  900px;
-
-  top: 0px;
-  bottom: 0px;
-}
-
-canvas { 
-  margin: 0px; /* not inherited */
-  border: 0px none gray; /* not inherited */
-  padding: 0px; /* not inherited */
-
-  width: 100%;
-  height: 100%;
-
-  cursor: move; 
-}
-
-#parametersdiv {
-  margin: 5px; /* not inherited */
-  border: thin solid rgb(200,200,200);
-  border-radius: 1em;     
-  padding: 10px;
-
-  background: white;
-  opacity: 0.8;
-}
-
-#parametersdiv table {
-  margin-bottom: 5px;
-
-  text-align: left;
-  font-size: 0.8em;
-  font-weight: normal;
-}
-
-#parametersdiv th {
-  margin:  0px; /* not inherited */
-  border:  0px none gray; /* not inherited */
-  padding: 5px; /* not inherited */
-
-  font-weight: bold;
-}
-
-#parametersdiv th.caption {
-  text-decoration: underline;
-}
-
-#parametersdiv td.caption {
-  text-align: right;
-  font-weight: bold;
-}
-
-#parametersdiv td {
-  margin:  0px; /* not inherited */
-  border:  0px none gray; /* not inherited */
-  padding: 0px; /* not inherited */
-}
-
-#parametersdiv input, #parametersdiv textarea, #parametersdiv select {
-  font-size: 0.9em;
-  background: #fea;
-  border: none;
-}
-
-#updateButton {
-  margin:  5px; /* not inherited */
-  border:  thin solid Black; /* not inherited */
-  padding: 2px; /* not inherited */
-  border-radius: 4px;
-  background: white;
-
-  margin-left: 1em;
-}
-
-#tail { 
-  margin: 5px; /* not inherited */
-}
-
-#busy {
-  vertical-align: middle;
-}
-