nike/buildoz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fireEvent + graflow uses new-style fireEvent

Browse Source
This commit is contained in:
STEINNI
2026-03-21 15:49:40 +00:00
parent c3624d8aca
commit e58ff43014
13 changed files with 165 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
buildoz.js
View File

@@ -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 {

35
bzGraflow-editor.js Normal file
View File

@@ -0,0 +1,35 @@
/**
* _ ___ Another
* / |/ (_)______ __ _____
* / / / __(_-</ // (_-<
* /_/|_/_/\__/___/\_, /___/
* /___/
* production !
*
* Licensed under the MIT License:
* This code is free to use and modify,
* as long as the copyright notice and license are kept.
*/
const scriptUrl = document.currentScript.src
class BZgrafloweditor extends Buildoz{
constructor(){
super()
this.defaultAttrs = { }
}
connectedCallback() {
super.connectedCallback()
const nodesUrl = this.getBZAttribute('nodes')
this.mainContainer = document.createElement('div')
this.mainContainer.classList.add('bzgfe-main-container')
this.nodesContainer = document.createElement('div')
this.nodesContainer.classList.add('bzgf-nodes-container')
this.mainContainer.append(this.nodesContainer)
this.graflow = document.createElement('bz-graflow')
this.graflow.setAttribute('nodes', nodesUrl)
this.mainContainer.append(this.graflow)
}
}
Buildoz.define('graflow', BZgraflow)

58
bzGraflow.js
View File

@@ -125,11 +125,7 @@ class BZgraflow extends Buildoz{
await this.loadNodes(flowObj.nodesFile)
this.flow = flowObj.flow
this.refresh()
this.dispatchEvent(new CustomEvent('flowLoaded', {
detail: { url },
bubbles: true,
composed: true,
}))
this.fireEvent('flowLoaded', { url: url })
}
async loadNodes(url) {
@@ -172,11 +168,7 @@ class BZgraflow extends Buildoz{
BZgraflow._loadedNodeStyles.add(url)
}
}
this.dispatchEvent(new CustomEvent('nodesLoaded', {
detail: { url },
bubbles: true,
composed: true,
}))
this.fireEvent('nodesLoaded', { url: url })
}
addNode(node){
@@ -238,7 +230,7 @@ class BZgraflow extends Buildoz{
this.invade(this, childEl)
childEl.hostContainer.appendChild(btnExitSubflow)
childEl.addEventListener('flowLoaded', (e) => {
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') {

65
graflow_examples/etest1.html Normal file
View File

@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>graflow</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="../../eicui/eicui-2.0.css">
<link type="text/css" rel="stylesheet" href="../buildoz.css">
<script src="../buildoz.js"></script>
<script src="../bzGraflow.js"></script>
<script src="../bzGraflow-editor.js"></script>
<style>
@font-face { /*FF does not indirectly load if inside a shawdow-dom */
font-family: 'glyphs';
src: url('/assets/styles/fonts/glyphs.eot');
src: url('/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
url('/assets/styles/fonts/glyphs.ttf') format('truetype'),
url('/assets/styles/fonts/glyphs.woff') format('woff'),
url('/assets/styles/fonts/glyphs.svg') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
body{
display: grid;
grid-gap: 5px;
background:#888;
font-size: 16px;
}
.demooptions{
padding: 2px;
position: absolute;
top: 2px;
right: 2px;
width: 10em;
background: #FFFB;
border-radius: 5px;
text-align: center;
z-index:99999;
font-size: .7em;
border: 1px solid #999;
}
.demooptions button{
text-transform: none;
margin: 2px;
font-size: 1em;
}
bz-graflow{
overflow: scroll;
border: 2px solid black;
}
bz-graflow.compunet{ grid-column: 1 / -1; width: 100vw; height: 60vh; background:black; }
</style>
<script>
window.addEventListener('load',()=>{
})
</script>
</head>
<body>
<bz-grafloweditor nodes=""./nodesLib/nodesTest1.html" >
</bz-grafloweditor>
</body>
</html>

29
graflow_examples/test.html
View File

@@ -44,7 +44,7 @@
<tbody>
<tr>
<td><a target="test1" href="./test1.html">test1</a></td>
<td>P42</td>
<td>Graflow P42</td>
<td>YES</td>
<td>2 depths</td>
<td></td>
@@ -56,7 +56,7 @@
</tr>
<tr>
<td><a target="test2" href="./test2.html">test2</a></td>
<td>Organigram</td>
<td>Graflow Organigram</td>
<td>YES</td>
<td></td>
<td></td>
@@ -68,7 +68,7 @@
</tr>
<tr>
<td><a target="test3" href="./test3.html">test3</a></td>
<td>EIC simple</td>
<td>Graflow EIC simple</td>
<td>NO</td>
<td>1 depth</td>
<td></td>
@@ -80,7 +80,7 @@
</tr>
<tr>
<td><a target="test4" href="./test4.html">test4</a></td>
<td>EIC-ICMP</td>
<td>Graflow EIC-ICMP</td>
<td>NO</td>
<td></td>
<td>X</td>
@@ -92,7 +92,7 @@
</tr>
<tr>
<td><a target="test4.5" href="./test4.5.html">test4.5</a></td>
<td>EIC-ICMP II</td>
<td>Graflow EIC-ICMP II</td>
<td>NO</td>
<td></td>
<td></td>
@@ -104,7 +104,7 @@
</tr>
<tr>
<td><a target="test5" href="./test5.html">test5</a></td>
<td>P42</td>
<td>Graflow P42</td>
<td>YES</td>
<td></td>
<td></td>
@@ -116,7 +116,7 @@
</tr>
<tr>
<td><a target="test6" href="./test6.html">test6</a></td>
<td>16 ports test</td>
<td>Graflow 16 ports test</td>
<td>NO</td>
<td></td>
<td></td>
@@ -127,6 +127,21 @@
<td></td>
</tr>
</tbody>
</table>
<br>
<table>
<thead>
<tr>
<th></th>
<th>Style</th>
</tr>
</thead>
<tbody>
<tr>
<td><a target="test7" href="./etest1.html">Editor test</a></td>
<td>P42</td>
</tr>
</tbody>
</table>
</body>
</html>

4
graflow_examples/test1.html
View File

@@ -53,10 +53,10 @@
<script>
window.addEventListener('load',()=>{
let grflw1 = document.querySelector('bz-graflow.compunet')
grflw1.addEventListener('subflowLoaded',
grflw1.addEventListener('bz:graflow:subflowLoaded',
(evt) => { grflw1 = evt.detail.subflow }
)
grflw1.addEventListener('subflowExited',
grflw1.addEventListener('bz:graflow:subflowExited',
(evt) => { grflw1 = evt.target }
)
document.querySelector('[data-trigger="onAutoplace1H"]').addEventListener('click',

4
graflow_examples/test2.html
View File

@@ -53,10 +53,10 @@
<script>
window.addEventListener('load',()=>{
let grflw3 = document.querySelector('bz-graflow.organi')
grflw3.addEventListener('subflowLoaded',
grflw3.addEventListener('bz:graflow:subflowLoaded',
(evt) => { grflw3 = evt.detail.subflow }
)
grflw3.addEventListener('subflowExited',
grflw3.addEventListener('bz:graflow:subflowExited',
(evt) => { grflw3 = evt.target }
)
document.querySelector('[data-trigger="onAutoplace3H"]').addEventListener('click',

2
graflow_examples/test3.1.html
View File

@@ -56,7 +56,7 @@
grflw2.setAttribute('tension', document.querySelector('input[data-id="eic"]').value)
grflw2.setAttribute('align', document.querySelector('select[name="align"]').value)
grflw2.setAttribute('wiretype', document.querySelector('select[name="wiretype"]').value)
grflw2.addEventListener('refresh',
grflw2.addEventListener('bz:graflow:refresh',
(evt) => { grflw2.style.transform = 'scale(.75)'; }
)
document.querySelector('[data-trigger="onAutoplace2H"]').addEventListener('click',

4
graflow_examples/test3.html
View File

@@ -56,10 +56,10 @@
grflw2.setAttribute('tension', document.querySelector('input[data-id="eic"]').value)
grflw2.setAttribute('align', document.querySelector('select[name="align"]').value)
grflw2.setAttribute('wiretype', document.querySelector('select[name="wiretype"]').value)
grflw2.addEventListener('subflowLoaded',
grflw2.addEventListener('bz:graflow:subflowLoaded',
(evt) => { grflw2 = evt.detail.subflow }
)
grflw2.addEventListener('subflowExited',
grflw2.addEventListener('bz:graflow:subflowExited',
(evt) => { grflw2 = evt.target }
)
document.querySelector('[data-trigger="onAutoplace2H"]').addEventListener('click',

4
graflow_examples/test4.5.html
View File

@@ -56,10 +56,10 @@
grflw4.setAttribute('tension', document.querySelector('input[data-id="icmp"]').value)
grflw4.setAttribute('align', document.querySelector('select[name="align"]').value)
grflw4.setAttribute('wiretype', document.querySelector('select[name="wiretype"]').value)
grflw4.addEventListener('subflowLoaded',
grflw4.addEventListener('bz:graflow:subflowLoaded',
(evt) => { grflw4 = evt.detail.subflow }
)
grflw4.addEventListener('subflowExited',
grflw4.addEventListener('bz:graflow:subflowExited',
(evt) => { grflw4 = evt.target }
)
document.querySelector('[data-trigger="onAutoplace4H"]').addEventListener('click',

6
graflow_examples/test4.html
View File

@@ -82,10 +82,10 @@
const severities = ['primary', 'info', 'success', 'warning', 'danger', 'accent']
let grflw4 = document.querySelector('bz-graflow.icmp')
grflw4.addEventListener('subflowLoaded',
grflw4.addEventListener('bz:graflow:subflowLoaded',
(evt) => { grflw4 = evt.detail.subflow }
)
grflw4.addEventListener('subflowExited',
grflw4.addEventListener('bz:graflow:subflowExited',
(evt) => { grflw4 = evt.target }
)
document.querySelector('[data-trigger="onAutoplace4H"]').addEventListener('click',
@@ -117,7 +117,7 @@
if (sidx >= severities.length) sidx = 0
setTimeout(sevanimation, 1000)
}
grflw4.addEventListener('refreshed',() => {
grflw4.addEventListener('bz:graflow:refreshed',() => {
if(aifmi) return
aifmi = grflw4.stagedNodes['aifm-investment'].querySelector('.body')
sevanimation()

4
graflow_examples/test5.html
View File

@@ -53,10 +53,10 @@
<script>
window.addEventListener('load',()=>{
let grflw1 = document.querySelector('bz-graflow.compunet')
grflw1.addEventListener('subflowLoaded',
grflw1.addEventListener('bz:graflow:subflowLoaded',
(evt) => { grflw1 = evt.detail.subflow }
)
grflw1.addEventListener('subflowExited',
grflw1.addEventListener('bz:graflow:subflowExited',
(evt) => { grflw1 = evt.target }
)
document.querySelector('[data-trigger="onAutoplace1H"]').addEventListener('click',

4
graflow_examples/test6.html
View File

@@ -56,10 +56,10 @@
grflw1.setAttribute('tension', document.querySelector('input[data-id="compunet"]').value)
grflw1.setAttribute('align', document.querySelector('select[name="align"]').value)
grflw1.setAttribute('wiretype', document.querySelector('select[name="wiretype"]').value)
grflw1.addEventListener('subflowLoaded',
grflw1.addEventListener('bz:graflow:subflowLoaded',
(evt) => { grflw1 = evt.detail.subflow }
)
grflw1.addEventListener('subflowExited',
grflw1.addEventListener('bz:graflow:subflowExited',
(evt) => { grflw1 = evt.target }
)
document.querySelector('[data-trigger="onAutoplace1H"]').addEventListener('click',