From 19b8df4933374f4744767c25419db2553aa1de7f Mon Sep 17 00:00:00 2001
From: STEINNI <nicolas.stein@ext.ec.europa.eu>
Date: Thu, 15 Jan 2026 15:12:10 +0000
Subject: [PATCH] Graflow: better refresh & clear, better EIC example, tension
 field

---
 bzGraflow.js | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/bzGraflow.js b/bzGraflow.js
index bee65a6..a94375f 100644
--- a/bzGraflow.js
+++ b/bzGraflow.js
@@ -5,6 +5,7 @@ class BZgraflow extends Buildoz{
         this.defaultAttrs = { tension: 100 }
         this.stagedNodes = { }
         this.stagedWires = { }
+        this.arrowDefs = null
     }
     static _loadedNodeStyles = new Set() // Allow multi instances or re-loadNodes, but avoid reinjecting same styles !
 
@@ -71,8 +72,9 @@ class BZgraflow extends Buildoz{
         this.nodesRegistry = {}
         for(const tpl of doc.querySelectorAll('template')){
             if(tpl.id=='svg-arrows'){
-                this.wiresContainer.appendChild(tpl.querySelector('defs').cloneNode(true))
-                this.arrowDefined = true
+                this.arrowDefs = tpl.querySelector('defs').cloneNode(true)
+                console.log(this.arrowDefs)
+                this.wiresContainer.appendChild(this.arrowDefs)
             } else {
                 const rootEl = tpl.content.querySelector('.bzgf-node')
                 if(!rootEl) continue
@@ -118,15 +120,23 @@ class BZgraflow extends Buildoz{
         this.stagedWires[id] = document.createElementNS('http://www.w3.org/2000/svg', 'path')
         this.stagedWires[id].setAttribute('d', path)
         this.stagedWires[id].setAttribute('fill', 'none')
-        if(this.arrowDefined && link.endArrow) this.stagedWires[id].setAttribute('marker-end','url(#arrow)')
-        if(this.arrowDefined && link.startArrow) this.stagedWires[id].setAttribute('marker-start','url(#arrow)')
+        if(this.arrowDefs && link.endArrow) this.stagedWires[id].setAttribute('marker-end','url(#arrow)')
+        if(this.arrowDefs && link.startArrow) this.stagedWires[id].setAttribute('marker-start','url(#arrow)')
         this.stagedWires[id].classList.add('bzgf-wire')
         this.stagedWires[id].dataset.id = id
         this.wiresContainer.append(this.stagedWires[id])
         return(this.stagedWires[id])
     }
 
+
+    clear(){
+        this.nodesContainer.innerHTML = ''
+        this.wiresContainer.innerHTML = ''
+        if(this.arrowDefs) this.wiresContainer.appendChild(this.arrowDefs)
+    }
+
     refresh(){
+        this.clear()
         let forceAutoplace = false
         for(const node of this.flow.nodes){
             if((!node.coords) || (!node.coords.x) ||(!node.coords.y)) forceAutoplace=true
@@ -145,7 +155,6 @@ class BZgraflow extends Buildoz{
     }
 
     bezier(idNode1, idPort1, idNode2, idPort2, tensionMin=60) {
-
         const svgRect = this.wiresContainer.getBoundingClientRect()
         const node1 = this.stagedNodes[idNode1]
         const port1 = node1.ports[idPort1]
@@ -175,7 +184,7 @@ class BZgraflow extends Buildoz{
         let c1y = y1 + (dirVect[port1.direction].y * tension)
         let c2x = x2 + (dirVect[port2.direction].x * tension)
         let c2y = y2 + (dirVect[port2.direction].y * tension)
-        if((idNode1==idNode2) && (idPort1==idPort2)){ // Special case of self-loop: correct intermediary points
+        if((idNode1==idNode2) && (idPort1==idPort2)){ // Special case of self-loop: spread a bit intermediary points
             if(['n', 's'].includes(port1.direction)) {
                 c1x += tension
                 c2x -= tension