--- a/light9/web/timeline/adjusters.coffee	Thu May 10 06:08:39 2018 +0000
+++ b/light9/web/timeline/adjusters.coffee	Thu May 10 07:12:39 2018 +0000
@@ -52,7 +52,8 @@
         @adjs[adjId] = adj
         adj.id = adjId
 
-    @debounce('adj redraw', @redraw.bind(@))
+    #@debounce('adj redraw', @redraw.bind(@))
+    setTimeout((() => @redraw()), 2)
 
     window.debug_adjsCount = Object.keys(@adjs).length
 
@@ -71,9 +72,11 @@
     @redraw()
 
   redraw: (adjs) ->
-    @debounce('redraw', @_throttledRedraw.bind(@))
+    @_throttledRedraw(adjs)
+    #@debounce('redraw', @_throttledRedraw.bind(@))
 
   _throttledRedraw: () ->
+    return unless @ctx?
     console.time('adjs redraw')
     @_layoutCenters()
     
@@ -155,3 +158,5 @@
     # l/r arrows
     # mouse arrow cursor upon hover, and accent the hovered adjuster
     # connector
+
+customElements.define(AdjustersCanvas.is, AdjustersCanvas)
\ No newline at end of file

--- a/light9/web/timeline/timeline.coffee	Thu May 10 06:08:39 2018 +0000
+++ b/light9/web/timeline/timeline.coffee	Thu May 10 07:12:39 2018 +0000
@@ -118,20 +118,13 @@
     'setSong(playerSong, followPlayerSong)',
     'onGraph(graph)',
     ]
-  _onIronResize: ->
-    @width(@offsetWidth)
-  _onSongTime: (t) ->
-    #@viewState.cursor.t(t)
-  _onSongDuration: (d) ->
-    d = 700 if d < 1 # bug is that asco isn't giving duration, but 0 makes the scale corrupt
-    #@viewState.zoomSpec.duration(d)
-  setSong: (s) ->
-    @song = @playerSong if @followPlayerSong
-  onGraph: (graph) ->
-    @project = new Project(graph)
+    
   connectedCallback: ->
     super.connectedCallback()
     ko.options.deferUpdates = true;
+
+    @dia = @$.dia
+
     @selection = {hover: ko.observable(null), selected: ko.observable([])}
 
     window.debug_zoomOrLayoutChangedCount = 0
@@ -146,17 +139,50 @@
         t: ko.observable(20)
       mouse:
         pos: ko.observable($V([0,0]))
+    window.viewState = @viewState
     @fullZoomX = d3.scaleLinear()
     @zoomInX = d3.scaleLinear()
     @setAdjuster = (adjId, makeAdjustable) =>
-      @$.adjustersCanvas.setAdjuster(adjId, makeAdjustable)
+      ac = @$.adjustersCanvas
+      setTimeout((()=>ac.setAdjuster(adjId, makeAdjustable)),10)
+
+    setTimeout =>
+      ko.computed(@zoomOrLayoutChanged.bind(@))
+      ko.computed(@songTimeChanged.bind(@))
 
-    setInterval(@updateDebugSummary.bind(@), 100)
+      @trackMouse()
+      @bindKeys()
+      @bindWheelZoom(@dia)
+      setTimeout => # depends on child node being ready
+          @forwardMouseEventsToAdjustersCanvas()
+        , 400
+
+      @makeZoomAdjs()
+
+      zoomed = @$.zoomed
+      setupDrop(@$.dia.shadowRoot.querySelector('svg'),
+                zoomed.$.rows, @, zoomed.onDrop.bind(zoomed))
+
+      setInterval(@updateDebugSummary.bind(@), 100)
+    , 500
 
     #if anchor == loadtest
     #  add note and delete it repeatedly
     #  disconnect the graph, make many notes, drag a point over many steps, measure lag somewhere
 
+  _onIronResize: ->
+    @width(@offsetWidth)
+  _onSongTime: (t) ->
+    #@viewState.cursor.t(t)
+  _onSongDuration: (d) ->
+    d = 700 if d < 1 # bug is that asco isn't giving duration, but 0 makes the scale corrupt
+    #@viewState.zoomSpec.duration(d)
+    
+  setSong: (s) ->
+    @song = @playerSong if @followPlayerSong
+  onGraph: (graph) ->
+    @project = new Project(graph)
+
   updateDebugSummary: ->
     elemCount = (tag) -> document.getElementsByTagName(tag).length
     @debug = "#{window.debug_zoomOrLayoutChangedCount} layout change,
@@ -166,23 +192,6 @@
      #{window.debug_adjsCount} adjuster items registered,
      #{window.debug_adjUpdateDisplay} adjuster updateDisplay calls,
     "
-    
-  attached: ->
-    super()
-    @dia = @$.dia
-    ko.computed(@zoomOrLayoutChanged.bind(@))
-    ko.computed(@songTimeChanged.bind(@))
-
-    @trackMouse()
-    @bindKeys()
-    @bindWheelZoom(@dia)
-    @forwardMouseEventsToAdjustersCanvas()
-
-    @makeZoomAdjs()
-
-    zoomed = @$.zoomed
-    setupDrop(@$.dia.querySelector('svg'), zoomed.$.rows, @, zoomed.onDrop.bind(zoomed))
-
 
   zoomOrLayoutChanged: ->
     log('zoomOrLayoutChanged')
@@ -206,14 +215,16 @@
     @zoomInX = zoomInX
 
     # todo: these run a lot of work purely for a time change
-    @dia.setTimeAxis(@width(), @$.zoomed.$.audio.offsetTop, @zoomInX)
-    @$.adjustersCanvas.updateAllCoords()
+    if @$.zoomed?.$?.audio?
+      @dia.setTimeAxis(@width(), @$.zoomed.$.audio.offsetTop, @zoomInX)
+      @$.adjustersCanvas.updateAllCoords()
 
     # cursor needs update when layout changes, but I don't want
     # zoom/layout to depend on the playback time
     setTimeout(@songTimeChanged.bind(@), 1)
 
   songTimeChanged: ->
+    return unless @$.zoomed?.$?.time?
     @$.cursorCanvas.setCursor(@$.audio.offsetTop, @$.audio.offsetHeight,
                               @$.zoomed.$.time.offsetTop,
                               @$.zoomed.$.time.offsetHeight,
@@ -257,6 +268,7 @@
 
       zs.t1(center - left * scale)
       zs.t2(center + right * scale)
+      log('view to', ko.toJSON(@viewState))
 
   forwardMouseEventsToAdjustersCanvas: ->
     ac = @$.adjustersCanvas
@@ -410,7 +422,6 @@
       #should only make new ones
       # 
       child = new Note(@graph, @selection, @dia, uri, @setAdjuster, @song, @zoomInX)
-      log('note ',uri)
       originTime = @graph.floatValue(uri, U(':originTime'))
       effect = @graph.uriValue(uri, U(':effectClass'))
       for curve in @graph.objects(uri, U(':curve'))
@@ -421,7 +432,6 @@
 
           h = 150 #@offsetHeight
           screenPts = ($V([@zoomInX(pt.e(1)), @offsetTop + (1 - pt.e(2)) * h]) for pt in @worldPts)
-
           graphics.beginFill(0xFF3300);
           graphics.lineStyle(4, 0xffd900, 1)