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

graflow: improved test pages

Browse Source
This commit is contained in:
STEINNI
2026-03-09 19:28:34 +00:00
parent 2efe358891
commit 080c919569
6 changed files with 141 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
buildoz.css
View File

@@ -247,4 +247,12 @@ bz-graflow button.bzgf-zoom-out{
left: 5px; left: 5px;
top: 5px; top: 5px;
} }
bz-graflow path.bzgf-wirecoat{
pointer-events: auto;
stroke-width: 6;
stroke: #0000!important;
}
bz-graflow path.bzgf-wirecoat:hover{
stroke: #FF0F!important;
}
/* BZGRAFLOW_CORE_END */ /* BZGRAFLOW_CORE_END */

6
bzGraflow.js
View File

@@ -1280,8 +1280,12 @@ class EditWires{
this.graflow.addEventListener('refreshed', this.enableEditWires.bind(this)) this.graflow.addEventListener('refreshed', this.enableEditWires.bind(this))
} }
enableEditWires(){ enableEditWires(){
this.graflow.wiresContainer.querySelectorAll('.bzgf-wirecoat').forEach(item => item.remove())
for(const ref in this.graflow.stagedWires ){ for(const ref in this.graflow.stagedWires ){
this.graflow.stagedWires[ref].addEventListener('click', this.onSelectWire.bind(this)) const clone = this.graflow.stagedWires[ref].cloneNode(true)
clone.classList.add('bzgf-wirecoat')
this.graflow.wiresContainer.appendChild(clone)
clone.addEventListener('click', this.onSelectWire.bind(this))
} }
} }
onSelectWire(e){ onSelectWire(e){

123
graflow_examples/test.html
View File

@@ -4,18 +4,121 @@
<title>graflow</title> <title>graflow</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
table {
margin: 0 auto;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
max-width: 10em;
min-width: 7em;
text-align: center;
}
th{
background: #555;
color: white;
}
tr > td:first-child {
text-align: left;
}
</style>
</head> </head>
<body> <body>
<ul> <table>
<li><a target="test1" href="./test1.html">test1 (P42 graph + ISOLATED + 2 depths subflows)</a></li> <thead>
<li><a target="test2" href="./test2.html">test2 (organigram) + ISOLATED</a></li> <tr>
<li><a target="test3" href="./test3.html">test3 (EIC simple + subflow + NON-ISOLATED)</a></li> <th></th>
<li><a target="test4" href="./test4.html">test4 (EIC-ICMP + NON-ISOLATED + AUTOFIT with ResizeObserver on container)</a></li> <th>Style</th>
<li><a target="test4.5" href="./test4.5.html">test4.5 (EIC-ICMP + NON-ISOLATED + single-port, ortho, oriented, aligned top)</a></li> <th>isolated</th>
<li><a target="test5" href="./test5.html">test5 (P42 graph + ISOLATED + EDITABLE)</a></li> <th>subflow</th>
<li><a target="test6" href="./test6.html">test6 (16 port combinations)</a></li> <th>autofit</th>
<th>wireStyle</th>
</ul> <th>align</th>
<th>oriented</th>
<th>nodesmove</th>
</tr>
</thead>
<tbody>
<tr>
<td><a target="test1" href="./test1.html">test1</a></td>
<td>P42</td>
<td>YES</td>
<td>2 depths</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a target="test2" href="./test2.html">test2</a></td>
<td>Organigram</td>
<td>YES</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>X</td>
<td></td>
</tr>
<tr>
<td><a target="test3" href="./test3.html">test3</a></td>
<td>EIC simple</td>
<td>NO</td>
<td>1 depth</td>
<td></td>
<td>Straight</td>
<td>First</td>
<td></td>
<td></td>
</tr>
<tr>
<td><a target="test4" href="./test4.html">test4</a></td>
<td>EIC-ICMP</td>
<td>NO</td>
<td></td>
<td>X</td>
<td>Bezier</td>
<td>Center</td>
<td></td>
<td></td>
</tr>
<tr>
<td><a target="test4.5" href="./test4.5.html">test4.5</a></td>
<td>EIC-ICMP II</td>
<td>NO</td>
<td></td>
<td></td>
<td>Ortho</td>
<td>Parent</td>
<td>X</td>
<td></td>
</tr>
<tr>
<td><a target="test5" href="./test5.html">test5</a></td>
<td>P42</td>
<td>YES</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>X</td>
</tr>
<tr>
<td><a target="test6" href="./test6.html">test6</a></td>
<td>16 ports test</td>
<td>NO</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>X</td>
</tr>
</tbody>
</table>
</body> </body>
</html> </html>

11
graflow_examples/test3.html
View File

@@ -53,6 +53,9 @@
<script> <script>
window.addEventListener('load',()=>{ window.addEventListener('load',()=>{
let grflw2 = document.querySelector('bz-graflow.eic') let grflw2 = document.querySelector('bz-graflow.eic')
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('subflowLoaded',
(evt) => { grflw2 = evt.detail.subflow } (evt) => { grflw2 = evt.detail.subflow }
) )
@@ -82,16 +85,16 @@
<button data-trigger="onAutoplace2V">Auto-place Vertical</button> <button data-trigger="onAutoplace2V">Auto-place Vertical</button>
<select name="align" data-id="eic"> <select name="align" data-id="eic">
<option value="center">Center</option> <option value="center">Center</option>
<option value="first">First</option> <option value="first" selected>First</option>
<option value="last">Last</option> <option value="last">Last</option>
<option value="parent">Parent</option> <option value="parent">Parent</option>
</select> </select>
<select name="wiretype"> <select name="wiretype">
<option value="ortho">Ortho</option> <option value="ortho">Ortho</option>
<option value="straight">Straight</option> <option value="straight"selected>Straight</option>
<option value="bezier" selected>Bezier</option> <option value="bezier">Bezier</option>
</select> </select>
<div class-"cols-2"=""><label>tension</label><input data-id="eic" type="number" size="2" value="60"></div> <div class-"cols-2"=""><label>tension</label><input data-id="eic" type="number" size="2" value="1"></div>
</div> </div>
</bz-graflow> </bz-graflow>
</body> </body>

7
graflow_examples/test4.5.html
View File

@@ -53,6 +53,9 @@
<script> <script>
window.addEventListener('load',()=>{ window.addEventListener('load',()=>{
let grflw4 = document.querySelector('bz-graflow.icmp') let grflw4 = document.querySelector('bz-graflow.icmp')
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('subflowLoaded',
(evt) => { grflw4 = evt.detail.subflow } (evt) => { grflw4 = evt.detail.subflow }
) )
@@ -82,9 +85,9 @@
<button data-trigger="onAutoplace4V">Auto-place Vertical</button> <button data-trigger="onAutoplace4V">Auto-place Vertical</button>
<select name="align" data-id="icmp"> <select name="align" data-id="icmp">
<option value="center">Center</option> <option value="center">Center</option>
<option value="first" selected>First</option> <option value="first">First</option>
<option value="last">Last</option> <option value="last">Last</option>
<option value="parent">Parent</option> <option value="parent" selected>Parent</option>
</select> </select>
<select name="wiretype"> <select name="wiretype">
<option value="ortho" selected>Ortho</option> <option value="ortho" selected>Ortho</option>

5
graflow_examples/test6.html
View File

@@ -54,6 +54,7 @@
window.addEventListener('load',()=>{ window.addEventListener('load',()=>{
let grflw1 = document.querySelector('bz-graflow.compunet') let grflw1 = document.querySelector('bz-graflow.compunet')
grflw1.setAttribute('tension', document.querySelector('input[data-id="compunet"]').value) 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.setAttribute('wiretype', document.querySelector('select[name="wiretype"]').value)
grflw1.addEventListener('subflowLoaded', grflw1.addEventListener('subflowLoaded',
(evt) => { grflw1 = evt.detail.subflow } (evt) => { grflw1 = evt.detail.subflow }
@@ -89,9 +90,9 @@
<option value="parent">Parent</option> <option value="parent">Parent</option>
</select> </select>
<select name="wiretype"> <select name="wiretype">
<option value="ortho">Ortho</option> <option value="ortho" selected>Ortho</option>
<option value="straight">Straight</option> <option value="straight">Straight</option>
<option value="bezier" selected>Bezier</option> <option value="bezier">Bezier</option>
</select> </select>
<div class-"cols-2"=""><label>tension</label><input data-id="compunet" type="number" size="2" value="20"></div> <div class-"cols-2"=""><label>tension</label><input data-id="compunet" type="number" size="2" value="20"></div>
</div> </div>