graflow playing with severity in test4

This commit is contained in:
STEINNI
2026-03-11 22:07:16 +00:00
parent b15edd0e90
commit 1dd5df8074
5 changed files with 70 additions and 12 deletions

View File

@@ -7,7 +7,7 @@
"markup": {
"title": "Evaluations",
"subtitle": "...",
"severity": "secondary"
"severity": "info"
},
"data": { "node": "eval", "nodeId":null}
},
@@ -17,7 +17,7 @@
"markup": {
"title": "GAP",
"subtitle": "...",
"severity": "secondary"
"severity": "accent"
},
"data": { "a": "a2", "b":"b2"}
},
@@ -27,7 +27,7 @@
"markup": {
"title": "CID",
"subtitle": "...",
"severity": "secondary"
"severity": "primary"
},
"data": { "a": "a3", "b":"b3"}
},
@@ -37,7 +37,7 @@
"markup": {
"title": "Case Allocation",
"subtitle": "...",
"severity": "secondary"
"severity": "success"
},
"data": {
"track": "equity"
@@ -49,7 +49,7 @@
"markup": {
"title": "Grant Signature",
"subtitle": "...",
"severity": "secondary"
"severity": "danger"
},
"data": {
"track": "grant"
@@ -123,7 +123,7 @@
"markup": {
"title": "Investment Agreement",
"subtitle": "...",
"severity": "secondary"
"severity": "warning"
},
"data": {
"track": "equity",

View File

@@ -8,6 +8,14 @@
position: absolute;
padding: .5em;
}
div.bzgf-node div.body[primary] { background-color: var(--eicui-base-color-primary); color:white;}
div.bzgf-node div.body[info] { background-color: var(--eicui-base-color-info); color:white;}
div.bzgf-node div.body[success] { background-color: var(--eicui-base-color-success); color:white;}
div.bzgf-node div.body[warning] { background-color: var(--eicui-base-color-warning);}
div.bzgf-node div.body[danger] { background-color: var(--eicui-base-color-danger);}
div.bzgf-node div.body[accent] { background-color: var(--eicui-base-color-accent);}
.bzgf-node .body{
z-index: 1;
position: absolute;
@@ -68,7 +76,7 @@
<template>
<div class="bzgf-node" data-nodetype="eicBasic">
<div class="body">
<div class="body" {severity}>
<div class="title">{title}</div>
<div class="subtitle">{subtitle}</div>
</div>

View File

@@ -8,6 +8,14 @@
position: absolute;
padding: .5em;
}
div.bzgf-node[primary] { background-color: var(--eicui-base-color-primary);}
div.bzgf-node[info] { background-color: var(--eicui-base-color-info);}
div.bzgf-node[success] { background-color: var(--eicui-base-color-success);}
div.bzgf-node[warning] { background-color: var(--eicui-base-color-warning);}
div.bzgf-node[danger] { background-color: var(--eicui-base-color-danger);}
div.bzgf-node[accent] { background-color: var(--eicui-base-color-accent);}
.bzgf-node .body{
z-index: 1;
position: absolute;

View File

@@ -38,6 +38,7 @@
<th>align</th>
<th>oriented</th>
<th>nodesmove</th>
<th>editwires</th>
</tr>
</thead>
<tbody>
@@ -51,6 +52,7 @@
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a target="test2" href="./test2.html">test2</a></td>
@@ -62,6 +64,7 @@
<td></td>
<td>X</td>
<td></td>
<td></td>
</tr>
<tr>
<td><a target="test3" href="./test3.html">test3</a></td>
@@ -73,6 +76,7 @@
<td>First</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a target="test4" href="./test4.html">test4</a></td>
@@ -84,6 +88,7 @@
<td>Center</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a target="test4.5" href="./test4.5.html">test4.5</a></td>
@@ -95,6 +100,7 @@
<td>Parent</td>
<td>X</td>
<td></td>
<td></td>
</tr>
<tr>
<td><a target="test5" href="./test5.html">test5</a></td>
@@ -106,6 +112,7 @@
<td></td>
<td></td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td><a target="test6" href="./test6.html">test6</a></td>
@@ -117,6 +124,7 @@
<td></td>
<td></td>
<td>X</td>
<td></td>
</tr>
</tbody>
</table>

View File

@@ -55,11 +55,32 @@
min-width: 800px;
min-height: 300px;
border: 1px solid #999;
padding: 1rem;
padding: 0;
position: relative;
border:2px solid #A00
}
.container::after {
content: "";
position: absolute;
right: 3px;
bottom: 3px;
width: 20px;
height: 20px;
pointer-events: none;
background:
repeating-linear-gradient(
135deg,
transparent 0px,
transparent 3px,
#A00 3px,
#A00 6px
);
}
</style>
<script>
window.addEventListener('load',()=>{
const severities = ['primary', 'info', 'success', 'warning', 'danger', 'accent']
let grflw4 = document.querySelector('bz-graflow.icmp')
grflw4.addEventListener('subflowLoaded',
(evt) => { grflw4 = evt.detail.subflow }
@@ -86,14 +107,27 @@
const grfl = entry.target.querySelector('bz-graflow')
grfl.autofit()
})
ro.observe(el)
let aifmi = null; let sidx=0;
const sevanimation = () => { console.log('sevanimation')
severities.forEach(severity => aifmi.removeAttribute(severity))
aifmi.setAttribute(severities[sidx], '')
sidx++
if (sidx >= severities.length) sidx = 0
setTimeout(sevanimation, 1000)
}
grflw4.addEventListener('refreshed',() => {
aifmi = grflw4.stagedNodes['aifm-investment'].querySelector('.body')
sevanimation()
})
})
</script>
</head>
<body>
<div class="container" style="padding:0;"">
<div class="container">
<bz-graflow class="icmp" flow="./flows/testFlowICMP.json" tension="60">
<div class="demooptions">
<button data-trigger="onAutoplace4H">Auto-place Horizontal</button>