graflow: dataset & markup from flow

This commit is contained in:
STEINNI
2026-01-07 10:42:17 +00:00
parent 53dd4b1458
commit e98ee24c38
2 changed files with 20 additions and 17 deletions
+9 -6
View File
@@ -5,26 +5,29 @@
{ "nodeType": "eicBasic", { "nodeType": "eicBasic",
"id": "aze", "id": "aze",
"coords": { "x": 50, "y": 120}, "coords": { "x": 50, "y": 120},
"data": { "markup": {
"title": "Build attendees list", "title": "Build attendees list",
"subtitle": "Build an attendees list to email" "subtitle": "Build an attendees list to email"
} },
"data": { "a": "a1", "b":"b1"}
}, },
{ "nodeType": "eicBasic", { "nodeType": "eicBasic",
"id": "aze2", "id": "aze2",
"coords": { "x": 300, "y": 120}, "coords": { "x": 300, "y": 120},
"data": { "markup": {
"title": "Select message", "title": "Select message",
"subtitle": "Select an email template" "subtitle": "Select an email template"
} },
"data": { "a": "a2", "b":"b2"}
}, },
{ "nodeType": "eicBasic", { "nodeType": "eicBasic",
"id": "aze3", "id": "aze3",
"coords": { "x": 550, "y": 120}, "coords": { "x": 550, "y": 120},
"data": { "markup": {
"title": "Data mapping", "title": "Data mapping",
"subtitle": "Associate content variables with attendees data" "subtitle": "Associate content variables with attendees data"
} },
"data": { "a": "a3", "b":"b3"}
} }
], ],
"links": [ "links": [
+10 -10
View File
@@ -88,18 +88,18 @@ class BZgraflow extends Buildoz{
} }
} }
addNode(type, id, x, y, data){ addNode(node){
if(!(type in this.nodesRegistry)){ console.warn(`Unknown node type (${type})`); return(null)} const id = node.id
const nodeDef = this.nodesRegistry[type] if(!(node.nodeType in this.nodesRegistry)){ console.warn(`Unknown node type (${node.nodeType})`); return(null)}
const nodeDef = this.nodesRegistry[node.nodeType]
this.stagedNodes[id] = nodeDef.cloneNode(true) this.stagedNodes[id] = nodeDef.cloneNode(true)
if(data){ for(const token in node.markup){
for(const token in data){ this.stagedNodes[id].innerHTML = this.stagedNodes[id].innerHTML.replace(new RegExp(`\{${token}\}`, 'g'), node.markup[token])
this.stagedNodes[id].innerHTML = this.stagedNodes[id].innerHTML.replace(new RegExp(`\{${token}\}`, 'g'), data[token])
}
} }
if(typeof(node.data)=='object') Object.assign(this.stagedNodes[id].dataset, node.data)
const portEls = this.stagedNodes[id].querySelectorAll('.port') const portEls = this.stagedNodes[id].querySelectorAll('.port')
this.stagedNodes[id].style.left = `${x}px` this.stagedNodes[id].style.left = `${node.coords.x}px`
this.stagedNodes[id].style.top = `${y}px` this.stagedNodes[id].style.top = `${node.coords.y}px`
this.stagedNodes[id].dataset.id = id this.stagedNodes[id].dataset.id = id
this.stagedNodes[id].ports = Object.fromEntries(Array.from(portEls).map(item => ([item.dataset.id, { ...item.dataset, el:item }]))) this.stagedNodes[id].ports = Object.fromEntries(Array.from(portEls).map(item => ([item.dataset.id, { ...item.dataset, el:item }])))
this.nodesContainer.append(this.stagedNodes[id]) this.nodesContainer.append(this.stagedNodes[id])
@@ -126,7 +126,7 @@ class BZgraflow extends Buildoz{
let x = 0 let x = 0
let y = 0 let y = 0
for(const node of this.flow.nodes){ for(const node of this.flow.nodes){
const nodeEl = this.addNode(node.nodeType, node.id , node.coords.x, node.coords.y, node.data) const nodeEl = this.addNode(node)
} }
for(const link of this.flow.links){ for(const link of this.flow.links){
this.addWire(link) this.addWire(link)