diff --git a/app/thirdparty/buildoz/buildoz.css b/app/thirdparty/buildoz/buildoz.css
index 8916695..6f358e7 100644
--- a/app/thirdparty/buildoz/buildoz.css
+++ b/app/thirdparty/buildoz/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;
diff --git a/app/thirdparty/buildoz/bzGraflow.js b/app/thirdparty/buildoz/bzGraflow.js
index aff3717..3a48ff1 100644
--- a/app/thirdparty/buildoz/bzGraflow.js
+++ b/app/thirdparty/buildoz/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')){
- this.dnd = new MovingNodes(this)
- this.dnd.enableMovingNodes('.bzgf-node')
+ if(this.getBZAttribute('edit')){
+ const edit = this.getBZAttribute('edit').split(',')
+ 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,17 +1196,44 @@ 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()
this.state = {
@@ -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
}
-}
\ No newline at end of file
+}
+
+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
+ }
+
+}
\ No newline at end of file