graflow: source grooming + demo panels subflow compatible

app/assets/html/test.html

@@ -49,23 +49,17 @@
                 border: 2px solid black;
             }
             bz-graflow.compunet{ grid-column: 1 / -1; width: 80vw; height: 40vh; background:black; }
-            bz-graflow.eic{ grid-column: 1 / -1; width: 80vw; height: 30vh; background: var(--eicui-base-color-grey-10); }
+            bz-graflow.eic{ grid-column: 1 / -1; width: 80vw; height: 50vh; background: var(--eicui-base-color-grey-10); }
             bz-graflow.organi{ width: 40vw; height: 100vh; background:black; }
           </style>
         <script>
             window.addEventListener('load',()=>{
-                const grflw1 = document.querySelector('bz-graflow.compunet')
+                let grflw1 = document.querySelector('bz-graflow.compunet')
                 grflw1.addEventListener('subflowLoaded',
-                    (evt) => { 
+                    (evt) => { grflw1 = evt.detail.subflow }
-                        const demoPanel = evt.target.querySelector('.demooptions')
-                        if(demoPanel) demoPanel.style.display = 'none'; 
-                    }
                 )
                 grflw1.addEventListener('subflowExited',
-                    (evt) => { 
+                    (evt) => { grflw1 = evt.target }
-                        const demoPanel = evt.target.querySelector('.demooptions')
-                        if(demoPanel) demoPanel.style.display = 'block';
-                    }
                 )
                 document.querySelector('[data-trigger="onAutoplace1H"]').addEventListener('click',
                     (evt) => { grflw1.autoPlace('horizontal', 80, 30, 1000, document.querySelector('[data-id="compunet"]').value) }
@@ -74,7 +68,13 @@
                     (evt) => { grflw1.autoPlace('vertical', 80, 30, 1000, document.querySelector('[data-id="compunet"]').value) }
                 )
 
-                const grflw2 = document.querySelector('bz-graflow.eic')
+                let grflw2 = document.querySelector('bz-graflow.eic')
+                grflw2.addEventListener('subflowLoaded',
+                    (evt) => { grflw2 = evt.detail.subflow }
+                )
+                grflw2.addEventListener('subflowExited',
+                    (evt) => { grflw2 = evt.target }
+                )
                 document.querySelector('[data-trigger="onAutoplace2H"]').addEventListener('click',
                     (evt) => { grflw2.autoPlace('horizontal', 100, 30, 1000, document.querySelector('[data-id="eic"]').value) }
                 )
@@ -82,7 +82,13 @@
                     (evt) => { grflw2.autoPlace('vertical', 80, 80, 1000, document.querySelector('[data-id="eic"]').value) }
                 )         
 
-                const grflw3 = document.querySelector('bz-graflow.organi')
+                let grflw3 = document.querySelector('bz-graflow.organi')
+                grflw3.addEventListener('subflowLoaded',
+                    (evt) => { grflw3 = evt.detail.subflow }
+                )
+                grflw3.addEventListener('subflowExited',
+                    (evt) => { grflw3 = evt.target }
+                )
                 document.querySelector('[data-trigger="onAutoplace3H"]').addEventListener('click',
                     (evt) => { grflw3.autoPlace('horizontal', 80, 80, 1000, document.querySelector('[data-id="organi"]').value) }
                 )
@@ -90,7 +96,13 @@
                     (evt) => { grflw3.autoPlace('vertical', 80, 30, 1000, document.querySelector('[data-id="organi"]').value) }
                 )                
 
-                const grflw4 = document.querySelector('bz-graflow.icmp')
+                let grflw4 = document.querySelector('bz-graflow.icmp')
+                grflw4.addEventListener('subflowLoaded',
+                    (evt) => { grflw4 = evt.detail.subflow }
+                )
+                grflw4.addEventListener('subflowExited',
+                    (evt) => { grflw4 = evt.target }
+                )
                 document.querySelector('[data-trigger="onAutoplace4H"]').addEventListener('click',
                     (evt) => { grflw4.autoPlace('horizontal', 100, 30, 1000, document.querySelector('[data-id="icmp"]').value) }
                 )

