graflow, autoplacement 1.5, with layer-ordering, 2nd test WF

app/assets/html/bzGraflow/nodesTest1.html

@@ -38,10 +38,10 @@
     .bzgf-node .port[data-type="in"] { background: #0F0; }
     .bzgf-node .port[data-type="out"] { background: #FF0; }
 
-    .bzgf-node [data-direction="w"]{ left: -7px; top: 50%; }
+    .bzgf-node [data-direction="w"]{ left: -7px; top: 50%; transform: translateY(-50%);}
-    .bzgf-node [data-direction="e"]{ right: -7px; top: 50%;}
+    .bzgf-node [data-direction="e"]{ right: -7px; top: 50%; transform: translateY(-50%);}
-    .bzgf-node [data-direction="n"]{ top: -7px; left: 50%;}
+    .bzgf-node [data-direction="n"]{ top: -7px; left: 50%; transform: translateX(-50%);}
-    .bzgf-node [data-direction="s"]{ bottom: -7px; left: 50%;}
+    .bzgf-node [data-direction="s"]{ bottom: -7px; left: 50%; transform: translateX(-50%);}
 
     .bzgf-node[data-nodetype="inc"]{
         background: #DFD;

app/assets/html/bzGraflow/nodesTest2.html

@@ -11,162 +11,203 @@
         padding: .5em;
     }    
     
-    .bzgf-node .title {
+    .bzgf-node .text {
-        font-weight: bold;
         position: absolute;
-        top: 0;
+        top: 50%;
-        left: 0;
+        left: 50%;
         width: 100%;
         height: 2em;
         color: white;
+        transform: translateX(-50%), translateY(-50%);
     }
-    .bzgf-node .body { margin-top: 2em; }
+
-    .bzgf-node .body input {
-        width:4em;
-        font-size: .9em;
-        border-radius: 6px;
-        border: 1px solid #CCC;
-    }
-    .bzgf-node .body span{ font-size: 12px; text-align: left; line-height: 21px; }
     .bzgf-node .port{
         position: absolute;
-        height: 10px;
+        height: 6px;
-        width: 10px;
+        width: 6px;
-        border: 1px solid black;
+        background: #FFF; 
-        border-radius: 10px;
+        z-index: 99;
     }
-    .bzgf-node .port[data-type="in"] { background: #0F0; }
-    .bzgf-node .port[data-type="out"] { background: #FF0; }
 
-    .bzgf-node [data-direction="w"]{ left: -7px; top: 50%; }
+    .bzgf-node [data-direction="w"]{ left: -7px; top: 50%; transform: translateY(-50%);}
-    .bzgf-node [data-direction="e"]{ right: -7px; top: 50%;}
+    .bzgf-node [data-direction="e"]{ right: -7px; top: 50%; transform: translateY(-50%);}
-    .bzgf-node [data-direction="n"]{ top: -7px; left: 50%;}
+    .bzgf-node [data-direction="n"]{ top: -7px; left: 50%; transform: translateX(-50%);}
-    .bzgf-node [data-direction="s"]{ bottom: -7px; left: 50%;}
+    .bzgf-node [data-direction="s"]{ bottom: -7px; left: 50%; transform: translateX(-50%);}
 
-    .bzgf-node[data-nodetype="inc"]{
+    .bzgf-node[data-nodetype="start"],
-        background: #DFD;
+    .bzgf-node[data-nodetype="end"]{
-        border-color: #090;
+        border: 1px solid white;
+        width: 100px;
+        height: 30px;
+        border-radius: 50%;
     }
-    .bzgf-node[data-nodetype="inc"] .title{ background: #090; }
 
+    .bzgf-node[data-nodetype="condition"]{
+        border: none;
+        width: 100px;
+        height: 100px;
 
-    .bzgf-node[data-nodetype="wadder"]{
-        background: #DFD;
-        border-color: #090;
-        height:150px
     }
-    .bzgf-node[data-nodetype="wadder"] .body{ display: grid; grid-gap: 4px; margin-left:0.5em; grid-template-columns: 1fr 1fr; align-items: center; }
+    .bzgf-node[data-nodetype="condition"] .frame{
-    .bzgf-node[data-nodetype="wadder"] .title{ background: #090; }
+        border: 1px solid white;
-    .bzgf-node[data-nodetype="wadder"] .port[data-id="inp1"] { top:37px; }
+        transform: rotate(-45deg);
-    .bzgf-node[data-nodetype="wadder"] .port[data-id="inp2"] { top:63px; }
+        position: absolute;
-    .bzgf-node[data-nodetype="wadder"] .port[data-id="inp3"] { top:89px; }
+        inset: 0;
-    .bzgf-node[data-nodetype="wadder"] .port[data-id="inp4"] { top:115px; }
-    .bzgf-node[data-nodetype="wadder"] .port[data-id="inp5"] { top:141px; }
-        
-    .bzgf-node[data-nodetype="factor"]{
-        background: #DDF;
-        border-color: #009;
     }
-    .bzgf-node[data-nodetype="factor"] .title{ background: #009; }
+    .bzgf-node[data-nodetype="condition"] .text{ transform: rotate(45deg); }
+    .bzgf-node[data-nodetype="condition"] .port[data-direction="w"]{ left: -28px; }
+    .bzgf-node[data-nodetype="condition"] [data-direction="e"]{ right: -28px; }
+    .bzgf-node[data-nodetype="condition"] [data-direction="n"]{ top: -28px; }
+    .bzgf-node[data-nodetype="condition"] [data-direction="s"]{ bottom: -28px; }
 
-    .bzgf-node[data-nodetype="multiplier"]{
+    .bzgf-node[data-nodetype="process"]{
-        background: #DDF;
+            border: 1px solid white;
-        border-color: #009;
+            width: 150px;
-        height:110px
+            height: 70px;
+            padding: 0;
     }
-    .bzgf-node[data-nodetype="multiplier"] .body{
+    .bzgf-node[data-nodetype="process"] .dbline{
-        font-size:40px;
+            border: 1px solid white;
-        font-weight: bold;
+            width: 80%;
-        align-items: center;
+            height: 100%;
-        display: flex;
+            position: absolute;
-        justify-content: center;
+            top: -1px;
-        margin-top: 1em;
+            left: 10%;
     }
-    .bzgf-node[data-nodetype="multiplier"] .title{ background: #009; }
-    .bzgf-node[data-nodetype="multiplier"] .port[data-id="inp1"] { top:37px; }
-    .bzgf-node[data-nodetype="multiplier"] .port[data-id="inp2"] { top:63px; }
-    .bzgf-node[data-nodetype="multiplier"] .port[data-id="inp3"] { top:89px; }
 
-    .bzgf-node[data-nodetype="input"],
+    .bzgf-node[data-nodetype="database"]{
-    .bzgf-node[data-nodetype="console"]{
+        border: 1px solid white;
-        background: #CCC;
+        width: 100px;
-        border-color: #555;
+        height: 100px;
+        isolation: isolate;
     }
-    .bzgf-node[data-nodetype="input"] .title,
+    .bzgf-node[data-nodetype="database"] .top{
-    .bzgf-node[data-nodetype="console"] .title{ background: #555; }
+        z-index: 2;
+        height: 20%;
+        border: 1px solid white;
+        border-radius: 50%;
+        position: absolute;
+        top: -10%;
+        left: 0;
+        width: 100%;
+        background: black;
+    }
+    .bzgf-node[data-nodetype="database"] .text{
+        background: black;
+        width: 99%;
+        height: 98%;
+        z-index: 1;
+        position: absolute;
+        inset: 0;
+    }
+    .bzgf-node[data-nodetype="database"] .bottom{
+        z-index: 0;
+        height: 20%;
+        border: 1px solid white;
+        border-radius: 50%;
+        position: absolute;
+        bottom: -10%;
+        left: 0;
+        width: 99%;
+        background: black;
+    }
+    .bzgf-node[data-nodetype="database"] [data-direction="n"]{ top: -17px; }
+    .bzgf-node[data-nodetype="database"] [data-direction="s"]{ bottom: -17px; }
 
-    .bzgf-wire{ stroke: #0AF; stroke-width: 2; }
+    .bzgf-node[data-nodetype="preparation"]{
+        width: 150px;
+        height: 80px;
+        padding: 0;
+        border: none;
+    }
+    .bzgf-node[data-nodetype="preparation"] .outerframe{
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        background: white;
+        border: none;
+        padding: 0;
+        place-items: center;
+        clip-path: polygon(
+            10% 0%,
+            90% 0%,
+            100% 50%,
+            90% 100%,
+            10% 100%,
+            0% 50%
+        );
+    }
+    .bzgf-node[data-nodetype="preparation"] .innerframe{
+        width: calc(100% - 2px);
+        height: calc(100% - 2px);
+        position: absolute;
+        top: 1px;
+        left: 1px;
+        background: black;
+        clip-path: inherit;
+        display: grid;
+        place-items: center;
+        color: white;
+    }
+    .bzgf-wire{ stroke: #AAA; stroke-width: 4; }
 </style>
 
 <template>
-    <div class="bzgf-node" data-nodetype="inc">
+    <div class="bzgf-node" data-nodetype="start">
-        <div class="title">Fixed Increment</div>
+        <div class="text"></div>
-        <div class="port" data-type="in" data-id="inp1" data-direction="w"></div>
+        <div class="port" data-id="out1" data-direction="s"></div>
-        <div class="port" data-type="out" data-id="out1" data-direction="e"></div>
-        <div class="body">
-            <label>Increment:</label><input name="incvalue" type="text" value="1">
-        </div>
     </div>
 </template>
 
 <template>
-    <div class="bzgf-node" data-nodetype="factor">
+    <div class="bzgf-node" data-nodetype="end">
-        <div class="title">Fixed factor</div>
+        <div class="text"></div>
-        <div class="port" data-type="in" data-id="inp1" data-direction="w"></div>
+        <div class="port" data-id="inp1" data-direction="n"></div>
-        <div class="port" data-type="out" data-id="out1" data-direction="e"></div>
-        <div class="body">
-            <label>Factor:</label><input name="factvalue" type="text" value="0.5">
-        </div>
     </div>
 </template>
 
 <template>
-    <div class="bzgf-node" data-nodetype="wadder">
+    <div class="bzgf-node" data-nodetype="condition">
-        <div class="title">Adder</div>
+        <div class="frame"></div>
-        <div class="port" data-type="in" data-id="inp1" data-direction="w"></div>
+        <div class="text"></div>
-        <div class="port" data-type="in" data-id="inp2" data-direction="w"></div>
+        <div class="port" data-id="inp1" data-direction="n"></div>
-        <div class="port" data-type="in" data-id="inp3" data-direction="w"></div>
+        <div class="port" data-id="out1" data-direction="w"></div>
-        <div class="port" data-type="in" data-id="inp4" data-direction="w"></div>
+        <div class="port" data-id="out2" data-direction="s"></div>
-        <div class="port" data-type="in" data-id="inp5" data-direction="w"></div>
+        <div class="port" data-id="out3" data-direction="e"></div>
-        <div class="port" data-type="out" data-id="out1" data-direction="e"></div>
-        <div class="body">
-            <div>
-                <span>x <input type="text" name="weight1" value="1"></span>
-                <span>x <input type="text" name="weight2" value="1"></span>
-                <span>x <input type="text" name="weight3" value="1"></span>
-                <span>x <input type="text" name="weight4" value="1"></span>
-                <span>x <input type="text" name="weight5" value="1"></span>
-            </div>
-            <div style="font-size:40px;font-weight: bold;transform: translateY(-50%);">&sum;</div>
-        </div>
     </div>
 </template>
 
 <template>
-    <div class="bzgf-node" data-nodetype="multiplier">
+    <div class="bzgf-node" data-nodetype="process">
-        <div class="title">Multiply</div>
+        <div class="dbline"></div>
-        <div class="port" data-type="in" data-id="inp1" data-direction="w"></div>
+        <div class="text"></div>
-        <div class="port" data-type="in" data-id="inp2" data-direction="w"></div>
+        <div class="port" data-id="inout1" data-direction="n"></div>
-        <div class="port" data-type="in" data-id="inp3" data-direction="w"></div>
+        <div class="port" data-id="inout2" data-direction="s"></div>
-        <div class="port" data-type="out" data-id="out1" data-direction="e"></div>
+        <div class="port" data-id="inout3" data-direction="w"></div>
-        <div class="body">x</div>
+        <div class="port" data-id="inout4" data-direction="e"></div>        
     </div>
 </template>
 
 <template>
-    <div class="bzgf-node" data-nodetype="console">
+    <div class="bzgf-node" data-nodetype="database">
-        <div class="title">Console</div>
+        <div class="top"></div>
-        <div class="port" data-type="in" data-id="inp1" data-direction="w"></div>
+        <div class="bottom"></div>
-        <div class="body"></div>
+        <div class="text"></div>
+        <div class="port" data-id="inout1" data-direction="n"></div>
+        <div class="port" data-id="inout2" data-direction="s"></div>
+        <div class="port" data-id="inout3" data-direction="w"></div>
+        <div class="port" data-id="inout4" data-direction="e"></div>
     </div>
 </template>
 
 <template>
-    <div class="bzgf-node" data-nodetype="input">
+    <div class="bzgf-node" data-nodetype="preparation">
-        <div class="title">input</div>
+        <div class="outerframe">
-        <div class="port" data-type="out" data-id="out1" data-direction="e"></div>
+            <div class="innerframe">
-        <div class="body">
+                <div class="text"></div>
-            <label>Value:</label><input name="value" type="text" value="1">
             </div>
         </div>
+        <div class="port" data-id="inp1" data-direction="n"></div>
+        <div class="port" data-id="out1" data-direction="s"></div>
+    </div>
 </template>

app/assets/html/test.html

@@ -10,29 +10,47 @@
         <script src="../../thirdparty/buildoz/buildoz.js"></script>      
         <script src="../../thirdparty/buildoz/bzGraflow.js"></script>
         <style>
-            bz-graflow{
+            bz-graflow.compunet{
                 overflow: scroll;
                 border: 5px ridge #4BABFF;
-                width: 70vw;
+                width: 80vw;
-                height: 70vh;
+                height: 40vh;
+            }
+            bz-graflow.organi{
+                overflow: scroll;
+                border: 5px ridge #4BABFF;
+                width: 40vw;
+                height: 100vh;
             }
           </style>
         <script>
             window.addEventListener('load',()=>{
-                const grflw = document.querySelector('bz-graflow')
+                const grflw1 = document.querySelector('bz-graflow.compunet')
-                document.querySelector('[data-trigger="onAutoplaceH"]').addEventListener('click',
+                document.querySelector('[data-trigger="onAutoplace1H"]').addEventListener('click',
-                    (evt) => { grflw.autoPlace('horizontal') }
+                    (evt) => { grflw1.autoPlace('horizontal') }
                 )
-                document.querySelector('[data-trigger="onAutoplaceV"]').addEventListener('click',
+                document.querySelector('[data-trigger="onAutoplace1V"]').addEventListener('click',
-                    (evt) => { grflw.autoPlace('vertical') }
+                    (evt) => { grflw1.autoPlace('vertical') }
+                )
+
+                const grflw2 = document.querySelector('bz-graflow.organi')
+                document.querySelector('[data-trigger="onAutoplace2H"]').addEventListener('click',
+                    (evt) => { grflw2.autoPlace('horizontal') }
+                )
+                document.querySelector('[data-trigger="onAutoplace2V"]').addEventListener('click',
+                    (evt) => { grflw2.autoPlace('vertical') }
                 )                
             })
         </script>
 	</head>
 
 	<body>
-        <bz-graflow flow="/app/assets/json/bzGraflow/testFlow1.json" tension="60"></bz-graflow>
+        <bz-graflow class="compunet" flow="/app/assets/json/bzGraflow/testFlow1.json" tension="60"></bz-graflow>
-        <button data-trigger="onAutoplaceH">auto-place Horizontal</button>
+        <button data-trigger="onAutoplace1H" style="margin:10px;">auto-place Horizontal</button>
-        <button data-trigger="onAutoplaceV">auto-place Vertical</button>
+        <button data-trigger="onAutoplace1V" style="margin:10px;">auto-place Vertical</button>
+
+        <bz-graflow class="organi" flow="/app/assets/json/bzGraflow/testFlow2.json" tension="60"></bz-graflow>
+        <button data-trigger="onAutoplace2H" style="margin:10px;">auto-place Horizontal</button>
+        <button data-trigger="onAutoplace2V" style="margin:10px;">auto-place Vertical</button>
 	</body>
 </html>

app/assets/json/bzGraflow/testFlow2.json

@@ -0,0 +1,39 @@
+{
+    "nodesFile": "/app/assets/html/bzGraflow/nodesTest2.html",
+    "flow": {
+        "nodes":[
+            {   "nodeType": "start",
+                "id": "aze",
+                "coords": { "x": 220, "y": 20}
+            },
+            {   "nodeType": "process",
+                "id": "aze2",
+                "coords": { "x": 220, "y": 120}
+            },
+            {   "nodeType": "condition",
+                "id": "qsd",
+                "coords": { "x": 250, "y": 270}
+            }, 
+            {   "nodeType": "preparation",
+                "id": "qsd2",
+                "coords": { "x": 250, "y": 470}
+            },           
+            {   "nodeType": "database",
+                "id": "wcx",
+                "coords": { "x": 250, "y": 650}
+            },
+            {   "nodeType": "end",
+                "id": "ert",
+                "coords": { "x": 250, "y": 850}
+            }
+        ],
+        "links": [
+            { "from": ["aze", "out1"], "to": ["aze2", "inout1"] },
+            { "from": ["aze2", "inout2"], "to": ["qsd", "inp1"] },
+            { "from": ["qsd", "out1"], "to": ["aze2", "inout3"] },
+            { "from": ["qsd", "out2"], "to": ["qsd2", "inp1"] },
+            { "from": ["qsd2", "out1"], "to": ["wcx", "inout1"] },
+            { "from": ["wcx", "inout2"], "to": ["ert", "inp1"] }
+        ]
+    }
+}

app/libs/HelperBot/HelperBot.module.js

@@ -56,7 +56,7 @@ class HelperBot{
 
             this.mechaModel.scale.set(5, 5, 5)
             this.mechaModel.rotation.set(0, 0, 0)
-            this.mechaModel.position.set(0, -1.5, 0)
+            this.mechaModel.position.set(0, -5.5, 0)
             this.mechaModel.updateMatrix()
             this.mechaModel.rotateY(-Math.PI) // 180deg so facing user
 

app/thirdparty/buildoz/bzGraflow.js

@@ -18,13 +18,15 @@ class BZgraflow extends Buildoz{
         this.loadFlow(flowUrl) // Let it load async while we coat      
         this.mainContainer  = document.createElement('div')
         this.mainContainer.classList.add('bzgf-main-container')
+        this.shadow = this.mainContainer.attachShadow({ mode: 'open' })
+
         this.nodesContainer = document.createElement('div')
         this.nodesContainer.classList.add('bzgf-nodes-container')
         this.wiresContainer = document.createElementNS('http://www.w3.org/2000/svg', 'svg') 
         this.wiresContainer.setAttribute('overflow','visible')
         this.wiresContainer.classList.add('bzgf-wires-container')
-        this.mainContainer.append(this.wiresContainer)
+        this.shadow.append(this.wiresContainer)
-        this.mainContainer.append(this.nodesContainer)
+        this.shadow.append(this.nodesContainer)
         this.append(this.mainContainer)
     }
     
@@ -68,7 +70,7 @@ class BZgraflow extends Buildoz{
             styles.forEach(styleEl => {
                 const style = document.createElement('style')
                 style.textContent = styleEl.textContent
-                document.head.appendChild(style)
+                this.shadow.appendChild(style)
             })
             BZgraflow._loadedNodeStyles.add(url)
         }
@@ -123,6 +125,10 @@ class BZgraflow extends Buildoz{
         const port1 = node1.ports[idPort1]
         const node2 = this.stagedNodes[idNode2]
         const port2 = node2.ports[idPort2]
+        if(!node1 || !node2 || !port1 || !port2) {
+            console.warn('bezier on bad node / port!', idNode1, idPort1, idNode2, idPort2)
+            return('')
+        }
         const bb1 = port1.el.getBoundingClientRect()
         const bb2 = port2.el.getBoundingClientRect()
         const x1 = Math.floor(bb1.x + (bb1.width/2)) - svgRect.left
@@ -142,6 +148,11 @@ class BZgraflow extends Buildoz{
     }
 
     autoPlace(orientation = 'horizontal', gapx = 80, gapy = 30){
+        if(this.hasAnyLoop(this.flow.nodes, this.flow.links)){
+            console.warn('Loop(s) detected... Cannot auto-place !')
+            return
+        }
+
         const parents = {}
         const adj = {}
         this.flow.nodes.forEach(n => {
@@ -299,11 +310,16 @@ class BZgraflow extends Buildoz{
         const visiting = new Set(); 
         const visited = new Set()
         const dfs = (nid) => {
-            if(visiting.has(nid)) return(true)
+            if(visiting.has(nid)) {
+                return(true)
+            }
+
             if(visited.has(nid)) return(false)
             visiting.add(nid)
             for(const m of adj[nid]) {
-                if(dfs(m)) return(true)
+                if(dfs(m)) {
+                    return(true)
+                }
             }
             visiting.delete(nid)
             visited.add(nid)