graflow horiz + vert + fixed border & scroll issues

buildoz.css

@@ -188,10 +188,17 @@ bz-slidepane[side="right"] div.handle {
     cursor: ew-resize;
 }
 bz-graflow {
-  position: relative;
+    position: relative;
-  display: block;
+    display: block;
-  width: 100vw;
+    width: 100vw;
-  height: 100vh;
+    height: 50vh;
+    box-sizing: border-box;
+}
+bz-graflow .bzgf-main-container{
+    width: 100%;
+    height: 100%;
+    position: relative;
+    box-sizing: border-box;
 }
 bz-graflow .bzgf-wires-container,
 bz-graflow .bzgf-nodes-container{

bzGraflow.js

@@ -16,12 +16,16 @@ class BZgraflow extends Buildoz{
             return
         }
         this.loadFlow(flowUrl) // Let it load async while we coat      
+        this.mainContainer  = document.createElement('div')
+        this.mainContainer.classList.add('bzgf-main-container')
         this.nodesContainer = document.createElement('div')
         this.nodesContainer.classList.add('bzgf-nodes-container')
         this.wiresContainer = document.createElementNS('http://www.w3.org/2000/svg', 'svg') 
+        this.wiresContainer.setAttribute('overflow','visible')
         this.wiresContainer.classList.add('bzgf-wires-container')
-        this.append(this.wiresContainer)
+        this.mainContainer.append(this.wiresContainer)
-        this.append(this.nodesContainer)
+        this.mainContainer.append(this.nodesContainer)
+        this.append(this.mainContainer)
     }
     
     async loadFlow(url){
@@ -114,16 +118,17 @@ class BZgraflow extends Buildoz{
             e: { x:  1, y:  0 },
             w: { x: -1, y:  0 },
         }
+        const svgRect = this.wiresContainer.getBoundingClientRect()
         const node1 = this.stagedNodes[idNode1]
         const port1 = node1.ports[idPort1]
         const node2 = this.stagedNodes[idNode2]
         const port2 = node2.ports[idPort2]
         const bb1 = port1.el.getBoundingClientRect()
         const bb2 = port2.el.getBoundingClientRect()
-        const x1 = Math.floor(bb1.x + (bb1.width/2))
+        const x1 = Math.floor(bb1.x + (bb1.width/2)) - svgRect.left
-        const y1 = Math.floor(bb1.y + (bb1.height/2))
+        const y1 = Math.floor(bb1.y + (bb1.height/2)) - svgRect.top
-        const x2 = Math.floor(bb2.x + (bb2.width/2))
+        const x2 = Math.floor(bb2.x + (bb2.width/2)) - svgRect.left
-        const y2 = Math.floor(bb2.y + (bb2.height/2))
+        const y2 = Math.floor(bb2.y + (bb2.height/2)) - svgRect.top
         const dist = Math.abs(x2 - x1) + Math.abs(y2 - y1)
         let tension = dist * 0.4
         if(tension < tensionMin) tension = tensionMin
@@ -137,11 +142,8 @@ class BZgraflow extends Buildoz{
     }
 
     autoPlace(orientation = 'horizontal', gapx = 80, gapy = 30){
-        if(!['horizontal', 'vertical'].includes(orientation)) return
-
         const parents = {}
         const adj = {}
-
         this.flow.nodes.forEach(n => {
             parents[n.id] = []
             adj[n.id] = []
@@ -155,33 +157,51 @@ class BZgraflow extends Buildoz{
         })
     
         const layers = this.computeLayers(this.flow.nodes, parents)
-        let maxHeight = 0
+        let maxHeight = 0; let maxWidth = 0
-        const layerHeights = []
+        const layerHeights = []; const layerWidths = []; 
         const indexes = {} // Todo: a
         for(const layer of layers){
-            let totHeight = 0
+            let totHeight = 0; let totWidth = 0
             for(const [idx, nid] of layer.entries()){
                 const bb = this.stagedNodes[nid].getBoundingClientRect()
-                totHeight += bb.height+gapy
+                totHeight += bb.height + gapy
+                totWidth += bb.width + gapx
                 indexes[nid] = idx 
             }
             if(totHeight>maxHeight) maxHeight = totHeight
             layerHeights.push(totHeight)
+            if(totWidth>maxWidth) maxWidth = totWidth
+            layerWidths.push(totWidth)
         }
         
         this.reorderLayers(layers, parents, indexes)
 
-        let x = gapx
+        if(orientation=='horizontal'){
-        for(const [idx, layer] of layers.entries()){
+            let x = gapx
-            let wMax = 0
+            for(const [idx, layer] of layers.entries()){
-            let y = ((maxHeight - layerHeights[idx]) / 2) + gapy
+                let wMax = 0
-            for(const nid of layer){
+                let y = ((maxHeight - layerHeights[idx]) / 2) + gapy
-                const bb = this.stagedNodes[nid].getBoundingClientRect()
+                for(const nid of layer){
-                wMax = (bb.width > wMax) ? bb.width : wMax
+                    const bb = this.stagedNodes[nid].getBoundingClientRect()
-                this.moveNode(nid, x, y, 1000)
+                    wMax = (bb.width > wMax) ? bb.width : wMax
-                y +=  gapy + bb.height
+                    this.moveNode(nid, x, y, 1000)
+                    y +=  gapy + bb.height
+                }
+                x += wMax + gapx
+            }
+        } else if(orientation=='vertical'){
+            let y = gapy
+            for(const [idx, layer] of layers.entries()){
+                let hMax = 0
+                let x = ((maxWidth - layerWidths[idx]) / 2) + gapx
+                for(const nid of layer){
+                    const bb = this.stagedNodes[nid].getBoundingClientRect()
+                    hMax = (bb.height > hMax) ? bb.width : hMax
+                    this.moveNode(nid, x, y, 1000)
+                    x +=  gapx + bb.width
+                }
+                y += hMax + gapy
             }            
-            x += wMax + gapx
         }
     }