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

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