graflow: subflow reference nodes & exit subflow

app/assets/html/bzGraflow/nodesEIC.html

@@ -48,6 +48,21 @@
     .bzgf-node [data-id="out2"]{ top: 25%; }
     .bzgf-node [data-id="out3"]{ top: 75%; }
 
+    .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; }
 
     .bzgf-wire{ stroke: var(--eicui-base-color-info); stroke-width: 4px; stroke-dasharray: 10,5; }
 </style>
@@ -66,7 +81,18 @@
         <div class="port" data-type="out" data-id="out2" data-direction="e"></div>
         <div class="port" data-type="out" data-id="out3" data-direction="e"></div>
     </div>
-
-
 </template>
 
+<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/bzGraflow/nodesTest1.html

@@ -96,6 +96,12 @@
     .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{ 
+        border-radius: 50%;
+    }
+    .bzgf-node[data-nodetype="refnodein"] .body{ background: #0F0; }
+    .bzgf-node[data-nodetype="refnodeout"] .body{ background: #FF0; }
+
     .bzgf-wire{ stroke: #0AF; stroke-width: 2; }
 </style>
 
@@ -170,4 +176,16 @@
             <label>Value:</label><input name="value" type="text" value="1">
         </div>
     </div>
+</template>
+
+<template>
+    <div class="bzgf-node" data-nodetype="refnodein">
+            <div class="body">{parentport}</div>
+        </div>
+</template>
+
+<template>
+    <div class="bzgf-node" data-nodetype="refnodeout">
+        <div class="body">{parentport}</div>
+    </div>
 </template>

app/assets/html/test.html

@@ -55,6 +55,9 @@
         <script>
             window.addEventListener('load',()=>{
                 const grflw1 = document.querySelector('bz-graflow.compunet')
+                grflw1.addEventListener('subflowLoaded',
+                    (evt) => { evt.target.querySelector('.demooptions').style.display = 'none'; }
+                )
                 document.querySelector('[data-trigger="onAutoplace1H"]').addEventListener('click',
                     (evt) => { grflw1.autoPlace('horizontal', 80, 30, 1000, document.querySelector('[data-id="compunet"]').value) }
                 )