diff --git a/app/assets/html/test.html b/app/assets/html/test.html
index 17d9f7e..07cb1f1 100644
--- a/app/assets/html/test.html
+++ b/app/assets/html/test.html
@@ -56,47 +56,47 @@
             window.addEventListener('load',()=>{
                 const grflw1 = document.querySelector('bz-graflow.compunet')
                 document.querySelector('[data-trigger="onAutoplace1H"]').addEventListener('click',
-                    (evt) => { grflw1.autoPlace('horizontal', 80, 30, 1000) }
+                    (evt) => { grflw1.autoPlace('horizontal', 80, 30, 1000, document.querySelector('[data-id="compunet"]').value) }
                 )
                 document.querySelector('[data-trigger="onAutoplace1V"]').addEventListener('click',
-                    (evt) => { grflw1.autoPlace('vertical') }
+                    (evt) => { grflw1.autoPlace('vertical', 80, 30, 1000, document.querySelector('[data-id="compunet"]').value) }
                 )
 
                 const grflw2 = document.querySelector('bz-graflow.eic')
                 document.querySelector('[data-trigger="onAutoplace2H"]').addEventListener('click',
-                    (evt) => { grflw2.autoPlace('horizontal', 100, 30, 1000) }
+                    (evt) => { grflw2.autoPlace('horizontal', 100, 30, 1000, document.querySelector('[data-id="eic"]').value) }
                 )
                 document.querySelector('[data-trigger="onAutoplace2V"]').addEventListener('click',
-                    (evt) => { grflw2.autoPlace('vertical', 80, 80, 1000) }
+                    (evt) => { grflw2.autoPlace('vertical', 80, 80, 1000, document.querySelector('[data-id="eic"]').value) }
                 )         
 
                 const grflw3 = document.querySelector('bz-graflow.organi')
                 document.querySelector('[data-trigger="onAutoplace3H"]').addEventListener('click',
-                    (evt) => { grflw3.autoPlace('horizontal', 80, 80, 1000) }
+                    (evt) => { grflw3.autoPlace('horizontal', 80, 80, 1000, document.querySelector('[data-id="organi"]').value) }
                 )
                 document.querySelector('[data-trigger="onAutoplace3V"]').addEventListener('click',
-                    (evt) => { grflw3.autoPlace('vertical', 80, 30, 1000) }
+                    (evt) => { grflw3.autoPlace('vertical', 80, 30, 1000, document.querySelector('[data-id="organi"]').value) }
                 )                
 
                 const grflw4 = document.querySelector('bz-graflow.icmp')
                 document.querySelector('[data-trigger="onAutoplace4H"]').addEventListener('click',
-                    (evt) => { grflw4.autoPlace('horizontal', 100, 30, 1000) }
+                    (evt) => { grflw4.autoPlace('horizontal', 100, 30, 1000, document.querySelector('[data-id="icmp"]').value) }
                 )
                 document.querySelector('[data-trigger="onAutoplace4V"]').addEventListener('click',
-                    (evt) => { grflw4.autoPlace('vertical', 80, 80, 1000) }
+                    (evt) => { grflw4.autoPlace('vertical', 80, 80, 1000, document.querySelector('[data-id="icmp"]').value) }
                 )
 
-                document.querySelector('[data-id="compunet"]').addEventListener('change',
+                document.querySelector('input[data-id="compunet"]').addEventListener('change',
                     (evt) => { grflw1.setAttribute('tension', evt.target.value); grflw1.refresh() }
                 )
-                document.querySelector('[data-id="eic"]').addEventListener('change',
+                document.querySelector('input[data-id="eic"]').addEventListener('change',
                     (evt) => { grflw2.setAttribute('tension', evt.target.value); grflw2.refresh() }
                 )
-                document.querySelector('[data-id="organi"]').addEventListener('change',
+                document.querySelector('input[data-id="organi"]').addEventListener('change',
                     (evt) => { grflw3.setAttribute('tension', evt.target.value); grflw3.refresh() }
                 )
 
-                document.querySelector('[data-id="icmp"]').addEventListener('change',
+                document.querySelector('input[data-id="icmp"]').addEventListener('change',
                     (evt) => { grflw4.setAttribute('tension', evt.target.value); grflw4.refresh() }
                 )
             })
@@ -108,6 +108,12 @@
             <div class="demooptions"> <!-- just for demo purposes -->
                 <button data-trigger="onAutoplace1H">Auto-place Horizontal</button>
                 <button data-trigger="onAutoplace1V">Auto-place Vertical</button>
+                <select name="align" data-id="compunet">
+                    <option value="center">Center</option>
+                    <option value="first">First</option>
+                    <option value="last">Last</option>
+                    <option value="auto">Auto</option>
+                </select>
                 <div class-"cols-2"=""><label>tension</label><input data-id="compunet" type="number" size="2" value="60"></div>
             </div>
         </bz-graflow>
@@ -116,6 +122,12 @@
             <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="last">Last</option>
+                    <option value="auto">Auto</option>
+                </select>
                 <div class-"cols-2"=""><label>tension</label><input data-id="eic" type="number" size="2" value="60"></div>
             </div>
         </bz-graflow>
@@ -124,6 +136,12 @@
             <div class="demooptions">
                 <button data-trigger="onAutoplace3H">Auto-place Horizontal</button> 
                 <button data-trigger="onAutoplace3V">Auto-place Vertical</button>
+                <select name="align" data-id="organi">
+                    <option value="center">Center</option>
+                    <option value="first">First</option>
+                    <option value="last">Last</option>
+                    <option value="auto">Auto</option>
+                </select>
                 <div class-"cols-2"=""><label>tension</label><input data-id="organi" type="number" size="2" value="60"></div>
             </div>
         </bz-graflow>
@@ -133,6 +151,12 @@
             <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">First</option>
+                    <option value="last">Last</option>
+                    <option value="auto">Auto</option>
+                </select>
                 <div class-"cols-2"=""><label>tension</label><input data-id="icmp" type="number" size="2" value="60"></div>
             </div>
         </bz-graflow>
diff --git a/app/thirdparty/buildoz/bzGraflow.js b/app/thirdparty/buildoz/bzGraflow.js
index b6ff894..19d16ad 100644
--- a/app/thirdparty/buildoz/bzGraflow.js
+++ b/app/thirdparty/buildoz/bzGraflow.js
@@ -396,7 +396,8 @@ class BZgraflow extends Buildoz{
         return(path)
     }
 
-    autoPlace(orientation = 'horizontal', gapx = 80, gapy = 80, tween=1000){
+    autoPlace(orientation = 'horizontal', gapx = 80, gapy = 80, tween=1000, align='center'){
+        console.log('autoPlace', orientation, gapx, gapy, tween, align)
         // Loops create infinite recursion in dfs for getting parents & adjacency lists: Remove them !
         let linksWithoutBackEdges
         if(this.hasAnyLoop(this.flow.nodes, this.flow.links)){
@@ -462,7 +463,22 @@ class BZgraflow extends Buildoz{
             let x = gapx
             for(const [idx, layer] of layers.entries()){
                 let wMax = this.getMaxWidth(layer)
-                let y = ((maxHeight - layerHeights[idx]) / 2) + gapy
+                let y = 0
+                switch(align){
+                    case'center':
+                        y = ((maxHeight - layerHeights[idx]) / 2) + gapy
+                        break
+                    case'first':
+                        y = gapy
+                        break
+                    case'last':
+                        y = maxHeight - layerHeights[idx] + gapy
+                        break
+                    case 'auto':
+                        //TODO
+                        y = ((maxHeight - layerHeights[idx]) / 2) + gapy
+                        break
+                }
                 for(const nid of layer){
                     if(!nid.startsWith('longLinkPlaceHolder_')) {
                         const bb = this.stagedNodes[nid].getBoundingClientRect()