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

graflow: fixed missing styles in shadow dom + fixed bad coords in autoplacement

Browse Source
This commit is contained in:
STEINNI
2026-01-07 11:21:25 +00:00
parent bdea9a7817
commit c570ae7e85
2 changed files with 13 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
buildoz.css
View File

@@ -200,13 +200,3 @@ bz-graflow .bzgf-main-container{
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
} }
bz-graflow .bzgf-wires-container,
bz-graflow .bzgf-nodes-container{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
bz-graflow .bzgf-nodes-container{ z-index:10; }
bz-graflow .bzgf-wires-container{ z-index:9; }
bz-graflow .bzgf-nodes-container .bzgf-node{ position:absolute; }

20
bzGraflow.js
View File

@@ -18,7 +18,13 @@ class BZgraflow extends Buildoz{
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' })
const style = document.createElement('style')
style.textContent = `
.bzgf-wires-container,
.bzgf-nodes-container{ position: absolute; inset: 0; width: 100%; height: 100%; }
.bzgf-nodes-container .bzgf-node{ position:absolute; }
`
this.shadow.appendChild(style)
this.nodesContainer = document.createElement('div') this.nodesContainer = document.createElement('div')
this.nodesContainer.classList.add('bzgf-nodes-container') this.nodesContainer.classList.add('bzgf-nodes-container')
this.wiresContainer = document.createElementNS('http://www.w3.org/2000/svg', 'svg') this.wiresContainer = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
@@ -123,10 +129,8 @@ class BZgraflow extends Buildoz{
} }
refresh(){ refresh(){
let x = 0
let y = 0
for(const node of this.flow.nodes){ for(const node of this.flow.nodes){
const nodeEl = this.addNode(node) this.addNode(node)
} }
for(const link of this.flow.links){ for(const link of this.flow.links){
this.addWire(link) this.addWire(link)
@@ -146,7 +150,7 @@ class BZgraflow extends Buildoz{
const node2 = this.stagedNodes[idNode2] const node2 = this.stagedNodes[idNode2]
const port2 = node2.ports[idPort2] const port2 = node2.ports[idPort2]
if(!node1 || !node2 || !port1 || !port2) { if(!node1 || !node2 || !port1 || !port2) {
console.warn('bezier on bad node / port!', idNode1, idPort1, idNode2, idPort2) console.warn('Link on bad node / port!', idNode1, idPort1, idNode2, idPort2)
return('') return('')
} }
const bb1 = port1.el.getBoundingClientRect() const bb1 = port1.el.getBoundingClientRect()
@@ -264,8 +268,10 @@ class BZgraflow extends Buildoz{
moveNode(nid, destx, desty, duration = 200, cb) { moveNode(nid, destx, desty, duration = 200, cb) {
const t0 = performance.now() const t0 = performance.now()
const bb = this.stagedNodes[nid].getBoundingClientRect() const bb = this.stagedNodes[nid].getBoundingClientRect()
const x0=bb.x const parentbb = this.stagedNodes[nid].parentElement.getBoundingClientRect()
const y0 = bb.y const x0=bb.x - parentbb.x
const y0 = bb.y - parentbb.y
console.log('y0:', y0, bb)
function frame(t) { function frame(t) {
const p = Math.min((t - t0) / duration, 1) const p = Math.min((t - t0) / duration, 1)
const k = p * p * (3 - 2 * p) // smoothstep const k = p * p * (3 - 2 * p) // smoothstep