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

graflow: source grooming + demo panels subflow compatible

Browse Source
This commit is contained in:
STEINNI
2026-02-28 11:14:04 +00:00
parent 3e0faa4866
commit 8be5751107
2 changed files with 41 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/html/test.html
+25 -13
View File
@@ -49,23 +49,17 @@
border: 2px solid black;
}
bz-graflow.compunet{ grid-column: 1 / -1; width: 80vw; height: 40vh; background:black; }
bz-graflow.eic{ grid-column: 1 / -1; width: 80vw; height: 30vh; background: var(--eicui-base-color-grey-10); }
bz-graflow.eic{ grid-column: 1 / -1; width: 80vw; height: 50vh; background: var(--eicui-base-color-grey-10); }
bz-graflow.organi{ width: 40vw; height: 100vh; background:black; }
</style>
<script>
window.addEventListener('load',()=>{
const grflw1 = document.querySelector('bz-graflow.compunet')
let grflw1 = document.querySelector('bz-graflow.compunet')
grflw1.addEventListener('subflowLoaded',
(evt) => {
const demoPanel = evt.target.querySelector('.demooptions')
if(demoPanel) demoPanel.style.display = 'none';
}
(evt) => { grflw1 = evt.detail.subflow }
)
grflw1.addEventListener('subflowExited',
(evt) => {
const demoPanel = evt.target.querySelector('.demooptions')
if(demoPanel) demoPanel.style.display = 'block';
}
(evt) => { grflw1 = evt.target }
)
document.querySelector('[data-trigger="onAutoplace1H"]').addEventListener('click',
(evt) => { grflw1.autoPlace('horizontal', 80, 30, 1000, document.querySelector('[data-id="compunet"]').value) }
@@ -74,7 +68,13 @@
(evt) => { grflw1.autoPlace('vertical', 80, 30, 1000, document.querySelector('[data-id="compunet"]').value) }
)
const grflw2 = document.querySelector('bz-graflow.eic')
let grflw2 = document.querySelector('bz-graflow.eic')
grflw2.addEventListener('subflowLoaded',
(evt) => { grflw2 = evt.detail.subflow }
)
grflw2.addEventListener('subflowExited',
(evt) => { grflw2 = evt.target }
)
document.querySelector('[data-trigger="onAutoplace2H"]').addEventListener('click',
(evt) => { grflw2.autoPlace('horizontal', 100, 30, 1000, document.querySelector('[data-id="eic"]').value) }
)
@@ -82,7 +82,13 @@
(evt) => { grflw2.autoPlace('vertical', 80, 80, 1000, document.querySelector('[data-id="eic"]').value) }
)
const grflw3 = document.querySelector('bz-graflow.organi')
let grflw3 = document.querySelector('bz-graflow.organi')
grflw3.addEventListener('subflowLoaded',
(evt) => { grflw3 = evt.detail.subflow }
)
grflw3.addEventListener('subflowExited',
(evt) => { grflw3 = evt.target }
)
document.querySelector('[data-trigger="onAutoplace3H"]').addEventListener('click',
(evt) => { grflw3.autoPlace('horizontal', 80, 80, 1000, document.querySelector('[data-id="organi"]').value) }
)
@@ -90,7 +96,13 @@
(evt) => { grflw3.autoPlace('vertical', 80, 30, 1000, document.querySelector('[data-id="organi"]').value) }
)
const grflw4 = document.querySelector('bz-graflow.icmp')
let grflw4 = document.querySelector('bz-graflow.icmp')
grflw4.addEventListener('subflowLoaded',
(evt) => { grflw4 = evt.detail.subflow }
)
grflw4.addEventListener('subflowExited',
(evt) => { grflw4 = evt.target }
)
document.querySelector('[data-trigger="onAutoplace4H"]').addEventListener('click',
(evt) => { grflw4.autoPlace('horizontal', 100, 30, 1000, document.querySelector('[data-id="icmp"]').value) }
)
app/thirdparty/buildoz/bzGraflow.js
Vendored
+11 -7
View File
@@ -288,7 +288,7 @@ class BZgraflow extends Buildoz{
childEl.style.transform = 'none'
childEl.style.willChange = ''
this.dispatchEvent(new CustomEvent('subflowLoaded', {
detail: { flowUrl },
detail: { subflow: childEl },
bubbles: true,
composed: true,
}))
@@ -366,7 +366,7 @@ class BZgraflow extends Buildoz{
this.hostContainer.style.visibility = 'visible'
childEl.style.willChange = ''
this.dispatchEvent(new CustomEvent('subflowExited', {
detail: { },
detail: { subflow: childEl },
bubbles: true,
composed: true,
}))
@@ -611,11 +611,14 @@ class BZgraflow extends Buildoz{
// Compute indexes for each layer (int part) & add sub-index for ports
// Also compute max width/height for each layer
let maxHeight = 0; let maxWidth = 0
const layerHeights = []; const layerWidths = [];
let maxHeight = 0
let maxWidth = 0
const layerHeights = []
const layerWidths = []
const indexes = {} // indexes[nid] = { base: <int>, ports: { [portId]: <float in [0,1)> } }
for(const layer of layers){
let totHeight = 0; let totWidth = 0
let totHeight = 0
let totWidth = 0
for(const [idx, nid] of layer.entries()){
// Use offset* (not impacted by CSS transforms) to keep autoPlace stable during zoom animations.
const bb = this.stagedNodes[nid].getBoundingClientRect()
@@ -938,7 +941,7 @@ class BZgraflow extends Buildoz{
if(links.some(l => l.from[0] === l.to[0])) return(true) // self-loops
const { adj } = this.buildGraphStructures(nodes, links)
const visiting = new Set();
const visiting = new Set()
const visited = new Set()
const dfs = (nid) => {
if(visiting.has(nid)) {
@@ -961,7 +964,8 @@ class BZgraflow extends Buildoz{
findBackEdges(nodes, links) {
const { adj } = this.buildGraphStructures(nodes, links, true)
const color = {}; nodes.forEach(n => color[n.id] = 'white')
const color = {}
nodes.forEach(n => color[n.id] = 'white')
const backEdges = []
function dfs(u) {