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(){