graflow: subflow polishing

bzGraflow.js

@@ -202,30 +202,25 @@ class BZgraflow extends Buildoz{
         const parentBB = this.getBoundingClientRect()
 
         const flowNode = this.flow?.nodes?.find(n => n.id === id)
-        const flowUrl = flowNode?.subflow 
+        const flowUrl = flowNode.subflow.url
 
         const childEl = document.createElement('bz-graflow')
         childEl.setAttribute('flow', flowUrl)
         childEl.setAttribute('tension', this.getBZAttribute('tension') || '60')
         // Remember which node we "came from" so exitSubflow() can animate back to it.
         childEl.dataset.enterNodeId = id
-        // Match the clicked node's border so the transition feels like we're "expanding" it.
-        const nodeStyle = getComputedStyle(nodeEl)
-        childEl.style.border = nodeStyle.border
-        childEl.style.borderRadius = nodeStyle.borderRadius
-        childEl.style.backgroundColor = nodeStyle.backgroundColor
         const btnExitSubflow = document.createElement('button')
         btnExitSubflow.classList.add('bzgf-zoom-out')
         this.addIcon(btnExitSubflow, 'zoomout')
         btnExitSubflow.addEventListener('click', () => {
             this.exitSubflow(childEl)
         })
-        childEl.appendChild(btnExitSubflow)
         // Put the child in the exact same viewport rect as the parent (fixed overlay)
         this.invade(this, childEl)
+        childEl.hostContainer.appendChild(btnExitSubflow)
 
         childEl.addEventListener('flowLoaded', (e) => {
-            for(const portLink of flowNode.portLinks){
+            for(const portLink of flowNode.subflow.portLinks){
                 const nid = crypto.randomUUID()
                 childEl.addNode({   
                     "nodeType": portLink.refNodeType,
@@ -280,6 +275,12 @@ class BZgraflow extends Buildoz{
         childEl.addEventListener('transitionend', (e) => {
             if(e.propertyName !== 'transform') return
             this.hostContainer.style.visibility = 'hidden'
+            // Important for nested subflows:
+            // A non-'none' transform on this element creates a containing block, which would make
+            // any nested `position:fixed` subflow overlay position relative to this element instead
+            // of the viewport (showing up as an extra offset like 8px).
+            childEl.style.transform = 'none'
+            childEl.style.willChange = ''
             this.dispatchEvent(new CustomEvent('subflowLoaded', {
                 detail: { flowUrl },
                 bubbles: true,
@@ -330,7 +331,14 @@ class BZgraflow extends Buildoz{
         this.hostContainer.style.opacity = '0'
         this.hostContainer.style.transition = `opacity ${durMs}ms ease-in-out`
 
-        // Ensure child animates (it should already have the transform transition set)
+        // Ensure child animates (it may have had transform cleared after enter)
+        childEl.style.transformOrigin = 'top left'
+        childEl.style.willChange = 'transform'
+        childEl.style.transform = 'translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--sx, 1), var(--sy, 1))'
+        childEl.style.setProperty('--tx', '0px')
+        childEl.style.setProperty('--ty', '0px')
+        childEl.style.setProperty('--sx', 1)
+        childEl.style.setProperty('--sy', 1)
         childEl.style.transition = `transform ${durMs}ms ease-in-out`
         childEl.getBoundingClientRect() // flush
 
@@ -350,6 +358,12 @@ class BZgraflow extends Buildoz{
             // Cleanup: ensure parent is fully visible and no longer hidden
             this.hostContainer.style.opacity = '1'
             this.hostContainer.style.visibility = 'visible'
+            childEl.style.willChange = ''
+            this.dispatchEvent(new CustomEvent('subflowExited', {
+                detail: { },
+                bubbles: true,
+                composed: true,
+            }))
         }, { once:true })
     }