--- a/light9/web/timeline/adjustable.coffee	Sun May 27 01:16:49 2018 +0000
+++ b/light9/web/timeline/adjustable.coffee	Sun May 27 02:20:42 2018 +0000
@@ -20,7 +20,7 @@
     #   emptyBox -> true if you want no value display
 
     # updated later by layout algoritm
-    @centerOffset = $V([0, 0])
+    @handle = $V([0, 0])
 
   getDisplayValue: () ->
     return '' if @config.emptyBox
@@ -29,11 +29,11 @@
       return @config.getDisplayValue(@_getValue(), defaultFormat)
     defaultFormat
 
-  getSuggestedCenter: () ->
+  getSuggestedHandle: () ->
     @getTarget().add(@config.getSuggestedTargetOffset())
 
-  getCenter: () -> # vec2 of pixels
-    @getTarget().add(@centerOffset)
+  getHandle: () -> # vec2 of pixels
+    @handle
 
   getTarget: () -> # vec2 of pixels
     @config.getTarget()

--- a/light9/web/timeline/adjusters.coffee	Sun May 27 01:16:49 2018 +0000
+++ b/light9/web/timeline/adjusters.coffee	Sun May 27 02:20:42 2018 +0000
@@ -1,6 +1,8 @@
 log = console.log
 Drawing = window.Drawing
 
+maxDist = 60
+
 coffeeElementSetup(class AdjustersCanvas extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element)
   @is: 'light9-adjusters-canvas'
   @getter_properties:
@@ -71,13 +73,14 @@
     nearest = @qt.find(pt.e(1), pt.e(2))
     if nearest?
       log('near', nearest.distanceFrom(pt))
-    if not nearest? or nearest.distanceFrom(pt) > 70
+    if not nearest? or nearest.distanceFrom(pt) > maxDist
       return null
     return nearest?.adj
 
   resizeUpdate: (ev) ->
     @$.canvas.width = ev.target.offsetWidth
     @$.canvas.height = ev.target.offsetHeight
+    @canvasCenter = $V([@$.canvas.width / 2, @$.canvas.height / 2])
     @redraw()
 
   _throttledRedraw: () ->
@@ -88,8 +91,10 @@
     @ctx.clearRect(0, 0, @$.canvas.width, @$.canvas.height)
 
     for adjId, adj of @adjs
-      ctr = adj.getCenter()
+      ctr = adj.getHandle()
       target = adj.getTarget()
+      if target.e(1) < 0 or target.e(1) > @$.canvas.width or target.e(2) < 0 or target.e(2) > @$.canvas.height
+        continue
       @_drawConnector(ctr, target)
       
       @_drawAdjuster(adj.getDisplayValue(),
@@ -103,27 +108,33 @@
     # Todo: don't let their connector lines cross each other
     @qt = d3.quadtree([], ((d)->d.e(1)), ((d)->d.e(2)))
     @qt.extent([[0,0], [8000,8000]])
+
     for _, adj of @adjs
-      desired = adj.getSuggestedCenter()
-      output = desired
-      for tries in [0...4]
-        nearest = @qt.find(output.e(1), output.e(2))
+      adj.handle = adj.getSuggestedHandle()
+      
+    for tries in [0...5]
+      for _, adj of @adjs
+        current = adj.handle
+        @qt.remove(current)
+        nearest = @qt.find(current.e(1), current.e(2), maxDist)
         if nearest
-          dist = output.distanceFrom(nearest)
-          if dist < 60
-            away = output.subtract(nearest).toUnitVector()
-            toScreenCenter = $V([500,200]).subtract(output).toUnitVector()
-            output = output.add(away.x(60).add(toScreenCenter.x(10)))
+          dist = current.distanceFrom(nearest)
+          if dist < maxDist
+            away = current.subtract(nearest).toUnitVector()
+            toScreenCenter = @canvasCenter.subtract(current).toUnitVector()
+            current = current.add(away.x(20).add(toScreenCenter.x(2)))
+            marg = 10
+            current = $V([Math.max(marg, Math.min(@$.canvas.width - marg, current.e(1))),
+                         Math.max(marg, Math.min(@$.canvas.height - marg, current.e(2)))])
+            adj.handle = current
+        current.adj = adj
+        @qt.add(current)
 
-      if -50 < output.e(1) < 20 # mostly for zoom-left
-        output.setElements([
-          Math.max(20, output.e(1)),
-          output.e(2)])
+      #if -50 < output.e(1) < 20 # mostly for zoom-left
+      #  output.setElements([
+      #    Math.max(20, output.e(1)),
+      #    output.e(2)])
         
-      adj.centerOffset = output.subtract(adj.getTarget())
-      output.adj = adj
-      @qt.add(output)
-
   _drawConnector: (ctr, target) ->
     @ctx.strokeStyle = '#aaa'
     @ctx.lineWidth = 2

--- a/light9/web/timeline/timeline.coffee	Sun May 27 01:16:49 2018 +0000
+++ b/light9/web/timeline/timeline.coffee	Sun May 27 02:20:42 2018 +0000
@@ -52,10 +52,8 @@
         quad(newCurve, U('rdf:type'), U(':Curve'))
         quad(newCurve, U(':attr'), U(':strength'))
       ]
+
     pointQuads = []
-
-
-
     for i in [0...4]
       pt = points[i]
       pointQuads.push(quad(newCurve, U(':point'), pt))
@@ -65,7 +63,7 @@
     patch = {
       delQuads: []
       addQuads: curveQuads.concat(pointQuads)
-      }
+    }
     @graph.applyAndSendPatch(patch)
 
   getCurvePoints: (curve, xOffset) ->
@@ -245,7 +243,7 @@
       observable: @viewState.zoomSpec.t1,
       getTarget: () =>
         $V([@viewState.fullZoomX(@viewState.zoomSpec.t1()), yMid()])
-      getSuggestedTargetOffset: () => $V([50, 0])
+      getSuggestedTargetOffset: () => $V([50, 10])
       getValueForPos: valForPos
     }))
 
@@ -253,7 +251,7 @@
       observable: @viewState.zoomSpec.t2,
       getTarget: () =>
         $V([@viewState.fullZoomX(@viewState.zoomSpec.t2()), yMid()])
-      getSuggestedTargetOffset: () => $V([-50, 0])
+      getSuggestedTargetOffset: () => $V([-50, 10])
       getValueForPos: valForPos
     }))