nike/buildoz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

graflow, autoplacement 1.6, wires with arrows

Browse Source
This commit is contained in:
STEINNI
2026-01-05 20:55:51 +00:00
parent eed34b6c8f
commit c10e01a8fc
1 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
bzGraflow.js
View File

@@ -15,7 +15,6 @@ class BZgraflow extends Buildoz{
console.warn('BZgraflow: No flow URL !?') console.warn('BZgraflow: No flow URL !?')
return return
} }
this.loadFlow(flowUrl) // Let it load async while we coat
this.mainContainer = document.createElement('div') this.mainContainer = document.createElement('div')
this.mainContainer.classList.add('bzgf-main-container') this.mainContainer.classList.add('bzgf-main-container')
this.shadow = this.mainContainer.attachShadow({ mode: 'open' }) this.shadow = this.mainContainer.attachShadow({ mode: 'open' })
@@ -28,6 +27,7 @@ class BZgraflow extends Buildoz{
this.shadow.append(this.wiresContainer) this.shadow.append(this.wiresContainer)
this.shadow.append(this.nodesContainer) this.shadow.append(this.nodesContainer)
this.append(this.mainContainer) this.append(this.mainContainer)
this.loadFlow(flowUrl) // Let it load async
} }
async loadFlow(url){ async loadFlow(url){
@@ -59,9 +59,14 @@ class BZgraflow extends Buildoz{
const doc = new DOMParser().parseFromString(html, 'text/html') const doc = new DOMParser().parseFromString(html, 'text/html')
this.nodesRegistry = {} this.nodesRegistry = {}
for(const tpl of doc.querySelectorAll('template')){ for(const tpl of doc.querySelectorAll('template')){
const rootEl = tpl.content.querySelector('.bzgf-node') if(tpl.id=='svg-arrows'){
if(!rootEl) continue this.wiresContainer.appendChild(tpl.querySelector('defs').cloneNode(true))
this.nodesRegistry[rootEl.dataset.nodetype] = rootEl this.arrowDefined = true
} else {
const rootEl = tpl.content.querySelector('.bzgf-node')
if(!rootEl) continue
this.nodesRegistry[rootEl.dataset.nodetype] = rootEl
}
} }
// Now load styles (once) // Now load styles (once)
@@ -88,12 +93,16 @@ class BZgraflow extends Buildoz{
return(this.stagedNodes[id]) return(this.stagedNodes[id])
} }
addWire(idNode1, idPort1, idNode2, idPort2){ addWire(link){
const [idNode1, idPort1] = link.from
const [idNode2, idPort2] = link.to
const path = this.bezier(idNode1, idPort1, idNode2, idPort2, this.getBZAttribute('tension')) const path = this.bezier(idNode1, idPort1, idNode2, idPort2, this.getBZAttribute('tension'))
const id = `${idNode1}_${idNode2}` const id = `${idNode1}_${idNode2}`
this.stagedWires[id] = document.createElementNS('http://www.w3.org/2000/svg', 'path') this.stagedWires[id] = document.createElementNS('http://www.w3.org/2000/svg', 'path')
this.stagedWires[id].setAttribute('d', path) this.stagedWires[id].setAttribute('d', path)
this.stagedWires[id].setAttribute('fill', 'none') this.stagedWires[id].setAttribute('fill', 'none')
if(this.arrowDefined && link.endArrow) this.stagedWires[id].setAttribute('marker-end','url(#arrow)')
if(this.arrowDefined && link.startArrow) this.stagedWires[id].setAttribute('marker-start','url(#arrow)')
this.stagedWires[id].classList.add('bzgf-wire') this.stagedWires[id].classList.add('bzgf-wire')
this.stagedWires[id].dataset.id = id this.stagedWires[id].dataset.id = id
this.wiresContainer.append(this.stagedWires[id]) this.wiresContainer.append(this.stagedWires[id])
@@ -107,9 +116,7 @@ class BZgraflow extends Buildoz{
const nodeEl = this.addNode(node.nodeType, node.id , node.coords.x, node.coords.y) const nodeEl = this.addNode(node.nodeType, node.id , node.coords.x, node.coords.y)
} }
for(const link of this.flow.links){ for(const link of this.flow.links){
const [nodeId1, portId1] = link.from this.addWire(link)
const [nodeId2, portId2] = link.to
this.addWire(nodeId1, portId1, nodeId2, portId2)
} }
} }
@@ -330,3 +337,4 @@ class BZgraflow extends Buildoz{
} }
Buildoz.define('graflow', BZgraflow) Buildoz.define('graflow', BZgraflow)