graflow: examples tuning, nodemove debugging

buildoz.css

@@ -206,7 +206,9 @@ bz-graflow .bzgf-main-container{
 }
 
 /* BZGRAFLOW_CORE_START */
-/* bz-graflow internal layout rules (used in light DOM, and injected into shadow DOM when isolated) */
+/* Keep this commented section ! 
+   bz-graflow internal layout rules (used in light DOM, and injected into shadow DOM when isolated) 
+*/
 bz-graflow .bzgf-wires-container,
 bz-graflow .bzgf-nodes-container{
     position: absolute;
@@ -214,6 +216,13 @@ bz-graflow .bzgf-nodes-container{
     width: 100%;
     height: 100%;
 }
+bz-graflow .bzgf-nodes-container{ /* used to keep the nodes container pointer-events: none, but allow the nodes to be moved ! */
+    pointer-events: none;
+}
+bz-graflow .bzgf-nodes-container > * { /* allow the nodes to be moved ! */
+    pointer-events: auto;
+  }
+
 bz-graflow .bzgf-nodes-container .bzgf-node{ position:absolute; }
 bz-graflow .bzgf-nodes-container .bzgf-fake-node{
     position: absolute;

bzGraflow.js

@@ -85,9 +85,21 @@ class BZgraflow extends Buildoz{
         this.mainContainer.append(this.nodesContainer)
         this.append(this.hostContainer)
         this.loadFlow(flowUrl).then(() => {
-            if((this.getBZAttribute('edit')=='move') || (this.getBZAttribute('edit')=='full')){ 
+            if(this.getBZAttribute('edit')){
-                this.dnd = new MovingNodes(this)
+                const edit = this.getBZAttribute('edit').split(',')
-                this.dnd.enableMovingNodes('.bzgf-node') 
+                if(edit.includes('nodesmove')){
+                    this.nodesMover = new MovingNodes(this)
+                    this.nodesMover.enableMovingNodes('.bzgf-node') 
+                }
+                if(edit.includes('wires')){
+                    this.WiresEditor = new EditWires(this)
+                    this.WiresEditor.enableEditWires()
+                    //this.WiresEditor.enableMovingNodes('.bzgf-wire') 
+                }
+                if(edit.includes('dropnodes')){
+                    this.NodesReceiver = new DroppingNodes(this)
+                    //this.NodesReceiver.enableDroppingNodes('.bzgf-node') 
+                }
             }
         })
     }
@@ -1164,6 +1176,14 @@ class MovingNodes{
         this.graflow = graflow
         this.nodesContainer = this.graflow.mainContainer.querySelector('.bzgf-nodes-container')
         this.state = null
+
+        this.interactiveElementsSelector = `
+            input,
+            textarea,
+            select,
+            button,
+            a[href]
+        `
     }
     
     enableMovingNodes(itemSelector, handleSelector = itemSelector) {
@@ -1176,16 +1196,43 @@ class MovingNodes{
             this._handleCursorStyle = style
         }
 
-        this.nodesContainer.addEventListener('pointerdown', this.pointerDown.bind(this))        
+        this.nodesContainer.querySelectorAll(this.handleSelector).forEach(item => 
+            item.addEventListener('pointerdown', this.pointerDown.bind(this))
+        )        
         this.nodesContainer.addEventListener('pointermove', this.pointerMove.bind(this))
-        this.nodesContainer.addEventListener('pointerup', this.pointerUp.bind(this))
+        this.nodesContainer.querySelectorAll(this.handleSelector).forEach(item => 
+            item.addEventListener('pointerup', this.pointerUp.bind(this))
+        )
+    }
+
+    disableMovingNodes(){
+        this.nodesContainer.querySelectorAll(this.handleSelector).forEach(item => 
+            item.removeEventListener('pointerdown', this.pointerDown.bind(this))
+        )        
+        this.nodesContainer.removeEventListener('pointermove', this.pointerMove.bind(this))
+        this.nodesContainer.querySelectorAll(this.handleSelector).forEach(item => 
+            item.removeEventListener('pointerup', this.pointerUp.bind(this))
+        )
     }
 
     pointerDown(e){
         this.graflow.clearFakeNodes()
-        const node = (e.target.classList.contains(this.itemSelector)) ? e.target : e.target.closest(this.itemSelector) 
+        console.log('=====> interactive element', e.target)
+
+        const node = e.target.closest(this.itemSelector) 
         if(!node) return
-        const handle = (node.classList.contains(this.handleSelector)) ? node : node.querySelector(this.handleSelector) 
+
+        let handle
+        if(this.handleSelector == this.itemSelector) {
+            handle = node            
+            if(e.target.closest(this.interactiveElementsSelector)) return
+            e.preventDefault()   
+        } else { // If defined handle, then no need to care about interactive elements
+            handle = node.querySelector(this.handleSelector) 
+            if(e.target != handle) return
+        }
+        
+
 
         const rect = node.getBoundingClientRect()
         
@@ -1205,6 +1252,7 @@ class MovingNodes{
         node.style.top = `${y}px`
         node.style.margin = '0'
         node.style.zIndex = '9999'
+        node.style.pointerEvents = 'none'
     }
 
     pointerMove(e){
@@ -1220,6 +1268,33 @@ class MovingNodes{
     pointerUp(e){
         if(!this.state) return
         this.state.node.releasePointerCapture(e.pointerId)
+        this.state.node.style.pointerEvents = ''
         this.state = null
     }
 }
+
+class EditWires{
+    constructor(graflow){
+        this.graflow = graflow
+        this.nodesContainer = this.graflow.mainContainer.querySelector('.bzgf-nodes-container')
+        this.state = null
+    }
+     enableEditWires(){
+        for(const ref in this.graflow.stagedWires ){
+            this.graflow.stagedWires[ref].addEventListener('click', this.onSelectWire.bind(this))
+        }
+    }
+    onSelectWire(e){
+        const wire = e.target
+        console.log('wire', wire)
+    }
+}
+
+class DroppingNodes{
+    constructor(graflow){
+        this.graflow = graflow
+        this.nodesContainer = this.graflow.mainContainer.querySelector('.bzgf-nodes-container')
+        this.state = null
+    }
+    
+}