Graflow: unique refs for arrows to fix arrows in subflows

buildoz.css

@@ -254,7 +254,7 @@ bz-graflow .bzgf-nodes-container{ /* used to keep the nodes container pointer-ev
 }
 bz-graflow .bzgf-nodes-container > * { /* allow the nodes to be moved ! */
     pointer-events: auto;
-  }
+}
 
 bz-graflow .bzgf-nodes-container .bzgf-node{ position:absolute; }
 bz-graflow .bzgf-nodes-container .bzgf-fake-node{

bzGraflow.js

@@ -30,6 +30,7 @@ class BZgraflow extends Buildoz{
         this.stagedNodes = { }
         this.stagedWires = { }
         this.arrowDefs = null
+        this.arrowMarkerId = `arrow-${crypto.randomUUID()}`
         this.currentOrientation = null
     }
 
@@ -98,6 +99,28 @@ class BZgraflow extends Buildoz{
         else this.initFlow()
     }
 
+    static get observedAttributes(){ 
+        return([...super.observedAttributes, 'disabled'])
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        super.attributeChangedCallback(name, oldValue, newValue)
+        if(name == 'disabled'){
+            if(newValue === null) {
+                this.disabled = false
+                this.style.opacity = 1
+                this.style.pointerEvents = 'auto'
+            } else {
+                this.disabled = true
+                this.style.opacity = 0.5
+                this.style.pointerEvents = 'none'
+            }
+            this.querySelectorAll('.bzgf-zoom-in, .bzgf-zoom-out').forEach((btn) => {
+                btn.disabled = this.disabled
+            })
+        }
+    }
+
     error(msg, err){
         this.querySelector('.graflow-error')?.remove()
         const errorEl = document.createElement('div')
@@ -142,7 +165,10 @@ class BZgraflow extends Buildoz{
         await this.loadNodes(flowObj.nodesFile)
         this.flow = flowObj.flow
         this.refresh()
-        this.fireEvent('flowLoaded', { url: source instanceof Blob ? null : source, blob: source instanceof Blob ? source : null })
+        this.fireEvent('flowLoaded', { 
+            parentNodeId: null, 
+            component: this,
+        })
     }
 
     initFlow(){
@@ -159,6 +185,8 @@ class BZgraflow extends Buildoz{
         for(const tpl of doc.querySelectorAll('template')){
             if(tpl.id=='svg-arrows'){
                 this.arrowDefs = tpl.querySelector('defs').cloneNode(true)
+                const defaultArrow = this.arrowDefs.querySelector('#arrow')
+                if(defaultArrow) defaultArrow.id = this.arrowMarkerId
                 this.wiresContainer.appendChild(this.arrowDefs)
             } else {
                 const rootEl = tpl.content.querySelector('.bzgf-node')
@@ -214,6 +242,7 @@ class BZgraflow extends Buildoz{
                 this.enterSubflow(id)
             })
             this.stagedNodes[id].appendChild(btnEnterSubflow)
+            this.stagedNodes[id].dataset.subflow = true
         }
         this.nodesContainer.append(this.stagedNodes[id])
         if(!this.flow.nodes.find(n => n.id === id)) {
@@ -223,6 +252,7 @@ class BZgraflow extends Buildoz{
     }
 
     enterSubflow(id){
+        if(this.disabled || this.hasAttribute('disabled')) return
         const nodeEl = this.stagedNodes[id]
         if(!nodeEl) return
 
@@ -235,7 +265,7 @@ class BZgraflow extends Buildoz{
         const childEl = document.createElement('bz-graflow')
         childEl.isSubflow = true
         childEl.currentOrientation = this.currentOrientation
-        const inheritedAttrs = ['orientation', 'gapx', 'gapy', 'tween', 'align', 'tension', 'wiretype', 'edit'] // ! Not 'isolated' !
+        const inheritedAttrs = ['orientation', 'gapx', 'gapy', 'tween', 'align', 'tension', 'wiretype', 'edit', 'autofit'] // ! Not 'isolated' !
         for(const attrName of inheritedAttrs){
             if(this.hasAttribute(attrName)) childEl.setAttribute(attrName, this.getAttribute(attrName))
         }
@@ -246,7 +276,7 @@ class BZgraflow extends Buildoz{
                 childEl.addNode({   
                     "nodeType": portLink.refNodeType,
                     "id": nid,
-                    "markup": { "parentport": portLink.parentPort }
+                    "markup": { ...portLink }
                 })
                 if(portLink.direction=='in') {
                     childEl.addWire({ 
@@ -260,8 +290,8 @@ class BZgraflow extends Buildoz{
                     })
                 }
             }
-
+            // Rebuild once refNodes are injected so the final refresh/autofit includes them.
-            childEl.autoPlace()
+            childEl.refresh()
         }, { once:true })
 
         if(flowNode.subflow.url) childEl.setAttribute('flow', flowNode.subflow.url)
@@ -271,7 +301,6 @@ class BZgraflow extends Buildoz{
             })
         }
 
-        childEl.setAttribute('tension', this.getBZAttribute('tension') || '60')
         // Remember which node we "came from" so exitSubflow() can animate back to it.
         childEl.dataset.enterNodeId = id
         const btnExitSubflow = document.createElement('button')
@@ -308,7 +337,7 @@ class BZgraflow extends Buildoz{
 
         // Force style flush, then animate back to identity (full parent size)
         childEl.getBoundingClientRect()
-        childEl.style.transition = 'transform 1000ms ease-in-out'
+        childEl.style.transition = `transform ${parseInt(this.getBZAttribute('tween')) || 500}ms ease-in-out`
         requestAnimationFrame(() => {
             childEl.style.top = 0;
             childEl.style.left = 0;
@@ -325,7 +354,10 @@ class BZgraflow extends Buildoz{
             childEl.style.transform = 'none' // Important for nested subflows to position correctly
             childEl.style.willChange = ''
             childEl.style.overflow = 'auto'
-            this.fireEvent('subflowLoaded', { subflow: childEl })
+            this.fireEvent('subflowLoaded', { 
+                parentNodeId: id, 
+                component: childEl 
+            })
         }, { once:true })
     }
 
@@ -400,7 +432,9 @@ class BZgraflow extends Buildoz{
             this.hostContainer.style.opacity = '1'
             this.hostContainer.style.visibility = 'visible'
             childEl.style.willChange = ''
-            this.fireEvent('subflowExited', { subflow: childEl })
+            this.fireEvent('subflowExited', {
+                component: this 
+            })
         }, { once:true })
     }
     
@@ -432,8 +466,8 @@ class BZgraflow extends Buildoz{
         this.stagedWires[id] = document.createElementNS('http://www.w3.org/2000/svg', 'path')
         this.stagedWires[id].setAttribute('d', path)
         this.stagedWires[id].setAttribute('fill', 'none')
-        if(this.arrowDefs && link.endArrow) this.stagedWires[id].setAttribute('marker-end','url(#arrow)')
+        if(this.arrowDefs && link.endArrow) this.stagedWires[id].setAttribute('marker-end',`url(#${this.arrowMarkerId})`)
-        if(this.arrowDefs && link.startArrow) this.stagedWires[id].setAttribute('marker-start','url(#arrow)')
+        if(this.arrowDefs && link.startArrow) this.stagedWires[id].setAttribute('marker-start',`url(#${this.arrowMarkerId})`)
         this.stagedWires[id].classList.add('bzgf-wire')
         this.stagedWires[id].dataset.id = id
         this.stagedWires[id].link = link
@@ -473,6 +507,13 @@ class BZgraflow extends Buildoz{
         }
         if(forceAutoplace) this.autoPlace(this.currentOrientation, parseInt(this.getBZAttribute('gapx')) || 80, parseInt(this.getBZAttribute('gapy')) || 80) 
         this.fireEvent('refreshed', { })
+        if(this.hasAttribute('autofit')){
+            const autofitAttr = this.getAttribute('autofit')
+            const autofitPercent = (autofitAttr !== null && autofitAttr !== '' && !Number.isNaN(parseFloat(autofitAttr)))
+                ? parseFloat(autofitAttr)
+                : undefined
+            this.autofit(autofitPercent)
+        }
     }
 
     // Convert viewport (client) coordinates to this instance's SVG local coordinates.
@@ -1188,15 +1229,50 @@ class BZgraflow extends Buildoz{
     }
 
     autofit(percent=100){ 
+        if(!this.parentElement) return
+
+        const prevTransformOrigin = this.style.transformOrigin
+        this.style.transform = 'none'
+        this.style.transformOrigin = 'top left'
+
+        // Measure real content by unioning viewport-space bounding boxes.
+        // This is robust with overflow:auto and absolute-positioned layers.
+        let left = Infinity
+        let top = Infinity
+        let right = -Infinity
+        let bottom = -Infinity
+
+        const includeBB = (bb) => {
+            if(!bb) return
+            left = Math.min(left, bb.left)
+            top = Math.min(top, bb.top)
+            right = Math.max(right, bb.right)
+            bottom = Math.max(bottom, bb.bottom)
+        }
+
+        this.nodesContainer?.querySelectorAll?.('.bzgf-node').forEach(nodeEl => includeBB(nodeEl.getBoundingClientRect()))
+        this.wiresContainer?.querySelectorAll?.('path.bzgf-wire').forEach(path => includeBB(path.getBoundingClientRect()))
+
         const parentBB = this.parentElement.getBoundingClientRect()
-        // Use scroll dimensions for actual content extent (nodes can extend beyond element bounds)
+        const gapx = parseInt(this.getBZAttribute('gapx')) || 80
-        const contentW = Math.max(this.scrollWidth || this.offsetWidth || 1, 1)
+        const gapy = parseInt(this.getBZAttribute('gapy')) || 80
-        const contentH = Math.max(this.scrollHeight || this.offsetHeight || 1, 1)
+        const rawW = Number.isFinite(left) && Number.isFinite(right) ? Math.max(right - left, 1) : Math.max(this.mainContainer?.clientWidth || this.offsetWidth || 1, 1)
+        const rawH = Number.isFinite(top) && Number.isFinite(bottom) ? Math.max(bottom - top, 1) : Math.max(this.mainContainer?.clientHeight || this.offsetHeight || 1, 1)
+        const contentW = rawW + (2 * gapx)
+        const contentH = rawH + (2 * gapy)
         const sx = parentBB.width / contentW
         const sy = parentBB.height / contentH
         const scale = Math.min(sx, sy)*(percent/100)  // uniform scale to fit inside parent
-        this.style.transformOrigin = 'top left'
+        const tx = Number.isFinite(left) ? (-left + gapx) : gapx
-        this.style.transform = `scale(${scale})`
+        const ty = Number.isFinite(top) ? (-top + gapy) : gapy
+        if(!this.isSubflow) {
+            this.style.transformOrigin = prevTransformOrigin || 'top left'
+            this.style.transform = `scale(${scale}) translate(${tx}px, ${ty}px)`
+        } else {
+            this.style.transform = `scale(${scale})`
+            this.style.width = `calc(100% / ${scale})` // means 100% of the parent node DESPITE the scaling
+            this.style.height = `calc(100% / ${scale})` // means 100% of the parent node DESPITE the scaling
+        }
     }
 }
 Buildoz.define('graflow', BZgraflow)

graflow_examples/test1.html

@@ -54,7 +54,7 @@
             window.addEventListener('load',()=>{
                 let grflw1 = document.querySelector('bz-graflow.compunet')
                 grflw1.addEventListener('bz:graflow:subflowLoaded',
-                    (evt) => { grflw1 = evt.detail.subflow }
+                    (evt) => { grflw1 = evt.detail.component }
                 )
                 grflw1.addEventListener('bz:graflow:subflowExited',
                     (evt) => { grflw1 = evt.target }

graflow_examples/test2.html

@@ -54,7 +54,7 @@
             window.addEventListener('load',()=>{
                 let grflw3 = document.querySelector('bz-graflow.organi')
                 grflw3.addEventListener('bz:graflow:subflowLoaded',
-                    (evt) => { grflw3 = evt.detail.subflow }
+                    (evt) => { grflw3 = evt.detail.component }
                 )
                 grflw3.addEventListener('bz:graflow:subflowExited',
                     (evt) => { grflw3 = evt.target }

graflow_examples/test3.html

@@ -57,7 +57,7 @@
                 grflw2.setAttribute('align', document.querySelector('select[name="align"]').value)
                 grflw2.setAttribute('wiretype', document.querySelector('select[name="wiretype"]').value)                  
                 grflw2.addEventListener('bz:graflow:subflowLoaded',
-                    (evt) => { grflw2 = evt.detail.subflow }
+                    (evt) => { grflw2 = evt.detail.component }
                 )
                 grflw2.addEventListener('bz:graflow:subflowExited',
                     (evt) => { grflw2 = evt.target }

graflow_examples/test4.5.html

@@ -57,7 +57,7 @@
                 grflw4.setAttribute('align', document.querySelector('select[name="align"]').value)
                 grflw4.setAttribute('wiretype', document.querySelector('select[name="wiretype"]').value)                
                 grflw4.addEventListener('bz:graflow:subflowLoaded',
-                    (evt) => { grflw4 = evt.detail.subflow }
+                    (evt) => { grflw4 = evt.detail.component }
                 )
                 grflw4.addEventListener('bz:graflow:subflowExited',
                     (evt) => { grflw4 = evt.target }

graflow_examples/test4.html

@@ -83,7 +83,7 @@
                 
                 let grflw4 = document.querySelector('bz-graflow.icmp')
                 grflw4.addEventListener('bz:graflow:subflowLoaded',
-                    (evt) => { grflw4 = evt.detail.subflow }
+                    (evt) => { grflw4 = evt.detail.component }
                 )
                 grflw4.addEventListener('bz:graflow:subflowExited',
                     (evt) => { grflw4 = evt.target }
@@ -110,7 +110,7 @@
                 ro.observe(el)
 
                 let aifmi = null; let sidx=0;
-                const sevanimation = () => { console.log('sevanimation')
+                const sevanimation = () => { 
                     severities.forEach(severity => aifmi.removeAttribute(severity))
                     aifmi.setAttribute(severities[sidx], '')
                     sidx++

graflow_examples/test5.html

@@ -54,7 +54,7 @@
             window.addEventListener('load',()=>{
                 let grflw1 = document.querySelector('bz-graflow.compunet')
                 grflw1.addEventListener('bz:graflow:subflowLoaded',
-                    (evt) => { grflw1 = evt.detail.subflow }
+                    (evt) => { grflw1 = evt.detail.component }
                 )
                 grflw1.addEventListener('bz:graflow:subflowExited',
                     (evt) => { grflw1 = evt.target }

graflow_examples/test6.html

@@ -57,7 +57,7 @@
                 grflw1.setAttribute('align', document.querySelector('select[name="align"]').value)
                 grflw1.setAttribute('wiretype', document.querySelector('select[name="wiretype"]').value)
                 grflw1.addEventListener('bz:graflow:subflowLoaded',
-                    (evt) => { grflw1 = evt.detail.subflow }
+                    (evt) => { grflw1 = evt.detail.component }
                 )
                 grflw1.addEventListener('bz:graflow:subflowExited',
                     (evt) => { grflw1 = evt.target }