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

Graflow: Added tween to autofit

Browse Source
This commit is contained in:
STEINNI
2026-07-30 08:48:55 +00:00
parent 47f4e3e6c8
commit 43cd6a85b1
2 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bzGraflow.js
+9 -4
View File
@@ -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'
graflow_examples/test3.html
+1 -1
View File
@@ -79,7 +79,7 @@
</head>
<body>
<bz-graflow class="eic" flow="./flows/testFlowEic.json" tension="60">
<bz-graflow class="eic" flow="./flows/testFlowEic.json" tension="60" autofit="500">
<div class="demooptions"> <!-- just for demo purposes -->
<button data-trigger="onAutoplace2H">Auto-place Horizontal</button>
<button data-trigger="onAutoplace2V">Auto-place Vertical</button>