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

Merge branch 'main' of https://gitea.internike.com/nike/buildoz

Browse Source
This commit is contained in:
STEINNI
2026-03-10 20:36:26 +00:00
parent 11d3247a8c e55630f986
commit 2de301dbed
17 changed files with 259 additions and 106 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: #FF08!important;
}
/* BZGRAFLOW_CORE_END */ /* BZGRAFLOW_CORE_END */

46
bzGraflow.js
View File

@@ -39,7 +39,7 @@ class BZgraflow extends Buildoz{
static async getCoreCss(){ static async getCoreCss(){
if(BZgraflow._coreCssPromise) return(await BZgraflow._coreCssPromise) if(BZgraflow._coreCssPromise) return(await BZgraflow._coreCssPromise)
BZgraflow._coreCssPromise = (async() => { BZgraflow._coreCssPromise = (async() => {
const res = await fetch('/app/thirdparty/buildoz/buildoz.css') const res = await fetch('/buildoz/buildoz.css')
const css = await res.text() const css = await res.text()
const m = css.match(/\/\*\s*BZGRAFLOW_CORE_START\s*\*\/([\s\S]*?)\/\*\s*BZGRAFLOW_CORE_END\s*\*\//) const m = css.match(/\/\*\s*BZGRAFLOW_CORE_START\s*\*\/([\s\S]*?)\/\*\s*BZGRAFLOW_CORE_END\s*\*\//)
const core = m ? m[1] : '' const core = m ? m[1] : ''
@@ -1012,6 +1012,11 @@ class BZgraflow extends Buildoz{
wire.setAttribute('d', path) wire.setAttribute('d', path)
} }
} }
this.dispatchEvent(new CustomEvent('wiresUpdated', {
detail: { nid, orientation, LondLinkfix },
bubbles: true,
composed: true,
}))
} }
getLink(nid1, nid2){ getLink(nid1, nid2){
@@ -1277,16 +1282,49 @@ class EditWires{
this.graflow = graflow this.graflow = graflow
this.nodesContainer = this.graflow.mainContainer.querySelector('.bzgf-nodes-container') this.nodesContainer = this.graflow.mainContainer.querySelector('.bzgf-nodes-container')
this.state = null this.state = null
this.graflow.tabIndex = 0 // Make keyboard reactive
this.graflow.addEventListener('refreshed', this.enableEditWires.bind(this)) this.graflow.addEventListener('refreshed', this.enableEditWires.bind(this))
this.graflow.addEventListener('wiresUpdated', this.enableEditWires.bind(this))
this.graflow.addEventListener('keyup', this.onKeyUp.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))
if(clone.dataset.id == this.currentlySelectedWire?.dataset.id) this.onSelectWire({target: clone})
} }
} }
onSelectWire(e){ onSelectWire(e){
const wire = e.target const wire = e.target
console.log('wire', wire) if(this.currentlySelectedWire) this.currentlySelectedWire.style.setProperty('stroke', '#0000', 'important')
if(wire==this.currentlySelectedWire) {
this.currentlySelectedWire = null
return
}
this.currentlySelectedWire = wire
wire.style.setProperty('stroke', '#FF0F', 'important')
}
onKeyUp(e){
if((e.key == 'Delete') && this.currentlySelectedWire) {
this.graflow.flow.links = this.graflow.flow.links.filter(link => link.id != this.currentlySelectedWire.dataset.id)
this.graflow.stagedWires[this.currentlySelectedWire.dataset.id].remove()
delete(this.graflow.stagedWires[this.currentlySelectedWire.dataset.id])
this.currentlySelectedWire.remove()
this.currentlySelectedWire = null
return
}
if(e.key == 'Escape') {
if(this.currentlySelectedWire) this.currentlySelectedWire.style.setProperty('stroke', '#0000', 'important')
this.currentlySelectedWire = null
return
}
} }
} }

4
graflow_examples/flows/testFlow1.1.json
View File

