graflow: subflow polishing

app/assets/html/bzGraflow/nodesEIC.html

@@ -61,8 +61,7 @@
         align-items: center;
         justify-content: center;
     }
-    .bzgf-node[data-nodetype="refnodein"] .body{ background: #0F0; }
-    .bzgf-node[data-nodetype="refnodeout"] .body{ background: #FF0; }
+    .bzgf-node[data-nodetype="refnodein"] .body, .bzgf-node[data-nodetype="refnodeout"] .body{ background: var(--eicui-base-color-grey-25); }
 
     .bzgf-wire{ stroke: var(--eicui-base-color-info); stroke-width: 4px; stroke-dasharray: 10,5; }
 </style>

app/assets/html/bzGraflow/nodesTest1.html

@@ -96,8 +96,18 @@
     .bzgf-node[data-nodetype="input"] .title,
     .bzgf-node[data-nodetype="console"] .title{ background: #555; }
 
-    .bzgf-node[data-nodetype="refnodein"] .body, .bzgf-node[data-nodetype="refnodeout"] body{ 
+    .bzgf-node[data-nodetype="refnodein"], .bzgf-node[data-nodetype="refnodeout"] {
+        width:3em;
+        height:3em;
+        padding: 2px;
+    }
+    .bzgf-node[data-nodetype="refnodein"] .body, .bzgf-node[data-nodetype="refnodeout"] .body{ 
         border-radius: 50%;
+        width: 3em;
+        height: 3em;
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
     .bzgf-node[data-nodetype="refnodein"] .body{ background: #0F0; }
     .bzgf-node[data-nodetype="refnodeout"] .body{ background: #FF0; }
@@ -181,11 +191,13 @@
 <template>
     <div class="bzgf-node" data-nodetype="refnodein">
             <div class="body">{parentport}</div>
+            <div class="port" data-type="out" data-id="out1" data-direction="e"></div>
         </div>
 </template>
 
 <template>
     <div class="bzgf-node" data-nodetype="refnodeout">
         <div class="body">{parentport}</div>
+        <div class="port" data-type="in" data-id="in1" data-direction="w"></div>
     </div>
 </template>

app/assets/html/test.html

@@ -58,6 +58,9 @@
                 grflw1.addEventListener('subflowLoaded',
                     (evt) => { evt.target.querySelector('.demooptions').style.display = 'none'; }
                 )
+                grflw1.addEventListener('subflowExited',
+                    (evt) => { evt.target.querySelector('.demooptions').style.display = 'block'; }
+                )
                 document.querySelector('[data-trigger="onAutoplace1H"]').addEventListener('click',
                     (evt) => { grflw1.autoPlace('horizontal', 80, 30, 1000, document.querySelector('[data-id="compunet"]').value) }
                 )

app/assets/json/bzGraflow/testFlow1.json

@@ -7,19 +7,21 @@
                 "coords": { "x": 220, "y": 120}
             },
             {   "nodeType": "inc",
-                "subflow": "/app/assets/json/bzGraflow/testFlowEic.json",
-                "portLinks": [
-                    {   "refNodeType": "refnodein", "refnodePort": "out1",
-                        "parentPort": "in1", 
-                        "subflowNode":"aze2", "subflowPort": "in1",
-                        "direction": "in"
-                    },
-                    {   "refNodeType": "refnodeout", "refnodePort": "in1", 
-                        "parentPort": "out1", 
-                        "subflowNode":"aze5", "subflowPort": "out1",
-                        "direction": "out" 
-                    }
-                ],
+                "subflow": { 
+                    "url": "/app/assets/json/bzGraflow/testFlowEic.json", 
+                    "portLinks": [
+                        {   "refNodeType": "refnodein", "refnodePort": "out1",
+                            "parentPort": "in1", 
+                            "subflowNode":"aze2", "subflowPort": "in1",
+                            "direction": "in"
+                        },
+                        {   "refNodeType": "refnodeout", "refnodePort": "in1", 
+                            "parentPort": "out1", 
+                            "subflowNode":"aze5", "subflowPort": "out1",
+                            "direction": "out" 
+                        }
+                    ]
+                },
                 "id": "aze2",
                 "coords": { "x": 220, "y": 10}
             },

app/assets/json/bzGraflow/testFlowEic.json

@@ -27,7 +27,22 @@
                     "title": "Data mapping",
                     "subtitle": "Associate content variables with attendees data"
                 },
-                "data": { "a": "a3", "b":"b3"}
+                "data": { "a": "a3", "b":"b3"},
+                "subflow": { 
+                    "url": "/app/assets/json/bzGraflow/testFlowICMP.json", 
+                    "portLinks": [
+                        {   "refNodeType": "refnodein", "refnodePort": "out1",
+                            "parentPort": "in1", 
+                            "subflowNode":"cid", "subflowPort": "in3",
+                            "direction": "in"
+                        },
+                        {   "refNodeType": "refnodeout", "refnodePort": "in1", 
+                            "parentPort": "out1", 
+                            "subflowNode":"signature", "subflowPort": "out2",
+                            "direction": "out" 
+                        }
+                    ]
+                }
             },
             {   "nodeType": "eicBasic",
                 "id": "aze4",