diff --git a/hunks/view.js b/hunks/view.js
index 4ed29af163139e62e925f7669087c4fefee7fea1..c1f10def8c1018b24f8a9a3236094cda9e5da53e 100644
--- a/hunks/view.js
+++ b/hunks/view.js
@@ -208,6 +208,8 @@ function View() {
   this.drawLinks = () => {
     // drawing from scratch every time ! could be faster, probably
     bzt.clear(this.plane)
+    // 1st,
+    this.followRules()
     // draw 'em all
     for (let def of defs) {
       for (let output of def.outputs) {
@@ -223,6 +225,30 @@ function View() {
     }
   }
 
+  this.followRules = () => {
+    // follow rules ?
+    /*
+     - find view defs ... orient to edges,
+    */
+    if (this.isTopLevel) {
+      let ct = dt.readTransform(this.plane)
+      let wt = dt.readContainerWidth(this.dom)
+      let vcnt = 0
+      for (let def of defs) {
+        if (def.type === 'view') {
+          // looks like this is the magic / mystery term: 100*(1-ct.s)
+          def.setPlaneWidth((wt.x - 100*(1-ct.s)) / ct.s)
+          dt.writeTransform(def.de, {
+            s: 1,
+            x: -ct.x / ct.s,
+            y: (-ct.y + vcnt * 75 * ct.s) / ct.s
+          })
+          vcnt ++
+        }
+      }
+    }
+  }
+
   /* ---------------------------    ---------------------------- */
   /* -------------------- DEFS in the DOM ---------------------- */
   /* ---------------------------    ---------------------------- */
@@ -346,7 +372,11 @@ function View() {
         // at load, the view doesn't have a link, so is kind of homeless
         // that is likely arriving soon, but ...
         $(this.plane).append(def.de)
-        dt.writeTransform(def.de, {s: 1, x: 500, y: 500})
+        dt.writeTransform(def.de, {
+          s: 1,
+          x: 500,
+          y: 500
+        })
         defs.push(def)
       } else {
         console.error('cannot find view dom or ref', def)
@@ -771,8 +801,6 @@ function View() {
     land.append(this.dom)
     $(this.dom).attr('id', 'NROLVIEW')
 
-    // ll views don't transform dom ...
-
     // init transform of the plane,
     let dft = {
       s: 1,
@@ -809,9 +837,12 @@ function View() {
       ct.x += (ct.x - ox) * ds
       ct.y += (ct.y - oy) * ds
 
-      dt.writeTransform(this.plane, ct)
-      dt.writeBackgroundTransform(this.dom, ct)
-      // now redraw links
+      if (ct.s < 1) {
+        dt.writeTransform(this.plane, ct)
+        dt.writeBackgroundTransform(this.dom, ct)
+      }
+
+      this.drawLinks()
     })
 
     let canvasDragListener = (evt) => {
@@ -822,6 +853,7 @@ function View() {
       ct.y += evt.movementY
       dt.writeTransform(this.plane, ct)
       dt.writeBackgroundTransform(this.dom, ct)
+      this.drawLinks()
     }
 
     let canvasUpListener = (evt) => {
@@ -862,6 +894,13 @@ function View() {
     })
   }
 
+  window.onresize = () => {
+    console.log('resize')
+    this.drawLinks()
+  }
+
+  /* QUEEN RECEPIES */
+
   this.expandLink = (linkDef) => {
     return new Promise((resolve, reject) => {
       // i.e. requestAddHunk isn't necessarily hooked to this
diff --git a/style.css b/style.css
index efe1d8af719fc96308b45e50776fe1c7b2a9ab7f..0581558f30fa4021799a7a788f7b0e447965d454 100644
--- a/style.css
+++ b/style.css
@@ -169,6 +169,10 @@ body {
 	color: #eee;
 }
 
+.inputs.insideout {
+	float: right;
+}
+
 .input:hover {
 	cursor: pointer;
 }
@@ -183,6 +187,10 @@ body {
 	color: #eee;
 }
 
+.outputs.insideout {
+	float: left;
+}
+
 .output:hover {
 	cursor: grab;
 }
diff --git a/view/vbzt.js b/view/vbzt.js
index 6167430249682225a05e559545592a9bdae025bc..1865e9abd525b893f7bf6c26bbe07f805239bd7a 100644
--- a/view/vbzt.js
+++ b/view/vbzt.js
@@ -18,7 +18,7 @@ function BezierTools(View) {
   }
 
   this.getLeftHandle = (div) => {
-    let x = div.offsetParent.offsetLeft
+    let x = div.offsetParent.offsetLeft + (div. offsetLeft)
     let y = div.offsetParent.offsetTop + (div.offsetTop + div.clientHeight / 2)
     return {
       x: x,
diff --git a/view/vdef.js b/view/vdef.js
index ae1766d8b782c8c55e58d54c7e6493763de37abb..6402e809503b0219c45c6a20196dada9336c8da6 100644
--- a/view/vdef.js
+++ b/view/vdef.js
@@ -164,6 +164,17 @@ function HunkDefinition(spec, view, dt, debug) {
   // inside-out defs,
   this.makeInsideOut = () => {
     console.error('make inside out')
+    console.log(this)
+    console.log(this.de)
+    // can we do ...
+    $(this.de).find('.inputs').addClass('insideout')
+    $(this.de).find('.outputs').addClass('insideout')
+    
+  }
+
+  // set width,
+  this.setPlaneWidth = (num) => {
+    this.de.style.width = num + 'px'
   }
 
   if (this.type == 'link') {
diff --git a/view/vdom.js b/view/vdom.js
index 58d080078a63883ce9fe800af652cd8db7268348..d375a15f2466af5dfe3ec92a25f72c385eadbd87 100644
--- a/view/vdom.js
+++ b/view/vdom.js
@@ -19,7 +19,7 @@ function DomTools(View) {
   // as a note: something is wrongo with this, background doth not zoom at the same rate...
   this.writeBackgroundTransform = (div, tf) => {
     div.style.backgroundSize = `${tf.s * 100}px ${tf.s * 100}px`
-    div.style.backgroundPosition = `${tf.x}px ${tf.y}px `
+    div.style.backgroundPosition = `${tf.x + 50*(1-tf.s)}px ${tf.y + 50*(1-tf.s)}px`
   }
 
   // a uility to read those transforms out of elements,
@@ -42,6 +42,10 @@ function DomTools(View) {
     })
   }
 
+  this.readContainerWidth = (div) => {
+    return {x: div.clientWidth, y: div.clientHeight}
+  }
+
   // these two are used in the floop, to build arrays of things to push around
   this.readXY = (div) => {
     //console.log('READXY left', div.style.left, 'top', div.style.top)