worldPts.push(v)

    worldPts.sort((a,b) -> a.e(1) > b.e(1))

    return [uris, worldPts]

  curveWidth: (worldPts) ->

    tMin = @graph.floatValue(worldPts[0].uri, @graph.Uri(':time'))

    tMax = @graph.floatValue(worldPts[3].uri, @graph.Uri(':time'))

    tMax - tMin

  deleteNote: (song, note, selection) ->

    patch = {delQuads: [{subject: song, predicate: graph.Uri(':note'), object: note, graph: song}], addQuads: []}

    @graph.applyAndSendPatch(patch)

    if note in selection.selected()

      selection.selected(_.without(selection.selected(), note))

class ViewState

  constructor: () ->

    # caller updates all these observables

    @width = ko.observable(500)

    @zoomSpec =

      duration: ko.observable(100) # current song duration

      t1: ko.observable(0)

      t2: ko.observable(100)

    @cursor =

    @mouse =

      pos: ko.observable($V([0,0]))

    @fullZoomX = d3.scaleLinear()

    @zoomInX = d3.scaleLinear()

    ko.computed(@zoomOrLayoutChanged.bind(@))    

  zoomOrLayoutChanged: () ->

    log('zoomOrLayoutChanged')

    # not for cursor updates

    window.debug_zoomOrLayoutChangedCount++

    if @zoomSpec.t1() < 0

      @zoomSpec.t1(0)

    if @zoomSpec.duration() and @zoomSpec.t2() > @zoomSpec.duration()

      @zoomSpec.t2(@zoomSpec.duration())

    @fullZoomX.domain([0, @zoomSpec.duration()])

    @fullZoomX.range([0, @width()])

    # had trouble making notes update when this changes

    zoomInX = d3.scaleLinear()

    zoomInX.domain([@zoomSpec.t1(), @zoomSpec.t2()])

    zoomInX.range([0, @width()])

    @zoomInX = zoomInX

  latestMouseTime: ->

    @zoomInX.invert(@mouse.pos().e(1))

  onMouseWheel: (deltaY) ->

    zs = @zoomSpec

    center = @latestMouseTime()

    left = center - zs.t1()

    right = zs.t2() - center

    scale = Math.pow(1.005, deltaY)

    zs.t1(center - left * scale)

    zs.t2(center + right * scale)

    log('view to', ko.toJSON(@))

