P42/P42_UI
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

graflow: autofit OK

Browse Source
This commit is contained in:
STEINNI
2026-03-07 18:36:01 +00:00
parent 61855a3416
commit a967576d4b
2 changed files with 52 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/html/test4.html
+41 -19
View File
@@ -49,6 +49,14 @@
border: 2px solid black;
}
bz-graflow.icmp{ grid-column: 1 / -1; width: 100vw; height: 80vh; background: var(--eicui-base-color-grey-10); }
.container {
resize: both;
overflow: auto; /* required in practice */
min-width: 800px;
min-height: 300px;
border: 1px solid #999;
padding: 1rem;
}
</style>
<script>
window.addEventListener('load',()=>{
@@ -70,29 +78,43 @@
)
document.querySelector('select[name="wiretype"]').addEventListener('change',
(evt) => { grflw4.setAttribute('wiretype', evt.target.value); grflw4.refresh() }
)
)
const el = document.querySelector('.container')
let timer = null // debounce
const ro = new ResizeObserver(([entry]) => {
clearTimeout(timer)
timer = setTimeout(() => {
const grfl = entry.target.querySelector('bz-graflow')
grfl.autofit()
}, 200)
})
ro.observe(el)
})
</script>
</head>
<body>
<bz-graflow class="icmp" flow="/app/assets/json/bzGraflow/testFlowICMP.json" tension="60">
<div class="demooptions"> <!-- just for demo purposes -->
<button data-trigger="onAutoplace4H">Auto-place Horizontal</button>
<button data-trigger="onAutoplace4V">Auto-place Vertical</button>
<select name="align" data-id="icmp">
<option value="center">Center</option>
<option value="first">First</option>
<option value="last">Last</option>
<option value="parent">Parent</option>
</select>
<select name="wiretype">
<option value="ortho">Ortho</option>
<option value="straight">Straight</option>
<option value="bezier" selected>Bezier</option>
</select>
<div class-"cols-2"=""><label>tension</label><input data-id="icmp" type="number" size="2" value="60"></div>
</div>
</bz-graflow>
<div class="container">
<bz-graflow class="icmp" flow="/app/assets/json/bzGraflow/testFlowICMP.json" tension="60">
<div class="demooptions">
<button data-trigger="onAutoplace4H">Auto-place Horizontal</button>
<button data-trigger="onAutoplace4V">Auto-place Vertical</button>
<select name="align" data-id="icmp">
<option value="center">Center</option>
<option value="first">First</option>
<option value="last">Last</option>
<option value="parent">Parent</option>
</select>
<select name="wiretype">
<option value="ortho">Ortho</option>
<option value="straight">Straight</option>
<option value="bezier" selected>Bezier</option>
</select>
<div class-"cols-2"=""><label>tension</label><input data-id="icmp" type="number" size="2" value="60"></div>
</div>
</bz-graflow>
</div>
</body>
</html>