diff --git a/bzGraflow.js b/bzGraflow.js index ce75937..c32d9f9 100644 --- a/bzGraflow.js +++ b/bzGraflow.js @@ -84,24 +84,19 @@ class BZgraflow extends Buildoz{ this.mainContainer.append(this.wiresContainer) this.mainContainer.append(this.nodesContainer) this.append(this.hostContainer) - this.loadFlow(flowUrl).then(() => { - 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') - } + if(this.getBZAttribute('edit')){ + const edit = this.getBZAttribute('edit').split(',') + if(edit.includes('nodesmove')){ + this.nodesMover = new MovingNodes(this, '.bzgf-node') } - }) + if(edit.includes('wires')){ + this.WiresEditor = new EditWires(this, '.bzgf-wire') + } + if(edit.includes('dropnodes')){ + this.NodesReceiver = new DroppingNodes(this, '.bzgf-node') + } + } + this.loadFlow(flowUrl) } error(msg, err){ @@ -436,7 +431,7 @@ class BZgraflow extends Buildoz{ for(const node of this.flow.nodes){ if((!node.coords) || (!node.coords.x) ||(!node.coords.y)) forceAutoplace=true this.addNode(node) - } + } for(const link of this.flow.links){ this.addWire(link) } @@ -446,6 +441,11 @@ class BZgraflow extends Buildoz{ else this.currentOrientation = 'vertical' } if(forceAutoplace) this.autoPlace(this.currentOrientation) + this.dispatchEvent(new CustomEvent('refreshed', { + detail: { }, + bubbles: true, + composed: true, + })) } // Convert viewport (client) coordinates to this instance's SVG local coordinates. @@ -767,8 +767,7 @@ class BZgraflow extends Buildoz{ const bb = this.stagedNodes[nid].getBoundingClientRect() const nodeHeight = this.stagedNodes[nid].offsetHeight || bb.height if((align == 'parent') && (nid in parents) && (parents[nid][0] in parentsY)) { - y = Math.max(parentsY[parents[nid][0]], y) //TODO handle multiple parents with avg - console.log('parent', nid, parents[nid], parentsY[parents[nid][0]]) + y = Math.max(parentsY[parents[nid][0]], y) //TODO handle multiple parents with avg } placedY = y this.moveNode(nid, x, y, orientation, tween, null, token) @@ -1172,8 +1171,10 @@ class BZgraflow extends Buildoz{ Buildoz.define('graflow', BZgraflow) class MovingNodes{ - constructor(graflow){ + constructor(graflow, itemSelector, handleSelector = itemSelector){ this.graflow = graflow + this.itemSelector = itemSelector + this.handleSelector = handleSelector this.nodesContainer = this.graflow.mainContainer.querySelector('.bzgf-nodes-container') this.state = null @@ -1184,14 +1185,13 @@ class MovingNodes{ button, a[href] ` + this.graflow.addEventListener('refreshed', this.enableMovingNodes.bind(this)) } - enableMovingNodes(itemSelector, handleSelector = itemSelector) { - this.itemSelector = itemSelector - this.handleSelector = handleSelector + enableMovingNodes() { if(!this._handleCursorStyle){ const style = document.createElement('style') - style.textContent = `${handleSelector}{ cursor: move }` + style.textContent = `${this.handleSelector}{ cursor: move }` this.nodesContainer.appendChild(style) this._handleCursorStyle = style } @@ -1217,7 +1217,6 @@ class MovingNodes{ pointerDown(e){ this.graflow.clearFakeNodes() - console.log('=====> interactive element', e.target) const node = e.target.closest(this.itemSelector) if(!node) return @@ -1278,6 +1277,7 @@ class EditWires{ this.graflow = graflow this.nodesContainer = this.graflow.mainContainer.querySelector('.bzgf-nodes-container') this.state = null + this.graflow.addEventListener('refreshed', this.enableEditWires.bind(this)) } enableEditWires(){ for(const ref in this.graflow.stagedWires ){