From 092ef2f22d13f266551fa15dfa52a90cc1a5ce53 Mon Sep 17 00:00:00 2001
From: STEINNI <nicolas.stein@ext.ec.europa.eu>
Date: Wed, 7 Jan 2026 11:21:25 +0000
Subject: [PATCH] graflow: fixed missing styles in shadow dom + fixed bad
 coords in autoplacement

---
 app/assets/html/bzGraflow/nodesEIC.html    |  4 ++--
 app/assets/html/bzGraflow/nodesTest1.html  | 27 +++++++++++-----------
 app/assets/html/bzGraflow/nodesTest2.html  |  1 +
 app/assets/html/test.html                  |  3 +--
 app/assets/json/bzGraflow/testFlowEic.json |  4 ++--
 app/thirdparty/buildoz/buildoz.css         | 10 --------
 app/thirdparty/buildoz/bzGraflow.js        | 20 ++++++++++------
 7 files changed, 33 insertions(+), 36 deletions(-)

diff --git a/app/assets/html/bzGraflow/nodesEIC.html b/app/assets/html/bzGraflow/nodesEIC.html
index dc77f0f..f7839c0 100644
--- a/app/assets/html/bzGraflow/nodesEIC.html
+++ b/app/assets/html/bzGraflow/nodesEIC.html
@@ -1,5 +1,6 @@
 <style>
     .bzgf-node {
+        font-family: Arial, Helvetica, sans-serif;
         width: 160px;
         height: 80px;
         color: black;
@@ -16,13 +17,12 @@
         border-radius: 6px;
     }
     .bzgf-node .title {
-        font-family: Arial, Helvetica, sans-serif;
         font-weight: bold;
         color: var(--app-color-black);
         margin: .5em auto .2em auto;    
     }
     .bzgf-node .subtitle {
-        font-family: Arial, Helvetica, sans-serif;
+        
         font-size: .9em;
         color: var(--eicui-base-color-primary-100);
         width: 90%;
diff --git a/app/assets/html/bzGraflow/nodesTest1.html b/app/assets/html/bzGraflow/nodesTest1.html
index ca6356a..dcab133 100644
--- a/app/assets/html/bzGraflow/nodesTest1.html
+++ b/app/assets/html/bzGraflow/nodesTest1.html
@@ -1,5 +1,6 @@
 <style>
     .bzgf-node {
+        font-family: Arial, Helvetica, sans-serif;
         border-width:2px;
         border-style: solid;
         border-radius: 6px;
@@ -27,7 +28,7 @@
         border-radius: 6px;
         border: 1px solid #CCC;
     }
-    .bzgf-node .body span{ font-size: 12px; text-align: left; line-height: 21px; }
+    .bzgf-node .body div{ font-size: 12px; text-align: left; line-height: 24px; }
     .bzgf-node .port{
         position: absolute;
         height: 10px;
@@ -38,8 +39,8 @@
     .bzgf-node .port[data-type="in"] { background: #0F0; }
     .bzgf-node .port[data-type="out"] { background: #FF0; }
 
-    .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="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%);}
 
@@ -57,11 +58,11 @@
     }
     .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:37px; }
-    .bzgf-node[data-nodetype="wadder"] .port[data-id="inp2"] { top:63px; }
-    .bzgf-node[data-nodetype="wadder"] .port[data-id="inp3"] { top:89px; }
-    .bzgf-node[data-nodetype="wadder"] .port[data-id="inp4"] { top:115px; }
-    .bzgf-node[data-nodetype="wadder"] .port[data-id="inp5"] { top:141px; }
+    .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;
@@ -131,11 +132,11 @@
         <div class="port" data-type="out" data-id="out1" data-direction="e"></div>
         <div class="body">
             <div>
-                <span>x <input type="text" name="weight1" value="1"></span>
-                <span>x <input type="text" name="weight2" value="1"></span>
-                <span>x <input type="text" name="weight3" value="1"></span>
-                <span>x <input type="text" name="weight4" value="1"></span>
-                <span>x <input type="text" name="weight5" value="1"></span>
+                <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%);">&sum;</div>
         </div>
diff --git a/app/assets/html/bzGraflow/nodesTest2.html b/app/assets/html/bzGraflow/nodesTest2.html
index 6e6d09e..d7d4989 100644
--- a/app/assets/html/bzGraflow/nodesTest2.html
+++ b/app/assets/html/bzGraflow/nodesTest2.html
@@ -1,5 +1,6 @@
 <style>
     .bzgf-node {
+        font-family: Arial, Helvetica, sans-serif;
         border-width:2px;
         border-style: solid;
         border-radius: 6px;
diff --git a/app/assets/html/test.html b/app/assets/html/test.html
index 09d50d2..617d9a3 100644
--- a/app/assets/html/test.html
+++ b/app/assets/html/test.html
@@ -31,7 +31,6 @@
             }            
             bz-graflow{
                 overflow: scroll;
-                border: 2px dotted #4BABFF;
             }
             bz-graflow.compunet{ grid-column: 1 / -1; width: 80vw; height: 40vh; background:black; }
             bz-graflow.eic{ grid-column: 1 / -1; width: 80vw; height: 40vh; background: var(--eicui-base-color-grey-10); }
@@ -47,7 +46,7 @@
                     (evt) => { grflw1.autoPlace('vertical') }
                 )
 
