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

graflow: EIC + text replacement

Browse Source
This commit is contained in:
STEINNI
2026-01-07 10:28:23 +00:00
parent 797d86d4d9
commit 53dd4b1458
5 changed files with 171 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/html/bzGraflow/nodesEIC.html
+59
View File
@@ -0,0 +1,59 @@
<style>
.bzgf-node {
width: 160px;
height: 80px;
color: black;
text-align: center;
position: absolute;
padding: .5em;
}
.bzgf-node .body{
z-index: 1;
position: absolute;
inset: 0;
background: var(--eicui-base-color-grey-25);
border:2px solid var(--eicui-base-color-grey-50);
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%;
margin: auto;
}
.bzgf-node .port{
position: absolute;
height: 10px;
width: 10px;
background: var(--eicui-base-color-grey-20);
border-radius: 10px;
}
.bzgf-node [data-direction="w"]{ left: -4px; top: 50%; transform: translateY(-50%);}
.bzgf-node [data-direction="e"]{ right: -4px; top: 50%; transform: translateY(-50%);}
.bzgf-node [data-direction="n"]{ top: -4px; left: 50%; transform: translateX(-50%);}
.bzgf-node [data-direction="s"]{ bottom: -4px; left: 50%; transform: translateX(-50%);}
.bzgf-wire{ stroke: var(--eicui-base-color-info); stroke-width: 4px; stroke-dasharray: 10,5; }
</style>
<template>
<div class="bzgf-node" data-nodetype="eicBasic">
<div class="body">
<div class="title">{title}</div>
<div class="subtitle">{subtitle}</div>
</div>
<div class="port" data-type="in" data-id="in1" data-direction="w"></div>
<div class="port" data-type="out" data-id="out1" data-direction="e"></div>
</div>
</template>
app/assets/html/bzGraflow/nodesTest2.html
+8 -6
View File
@@ -14,7 +14,8 @@
.bzgf-node .text {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 100%;
height: 2em;
color: white;
@@ -42,6 +43,8 @@
height: 30px;
border-radius: 50%;
}
.bzgf-node[data-nodetype="start"] .text,
.bzgf-node[data-nodetype="end"] .text{ width: 80%; }
.bzgf-node[data-nodetype="condition"]{
border: none;
@@ -66,9 +69,10 @@
height: 70px;
padding: 0;
}
.bzgf-node[data-nodetype="process"] .text{ width: 80%; }
.bzgf-node[data-nodetype="process"] .dbline{
border: 1px solid white;
width: 80%;
width: 75%;
height: 100%;
position: absolute;
top: -1px;
@@ -94,11 +98,8 @@
}
.bzgf-node[data-nodetype="database"] .text{
background: black;
width: 99%;
height: 98%;
width: 87%;
z-index: 1;
position: absolute;
inset: 0;
}
.bzgf-node[data-nodetype="database"] .bottom{
z-index: 0;
@@ -120,6 +121,7 @@
padding: 0;
border: none;
}
.bzgf-node[data-nodetype="preparation"] .text{ width: 85%; }
.bzgf-node[data-nodetype="preparation"] .outerframe{
width: 100%;
height: 100%;