diff --git a/bzGraflow.js b/bzGraflow.js index 17247ae..375961a 100644 --- a/bzGraflow.js +++ b/bzGraflow.js @@ -511,11 +511,11 @@ class BZgraflow extends Buildoz{ this.fireEvent('refreshed', { }) if(this.hasAttribute('autofit')){ const autofitAttr = this.getAttribute('autofit') - const autofitPercent = (autofitAttr !== null && autofitAttr !== '' && !Number.isNaN(parseFloat(autofitAttr))) + const autofitTween = (autofitAttr !== null && autofitAttr !== '' && !Number.isNaN(parseFloat(autofitAttr))) ? parseFloat(autofitAttr) : undefined - if(this._canRunAutoPlace()) this.autofit(autofitPercent) - else this._scheduleLayoutWhenReady(() => this.autofit(autofitPercent)) + if(this._canRunAutoPlace()) this.autofit(100, autofitTween) + else this._scheduleLayoutWhenReady(() => this.autofit(100, autofitTween)) } } const onLayoutComplete = () => { @@ -1332,7 +1332,7 @@ class BZgraflow extends Buildoz{ return(crossLayerLinks) } - autofit(percent=100){ + autofit(percent=100, tween = 0){ const outwidth = Math.max(this.clientWidth, 1) const outheight = Math.max(this.clientHeight, 1) let inwidth = this.nodesContainer.scrollWidth @@ -1347,6 +1347,11 @@ class BZgraflow extends Buildoz{ return } const ratio = Math.min( (outwidth / inwidth), (outheight / inheight) ) * (percent / 100) + if(tween > 0){ + const transition = `scale ${tween}ms ease-in-out` + this.nodesContainer.style.transition = transition + this.wiresContainer.style.transition = transition + } this.nodesContainer.style.scale = ratio this.wiresContainer.style.scale = ratio this.nodesContainer.style.transformOrigin = 'top left' diff --git a/graflow_examples/test3.html b/graflow_examples/test3.html index b7847bb..f227087 100644 --- a/graflow_examples/test3.html +++ b/graflow_examples/test3.html @@ -79,7 +79,7 @@ - +