graflow: dataset & markup from flow

This commit is contained in:
STEINNI
2026-01-07 10:42:17 +00:00
parent 5f467b782b
commit bdea9a7817

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)