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

graflow: added autoplace align 1st & last

Browse Source
This commit is contained in:
STEINNI
2026-02-21 22:24:10 +00:00
parent d9bdc34210
commit 91274c4542
2 changed files with 54 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/html/test.html
+36 -12
View File
@@ -56,47 +56,47 @@
window.addEventListener('load',()=>{ window.addEventListener('load',()=>{
const grflw1 = document.querySelector('bz-graflow.compunet') const grflw1 = document.querySelector('bz-graflow.compunet')
document.querySelector('[data-trigger="onAutoplace1H"]').addEventListener('click', document.querySelector('[data-trigger="onAutoplace1H"]').addEventListener('click',
(evt) => { grflw1.autoPlace('horizontal', 80, 30, 1000) } (evt) => { grflw1.autoPlace('horizontal', 80, 30, 1000, document.querySelector('[data-id="compunet"]').value) }
) )
document.querySelector('[data-trigger="onAutoplace1V"]').addEventListener('click', document.querySelector('[data-trigger="onAutoplace1V"]').addEventListener('click',
(evt) => { grflw1.autoPlace('vertical') } (evt) => { grflw1.autoPlace('vertical', 80, 30, 1000, document.querySelector('[data-id="compunet"]').value) }
) )
const grflw2 = document.querySelector('bz-graflow.eic') const grflw2 = document.querySelector('bz-graflow.eic')
document.querySelector('[data-trigger="onAutoplace2H"]').addEventListener('click', document.querySelector('[data-trigger="onAutoplace2H"]').addEventListener('click',
(evt) => { grflw2.autoPlace('horizontal', 100, 30, 1000) } (evt) => { grflw2.autoPlace('horizontal', 100, 30, 1000, document.querySelector('[data-id="eic"]').value) }
) )
document.querySelector('[data-trigger="onAutoplace2V"]').addEventListener('click', document.querySelector('[data-trigger="onAutoplace2V"]').addEventListener('click',
(evt) => { grflw2.autoPlace('vertical', 80, 80, 1000) } (evt) => { grflw2.autoPlace('vertical', 80, 80, 1000, document.querySelector('[data-id="eic"]').value) }
) )
const grflw3 = document.querySelector('bz-graflow.organi') const grflw3 = document.querySelector('bz-graflow.organi')
document.querySelector('[data-trigger="onAutoplace3H"]').addEventListener('click', document.querySelector('[data-trigger="onAutoplace3H"]').addEventListener('click',
(evt) => { grflw3.autoPlace('horizontal', 80, 80, 1000) } (evt) => { grflw3.autoPlace('horizontal', 80, 80, 1000, document.querySelector('[data-id="organi"]').value) }
) )
document.querySelector('[data-trigger="onAutoplace3V"]').addEventListener('click', document.querySelector('[data-trigger="onAutoplace3V"]').addEventListener('click',
(evt) => { grflw3.autoPlace('vertical', 80, 30, 1000) } (evt) => { grflw3.autoPlace('vertical', 80, 30, 1000, document.querySelector('[data-id="organi"]').value) }
) )
const grflw4 = document.querySelector('bz-graflow.icmp') const grflw4 = document.querySelector('bz-graflow.icmp')
document.querySelector('[data-trigger="onAutoplace4H"]').addEventListener('click', document.querySelector('[data-trigger="onAutoplace4H"]').addEventListener('click',
(evt) => { grflw4.autoPlace('horizontal', 100, 30, 1000) } (evt) => { grflw4.autoPlace('horizontal', 100, 30, 1000, document.querySelector('[data-id="icmp"]').value) }
) )
document.querySelector('[data-trigger="onAutoplace4V"]').addEventListener('click', document.querySelector('[data-trigger="onAutoplace4V"]').addEventListener('click',
(evt) => { grflw4.autoPlace('vertical', 80, 80, 1000) } (evt) => { grflw4.autoPlace('vertical', 80, 80, 1000, document.querySelector('[data-id="icmp"]').value) }
) )
document.querySelector('[data-id="compunet"]').addEventListener('change', document.querySelector('input[data-id="compunet"]').addEventListener('change',
(evt) => { grflw1.setAttribute('tension', evt.target.value); grflw1.refresh() } (evt) => { grflw1.setAttribute('tension', evt.target.value); grflw1.refresh() }
) )
document.querySelector('[data-id="eic"]').addEventListener('change', document.querySelector('input[data-id="eic"]').addEventListener('change',
(evt) => { grflw2.setAttribute('tension', evt.target.value); grflw2.refresh() } (evt) => { grflw2.setAttribute('tension', evt.target.value); grflw2.refresh() }
) )
document.querySelector('[data-id="organi"]').addEventListener('change', document.querySelector('input[data-id="organi"]').addEventListener('change',
(evt) => { grflw3.setAttribute('tension', evt.target.value); grflw3.refresh() } (evt) => { grflw3.setAttribute('tension', evt.target.value); grflw3.refresh() }
) )
document.querySelector('[data-id="icmp"]').addEventListener('change', document.querySelector('input[data-id="icmp"]').addEventListener('change',
(evt) => { grflw4.setAttribute('tension', evt.target.value); grflw4.refresh() } (evt) => { grflw4.setAttribute('tension', evt.target.value); grflw4.refresh() }
) )
}) })
@@ -108,6 +108,12 @@
<div class="demooptions"> <!-- just for demo purposes --> <div class="demooptions"> <!-- just for demo purposes -->
<button data-trigger="onAutoplace1H">Auto-place Horizontal</button> <button data-trigger="onAutoplace1H">Auto-place Horizontal</button>
<button data-trigger="onAutoplace1V">Auto-place Vertical</button> <button data-trigger="onAutoplace1V">Auto-place Vertical</button>
<select name="align" data-id="compunet">
<option value="center">Center</option>
<option value="first">First</option>
<option value="last">Last</option>
<option value="auto">Auto</option>
</select>
<div class-"cols-2"=""><label>tension</label><input data-id="compunet" type="number" size="2" value="60"></div> <div class-"cols-2"=""><label>tension</label><input data-id="compunet" type="number" size="2" value="60"></div>
</div> </div>
</bz-graflow> </bz-graflow>
@@ -116,6 +122,12 @@
<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>
<select name="align" data-id="eic">
<option value="center">Center</option>
<option value="first">First</option>
<option value="last">Last</option>
<option value="auto">Auto</option>
</select>
<div class-"cols-2"=""><label>tension</label><input data-id="eic" type="number" size="2" value="60"></div> <div class-"cols-2"=""><label>tension</label><input data-id="eic" type="number" size="2" value="60"></div>
</div> </div>
</bz-graflow> </bz-graflow>
@@ -124,6 +136,12 @@
<div class="demooptions"> <div class="demooptions">
<button data-trigger="onAutoplace3H">Auto-place Horizontal</button> <button data-trigger="onAutoplace3H">Auto-place Horizontal</button>
<button data-trigger="onAutoplace3V">Auto-place Vertical</button> <button data-trigger="onAutoplace3V">Auto-place Vertical</button>
<select name="align" data-id="organi">
<option value="center">Center</option>
<option value="first">First</option>
<option value="last">Last</option>
<option value="auto">Auto</option>
</select>
<div class-"cols-2"=""><label>tension</label><input data-id="organi" type="number" size="2" value="60"></div> <div class-"cols-2"=""><label>tension</label><input data-id="organi" type="number" size="2" value="60"></div>
</div> </div>
</bz-graflow> </bz-graflow>
@@ -133,6 +151,12 @@
<div class="demooptions"> <!-- just for demo purposes --> <div class="demooptions"> <!-- just for demo purposes -->
<button data-trigger="onAutoplace4H">Auto-place Horizontal</button> <button data-trigger="onAutoplace4H">Auto-place Horizontal</button>
<button data-trigger="onAutoplace4V">Auto-place Vertical</button> <button data-trigger="onAutoplace4V">Auto-place Vertical</button>
<select name="align" data-id="icmp">
<option value="center">Center</option>
<option value="first">First</option>
<option value="last">Last</option>
<option value="auto">Auto</option>
</select>
<div class-"cols-2"=""><label>tension</label><input data-id="icmp" type="number" size="2" value="60"></div> <div class-"cols-2"=""><label>tension</label><input data-id="icmp" type="number" size="2" value="60"></div>
</div> </div>
</bz-graflow> </bz-graflow>
app/thirdparty/buildoz/bzGraflow.js
Vendored
+18 -2
View File
@@ -396,7 +396,8 @@ class BZgraflow extends Buildoz{
return(path) return(path)
} }
autoPlace(orientation = 'horizontal', gapx = 80, gapy = 80, tween=1000){ autoPlace(orientation = 'horizontal', gapx = 80, gapy = 80, tween=1000, align='center'){
console.log('autoPlace', orientation, gapx, gapy, tween, align)
// Loops create infinite recursion in dfs for getting parents & adjacency lists: Remove them ! // Loops create infinite recursion in dfs for getting parents & adjacency lists: Remove them !
let linksWithoutBackEdges let linksWithoutBackEdges
if(this.hasAnyLoop(this.flow.nodes, this.flow.links)){ if(this.hasAnyLoop(this.flow.nodes, this.flow.links)){
@@ -462,7 +463,22 @@ class BZgraflow extends Buildoz{
let x = gapx let x = gapx
for(const [idx, layer] of layers.entries()){ for(const [idx, layer] of layers.entries()){
let wMax = this.getMaxWidth(layer) let wMax = this.getMaxWidth(layer)
let y = ((maxHeight - layerHeights[idx]) / 2) + gapy let y = 0
switch(align){
case'center':
y = ((maxHeight - layerHeights[idx]) / 2) + gapy
break
case'first':
y = gapy
break
case'last':
y = maxHeight - layerHeights[idx] + gapy
break
case 'auto':
//TODO
y = ((maxHeight - layerHeights[idx]) / 2) + gapy
break
}
for(const nid of layer){ for(const nid of layer){
if(!nid.startsWith('longLinkPlaceHolder_')) { if(!nid.startsWith('longLinkPlaceHolder_')) {
const bb = this.stagedNodes[nid].getBoundingClientRect() const bb = this.stagedNodes[nid].getBoundingClientRect()