diff --git a/buildoz.css b/buildoz.css index 8242f16..ad8e396 100644 --- a/buildoz.css +++ b/buildoz.css @@ -261,6 +261,7 @@ bz-graflow .bzgf-nodes-container .port.selectable:hover{ border: 5px solid #FF08!important; cursor: pointer; } +bz-graflow .graflow-error{ background:red;color:black;position: absolute;top: 0;left: 50%;transform: translateX(-50%); } /* BZGRAFLOW_CORE_END */ diff --git a/bzGraflow-editor.js b/bzGraflow-editor.js index 3cc0523..97e2872 100644 --- a/bzGraflow-editor.js +++ b/bzGraflow-editor.js @@ -14,6 +14,7 @@ class BZgrafloweditor extends Buildoz{ constructor(){ super() this.defaultAttrs = { } +window.debugEditor = this } async connectedCallback() { @@ -99,11 +100,14 @@ class BZgrafloweditor extends Buildoz{
- + + +
` - this.slidePane.querySelector('button[data-trigger="onexportFlow"]').addEventListener('click', this.onexportFlow.bind(this)) + this.slidePane.querySelector('button[data-trigger="onExportFlow"]').addEventListener('click', this.onExportFlow.bind(this)) + this.slidePane.querySelector('button[data-trigger="onImportFlow"]').addEventListener('click', this.onImportFlow.bind(this)) } refreshNodes(e){ @@ -158,7 +162,17 @@ class BZgrafloweditor extends Buildoz{ }) } - onexportFlow(e){ + onImportFlow(e){ + const fileInput = this.slidePane.querySelector('input[name="importFlow"]') + fileInput.addEventListener('change', (evt) => { + const file = evt.target.files[0] + if(file) this.graflow.loadFlow(file) + fileInput.value = '' + }, { once: true }) + fileInput.click() + } + + onExportFlow(e){ const flowDeep = JSON.parse(JSON.stringify(this.graflow.flow)) delete flowDeep.longLinks const exportObj = { diff --git a/bzGraflow.js b/bzGraflow.js index 860cf23..841b59e 100644 --- a/bzGraflow.js +++ b/bzGraflow.js @@ -99,20 +99,32 @@ class BZgraflow extends Buildoz{ } error(msg, err){ - this.innerHTML = `
${msg}
` + this.querySelector('.graflow-error')?.remove() + const errorEl = document.createElement('div') + errorEl.classList.add('graflow-error') + errorEl.innerHTML = `${msg}` + this.appendChild(errorEl) if(err) console.error(msg, err) else console.error(msg) } - async loadFlow(url){ - const res = await fetch(url+'?'+crypto.randomUUID()) - const buf = await res.text() + async loadFlow(source){ + let buf + if(source instanceof Blob){ + buf = await source.text() + } else { + const url = source + const fetchUrl = (typeof url === 'string' && !url.startsWith('blob:') && !url.startsWith('data:')) + ? (url + '?' + crypto.randomUUID()) + : url + const res = await fetch(fetchUrl) + buf = await res.text() + } let flowObj try{ flowObj = JSON.parse(buf) } catch(err){ this.error('Could not parse flow JSON!?', err) - return } if(!flowObj.nodesFile){ @@ -122,7 +134,7 @@ class BZgraflow extends Buildoz{ await this.loadNodes(flowObj.nodesFile) this.flow = flowObj.flow this.refresh() - this.fireEvent('flowLoaded', { url: url }) + this.fireEvent('flowLoaded', { url: source instanceof Blob ? null : source, blob: source instanceof Blob ? source : null }) } initFlow(){