Graflow: better refresh & clear, better EIC example, tension field

app/assets/html/bzGraflow/nodesEIC.html

@@ -32,14 +32,22 @@
         position: absolute;
         height: 10px;
         width: 10px;
-        background: var(--eicui-base-color-grey-20);
+        background: var(--eicui-base-color-info-25);
         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-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-id="in2"]{ top: 25%; }
+    .bzgf-node [data-id="in3"]{ top: 75%; }
+
+    .bzgf-node [data-id="out2"]{ top: 25%; }
+    .bzgf-node [data-id="out3"]{ top: 75%; }
+
 
     .bzgf-wire{ stroke: var(--eicui-base-color-info); stroke-width: 4px; stroke-dasharray: 10,5; }
 </style>
@@ -51,7 +59,12 @@
             <div class="subtitle">{subtitle}</div>
         </div>
         <div class="port" data-type="in" data-id="in1" data-direction="w"></div>
+        <div class="port" data-type="in" data-id="in2" data-direction="w"></div>
+        <div class="port" data-type="in" data-id="in3" data-direction="w"></div>
+
         <div class="port" data-type="out" data-id="out1" data-direction="e"></div>
+        <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>
 
 

app/assets/html/bzGraflow/nodesTest2.html

@@ -113,7 +113,7 @@
         left: 0;
         width: 99%;
         background: black;
-        clip-path: polygon( 0% 100%, 100% 100%, 100% 50%, 0% 50%);
+        clip-path: polygon( 0% 110%, 100% 110%, 100% 50%, 0% 50%);
     }
     .bzgf-node[data-nodetype="database"] [data-direction="n"]{ top: -17px; }
     .bzgf-node[data-nodetype="database"] [data-direction="s"]{ bottom: -17px; }

app/assets/html/test.html

@@ -25,17 +25,19 @@
                 border-radius: 5px;
                 text-align: center;
                 z-index:99;
+                font-size: .7em;
+                border: 1px solid #999;
             }
             .demooptions button{
                 text-transform: none;
-                font-size: .8em;
                 margin: 2px;
+                font-size: 1em;
             }            
             bz-graflow{
                 overflow: scroll;
             }
             bz-graflow.compunet{ grid-column: 1 / -1; width: 80vw; height: 40vh; background:black; }
-            bz-graflow.eic{ grid-column: 1 / -1; width: 80vw; height: 20vh; background: var(--eicui-base-color-grey-10); }
+            bz-graflow.eic{ grid-column: 1 / -1; width: 80vw; height: 30vh; background: var(--eicui-base-color-grey-10); }
             bz-graflow.organi{ width: 40vw; height: 100vh; background:black; }
           </style>
         <script>
@@ -50,10 +52,10 @@
 
                 const grflw2 = document.querySelector('bz-graflow.eic')
                 document.querySelector('[data-trigger="onAutoplace2H"]').addEventListener('click',
-                    (evt) => { grflw2.autoPlace('horizontal') }
+                    (evt) => { grflw2.autoPlace('horizontal', 80, 80, 1000) }
                 )
                 document.querySelector('[data-trigger="onAutoplace2V"]').addEventListener('click',
-                    (evt) => { grflw2.autoPlace('vertical') }
+                    (evt) => { grflw2.autoPlace('vertical', 80, 80, 1000) }
                 )         
 
                 const grflw3 = document.querySelector('bz-graflow.organi')
@@ -63,28 +65,44 @@
                 document.querySelector('[data-trigger="onAutoplace3V"]').addEventListener('click',
                     (evt) => { grflw3.autoPlace('vertical', 80, 50, 1000) }
                 )                
+
+                document.querySelector('[data-id="compunet"]').addEventListener('change',
+                    (evt) => { grflw1.setAttribute('tension', evt.target.value); grflw1.refresh() }
+                )
+                document.querySelector('[data-id="eic"]').addEventListener('change',
+                    (evt) => { grflw2.setAttribute('tension', evt.target.value); grflw2.refresh() }
+                )
+                document.querySelector('[data-id="organi"]').addEventListener('change',
+                    (evt) => { grflw3.setAttribute('tension', evt.target.value); grflw3.refresh() }
+                )
             })
         </script>
 	</head>
 
 	<body>
         <bz-graflow class="compunet" flow="/app/assets/json/bzGraflow/testFlow1.json" tension="60">
-            <div class="demooptions">
+            <div class="demooptions"> <!-- just for demo purposes -->
                 <button data-trigger="onAutoplace1H">Auto-place Horizontal</button>
                 <button data-trigger="onAutoplace1V">Auto-place Vertical</button>
+                <div class-"cols-2"=""><label>tension</label><input data-id="compunet" type="number" size="2" value="60"></div>
             </div>
         </bz-graflow>
+
         <bz-graflow class="eic" flow="/app/assets/json/bzGraflow/testFlowEic.json" tension="60">
-            <div class="demooptions">
+            <div class="demooptions"> <!-- just for demo purposes -->
                 <button data-trigger="onAutoplace2H">Auto-place Horizontal</button>
                 <button data-trigger="onAutoplace2V">Auto-place Vertical</button>
+                <div class-"cols-2"=""><label>tension</label><input data-id="eic" type="number" size="2" value="60"></div>
             </div>
         </bz-graflow>
+
         <bz-graflow class="organi" flow="/app/assets/json/bzGraflow/testFlow2.json" tension="60">
             <div class="demooptions">
                 <button data-trigger="onAutoplace3H">Auto-place Horizontal</button>
                 <button data-trigger="onAutoplace3V">Auto-place Vertical</button>
+                <div class-"cols-2"=""><label>tension</label><input data-id="organi" type="number" size="2" value="60"></div>
             </div>
         </bz-graflow>
+
 	</body>
 </html>

app/assets/json/bzGraflow/testFlowEic.json

@@ -28,11 +28,32 @@
                     "subtitle": "Associate content variables with attendees data"
                 },
                 "data": { "a": "a3", "b":"b3"}
-            }            
+            },
+            {   "nodeType": "eicBasic",
+                "id": "aze4",
+                "ncoords": { "x": 150, "y": 320},
+                "markup": { 
+                    "title": "Schedule mailing",
+                    "subtitle": "Choose time to send the mail"
+                },
+                "data": { "a": "a3", "b":"b3"}
+            },
+            {   "nodeType": "eicBasic",
+                "id": "aze5",
+                "ncoords": { "x": 150, "y": 320},
+                "markup": { 
+                    "title": "Stats",
+                    "subtitle": "Access mailing statistics"
+                },
+                "data": { "a": "a3", "b":"b3"}
+            }             
         ],
         "links": [
-            { "from": ["aze", "out1"], "to": ["aze2", "in1"] },
-            { "from": ["aze2", "out1"], "to": ["aze3", "in1"] }
+            { "from": ["aze2", "out1"], "to": ["aze", "in1"] },
+            { "from": ["aze2", "out2"], "to": ["aze3", "in1"] },
+            { "from": ["aze", "out1"], "to": ["aze4", "in1"] },
+            { "from": ["aze3", "out1"], "to": ["aze4", "in2"] },
+            { "from": ["aze4", "out1"], "to": ["aze5", "in1"] }
         ]
     }
 }