P42/P42_UI
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

graflow: fixed missing styles in shadow dom + fixed bad coords in autoplacement

Browse Source
This commit is contained in:
STEINNI
2026-01-07 11:21:25 +00:00
parent e98ee24c38
commit 092ef2f22d
7 changed files with 33 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/html/bzGraflow/nodesEIC.html
+2 -2
View File
@@ -1,5 +1,6 @@
<style> <style>
.bzgf-node { .bzgf-node {
font-family: Arial, Helvetica, sans-serif;
width: 160px; width: 160px;
height: 80px; height: 80px;
color: black; color: black;
@@ -16,13 +17,12 @@
border-radius: 6px; border-radius: 6px;
} }
.bzgf-node .title { .bzgf-node .title {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold; font-weight: bold;
color: var(--app-color-black); color: var(--app-color-black);
margin: .5em auto .2em auto; margin: .5em auto .2em auto;
} }
.bzgf-node .subtitle { .bzgf-node .subtitle {
font-family: Arial, Helvetica, sans-serif;
font-size: .9em; font-size: .9em;
color: var(--eicui-base-color-primary-100); color: var(--eicui-base-color-primary-100);
width: 90%; width: 90%;
app/assets/html/bzGraflow/nodesTest1.html
+14 -13
View File
@@ -1,5 +1,6 @@
<style> <style>
.bzgf-node { .bzgf-node {
font-family: Arial, Helvetica, sans-serif;
border-width:2px; border-width:2px;
border-style: solid; border-style: solid;
border-radius: 6px; border-radius: 6px;
@@ -27,7 +28,7 @@
border-radius: 6px; border-radius: 6px;
border: 1px solid #CCC; 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{ .bzgf-node .port{
position: absolute; position: absolute;
height: 10px; height: 10px;
@@ -38,8 +39,8 @@
.bzgf-node .port[data-type="in"] { background: #0F0; } .bzgf-node .port[data-type="in"] { background: #0F0; }
.bzgf-node .port[data-type="out"] { background: #FF0; } .bzgf-node .port[data-type="out"] { background: #FF0; }
.bzgf-node [data-direction="w"]{ left: -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: 50%; 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="n"]{ top: -7px; left: 50%; transform: translateX(-50%);}
.bzgf-node [data-direction="s"]{ bottom: -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"] .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"] .title{ background: #090; }
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp1"] { top:37px; } .bzgf-node[data-nodetype="wadder"] .port[data-id="inp1"] { top:51px; }
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp2"] { top:63px; } .bzgf-node[data-nodetype="wadder"] .port[data-id="inp2"] { top:75px; }
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp3"] { top:89px; } .bzgf-node[data-nodetype="wadder"] .port[data-id="inp3"] { top:99px; }
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp4"] { top:115px; } .bzgf-node[data-nodetype="wadder"] .port[data-id="inp4"] { top:123px; }
.bzgf-node[data-nodetype="wadder"] .port[data-id="inp5"] { top:141px; } .bzgf-node[data-nodetype="wadder"] .port[data-id="inp5"] { top:147px; }
.bzgf-node[data-nodetype="factor"]{ .bzgf-node[data-nodetype="factor"]{
background: #DDF; background: #DDF;
@@ -131,11 +132,11 @@
<div class="port" data-type="out" data-id="out1" data-direction="e"></div> <div class="port" data-type="out" data-id="out1" data-direction="e"></div>
<div class="body"> <div class="body">
<div> <div>
<span>x <input type="text" name="weight1" value="1"></span> <div>x <input type="text" name="weight1" value="1"></div>
<span>x <input type="text" name="weight2" value="1"></span> <div>x <input type="text" name="weight2" value="1"></div>
<span>x <input type="text" name="weight3" value="1"></span> <div>x <input type="text" name="weight3" value="1"></div>
<span>x <input type="text" name="weight4" value="1"></span> <div>x <input type="text" name="weight4" value="1"></div>
<span>x <input type="text" name="weight5" value="1"></span> <div>x <input type="text" name="weight5" value="1"></div>
</div> </div>
<div style="font-size:40px;font-weight: bold;transform: translateY(-50%);">&sum;</div> <div style="font-size:40px;font-weight: bold;transform: translateY(-50%);">&sum;</div>
</div> </div>
app/assets/html/bzGraflow/nodesTest2.html
+1
View File
@@ -1,5 +1,6 @@
<style> <style>
.bzgf-node { .bzgf-node {
font-family: Arial, Helvetica, sans-serif;
border-width:2px; border-width:2px;
border-style: solid; border-style: solid;
border-radius: 6px; border-radius: 6px;
app/assets/html/test.html
+1 -2
View File
@@ -31,7 +31,6 @@
} }
bz-graflow{ bz-graflow{
overflow: scroll; overflow: scroll;
border: 2px dotted #4BABFF;
} }
bz-graflow.compunet{ grid-column: 1 / -1; width: 80vw; height: 40vh; background:black; } 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); } 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') } (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', document.querySelector('[data-trigger="onAutoplace2H"]').addEventListener('click',
(evt) => { grflw2.autoPlace('horizontal') } (evt) => { grflw2.autoPlace('horizontal') }
) )
app/assets/json/bzGraflow/testFlowEic.json
+2 -2
View File
@@ -13,7 +13,7 @@
}, },
{ "nodeType": "eicBasic", { "nodeType": "eicBasic",
"id": "aze2", "id": "aze2",
"coords": { "x": 300, "y": 120}, "coords": { "x": 100, "y": 220},
"markup": { "markup": {
"title": "Select message", "title": "Select message",
"subtitle": "Select an email template" "subtitle": "Select an email template"
@@ -22,7 +22,7 @@
}, },
{ "nodeType": "eicBasic", { "nodeType": "eicBasic",
"id": "aze3", "id": "aze3",
"coords": { "x": 550, "y": 120}, "coords": { "x": 150, "y": 320},
"markup": { "markup": {
"title": "Data mapping", "title": "Data mapping",
"subtitle": "Associate content variables with attendees data" "subtitle": "Associate content variables with attendees data"
app/thirdparty/buildoz/buildoz.css
Vendored
-10
View File
@@ -200,13 +200,3 @@ bz-graflow .bzgf-main-container{
position: relative; position: relative;
box-sizing: border-box; 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; }
app/thirdparty/buildoz/bzGraflow.js
Vendored
+13 -7
View File
@@ -18,7 +18,13 @@ class BZgraflow extends Buildoz{
this.mainContainer = document.createElement('div') this.mainContainer = document.createElement('div')
this.mainContainer.classList.add('bzgf-main-container') this.mainContainer.classList.add('bzgf-main-container')
this.shadow = this.mainContainer.attachShadow({ mode: 'open' }) 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 = document.createElement('div')
this.nodesContainer.classList.add('bzgf-nodes-container') this.nodesContainer.classList.add('bzgf-nodes-container')
this.wiresContainer = document.createElementNS('http://www.w3.org/2000/svg', 'svg') this.wiresContainer = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
@@ -123,10 +129,8 @@ class BZgraflow extends Buildoz{
} }
refresh(){ refresh(){
let x = 0
let y = 0
for(const node of this.flow.nodes){ for(const node of this.flow.nodes){
const nodeEl = this.addNode(node) this.addNode(node)
} }
for(const link of this.flow.links){ for(const link of this.flow.links){
this.addWire(link) this.addWire(link)
@@ -146,7 +150,7 @@ class BZgraflow extends Buildoz{
const node2 = this.stagedNodes[idNode2] const node2 = this.stagedNodes[idNode2]
const port2 = node2.ports[idPort2] const port2 = node2.ports[idPort2]
if(!node1 || !node2 || !port1 || !port2) { 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('') return('')
} }
const bb1 = port1.el.getBoundingClientRect() const bb1 = port1.el.getBoundingClientRect()
@@ -264,8 +268,10 @@ class BZgraflow extends Buildoz{
moveNode(nid, destx, desty, duration = 200, cb) { moveNode(nid, destx, desty, duration = 200, cb) {
const t0 = performance.now() const t0 = performance.now()
const bb = this.stagedNodes[nid].getBoundingClientRect() const bb = this.stagedNodes[nid].getBoundingClientRect()
const x0=bb.x const parentbb = this.stagedNodes[nid].parentElement.getBoundingClientRect()
const y0 = bb.y const x0=bb.x - parentbb.x
const y0 = bb.y - parentbb.y
console.log('y0:', y0, bb)
function frame(t) { function frame(t) {
const p = Math.min((t - t0) / duration, 1) const p = Math.min((t - t0) / duration, 1)
const k = p * p * (3 - 2 * p) // smoothstep const k = p * p * (3 - 2 * p) // smoothstep