multifile examples

apps/jscad-web/examples/AMFImport/index.js

@@ -0,0 +1,16 @@
+/**
+ * AMF Import Demonstration
+ * @category Imports
+ * @skillLevel 1
+ * @description Importing AMF files. Drag the whole AMFImport folder into JSCAD
+ * @tags amf, import
+ * @authors Simon Clark
+ * @licence MIT License
+ */
+
+// Load the AMF files using require
+const rook = require('./Rook.amf')
+
+const main = () => rook
+
+module.exports = { main }

apps/jscad-web/examples/AMFImport/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "amf-import",
+  "version": "0.0.1",
+  "description": "Demonstrating AMF import. Drag the AMFImport folder onto the JSCAD instance.",
+  "main": "index.js",
+  "keywords": [
+    "jscad",
+    "cad"
+  ],
+  "author": "Simon Clark",
+  "license": "MIT",
+  "dependencies": {}
+}

apps/jscad-web/examples/STLImport/index.js

@@ -0,0 +1,23 @@
+/**
+ * STL Import Demonstration
+ * @category Imports
+ * @skillLevel 1
+ * @description Importing STL files. Drag the whole STLImport folder into JSCAD
+ * @tags stl, import
+ * @authors Simon Clark
+ * @licence MIT License
+ */
+
+const { translate, scale, rotateZ } = require('@jscad/modeling').transforms
+const { union } = require('@jscad/modeling').booleans
+
+// Load the STL files using require
+const sculpture = require('./3d_sculpture-VernonBussler.stl')
+const frog = require('./frog-OwenCollins.stl')
+
+const main = () => union(
+  translate([0, 0, 13], rotateZ(-Math.PI / 3, scale([0.25, 0.25, 0.25], frog))),
+  translate([-5, 6, 0], sculpture)
+)
+
+module.exports = { main }

apps/jscad-web/examples/STLImport/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "stl-import",
+  "version": "0.0.1",
+  "description": "Demonstrating STL file import. Drag the STLImport folder onto the JSCAD instance.",
+  "main": "index.js",
+  "keywords": [
+    "jscad",
+    "cad"
+  ],
+  "author": "Simon Clark",
+  "license": "MIT",
+  "dependencies": {}
+}

apps/jscad-web/examples/SVGImport/index.js

@@ -0,0 +1,24 @@
+/**
+ * SVG Import Demonstration
+ * @category Imports
+ * @skillLevel 1
+ * @description Importing SVG files. Drag the whole SVGImport folder into JSCAD
+ * @tags svg, import
+ * @authors Simon Clark
+ * @licence MIT License
+ */
+
+const { translate } = require('@jscad/modeling').transforms
+const { extrudeLinear } = require('@jscad/modeling').extrusions
+const { polygon } = require('@jscad/modeling').primitives
+
+// Load the SVG files using require
+const panda = require('./babypanda2.svg')
+
+const main = () => {
+  // SVG shapes are imported as an array of paths. We want to convert those to polygons to extrude.
+  const poly = panda.map((shape) => polygon({ points: shape.points }))
+  return translate([-40, 50, 0], extrudeLinear({ height: 2 }, poly))
+}
+
+module.exports = { main }

apps/jscad-web/examples/SVGImport/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "svg-import",
+  "version": "0.0.1",
+  "description": "Demonstrating SVG import. Drag the SVGImport folder onto the JSCAD instance.",
+  "main": "index.js",
+  "keywords": [
+    "jscad",
+    "cad"
+  ],
+  "author": "Simon Clark",
+  "license": "MIT",
+  "dependencies": {}
+}

apps/jscad-web/main.js

@@ -15,7 +15,9 @@ import { ViewState } from './src/viewState.js'
 import * as welcome from './src/welcome.js'
 
 export const byId = id => document.getElementById(id)
-const toUrl = path => new URL(path, document.baseURI).toString()
+const appBase = document.baseURI
+let currentBase = appBase
+const toUrl = path => new URL(path, appBase).toString()
 
 const viewState = new ViewState()
 
@@ -193,16 +195,17 @@ const paramChangeCallback = async params => {
   if(lastParams && lastParams != params) paramChangeCallback(lastParams)
 }
 
-const runScript = async ({ script, url = './index.js', base, root }) => {
+const runScript = async ({ script, url = './index.js', base = currentBase, root }) => {
+  currentBase = base
   loadDefault = false // don't load default model if something else was loaded
   const result = await sendCmdAndSpin('runScript', { script, url, base, root })
   genParams({ target: byId('paramsDiv'), params: result.def || {}, callback: paramChangeCallback })
   handlers.entities(result)
 }
 
-const loadExample = source => {
+const loadExample = (source, base=appBase) => {
   editor.setSource(source)
-  runScript({ script: source })
+  runScript({ script: source, base })
 }
 
 // Initialize three engine

apps/jscad-web/src/examples.js

@@ -9,4 +9,7 @@ export const examples = [
   { name: 'Slicer', source: './examples/slicer.example.js' },
   { name: 'Balloons', source: './examples/balloons.example.js' },
   { name: 'Parameter Types', source: './examples/parameters.example.js' },
+  { name: 'Import AMF', source: './examples/AMFImport/index.js' },
+  { name: 'Import STL', source: './examples/STLImport/index.js' },
+  { name: 'Import SVG', source: './examples/SVGImport/index.js' },
 ]

apps/jscad-web/src/menu.js

@@ -2,7 +2,7 @@ import { examples } from './examples.js'
 
 const menu = document.getElementById('menu')
 
-export const init = (loadExample) => {
+export const init = loadExample => {
   const button = document.getElementById('menu-button')
   const content = document.getElementById('menu-content')
 
@@ -12,7 +12,7 @@ export const init = (loadExample) => {
   })
 
   // Close menu when anything else is clicked
-  window.addEventListener('click', (e) => {
+  window.addEventListener('click', e => {
     if (!button.contains(e.target) && !content.contains(e.target)) {
       dismiss()
     }
@@ -28,7 +28,7 @@ export const init = (loadExample) => {
     a.innerText = name
     a.addEventListener('click', async () => {
       console.log(`load example ${name}`)
-      loadExample(await (await fetch(source)).text())
+      loadExample(await (await fetch(source)).text(), new URL(source, document.baseURI).toString())
     })
     const li = document.createElement('li')
     li.appendChild(a)

packages/worker/worker.js

@@ -86,6 +86,7 @@ const importReg = /import(?:(?:(?:[ \n\t]+([^ *\n\t\{\},]+)[ \n\t]*(?:,|[ \n\t]+
 const exportReg = /export.*from/
 
 const runScript = async ({ script, url, base=globalBase, root=base }) => {
+  console.log('run script with base:', base)
   if(!script) script = readFileWeb(resolveUrl(url, base, root).url)
 
   const shouldTransform = url.endsWith('.ts') || script.includes('import') && (importReg.test(script) || exportReg.test(script))