graflow: EIC + text replacement

bzGraflow.js

@@ -30,6 +30,12 @@ class BZgraflow extends Buildoz{
         this.loadFlow(flowUrl) // Let it load async 
     }
     
+    error(msg, err){
+        this.innerHTML = `<div style="background:red;color:black;margin: auto;width: fit-content;">${msg}</div>`
+        if(err) console.error(msg, err)
+        else console.error(msg)
+    }
+
     async loadFlow(url){
         const res = await fetch(url+'?'+crypto.randomUUID())
         const buf = await res.text()
@@ -37,11 +43,12 @@ class BZgraflow extends Buildoz{
         try{
             flowObj = JSON.parse(buf)
         } catch(err){
-            console.error('Could not parse flow JSON!?', err)
+            this.error('Could not parse flow JSON!?', err)
+
             return
         }
         if(!flowObj.nodesFile){
-            console.error('No nodesFile in JSON!?')
+            this.error('No nodesFile in JSON!?')
             return
         }
         await this.loadNodes(flowObj.nodesFile)
@@ -81,9 +88,15 @@ class BZgraflow extends Buildoz{
         }
     }
 
-    addNode(type, id, x, y){
+    addNode(type, id, x, y, data){
+        if(!(type in this.nodesRegistry)){ console.warn(`Unknown node type (${type})`); return(null)}
         const nodeDef = this.nodesRegistry[type]
         this.stagedNodes[id] = nodeDef.cloneNode(true)
+        if(data){
+            for(const token in data){
+                this.stagedNodes[id].innerHTML = this.stagedNodes[id].innerHTML.replace(new RegExp(`\{${token}\}`, 'g'), data[token])
+            }
+        }        
         const portEls = this.stagedNodes[id].querySelectorAll('.port')
         this.stagedNodes[id].style.left = `${x}px`
         this.stagedNodes[id].style.top = `${y}px`
@@ -113,7 +126,7 @@ class BZgraflow extends Buildoz{
         let x = 0
         let y = 0
         for(const node of this.flow.nodes){
-            const nodeEl = this.addNode(node.nodeType, node.id , node.coords.x, node.coords.y)
+            const nodeEl = this.addNode(node.nodeType, node.id , node.coords.x, node.coords.y, node.data)
         } 
         for(const link of this.flow.links){
             this.addWire(link)