graflow: rehresh event to fix movenodes
This commit is contained in:
STEINNI
25
bzGraflow.js
25
bzGraflow.js
@@ -88,16 +88,15 @@ class BZgraflow extends Buildoz{
|
|||||||
if(this.getBZAttribute('edit')){
|
if(this.getBZAttribute('edit')){
|
||||||
const edit = this.getBZAttribute('edit').split(',')
|
const edit = this.getBZAttribute('edit').split(',')
|
||||||
if(edit.includes('nodesmove')){
|
if(edit.includes('nodesmove')){
|
||||||
this.nodesMover = new MovingNodes(this)
|
this.nodesMover = new MovingNodes(this, '.bzgf-node')
|
||||||
this.nodesMover.enableMovingNodes('.bzgf-node')
|
|
||||||
}
|
}
|
||||||
if(edit.includes('wires')){
|
if(edit.includes('wires')){
|
||||||
this.WiresEditor = new EditWires(this)
|
this.WiresEditor = new EditWires(this, '.bzgf-wire')
|
||||||
this.WiresEditor.enableEditWires()
|
this.WiresEditor.enableEditWires()
|
||||||
//this.WiresEditor.enableMovingNodes('.bzgf-wire')
|
//this.WiresEditor.enableMovingNodes('.bzgf-wire')
|
||||||
}
|
}
|
||||||
if(edit.includes('dropnodes')){
|
if(edit.includes('dropnodes')){
|
||||||
this.NodesReceiver = new DroppingNodes(this)
|
this.NodesReceiver = new DroppingNodes(this, '.bzgf-node')
|
||||||
//this.NodesReceiver.enableDroppingNodes('.bzgf-node')
|
//this.NodesReceiver.enableDroppingNodes('.bzgf-node')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -436,7 +435,7 @@ class BZgraflow extends Buildoz{
|
|||||||
for(const node of this.flow.nodes){
|
for(const node of this.flow.nodes){
|
||||||
if((!node.coords) || (!node.coords.x) ||(!node.coords.y)) forceAutoplace=true
|
if((!node.coords) || (!node.coords.x) ||(!node.coords.y)) forceAutoplace=true
|
||||||
this.addNode(node)
|
this.addNode(node)
|
||||||
}
|
}
|
||||||
for(const link of this.flow.links){
|
for(const link of this.flow.links){
|
||||||
this.addWire(link)
|
this.addWire(link)
|
||||||
}
|
}
|
||||||
@@ -446,6 +445,11 @@ class BZgraflow extends Buildoz{
|
|||||||
else this.currentOrientation = 'vertical'
|
else this.currentOrientation = 'vertical'
|
||||||
}
|
}
|
||||||
if(forceAutoplace) this.autoPlace(this.currentOrientation)
|
if(forceAutoplace) this.autoPlace(this.currentOrientation)
|
||||||
|
this.dispatchEvent(new CustomEvent('refreshed', {
|
||||||
|
detail: { },
|
||||||
|
bubbles: true,
|
||||||
|
composed: true,
|
||||||
|
}))
|
||||||
}
|
}
|
||||||
|
|
||||||
// Convert viewport (client) coordinates to this instance's SVG local coordinates.
|
// Convert viewport (client) coordinates to this instance's SVG local coordinates.
|
||||||
@@ -1172,8 +1176,10 @@ class BZgraflow extends Buildoz{
|
|||||||
Buildoz.define('graflow', BZgraflow)
|
Buildoz.define('graflow', BZgraflow)
|
||||||
|
|
||||||
class MovingNodes{
|
class MovingNodes{
|
||||||
constructor(graflow){
|
constructor(graflow, itemSelector, handleSelector = itemSelector){
|
||||||
this.graflow = graflow
|
this.graflow = graflow
|
||||||
|
this.itemSelector = itemSelector
|
||||||
|
this.handleSelector = handleSelector
|
||||||
this.nodesContainer = this.graflow.mainContainer.querySelector('.bzgf-nodes-container')
|
this.nodesContainer = this.graflow.mainContainer.querySelector('.bzgf-nodes-container')
|
||||||
this.state = null
|
this.state = null
|
||||||
|
|
||||||
@@ -1184,14 +1190,13 @@ class MovingNodes{
|
|||||||
button,
|
button,
|
||||||
a[href]
|
a[href]
|
||||||
`
|
`
|
||||||
|
this.graflow.addEventListener('refreshed', this.enableMovingNodes.bind(this))
|
||||||
}
|
}
|
||||||
|
|
||||||
enableMovingNodes(itemSelector, handleSelector = itemSelector) {
|
enableMovingNodes() {
|
||||||
this.itemSelector = itemSelector
|
|
||||||
this.handleSelector = handleSelector
|
|
||||||
if(!this._handleCursorStyle){
|
if(!this._handleCursorStyle){
|
||||||
const style = document.createElement('style')
|
const style = document.createElement('style')
|
||||||
style.textContent = `${handleSelector}{ cursor: move }`
|
style.textContent = `${this.handleSelector}{ cursor: move }`
|
||||||
this.nodesContainer.appendChild(style)
|
this.nodesContainer.appendChild(style)
|
||||||
this._handleCursorStyle = style
|
this._handleCursorStyle = style
|
||||||
}
|
}
|
||||||
|
|||||||
14
git-cheat-sheet.txt
Normal file
14
git-cheat-sheet.txt
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
workflow quotidien
|
||||||
|
|
||||||
|
Modifier buildoz:
|
||||||
|
|
||||||
|
cd app/thirdparty/buildoz
|
||||||
|
git commit
|
||||||
|
git push
|
||||||
|
|
||||||
|
Puis dans P42:
|
||||||
|
|
||||||
|
git add app/thirdparty/buildoz
|
||||||
|
git commit -m "update buildoz"
|
||||||
|
|
||||||
|
Car P42 stocke la référence du commit buildoz.
|
||||||
65
graflow_examples/flows/testFlow1.1.json
Normal file
65
graflow_examples/flows/testFlow1.1.json
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
{
|
||||||
|
"nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesTest1.html",
|
||||||
|
"flow": {
|
||||||
|
"nodes":[
|
||||||
|
{ "nodeType": "inc",
|
||||||
|
"id": "aze",
|
||||||
|
"coords": { "x": 220, "y": 120}
|
||||||
|
},
|
||||||
|
{ "nodeType": "inc",
|
||||||
|
"subflow": {
|
||||||
|
"url": "/app/thirdparty/buildoz/graflow_examples/flows/testFlowEic.json",
|
||||||
|
"portLinks": [
|
||||||
|
{ "refNodeType": "refnodein", "refnodePort": "out1",
|
||||||
|
"parentPort": "in1",
|
||||||
|
"subflowNode":"aze2", "subflowPort": "in1",
|
||||||
|
"direction": "in"
|
||||||
|
},
|
||||||
|
{ "refNodeType": "refnodeout", "refnodePort": "in1",
|
||||||
|
"parentPort": "out1",
|
||||||
|
"subflowNode":"aze5", "subflowPort": "out1",
|
||||||
|
"direction": "out"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"id": "aze2",
|
||||||
|
"coords": { "x": 220, "y": 10}
|
||||||
|
},
|
||||||
|
{ "nodeType": "factor",
|
||||||
|
"id": "qsd",
|
||||||
|
"coords": { "x": 470, "y": 170}
|
||||||
|
},
|
||||||
|
{ "nodeType": "factor",
|
||||||
|
"id": "qsd2",
|
||||||
|
"coords": { "x": 470, "y": 50}
|
||||||
|
},
|
||||||
|
{ "nodeType": "wadder",
|
||||||
|
"id": "wcx",
|
||||||
|
"coords": { "x": 720, "y": 50}
|
||||||
|
},
|
||||||
|
{ "nodeType": "multiplier",
|
||||||
|
"id": "ert",
|
||||||
|
"coords": { "x": 550, "y": 350}
|
||||||
|
},
|
||||||
|
{ "nodeType": "input",
|
||||||
|
"id": "0000",
|
||||||
|
"coords": { "x": 20, "y": 350}
|
||||||
|
},
|
||||||
|
{ "nodeType": "console",
|
||||||
|
"id": "9999",
|
||||||
|
"coords": { "x": 800, "y": 350}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"links": [
|
||||||
|
{ "from": ["0000", "out1"], "to": ["aze", "inp1"] },
|
||||||
|
{ "from": ["aze2", "out1"], "to": ["qsd2", "inp1"] },
|
||||||
|
{ "from": ["aze", "out1"], "to": ["qsd", "inp1"] },
|
||||||
|
{ "from": ["qsd2", "out1"], "to": ["ert", "inp2"] },
|
||||||
|
{ "from": ["0000", "out1"], "to": ["aze2", "inp1"] },
|
||||||
|
{ "from": ["qsd2", "out1"], "to": ["wcx", "inp2"] },
|
||||||
|
{ "from": ["wcx", "out1"], "to": ["ert", "inp1"] },
|
||||||
|
{ "from": ["qsd", "out1"], "to": ["wcx", "inp1"] },
|
||||||
|
{ "from": ["ert", "out1"], "to": ["9999", "inp1"] }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
50
graflow_examples/flows/testFlow1.json
Normal file
50
graflow_examples/flows/testFlow1.json
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
{
|
||||||
|
"nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesTest1.html",
|
||||||
|
"flow": {
|
||||||
|
"nodes":[
|
||||||
|
{ "nodeType": "inc",
|
||||||
|
"id": "aze",
|
||||||
|
"coords": { "x": 220, "y": 120}
|
||||||
|
},
|
||||||
|
{ "nodeType": "inc",
|
||||||
|
"id": "aze2",
|
||||||
|
"coords": { "x": 220, "y": 10}
|
||||||
|
},
|
||||||
|
{ "nodeType": "factor",
|
||||||
|
"id": "qsd",
|
||||||
|
"coords": { "x": 470, "y": 170}
|
||||||
|
},
|
||||||
|
{ "nodeType": "factor",
|
||||||
|
"id": "qsd2",
|
||||||
|
"coords": { "x": 470, "y": 50}
|
||||||
|
},
|
||||||
|
{ "nodeType": "wadder",
|
||||||
|
"id": "wcx",
|
||||||
|
"coords": { "x": 720, "y": 50}
|
||||||
|
},
|
||||||
|
{ "nodeType": "multiplier",
|
||||||
|
"id": "ert",
|
||||||
|
"coords": { "x": 550, "y": 350}
|
||||||
|
},
|
||||||
|
{ "nodeType": "input",
|
||||||
|
"id": "0000",
|
||||||
|
"coords": { "x": 20, "y": 350}
|
||||||
|
},
|
||||||
|
{ "nodeType": "console",
|
||||||
|
"id": "9999",
|
||||||
|
"coords": { "x": 800, "y": 350}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"links": [
|
||||||
|
{ "from": ["0000", "out1"], "to": ["aze", "inp1"] },
|
||||||
|
{ "from": ["aze2", "out1"], "to": ["qsd2", "inp1"] },
|
||||||
|
{ "from": ["aze", "out1"], "to": ["qsd", "inp1"] },
|
||||||
|
{ "from": ["qsd2", "out1"], "to": ["ert", "inp2"] },
|
||||||
|
{ "from": ["0000", "out1"], "to": ["aze2", "inp1"] },
|
||||||
|
{ "from": ["qsd2", "out1"], "to": ["wcx", "inp2"] },
|
||||||
|
{ "from": ["wcx", "out1"], "to": ["ert", "inp1"] },
|
||||||
|
{ "from": ["qsd", "out1"], "to": ["wcx", "inp1"] },
|
||||||
|
{ "from": ["ert", "out1"], "to": ["9999", "inp1"] }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
271
graflow_examples/flows/testFlow16ports.json
Normal file
271
graflow_examples/flows/testFlow16ports.json
Normal file
@@ -0,0 +1,271 @@
|
|||||||
|
{
|
||||||
|
"nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodes16ports.html",
|
||||||
|
"flow": {
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"nodeType": "square",
|
||||||
|
"id": "p1center",
|
||||||
|
"coords": {
|
||||||
|
"x": 300,
|
||||||
|
"y": 200
|
||||||
|
},
|
||||||
|
"markup": {
|
||||||
|
"title": "Center",
|
||||||
|
"subtitle": "."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "square",
|
||||||
|
"id": "p1west",
|
||||||
|
"coords": {
|
||||||
|
"x": 200,
|
||||||
|
"y": 200
|
||||||
|
},
|
||||||
|
"markup": {
|
||||||
|
"title": "West",
|
||||||
|
"subtitle": "."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "square",
|
||||||
|
"id": "p1north",
|
||||||
|
"coords": {
|
||||||
|
"x": 300,
|
||||||
|
"y": 100
|
||||||
|
},
|
||||||
|
"markup": {
|
||||||
|
"title": "North",
|
||||||
|
"subtitle": "."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "square",
|
||||||
|
"id": "p1east",
|
||||||
|
"coords": {
|
||||||
|
"x": 400,
|
||||||
|
"y": 200
|
||||||
|
},
|
||||||
|
"markup": {
|
||||||
|
"title": "East",
|
||||||
|
"subtitle": "."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "square",
|
||||||
|
"id": "p1south",
|
||||||
|
"coords": {
|
||||||
|
"x": 300,
|
||||||
|
"y": 300
|
||||||
|
},
|
||||||
|
"markup": {
|
||||||
|
"title": "South",
|
||||||
|
"subtitle": "."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
"nodeType": "square",
|
||||||
|
"id": "p2center",
|
||||||
|
"coords": {
|
||||||
|
"x": 800,
|
||||||
|
"y": 200
|
||||||
|
},
|
||||||
|
"markup": {
|
||||||
|
"title": "Center",
|
||||||
|
"subtitle": "."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "square",
|
||||||
|
"id": "p2west",
|
||||||
|
"coords": {
|
||||||
|
"x": 700,
|
||||||
|
"y": 200
|
||||||
|
},
|
||||||
|
"markup": {
|
||||||
|
"title": "West",
|
||||||
|
"subtitle": "."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "square",
|
||||||
|
"id": "p2north",
|
||||||
|
"coords": {
|
||||||
|
"x": 800,
|
||||||
|
"y": 100
|
||||||
|
},
|
||||||
|
"markup": {
|
||||||
|
"title": "North",
|
||||||
|
"subtitle": "."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "square",
|
||||||
|
"id": "p2east",
|
||||||
|
"coords": {
|
||||||
|
"x": 900,
|
||||||
|
"y": 200
|
||||||
|
},
|
||||||
|
"markup": {
|
||||||
|
"title": "East",
|
||||||
|
"subtitle": "."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "square",
|
||||||
|
"id": "p2south",
|
||||||
|
"coords": {
|
||||||
|
"x": 800,
|
||||||
|
"y": 300
|
||||||
|
},
|
||||||
|
"markup": {
|
||||||
|
"title": "South",
|
||||||
|
"subtitle": "."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
"nodeType": "square",
|
||||||
|
"id": "p3center",
|
||||||
|
"coords": {
|
||||||
|
"x": 300,
|
||||||
|
"y": 600
|
||||||
|
},
|
||||||
|
"markup": {
|
||||||
|
"title": "Center",
|
||||||
|
"subtitle": "."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "square",
|
||||||
|
"id": "p3west",
|
||||||
|
"coords": {
|
||||||
|
"x": 200,
|
||||||
|
"y": 600
|
||||||
|
},
|
||||||
|
"markup": {
|
||||||
|
"title": "West",
|
||||||
|
"subtitle": "."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "square",
|
||||||
|
"id": "p3north",
|
||||||
|
"coords": {
|
||||||
|
"x": 300,
|
||||||
|
"y": 500
|
||||||
|
},
|
||||||
|
"markup": {
|
||||||
|
"title": "North",
|
||||||
|
"subtitle": "."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "square",
|
||||||
|
"id": "p3east",
|
||||||
|
"coords": {
|
||||||
|
"x": 400,
|
||||||
|
"y": 600
|
||||||
|
},
|
||||||
|
"markup": {
|
||||||
|
"title": "East",
|
||||||
|
"subtitle": "."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "square",
|
||||||
|
"id": "p3south",
|
||||||
|
"coords": {
|
||||||
|
"x": 300,
|
||||||
|
"y": 700
|
||||||
|
},
|
||||||
|
"markup": {
|
||||||
|
"title": "South",
|
||||||
|
"subtitle": "."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
"nodeType": "square",
|
||||||
|
"id": "p4center",
|
||||||
|
"coords": {
|
||||||
|
"x": 800,
|
||||||
|
"y": 600
|
||||||
|
},
|
||||||
|
"markup": {
|
||||||
|
"title": "Center",
|
||||||
|
"subtitle": "."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "square",
|
||||||
|
"id": "p4west",
|
||||||
|
"coords": {
|
||||||
|
"x": 700,
|
||||||
|
"y": 600
|
||||||
|
},
|
||||||
|
"markup": {
|
||||||
|
"title": "West",
|
||||||
|
"subtitle": "."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "square",
|
||||||
|
"id": "p4north",
|
||||||
|
"coords": {
|
||||||
|
"x": 800,
|
||||||
|
"y": 500
|
||||||
|
},
|
||||||
|
"markup": {
|
||||||
|
"title": "North",
|
||||||
|
"subtitle": "."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "square",
|
||||||
|
"id": "p4east",
|
||||||
|
"coords": {
|
||||||
|
"x": 900,
|
||||||
|
"y": 600
|
||||||
|
},
|
||||||
|
"markup": {
|
||||||
|
"title": "East",
|
||||||
|
"subtitle": "."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "square",
|
||||||
|
"id": "p4south",
|
||||||
|
"coords": {
|
||||||
|
"x": 800,
|
||||||
|
"y": 700
|
||||||
|
},
|
||||||
|
"markup": {
|
||||||
|
"title": "South",
|
||||||
|
"subtitle": "."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"links": [
|
||||||
|
{ "from": ["p1center", "s"], "to": ["p1south", "n"] },
|
||||||
|
{ "from": ["p1center", "e"], "to": ["p1east", "w"] },
|
||||||
|
{ "from": ["p1center", "n"], "to": ["p1north", "s"] },
|
||||||
|
{ "from": ["p1center", "w"], "to": ["p1west", "e"] },
|
||||||
|
|
||||||
|
{ "from": ["p2center", "s"], "to": ["p2south", "e"] },
|
||||||
|
{ "from": ["p2center", "e"], "to": ["p2east", "n"] },
|
||||||
|
{ "from": ["p2center", "n"], "to": ["p2north", "w"] },
|
||||||
|
{ "from": ["p2center", "w"], "to": ["p2west", "s"] },
|
||||||
|
|
||||||
|
{ "from": ["p3center", "s"], "to": ["p3south", "s"] },
|
||||||
|
{ "from": ["p3center", "e"], "to": ["p3east", "e"] },
|
||||||
|
{ "from": ["p3center", "n"], "to": ["p3north", "n"] },
|
||||||
|
{ "from": ["p3center", "w"], "to": ["p3west", "w"] },
|
||||||
|
|
||||||
|
{ "from": ["p4center", "s"], "to": ["p4south", "w"] },
|
||||||
|
{ "from": ["p4center", "e"], "to": ["p4east", "s"] },
|
||||||
|
{ "from": ["p4center", "n"], "to": ["p4north", "e"] },
|
||||||
|
{ "from": ["p4center", "w"], "to": ["p4west", "n"] }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
47
graflow_examples/flows/testFlow2.json
Normal file
47
graflow_examples/flows/testFlow2.json
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
{
|
||||||
|
"nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesTest2.html",
|
||||||
|
"flow": {
|
||||||
|
"nodes":[
|
||||||
|
{ "nodeType": "process",
|
||||||
|
"id": "aze2",
|
||||||
|
"xcoords": { "x": 220, "y": 120},
|
||||||
|
"markup": { "text": "x = alph - 1" }
|
||||||
|
},
|
||||||
|
{ "nodeType": "condition",
|
||||||
|
"id": "qsd",
|
||||||
|
"xcoords": { "x": 250, "y": 270},
|
||||||
|
"markup": { "text": "x > 0" }
|
||||||
|
},
|
||||||
|
{ "nodeType": "preparation",
|
||||||
|
"id": "qsd2",
|
||||||
|
"xcoords": { "x": 250, "y": 470},
|
||||||
|
"markup": { "text": "prepare SQL" }
|
||||||
|
},
|
||||||
|
{ "nodeType": "database",
|
||||||
|
"id": "wcx",
|
||||||
|
"xcoords": { "x": 500, "y": 450},
|
||||||
|
"markup": { "text": "MySQL<br>Store" }
|
||||||
|
},
|
||||||
|
{ "nodeType": "end",
|
||||||
|
"id": "ert",
|
||||||
|
"xcoords": { "x": 250, "y": 650},
|
||||||
|
"markup": { "text": "End" }
|
||||||
|
},
|
||||||
|
{ "nodeType": "start",
|
||||||
|
"id": "aze",
|
||||||
|
"xcoords": { "x": 220, "y": 20},
|
||||||
|
"markup": { "text": "StartMike" }
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"links": [
|
||||||
|
{ "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", "inout1"], "startArrow":true , "endArrow":true },
|
||||||
|
{ "from": ["qsd2", "out1"], "to": ["ert", "inp1"], "endArrow":true },
|
||||||
|
{ "from": ["qsd2", "inout1"], "to": ["qsd2", "inout1"], "endArrow":true },
|
||||||
|
{ "from": ["aze2", "inout4"], "to": ["wcx", "inout1"], "endArrow":true }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
74
graflow_examples/flows/testFlowEic.json
Normal file
74
graflow_examples/flows/testFlowEic.json
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
{
|
||||||
|
"nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesEIC.html",
|
||||||
|
"flow": {
|
||||||
|
"nodes":[
|
||||||
|
{ "nodeType": "eicBasic",
|
||||||
|
"id": "aze",
|
||||||
|
"ncoords": { "x": 50, "y": 120},
|
||||||
|
"markup": {
|
||||||
|
"title": "Build attendees list",
|
||||||
|
"subtitle": "Build an attendees list to email"
|
||||||
|
},
|
||||||
|
"data": { "a": "a1", "b":"b1"}
|
||||||
|
},
|
||||||
|
{ "nodeType": "eicBasic",
|
||||||
|
"id": "aze2",
|
||||||
|
"ncoords": { "x": 100, "y": 220},
|
||||||
|
"markup": {
|
||||||
|
"title": "Select message",
|
||||||
|
"subtitle": "Select an email template"
|
||||||
|
},
|
||||||
|
"data": { "a": "a2", "b":"b2"}
|
||||||
|
},
|
||||||
|
{ "nodeType": "eicBasic",
|
||||||
|
"id": "aze3",
|
||||||
|
"ncoords": { "x": 150, "y": 320},
|
||||||
|
"markup": {
|
||||||
|
"title": "Data mapping",
|
||||||
|
"subtitle": "Associate content variables with attendees data"
|
||||||
|
},
|
||||||
|
"data": { "a": "a3", "b":"b3"},
|
||||||
|
"subflow": {
|
||||||
|
"url": "/app/thirdparty/buildoz/graflow_examples/flows/testFlowICMP.json",
|
||||||
|
"portLinks": [
|
||||||
|
{ "refNodeType": "refnodein", "refnodePort": "out1",
|
||||||
|
"parentPort": "in1",
|
||||||
|
"subflowNode":"cid", "subflowPort": "in3",
|
||||||
|
"direction": "in"
|
||||||
|
},
|
||||||
|
{ "refNodeType": "refnodeout", "refnodePort": "in1",
|
||||||
|
"parentPort": "out1",
|
||||||
|
"subflowNode":"signature", "subflowPort": "out2",
|
||||||
|
"direction": "out"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ "nodeType": "eicBasic",
|
||||||
|
"id": "aze4",
|
||||||
|
"ncoords": { "x": 150, "y": 320},
|
||||||
|
"markup": {
|
||||||
|
"title": "Schedule mailing",
|
||||||
|
"subtitle": "Choose time to send the mail"
|
||||||
|
},
|
||||||
|
"data": { "a": "a3", "b":"b3"}
|
||||||
|
},
|
||||||
|
{ "nodeType": "eicBasic",
|
||||||
|
"id": "aze5",
|
||||||
|
"ncoords": { "x": 150, "y": 320},
|
||||||
|
"markup": {
|
||||||
|
"title": "Stats",
|
||||||
|
"subtitle": "Access mailing statistics"
|
||||||
|
},
|
||||||
|
"data": { "a": "a3", "b":"b3"}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"links": [
|
||||||
|
{ "from": ["aze2", "out1"], "to": ["aze", "in1"] },
|
||||||
|
{ "from": ["aze2", "out2"], "to": ["aze3", "in1"] },
|
||||||
|
{ "from": ["aze", "out1"], "to": ["aze4", "in1"] },
|
||||||
|
{ "from": ["aze3", "out1"], "to": ["aze4", "in2"] },
|
||||||
|
{ "from": ["aze4", "out1"], "to": ["aze5", "in1"] }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
150
graflow_examples/flows/testFlowICMP.json
Normal file
150
graflow_examples/flows/testFlowICMP.json
Normal file
@@ -0,0 +1,150 @@
|
|||||||
|
{
|
||||||
|
"nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesEIC.html",
|
||||||
|
"flow": {
|
||||||
|
"nodes":[
|
||||||
|
{ "nodeType": "eicBasic",
|
||||||
|
"id": "eval",
|
||||||
|
"markup": {
|
||||||
|
"title": "Evaluations",
|
||||||
|
"subtitle": "...",
|
||||||
|
"severity": "secondary"
|
||||||
|
},
|
||||||
|
"data": { "node": "eval", "nodeId":null}
|
||||||
|
},
|
||||||
|
{ "nodeType": "eicBasic",
|
||||||
|
"id": "gap",
|
||||||
|
"ncoords": { "x": 100, "y": 220},
|
||||||
|
"markup": {
|
||||||
|
"title": "GAP",
|
||||||
|
"subtitle": "...",
|
||||||
|
"severity": "secondary"
|
||||||
|
},
|
||||||
|
"data": { "a": "a2", "b":"b2"}
|
||||||
|
},
|
||||||
|
{ "nodeType": "eicBasic",
|
||||||
|
"id": "cid",
|
||||||
|
"ncoords": { "x": 150, "y": 320},
|
||||||
|
"markup": {
|
||||||
|
"title": "CID",
|
||||||
|
"subtitle": "...",
|
||||||
|
"severity": "secondary"
|
||||||
|
},
|
||||||
|
"data": { "a": "a3", "b":"b3"}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "eicBasic",
|
||||||
|
"id": "allocation",
|
||||||
|
"markup": {
|
||||||
|
"title": "Case Allocation",
|
||||||
|
"subtitle": "...",
|
||||||
|
"severity": "secondary"
|
||||||
|
},
|
||||||
|
"data": {
|
||||||
|
"track": "equity"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "eicBasic",
|
||||||
|
"id": "signature",
|
||||||
|
"markup": {
|
||||||
|
"title": "Grant Signature",
|
||||||
|
"subtitle": "...",
|
||||||
|
"severity": "secondary"
|
||||||
|
},
|
||||||
|
"data": {
|
||||||
|
"track": "grant"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "eicBasic",
|
||||||
|
"id": "progress-meeting",
|
||||||
|
"markup": {
|
||||||
|
"title": "Progress Meetings",
|
||||||
|
"subtitle": "...",
|
||||||
|
"severity": "secondary"
|
||||||
|
},
|
||||||
|
"data": {
|
||||||
|
"track": "grant",
|
||||||
|
"instanciable": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "eicBasic",
|
||||||
|
"id": "techdd",
|
||||||
|
"markup": {
|
||||||
|
"title": "Tech Due Diligences",
|
||||||
|
"subtitle": "...",
|
||||||
|
"severity": "secondary"
|
||||||
|
},
|
||||||
|
"data": {
|
||||||
|
"track": "equity"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "eicBasic",
|
||||||
|
"id": "kyc",
|
||||||
|
"markup": {
|
||||||
|
"title": "KYC",
|
||||||
|
"subtitle": "...",
|
||||||
|
"severity": "secondary"
|
||||||
|
},
|
||||||
|
"data": {
|
||||||
|
"track": "equity"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "eicBasic",
|
||||||
|
"id": "aifm-advisory",
|
||||||
|
"markup": {
|
||||||
|
"title": "AIFM Advisory Commitee",
|
||||||
|
"subtitle": "...",
|
||||||
|
"severity": "secondary"
|
||||||
|
},
|
||||||
|
"data": {
|
||||||
|
"track": "equity"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "eicBasic",
|
||||||
|
"id": "aifm-investment",
|
||||||
|
"markup": {
|
||||||
|
"title": "AIFM Investment Commitee",
|
||||||
|
"subtitle": "...",
|
||||||
|
"severity": "secondary"
|
||||||
|
},
|
||||||
|
"data": {
|
||||||
|
"track": "equity",
|
||||||
|
"parent": "aifm-advisory"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "eicBasic",
|
||||||
|
"id": "agreement",
|
||||||
|
"markup": {
|
||||||
|
"title": "Investment Agreement",
|
||||||
|
"subtitle": "...",
|
||||||
|
"severity": "secondary"
|
||||||
|
},
|
||||||
|
"data": {
|
||||||
|
"track": "equity",
|
||||||
|
"parent": "aifm-investment"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"links": [
|
||||||
|
{ "from": ["eval", "out2"], "to": ["gap", "in1"] },
|
||||||
|
{ "from": ["eval", "out1"], "to": ["cid", "in1"] },
|
||||||
|
{ "from": ["eval", "out3"], "to": ["allocation", "in1"] },
|
||||||
|
{ "from": ["gap", "out1"], "to": ["signature", "in1"] },
|
||||||
|
{ "from": ["signature", "out1"], "to": ["progress-meeting", "in1"] },
|
||||||
|
{ "from": ["cid", "out1"], "to": ["techdd", "in1"] },
|
||||||
|
{ "from": ["allocation", "out1"], "to": ["techdd", "in3"] },
|
||||||
|
{ "from": ["allocation", "out2"], "to": ["kyc", "in2"] },
|
||||||
|
{ "from": ["techdd", "out1"], "to": ["aifm-advisory", "in1"] },
|
||||||
|
{ "from": ["kyc", "out1"], "to": ["aifm-advisory", "in3"] },
|
||||||
|
{ "from": ["aifm-advisory", "out1"], "to": ["aifm-investment", "in1"] },
|
||||||
|
{ "from": ["aifm-investment", "out1"], "to": ["agreement", "in1"] },
|
||||||
|
{ "from": ["gap", "out3"], "to": ["aifm-investment", "in1"] }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
150
graflow_examples/flows/testFlowICMP2.json
Normal file
150
graflow_examples/flows/testFlowICMP2.json
Normal file
@@ -0,0 +1,150 @@
|
|||||||
|
{
|
||||||
|
"nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesEIC2.html",
|
||||||
|
"flow": {
|
||||||
|
"nodes":[
|
||||||
|
{ "nodeType": "eicBasic",
|
||||||
|
"id": "eval",
|
||||||
|
"markup": {
|
||||||
|
"title": "Evaluations",
|
||||||
|
"subtitle": "...",
|
||||||
|
"severity": "secondary"
|
||||||
|
},
|
||||||
|
"data": { "node": "eval", "nodeId":null}
|
||||||
|
},
|
||||||
|
{ "nodeType": "eicBasic",
|
||||||
|
"id": "gap",
|
||||||
|
"ncoords": { "x": 100, "y": 220},
|
||||||
|
"markup": {
|
||||||
|
"title": "GAP",
|
||||||
|
"subtitle": "...",
|
||||||
|
"severity": "secondary"
|
||||||
|
},
|
||||||
|
"data": { "a": "a2", "b":"b2"}
|
||||||
|
},
|
||||||
|
{ "nodeType": "eicBasic",
|
||||||
|
"id": "cid",
|
||||||
|
"ncoords": { "x": 150, "y": 320},
|
||||||
|
"markup": {
|
||||||
|
"title": "CID",
|
||||||
|
"subtitle": "...",
|
||||||
|
"severity": "secondary"
|
||||||
|
},
|
||||||
|
"data": { "a": "a3", "b":"b3"}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "eicBasic",
|
||||||
|
"id": "allocation",
|
||||||
|
"markup": {
|
||||||
|
"title": "Case Allocation",
|
||||||
|
"subtitle": "...",
|
||||||
|
"severity": "secondary"
|
||||||
|
},
|
||||||
|
"data": {
|
||||||
|
"track": "equity"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "eicBasic",
|
||||||
|
"id": "signature",
|
||||||
|
"markup": {
|
||||||
|
"title": "Grant Signature",
|
||||||
|
"subtitle": "...",
|
||||||
|
"severity": "secondary"
|
||||||
|
},
|
||||||
|
"data": {
|
||||||
|
"track": "grant"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "eicBasic",
|
||||||
|
"id": "progress-meeting",
|
||||||
|
"markup": {
|
||||||
|
"title": "Progress Meetings",
|
||||||
|
"subtitle": "...",
|
||||||
|
"severity": "secondary"
|
||||||
|
},
|
||||||
|
"data": {
|
||||||
|
"track": "grant",
|
||||||
|
"instanciable": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "eicBasic",
|
||||||
|
"id": "techdd",
|
||||||
|
"markup": {
|
||||||
|
"title": "Tech Due Diligences",
|
||||||
|
"subtitle": "...",
|
||||||
|
"severity": "secondary"
|
||||||
|
},
|
||||||
|
"data": {
|
||||||
|
"track": "equity"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "eicBasic",
|
||||||
|
"id": "kyc",
|
||||||
|
"markup": {
|
||||||
|
"title": "KYC",
|
||||||
|
"subtitle": "...",
|
||||||
|
"severity": "secondary"
|
||||||
|
},
|
||||||
|
"data": {
|
||||||
|
"track": "equity"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "eicBasic",
|
||||||
|
"id": "aifm-advisory",
|
||||||
|
"markup": {
|
||||||
|
"title": "AIFM Advisory Commitee",
|
||||||
|
"subtitle": "...",
|
||||||
|
"severity": "secondary"
|
||||||
|
},
|
||||||
|
"data": {
|
||||||
|
"track": "equity"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "eicBasic",
|
||||||
|
"id": "aifm-investment",
|
||||||
|
"markup": {
|
||||||
|
"title": "AIFM Investment Commitee",
|
||||||
|
"subtitle": "...",
|
||||||
|
"severity": "secondary"
|
||||||
|
},
|
||||||
|
"data": {
|
||||||
|
"track": "equity",
|
||||||
|
"parent": "aifm-advisory"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nodeType": "eicBasic",
|
||||||
|
"id": "agreement",
|
||||||
|
"markup": {
|
||||||
|
"title": "Investment Agreement",
|
||||||
|
"subtitle": "...",
|
||||||
|
"severity": "secondary"
|
||||||
|
},
|
||||||
|
"data": {
|
||||||
|
"track": "equity",
|
||||||
|
"parent": "aifm-investment"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"links": [
|
||||||
|
{ "from": ["eval", "out1"], "to": ["gap", "in1"] , "endArrow":true},
|
||||||
|
{ "from": ["eval", "out1"], "to": ["cid", "in1"] , "endArrow":true},
|
||||||
|
{ "from": ["eval", "out1"], "to": ["allocation", "in1"] , "endArrow":true},
|
||||||
|
{ "from": ["gap", "out1"], "to": ["signature", "in1"] , "endArrow":true},
|
||||||
|
{ "from": ["signature", "out1"], "to": ["progress-meeting", "in1"] , "endArrow":true},
|
||||||
|
{ "from": ["cid", "out1"], "to": ["techdd", "in1"] , "endArrow":true, "startArrow":true},
|
||||||
|
{ "from": ["allocation", "out1"], "to": ["techdd", "in1"] , "endArrow":true, "startArrow":true},
|
||||||
|
{ "from": ["allocation", "out1"], "to": ["kyc", "in1"] , "endArrow":true, "startArrow":true},
|
||||||
|
{ "from": ["techdd", "out1"], "to": ["aifm-advisory", "in1"] },
|
||||||
|
{ "from": ["kyc", "out1"], "to": ["aifm-advisory", "in1"] , "endArrow":true},
|
||||||
|
{ "from": ["aifm-advisory", "out1"], "to": ["aifm-investment", "in1"] , "endArrow":true},
|
||||||
|
{ "from": ["aifm-investment", "out1"], "to": ["agreement", "in1"] , "endArrow":true},
|
||||||
|
{ "from": ["gap", "out1"], "to": ["aifm-investment", "in1"] , "endArrow":true}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
59
graflow_examples/nodesLib/nodes16ports.html
Normal file
59
graflow_examples/nodesLib/nodes16ports.html
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
<style>
|
||||||
|
.bzgf-node {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
color: black;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
padding: .5em;
|
||||||
|
}
|
||||||
|
.bzgf-node .body{
|
||||||
|
z-index: 1;
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: var(--eicui-base-color-grey-25);
|
||||||
|
border:2px solid var(--eicui-base-color-grey-50);
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
.bzgf-node .title {
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--app-color-black);
|
||||||
|
margin: .5em auto .2em auto;
|
||||||
|
}
|
||||||
|
.bzgf-node .subtitle {
|
||||||
|
font-size: .9em;
|
||||||
|
color: var(--eicui-base-color-primary-100);
|
||||||
|
width: 90%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.bzgf-node .port{
|
||||||
|
position: absolute;
|
||||||
|
height: 10px;
|
||||||
|
width: 10px;
|
||||||
|
background: var(--eicui-base-color-info-25);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bzgf-node [data-direction="n"]{ top: -4px; left: 50%; transform: translateX(-50%);}
|
||||||
|
.bzgf-node [data-direction="s"]{ bottom: -4px; left: 50%; transform: translateX(-50%);}
|
||||||
|
.bzgf-node [data-direction="w"]{ left: -4px; top: 50%; transform: translateY(-50%);}
|
||||||
|
.bzgf-node [data-direction="e"]{ right: -4px; top: 50%; transform: translateY(-50%);}
|
||||||
|
|
||||||
|
.bzgf-wire{ stroke: var(--eicui-base-color-info); stroke-width: 4px; stroke-dasharray: 10,5; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="bzgf-node" data-nodetype="square">
|
||||||
|
<div class="body">
|
||||||
|
<div class="title">{title}</div>
|
||||||
|
<div class="subtitle">{subtitle}</div>
|
||||||
|
</div>
|
||||||
|
<div class="port" data-id="w" data-direction="w"></div>
|
||||||
|
<div class="port" data-id="n" data-direction="n"></div>
|
||||||
|
<div class="port" data-id="e" data-direction="e"></div>
|
||||||
|
<div class="port" data-id="s" data-direction="s"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
97
graflow_examples/nodesLib/nodesEIC.html
Normal file
97
graflow_examples/nodesLib/nodesEIC.html
Normal file
@@ -0,0 +1,97 @@
|
|||||||
|
<style>
|
||||||
|
.bzgf-node {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
width: 160px;
|
||||||
|
height: 80px;
|
||||||
|
color: black;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
padding: .5em;
|
||||||
|
}
|
||||||
|
.bzgf-node .body{
|
||||||
|
z-index: 1;
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: var(--eicui-base-color-grey-25);
|
||||||
|
border:2px solid var(--eicui-base-color-grey-50);
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
.bzgf-node .title {
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--app-color-black);
|
||||||
|
margin: .5em auto .2em auto;
|
||||||
|
}
|
||||||
|
.bzgf-node .subtitle {
|
||||||
|
|
||||||
|
font-size: .9em;
|
||||||
|
color: var(--eicui-base-color-primary-100);
|
||||||
|
width: 90%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.bzgf-node .port{
|
||||||
|
position: absolute;
|
||||||
|
height: 10px;
|
||||||
|
width: 10px;
|
||||||
|
background: var(--eicui-base-color-info-25);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bzgf-node [data-direction="n"]{ top: -4px; left: 50%; transform: translateX(-50%);}
|
||||||
|
.bzgf-node [data-direction="s"]{ bottom: -4px; left: 50%; transform: translateX(-50%);}
|
||||||
|
.bzgf-node [data-direction="w"]{ left: -4px; top: 50%; transform: translateY(-50%);}
|
||||||
|
.bzgf-node [data-direction="e"]{ right: -4px; top: 50%; transform: translateY(-50%);}
|
||||||
|
|
||||||
|
|
||||||
|
.bzgf-node [data-id="in2"]{ top: 25%; }
|
||||||
|
.bzgf-node [data-id="in3"]{ top: 75%; }
|
||||||
|
|
||||||
|
.bzgf-node [data-id="out2"]{ top: 25%; }
|
||||||
|
.bzgf-node [data-id="out3"]{ top: 75%; }
|
||||||
|
|
||||||
|
.bzgf-node[data-nodetype="refnodein"], .bzgf-node[data-nodetype="refnodeout"] {
|
||||||
|
width:3em;
|
||||||
|
height:3em;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
.bzgf-node[data-nodetype="refnodein"] .body, .bzgf-node[data-nodetype="refnodeout"] .body{
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 3em;
|
||||||
|
height: 3em;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.bzgf-node[data-nodetype="refnodein"] .body, .bzgf-node[data-nodetype="refnodeout"] .body{ background: var(--eicui-base-color-grey-25); }
|
||||||
|
|
||||||
|
.bzgf-wire{ stroke: var(--eicui-base-color-info); stroke-width: 4px; stroke-dasharray: 10,5; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="bzgf-node" data-nodetype="eicBasic">
|
||||||
|
<div class="body">
|
||||||
|
<div class="title">{title}</div>
|
||||||
|
<div class="subtitle">{subtitle}</div>
|
||||||
|
</div>
|
||||||
|
<div class="port" data-type="in" data-id="in1" data-direction="w"></div>
|
||||||
|
<div class="port" data-type="in" data-id="in2" data-direction="w"></div>
|
||||||
|
<div class="port" data-type="in" data-id="in3" data-direction="w"></div>
|
||||||
|
|
||||||
|
<div class="port" data-type="out" data-id="out1" data-direction="e"></div>
|
||||||
|
<div class="port" data-type="out" data-id="out2" data-direction="e"></div>
|
||||||
|
<div class="port" data-type="out" data-id="out3" data-direction="e"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="bzgf-node" data-nodetype="refnodein">
|
||||||
|
<div class="body">{parentport}</div>
|
||||||
|
<div class="port" data-type="out" data-id="out1" data-direction="e"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="bzgf-node" data-nodetype="refnodeout">
|
||||||
|
<div class="body">{parentport}</div>
|
||||||
|
<div class="port" data-type="in" data-id="in1" data-direction="w"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
105
graflow_examples/nodesLib/nodesEIC2.html
Normal file
105
graflow_examples/nodesLib/nodesEIC2.html
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
<style>
|
||||||
|
.bzgf-node {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
width: 160px;
|
||||||
|
height: 80px;
|
||||||
|
color: black;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
padding: .5em;
|
||||||
|
}
|
||||||
|
.bzgf-node .body{
|
||||||
|
z-index: 1;
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: var(--eicui-base-color-grey-25);
|
||||||
|
border:2px solid var(--eicui-base-color-grey-50);
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
.bzgf-node .title {
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--app-color-black);
|
||||||
|
margin: .5em auto .2em auto;
|
||||||
|
}
|
||||||
|
.bzgf-node .subtitle {
|
||||||
|
font-size: .9em;
|
||||||
|
color: var(--eicui-base-color-primary-100);
|
||||||
|
width: 90%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.bzgf-node .port{
|
||||||
|
position: absolute;
|
||||||
|
height: 10px;
|
||||||
|
width: 10px;
|
||||||
|
background: var(--eicui-base-color-info-25);
|
||||||
|
opacity: 0;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bzgf-node [data-direction="n"]{ top: -4px; left: 50%; transform: translateX(-50%);}
|
||||||
|
.bzgf-node [data-direction="s"]{ bottom: -4px; left: 50%; transform: translateX(-50%);}
|
||||||
|
.bzgf-node [data-direction="w"]{ left: -4px; top: 50%; transform: translateY(-50%);}
|
||||||
|
.bzgf-node [data-direction="e"]{ right: -4px; top: 50%; transform: translateY(-50%);}
|
||||||
|
|
||||||
|
.bzgf-node[data-nodetype="refnodein"], .bzgf-node[data-nodetype="refnodeout"] {
|
||||||
|
width:3em;
|
||||||
|
height:3em;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
.bzgf-node[data-nodetype="refnodein"] .body, .bzgf-node[data-nodetype="refnodeout"] .body{
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 3em;
|
||||||
|
height: 3em;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.bzgf-node[data-nodetype="refnodein"] .body, .bzgf-node[data-nodetype="refnodeout"] .body{ background: var(--eicui-base-color-grey-25); }
|
||||||
|
|
||||||
|
.bzgf-wire{ stroke: var(--eicui-base-color-info); stroke-width: 4px; stroke-dasharray: 10,5; }
|
||||||
|
|
||||||
|
path.arrow-head{ fill: var(--eicui-base-color-info); }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<svg style="display:none" aria-hidden="true">
|
||||||
|
<template id="svg-arrows">
|
||||||
|
<defs>
|
||||||
|
<marker id="arrow"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
refX="16"
|
||||||
|
refY="8"
|
||||||
|
markerWidth="16"
|
||||||
|
markerHeight="16"
|
||||||
|
orient="auto-start-reverse"
|
||||||
|
markerUnits="userSpaceOnUse">
|
||||||
|
<path d="M0,0 L16,8 L0,16 Z" class="arrow-head"/>
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
|
</template>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="bzgf-node" data-nodetype="eicBasic">
|
||||||
|
<div class="body">
|
||||||
|
<div class="title">{title}</div>
|
||||||
|
<div class="subtitle">{subtitle}</div>
|
||||||
|
</div>
|
||||||
|
<div class="port" data-type="in" data-id="in1" data-direction="w"></div>
|
||||||
|
<div class="port" data-type="out" data-id="out1" data-direction="e"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="bzgf-node" data-nodetype="refnodein">
|
||||||
|
<div class="body">{parentport}</div>
|
||||||
|
<div class="port" data-type="out" data-id="out1" data-direction="e"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="bzgf-node" data-nodetype="refnodeout">
|
||||||
|
<div class="body">{parentport}</div>
|
||||||
|
<div class="port" data-type="in" data-id="in1" data-direction="w"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
203
graflow_examples/nodesLib/nodesTest1.html
Normal file
203
graflow_examples/nodesLib/nodesTest1.html
Normal file
@@ -0,0 +1,203 @@
|
|||||||
|
<style>
|
||||||
|
.bzgf-node {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
border-width:2px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 6px;
|
||||||
|
width: 160px;
|
||||||
|
height: 80px;
|
||||||
|
color: black;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
padding: .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bzgf-node .title {
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 2em;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.bzgf-node .body { margin-top: 2em; }
|
||||||
|
.bzgf-node .body input {
|
||||||
|
width:4em;
|
||||||
|
font-size: .9em;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid #CCC;
|
||||||
|
}
|
||||||
|
.bzgf-node .body div{ font-size: 12px; text-align: left; line-height: 24px; }
|
||||||
|
.bzgf-node .port{
|
||||||
|
position: absolute;
|
||||||
|
height: 10px;
|
||||||
|
width: 10px;
|
||||||
|
border: 1px solid black;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.bzgf-node .port[data-type="in"] { background: #0F0; }
|
||||||
|
.bzgf-node .port[data-type="out"] { background: #FF0; }
|
||||||
|
|
||||||
|
.bzgf-node [data-direction="w"]{ left: -7px; top: calc(50% + 1em); transform: translateY(-50%);}
|
||||||
|
.bzgf-node [data-direction="e"]{ right: -7px; top: calc(50% + 1em); transform: translateY(-50%);}
|
||||||
|
.bzgf-node [data-direction="n"]{ top: -7px; left: 50%; transform: translateX(-50%);}
|
||||||
|
.bzgf-node [data-direction="s"]{ bottom: -7px; left: 50%; transform: translateX(-50%);}
|
||||||
|
|
||||||
|
.bzgf-node[data-nodetype="inc"]{
|
||||||
|
background: #DFD;
|
||||||
|
border-color: #090;
|
||||||
|
}
|
||||||
|
.bzgf-node[data-nodetype="inc"] .title{ background: #090; }
|
||||||
|
|
||||||
|
|
||||||
|
.bzgf-node[data-nodetype="wadder"]{
|
||||||
|
background: #DFD;
|
||||||
|
border-color: #090;
|
||||||
|
height:150px
|
||||||
|
}
|
||||||
|
.bzgf-node[data-nodetype="wadder"] .body{ display: grid; grid-gap: 4px; margin-left:0.5em; grid-template-columns: 1fr 1fr; align-items: center; }
|
||||||
|
.bzgf-node[data-nodetype="wadder"] .title{ background: #090; }
|
||||||
|
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp1"] { top:51px; }
|
||||||
|
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp2"] { top:75px; }
|
||||||
|
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp3"] { top:99px; }
|
||||||
|
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp4"] { top:123px; }
|
||||||
|
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp5"] { top:147px; }
|
||||||
|
|
||||||
|
.bzgf-node[data-nodetype="factor"]{
|
||||||
|
background: #DDF;
|
||||||
|
border-color: #009;
|
||||||
|
}
|
||||||
|
.bzgf-node[data-nodetype="factor"] .title{ background: #009; }
|
||||||
|
|
||||||
|
.bzgf-node[data-nodetype="multiplier"]{
|
||||||
|
background: #DDF;
|
||||||
|
border-color: #009;
|
||||||
|
height:110px
|
||||||
|
}
|
||||||
|
.bzgf-node[data-nodetype="multiplier"] .body{
|
||||||
|
font-size:40px;
|
||||||
|
font-weight: bold;
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
.bzgf-node[data-nodetype="multiplier"] .title{ background: #009; }
|
||||||
|
.bzgf-node[data-nodetype="multiplier"] .port[data-id="inp1"] { top:37px; }
|
||||||
|
.bzgf-node[data-nodetype="multiplier"] .port[data-id="inp2"] { top:63px; }
|
||||||
|
.bzgf-node[data-nodetype="multiplier"] .port[data-id="inp3"] { top:89px; }
|
||||||
|
|
||||||
|
.bzgf-node[data-nodetype="input"],
|
||||||
|
.bzgf-node[data-nodetype="console"]{
|
||||||
|
background: #CCC;
|
||||||
|
border-color: #555;
|
||||||
|
}
|
||||||
|
.bzgf-node[data-nodetype="input"] .title,
|
||||||
|
.bzgf-node[data-nodetype="console"] .title{ background: #555; }
|
||||||
|
|
||||||
|
.bzgf-node[data-nodetype="refnodein"], .bzgf-node[data-nodetype="refnodeout"] {
|
||||||
|
width:3em;
|
||||||
|
height:3em;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
.bzgf-node[data-nodetype="refnodein"] .body, .bzgf-node[data-nodetype="refnodeout"] .body{
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 3em;
|
||||||
|
height: 3em;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.bzgf-node[data-nodetype="refnodein"] .body{ background: #0F0; }
|
||||||
|
.bzgf-node[data-nodetype="refnodeout"] .body{ background: #FF0; }
|
||||||
|
|
||||||
|
.bzgf-wire{ stroke: #0AF; stroke-width: 2; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="bzgf-node" data-nodetype="inc">
|
||||||
|
<div class="title">Fixed Increment</div>
|
||||||
|
<div class="port" data-type="in" data-id="inp1" data-direction="w"></div>
|
||||||
|
<div class="port" data-type="out" data-id="out1" data-direction="e"></div>
|
||||||
|
<div class="body">
|
||||||
|
<label>Increment:</label><input name="incvalue" type="text" value="1">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="bzgf-node" data-nodetype="factor">
|
||||||
|
<div class="title">Fixed factor</div>
|
||||||
|
<div class="port" data-type="in" data-id="inp1" data-direction="w"></div>
|
||||||
|
<div class="port" data-type="out" data-id="out1" data-direction="e"></div>
|
||||||
|
<div class="body">
|
||||||
|
<label>Factor:</label><input name="factvalue" type="text" value="0.5">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="bzgf-node" data-nodetype="wadder">
|
||||||
|
<div class="title">Adder</div>
|
||||||
|
<div class="port" data-type="in" data-id="inp1" data-direction="w"></div>
|
||||||
|
<div class="port" data-type="in" data-id="inp2" data-direction="w"></div>
|
||||||
|
<div class="port" data-type="in" data-id="inp3" data-direction="w"></div>
|
||||||
|
<div class="port" data-type="in" data-id="inp4" data-direction="w"></div>
|
||||||
|
<div class="port" data-type="in" data-id="inp5" data-direction="w"></div>
|
||||||
|
<div class="port" data-type="out" data-id="out1" data-direction="e"></div>
|
||||||
|
<div class="body">
|
||||||
|
<div>
|
||||||
|
<div>x <input type="text" name="weight1" value="1"></div>
|
||||||
|
<div>x <input type="text" name="weight2" value="1"></div>
|
||||||
|
<div>x <input type="text" name="weight3" value="1"></div>
|
||||||
|
<div>x <input type="text" name="weight4" value="1"></div>
|
||||||
|
<div>x <input type="text" name="weight5" value="1"></div>
|
||||||
|
</div>
|
||||||
|
<div style="font-size:40px;font-weight: bold;transform: translateY(-50%);">∑</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="bzgf-node" data-nodetype="multiplier">
|
||||||
|
<div class="title">Multiply</div>
|
||||||
|
<div class="port" data-type="in" data-id="inp1" data-direction="w"></div>
|
||||||
|
<div class="port" data-type="in" data-id="inp2" data-direction="w"></div>
|
||||||
|
<div class="port" data-type="in" data-id="inp3" data-direction="w"></div>
|
||||||
|
<div class="port" data-type="out" data-id="out1" data-direction="e"></div>
|
||||||
|
<div class="body">x</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="bzgf-node" data-nodetype="console">
|
||||||
|
<div class="title">Console</div>
|
||||||
|
<div class="port" data-type="in" data-id="inp1" data-direction="w"></div>
|
||||||
|
<div class="body"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="bzgf-node" data-nodetype="input">
|
||||||
|
<div class="title">input</div>
|
||||||
|
<div class="port" data-type="out" data-id="out1" data-direction="e"></div>
|
||||||
|
<div class="body">
|
||||||
|
<label>Value:</label><input name="value" type="text" value="1">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="bzgf-node" data-nodetype="refnodein">
|
||||||
|
<div class="body">{parentport}</div>
|
||||||
|
<div class="port" data-type="out" data-id="out1" data-direction="e"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="bzgf-node" data-nodetype="refnodeout">
|
||||||
|
<div class="body">{parentport}</div>
|
||||||
|
<div class="port" data-type="in" data-id="in1" data-direction="w"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
237
graflow_examples/nodesLib/nodesTest2.html
Normal file
237
graflow_examples/nodesLib/nodesTest2.html
Normal file
@@ -0,0 +1,237 @@
|
|||||||
|
<style>
|
||||||
|
.bzgf-node {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
border-width:2px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 6px;
|
||||||
|
width: 160px;
|
||||||
|
height: 80px;
|
||||||
|
color: black;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
padding: .5em;
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bzgf-node .text {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%) translateY(-50%);
|
||||||
|
width: 100%;
|
||||||
|
height: 2em;
|
||||||
|
color: white;
|
||||||
|
transform: translateX(-50%), translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bzgf-node .port{
|
||||||
|
position: absolute;
|
||||||
|
height: 6px;
|
||||||
|
width: 6px;
|
||||||
|
background: #FFF;
|
||||||
|
z-index: 99;
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bzgf-node [data-direction="w"]{ left: -7px; top: 50%; transform: translateY(-50%);}
|
||||||
|
.bzgf-node [data-direction="e"]{ right: -7px; top: 50%; transform: translateY(-50%);}
|
||||||
|
.bzgf-node [data-direction="n"]{ top: -7px; left: 50%; transform: translateX(-50%);}
|
||||||
|
.bzgf-node [data-direction="s"]{ bottom: -7px; left: 50%; transform: translateX(-50%);}
|
||||||
|
|
||||||
|
.bzgf-node[data-nodetype="start"],
|
||||||
|
.bzgf-node[data-nodetype="end"]{
|
||||||
|
border: 1px solid white;
|
||||||
|
width: 100px;
|
||||||
|
height: 30px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.bzgf-node[data-nodetype="start"] .text,
|
||||||
|
.bzgf-node[data-nodetype="end"] .text{ width: 80%; }
|
||||||
|
|
||||||
|
.bzgf-node[data-nodetype="condition"]{
|
||||||
|
border: none;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.bzgf-node[data-nodetype="condition"] .frame{
|
||||||
|
border: 1px solid white;
|
||||||
|
transform: rotate(-45deg) scale(0.7071);
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
}
|
||||||
|
.bzgf-node[data-nodetype="condition"] .port[data-direction="w"]{ left: -5px; }
|
||||||
|
.bzgf-node[data-nodetype="condition"] [data-direction="e"]{ right: -5px; }
|
||||||
|
.bzgf-node[data-nodetype="condition"] [data-direction="n"]{ top: -5px; }
|
||||||
|
.bzgf-node[data-nodetype="condition"] [data-direction="s"]{ bottom: -5px; }
|
||||||
|
|
||||||
|
.bzgf-node[data-nodetype="process"]{
|
||||||
|
border: 1px solid white;
|
||||||
|
width: 150px;
|
||||||
|
height: 70px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.bzgf-node[data-nodetype="process"] .text{ width: 80%; }
|
||||||
|
.bzgf-node[data-nodetype="process"] .dbline{
|
||||||
|
border: 1px solid white;
|
||||||
|
width: 75%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: -1px;
|
||||||
|
left: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bzgf-node[data-nodetype="database"]{
|
||||||
|
border: 1px solid white;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
isolation: isolate;
|
||||||
|
}
|
||||||
|
.bzgf-node[data-nodetype="database"] .top{
|
||||||
|
z-index: 2;
|
||||||
|
height: 20%;
|
||||||
|
border: 1px solid white;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: -10%;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
.bzgf-node[data-nodetype="database"] .text{
|
||||||
|
background: black;
|
||||||
|
width: 87%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.bzgf-node[data-nodetype="database"] .bottom{
|
||||||
|
z-index: 0;
|
||||||
|
height: 20%;
|
||||||
|
border: 1px solid white;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -10%;
|
||||||
|
left: 0;
|
||||||
|
width: 99%;
|
||||||
|
background: black;
|
||||||
|
clip-path: polygon( 0% 110%, 100% 110%, 100% 50%, 0% 50%);
|
||||||
|
}
|
||||||
|
.bzgf-node[data-nodetype="database"] [data-direction="n"]{ top: -17px; }
|
||||||
|
.bzgf-node[data-nodetype="database"] [data-direction="s"]{ bottom: -17px; }
|
||||||
|
|
||||||
|
.bzgf-node[data-nodetype="preparation"]{
|
||||||
|
width: 150px;
|
||||||
|
height: 80px;
|
||||||
|
padding: 0;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.bzgf-node[data-nodetype="preparation"] .text{ width: 85%; }
|
||||||
|
.bzgf-node[data-nodetype="preparation"] .outerframe{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
background: white;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
place-items: center;
|
||||||
|
clip-path: polygon(
|
||||||
|
10% 0%,
|
||||||
|
90% 0%,
|
||||||
|
100% 50%,
|
||||||
|
90% 100%,
|
||||||
|
10% 100%,
|
||||||
|
0% 50%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
.bzgf-node[data-nodetype="preparation"] .innerframe{
|
||||||
|
width: calc(100% - 2px);
|
||||||
|
height: calc(100% - 2px);
|
||||||
|
position: absolute;
|
||||||
|
top: 1px;
|
||||||
|
left: 1px;
|
||||||
|
background: black;
|
||||||
|
clip-path: inherit;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.bzgf-wire{ stroke: #FF0; stroke-width: 2; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<svg style="display:none" aria-hidden="true">
|
||||||
|
<template id="svg-arrows">
|
||||||
|
<defs>
|
||||||
|
<marker id="arrow"
|
||||||
|
viewBox="0 0 10 10"
|
||||||
|
refX="10"
|
||||||
|
refY="5"
|
||||||
|
markerWidth="10"
|
||||||
|
markerHeight="10"
|
||||||
|
orient="auto-start-reverse"
|
||||||
|
markerUnits="userSpaceOnUse">
|
||||||
|
<path d="M0,0 L10,5 L0,10 Z" fill="#FF0"/>
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
|
</template>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="bzgf-node" data-nodetype="start">
|
||||||
|
<div class="text">{text}</div>
|
||||||
|
<div class="port" data-id="out1" data-direction="s"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="bzgf-node" data-nodetype="end">
|
||||||
|
<div class="text">{text}</div>
|
||||||
|
<div class="port" data-id="inp1" data-direction="n"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="bzgf-node" data-nodetype="condition">
|
||||||
|
<div class="frame"></div>
|
||||||
|
<div class="text">{text}</div>
|
||||||
|
<div class="port" data-id="inp1" data-direction="n"></div>
|
||||||
|
<div class="port" data-id="out1" data-direction="w"></div>
|
||||||
|
<div class="port" data-id="out2" data-direction="s"></div>
|
||||||
|
<div class="port" data-id="out3" data-direction="e"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="bzgf-node" data-nodetype="process">
|
||||||
|
<div class="dbline"></div>
|
||||||
|
<div class="text">{text}</div>
|
||||||
|
<div class="port" data-id="inout1" data-direction="n"></div>
|
||||||
|
<div class="port" data-id="inout2" data-direction="s"></div>
|
||||||
|
<div class="port" data-id="inout3" data-direction="w"></div>
|
||||||
|
<div class="port" data-id="inout4" data-direction="e"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="bzgf-node" data-nodetype="database">
|
||||||
|
<div class="top"></div>
|
||||||
|
<div class="bottom"></div>
|
||||||
|
<div class="text">{text}</div>
|
||||||
|
<div class="port" data-id="inout1" data-direction="n"></div>
|
||||||
|
<div class="port" data-id="inout2" data-direction="s"></div>
|
||||||
|
<div class="port" data-id="inout3" data-direction="w"></div>
|
||||||
|
<div class="port" data-id="inout4" data-direction="e"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="bzgf-node" data-nodetype="preparation">
|
||||||
|
<div class="outerframe">
|
||||||
|
<div class="innerframe">
|
||||||
|
<div class="text">{text}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="port" data-id="inp1" data-direction="n"></div>
|
||||||
|
<div class="port" data-id="out1" data-direction="s"></div>
|
||||||
|
<div class="port" data-id="inout1" data-direction="w"></div>
|
||||||
|
<div class="port" data-id="inout2" data-direction="e"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
21
graflow_examples/test.html
Normal file
21
graflow_examples/test.html
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<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">
|
||||||
|
</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>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
99
graflow_examples/test1.html
Normal file
99
graflow_examples/test1.html
Normal file
@@ -0,0 +1,99 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<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>
|
||||||
|
<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');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: block;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 5px;
|
||||||
|
background:#888;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.demooptions{
|
||||||
|
padding: 2px;
|
||||||
|
position: absolute;
|
||||||
|
top: 2px;
|
||||||
|
right: 2px;
|
||||||
|
width: 10em;
|
||||||
|
background: #FFFB;
|
||||||
|
border-radius: 5px;
|
||||||
|
text-align: center;
|
||||||
|
z-index:99999;
|
||||||
|
font-size: .7em;
|
||||||
|
border: 1px solid #999;
|
||||||
|
}
|
||||||
|
.demooptions button{
|
||||||
|
text-transform: none;
|
||||||
|
margin: 2px;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
bz-graflow{
|
||||||
|
overflow: scroll;
|
||||||
|
border: 2px solid black;
|
||||||
|
}
|
||||||
|
bz-graflow.compunet{ grid-column: 1 / -1; width: 100vw; height: 60vh; background:black; }
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
window.addEventListener('load',()=>{
|
||||||
|
let grflw1 = document.querySelector('bz-graflow.compunet')
|
||||||
|
grflw1.addEventListener('subflowLoaded',
|
||||||
|
(evt) => { grflw1 = evt.detail.subflow }
|
||||||
|
)
|
||||||
|
grflw1.addEventListener('subflowExited',
|
||||||
|
(evt) => { grflw1 = evt.target }
|
||||||
|
)
|
||||||
|
document.querySelector('[data-trigger="onAutoplace1H"]').addEventListener('click',
|
||||||
|
(evt) => { grflw1.autoPlace('horizontal', 80, 30, 1000, document.querySelector('[data-id="compunet"]').value) }
|
||||||
|
)
|
||||||
|
document.querySelector('[data-trigger="onAutoplace1V"]').addEventListener('click',
|
||||||
|
(evt) => { grflw1.autoPlace('vertical', 80, 30, 1000, document.querySelector('[data-id="compunet"]').value) }
|
||||||
|
)
|
||||||
|
document.querySelector('input[data-id="compunet"]').addEventListener('change',
|
||||||
|
(evt) => { grflw1.setAttribute('tension', evt.target.value); grflw1.refresh() }
|
||||||
|
)
|
||||||
|
document.querySelector('select[name="wiretype"]').addEventListener('change',
|
||||||
|
(evt) => { grflw1.setAttribute('wiretype', evt.target.value); grflw1.refresh() }
|
||||||
|
)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<bz-graflow class="compunet" flow="/app/thirdparty/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>
|
||||||
|
<select name="align" data-id="compunet">
|
||||||
|
<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="compunet" type="number" size="2" value="60"></div>
|
||||||
|
</div>
|
||||||
|
</bz-graflow>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
100
graflow_examples/test2.html
Normal file
100
graflow_examples/test2.html
Normal file
@@ -0,0 +1,100 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<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>
|
||||||
|
<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');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: block;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 5px;
|
||||||
|
background:#888;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.demooptions{
|
||||||
|
padding: 2px;
|
||||||
|
position: absolute;
|
||||||
|
top: 2px;
|
||||||
|
right: 2px;
|
||||||
|
width: 10em;
|
||||||
|
background: #FFFB;
|
||||||
|
border-radius: 5px;
|
||||||
|
text-align: center;
|
||||||
|
z-index:99999;
|
||||||
|
font-size: .7em;
|
||||||
|
border: 1px solid #999;
|
||||||
|
}
|
||||||
|
.demooptions button{
|
||||||
|
text-transform: none;
|
||||||
|
margin: 2px;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
bz-graflow{
|
||||||
|
overflow: scroll;
|
||||||
|
border: 2px solid black;
|
||||||
|
}
|
||||||
|
bz-graflow.organi{ width: 40vw; height: 100vh; background:black; }
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
window.addEventListener('load',()=>{
|
||||||
|
let grflw3 = document.querySelector('bz-graflow.organi')
|
||||||
|
grflw3.addEventListener('subflowLoaded',
|
||||||
|
(evt) => { grflw3 = evt.detail.subflow }
|
||||||
|
)
|
||||||
|
grflw3.addEventListener('subflowExited',
|
||||||
|
(evt) => { grflw3 = evt.target }
|
||||||
|
)
|
||||||
|
document.querySelector('[data-trigger="onAutoplace3H"]').addEventListener('click',
|
||||||
|
(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, document.querySelector('[data-id="organi"]').value) }
|
||||||
|
)
|
||||||
|
document.querySelector('input[data-id="organi"]').addEventListener('change',
|
||||||
|
(evt) => { grflw3.setAttribute('tension', evt.target.value); grflw3.refresh() }
|
||||||
|
)
|
||||||
|
document.querySelector('select[name="wiretype"]').addEventListener('change',
|
||||||
|
(evt) => { grflw3.setAttribute('wiretype', evt.target.value); grflw3.refresh() }
|
||||||
|
)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<bz-graflow class="organi" flow="/app/thirdparty/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>
|
||||||
|
<select name="align" data-id="organi">
|
||||||
|
<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>
|
||||||
|
<option value="parent">Parent</option>
|
||||||
|
</select>
|
||||||
|
<div class-"cols-2"=""><label>tension</label><input data-id="organi" type="number" size="2" value="60"></div>
|
||||||
|
</div>
|
||||||
|
</bz-graflow>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
98
graflow_examples/test3.html
Normal file
98
graflow_examples/test3.html
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<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>
|
||||||
|
<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');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: block;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 5px;
|
||||||
|
background:#888;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.demooptions{
|
||||||
|
padding: 2px;
|
||||||
|
position: absolute;
|
||||||
|
top: 2px;
|
||||||
|
right: 2px;
|
||||||
|
width: 10em;
|
||||||
|
background: #FFFB;
|
||||||
|
border-radius: 5px;
|
||||||
|
text-align: center;
|
||||||
|
z-index:99999;
|
||||||
|
font-size: .7em;
|
||||||
|
border: 1px solid #999;
|
||||||
|
}
|
||||||
|
.demooptions button{
|
||||||
|
text-transform: none;
|
||||||
|
margin: 2px;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
bz-graflow{
|
||||||
|
overflow: scroll;
|
||||||
|
border: 2px solid black;
|
||||||
|
}
|
||||||
|
bz-graflow.eic{ grid-column: 1 / -1; width: 80vw; height: 60vh; background: var(--eicui-base-color-grey-10); }
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
window.addEventListener('load',()=>{
|
||||||
|
let grflw2 = document.querySelector('bz-graflow.eic')
|
||||||
|
grflw2.addEventListener('subflowLoaded',
|
||||||
|
(evt) => { grflw2 = evt.detail.subflow }
|
||||||
|
)
|
||||||
|
grflw2.addEventListener('subflowExited',
|
||||||
|
(evt) => { grflw2 = evt.target }
|
||||||
|
)
|
||||||
|
document.querySelector('[data-trigger="onAutoplace2H"]').addEventListener('click',
|
||||||
|
(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, document.querySelector('[data-id="eic"]').value) }
|
||||||
|
)
|
||||||
|
document.querySelector('input[data-id="eic"]').addEventListener('change',
|
||||||
|
(evt) => { grflw2.setAttribute('tension', evt.target.value); grflw2.refresh() }
|
||||||
|
)
|
||||||
|
document.querySelector('select[name="wiretype"]').addEventListener('change',
|
||||||
|
(evt) => { grflw2.setAttribute('wiretype', evt.target.value); grflw2.refresh() }
|
||||||
|
)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<bz-graflow class="eic" flow="/app/thirdparty/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="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="eic" type="number" size="2" value="60"></div>
|
||||||
|
</div>
|
||||||
|
</bz-graflow>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
98
graflow_examples/test4.5.html
Normal file
98
graflow_examples/test4.5.html
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<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>
|
||||||
|
<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');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: block;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 5px;
|
||||||
|
background:#888;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.demooptions{
|
||||||
|
padding: 2px;
|
||||||
|
position: absolute;
|
||||||
|
top: 2px;
|
||||||
|
right: 2px;
|
||||||
|
width: 10em;
|
||||||
|
background: #FFFB;
|
||||||
|
border-radius: 5px;
|
||||||
|
text-align: center;
|
||||||
|
z-index:999999;
|
||||||
|
font-size: .7em;
|
||||||
|
border: 1px solid #999;
|
||||||
|
}
|
||||||
|
.demooptions button{
|
||||||
|
text-transform: none;
|
||||||
|
margin: 2px;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
bz-graflow{
|
||||||
|
overflow: scroll;
|
||||||
|
border: 2px solid black;
|
||||||
|
}
|
||||||
|
bz-graflow.icmp{ grid-column: 1 / -1; width: 100vw; height: 80vh; background: var(--eicui-base-color-grey-10); }
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
window.addEventListener('load',()=>{
|
||||||
|
let grflw4 = document.querySelector('bz-graflow.icmp')
|
||||||
|
grflw4.addEventListener('subflowLoaded',
|
||||||
|
(evt) => { grflw4 = evt.detail.subflow }
|
||||||
|
)
|
||||||
|
grflw4.addEventListener('subflowExited',
|
||||||
|
(evt) => { grflw4 = evt.target }
|
||||||
|
)
|
||||||
|
document.querySelector('[data-trigger="onAutoplace4H"]').addEventListener('click',
|
||||||
|
(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, document.querySelector('[data-id="icmp"]').value) }
|
||||||
|
)
|
||||||
|
document.querySelector('input[data-id="icmp"]').addEventListener('change',
|
||||||
|
(evt) => { grflw4.setAttribute('tension', evt.target.value); grflw4.refresh() }
|
||||||
|
)
|
||||||
|
document.querySelector('select[name="wiretype"]').addEventListener('change',
|
||||||
|
(evt) => { grflw4.setAttribute('wiretype', evt.target.value); grflw4.refresh() }
|
||||||
|
)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</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">
|
||||||
|
<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="last">Last</option>
|
||||||
|
<option value="parent">Parent</option>
|
||||||
|
</select>
|
||||||
|
<select name="wiretype">
|
||||||
|
<option value="ortho" selected>Ortho</option>
|
||||||
|
<option value="straight">Straight</option>
|
||||||
|
<option value="bezier">Bezier</option>
|
||||||
|
</select>
|
||||||
|
<div class-"cols-2"=""><label>tension</label><input data-id="icmp" type="number" size="2" value="20"></div>
|
||||||
|
</div>
|
||||||
|
</bz-graflow>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
120
graflow_examples/test4.html
Normal file
120
graflow_examples/test4.html
Normal file
@@ -0,0 +1,120 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<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>
|
||||||
|
<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');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: block;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 5px;
|
||||||
|
background:#888;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.demooptions{
|
||||||
|
padding: 2px;
|
||||||
|
position: absolute;
|
||||||
|
top: 2px;
|
||||||
|
right: 2px;
|
||||||
|
width: 10em;
|
||||||
|
background: #FFFB;
|
||||||
|
border-radius: 5px;
|
||||||
|
text-align: center;
|
||||||
|
z-index:999999;
|
||||||
|
font-size: .7em;
|
||||||
|
border: 1px solid #999;
|
||||||
|
}
|
||||||
|
.demooptions button{
|
||||||
|
text-transform: none;
|
||||||
|
margin: 2px;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
bz-graflow{
|
||||||
|
overflow: scroll;
|
||||||
|
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',()=>{
|
||||||
|
let grflw4 = document.querySelector('bz-graflow.icmp')
|
||||||
|
grflw4.addEventListener('subflowLoaded',
|
||||||
|
(evt) => { grflw4 = evt.detail.subflow }
|
||||||
|
)
|
||||||
|
grflw4.addEventListener('subflowExited',
|
||||||
|
(evt) => { grflw4 = evt.target }
|
||||||
|
)
|
||||||
|
document.querySelector('[data-trigger="onAutoplace4H"]').addEventListener('click',
|
||||||
|
(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, document.querySelector('[data-id="icmp"]').value) }
|
||||||
|
)
|
||||||
|
document.querySelector('input[data-id="icmp"]').addEventListener('change',
|
||||||
|
(evt) => { grflw4.setAttribute('tension', evt.target.value); grflw4.refresh() }
|
||||||
|
)
|
||||||
|
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>
|
||||||
|
<div class="container" style="padding:0;"">
|
||||||
|
<bz-graflow class="icmp" flow="/app/thirdparty/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>
|
||||||
|
<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>
|
||||||
99
graflow_examples/test5.html
Normal file
99
graflow_examples/test5.html
Normal file
@@ -0,0 +1,99 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<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>
|
||||||
|
<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');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: block;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 5px;
|
||||||
|
background:#888;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.demooptions{
|
||||||
|
padding: 2px;
|
||||||
|
position: absolute;
|
||||||
|
top: 2px;
|
||||||
|
right: 2px;
|
||||||
|
width: 10em;
|
||||||
|
background: #FFFB;
|
||||||
|
border-radius: 5px;
|
||||||
|
text-align: center;
|
||||||
|
z-index:999999;
|
||||||
|
font-size: .7em;
|
||||||
|
border: 1px solid #999;
|
||||||
|
}
|
||||||
|
.demooptions button{
|
||||||
|
text-transform: none;
|
||||||
|
margin: 2px;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
bz-graflow{
|
||||||
|
overflow: scroll;
|
||||||
|
border: 2px solid black;
|
||||||
|
}
|
||||||
|
bz-graflow.compunet{ grid-column: 1 / -1; width: 100vw; height: 60vh; background:black; }
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
window.addEventListener('load',()=>{
|
||||||
|
let grflw1 = document.querySelector('bz-graflow.compunet')
|
||||||
|
grflw1.addEventListener('subflowLoaded',
|
||||||
|
(evt) => { grflw1 = evt.detail.subflow }
|
||||||
|
)
|
||||||
|
grflw1.addEventListener('subflowExited',
|
||||||
|
(evt) => { grflw1 = evt.target }
|
||||||
|
)
|
||||||
|
document.querySelector('[data-trigger="onAutoplace1H"]').addEventListener('click',
|
||||||
|
(evt) => { grflw1.autoPlace('horizontal', 80, 30, 1000, document.querySelector('[data-id="compunet"]').value) }
|
||||||
|
)
|
||||||
|
document.querySelector('[data-trigger="onAutoplace1V"]').addEventListener('click',
|
||||||
|
(evt) => { grflw1.autoPlace('vertical', 80, 30, 1000, document.querySelector('[data-id="compunet"]').value) }
|
||||||
|
)
|
||||||
|
document.querySelector('input[data-id="compunet"]').addEventListener('change',
|
||||||
|
(evt) => { grflw1.setAttribute('tension', evt.target.value); grflw1.refresh() }
|
||||||
|
)
|
||||||
|
document.querySelector('select[name="wiretype"]').addEventListener('change',
|
||||||
|
(evt) => { grflw1.setAttribute('wiretype', evt.target.value); grflw1.refresh() }
|
||||||
|
)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<bz-graflow class="compunet" flow="/app/thirdparty/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>
|
||||||
|
<select name="align" data-id="compunet">
|
||||||
|
<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="compunet" type="number" size="2" value="60"></div>
|
||||||
|
</div>
|
||||||
|
</bz-graflow>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
101
graflow_examples/test6.html
Normal file
101
graflow_examples/test6.html
Normal file
@@ -0,0 +1,101 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<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>
|
||||||
|
<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');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: block;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 5px;
|
||||||
|
background:#888;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.demooptions{
|
||||||
|
padding: 2px;
|
||||||
|
position: absolute;
|
||||||
|
top: 2px;
|
||||||
|
right: 2px;
|
||||||
|
width: 10em;
|
||||||
|
background: #FFFB;
|
||||||
|
border-radius: 5px;
|
||||||
|
text-align: center;
|
||||||
|
z-index:999999;
|
||||||
|
font-size: .7em;
|
||||||
|
border: 1px solid #999;
|
||||||
|
}
|
||||||
|
.demooptions button{
|
||||||
|
text-transform: none;
|
||||||
|
margin: 2px;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
bz-graflow{
|
||||||
|
overflow: scroll;
|
||||||
|
border: 2px solid black;
|
||||||
|
}
|
||||||
|
bz-graflow.compunet{ grid-column: 1 / -1; width: 100vw; height: 100vh; background:black; }
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
window.addEventListener('load',()=>{
|
||||||
|
let grflw1 = document.querySelector('bz-graflow.compunet')
|
||||||
|
grflw1.setAttribute('tension', document.querySelector('input[data-id="compunet"]').value)
|
||||||
|
grflw1.setAttribute('wiretype', document.querySelector('select[name="wiretype"]').value)
|
||||||
|
grflw1.addEventListener('subflowLoaded',
|
||||||
|
(evt) => { grflw1 = evt.detail.subflow }
|
||||||
|
)
|
||||||
|
grflw1.addEventListener('subflowExited',
|
||||||
|
(evt) => { grflw1 = evt.target }
|
||||||
|
)
|
||||||
|
document.querySelector('[data-trigger="onAutoplace1H"]').addEventListener('click',
|
||||||
|
(evt) => { grflw1.autoPlace('horizontal', 80, 30, 1000, document.querySelector('[data-id="compunet"]').value) }
|
||||||
|
)
|
||||||
|
document.querySelector('[data-trigger="onAutoplace1V"]').addEventListener('click',
|
||||||
|
(evt) => { grflw1.autoPlace('vertical', 80, 30, 1000, document.querySelector('[data-id="compunet"]').value) }
|
||||||
|
)
|
||||||
|
document.querySelector('input[data-id="compunet"]').addEventListener('change',
|
||||||
|
(evt) => { grflw1.setAttribute('tension', evt.target.value); grflw1.refresh() }
|
||||||
|
)
|
||||||
|
document.querySelector('select[name="wiretype"]').addEventListener('change',
|
||||||
|
(evt) => { grflw1.setAttribute('wiretype', evt.target.value); grflw1.refresh() }
|
||||||
|
)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<bz-graflow class="compunet" flow="/app/thirdparty/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>
|
||||||
|
<select name="align" data-id="compunet">
|
||||||
|
<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="compunet" type="number" size="2" value="20"></div>
|
||||||
|
</div>
|
||||||
|
</bz-graflow>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user