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

graflow: added autoplace align 1st & last

Browse Source
This commit is contained in:
STEINNI
2026-02-21 22:24:10 +00:00
parent d9bdc34210
commit 91274c4542
2 changed files with 54 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/html/test.html
+36 -12
View File
@@ -56,47 +56,47 @@
window.addEventListener('load',()=>{
const grflw1 = document.querySelector('bz-graflow.compunet')
document.querySelector('[data-trigger="onAutoplace1H"]').addEventListener('click',
(evt) => { grflw1.autoPlace('horizontal', 80, 30, 1000) }
(evt) => { grflw1.autoPlace('horizontal', 80, 30, 1000, document.querySelector('[data-id="compunet"]').value) }
)
document.querySelector('[data-trigger="onAutoplace1V"]').addEventListener('click',
(evt) => { grflw1.autoPlace('vertical') }
(evt) => { grflw1.autoPlace('vertical', 80, 30, 1000, document.querySelector('[data-id="compunet"]').value) }
)
const grflw2 = document.querySelector('bz-graflow.eic')
document.querySelector('[data-trigger="onAutoplace2H"]').addEventListener('click',
(evt) => { grflw2.autoPlace('horizontal', 100, 30, 1000) }
(evt) => { grflw2.autoPlace('horizontal', 100, 30, 1000, document.querySelector('[data-id="eic"]').value) }
)
document.querySelector('[data-trigger="onAutoplace2V"]').addEventListener('click',
(evt) => { grflw2.autoPlace('vertical', 80, 80, 1000) }
(evt) => { grflw2.autoPlace('vertical', 80, 80, 1000, document.querySelector('[data-id="eic"]').value) }
)
const grflw3 = document.querySelector('bz-graflow.organi')
document.querySelector('[data-trigger="onAutoplace3H"]').addEventListener('click',
(evt) => { grflw3.autoPlace('horizontal', 80, 80, 1000) }
(evt) => { grflw3.autoPlace('horizontal', 80, 80, 1000, document.querySelector('[data-id="organi"]').value) }
)
document.querySelector('[data-trigger="onAutoplace3V"]').addEventListener('click',
(evt) => { grflw3.autoPlace('vertical', 80, 30, 1000) }
(evt) => { grflw3.autoPlace('vertical', 80, 30, 1000, document.querySelector('[data-id="organi"]').value) }
)
const grflw4 = document.querySelector('bz-graflow.icmp')
document.querySelector('[data-trigger="onAutoplace4H"]').addEventListener('click',
(evt) => { grflw4.autoPlace('horizontal', 100, 30, 1000) }
(evt) => { grflw4.autoPlace('horizontal', 100, 30, 1000, document.querySelector('[data-id="icmp"]').value) }
)
document.querySelector('[data-trigger="onAutoplace4V"]').addEventListener('click',
(evt) => { grflw4.autoPlace('vertical', 80, 80, 1000) }
(evt) => { grflw4.autoPlace('vertical', 80, 80, 1000, document.querySelector('[data-id="icmp"]').value) }
)
document.querySelector('[data-id="compunet"]').addEventListener('change',
document.querySelector('input[data-id="compunet"]').addEventListener('change',
(evt) => { grflw1.setAttribute('tension', evt.target.value); grflw1.refresh() }
)
document.querySelector('[data-id="eic"]').addEventListener('change',
document.querySelector('input[data-id="eic"]').addEventListener('change',
(evt) => { grflw2.setAttribute('tension', evt.target.value); grflw2.refresh() }
)
document.querySelector('[data-id="organi"]').addEventListener('change',
document.querySelector('input[data-id="organi"]').addEventListener('change',
(evt) => { grflw3.setAttribute('tension', evt.target.value); grflw3.refresh() }
)
document.querySelector('[data-id="icmp"]').addEventListener('change',
document.querySelector('input[data-id="icmp"]').addEventListener('change',
(evt) => { grflw4.setAttribute('tension', evt.target.value); grflw4.refresh() }
)
})
@@ -108,6 +108,12 @@
<div class="demooptions"> <!-- just for demo purposes -->
<button data-trigger="onAutoplace1H">Auto-place Horizontal</button>
<button data-trigger="onAutoplace1V">Auto-place Vertical</button>
<select name="align" data-id="compunet">
<option value="center">Center</option>
<option value="first">First</option>
<option value="last">Last</option>
<option value="auto">Auto</option>
</select>
<div class-"cols-2"=""><label>tension</label><input data-id="compunet" type="number" size="2" value="60"></div>
</div>
</bz-graflow>
@@ -116,6 +122,12 @@
<div class="demooptions"> <!-- just for demo purposes -->
<button data-trigger="onAutoplace2H">Auto-place Horizontal</button>
<button data-trigger="onAutoplace2V">Auto-place Vertical</button>
<select name="align" data-id="eic">
<option value="center">Center</option>
<option value="first">First</option>
<option value="last">Last</option>
<option value="auto">Auto</option>
</select>
<div class-"cols-2"=""><label>tension</label><input data-id="eic" type="number" size="2" value="60"></div>
</div>
</bz-graflow>
@@ -124,6 +136,12 @@
<div class="demooptions">
<button data-trigger="onAutoplace3H">Auto-place Horizontal</button>
<button data-trigger="onAutoplace3V">Auto-place Vertical</button>
<select name="align" data-id="organi">
<option value="center">Center</option>
<option value="first">First</option>
<option value="last">Last</option>
<option value="auto">Auto</option>
</select>
<div class-"cols-2"=""><label>tension</label><input data-id="organi" type="number" size="2" value="60"></div>
</div>
</bz-graflow>
@@ -133,6 +151,12 @@
<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="auto">Auto</option>
</select>
<div class-"cols-2"=""><label>tension</label><input data-id="icmp" type="number" size="2" value="60"></div>
</div>
</bz-graflow>