Merge branch 'main' of https://gitea.internike.com/nike/buildoz
This commit is contained in:
@@ -247,4 +247,12 @@ bz-graflow button.bzgf-zoom-out{
|
||||
left: 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 */
|
||||
|
||||
46
bzGraflow.js
46
bzGraflow.js
@@ -39,7 +39,7 @@ class BZgraflow extends Buildoz{
|
||||
static async getCoreCss(){
|
||||
if(BZgraflow._coreCssPromise) return(await BZgraflow._coreCssPromise)
|
||||
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 m = css.match(/\/\*\s*BZGRAFLOW_CORE_START\s*\*\/([\s\S]*?)\/\*\s*BZGRAFLOW_CORE_END\s*\*\//)
|
||||
const core = m ? m[1] : ''
|
||||
@@ -1012,6 +1012,11 @@ class BZgraflow extends Buildoz{
|
||||
wire.setAttribute('d', path)
|
||||
}
|
||||
}
|
||||
this.dispatchEvent(new CustomEvent('wiresUpdated', {
|
||||
detail: { nid, orientation, LondLinkfix },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}))
|
||||
}
|
||||
|
||||
getLink(nid1, nid2){
|
||||
@@ -1277,16 +1282,49 @@ class EditWires{
|
||||
this.graflow = graflow
|
||||
this.nodesContainer = this.graflow.mainContainer.querySelector('.bzgf-nodes-container')
|
||||
this.state = null
|
||||
this.graflow.tabIndex = 0 // Make keyboard reactive
|
||||
|
||||
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 ){
|
||||
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){
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesTest1.html",
|
||||
"nodesFile": "/buildoz/graflow_examples/nodesLib/nodesTest1.html",
|
||||
"flow": {
|
||||
"nodes":[
|
||||
{ "nodeType": "inc",
|
||||
@@ -8,7 +8,7 @@
|
||||
},
|
||||
{ "nodeType": "inc",
|
||||
"subflow": {
|
||||
"url": "/app/thirdparty/buildoz/graflow_examples/flows/testFlowEic.json",
|
||||
"url": "/buildoz/graflow_examples/flows/testFlowEic.json",
|
||||
"portLinks": [
|
||||
{ "refNodeType": "refnodein", "refnodePort": "out1",
|
||||
"parentPort": "in1",
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesTest1.html",
|
||||
"nodesFile": "/buildoz/graflow_examples/nodesLib/nodesTest1.html",
|
||||
"flow": {
|
||||
"nodes":[
|
||||
{ "nodeType": "inc",
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodes16ports.html",
|
||||
"nodesFile": "/buildoz/graflow_examples/nodesLib/nodes16ports.html",
|
||||
"flow": {
|
||||
"nodes": [
|
||||
{
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesTest2.html",
|
||||
"nodesFile": "/buildoz/graflow_examples/nodesLib/nodesTest2.html",
|
||||
"flow": {
|
||||
"nodes":[
|
||||
{ "nodeType": "process",
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesEIC.html",
|
||||
"nodesFile": "/buildoz/graflow_examples/nodesLib/nodesEIC.html",
|
||||
"flow": {
|
||||
"nodes":[
|
||||
{ "nodeType": "eicBasic",
|
||||
@@ -29,7 +29,7 @@
|
||||
},
|
||||
"data": { "a": "a3", "b":"b3"},
|
||||
"subflow": {
|
||||
"url": "/app/thirdparty/buildoz/graflow_examples/flows/testFlowICMP.json",
|
||||
"url": "/buildoz/graflow_examples/flows/testFlowICMP.json",
|
||||
"portLinks": [
|
||||
{ "refNodeType": "refnodein", "refnodePort": "out1",
|
||||
"parentPort": "in1",
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesEIC.html",
|
||||
"nodesFile": "/buildoz/graflow_examples/nodesLib/nodesEIC.html",
|
||||
"flow": {
|
||||
"nodes":[
|
||||
{ "nodeType": "eicBasic",
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesEIC2.html",
|
||||
"nodesFile": "/buildoz/graflow_examples/nodesLib/nodesEIC2.html",
|
||||
"flow": {
|
||||
"nodes":[
|
||||
{ "nodeType": "eicBasic",
|
||||
|
||||
@@ -4,18 +4,121 @@
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<body>
|
||||
<ul>
|
||||
<li><a target="test1" href="./test1.html">test1 (P42 graph + ISOLATED + 2 depths subflows)</a></li>
|
||||
<li><a target="test2" href="./test2.html">test2 (organigram) + ISOLATED</a></li>
|
||||
<li><a target="test3" href="./test3.html">test3 (EIC simple + subflow + NON-ISOLATED)</a></li>
|
||||
<li><a target="test4" href="./test4.html">test4 (EIC-ICMP + NON-ISOLATED + AUTOFIT with ResizeObserver on container)</a></li>
|
||||
<li><a target="test4.5" href="./test4.5.html">test4.5 (EIC-ICMP + NON-ISOLATED + single-port, ortho, oriented, aligned top)</a></li>
|
||||
<li><a target="test5" href="./test5.html">test5 (P42 graph + ISOLATED + EDITABLE)</a></li>
|
||||
<li><a target="test6" href="./test6.html">test6 (16 port combinations)</a></li>
|
||||
|
||||
</ul>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Style</th>
|
||||
<th>isolated</th>
|
||||
<th>subflow</th>
|
||||
<th>autofit</th>
|
||||
<th>wireStyle</th>
|
||||
<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>
|
||||
</html>
|
||||
|
||||
@@ -4,18 +4,18 @@
|
||||
<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="/app/thirdparty/eicui/eicui-2.0.css">
|
||||
<link type="text/css" rel="stylesheet" href="/app/thirdparty/buildoz/buildoz.css">
|
||||
<script src="/app/thirdparty/buildoz/buildoz.js"></script>
|
||||
<script src="/app/thirdparty/buildoz/bzGraflow.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="/eicui/eicui-2.0.css">
|
||||
<link type="text/css" rel="stylesheet" href="/buildoz/buildoz.css">
|
||||
<script src="/buildoz/buildoz.js"></script>
|
||||
<script src="/buildoz/bzGraflow.js"></script>
|
||||
<style>
|
||||
@font-face { /*FF does not indirectly load if inside a shawdow-dom */
|
||||
font-family: 'glyphs';
|
||||
src: url('/app/assets/styles/fonts/glyphs.eot');
|
||||
src: url('/app/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
|
||||
url('/app/assets/styles/fonts/glyphs.ttf') format('truetype'),
|
||||
url('/app/assets/styles/fonts/glyphs.woff') format('woff'),
|
||||
url('/app/assets/styles/fonts/glyphs.svg') format('svg');
|
||||
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;
|
||||
@@ -76,7 +76,7 @@
|
||||
</head>
|
||||
|
||||
<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 -->
|
||||
<button data-trigger="onAutoplace1H">Auto-place Horizontal</button>
|
||||
<button data-trigger="onAutoplace1V">Auto-place Vertical</button>
|
||||
|
||||
@@ -4,18 +4,18 @@
|
||||
<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="/app/thirdparty/eicui/eicui-2.0.css">
|
||||
<link type="text/css" rel="stylesheet" href="/app/thirdparty/buildoz/buildoz.css">
|
||||
<script src="/app/thirdparty/buildoz/buildoz.js"></script>
|
||||
<script src="/app/thirdparty/buildoz/bzGraflow.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="/eicui/eicui-2.0.css">
|
||||
<link type="text/css" rel="stylesheet" href="/buildoz/buildoz.css">
|
||||
<script src="/buildoz/buildoz.js"></script>
|
||||
<script src="/buildoz/bzGraflow.js"></script>
|
||||
<style>
|
||||
@font-face { /*FF does not indirectly load if inside a shawdow-dom */
|
||||
font-family: 'glyphs';
|
||||
src: url('/app/assets/styles/fonts/glyphs.eot');
|
||||
src: url('/app/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
|
||||
url('/app/assets/styles/fonts/glyphs.ttf') format('truetype'),
|
||||
url('/app/assets/styles/fonts/glyphs.woff') format('woff'),
|
||||
url('/app/assets/styles/fonts/glyphs.svg') format('svg');
|
||||
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;
|
||||
@@ -76,7 +76,7 @@
|
||||
</head>
|
||||
|
||||
<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">
|
||||
<button data-trigger="onAutoplace3H">Auto-place Horizontal</button>
|
||||
<button data-trigger="onAutoplace3V">Auto-place Vertical</button>
|
||||
|
||||
@@ -4,18 +4,18 @@
|
||||
<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="/app/thirdparty/eicui/eicui-2.0.css">
|
||||
<link type="text/css" rel="stylesheet" href="/app/thirdparty/buildoz/buildoz.css">
|
||||
<script src="/app/thirdparty/buildoz/buildoz.js"></script>
|
||||
<script src="/app/thirdparty/buildoz/bzGraflow.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="/eicui/eicui-2.0.css">
|
||||
<link type="text/css" rel="stylesheet" href="/buildoz/buildoz.css">
|
||||
<script src="/buildoz/buildoz.js"></script>
|
||||
<script src="/buildoz/bzGraflow.js"></script>
|
||||
<style>
|
||||
@font-face { /*FF does not indirectly load if inside a shawdow-dom */
|
||||
font-family: 'glyphs';
|
||||
src: url('/app/assets/styles/fonts/glyphs.eot');
|
||||
src: url('/app/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
|
||||
url('/app/assets/styles/fonts/glyphs.ttf') format('truetype'),
|
||||
url('/app/assets/styles/fonts/glyphs.woff') format('woff'),
|
||||
url('/app/assets/styles/fonts/glyphs.svg') format('svg');
|
||||
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;
|
||||
@@ -53,6 +53,9 @@
|
||||
<script>
|
||||
window.addEventListener('load',()=>{
|
||||
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',
|
||||
(evt) => { grflw2 = evt.detail.subflow }
|
||||
)
|
||||
@@ -76,22 +79,22 @@
|
||||
</head>
|
||||
|
||||
<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 -->
|
||||
<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="first" selected>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>
|
||||
<option value="straight"selected>Straight</option>
|
||||
<option value="bezier">Bezier</option>
|
||||
</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>
|
||||
</bz-graflow>
|
||||
</body>
|
||||
|
||||
@@ -4,18 +4,18 @@
|
||||
<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="/app/thirdparty/eicui/eicui-2.0.css">
|
||||
<link type="text/css" rel="stylesheet" href="/app/thirdparty/buildoz/buildoz.css">
|
||||
<script src="/app/thirdparty/buildoz/buildoz.js"></script>
|
||||
<script src="/app/thirdparty/buildoz/bzGraflow.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="/eicui/eicui-2.0.css">
|
||||
<link type="text/css" rel="stylesheet" href="/buildoz/buildoz.css">
|
||||
<script src="/buildoz/buildoz.js"></script>
|
||||
<script src="/buildoz/bzGraflow.js"></script>
|
||||
<style>
|
||||
@font-face { /*FF does not indirectly load if inside a shawdow-dom */
|
||||
font-family: 'glyphs';
|
||||
src: url('/app/assets/styles/fonts/glyphs.eot');
|
||||
src: url('/app/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
|
||||
url('/app/assets/styles/fonts/glyphs.ttf') format('truetype'),
|
||||
url('/app/assets/styles/fonts/glyphs.woff') format('woff'),
|
||||
url('/app/assets/styles/fonts/glyphs.svg') format('svg');
|
||||
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;
|
||||
@@ -53,6 +53,9 @@
|
||||
<script>
|
||||
window.addEventListener('load',()=>{
|
||||
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',
|
||||
(evt) => { grflw4 = evt.detail.subflow }
|
||||
)
|
||||
@@ -76,15 +79,15 @@
|
||||
</head>
|
||||
|
||||
<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 -->
|
||||
<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" selected>First</option>
|
||||
<option value="first">First</option>
|
||||
<option value="last">Last</option>
|
||||
<option value="parent">Parent</option>
|
||||
<option value="parent" selected>Parent</option>
|
||||
</select>
|
||||
<select name="wiretype">
|
||||
<option value="ortho" selected>Ortho</option>
|
||||
|
||||
@@ -4,18 +4,18 @@
|
||||
<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="/app/thirdparty/eicui/eicui-2.0.css">
|
||||
<link type="text/css" rel="stylesheet" href="/app/thirdparty/buildoz/buildoz.css">
|
||||
<script src="/app/thirdparty/buildoz/buildoz.js"></script>
|
||||
<script src="/app/thirdparty/buildoz/bzGraflow.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="/eicui/eicui-2.0.css">
|
||||
<link type="text/css" rel="stylesheet" href="/buildoz/buildoz.css">
|
||||
<script src="/buildoz/buildoz.js"></script>
|
||||
<script src="/buildoz/bzGraflow.js"></script>
|
||||
<style>
|
||||
@font-face { /*FF does not indirectly load if inside a shawdow-dom */
|
||||
font-family: 'glyphs';
|
||||
src: url('/app/assets/styles/fonts/glyphs.eot');
|
||||
src: url('/app/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
|
||||
url('/app/assets/styles/fonts/glyphs.ttf') format('truetype'),
|
||||
url('/app/assets/styles/fonts/glyphs.woff') format('woff'),
|
||||
url('/app/assets/styles/fonts/glyphs.svg') format('svg');
|
||||
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;
|
||||
@@ -83,11 +83,8 @@
|
||||
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)
|
||||
const grfl = entry.target.querySelector('bz-graflow')
|
||||
grfl.autofit()
|
||||
})
|
||||
|
||||
ro.observe(el)
|
||||
@@ -97,7 +94,7 @@
|
||||
|
||||
<body>
|
||||
<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">
|
||||
<button data-trigger="onAutoplace4H">Auto-place Horizontal</button>
|
||||
<button data-trigger="onAutoplace4V">Auto-place Vertical</button>
|
||||
|
||||
@@ -4,18 +4,18 @@
|
||||
<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="/app/thirdparty/eicui/eicui-2.0.css">
|
||||
<link type="text/css" rel="stylesheet" href="/app/thirdparty/buildoz/buildoz.css">
|
||||
<script src="/app/thirdparty/buildoz/buildoz.js"></script>
|
||||
<script src="/app/thirdparty/buildoz/bzGraflow.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="/eicui/eicui-2.0.css">
|
||||
<link type="text/css" rel="stylesheet" href="/buildoz/buildoz.css">
|
||||
<script src="/buildoz/buildoz.js"></script>
|
||||
<script src="/buildoz/bzGraflow.js"></script>
|
||||
<style>
|
||||
@font-face { /*FF does not indirectly load if inside a shawdow-dom */
|
||||
font-family: 'glyphs';
|
||||
src: url('/app/assets/styles/fonts/glyphs.eot');
|
||||
src: url('/app/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
|
||||
url('/app/assets/styles/fonts/glyphs.ttf') format('truetype'),
|
||||
url('/app/assets/styles/fonts/glyphs.woff') format('woff'),
|
||||
url('/app/assets/styles/fonts/glyphs.svg') format('svg');
|
||||
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;
|
||||
@@ -76,7 +76,7 @@
|
||||
</head>
|
||||
|
||||
<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 -->
|
||||
<button data-trigger="onAutoplace1H">Auto-place Horizontal</button>
|
||||
<button data-trigger="onAutoplace1V">Auto-place Vertical</button>
|
||||
|
||||
@@ -4,18 +4,18 @@
|
||||
<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="/app/thirdparty/eicui/eicui-2.0.css">
|
||||
<link type="text/css" rel="stylesheet" href="/app/thirdparty/buildoz/buildoz.css">
|
||||
<script src="/app/thirdparty/buildoz/buildoz.js"></script>
|
||||
<script src="/app/thirdparty/buildoz/bzGraflow.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="/eicui/eicui-2.0.css">
|
||||
<link type="text/css" rel="stylesheet" href="/buildoz/buildoz.css">
|
||||
<script src="/buildoz/buildoz.js"></script>
|
||||
<script src="/buildoz/bzGraflow.js"></script>
|
||||
<style>
|
||||
@font-face { /*FF does not indirectly load if inside a shawdow-dom */
|
||||
font-family: 'glyphs';
|
||||
src: url('/app/assets/styles/fonts/glyphs.eot');
|
||||
src: url('/app/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
|
||||
url('/app/assets/styles/fonts/glyphs.ttf') format('truetype'),
|
||||
url('/app/assets/styles/fonts/glyphs.woff') format('woff'),
|
||||
url('/app/assets/styles/fonts/glyphs.svg') format('svg');
|
||||
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;
|
||||
@@ -54,6 +54,7 @@
|
||||
window.addEventListener('load',()=>{
|
||||
let grflw1 = document.querySelector('bz-graflow.compunet')
|
||||
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',
|
||||
(evt) => { grflw1 = evt.detail.subflow }
|
||||
@@ -78,7 +79,7 @@
|
||||
</head>
|
||||
|
||||
<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 -->
|
||||
<button data-trigger="onAutoplace1H">Auto-place Horizontal</button>
|
||||
<button data-trigger="onAutoplace1V">Auto-place Vertical</button>
|
||||
@@ -89,9 +90,9 @@
|
||||
<option value="parent">Parent</option>
|
||||
</select>
|
||||
<select name="wiretype">
|
||||
<option value="ortho">Ortho</option>
|
||||
<option value="ortho" selected>Ortho</option>
|
||||
<option value="straight">Straight</option>
|
||||
<option value="bezier" selected>Bezier</option>
|
||||
<option value="bezier">Bezier</option>
|
||||
</select>
|
||||
<div class-"cols-2"=""><label>tension</label><input data-id="compunet" type="number" size="2" value="20"></div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user