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": ["aze", "in1"] },
-            { "from": ["aze2", "out1"], "to": ["aze3", "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"] }
         ]
     }
 }

app/thirdparty/buildoz/bzGraflow.js

@@ -5,6 +5,7 @@ class BZgraflow extends Buildoz{
         this.defaultAttrs = { tension: 100 }
         this.stagedNodes = { }
         this.stagedWires = { }
+        this.arrowDefs = null
     }
     static _loadedNodeStyles = new Set() // Allow multi instances or re-loadNodes, but avoid reinjecting same styles !
 
@@ -71,8 +72,9 @@ class BZgraflow extends Buildoz{
         this.nodesRegistry = {}
         for(const tpl of doc.querySelectorAll('template')){
             if(tpl.id=='svg-arrows'){
-                this.wiresContainer.appendChild(tpl.querySelector('defs').cloneNode(true))
+                this.arrowDefs = tpl.querySelector('defs').cloneNode(true)
-                this.arrowDefined = true
+                console.log(this.arrowDefs)
+                this.wiresContainer.appendChild(this.arrowDefs)
             } else {
                 const rootEl = tpl.content.querySelector('.bzgf-node')
                 if(!rootEl) continue
@@ -118,15 +120,23 @@ class BZgraflow extends Buildoz{
         this.stagedWires[id] = document.createElementNS('http://www.w3.org/2000/svg', 'path')
         this.stagedWires[id].setAttribute('d', path)
         this.stagedWires[id].setAttribute('fill', 'none')
-        if(this.arrowDefined && link.endArrow) this.stagedWires[id].setAttribute('marker-end','url(#arrow)')
+        if(this.arrowDefs && link.endArrow) this.stagedWires[id].setAttribute('marker-end','url(#arrow)')
-        if(this.arrowDefined && link.startArrow) this.stagedWires[id].setAttribute('marker-start','url(#arrow)')
+        if(this.arrowDefs && link.startArrow) this.stagedWires[id].setAttribute('marker-start','url(#arrow)')
         this.stagedWires[id].classList.add('bzgf-wire')
         this.stagedWires[id].dataset.id = id
         this.wiresContainer.append(this.stagedWires[id])
         return(this.stagedWires[id])
     }
 
+
+    clear(){
+        this.nodesContainer.innerHTML = ''
+        this.wiresContainer.innerHTML = ''
+        if(this.arrowDefs) this.wiresContainer.appendChild(this.arrowDefs)
+    }
+
     refresh(){
+        this.clear()
         let forceAutoplace = false
         for(const node of this.flow.nodes){
             if((!node.coords) || (!node.coords.x) ||(!node.coords.y)) forceAutoplace=true
@@ -145,7 +155,6 @@ class BZgraflow extends Buildoz{
     }
 
     bezier(idNode1, idPort1, idNode2, idPort2, tensionMin=60) {
-
         const svgRect = this.wiresContainer.getBoundingClientRect()
         const node1 = this.stagedNodes[idNode1]
         const port1 = node1.ports[idPort1]
@@ -175,7 +184,7 @@ class BZgraflow extends Buildoz{
         let c1y = y1 + (dirVect[port1.direction].y * tension)
         let c2x = x2 + (dirVect[port2.direction].x * tension)
         let c2y = y2 + (dirVect[port2.direction].y * tension)
-        if((idNode1==idNode2) && (idPort1==idPort2)){ // Special case of self-loop: correct intermediary points
+        if((idNode1==idNode2) && (idPort1==idPort2)){ // Special case of self-loop: spread a bit intermediary points
             if(['n', 's'].includes(port1.direction)) {
                 c1x += tension
                 c2x -= tension