nike/buildoz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

graflow: improved subflow zoom-in

Browse Source
This commit is contained in:
STEINNI
2026-03-07 15:15:07 +00:00
parent 56c2052f40
commit 20523ce0aa
1 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
bzGraflow.js
View File

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