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

graflow: align parent

Browse Source
This commit is contained in:
STEINNI
2026-03-06 20:14:35 +00:00
parent 24aad6bbf6
commit 124bae719b
8 changed files with 57 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/html/test1.html
+1 -1
View File
@@ -84,7 +84,7 @@
<option value="center">Center</option> <option value="center">Center</option>
<option value="first">First</option> <option value="first">First</option>
<option value="last">Last</option> <option value="last">Last</option>
<option value="auto">Auto</option> <option value="parent">Parent</option>
</select> </select>
<select name="wiretype"> <select name="wiretype">
<option value="ortho">Ortho</option> <option value="ortho">Ortho</option>
app/assets/html/test2.html
+1 -1
View File
@@ -84,7 +84,7 @@
<option value="center">Center</option> <option value="center">Center</option>
<option value="first">First</option> <option value="first">First</option>
<option value="last">Last</option> <option value="last">Last</option>
<option value="auto">Auto</option> <option value="parent">Parent</option>
</select> </select>
<select name="wiretype"> <select name="wiretype">
<option value="ortho">Ortho</option> <option value="ortho">Ortho</option>
app/assets/html/test3.html
+1 -1
View File
@@ -84,7 +84,7 @@
<option value="center">Center</option> <option value="center">Center</option>
<option value="first">First</option> <option value="first">First</option>
<option value="last">Last</option> <option value="last">Last</option>
<option value="auto">Auto</option> <option value="parent">Parent</option>
</select> </select>
<select name="wiretype"> <select name="wiretype">
<option value="ortho">Ortho</option> <option value="ortho">Ortho</option>
app/assets/html/test4.5.html
+6 -6
View File
@@ -76,22 +76,22 @@
</head> </head>
<body> <body>
<bz-graflow class="icmp" flow="/app/assets/json/bzGraflow/testFlowICMP2.json" tension="60" align="first" wiretype="ortho" gapx="100" gapy="30"> <bz-graflow class="icmp" flow="/app/assets/json/bzGraflow/testFlowICMP2.json" tension="20" align="first" wiretype="ortho" gapx="100" gapy="30">
<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"> <select name="align" data-id="icmp">
<option value="center">Center</option> <option value="center">Center</option>
<option value="first">First</option> <option value="first" selected>First</option>
<option value="last">Last</option> <option value="last">Last</option>
<option value="auto">Auto</option> <option value="parent">Parent</option>
</select> </select>
<select name="wiretype"> <select name="wiretype">
<option value="ortho">Ortho</option> <option value="ortho" selected>Ortho</option>
<option value="straight">Straight</option> <option value="straight">Straight</option>
<option value="bezier" selected>Bezier</option> <option value="bezier">Bezier</option>
</select> </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="20"></div>
</div> </div>
</bz-graflow> </bz-graflow>
</body> </body>
app/assets/html/test4.html
+1 -1
View File
@@ -84,7 +84,7 @@
<option value="center">Center</option> <option value="center">Center</option>
<option value="first">First</option> <option value="first">First</option>
<option value="last">Last</option> <option value="last">Last</option>
<option value="auto">Auto</option> <option value="parent">Parent</option>
</select> </select>
<select name="wiretype"> <select name="wiretype">
<option value="ortho">Ortho</option> <option value="ortho">Ortho</option>
app/assets/html/test5.html
+1 -1
View File
@@ -84,7 +84,7 @@
<option value="center">Center</option> <option value="center">Center</option>
<option value="first">First</option> <option value="first">First</option>
<option value="last">Last</option> <option value="last">Last</option>
<option value="auto">Auto</option> <option value="parent">Parent</option>
</select> </select>
<select name="wiretype"> <select name="wiretype">
<option value="ortho">Ortho</option> <option value="ortho">Ortho</option>
app/assets/html/test6.html
+1 -1
View File
@@ -86,7 +86,7 @@
<option value="center">Center</option> <option value="center">Center</option>
<option value="first">First</option> <option value="first">First</option>
<option value="last">Last</option> <option value="last">Last</option>
<option value="auto">Auto</option> <option value="parent">Parent</option>
</select> </select>
<select name="wiretype"> <select name="wiretype">
<option value="ortho">Ortho</option> <option value="ortho">Ortho</option>
app/thirdparty/buildoz/bzGraflow.js
Vendored
+44 -8
View File
@@ -728,35 +728,57 @@ class BZgraflow extends Buildoz{
// Finally place everything // Finally place everything
if(orientation=='horizontal'){ if(orientation=='horizontal'){
const fakeNodeHeight = 10 const fakeNodeHeight = 10
const parentsY = {}
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 = 0 let y = 0
switch(align){ switch(align){
case'center': case 'center':
y = ((maxHeight - layerHeights[idx]) / 2) + gapy y = ((maxHeight - layerHeights[idx]) / 2) + gapy
break break
case'first': case 'first':
y = gapy y = gapy
break break
case'last': case 'last':
y = maxHeight - layerHeights[idx] + gapy y = maxHeight - layerHeights[idx] + gapy
break break
case 'auto': case 'parent': // y will be absolutely positioned by the parent(s) but have fallback for 1st layer
//TODO
y = ((maxHeight - layerHeights[idx]) / 2) + gapy y = ((maxHeight - layerHeights[idx]) / 2) + gapy
break break
} }
for(const nid of layer){ for(const nid of layer){
let placedY
if(!nid.startsWith('longLinkPlaceHolder_')) { if(!nid.startsWith('longLinkPlaceHolder_')) {
const bb = this.stagedNodes[nid].getBoundingClientRect() const bb = this.stagedNodes[nid].getBoundingClientRect()
const nodeHeight = this.stagedNodes[nid].offsetHeight || bb.height
if((align == 'parent') && (nid in parents) && (parents[nid][0] in parentsY)) {
y = Math.max(parentsY[parents[nid][0]], y) //TODO handle multiple parents with avg
console.log('parent', nid, parents[nid], parentsY[parents[nid][0]])
}
placedY = y
this.moveNode(nid, x, y, orientation, tween, null, token) this.moveNode(nid, x, y, orientation, tween, null, token)
y += gapy + (this.stagedNodes[nid].offsetHeight || bb.height) if((align == 'parent') && (nid in parents) && (parents[nid][0] in parentsY)) {
parentsY[parents[nid][0]] += gapy + nodeHeight
} else {
y += gapy + nodeHeight
}
y = Math.max(y, placedY + gapy + nodeHeight)
} else { } else {
if((align == 'parent') && (nid in parents) && (parents[nid][0] in parentsY)) {
y = Math.max(parentsY[parents[nid][0]], y)
}
placedY = y
this.addFakeNode(nid, x, y, wMax*0.75, fakeNodeHeight) this.addFakeNode(nid, x, y, wMax*0.75, fakeNodeHeight)
this.moveNode(nid, x, y, orientation, tween, null, token) this.moveNode(nid, x, y, orientation, tween, null, token)
y += gapy + fakeNodeHeight if((align == 'parent') && (nid in parents) && (parents[nid][0] in parentsY)) {
parentsY[parents[nid][0]] += gapy + fakeNodeHeight
} else {
y += gapy + fakeNodeHeight
}
y = Math.max(y, placedY + gapy + fakeNodeHeight)
} }
parentsY[nid] = placedY
} }
x += wMax + gapx x += wMax + gapx
} }
@@ -765,7 +787,21 @@ class BZgraflow extends Buildoz{
let y = gapy let y = gapy
for(const [idx, layer] of layers.entries()){ for(const [idx, layer] of layers.entries()){
let hMax = this.getMaxHeight(layer) let hMax = this.getMaxHeight(layer)
let x = ((maxWidth - layerWidths[idx]) / 2) + gapx let x = 0
switch(align){
case 'center':
x = ((maxWidth - layerWidths[idx]) / 2) + gapx
break
case 'first':
x = gapx
break
case 'last':
x = maxWidth - layerWidths[idx] + gapx
break
case 'parent': // x will be absolutely positioned by the parent(s)
//TODO
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()