import flow OK

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{
                     <div class="cols-2"><label>Tension</label><input name="tension" type="number" size="2" value="30"></div>
                 </section>
                 <section>
-                    <button data-trigger="onexportFlow">Export Flow</button>
+                    <button data-trigger="onImportFlow">Import Flow</button>
+                    <button data-trigger="onExportFlow">Export Flow</button>
+                    <input type="file" name="importFlow" accept="application/json" style="display: none;">
                 </section>
             </div>
         `
-        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 = {