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

bzGraflow-editor.js

@@ -16,7 +16,8 @@ class BZgrafloweditor extends Buildoz{
         this.defaultAttrs = {  }
     }
     
-    connectedCallback() { 
+    async connectedCallback() { 
+        await customElements.whenDefined('bz-graflow') 
         super.connectedCallback()
         const nodesUrl = this.getBZAttribute('nodes')
         this.mainContainer  = document.createElement('div')
@@ -26,20 +27,64 @@ class BZgrafloweditor extends Buildoz{
         this.mainContainer.append(this.nodesContainer)
         this.graflow = document.createElement('bz-graflow')
         this.graflow.setAttribute('nodes', nodesUrl)
+        this.graflow.setAttribute('edit', "nodesmove,editwires,dropnodes")
+        this.graflow.addEventListener('bz:graflow:domConnected', this.setupDropZone.bind(this))
         this.mainContainer.append(this.graflow)
-        this.append(this.mainContainer)
-        
+        this.append(this.mainContainer)        
         this.graflow.addEventListener('bz:graflow:nodesLoaded', this.refreshNodes.bind(this))
         this.graflow.loadNodes(nodesUrl)
-        
     }
 
     refreshNodes(e){
         for(const nodeType in this.graflow.nodesRegistry){
             const nodeDef = this.graflow.nodesRegistry[nodeType]
-            this.nodesContainer.append(nodeDef.cloneNode(true))
+            if(nodeDef.dataset.editor=='exclude') continue
+            const node = nodeDef.cloneNode(true)
+            this.makeNodeDraggable(node)
+            this.nodesContainer.append(node)
         }
-        
+    }
+
+    makeNodeDraggable(node){
+        node.draggable = true
+        node.style.cursor = 'pointer'
+        node.addEventListener('dragstart', (evt) => {
+            evt.dataTransfer.setData('text/plain', node.dataset.nodetype)
+            evt.dataTransfer.effectAllowed = 'copy'
+            evt.dataTransfer.setDragImage(node, evt.offsetX, evt.offsetY)
+        })
+    }
+
+    onNodeDragEnd(evt){
+        console.log('drag end', evt)
+        evt.dataTransfer.clearData()
+    }
+
+    setupDropZone(){
+        const dropZone = this.graflow.wiresContainer
+        const nodesContainer = this.graflow.nodesContainer
+        dropZone.addEventListener('dragover', (evt) => {
+            evt.preventDefault()
+            evt.dataTransfer.dropEffect = 'copy'
+        })
+        dropZone.addEventListener('drop', (evt) => {
+            evt.preventDefault()
+            const nodeType = evt.dataTransfer.getData('text/plain')
+            if(!nodeType || !(nodeType in this.graflow.nodesRegistry)) return
+            const rect = nodesContainer.getBoundingClientRect()
+            const x = evt.clientX - rect.left + nodesContainer.scrollLeft
+            const y = evt.clientY - rect.top + nodesContainer.scrollTop
+            const id = 'n' + crypto.randomUUID().replace(/-/g, '').slice(0, 8)
+            this.graflow.addNode({ id, nodeType, coords: { x, y } })
+            for(const node of this.graflow.flow.nodes){
+                if(node.id == id){
+                    node.coords.x = x
+                    node.coords.y = y
+                    break
+                }
+            }            
+            this.graflow.refresh()
+        })
     }
 }
 Buildoz.define('grafloweditor', BZgrafloweditor)