diff --git a/app/assets/html/bzGraflow/nodesTest2.html b/app/assets/html/bzGraflow/nodesTest2.html
index b6955cd..2b99b16 100644
--- a/app/assets/html/bzGraflow/nodesTest2.html
+++ b/app/assets/html/bzGraflow/nodesTest2.html
@@ -27,6 +27,7 @@
width: 6px;
background: #FFF;
z-index: 99;
+ opacity: 0.3;
}
.bzgf-node [data-direction="w"]{ left: -7px; top: 50%; transform: translateY(-50%);}
@@ -149,9 +150,26 @@
place-items: center;
color: white;
}
- .bzgf-wire{ stroke: #AAA; stroke-width: 4; }
+ .bzgf-wire{ stroke: #FF0; stroke-width: 2; }
+
+
+
+
\ No newline at end of file
diff --git a/app/assets/json/bzGraflow/testFlow2.json b/app/assets/json/bzGraflow/testFlow2.json
index 44670da..411b0e3 100644
--- a/app/assets/json/bzGraflow/testFlow2.json
+++ b/app/assets/json/bzGraflow/testFlow2.json
@@ -20,20 +20,20 @@
},
{ "nodeType": "database",
"id": "wcx",
- "coords": { "x": 250, "y": 650}
+ "coords": { "x": 500, "y": 450}
},
{ "nodeType": "end",
"id": "ert",
- "coords": { "x": 250, "y": 850}
+ "coords": { "x": 250, "y": 650}
}
],
"links": [
- { "from": ["aze", "out1"], "to": ["aze2", "inout1"] },
- { "from": ["aze2", "inout2"], "to": ["qsd", "inp1"] },
- { "from": ["qsd", "out1"], "to": ["aze2", "inout3"] },
- { "from": ["qsd", "out2"], "to": ["qsd2", "inp1"] },
- { "from": ["qsd2", "out1"], "to": ["wcx", "inout1"] },
- { "from": ["wcx", "inout2"], "to": ["ert", "inp1"] }
+ { "from": ["aze", "out1"], "to": ["aze2", "inout1"], "endArrow":true },
+ { "from": ["aze2", "inout2"], "to": ["qsd", "inp1"], "endArrow":true },
+ { "from": ["qsd", "out1"], "to": ["aze2", "inout3"], "endArrow":true },
+ { "from": ["qsd", "out2"], "to": ["qsd2", "inp1"], "endArrow":true },
+ { "from": ["qsd2", "inout2"], "to": ["wcx", "inout3"], "startArrow":true , "endArrow":true },
+ { "from": ["qsd2", "out1"], "to": ["ert", "inp1"], "endArrow":true }
]
}
}
\ No newline at end of file
diff --git a/app/thirdparty/buildoz/bzGraflow.js b/app/thirdparty/buildoz/bzGraflow.js
index 466c45d..cb7e024 100644
--- a/app/thirdparty/buildoz/bzGraflow.js
+++ b/app/thirdparty/buildoz/bzGraflow.js
@@ -15,7 +15,6 @@ class BZgraflow extends Buildoz{
console.warn('BZgraflow: No flow URL !?')
return
}
- this.loadFlow(flowUrl) // Let it load async while we coat
this.mainContainer = document.createElement('div')
this.mainContainer.classList.add('bzgf-main-container')
this.shadow = this.mainContainer.attachShadow({ mode: 'open' })
@@ -28,6 +27,7 @@ class BZgraflow extends Buildoz{
this.shadow.append(this.wiresContainer)
this.shadow.append(this.nodesContainer)
this.append(this.mainContainer)
+ this.loadFlow(flowUrl) // Let it load async
}
async loadFlow(url){
@@ -59,9 +59,14 @@ class BZgraflow extends Buildoz{
const doc = new DOMParser().parseFromString(html, 'text/html')
this.nodesRegistry = {}
for(const tpl of doc.querySelectorAll('template')){
- const rootEl = tpl.content.querySelector('.bzgf-node')
- if(!rootEl) continue
- this.nodesRegistry[rootEl.dataset.nodetype] = rootEl
+ if(tpl.id=='svg-arrows'){
+ this.wiresContainer.appendChild(tpl.querySelector('defs').cloneNode(true))
+ this.arrowDefined = true
+ } else {
+ const rootEl = tpl.content.querySelector('.bzgf-node')
+ if(!rootEl) continue
+ this.nodesRegistry[rootEl.dataset.nodetype] = rootEl
+ }
}
// Now load styles (once)
@@ -88,12 +93,16 @@ class BZgraflow extends Buildoz{
return(this.stagedNodes[id])
}
- addWire(idNode1, idPort1, idNode2, idPort2){
+ addWire(link){
+ const [idNode1, idPort1] = link.from
+ const [idNode2, idPort2] = link.to
const path = this.bezier(idNode1, idPort1, idNode2, idPort2, this.getBZAttribute('tension'))
const id = `${idNode1}_${idNode2}`
this.stagedWires[id] = document.createElementNS('http://www.w3.org/2000/svg', 'path')
this.stagedWires[id].setAttribute('d', path)
this.stagedWires[id].setAttribute('fill', 'none')
+ if(this.arrowDefined && link.endArrow) this.stagedWires[id].setAttribute('marker-end','url(#arrow)')
+ if(this.arrowDefined && link.startArrow) this.stagedWires[id].setAttribute('marker-start','url(#arrow)')
this.stagedWires[id].classList.add('bzgf-wire')
this.stagedWires[id].dataset.id = id
this.wiresContainer.append(this.stagedWires[id])
@@ -107,9 +116,7 @@ class BZgraflow extends Buildoz{
const nodeEl = this.addNode(node.nodeType, node.id , node.coords.x, node.coords.y)
}
for(const link of this.flow.links){
- const [nodeId1, portId1] = link.from
- const [nodeId2, portId2] = link.to
- this.addWire(nodeId1, portId1, nodeId2, portId2)
+ this.addWire(link)
}
}
@@ -330,3 +337,4 @@ class BZgraflow extends Buildoz{
}
Buildoz.define('graflow', BZgraflow)
+