fireEvent + graflow uses new-style fireEvent
This commit is contained in:
65
graflow_examples/etest1.html
Normal file
65
graflow_examples/etest1.html
Normal 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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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()
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user