diff --git a/apps/jscad-web/main.js b/apps/jscad-web/main.js index 5046912..7fffe64 100644 --- a/apps/jscad-web/main.js +++ b/apps/jscad-web/main.js @@ -2,6 +2,7 @@ import { addToCache, clearFs, extractEntries, + analyzeProject, fileDropped, getFile, getFileContent, @@ -80,8 +81,13 @@ async function initFs() { }) sw.defProjectName = 'jscad' sw.onfileschange = files => { - workerApi.clearFileCache({ files }) - editor.filesChanged(files) + console.log('files', files) + if(files.includes('/package.json')){ + reloadProject() + }else{ + workerApi.clearFileCache({ files }) + editor.filesChanged(files) + } if (sw.fileToRun) runScript({ url: sw.fileToRun, base: sw.base }) } sw.getFile = path => getFile(path, sw) @@ -100,22 +106,30 @@ document.body.ondrop = async ev => { if (!sw) await initFs() showDrop(false) workerApi.clearTempCache() - saveMap = {} - const { alias, script } = await fileDropped(sw, files) - projectName = sw.projectName - if (alias.length) { - workerApi.init({ alias }) - } - let url = sw.fileToRun - runScript({ url, base: sw.base }) - editor.setSource(script, url) - editor.setFiles(sw.filesToCheck) + + await fileDropped(sw, files) + + reloadProject() + } catch (error) { setError(error) console.error(error) } } +async function reloadProject(){ + saveMap = {} + const { alias, script } = await analyzeProject(sw) + projectName = sw.projectName + if (alias.length) { + workerApi.init({ alias }) + } + let url = sw.fileToRun + runScript({ url, base: sw.base }) + editor.setSource(script, url) + editor.setFiles(sw.filesToCheck) +} + document.body.ondragover = ev => { ev.preventDefault() showDrop(true) @@ -176,7 +190,9 @@ const spinner = byId('spinner') let firstJobTimer function trackJobs(jobs) { + console.log('jobs', jobs) if (jobs === 1) { + clearTimeout(firstJobTimer) // do not show spinner for fast renders firstJobTimer = setTimeout(() => { spinner.style.display = 'block' diff --git a/apps/jscad-web/online.editor.md b/apps/jscad-web/online.editor.md new file mode 100644 index 0000000..8ca970b --- /dev/null +++ b/apps/jscad-web/online.editor.md @@ -0,0 +1,48 @@ + +## Easy: edit online + + +## Advanced: edit in your fav code editor + +Any text or code editor will work for this (vi, vim, neovim, notepad++, VSCodium , VSCode, Atom, SublimeText...). + +- create a file `someScript.js` +- copy exmaple code form jscad.app +- save the file +- drag&drop the file to jscad.app browser window +- put your editor and jscad.app side by side +- edit the file, save the changes, jscad.app will automatically re-run the script + +A chromium based browser is required, as other browser do not allow JS to see changes to the file. + +## Enthusiast: a multifile project + +## Expert: project with package.json and workspaces for internal libs + + +Bonus: if you change `main` in package.json, project will be reloaded +and that file will be the new starting point for the project without you needing +D&D again. + +https://github.com/hrgdavor/jscadui/assets/2480762/63821c2d-3b2c-45cb-816a-b99f2f0e24fe + + +better option is to download a nice editor that can syntax highlight JS code +edit with the said editor (you may try VScode if it works well on your computer) +save the fil on yor drive, and keep the openjscad window open, then drag and drop the file there +it will render the script, and check for changes, so you continue editing it the text editor on your computer +as soon as you save it will pick-up the changes +... another simpler option that was made available recently on https://jscad.app/ is to copy the script text from openjscad + +paste there, and then just use CTRL+S it will aks the first time permission to save the file, and further saving will save the file, and render changes +jscad.app is not official yet, but works rather well +I personally prefer to use VSCode and drag/drop my file onto jscad.app to see it rendered there, and export in the end for 3d printing + + +any editor +drag and dropping file to openjscad or jscad.app will cause it to be given to the browser with permission to read it. +You must use Chrome for jscad to be able to check few times a second to see if it changed +Only Chrome can get change info and read new content ... Firefox plays dumb and will indefinitely give the initial file version, even after it chanes on your drive + + + diff --git a/apps/jscad-web/src/editor.js b/apps/jscad-web/src/editor.js index 2d09e31..3e636ba 100644 --- a/apps/jscad-web/src/editor.js +++ b/apps/jscad-web/src/editor.js @@ -70,6 +70,9 @@ export const init = (defaultCode, fn, _saveFn, _getFileFn) => { document.getElementById('editor-hint').addEventListener('click', () => { compile(view.state.doc.toString(), currentFile) }) + document.getElementById('editor-hint2').addEventListener('click', () => { + save(view.state.doc.toString(), currentFile) + }) // Setup file selector editorFile.addEventListener('click', () => { diff --git a/apps/jscad-web/static/index.html b/apps/jscad-web/static/index.html index 1aa9471..4b73274 100644 --- a/apps/jscad-web/static/index.html +++ b/apps/jscad-web/static/index.html @@ -70,6 +70,7 @@