export flow

buildoz.css

@@ -204,6 +204,7 @@ bz-graflow .bzgf-main-container{
     height: 100%;
     position: relative;
     box-sizing: border-box;
+    overflow: auto;
 }
 
 /* BZGRAFLOW_CORE_START */
@@ -273,7 +274,7 @@ bz-grafloweditor .bzgfe-main-container{
     width: 100%;
     overflow: hidden;
     display: grid;
-    grid-template-columns: 20vw auto;
+    grid-template-columns: 15vw auto;
     grid-gap: 1px;
     background: #FFF;
 }
@@ -295,29 +296,34 @@ bz-grafloweditor .bzgfe-nodes-container .bzgf-node{
     position: relative;
     margin: 5px auto;
 }
-bz-grafloweditor bz-slidepane { z-index: 999; background-color: #0008!important;}
+bz-grafloweditor bz-slidepane { z-index: 10; background-color: #0008!important;}
 bz-grafloweditor bz-slidepane .inner-console{ 
-    padding: .5em; 
+    padding: 5px; 
     background: #FFF; 
+}
+bz-grafloweditor .inner-console section{
     display: grid;
     grid-auto-flow: row;
     grid-gap: 5px;
+    background-color: #DDD;
+    padding: 5px;
+    margin: 5px auto;
 }
 
-bz-grafloweditor .inner-console .cols-2{
+bz-grafloweditor .inner-console section .cols-2{
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: 1em;
-    background-color: #ddd;
+    background-color: #CCC;
     min-height: 2.5em;
 }
 
-bz-grafloweditor .inner-console .cols-2 label{
+bz-grafloweditor .inner-console section .cols-2 label{
     text-align: right;
     align-self: center;
 }
 
-bz-grafloweditor .inner-console .cols-2 input{
+bz-grafloweditor .inner-console section .cols-2 input{
     max-height: 2em;
     align-self: center;
 }

bzGraflow-editor.js

@@ -74,6 +74,7 @@ class BZgrafloweditor extends Buildoz{
     fillconsole(){
         this.slidePane.innerHTML = `
             <div class="inner-console">
+                <section>
                     <button data-trigger="onAutoplace1H">Auto-place Horizontal</button>
                     <button data-trigger="onAutoplace1V">Auto-place Vertical</button>
                     <div class="cols-2"><label>GapX</label><input name="gapx" type="number" size="2" value="80"></div>
@@ -96,8 +97,13 @@ class BZgrafloweditor extends Buildoz{
                         </bz-select>
                     </div>
                     <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>
+                </section>
             </div>
         `
+        this.slidePane.querySelector('button[data-trigger="onexportFlow"]').addEventListener('click', this.onexportFlow.bind(this))
     }
 
     refreshNodes(e){
@@ -151,5 +157,21 @@ class BZgrafloweditor extends Buildoz{
             this.graflow.refresh()
         })
     }
+
+    onexportFlow(e){
+        const flowDeep = JSON.parse(JSON.stringify(this.graflow.flow))
+        delete flowDeep.longLinks
+        const exportObj = {
+            nodesFile: this.getBZAttribute('nodes'),
+            flow: flowDeep
+        }
+        const flowJson = JSON.stringify(exportObj, null, 2)
+        const flowBlob = new Blob([flowJson], { type: 'application/json' })
+        const flowUrl = URL.createObjectURL(flowBlob)
+        const flowLink = document.createElement('a')
+        flowLink.href = flowUrl
+        flowLink.download = 'flow.json'
+        flowLink.click()
+    }
 }
 Buildoz.define('grafloweditor', BZgrafloweditor)

bzGraflow.js

@@ -1146,14 +1146,14 @@ class BZgraflow extends Buildoz{
         return(crossLayerLinks)
     }
 
-    autofit(){ 
+    autofit(percent=100){ 
         const parentBB = this.parentElement.getBoundingClientRect()
         // Use scroll dimensions for actual content extent (nodes can extend beyond element bounds)
         const contentW = Math.max(this.scrollWidth || this.offsetWidth || 1, 1)
         const contentH = Math.max(this.scrollHeight || this.offsetHeight || 1, 1)
         const sx = parentBB.width / contentW
         const sy = parentBB.height / contentH
-        const scale = Math.min(sx, sy)  // uniform scale to fit inside parent
+        const scale = Math.min(sx, sy)*(percent/100)  // uniform scale to fit inside parent
         this.style.transformOrigin = 'top left'
         this.style.transform = `scale(${scale})`
     }
@@ -1245,7 +1245,7 @@ class MovingNodes{
         node.style.left = `${x}px`
         node.style.top = `${y}px`
         node.style.margin = '0'
-        node.style.zIndex = '9999'
+        node.style.zIndex = '3'
         node.style.pointerEvents = 'none'
     }