From 4b9d6972237ecc151cb55e73e762e55342859adb Mon Sep 17 00:00:00 2001 From: Davor Hrg Date: Thu, 14 Mar 2024 15:26:55 +0100 Subject: [PATCH] reload on package.json change, start docs on editing --- apps/jscad-web/main.js | 40 ++++++++++++++++-------- apps/jscad-web/online.editor.md | 48 +++++++++++++++++++++++++++++ apps/jscad-web/src/editor.js | 3 ++ apps/jscad-web/static/index.html | 1 + apps/jscad-web/static/main.css | 5 ++- packages/fs-provider/fs-provider.js | 10 +++--- 6 files changed, 90 insertions(+), 17 deletions(-) create mode 100644 apps/jscad-web/online.editor.md 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 @@

JSCAD

Shift-enter to update + CTRL+S to save and update
diff --git a/apps/jscad-web/static/main.css b/apps/jscad-web/static/main.css index ba6361e..1da5c5f 100644 --- a/apps/jscad-web/static/main.css +++ b/apps/jscad-web/static/main.css @@ -190,7 +190,7 @@ p { height: calc(100vh - 60px); flex: 1; } -#editor-hint { +#editor-hint, #editor-hint2 { position: absolute; bottom: 10px; right: calc(min(10px, 100% - 180px)); /* push right when editor is small */ @@ -199,6 +199,9 @@ p { font-size: 10pt; user-select: none; } +#editor-hint { + bottom: 30px; +} .dark #editor-hint { color: #dddddd88; } diff --git a/packages/fs-provider/fs-provider.js b/packages/fs-provider/fs-provider.js index 296a1c2..0592e77 100644 --- a/packages/fs-provider/fs-provider.js +++ b/packages/fs-provider/fs-provider.js @@ -225,13 +225,12 @@ export const checkFiles = sw => { export async function fileDropped(sw, files) { sw.filesToCheck.length = 0 sw.fileToRun = 'index.js' - let folderName clearFs(sw) let rootFiles = [] if (files.length === 1) { const file = files[0] if (file.isDirectory) { - folderName = file.name + sw.folderName = file.name file.fsDir = '/' rootFiles = await readDir(file) } else { @@ -243,16 +242,17 @@ export async function fileDropped(sw, files) { } rootFiles = rootFiles.map(e => fileToFsEntry(e, '/')) sw.roots.push(rootFiles) +} +export async function analyzeProject(sw){ const alias = await getWorkspaceAliases(sw) - let time = Date.now() const preLoad = ['/' + sw.fileToRun, '/package.json'] const loaded = await addPreLoadAll(sw, preLoad, true) sw.projectName = sw.defProjectName if (sw.fileToRun !== 'index.js') sw.projectName = sw.fileToRun.replace(/\.js$/, '') - if (folderName) sw.projectName = folderName + if (sw.folderName) sw.projectName = sw.folderName let script = '' if (sw.fileToRun) { @@ -266,6 +266,7 @@ export async function fileDropped(sw, files) { } } return { alias, script } + } /** @@ -280,6 +281,7 @@ const getWorkspaceAliases = async sw => { let pkgFile = await findFileInRoots(sw.roots, 'package.json') if (pkgFile) { try { + sw.filesToCheck.push(pkgFile) const pack = JSON.parse(await readAsText(pkgFile)) if (pack.main) sw.fileToRun = pack.main if (pack.workspaces)