class TimelineEditor extends Polymer.Element

  @is: 'light9-timeline-editor'

  @behaviors: [ Polymer.IronResizableBehavior ]

  @properties:

    viewState: { type: Object }

    debug: {type: String}

    graph: {type: Object, notify: true}

    project: {type: Object}

    setAdjuster: {type: Function, notify: true}

    playerSong: {type: String, notify: true}

    followPlayerSong: {type: Boolean, notify: true, value: true}

    song: {type: String, notify: true}

    show: {value: 'http://light9.bigasterisk.com/show/dance2017'}

    songTime: {type: Number, notify: true, observer: '_onSongTime'}

    songDuration: {type: Number, notify: true, observer: '_onSongDuration'}

    songPlaying: {type: Boolean, notify: true}

    selection: {type: Object, notify: true}

  @listeners:

    'iron-resize': '_onIronResize'

  @observers: [

    'setSong(playerSong, followPlayerSong)',

    'onGraph(graph)',

    ]

  connectedCallback: ->

    super.connectedCallback()

    ko.options.deferUpdates = true;

    @dia = @$.dia

    @selection = {hover: ko.observable(null), selected: ko.observable([])}

    window.debug_zoomOrLayoutChangedCount = 0

    window.debug_adjUpdateDisplay = 0

    @viewState = new ViewState()

    window.viewState = @viewState

    @setAdjuster = (adjId, makeAdjustable) =>

      ac = @$.adjustersCanvas

      setTimeout((()=>ac.setAdjuster(adjId, makeAdjustable)),10)

    setTimeout =>

      ko.computed(@zoomOrLayoutChanged.bind(@))

      ko.computed(@songTimeChanged.bind(@))

      @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: ->

  _onSongTime: (t) ->

  _onSongDuration: (d) ->

    d = 700 if d < 1 # bug is that asco isn't giving duration, but 0 makes the scale corrupt

  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,

     #{elemCount('light9-timeline-note')} notes,

     #{@selection.selected().length} selected

     #{elemCount('light9-timeline-graph-row')} rows,

     #{window.debug_adjsCount} adjuster items registered,

     #{window.debug_adjUpdateDisplay} adjuster updateDisplay calls,

    "

  zoomOrLayoutChanged: ->

    vs = @viewState

    # todo: these run a lot of work purely for a time change

    if @$.zoomed?.$?.audio?

      @$.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,

                              @viewState)

  trackMouse: ->

    # not just for show- we use the mouse pos sometimes

    for evName in ['mousemove', 'touchmove']

      @addEventListener evName, (ev) =>

        ev.preventDefault()

        # todo: consolidate with _editorCoordinates version

        if ev.touches?.length

          ev = ev.touches[0]

        @root = @getBoundingClientRect()

        @$.cursorCanvas.setMouse(@viewState.mouse.pos())

        # should be controlled by a checkbox next to follow-player-song-choice

        @sendMouseToVidref() unless window.location.hash.match(/novidref/)

  sendMouseToVidref: ->

    now = Date.now()

    if (!@$.vidrefLastSent? || @$.vidrefLastSent < now - 200) && !@songPlaying

      @$.vidrefTime.body = {t: @latestMouseTime(), source: 'timeline'}

      @$.vidrefTime.generateRequest()

      @$.vidrefLastSent = now

  bindWheelZoom: (elem) ->

    elem.addEventListener 'mousewheel', (ev) =>

      @viewState.onMouseWheel(ev.deltaY)

  forwardMouseEventsToAdjustersCanvas: ->

    ac = @$.adjustersCanvas

    @addEventListener('mousedown', ac.onDown.bind(ac))

    @addEventListener('mousemove', ac.onMove.bind(ac))

    @addEventListener('mouseup', ac.onUp.bind(ac))

  bindKeys: ->

    shortcut.add "Ctrl+P", (ev) =>

      @$.music.seekPlayOrPause(@latestMouseTime())

    zoomAnimSec = .1

    shortcut.add "Ctrl+Escape", =>

    shortcut.add "Shift+Escape", =>

    shortcut.add "Escape", =>

      zs = @viewState.zoomSpec

      visSeconds = zs.t2() - zs.t1()

      margin = visSeconds * .4

      # buggy: really needs t1/t2 to limit their ranges

      if @songTime < zs.t1() or @songTime > zs.t2() - visSeconds * .6

        newCenter = @songTime + margin

    shortcut.add "L", =>

      @$.adjustersCanvas.updateAllCoords()

    shortcut.add 'Delete', =>

      for note in @selection.selected()

        @project.deleteNote(@song, note, @selection)

  makeZoomAdjs: ->

    yMid = => @$.audio.offsetTop + @$.audio.offsetHeight / 2

    dur = @viewState.zoomSpec.duration

    valForPos = (pos) =>

        x = pos.e(1)

        t = @fullZoomX.invert(x)

    @setAdjuster('zoom-left', => new AdjustableFloatObservable({

      observable: @viewState.zoomSpec.t1,

      getTarget: () =>

        $V([@fullZoomX(@viewState.zoomSpec.t1()), yMid()])

      getSuggestedTargetOffset: () => $V([50, 0])

      getValueForPos: valForPos

    }))

    @setAdjuster('zoom-right', => new AdjustableFloatObservable({

      observable: @viewState.zoomSpec.t2,

      getTarget: () =>

    @renderer = PIXI.autoDetectRenderer({

         backgroundColor: 0xff6060,

    })

  connectedCallback: ->

    super.connectedCallback()

    @$.rows.appendChild(@renderer.view);

    # iron-resize should be doing this but it never fires

    setInterval(@update.bind(@), 1000)

  onGraph: ->

    @graph.runHandler(@gatherNotes.bind(@), 'zoom notes')

  gatherNotes: ->

    U = (x) => @graph.Uri(x)

    log('assign rows',@song, 'graph has', @graph.quads().length)

    graphics = new PIXI.Graphics({nativeLines: true})

    for uri in _.sortBy(@graph.objects(@song, U(':note')), 'uri')

      #should only make new ones

      # 

      originTime = @graph.floatValue(uri, U(':originTime'))

      effect = @graph.uriValue(uri, U(':effectClass'))

      for curve in @graph.objects(uri, U(':curve'))

        if @graph.uriValue(curve, U(':attr')).equals(U(':strength'))

          [@pointUris, @worldPts] = @project.getCurvePoints(curve, originTime)

          curveWidthCalc = () => @_curveWidth(@worldPts)

          h = 150 #@offsetHeight

          screenPts = ($V([@viewState.zoomInX(pt.e(1)), @offsetTop + (1 - pt.e(2)) * h]) for pt in @worldPts)

          graphics.beginFill(0xFF3300);

          graphics.lineStyle(4, 0xffd900, 1)

          graphics.moveTo(screenPts[0].e(1), screenPts[0].e(2))

          for p in screenPts.slice(1)

            graphics.lineTo(p.e(1), p.e(2))

         graphics.endFill()

     @rows = []#(new NoteRow(@graph, @dia, @song, @zoomInX, @noteUris, i, @selection) for i in [0...ROW_COUNT])

     @stage.children.splice(0)

     @stage.addChild(graphics)

     @renderer.render(@stage)