graflow: improved subflow zoom-in

bzGraflow.js

@@ -225,7 +225,7 @@ class BZgraflow extends Buildoz{
         btnExitSubflow.addEventListener('click', () => {
             this.exitSubflow(childEl)
         })
-        // Put the child in the exact same viewport rect as the parent (fixed overlay)
+        // Put the child in the exact same viewport rect as the parent 
         this.invade(this, childEl)
         childEl.hostContainer.appendChild(btnExitSubflow)
 
@@ -266,9 +266,9 @@ class BZgraflow extends Buildoz{
         const ty0 = (nodeBB.top  - parentBB.top)  + (this.scrollTop  || 0)
 
         // Inline "scaler" (shadow styles don't apply to the child element)
+        childEl.style.border = 'none'
         childEl.style.transformOrigin = 'top left'
         childEl.style.willChange = 'transform'
-        childEl.style.transition = 'transform 1000ms ease-in-out'
         childEl.style.transform = 'translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--sx, 1), var(--sy, 1))'
         childEl.style.setProperty('--tx', tx0 + 'px')
         childEl.style.setProperty('--ty', ty0 + 'px')
@@ -277,7 +277,10 @@ 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'
         requestAnimationFrame(() => {
+            childEl.style.top = 0;
+            childEl.style.left = 0;
             childEl.style.setProperty('--tx', '0px')
             childEl.style.setProperty('--ty', '0px')
             childEl.style.setProperty('--sx', 1)
@@ -290,6 +293,7 @@ class BZgraflow extends Buildoz{
             this.hostContainer.style.visibility = 'hidden'
             childEl.style.transform = 'none' // Important for nested subflows to position correctly
             childEl.style.willChange = ''
+            newEl.style.overflow = 'auto'
             this.dispatchEvent(new CustomEvent('subflowLoaded', {
                 detail: { subflow: childEl },
                 bubbles: true,
@@ -299,16 +303,14 @@ class BZgraflow extends Buildoz{
     }
 
     invade(oldEl, newEl){
-        // Scroll-proof overlay: position inside oldEl so it follows oldEl scrolling.
-        // Ensure oldEl is a positioning context.
-        const pos = getComputedStyle(oldEl).position
-        if(pos === 'static') oldEl.style.position = 'relative'
         newEl.style.position = 'absolute'
-        newEl.style.inset = '0'
-        // Override bz-graflow's default width/height (100vw/50vh) when used as an embedded overlay
-        newEl.style.width = '100%'
-        newEl.style.height = '100%'
+        const bbox = oldEl.getBoundingClientRect()
+        newEl.style.left = `${bbox.left+bbox.width/2}px`
+        newEl.style.top = `${bbox.top+bbox.height/2}px`
+        newEl.style.width = `${bbox.width}px`
+        newEl.style.height = `${bbox.height}px`
         newEl.style.display = 'block'
+        newEl.style.overflow = 'hidden'
         oldEl.appendChild(newEl)
     }