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', { }) this.fireEvent('refreshed', { })
if(this.hasAttribute('autofit')){ if(this.hasAttribute('autofit')){
const autofitAttr = this.getAttribute('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) ? parseFloat(autofitAttr)
: undefined : undefined
if(this._canRunAutoPlace()) this.autofit(autofitPercent) if(this._canRunAutoPlace()) this.autofit(100, autofitTween)
else this._scheduleLayoutWhenReady(() => this.autofit(autofitPercent)) else this._scheduleLayoutWhenReady(() => this.autofit(100, autofitTween))
} }
} }
const onLayoutComplete = () => { const onLayoutComplete = () => {
@@ -1332,7 +1332,7 @@ class BZgraflow extends Buildoz{
return(crossLayerLinks) return(crossLayerLinks)
} }
autofit(percent=100){ autofit(percent=100, tween = 0){
const outwidth = Math.max(this.clientWidth, 1) const outwidth = Math.max(this.clientWidth, 1)
const outheight = Math.max(this.clientHeight, 1) const outheight = Math.max(this.clientHeight, 1)
let inwidth = this.nodesContainer.scrollWidth let inwidth = this.nodesContainer.scrollWidth
@@ -1347,6 +1347,11 @@ class BZgraflow extends Buildoz{
return return
} }
const ratio = Math.min( (outwidth / inwidth), (outheight / inheight) ) * (percent / 100) 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.nodesContainer.style.scale = ratio
this.wiresContainer.style.scale = ratio this.wiresContainer.style.scale = ratio
this.nodesContainer.style.transformOrigin = 'top left' this.nodesContainer.style.transformOrigin = 'top left'
graflow_examples/test3.html
+1 -1
View File
@@ -79,7 +79,7 @@
</head> </head>
<body> <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 --> <div class="demooptions"> <!-- just for demo purposes -->
<button data-trigger="onAutoplace2H">Auto-place Horizontal</button> <button data-trigger="onAutoplace2H">Auto-place Horizontal</button>
<button data-trigger="onAutoplace2V">Auto-place Vertical</button> <button data-trigger="onAutoplace2V">Auto-place Vertical</button>