P42/P42_UI
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

graflow: autofit OK

Browse Source
This commit is contained in:
STEINNI
2026-03-07 18:36:01 +00:00
parent 61855a3416
commit a967576d4b
2 changed files with 52 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/html/test4.html
+41 -19
View File
@@ -49,6 +49,14 @@
border: 2px solid black; border: 2px solid black;
} }
bz-graflow.icmp{ grid-column: 1 / -1; width: 100vw; height: 80vh; background: var(--eicui-base-color-grey-10); } bz-graflow.icmp{ grid-column: 1 / -1; width: 100vw; height: 80vh; background: var(--eicui-base-color-grey-10); }
.container {
resize: both;
overflow: auto; /* required in practice */
min-width: 800px;
min-height: 300px;
border: 1px solid #999;
padding: 1rem;
}
</style> </style>
<script> <script>
window.addEventListener('load',()=>{ window.addEventListener('load',()=>{
@@ -70,29 +78,43 @@
) )
document.querySelector('select[name="wiretype"]').addEventListener('change', document.querySelector('select[name="wiretype"]').addEventListener('change',
(evt) => { grflw4.setAttribute('wiretype', evt.target.value); grflw4.refresh() } (evt) => { grflw4.setAttribute('wiretype', evt.target.value); grflw4.refresh() }
) )
const el = document.querySelector('.container')
let timer = null // debounce
const ro = new ResizeObserver(([entry]) => {
clearTimeout(timer)
timer = setTimeout(() => {
const grfl = entry.target.querySelector('bz-graflow')
grfl.autofit()
}, 200)
})
ro.observe(el)
}) })
</script> </script>
</head> </head>
<body> <body>
<bz-graflow class="icmp" flow="/app/assets/json/bzGraflow/testFlowICMP.json" tension="60"> <div class="container">
<div class="demooptions"> <!-- just for demo purposes --> <bz-graflow class="icmp" flow="/app/assets/json/bzGraflow/testFlowICMP.json" tension="60">
<button data-trigger="onAutoplace4H">Auto-place Horizontal</button> <div class="demooptions">
<button data-trigger="onAutoplace4V">Auto-place Vertical</button> <button data-trigger="onAutoplace4H">Auto-place Horizontal</button>
<select name="align" data-id="icmp"> <button data-trigger="onAutoplace4V">Auto-place Vertical</button>
<option value="center">Center</option> <select name="align" data-id="icmp">
<option value="first">First</option> <option value="center">Center</option>
<option value="last">Last</option> <option value="first">First</option>
<option value="parent">Parent</option> <option value="last">Last</option>
</select> <option value="parent">Parent</option>
<select name="wiretype"> </select>
<option value="ortho">Ortho</option> <select name="wiretype">
<option value="straight">Straight</option> <option value="ortho">Ortho</option>
<option value="bezier" selected>Bezier</option> <option value="straight">Straight</option>
</select> <option value="bezier" selected>Bezier</option>
<div class-"cols-2"=""><label>tension</label><input data-id="icmp" type="number" size="2" value="60"></div> </select>
</div> <div class-"cols-2"=""><label>tension</label><input data-id="icmp" type="number" size="2" value="60"></div>
</bz-graflow> </div>
</bz-graflow>
</div>
</body> </body>
</html> </html>
app/thirdparty/buildoz/bzGraflow.js
Vendored
+11 -2
View File
@@ -629,8 +629,6 @@ class BZgraflow extends Buildoz{
if(tween == null) tween = parseInt(this.getBZAttribute('tween')) || 500 if(tween == null) tween = parseInt(this.getBZAttribute('tween')) || 500
if(align == null) align = this.getBZAttribute('align') || 'center' if(align == null) align = this.getBZAttribute('align') || 'center'
console.log('autoPlace', orientation, gapx, gapy, tween, align)
this.currentOrientation = orientation this.currentOrientation = orientation
// Cancel any previous autoPlace() animations by bumping a token. // Cancel any previous autoPlace() animations by bumping a token.
// moveNode() checks this token each frame and will no-op if superseded. // moveNode() checks this token each frame and will no-op if superseded.
@@ -1147,6 +1145,17 @@ class BZgraflow extends Buildoz{
return(crossLayerLinks) return(crossLayerLinks)
} }
autofit(){
const parentBB = this.parentElement.getBoundingClientRect()
// Use scroll dimensions for actual content extent (nodes can extend beyond element bounds)
const contentW = Math.max(this.scrollWidth || this.offsetWidth || 1, 1)
const contentH = Math.max(this.scrollHeight || this.offsetHeight || 1, 1)
const sx = parentBB.width / contentW
const sy = parentBB.height / contentH
const scale = Math.min(sx, sy) // uniform scale to fit inside parent
this.style.transformOrigin = 'top left'
this.style.transform = `scale(${scale})`
}
} }
Buildoz.define('graflow', BZgraflow) Buildoz.define('graflow', BZgraflow)