From e58ff43014e48e1121b47b2bb7d547f54b1def99 Mon Sep 17 00:00:00 2001 From: STEINNI Date: Sat, 21 Mar 2026 15:49:40 +0000 Subject: [PATCH] fireEvent + graflow uses new-style fireEvent --- buildoz.js | 10 ++++++ bzGraflow-editor.js | 35 +++++++++++++++++++ bzGraflow.js | 58 +++++++++---------------------- graflow_examples/etest1.html | 65 +++++++++++++++++++++++++++++++++++ graflow_examples/test.html | 29 ++++++++++++---- graflow_examples/test1.html | 4 +-- graflow_examples/test2.html | 4 +-- graflow_examples/test3.1.html | 2 +- graflow_examples/test3.html | 4 +-- graflow_examples/test4.5.html | 4 +-- graflow_examples/test4.html | 6 ++-- graflow_examples/test5.html | 4 +-- graflow_examples/test6.html | 4 +-- 13 files changed, 165 insertions(+), 64 deletions(-) create mode 100644 bzGraflow-editor.js create mode 100644 graflow_examples/etest1.html diff --git a/buildoz.js b/buildoz.js index 5718f0d..2e3695b 100644 --- a/buildoz.js +++ b/buildoz.js @@ -48,6 +48,16 @@ class Buildoz extends HTMLElement { getBZAttribute(attrName){ // Little helper for defaults return(this.getAttribute(attrName) || this.defaultAttrs[attrName] ) } + + fireEvent(eventName, detail){ + let myname = this.tagName.toLocaleLowerCase() + myname = myname.substring(myname.indexOf('-')+1) + this.dispatchEvent(new CustomEvent(`bz:${myname}:${eventName}`, { + detail, + bubbles: true, + composed: true, + })) + } } class BZselect extends Buildoz { diff --git a/bzGraflow-editor.js b/bzGraflow-editor.js new file mode 100644 index 0000000..442476d --- /dev/null +++ b/bzGraflow-editor.js @@ -0,0 +1,35 @@ +/** + * _ ___ Another + * / |/ (_)______ __ _____ + * / / / __(_- { + childEl.addEventListener('bz:graflow:flowLoaded', (e) => { for(const portLink of flowNode.subflow.portLinks){ const nid = crypto.randomUUID() childEl.addNode({ @@ -302,12 +294,8 @@ class BZgraflow extends Buildoz{ this.hostContainer.style.visibility = 'hidden' childEl.style.transform = 'none' // Important for nested subflows to position correctly childEl.style.willChange = '' - newEl.style.overflow = 'auto' - this.dispatchEvent(new CustomEvent('subflowLoaded', { - detail: { subflow: childEl }, - bubbles: true, - composed: true, - })) + childEl.style.overflow = 'auto' + this.fireEvent('subflowLoaded', { subflow: childEl }) }, { once:true }) } @@ -382,11 +370,7 @@ class BZgraflow extends Buildoz{ this.hostContainer.style.opacity = '1' this.hostContainer.style.visibility = 'visible' childEl.style.willChange = '' - this.dispatchEvent(new CustomEvent('subflowExited', { - detail: { subflow: childEl }, - bubbles: true, - composed: true, - })) + this.fireEvent('subflowExited', { subflow: childEl }) }, { once:true }) } @@ -450,11 +434,7 @@ class BZgraflow extends Buildoz{ else this.currentOrientation = 'vertical' } if(forceAutoplace) this.autoPlace(this.currentOrientation) - this.dispatchEvent(new CustomEvent('refreshed', { - detail: { }, - bubbles: true, - composed: true, - })) + this.fireEvent('refreshed', { }) } // Convert viewport (client) coordinates to this instance's SVG local coordinates. @@ -993,11 +973,7 @@ class BZgraflow extends Buildoz{ if(p < 1) requestAnimationFrame(frame.bind(this)) else{ - this.dispatchEvent(new CustomEvent('nodeMoved', { - detail: { nid, x, y }, - bubbles: true, - composed: true, - })) + this.fireEvent('nodeMoved', { nid, x, y }) } } requestAnimationFrame(frame.bind(this)) @@ -1021,11 +997,7 @@ class BZgraflow extends Buildoz{ wire.setAttribute('d', path) } } - this.dispatchEvent(new CustomEvent('wiresUpdated', { - detail: { nid, orientation, LondLinkfix }, - bubbles: true, - composed: true, - })) + this.fireEvent('wiresUpdated', { nid, orientation, LondLinkfix }) } getLink(nid1, nid2){ @@ -1200,7 +1172,7 @@ class MovingNodes{ this._boundPointerDown = this.pointerDown.bind(this) this._boundPointerMove = this.pointerMove.bind(this) this._boundPointerUp = this.pointerUp.bind(this) - this.graflow.addEventListener('refreshed', this.enableMovingNodes.bind(this)) + this.graflow.addEventListener('bz:graflow:refreshed', this.enableMovingNodes.bind(this)) } enableMovingNodes() { @@ -1285,6 +1257,8 @@ class MovingNodes{ this.state.node.releasePointerCapture(e.pointerId) this.state.node.style.pointerEvents = '' this.state = null + + this.graflow.fireEvent('nodeMoved', { nodeId: this.state.node.dataset.id, x: this.state.x, y: this.state.y }) } } @@ -1295,9 +1269,9 @@ class EditWires{ this.state = null this.graflow.tabIndex = 0 // Make keyboard reactive this._boundPointerMove = this.pointerMove.bind(this) - this.graflow.addEventListener('refreshed', this.enableEditWires.bind(this)) - this.graflow.addEventListener('refreshed', this.enableSelectPorts.bind(this)) - this.graflow.addEventListener('wiresUpdated', this.enableEditWires.bind(this)) + this.graflow.addEventListener('bz:graflow:refreshed', this.enableEditWires.bind(this)) + this.graflow.addEventListener('bz:graflow:refreshed', this.enableSelectPorts.bind(this)) + this.graflow.addEventListener('bz:graflow:wiresUpdated', this.enableEditWires.bind(this)) this.graflow.addEventListener('keyup', this.onKeyUp.bind(this)) } @@ -1422,6 +1396,7 @@ class EditWires{ return('') } this.graflow.addWire({ from: [idNode1, idPort1], to: [idNode2, idPort2] }) + this.graflow.fireEvent('wireAdded', { from: [idNode1, idPort1], to: [idNode2, idPort2], id: `${idNode1}_${idNode2}` }) } onSelectWire(e){ @@ -1446,6 +1421,7 @@ class EditWires{ delete this.graflow.stagedWires[wireId] this.currentlySelectedWire.remove() this.currentlySelectedWire = null + this.graflow.fireEvent('wireRemoved', { wireId }) return } if(e.key == 'Escape') { diff --git a/graflow_examples/etest1.html b/graflow_examples/etest1.html new file mode 100644 index 0000000..44d6dfa --- /dev/null +++ b/graflow_examples/etest1.html @@ -0,0 +1,65 @@ + + + + graflow + + + + + + + + + + + + + + + + diff --git a/graflow_examples/test.html b/graflow_examples/test.html index fddcd92..e4e6039 100644 --- a/graflow_examples/test.html +++ b/graflow_examples/test.html @@ -44,7 +44,7 @@ test1 - P42 + Graflow P42 YES 2 depths @@ -56,7 +56,7 @@ test2 - Organigram + Graflow Organigram YES @@ -68,7 +68,7 @@ test3 - EIC simple + Graflow EIC simple NO 1 depth @@ -80,7 +80,7 @@ test4 - EIC-ICMP + Graflow EIC-ICMP NO X @@ -92,7 +92,7 @@ test4.5 - EIC-ICMP II + Graflow EIC-ICMP II NO @@ -104,7 +104,7 @@ test5 - P42 + Graflow P42 YES @@ -116,7 +116,7 @@ test6 - 16 ports test + Graflow 16 ports test NO @@ -127,6 +127,21 @@ + +
+ + + + + + + + + + + + +
Style
Editor testP42
diff --git a/graflow_examples/test1.html b/graflow_examples/test1.html index 633b040..fc9f6d3 100644 --- a/graflow_examples/test1.html +++ b/graflow_examples/test1.html @@ -53,10 +53,10 @@