fixed chicked&egg&connectedCB issue between graflow & editor + fixed no Flow issue in graflow + Fixed nodesMove issue on displaced graflow + graflowEditor: DND ok

bzGraflow.js

@@ -66,10 +66,6 @@ class BZgraflow extends Buildoz{
 
     connectedCallback() { 
         super.connectedCallback()
-        const flowUrl = this.getBZAttribute('flow')
-        if(!flowUrl) return // Be tolerant: maybe injected later from JS above
-        // If attribute "isolated" is present, render inside a shadow root.
-        // Otherwise, render in light DOM (no shadow DOM).
         this.hostContainer  = document.createElement('div')
         this.hostContainer.classList.add('bzgf-main-container')
         this.mainContainer = this.hasAttribute('isolated')
@@ -96,7 +92,10 @@ class BZgraflow extends Buildoz{
                 this.NodesReceiver = new DroppingNodes(this, '.bzgf-node')
             }
         }
-        this.loadFlow(flowUrl)
+        this.fireEvent('domConnected', { graflow: this })
+        const flowUrl = this.getBZAttribute('flow')
+        if(flowUrl) this.loadFlow(flowUrl)
+        else this.initFlow()
     }
 
     error(msg, err){
@@ -126,6 +125,10 @@ class BZgraflow extends Buildoz{
         this.fireEvent('flowLoaded', { url: url })
     }
 
+    initFlow(){
+        this.flow = { nodes: [], links: [] }
+    }
+
     async loadNodes(url) {
         const res = await fetch(url+'?'+crypto.randomUUID())
         const html = await res.text()
@@ -1216,18 +1219,18 @@ class MovingNodes{
             handle = node.querySelector(this.handleSelector) 
             if(e.target != handle) return
         }
-        
-
-
+     
         const rect = node.getBoundingClientRect()
-        
+        const parentBB = this.nodesContainer.getBoundingClientRect()
+        const offsetX = rect.left - parentBB.left + this.nodesContainer.scrollLeft
+        const offsetY = rect.top - parentBB.top + this.nodesContainer.scrollTop
         this.state = {
             node,
             handle,
             startX: e.clientX,
             startY: e.clientY,
-            offsetX: rect.left,
-            offsetY: rect.top
+            offsetX,
+            offsetY
         }
         const x = e.clientX - this.state.startX + this.state.offsetX
         const y = e.clientY - this.state.startY + this.state.offsetY
@@ -1252,11 +1255,20 @@ class MovingNodes{
 
     pointerUp(e){
         if(!this.state) return
-        this.state.node.releasePointerCapture(e.pointerId)
-        this.state.node.style.pointerEvents = ''
+        const { node, startX, startY, offsetX, offsetY } = this.state
+        const x = e.clientX - startX + offsetX
+        const y = e.clientY - startY + offsetY
+        node.releasePointerCapture(e.pointerId)
+        node.style.pointerEvents = ''
+        for(const n of this.graflow.flow.nodes){
+            if(n.id == node.dataset.id){
+                n.coords.x = x
+                n.coords.y = y
+                break
+            }
+        }
+        this.graflow.fireEvent('nodeMoved', { nodeId: node.dataset.id, x, y })
         this.state = null
-
-        this.graflow.fireEvent('nodeMoved', { nodeId: this.state.node.dataset.id, x: this.state.x, y: this.state.y })
     }
 }