app/thirdparty/buildoz/bzGraflow.js

@@ -288,7 +288,7 @@ class BZgraflow extends Buildoz{
             childEl.style.transform = 'none'
             childEl.style.willChange = ''
             this.dispatchEvent(new CustomEvent('subflowLoaded', {
-                detail: { flowUrl },
+                detail: { subflow: childEl },
                 bubbles: true,
                 composed: true,
             }))
@@ -366,7 +366,7 @@ class BZgraflow extends Buildoz{
             this.hostContainer.style.visibility = 'visible'
             childEl.style.willChange = ''
             this.dispatchEvent(new CustomEvent('subflowExited', {
-                detail: { },
+                detail: { subflow: childEl },
                 bubbles: true,
                 composed: true,
             }))
@@ -611,11 +611,14 @@ class BZgraflow extends Buildoz{
 
         // Compute indexes for each layer (int part) & add sub-index for ports
         // Also compute max width/height for each layer
-        let maxHeight = 0; let maxWidth = 0
+        let maxHeight = 0
-        const layerHeights = []; const layerWidths = []; 
+        let maxWidth = 0
+        const layerHeights = []
+        const layerWidths = []
         const indexes = {} // indexes[nid] = { base: <int>, ports: { [portId]: <float in [0,1)> } }
         for(const layer of layers){
-            let totHeight = 0; let totWidth = 0
+            let totHeight = 0
+            let totWidth = 0
             for(const [idx, nid] of layer.entries()){
                 // Use offset* (not impacted by CSS transforms) to keep autoPlace stable during zoom animations.
                 const bb = this.stagedNodes[nid].getBoundingClientRect()
@@ -910,9 +913,9 @@ class BZgraflow extends Buildoz{
     computeLayers(nodes, parents) {
         const layer = {}
         const dfs = (id) => {
-            if (layer[id] !== undefined) return(layer[id])
+            if(layer[id] !== undefined) return(layer[id])
             
-            if (parents[id].length === 0) {
+            if(parents[id].length === 0) {
                 layer[id] = 0
             } else {
                 layer[id] = 1 + Math.max(...parents[id].map(dfs))
@@ -938,7 +941,7 @@ class BZgraflow extends Buildoz{
         if(links.some(l => l.from[0] === l.to[0])) return(true) // self-loops
         
         const { adj } = this.buildGraphStructures(nodes, links) 
-        const visiting = new Set(); 
+        const visiting = new Set()
         const visited = new Set()
         const dfs = (nid) => {
             if(visiting.has(nid)) {
@@ -961,7 +964,8 @@ class BZgraflow extends Buildoz{
     
     findBackEdges(nodes, links) {
         const { adj } = this.buildGraphStructures(nodes, links, true)
-        const color = {}; nodes.forEach(n => color[n.id] = 'white')        
+        const color = {}
+        nodes.forEach(n => color[n.id] = 'white')        
         const backEdges = []
         
         function dfs(u) {
@@ -969,9 +973,9 @@ class BZgraflow extends Buildoz{
             for (const neighbor of adj[u]) {
                 const v = neighbor.to
                 const linkIdx = neighbor.linkIdx
-                if (color[v] === 'gray') {
+                if(color[v] === 'gray') {
                     backEdges.push(linkIdx)   // 👈 cycle edge - return link index
-                } else if (color[v] === 'white') {
+                } else if(color[v] === 'white') {
                     dfs(v)
                 }
             }
@@ -979,7 +983,7 @@ class BZgraflow extends Buildoz{
         }
         
         nodes.forEach(n => {
-            if (color[n.id] === 'white') dfs(n.id)
+            if(color[n.id] === 'white') dfs(n.id)
         })
         
         return(backEdges)