graflow playing with severity in test4

graflow_examples/flows/testFlowICMP.json

@@ -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",

graflow_examples/nodesLib/nodesEIC.html

@@ -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>

graflow_examples/nodesLib/nodesEIC2.html

@@ -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;

graflow_examples/test.html

@@ -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>

graflow_examples/test4.html

@@ -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>