-                const grflw2 = document.querySelector('bz-graflow.organi')
+                const grflw2 = document.querySelector('bz-graflow.eic')
                 document.querySelector('[data-trigger="onAutoplace2H"]').addEventListener('click',
                     (evt) => { grflw2.autoPlace('horizontal') }
                 )
diff --git a/app/assets/json/bzGraflow/testFlowEic.json b/app/assets/json/bzGraflow/testFlowEic.json
index 3d4ea6c..c4957d5 100644
--- a/app/assets/json/bzGraflow/testFlowEic.json
+++ b/app/assets/json/bzGraflow/testFlowEic.json
@@ -13,7 +13,7 @@
             },
             {   "nodeType": "eicBasic",
                 "id": "aze2",
-                "coords": { "x": 300, "y": 120},
+                "coords": { "x": 100, "y": 220},
                 "markup": { 
                     "title": "Select message",
                     "subtitle": "Select an email template"
@@ -22,7 +22,7 @@
             },
             {   "nodeType": "eicBasic",
                 "id": "aze3",
-                "coords": { "x": 550, "y": 120},
+                "coords": { "x": 150, "y": 320},
                 "markup": { 
                     "title": "Data mapping",
                     "subtitle": "Associate content variables with attendees data"
diff --git a/app/thirdparty/buildoz/buildoz.css b/app/thirdparty/buildoz/buildoz.css
index 4076af6..6a43343 100644
--- a/app/thirdparty/buildoz/buildoz.css
+++ b/app/thirdparty/buildoz/buildoz.css
@@ -200,13 +200,3 @@ bz-graflow .bzgf-main-container{
     position: relative;
     box-sizing: border-box;
 }
-bz-graflow .bzgf-wires-container,
-bz-graflow .bzgf-nodes-container{
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-}
-bz-graflow .bzgf-nodes-container{ z-index:10; }
-bz-graflow .bzgf-wires-container{ z-index:9; }
-bz-graflow .bzgf-nodes-container .bzgf-node{ position:absolute; }
\ No newline at end of file
diff --git a/app/thirdparty/buildoz/bzGraflow.js b/app/thirdparty/buildoz/bzGraflow.js
index e7f38a1..3c0c4b1 100644
--- a/app/thirdparty/buildoz/bzGraflow.js
+++ b/app/thirdparty/buildoz/bzGraflow.js
@@ -18,7 +18,13 @@ class BZgraflow extends Buildoz{
         this.mainContainer  = document.createElement('div')
         this.mainContainer.classList.add('bzgf-main-container')
         this.shadow = this.mainContainer.attachShadow({ mode: 'open' })
-
+        const style = document.createElement('style')
+        style.textContent = `
+            .bzgf-wires-container,
+            .bzgf-nodes-container{ position: absolute; inset: 0; width: 100%; height: 100%; }
+            .bzgf-nodes-container .bzgf-node{ position:absolute; }
+        `
+        this.shadow.appendChild(style)
         this.nodesContainer = document.createElement('div')
         this.nodesContainer.classList.add('bzgf-nodes-container')
         this.wiresContainer = document.createElementNS('http://www.w3.org/2000/svg', 'svg') 
@@ -123,10 +129,8 @@ class BZgraflow extends Buildoz{
     }
 
     refresh(){
-        let x = 0
-        let y = 0
         for(const node of this.flow.nodes){
-            const nodeEl = this.addNode(node)
+            this.addNode(node)
         } 
         for(const link of this.flow.links){
             this.addWire(link)
@@ -146,7 +150,7 @@ class BZgraflow extends Buildoz{
         const node2 = this.stagedNodes[idNode2]
         const port2 = node2.ports[idPort2]
         if(!node1 || !node2 || !port1 || !port2) {
-            console.warn('bezier on bad node / port!', idNode1, idPort1, idNode2, idPort2)
+            console.warn('Link on bad node / port!', idNode1, idPort1, idNode2, idPort2)
             return('')
         }
         const bb1 = port1.el.getBoundingClientRect()
@@ -264,8 +268,10 @@ class BZgraflow extends Buildoz{
     moveNode(nid, destx, desty, duration = 200, cb) {
         const t0 = performance.now()
         const bb = this.stagedNodes[nid].getBoundingClientRect()
-        const x0=bb.x
-        const y0 = bb.y
+        const parentbb = this.stagedNodes[nid].parentElement.getBoundingClientRect()
+        const x0=bb.x - parentbb.x
+        const y0 = bb.y - parentbb.y
+        console.log('y0:', y0, bb)
         function frame(t) {
             const p = Math.min((t - t0) / duration, 1)
             const k = p * p * (3 - 2 * p) // smoothstep