diff --git a/buildoz.css b/buildoz.css index 4076af6..6a43343 100644 --- a/buildoz.css +++ b/buildoz.css @@ -200,13 +200,3 @@ bz-graflow .bzgf-main-container{ position: relative; 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; } \ No newline at end of file diff --git a/bzGraflow.js b/bzGraflow.js index e7f38a1..3c0c4b1 100644 --- a/bzGraflow.js +++ b/bzGraflow.js @@ -18,7 +18,13 @@ class BZgraflow extends Buildoz{ this.mainContainer = document.createElement('div') this.mainContainer.classList.add('bzgf-main-container') 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.classList.add('bzgf-nodes-container') this.wiresContainer = document.createElementNS('http://www.w3.org/2000/svg', 'svg') @@ -123,10 +129,8 @@ class BZgraflow extends Buildoz{ } refresh(){ - let x = 0 - let y = 0 for(const node of this.flow.nodes){ - const nodeEl = this.addNode(node) + this.addNode(node) } for(const link of this.flow.links){ this.addWire(link) @@ -146,7 +150,7 @@ class BZgraflow extends Buildoz{ const node2 = this.stagedNodes[idNode2] const port2 = node2.ports[idPort2] 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('') } const bb1 = port1.el.getBoundingClientRect() @@ -264,8 +268,10 @@ class BZgraflow extends Buildoz{ moveNode(nid, destx, desty, duration = 200, cb) { const t0 = performance.now() const bb = this.stagedNodes[nid].getBoundingClientRect() - const x0=bb.x - const y0 = bb.y + const parentbb = this.stagedNodes[nid].parentElement.getBoundingClientRect() + const x0=bb.x - parentbb.x + const y0 = bb.y - parentbb.y + console.log('y0:', y0, bb) function frame(t) { const p = Math.min((t - t0) / duration, 1) const k = p * p * (3 - 2 * p) // smoothstep