@@ -1,5 +1,5 @@
{ {
"nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesTest1.html", "nodesFile": "/buildoz/graflow_examples/nodesLib/nodesTest1.html",
"flow": { "flow": {
"nodes":[ "nodes":[
{ "nodeType": "inc", { "nodeType": "inc",
@@ -8,7 +8,7 @@
}, },
{ "nodeType": "inc", { "nodeType": "inc",
"subflow": { "subflow": {
"url": "/app/thirdparty/buildoz/graflow_examples/flows/testFlowEic.json", "url": "/buildoz/graflow_examples/flows/testFlowEic.json",
"portLinks": [ "portLinks": [
{ "refNodeType": "refnodein", "refnodePort": "out1", { "refNodeType": "refnodein", "refnodePort": "out1",
"parentPort": "in1", "parentPort": "in1",

2
graflow_examples/flows/testFlow1.json
View File

@@ -1,5 +1,5 @@
{ {
"nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesTest1.html", "nodesFile": "/buildoz/graflow_examples/nodesLib/nodesTest1.html",
"flow": { "flow": {
"nodes":[ "nodes":[
{ "nodeType": "inc", { "nodeType": "inc",

2
graflow_examples/flows/testFlow16ports.json
View File

@@ -1,5 +1,5 @@
{ {
"nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodes16ports.html", "nodesFile": "/buildoz/graflow_examples/nodesLib/nodes16ports.html",
"flow": { "flow": {
"nodes": [ "nodes": [
{ {

2
graflow_examples/flows/testFlow2.json
View File

@@ -1,5 +1,5 @@
{ {
"nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesTest2.html", "nodesFile": "/buildoz/graflow_examples/nodesLib/nodesTest2.html",
"flow": { "flow": {
"nodes":[ "nodes":[
{ "nodeType": "process", { "nodeType": "process",

4
graflow_examples/flows/testFlowEic.json
View File

@@ -1,5 +1,5 @@
{ {
"nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesEIC.html", "nodesFile": "/buildoz/graflow_examples/nodesLib/nodesEIC.html",
"flow": { "flow": {
"nodes":[ "nodes":[
{ "nodeType": "eicBasic", { "nodeType": "eicBasic",
@@ -29,7 +29,7 @@
}, },
"data": { "a": "a3", "b":"b3"}, "data": { "a": "a3", "b":"b3"},
"subflow": { "subflow": {
"url": "/app/thirdparty/buildoz/graflow_examples/flows/testFlowICMP.json", "url": "/buildoz/graflow_examples/flows/testFlowICMP.json",
"portLinks": [ "portLinks": [
{ "refNodeType": "refnodein", "refnodePort": "out1", { "refNodeType": "refnodein", "refnodePort": "out1",
"parentPort": "in1", "parentPort": "in1",

2
graflow_examples/flows/testFlowICMP.json
View File

@@ -1,5 +1,5 @@
{ {
"nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesEIC.html", "nodesFile": "/buildoz/graflow_examples/nodesLib/nodesEIC.html",
"flow": { "flow": {
"nodes":[ "nodes":[
{ "nodeType": "eicBasic", { "nodeType": "eicBasic",

2
graflow_examples/flows/testFlowICMP2.json
View File

@@ -1,5 +1,5 @@
{ {
"nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesEIC2.html", "nodesFile": "/buildoz/graflow_examples/nodesLib/nodesEIC2.html",
"flow": { "flow": {
"nodes":[ "nodes":[
{ "nodeType": "eicBasic", { "nodeType": "eicBasic",

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>

20
graflow_examples/test1.html
View File

@@ -4,18 +4,18 @@
<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">
<link type="text/css" rel="stylesheet" href="/app/thirdparty/eicui/eicui-2.0.css"> <link type="text/css" rel="stylesheet" href="/eicui/eicui-2.0.css">
<link type="text/css" rel="stylesheet" href="/app/thirdparty/buildoz/buildoz.css"> <link type="text/css" rel="stylesheet" href="/buildoz/buildoz.css">
<script src="/app/thirdparty/buildoz/buildoz.js"></script> <script src="/buildoz/buildoz.js"></script>
<script src="/app/thirdparty/buildoz/bzGraflow.js"></script> <script src="/buildoz/bzGraflow.js"></script>
<style> <style>
@font-face { /*FF does not indirectly load if inside a shawdow-dom */ @font-face { /*FF does not indirectly load if inside a shawdow-dom */
font-family: 'glyphs'; font-family: 'glyphs';
src: url('/app/assets/styles/fonts/glyphs.eot'); src: url('/assets/styles/fonts/glyphs.eot');
src: url('/app/assets/styles/fonts/glyphs.eot') format('embedded-opentype'), src: url('/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
url('/app/assets/styles/fonts/glyphs.ttf') format('truetype'), url('/assets/styles/fonts/glyphs.ttf') format('truetype'),
url('/app/assets/styles/fonts/glyphs.woff') format('woff'), url('/assets/styles/fonts/glyphs.woff') format('woff'),
url('/app/assets/styles/fonts/glyphs.svg') format('svg'); url('/assets/styles/fonts/glyphs.svg') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: block; font-display: block;
@@ -76,7 +76,7 @@
</head> </head>
<body> <body>
<bz-graflow class="compunet" flow="/app/thirdparty/buildoz/graflow_examples/flows/testFlow1.1.json" tension="60" isolated> <bz-graflow class="compunet" flow="/buildoz/graflow_examples/flows/testFlow1.1.json" tension="60" isolated>
<div class="demooptions"> <!-- just for demo purposes --> <div class="demooptions"> <!-- just for demo purposes -->
<button data-trigger="onAutoplace1H">Auto-place Horizontal</button> <button data-trigger="onAutoplace1H">Auto-place Horizontal</button>
<button data-trigger="onAutoplace1V">Auto-place Vertical</button> <button data-trigger="onAutoplace1V">Auto-place Vertical</button>

20
graflow_examples/test2.html
View File

@@ -4,18 +4,18 @@
<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">
<link type="text/css" rel="stylesheet" href="/app/thirdparty/eicui/eicui-2.0.css"> <link type="text/css" rel="stylesheet" href="/eicui/eicui-2.0.css">
<link type="text/css" rel="stylesheet" href="/app/thirdparty/buildoz/buildoz.css"> <link type="text/css" rel="stylesheet" href="/buildoz/buildoz.css">
<script src="/app/thirdparty/buildoz/buildoz.js"></script> <script src="/buildoz/buildoz.js"></script>
<script src="/app/thirdparty/buildoz/bzGraflow.js"></script> <script src="/buildoz/bzGraflow.js"></script>
<style> <style>
@font-face { /*FF does not indirectly load if inside a shawdow-dom */ @font-face { /*FF does not indirectly load if inside a shawdow-dom */
font-family: 'glyphs'; font-family: 'glyphs';
src: url('/app/assets/styles/fonts/glyphs.eot'); src: url('/assets/styles/fonts/glyphs.eot');
src: url('/app/assets/styles/fonts/glyphs.eot') format('embedded-opentype'), src: url('/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
url('/app/assets/styles/fonts/glyphs.ttf') format('truetype'), url('/assets/styles/fonts/glyphs.ttf') format('truetype'),
url('/app/assets/styles/fonts/glyphs.woff') format('woff'), url('/assets/styles/fonts/glyphs.woff') format('woff'),
url('/app/assets/styles/fonts/glyphs.svg') format('svg'); url('/assets/styles/fonts/glyphs.svg') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: block; font-display: block;
@@ -76,7 +76,7 @@
</head> </head>
<body> <body>
<bz-graflow class="organi" flow="/app/thirdparty/buildoz/graflow_examples/flows/testFlow2.json" tension="60" isolated> <bz-graflow class="organi" flow="/buildoz/graflow_examples/flows/testFlow2.json" tension="60" isolated>
<div class="demooptions"> <div class="demooptions">
<button data-trigger="onAutoplace3H">Auto-place Horizontal</button> <button data-trigger="onAutoplace3H">Auto-place Horizontal</button>
<button data-trigger="onAutoplace3V">Auto-place Vertical</button> <button data-trigger="onAutoplace3V">Auto-place Vertical</button>

31
graflow_examples/test3.html
View File

@@ -4,18 +4,18 @@
<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">
<link type="text/css" rel="stylesheet" href="/app/thirdparty/eicui/eicui-2.0.css"> <link type="text/css" rel="stylesheet" href="/eicui/eicui-2.0.css">
<link type="text/css" rel="stylesheet" href="/app/thirdparty/buildoz/buildoz.css"> <link type="text/css" rel="stylesheet" href="/buildoz/buildoz.css">
<script src="/app/thirdparty/buildoz/buildoz.js"></script> <script src="/buildoz/buildoz.js"></script>
<script src="/app/thirdparty/buildoz/bzGraflow.js"></script> <script src="/buildoz/bzGraflow.js"></script>
<style> <style>
@font-face { /*FF does not indirectly load if inside a shawdow-dom */ @font-face { /*FF does not indirectly load if inside a shawdow-dom */
font-family: 'glyphs'; font-family: 'glyphs';
src: url('/app/assets/styles/fonts/glyphs.eot'); src: url('/assets/styles/fonts/glyphs.eot');
src: url('/app/assets/styles/fonts/glyphs.eot') format('embedded-opentype'), src: url('/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
url('/app/assets/styles/fonts/glyphs.ttf') format('truetype'), url('/assets/styles/fonts/glyphs.ttf') format('truetype'),
url('/app/assets/styles/fonts/glyphs.woff') format('woff'), url('/assets/styles/fonts/glyphs.woff') format('woff'),
url('/app/assets/styles/fonts/glyphs.svg') format('svg'); url('/assets/styles/fonts/glyphs.svg') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: block; font-display: block;
@@ -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 }
) )
@@ -76,22 +79,22 @@
</head> </head>
<body> <body>
<bz-graflow class="eic" flow="/app/thirdparty/buildoz/graflow_examples/flows/testFlowEic.json" tension="60"> <bz-graflow class="eic" flow="/buildoz/graflow_examples/flows/testFlowEic.json" tension="60">
<div class="demooptions"> <!-- just for demo purposes --> <div class="demooptions"> <!-- just for demo purposes -->
<button data-trigger="onAutoplace2H">Auto-place Horizontal</button> <button data-trigger="onAutoplace2H">Auto-place Horizontal</button>
<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>

27
graflow_examples/test4.5.html
View File

@@ -4,18 +4,18 @@
<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">
<link type="text/css" rel="stylesheet" href="/app/thirdparty/eicui/eicui-2.0.css"> <link type="text/css" rel="stylesheet" href="/eicui/eicui-2.0.css">
<link type="text/css" rel="stylesheet" href="/app/thirdparty/buildoz/buildoz.css"> <link type="text/css" rel="stylesheet" href="/buildoz/buildoz.css">
<script src="/app/thirdparty/buildoz/buildoz.js"></script> <script src="/buildoz/buildoz.js"></script>
<script src="/app/thirdparty/buildoz/bzGraflow.js"></script> <script src="/buildoz/bzGraflow.js"></script>
<style> <style>
@font-face { /*FF does not indirectly load if inside a shawdow-dom */ @font-face { /*FF does not indirectly load if inside a shawdow-dom */
font-family: 'glyphs'; font-family: 'glyphs';
src: url('/app/assets/styles/fonts/glyphs.eot'); src: url('/assets/styles/fonts/glyphs.eot');
src: url('/app/assets/styles/fonts/glyphs.eot') format('embedded-opentype'), src: url('/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
url('/app/assets/styles/fonts/glyphs.ttf') format('truetype'), url('/assets/styles/fonts/glyphs.ttf') format('truetype'),
url('/app/assets/styles/fonts/glyphs.woff') format('woff'), url('/assets/styles/fonts/glyphs.woff') format('woff'),
url('/app/assets/styles/fonts/glyphs.svg') format('svg'); url('/assets/styles/fonts/glyphs.svg') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: block; font-display: block;
@@ -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 }
) )
@@ -76,15 +79,15 @@
</head> </head>
<body> <body>
<bz-graflow class="icmp" flow="/app/thirdparty/buildoz/graflow_examples/flows/testFlowICMP2.json" tension="20" align="first" wiretype="ortho" gapx="100" gapy="30"> <bz-graflow class="icmp" flow="/buildoz/graflow_examples/flows/testFlowICMP2.json" tension="20" align="first" wiretype="ortho" gapx="100" gapy="30">
<div class="demooptions"> <!-- just for demo purposes --> <div class="demooptions"> <!-- just for demo purposes -->
<button data-trigger="onAutoplace4H">Auto-place Horizontal</button> <button data-trigger="onAutoplace4H">Auto-place Horizontal</button>
<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>

27
graflow_examples/test4.html
View File

@@ -4,18 +4,18 @@
<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">
<link type="text/css" rel="stylesheet" href="/app/thirdparty/eicui/eicui-2.0.css"> <link type="text/css" rel="stylesheet" href="/eicui/eicui-2.0.css">
<link type="text/css" rel="stylesheet" href="/app/thirdparty/buildoz/buildoz.css"> <link type="text/css" rel="stylesheet" href="/buildoz/buildoz.css">
<script src="/app/thirdparty/buildoz/buildoz.js"></script> <script src="/buildoz/buildoz.js"></script>
<script src="/app/thirdparty/buildoz/bzGraflow.js"></script> <script src="/buildoz/bzGraflow.js"></script>
<style> <style>
@font-face { /*FF does not indirectly load if inside a shawdow-dom */ @font-face { /*FF does not indirectly load if inside a shawdow-dom */
font-family: 'glyphs'; font-family: 'glyphs';
src: url('/app/assets/styles/fonts/glyphs.eot'); src: url('/assets/styles/fonts/glyphs.eot');
src: url('/app/assets/styles/fonts/glyphs.eot') format('embedded-opentype'), src: url('/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
url('/app/assets/styles/fonts/glyphs.ttf') format('truetype'), url('/assets/styles/fonts/glyphs.ttf') format('truetype'),
url('/app/assets/styles/fonts/glyphs.woff') format('woff'), url('/assets/styles/fonts/glyphs.woff') format('woff'),
url('/app/assets/styles/fonts/glyphs.svg') format('svg'); url('/assets/styles/fonts/glyphs.svg') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: block; font-display: block;
@@ -83,11 +83,8 @@
const el = document.querySelector('.container') const el = document.querySelector('.container')
let timer = null // debounce let timer = null // debounce
const ro = new ResizeObserver(([entry]) => { const ro = new ResizeObserver(([entry]) => {
clearTimeout(timer) const grfl = entry.target.querySelector('bz-graflow')
timer = setTimeout(() => { grfl.autofit()
const grfl = entry.target.querySelector('bz-graflow')
grfl.autofit()
}, 200)
}) })
ro.observe(el) ro.observe(el)
@@ -97,7 +94,7 @@
<body> <body>
<div class="container" style="padding:0;""> <div class="container" style="padding:0;"">
<bz-graflow class="icmp" flow="/app/thirdparty/buildoz/graflow_examples/flows/testFlowICMP.json" tension="60"> <bz-graflow class="icmp" flow="/buildoz/graflow_examples/flows/testFlowICMP.json" tension="60">
<div class="demooptions"> <div class="demooptions">
<button data-trigger="onAutoplace4H">Auto-place Horizontal</button> <button data-trigger="onAutoplace4H">Auto-place Horizontal</button>
<button data-trigger="onAutoplace4V">Auto-place Vertical</button> <button data-trigger="onAutoplace4V">Auto-place Vertical</button>

20
graflow_examples/test5.html
View File

@@ -4,18 +4,18 @@
<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">
<link type="text/css" rel="stylesheet" href="/app/thirdparty/eicui/eicui-2.0.css"> <link type="text/css" rel="stylesheet" href="/eicui/eicui-2.0.css">
<link type="text/css" rel="stylesheet" href="/app/thirdparty/buildoz/buildoz.css"> <link type="text/css" rel="stylesheet" href="/buildoz/buildoz.css">
<script src="/app/thirdparty/buildoz/buildoz.js"></script> <script src="/buildoz/buildoz.js"></script>
<script src="/app/thirdparty/buildoz/bzGraflow.js"></script> <script src="/buildoz/bzGraflow.js"></script>
<style> <style>
@font-face { /*FF does not indirectly load if inside a shawdow-dom */ @font-face { /*FF does not indirectly load if inside a shawdow-dom */
font-family: 'glyphs'; font-family: 'glyphs';
src: url('/app/assets/styles/fonts/glyphs.eot'); src: url('/assets/styles/fonts/glyphs.eot');
src: url('/app/assets/styles/fonts/glyphs.eot') format('embedded-opentype'), src: url('/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
url('/app/assets/styles/fonts/glyphs.ttf') format('truetype'), url('/assets/styles/fonts/glyphs.ttf') format('truetype'),
url('/app/assets/styles/fonts/glyphs.woff') format('woff'), url('/assets/styles/fonts/glyphs.woff') format('woff'),
url('/app/assets/styles/fonts/glyphs.svg') format('svg'); url('/assets/styles/fonts/glyphs.svg') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: block; font-display: block;
@@ -76,7 +76,7 @@
</head> </head>
<body> <body>
<bz-graflow class="compunet" flow="/app/thirdparty/buildoz/graflow_examples/flows/testFlow1.json" tension="60" isolated edit="nodesmove,wires,dropnodes" > <bz-graflow class="compunet" flow="/buildoz/graflow_examples/flows/testFlow1.json" tension="60" isolated edit="nodesmove,wires,dropnodes" >
<div class="demooptions"> <!-- just for demo purposes --> <div class="demooptions"> <!-- just for demo purposes -->
<button data-trigger="onAutoplace1H">Auto-place Horizontal</button> <button data-trigger="onAutoplace1H">Auto-place Horizontal</button>
<button data-trigger="onAutoplace1V">Auto-place Vertical</button> <button data-trigger="onAutoplace1V">Auto-place Vertical</button>

25
graflow_examples/test6.html
View File

@@ -4,18 +4,18 @@
<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">
<link type="text/css" rel="stylesheet" href="/app/thirdparty/eicui/eicui-2.0.css"> <link type="text/css" rel="stylesheet" href="/eicui/eicui-2.0.css">
<link type="text/css" rel="stylesheet" href="/app/thirdparty/buildoz/buildoz.css"> <link type="text/css" rel="stylesheet" href="/buildoz/buildoz.css">
<script src="/app/thirdparty/buildoz/buildoz.js"></script> <script src="/buildoz/buildoz.js"></script>
<script src="/app/thirdparty/buildoz/bzGraflow.js"></script> <script src="/buildoz/bzGraflow.js"></script>
<style> <style>
@font-face { /*FF does not indirectly load if inside a shawdow-dom */ @font-face { /*FF does not indirectly load if inside a shawdow-dom */
font-family: 'glyphs'; font-family: 'glyphs';
src: url('/app/assets/styles/fonts/glyphs.eot'); src: url('/assets/styles/fonts/glyphs.eot');
src: url('/app/assets/styles/fonts/glyphs.eot') format('embedded-opentype'), src: url('/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
url('/app/assets/styles/fonts/glyphs.ttf') format('truetype'), url('/assets/styles/fonts/glyphs.ttf') format('truetype'),
url('/app/assets/styles/fonts/glyphs.woff') format('woff'), url('/assets/styles/fonts/glyphs.woff') format('woff'),
url('/app/assets/styles/fonts/glyphs.svg') format('svg'); url('/assets/styles/fonts/glyphs.svg') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: block; font-display: block;
@@ -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 }
@@ -78,7 +79,7 @@
</head> </head>
<body> <body>
<bz-graflow class="compunet" flow="/app/thirdparty/buildoz/graflow_examples/flows/testFlow16ports.json" tension="60" isolated edit="nodesmove" > <bz-graflow class="compunet" flow="/buildoz/graflow_examples/flows/testFlow16ports.json" tension="60" isolated edit="nodesmove" >
<div class="demooptions"> <!-- just for demo purposes --> <div class="demooptions"> <!-- just for demo purposes -->
<button data-trigger="onAutoplace1H">Auto-place Horizontal</button> <button data-trigger="onAutoplace1H">Auto-place Horizontal</button>
<button data-trigger="onAutoplace1V">Auto-place Vertical</button> <button data-trigger="onAutoplace1V">Auto-place Vertical</button>
@@ -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>