diff --git a/bzGraflow.js b/bzGraflow.js index 1eb2c91..57e0d60 100644 --- a/bzGraflow.js +++ b/bzGraflow.js @@ -235,25 +235,6 @@ class BZgraflow extends Buildoz{ const childEl = document.createElement('bz-graflow') childEl.isSubflow = true childEl.currentOrientation = this.currentOrientation - if(flowNode.subflow.url) childEl.setAttribute('flow', flowNode.subflow.url) - else { - childEl.addEventListener('bz:graflow:domConnected', (e) => { - e.detail.graflow.loadFlow(flowNode.subflow.flow) - }) - } - - 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') - btnExitSubflow.classList.add('bzgf-zoom-out') - this.addIcon(btnExitSubflow, 'zoomout') - btnExitSubflow.addEventListener('click', () => { - this.exitSubflow(childEl) - }) - // Put the child in the exact same viewport rect as the parent - this.invade(this, childEl) - childEl.hostContainer.appendChild(btnExitSubflow) childEl.addEventListener('bz:graflow:flowLoaded', (e) => { for(const portLink of flowNode.subflow.portLinks){ @@ -279,6 +260,28 @@ class BZgraflow extends Buildoz{ childEl.autoPlace(this.currentOrientation, parseInt(this.getBZAttribute('gapx')) || 80, parseInt(this.getBZAttribute('gapy')) || 80) }, { once:true }) + if(flowNode.subflow.url) childEl.setAttribute('flow', flowNode.subflow.url) + else { + childEl.addEventListener('bz:graflow:domConnected', async (e) => { + await childEl.loadFlow(flowNode.subflow.flow) + }) + } + + 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') + btnExitSubflow.classList.add('bzgf-zoom-out') + this.addIcon(btnExitSubflow, 'zoomout') + btnExitSubflow.addEventListener('click', () => { + this.exitSubflow(childEl) + }) + // Put the child in the exact same viewport rect as the parent + this.invade(this, childEl) + childEl.hostContainer.appendChild(btnExitSubflow) + +///////////////////// + // Fade out the current (host) graflow while the child scales up this.hostContainer.style.opacity = '1' this.hostContainer.style.transition = 'opacity 1000ms ease-in-out'