graflow, autoplacement 1.5, with layer-ordering, 2nd test WF

bzGraflow.js

@@ -18,13 +18,15 @@ class BZgraflow extends Buildoz{
         this.loadFlow(flowUrl) // Let it load async while we coat      
         this.mainContainer  = document.createElement('div')
         this.mainContainer.classList.add('bzgf-main-container')
+        this.shadow = this.mainContainer.attachShadow({ mode: 'open' })
+
         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.mainContainer.append(this.wiresContainer)
-        this.mainContainer.append(this.nodesContainer)
+        this.shadow.append(this.wiresContainer)
+        this.shadow.append(this.nodesContainer)
         this.append(this.mainContainer)
     }
     
@@ -68,7 +70,7 @@ class BZgraflow extends Buildoz{
             styles.forEach(styleEl => {
                 const style = document.createElement('style')
                 style.textContent = styleEl.textContent
-                document.head.appendChild(style)
+                this.shadow.appendChild(style)
             })
             BZgraflow._loadedNodeStyles.add(url)
         }
@@ -123,6 +125,10 @@ class BZgraflow extends Buildoz{
         const port1 = node1.ports[idPort1]
         const node2 = this.stagedNodes[idNode2]
         const port2 = node2.ports[idPort2]
+        if(!node1 || !node2 || !port1 || !port2) {
+            console.warn('bezier on bad node / port!', idNode1, idPort1, idNode2, idPort2)
+            return('')
+        }
         const bb1 = port1.el.getBoundingClientRect()
         const bb2 = port2.el.getBoundingClientRect()
         const x1 = Math.floor(bb1.x + (bb1.width/2)) - svgRect.left
@@ -142,6 +148,11 @@ class BZgraflow extends Buildoz{
     }
 
     autoPlace(orientation = 'horizontal', gapx = 80, gapy = 30){
+        if(this.hasAnyLoop(this.flow.nodes, this.flow.links)){
+            console.warn('Loop(s) detected... Cannot auto-place !')
+            return
+        }
+
         const parents = {}
         const adj = {}
         this.flow.nodes.forEach(n => {
@@ -299,11 +310,16 @@ class BZgraflow extends Buildoz{
         const visiting = new Set(); 
         const visited = new Set()
         const dfs = (nid) => {
-            if(visiting.has(nid)) return(true)
+            if(visiting.has(nid)) {
+                return(true)
+            }
+
             if(visited.has(nid)) return(false)
             visiting.add(nid)
             for(const m of adj[nid]) {
-                if(dfs(m)) return(true)
+                if(dfs(m)) {
+                    return(true)
+                }
             }
             visiting.delete(nid)
             visited.add(nid)