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

corrected vertical autoplace spacing

Browse Source
This commit is contained in:
STEINNI
2026-01-14 19:57:50 +00:00
parent d0c3155192
commit 26ec138084
3 changed files with 10 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/html/bzGraflow/nodesTest2.html
+5 -5
View File
@@ -56,14 +56,14 @@
} }
.bzgf-node[data-nodetype="condition"] .frame{ .bzgf-node[data-nodetype="condition"] .frame{
border: 1px solid white; border: 1px solid white;
transform: rotate(-45deg); transform: rotate(-45deg) scale(0.7071);
position: absolute; position: absolute;
inset: 0; inset: 0;
} }
.bzgf-node[data-nodetype="condition"] .port[data-direction="w"]{ left: -28px; } .bzgf-node[data-nodetype="condition"] .port[data-direction="w"]{ left: -5px; }
.bzgf-node[data-nodetype="condition"] [data-direction="e"]{ right: -28px; } .bzgf-node[data-nodetype="condition"] [data-direction="e"]{ right: -5px; }
.bzgf-node[data-nodetype="condition"] [data-direction="n"]{ top: -28px; } .bzgf-node[data-nodetype="condition"] [data-direction="n"]{ top: -5px; }
.bzgf-node[data-nodetype="condition"] [data-direction="s"]{ bottom: -28px; } .bzgf-node[data-nodetype="condition"] [data-direction="s"]{ bottom: -5px; }
.bzgf-node[data-nodetype="process"]{ .bzgf-node[data-nodetype="process"]{
border: 1px solid white; border: 1px solid white;
app/assets/html/test.html
+2 -2
View File
@@ -42,7 +42,7 @@
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') } (evt) => { grflw1.autoPlace('horizontal', 80, 30, 1000) }
) )
document.querySelector('[data-trigger="onAutoplace1V"]').addEventListener('click', document.querySelector('[data-trigger="onAutoplace1V"]').addEventListener('click',
(evt) => { grflw1.autoPlace('vertical') } (evt) => { grflw1.autoPlace('vertical') }
@@ -61,7 +61,7 @@
(evt) => { grflw3.autoPlace('horizontal', 80, 80, 1000) } (evt) => { grflw3.autoPlace('horizontal', 80, 80, 1000) }
) )
document.querySelector('[data-trigger="onAutoplace3V"]').addEventListener('click', document.querySelector('[data-trigger="onAutoplace3V"]').addEventListener('click',
(evt) => { grflw3.autoPlace('vertical', 80, 80, 1000) } (evt) => { grflw3.autoPlace('vertical', 80, 50, 1000) }
) )
}) })
</script> </script>
app/thirdparty/buildoz/bzGraflow.js
Vendored
+3 -5
View File
@@ -193,7 +193,7 @@ class BZgraflow extends Buildoz{
return `M ${x1} ${y1} C ${c1x} ${c1y}, ${c2x} ${c2y}, ${x2} ${y2}` return `M ${x1} ${y1} C ${c1x} ${c1y}, ${c2x} ${c2y}, ${x2} ${y2}`
} }
autoPlace(orientation = 'horizontal', gapx = 80, gapy = 30, tween=1000){ autoPlace(orientation = 'horizontal', gapx = 80, gapy = 80, tween=1000){
let linksWithoutBackEdges let linksWithoutBackEdges
if(this.hasAnyLoop(this.flow.nodes, this.flow.links)){ if(this.hasAnyLoop(this.flow.nodes, this.flow.links)){
console.warn('Loop(s) detected... Cannot auto-place !') console.warn('Loop(s) detected... Cannot auto-place !')
@@ -217,10 +217,7 @@ class BZgraflow extends Buildoz{
parents[to].push(from) parents[to].push(from)
adj[from].push(to) adj[from].push(to)
}) })
console.log('===LinksWithoutBackEdges:===>', linksWithoutBackEdges)
console.log('===Parents:===>', parents)
console.log('===Adj:===>', adj)
const layers = this.computeLayers(this.flow.nodes, parents) const layers = this.computeLayers(this.flow.nodes, parents)
let maxHeight = 0; let maxWidth = 0 let maxHeight = 0; let maxWidth = 0
const layerHeights = []; const layerWidths = []; const layerHeights = []; const layerWidths = [];
@@ -261,11 +258,12 @@ class BZgraflow extends Buildoz{
let x = ((maxWidth - layerWidths[idx]) / 2) + gapx let x = ((maxWidth - layerWidths[idx]) / 2) + gapx
for(const nid of layer){ for(const nid of layer){
const bb = this.stagedNodes[nid].getBoundingClientRect() const bb = this.stagedNodes[nid].getBoundingClientRect()
hMax = (bb.height > hMax) ? bb.width : hMax hMax = (bb.height > hMax) ? bb.height : hMax
this.moveNode(nid, x, y, tween) this.moveNode(nid, x, y, tween)
x += gapx + bb.width x += gapx + bb.width
} }
y += hMax + gapy y += hMax + gapy
console.log(y, hMax, gapy )
} }
} }
} }