graflow: improved test pages

buildoz.css

@@ -247,4 +247,12 @@ bz-graflow button.bzgf-zoom-out{
     left: 5px;
     top: 5px;
 }
+bz-graflow path.bzgf-wirecoat{
+    pointer-events: auto;
+    stroke-width: 6;
+    stroke: #0000!important;
+}
+bz-graflow path.bzgf-wirecoat:hover{
+    stroke: #FF0F!important;
+}
 /* BZGRAFLOW_CORE_END */

bzGraflow.js

@@ -39,7 +39,7 @@ class BZgraflow extends Buildoz{
     static async getCoreCss(){
         if(BZgraflow._coreCssPromise) return(await BZgraflow._coreCssPromise)
         BZgraflow._coreCssPromise = (async() => {
-            const res = await fetch('/app/thirdparty/buildoz/buildoz.css')
+            const res = await fetch('/buildoz/buildoz.css')
             const css = await res.text()
             const m = css.match(/\/\*\s*BZGRAFLOW_CORE_START\s*\*\/([\s\S]*?)\/\*\s*BZGRAFLOW_CORE_END\s*\*\//)
             const core = m ? m[1] : ''
@@ -1280,8 +1280,12 @@ class EditWires{
         this.graflow.addEventListener('refreshed', this.enableEditWires.bind(this))
     }
      enableEditWires(){
+        this.graflow.wiresContainer.querySelectorAll('.bzgf-wirecoat').forEach(item => item.remove())
         for(const ref in this.graflow.stagedWires ){
-            this.graflow.stagedWires[ref].addEventListener('click', this.onSelectWire.bind(this))
+            const clone = this.graflow.stagedWires[ref].cloneNode(true)
+            clone.classList.add('bzgf-wirecoat')
+            this.graflow.wiresContainer.appendChild(clone)
+            clone.addEventListener('click', this.onSelectWire.bind(this))
         }
     }
     onSelectWire(e){

graflow_examples/flows/testFlow1.1.json

@@ -1,5 +1,5 @@
 {
-    "nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesTest1.html",
+    "nodesFile": "/buildoz/graflow_examples/nodesLib/nodesTest1.html",
     "flow": {
         "nodes":[
             {   "nodeType": "inc",
@@ -8,7 +8,7 @@
             },
             {   "nodeType": "inc",
                 "subflow": { 
-                    "url": "/app/thirdparty/buildoz/graflow_examples/flows/testFlowEic.json", 
+                    "url": "/buildoz/graflow_examples/flows/testFlowEic.json", 
                     "portLinks": [
                         {   "refNodeType": "refnodein", "refnodePort": "out1",
                             "parentPort": "in1", 

graflow_examples/flows/testFlow1.json

@@ -1,5 +1,5 @@
 {
-    "nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesTest1.html",
+    "nodesFile": "/buildoz/graflow_examples/nodesLib/nodesTest1.html",
     "flow": {
         "nodes":[
             {   "nodeType": "inc",

graflow_examples/flows/testFlow16ports.json

@@ -1,5 +1,5 @@
 {
-    "nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodes16ports.html",
+    "nodesFile": "/buildoz/graflow_examples/nodesLib/nodes16ports.html",
     "flow": {
         "nodes": [
             {

graflow_examples/flows/testFlow2.json

@@ -1,5 +1,5 @@
 {
-    "nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesTest2.html",
+    "nodesFile": "/buildoz/graflow_examples/nodesLib/nodesTest2.html",
     "flow": {
         "nodes":[
             {   "nodeType": "process",

graflow_examples/flows/testFlowEic.json

@@ -1,5 +1,5 @@
 {
-    "nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesEIC.html",
+    "nodesFile": "/buildoz/graflow_examples/nodesLib/nodesEIC.html",
     "flow": {
         "nodes":[
             {   "nodeType": "eicBasic",
@@ -29,7 +29,7 @@
                 },
                 "data": { "a": "a3", "b":"b3"},
                 "subflow": { 
-                    "url": "/app/thirdparty/buildoz/graflow_examples/flows/testFlowICMP.json", 
+                    "url": "/buildoz/graflow_examples/flows/testFlowICMP.json", 
                     "portLinks": [
                         {   "refNodeType": "refnodein", "refnodePort": "out1",
                             "parentPort": "in1", 

graflow_examples/flows/testFlowICMP.json

@@ -1,5 +1,5 @@
 {
-    "nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesEIC.html",
+    "nodesFile": "/buildoz/graflow_examples/nodesLib/nodesEIC.html",
     "flow": {
         "nodes":[
             {   "nodeType": "eicBasic",

graflow_examples/flows/testFlowICMP2.json

@@ -1,5 +1,5 @@
 {
-    "nodesFile": "/app/thirdparty/buildoz/graflow_examples/nodesLib/nodesEIC2.html",
+    "nodesFile": "/buildoz/graflow_examples/nodesLib/nodesEIC2.html",
     "flow": {
         "nodes":[
             {   "nodeType": "eicBasic",

graflow_examples/test.html

@@ -4,18 +4,121 @@
 		<title>graflow</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+        <style>
+            table {
+                margin: 0 auto;
+                border-collapse: collapse;
+            }
+            th, td {
+                border: 1px solid black;
+                max-width: 10em;
+                min-width: 7em;
+                text-align: center;                
+            }
+            th{
+                background: #555;
+                color: white;
+            }
+            tr > td:first-child {
+                text-align: left;
+            }
+        </style>
 	</head>
 
 	<body>
-        <ul>
+        <table>
-            <li><a target="test1" href="./test1.html">test1 (P42 graph + ISOLATED + 2 depths subflows)</a></li>
+            <thead>
-            <li><a target="test2" href="./test2.html">test2 (organigram) + ISOLATED</a></li>
+                <tr>
-            <li><a target="test3" href="./test3.html">test3 (EIC simple + subflow + NON-ISOLATED)</a></li>
+                    <th></th>
-            <li><a target="test4" href="./test4.html">test4 (EIC-ICMP + NON-ISOLATED + AUTOFIT with ResizeObserver on container)</a></li>
+                    <th>Style</th>
-            <li><a target="test4.5" href="./test4.5.html">test4.5 (EIC-ICMP + NON-ISOLATED + single-port, ortho, oriented, aligned top)</a></li>
+                    <th>isolated</th>
-            <li><a target="test5" href="./test5.html">test5 (P42 graph + ISOLATED + EDITABLE)</a></li>
+                    <th>subflow</th>
-            <li><a target="test6" href="./test6.html">test6 (16 port combinations)</a></li>
+                    <th>autofit</th>
-
+                    <th>wireStyle</th>
-        </ul>
+                    <th>align</th>
+                    <th>oriented</th>
+                    <th>nodesmove</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td><a target="test1" href="./test1.html">test1</a></td>
+                    <td>P42</td>
+                    <td>YES</td>
+                    <td>2 depths</td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                </tr>
+                <tr>
+                    <td><a target="test2" href="./test2.html">test2</a></td>
+                    <td>Organigram</td>
+                    <td>YES</td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                    <td>X</td>
+                    <td></td>
+                </tr>
+                <tr>
+                    <td><a target="test3" href="./test3.html">test3</a></td>
+                    <td>EIC simple</td>
+                    <td>NO</td>
+                    <td>1 depth</td>
+                    <td></td>
+                    <td>Straight</td>
+                    <td>First</td>
+                    <td></td>
+                    <td></td>
+                </tr>
+                <tr>
+                    <td><a target="test4" href="./test4.html">test4</a></td>
+                    <td>EIC-ICMP</td>
+                    <td>NO</td>
+                    <td></td>
+                    <td>X</td>
+                    <td>Bezier</td>
+                    <td>Center</td>
+                    <td></td>
+                    <td></td>
+                </tr>
+                <tr>
+                    <td><a target="test4.5" href="./test4.5.html">test4.5</a></td>
+                    <td>EIC-ICMP II</td>
+                    <td>NO</td>
+                    <td></td>
+                    <td></td>
+                    <td>Ortho</td>
+                    <td>Parent</td>
+                    <td>X</td>
+                    <td></td>
+                </tr>
+                <tr>
+                    <td><a target="test5" href="./test5.html">test5</a></td>
+                    <td>P42</td>
+                    <td>YES</td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                    <td>X</td>
+                </tr>
+                <tr>
+                    <td><a target="test6" href="./test6.html">test6</a></td>
+                    <td>16 ports test</td>
+                    <td>NO</td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                    <td>X</td>
+                </tr>
+            </tbody>
+        </table>
 	</body>
 </html>

graflow_examples/test1.html

@@ -4,18 +4,18 @@
 		<title>graflow</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link type="text/css" rel="stylesheet" href="/app/thirdparty/eicui/eicui-2.0.css">
+		<link type="text/css" rel="stylesheet" href="/eicui/eicui-2.0.css">
-        <link type="text/css" rel="stylesheet" href="/app/thirdparty/buildoz/buildoz.css">
+        <link type="text/css" rel="stylesheet" href="/buildoz/buildoz.css">
-        <script src="/app/thirdparty/buildoz/buildoz.js"></script>      
+        <script src="/buildoz/buildoz.js"></script>      
-        <script src="/app/thirdparty/buildoz/bzGraflow.js"></script>
+        <script src="/buildoz/bzGraflow.js"></script>
         <style>
             @font-face { /*FF does not indirectly load if inside a shawdow-dom */
                 font-family: 'glyphs';
-                src:  url('/app/assets/styles/fonts/glyphs.eot');
+                src:  url('/assets/styles/fonts/glyphs.eot');
-                src:  url('/app/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
+                src:  url('/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
-                    url('/app/assets/styles/fonts/glyphs.ttf') format('truetype'),
+                    url('/assets/styles/fonts/glyphs.ttf') format('truetype'),
-                    url('/app/assets/styles/fonts/glyphs.woff') format('woff'),
+                    url('/assets/styles/fonts/glyphs.woff') format('woff'),
-                    url('/app/assets/styles/fonts/glyphs.svg') format('svg');
+                    url('/assets/styles/fonts/glyphs.svg') format('svg');
                 font-weight: normal;
                 font-style: normal;
                 font-display: block;
@@ -76,7 +76,7 @@
 	</head>
 
 	<body>
-        <bz-graflow class="compunet" flow="/app/thirdparty/buildoz/graflow_examples/flows/testFlow1.1.json" tension="60" isolated>
+        <bz-graflow class="compunet" flow="/buildoz/graflow_examples/flows/testFlow1.1.json" tension="60" isolated>
             <div class="demooptions"> <!-- just for demo purposes -->
                 <button data-trigger="onAutoplace1H">Auto-place Horizontal</button>
                 <button data-trigger="onAutoplace1V">Auto-place Vertical</button>

graflow_examples/test2.html

@@ -4,18 +4,18 @@
 		<title>graflow</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link type="text/css" rel="stylesheet" href="/app/thirdparty/eicui/eicui-2.0.css">
+		<link type="text/css" rel="stylesheet" href="/eicui/eicui-2.0.css">
-        <link type="text/css" rel="stylesheet" href="/app/thirdparty/buildoz/buildoz.css">
+        <link type="text/css" rel="stylesheet" href="/buildoz/buildoz.css">
-        <script src="/app/thirdparty/buildoz/buildoz.js"></script>      
+        <script src="/buildoz/buildoz.js"></script>      
-        <script src="/app/thirdparty/buildoz/bzGraflow.js"></script>
+        <script src="/buildoz/bzGraflow.js"></script>
         <style>
             @font-face { /*FF does not indirectly load if inside a shawdow-dom */
                 font-family: 'glyphs';
-                src:  url('/app/assets/styles/fonts/glyphs.eot');
+                src:  url('/assets/styles/fonts/glyphs.eot');
-                src:  url('/app/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
+                src:  url('/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
-                    url('/app/assets/styles/fonts/glyphs.ttf') format('truetype'),
+                    url('/assets/styles/fonts/glyphs.ttf') format('truetype'),
-                    url('/app/assets/styles/fonts/glyphs.woff') format('woff'),
+                    url('/assets/styles/fonts/glyphs.woff') format('woff'),
-                    url('/app/assets/styles/fonts/glyphs.svg') format('svg');
+                    url('/assets/styles/fonts/glyphs.svg') format('svg');
                 font-weight: normal;
                 font-style: normal;
                 font-display: block;
@@ -76,7 +76,7 @@
 	</head>
 
 	<body>
-        <bz-graflow class="organi" flow="/app/thirdparty/buildoz/graflow_examples/flows/testFlow2.json" tension="60" isolated>
+        <bz-graflow class="organi" flow="/buildoz/graflow_examples/flows/testFlow2.json" tension="60" isolated>
             <div class="demooptions">
                 <button data-trigger="onAutoplace3H">Auto-place Horizontal</button> 
                 <button data-trigger="onAutoplace3V">Auto-place Vertical</button>

graflow_examples/test3.html

@@ -4,18 +4,18 @@
 		<title>graflow</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link type="text/css" rel="stylesheet" href="/app/thirdparty/eicui/eicui-2.0.css">
+		<link type="text/css" rel="stylesheet" href="/eicui/eicui-2.0.css">
-        <link type="text/css" rel="stylesheet" href="/app/thirdparty/buildoz/buildoz.css">
+        <link type="text/css" rel="stylesheet" href="/buildoz/buildoz.css">
-        <script src="/app/thirdparty/buildoz/buildoz.js"></script>      
+        <script src="/buildoz/buildoz.js"></script>      
-        <script src="/app/thirdparty/buildoz/bzGraflow.js"></script>
+        <script src="/buildoz/bzGraflow.js"></script>
         <style>
             @font-face { /*FF does not indirectly load if inside a shawdow-dom */
                 font-family: 'glyphs';
-                src:  url('/app/assets/styles/fonts/glyphs.eot');
+                src:  url('/assets/styles/fonts/glyphs.eot');
-                src:  url('/app/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
+                src:  url('/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
-                    url('/app/assets/styles/fonts/glyphs.ttf') format('truetype'),
+                    url('/assets/styles/fonts/glyphs.ttf') format('truetype'),
-                    url('/app/assets/styles/fonts/glyphs.woff') format('woff'),
+                    url('/assets/styles/fonts/glyphs.woff') format('woff'),
-                    url('/app/assets/styles/fonts/glyphs.svg') format('svg');
+                    url('/assets/styles/fonts/glyphs.svg') format('svg');
                 font-weight: normal;
                 font-style: normal;
                 font-display: block;
@@ -53,6 +53,9 @@
         <script>
             window.addEventListener('load',()=>{
                 let grflw2 = document.querySelector('bz-graflow.eic')
+                grflw2.setAttribute('tension', document.querySelector('input[data-id="eic"]').value)
+                grflw2.setAttribute('align', document.querySelector('select[name="align"]').value)
+                grflw2.setAttribute('wiretype', document.querySelector('select[name="wiretype"]').value)                  
                 grflw2.addEventListener('subflowLoaded',
                     (evt) => { grflw2 = evt.detail.subflow }
                 )
@@ -76,22 +79,22 @@
 	</head>
 
 	<body>
-        <bz-graflow class="eic" flow="/app/thirdparty/buildoz/graflow_examples/flows/testFlowEic.json" tension="60">
+        <bz-graflow class="eic" flow="/buildoz/graflow_examples/flows/testFlowEic.json" tension="60">
             <div class="demooptions"> <!-- just for demo purposes -->
                 <button data-trigger="onAutoplace2H">Auto-place Horizontal</button>
                 <button data-trigger="onAutoplace2V">Auto-place Vertical</button>
                 <select name="align" data-id="eic">
                     <option value="center">Center</option>
-                    <option value="first">First</option>
+                    <option value="first" selected>First</option>
                     <option value="last">Last</option>
                     <option value="parent">Parent</option>
                 </select>
                 <select name="wiretype">
                     <option value="ortho">Ortho</option>
-                    <option value="straight">Straight</option>
+                    <option value="straight"selected>Straight</option>
-                    <option value="bezier" selected>Bezier</option>
+                    <option value="bezier">Bezier</option>
                 </select>                
-                <div class-"cols-2"=""><label>tension</label><input data-id="eic" type="number" size="2" value="60"></div>
+                <div class-"cols-2"=""><label>tension</label><input data-id="eic" type="number" size="2" value="1"></div>
             </div>
         </bz-graflow>
 	</body>

graflow_examples/test4.5.html

@@ -4,18 +4,18 @@
 		<title>graflow</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link type="text/css" rel="stylesheet" href="/app/thirdparty/eicui/eicui-2.0.css">
+		<link type="text/css" rel="stylesheet" href="/eicui/eicui-2.0.css">
-        <link type="text/css" rel="stylesheet" href="/app/thirdparty/buildoz/buildoz.css">
+        <link type="text/css" rel="stylesheet" href="/buildoz/buildoz.css">
-        <script src="/app/thirdparty/buildoz/buildoz.js"></script>      
+        <script src="/buildoz/buildoz.js"></script>      
-        <script src="/app/thirdparty/buildoz/bzGraflow.js"></script>
+        <script src="/buildoz/bzGraflow.js"></script>
         <style>
             @font-face { /*FF does not indirectly load if inside a shawdow-dom */
                 font-family: 'glyphs';
-                src:  url('/app/assets/styles/fonts/glyphs.eot');
+                src:  url('/assets/styles/fonts/glyphs.eot');
-                src:  url('/app/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
+                src:  url('/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
-                    url('/app/assets/styles/fonts/glyphs.ttf') format('truetype'),
+                    url('/assets/styles/fonts/glyphs.ttf') format('truetype'),
-                    url('/app/assets/styles/fonts/glyphs.woff') format('woff'),
+                    url('/assets/styles/fonts/glyphs.woff') format('woff'),
-                    url('/app/assets/styles/fonts/glyphs.svg') format('svg');
+                    url('/assets/styles/fonts/glyphs.svg') format('svg');
                 font-weight: normal;
                 font-style: normal;
                 font-display: block;
@@ -53,6 +53,9 @@
         <script>
             window.addEventListener('load',()=>{
                 let grflw4 = document.querySelector('bz-graflow.icmp')
+                grflw4.setAttribute('tension', document.querySelector('input[data-id="icmp"]').value)
+                grflw4.setAttribute('align', document.querySelector('select[name="align"]').value)
+                grflw4.setAttribute('wiretype', document.querySelector('select[name="wiretype"]').value)                
                 grflw4.addEventListener('subflowLoaded',
                     (evt) => { grflw4 = evt.detail.subflow }
                 )
@@ -76,15 +79,15 @@
 	</head>
 
 	<body>
-        <bz-graflow class="icmp" flow="/app/thirdparty/buildoz/graflow_examples/flows/testFlowICMP2.json" tension="20" align="first" wiretype="ortho" gapx="100" gapy="30">
+        <bz-graflow class="icmp" flow="/buildoz/graflow_examples/flows/testFlowICMP2.json" tension="20" align="first" wiretype="ortho" gapx="100" gapy="30">
             <div class="demooptions"> <!-- just for demo purposes -->
                 <button data-trigger="onAutoplace4H">Auto-place Horizontal</button>
                 <button data-trigger="onAutoplace4V">Auto-place Vertical</button>
                 <select name="align" data-id="icmp">
                     <option value="center">Center</option>
-                    <option value="first" selected>First</option>
+                    <option value="first">First</option>
                     <option value="last">Last</option>
-                    <option value="parent">Parent</option>
+                    <option value="parent" selected>Parent</option>
                 </select>
                 <select name="wiretype">
                     <option value="ortho" selected>Ortho</option>

graflow_examples/test4.html

@@ -4,18 +4,18 @@
 		<title>graflow</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link type="text/css" rel="stylesheet" href="/app/thirdparty/eicui/eicui-2.0.css">
+		<link type="text/css" rel="stylesheet" href="/eicui/eicui-2.0.css">
-        <link type="text/css" rel="stylesheet" href="/app/thirdparty/buildoz/buildoz.css">
+        <link type="text/css" rel="stylesheet" href="/buildoz/buildoz.css">
-        <script src="/app/thirdparty/buildoz/buildoz.js"></script>      
+        <script src="/buildoz/buildoz.js"></script>      
-        <script src="/app/thirdparty/buildoz/bzGraflow.js"></script>
+        <script src="/buildoz/bzGraflow.js"></script>
         <style>
             @font-face { /*FF does not indirectly load if inside a shawdow-dom */
                 font-family: 'glyphs';
-                src:  url('/app/assets/styles/fonts/glyphs.eot');
+                src:  url('/assets/styles/fonts/glyphs.eot');
-                src:  url('/app/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
+                src:  url('/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
-                    url('/app/assets/styles/fonts/glyphs.ttf') format('truetype'),
+                    url('/assets/styles/fonts/glyphs.ttf') format('truetype'),
-                    url('/app/assets/styles/fonts/glyphs.woff') format('woff'),
+                    url('/assets/styles/fonts/glyphs.woff') format('woff'),
-                    url('/app/assets/styles/fonts/glyphs.svg') format('svg');
+                    url('/assets/styles/fonts/glyphs.svg') format('svg');
                 font-weight: normal;
                 font-style: normal;
                 font-display: block;
@@ -97,7 +97,7 @@
 
 	<body>
         <div class="container" style="padding:0;"">
-            <bz-graflow class="icmp" flow="/app/thirdparty/buildoz/graflow_examples/flows/testFlowICMP.json" tension="60">
+            <bz-graflow class="icmp" flow="/buildoz/graflow_examples/flows/testFlowICMP.json" tension="60">
                 <div class="demooptions">
                     <button data-trigger="onAutoplace4H">Auto-place Horizontal</button>
                     <button data-trigger="onAutoplace4V">Auto-place Vertical</button>

graflow_examples/test5.html

@@ -4,18 +4,18 @@
 		<title>graflow</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link type="text/css" rel="stylesheet" href="/app/thirdparty/eicui/eicui-2.0.css">
+		<link type="text/css" rel="stylesheet" href="/eicui/eicui-2.0.css">
-        <link type="text/css" rel="stylesheet" href="/app/thirdparty/buildoz/buildoz.css">
+        <link type="text/css" rel="stylesheet" href="/buildoz/buildoz.css">
-        <script src="/app/thirdparty/buildoz/buildoz.js"></script>      
+        <script src="/buildoz/buildoz.js"></script>      
-        <script src="/app/thirdparty/buildoz/bzGraflow.js"></script>
+        <script src="/buildoz/bzGraflow.js"></script>
         <style>
             @font-face { /*FF does not indirectly load if inside a shawdow-dom */
                 font-family: 'glyphs';
-                src:  url('/app/assets/styles/fonts/glyphs.eot');
+                src:  url('/assets/styles/fonts/glyphs.eot');
-                src:  url('/app/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
+                src:  url('/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
-                    url('/app/assets/styles/fonts/glyphs.ttf') format('truetype'),
+                    url('/assets/styles/fonts/glyphs.ttf') format('truetype'),
-                    url('/app/assets/styles/fonts/glyphs.woff') format('woff'),
+                    url('/assets/styles/fonts/glyphs.woff') format('woff'),
-                    url('/app/assets/styles/fonts/glyphs.svg') format('svg');
+                    url('/assets/styles/fonts/glyphs.svg') format('svg');
                 font-weight: normal;
                 font-style: normal;
                 font-display: block;
@@ -76,7 +76,7 @@
 	</head>
 
 	<body>
-        <bz-graflow class="compunet" flow="/app/thirdparty/buildoz/graflow_examples/flows/testFlow1.json" tension="60" isolated edit="nodesmove,wires,dropnodes" >
+        <bz-graflow class="compunet" flow="/buildoz/graflow_examples/flows/testFlow1.json" tension="60" isolated edit="nodesmove,wires,dropnodes" >
             <div class="demooptions"> <!-- just for demo purposes -->
                 <button data-trigger="onAutoplace1H">Auto-place Horizontal</button>
                 <button data-trigger="onAutoplace1V">Auto-place Vertical</button>

graflow_examples/test6.html

@@ -4,18 +4,18 @@
 		<title>graflow</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link type="text/css" rel="stylesheet" href="/app/thirdparty/eicui/eicui-2.0.css">
+		<link type="text/css" rel="stylesheet" href="/eicui/eicui-2.0.css">
-        <link type="text/css" rel="stylesheet" href="/app/thirdparty/buildoz/buildoz.css">
+        <link type="text/css" rel="stylesheet" href="/buildoz/buildoz.css">
-        <script src="/app/thirdparty/buildoz/buildoz.js"></script>      
+        <script src="/buildoz/buildoz.js"></script>      
-        <script src="/app/thirdparty/buildoz/bzGraflow.js"></script>
+        <script src="/buildoz/bzGraflow.js"></script>
         <style>
             @font-face { /*FF does not indirectly load if inside a shawdow-dom */
                 font-family: 'glyphs';
-                src:  url('/app/assets/styles/fonts/glyphs.eot');
+                src:  url('/assets/styles/fonts/glyphs.eot');
-                src:  url('/app/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
+                src:  url('/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
-                    url('/app/assets/styles/fonts/glyphs.ttf') format('truetype'),
+                    url('/assets/styles/fonts/glyphs.ttf') format('truetype'),
-                    url('/app/assets/styles/fonts/glyphs.woff') format('woff'),
+                    url('/assets/styles/fonts/glyphs.woff') format('woff'),
-                    url('/app/assets/styles/fonts/glyphs.svg') format('svg');
+                    url('/assets/styles/fonts/glyphs.svg') format('svg');
                 font-weight: normal;
                 font-style: normal;
                 font-display: block;
@@ -54,6 +54,7 @@
             window.addEventListener('load',()=>{
                 let grflw1 = document.querySelector('bz-graflow.compunet')
                 grflw1.setAttribute('tension', document.querySelector('input[data-id="compunet"]').value)
+                grflw1.setAttribute('align', document.querySelector('select[name="align"]').value)
                 grflw1.setAttribute('wiretype', document.querySelector('select[name="wiretype"]').value)
                 grflw1.addEventListener('subflowLoaded',
                     (evt) => { grflw1 = evt.detail.subflow }
@@ -78,7 +79,7 @@
 	</head>
 
 	<body>
-        <bz-graflow class="compunet" flow="/app/thirdparty/buildoz/graflow_examples/flows/testFlow16ports.json" tension="60" isolated edit="nodesmove" >
+        <bz-graflow class="compunet" flow="/buildoz/graflow_examples/flows/testFlow16ports.json" tension="60" isolated edit="nodesmove" >
             <div class="demooptions"> <!-- just for demo purposes -->
                 <button data-trigger="onAutoplace1H">Auto-place Horizontal</button>
                 <button data-trigger="onAutoplace1V">Auto-place Vertical</button>
@@ -89,9 +90,9 @@
                     <option value="parent">Parent</option>
                 </select>
                 <select name="wiretype">
-                    <option value="ortho">Ortho</option>
+                    <option value="ortho" selected>Ortho</option>
                     <option value="straight">Straight</option>
-                    <option value="bezier" selected>Bezier</option>
+                    <option value="bezier">Bezier</option>
                 </select>
                 <div class-"cols-2"=""><label>tension</label><input data-id="compunet" type="number" size="2" value="20"></div>
             </div>