fireEvent + graflow uses new-style fireEvent

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

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>

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>

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',

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',

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',

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',

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',

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()

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',

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',