pointQuads.push(quad(pt, U(':value'), @graph.LiteralRoundedFloat(i == 1 or i == 2)))

    patch = {

      delQuads: []

      addQuads: curveQuads.concat(pointQuads)

      }

    @graph.applyAndSendPatch(patch)

  getCurvePoints: (curve, xOffset) ->

    worldPts = []

    uris = @graph.objects(curve, @graph.Uri(':point'))

    for pt in uris

      v.uri = pt

      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 TimelineEditor extends Polymer.Element

  @is: 'light9-timeline-editor'

  @behaviors: [ Polymer.IronResizableBehavior ]

  @properties:

    viewState: { type: Object }

    debug: {type: String}

    graph: {type: Object, notify: true}

    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}

    fullZoomX: {type: Object, notify: true}

    zoomInX: {type: Object, notify: true}

    selection: {type: Object, notify: true}

  width: ko.observable(1)

  @listeners:

    'iron-resize': '_onIronResize'

  @observers: [

    ]

  _onIronResize: ->

    @width(@offsetWidth)

  _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

  connectedCallback: ->

    super.connectedCallback()

    ko.options.deferUpdates = true;

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

    window.debug_zoomOrLayoutChangedCount = 0

    window.debug_adjUpdateDisplay = 0

    @viewState =

      zoomSpec:

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

        t1: ko.observable(0) # need validation to stay in bounds and not go too close

  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,

    "

  attached: ->

    @dia = @$.dia

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

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

    @trackMouse()

    @bindKeys()

    @forwardMouseEventsToAdjustersCanvas()

    @makeZoomAdjs()

    zoomed = @$.zoomed

    setupDrop(@$.dia.querySelector('svg'), zoomed.$.rows, @, zoomed.onDrop.bind(zoomed))

  zoomOrLayoutChanged: ->

    log('zoomOrLayoutChanged')

    # not for cursor updates

  @is: 'light9-timeline-time-zoomed'

  @behaviors: [ Polymer.IronResizableBehavior ]

  @properties:

    graph: { type: Object, notify: true }

    project: { type: Object }

    selection: { type: Object, notify: true }

    dia: { type: Object, notify: true }

    song: { type: String, notify: true }

    zoomInX: { type: Object, notify: true }

    zoom: { type: Object, notify: true, observer: 'onZoom' } # viewState.zoomSpec

    zoomFlattened: { type: Object, notify: true }

  @observers: [

  ]

  @listeners: {'iron-resize': 'update'}

  update: ->

    @renderer.resize(@clientWidth, @clientHeight)

    @renderer.render(@stage)

  onZoom: ->

    updateZoomFlattened = ->

      log('updateZoomFlattened')

      @zoomFlattened = ko.toJS(@zoom)

    ko.computed(updateZoomFlattened.bind(@))

         backgroundColor: 0xff6060,

  onGraph: ->

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

  gatherNotes: ->

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

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

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

      #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'))

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

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

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

          graphics.beginFill(0xFF3300);

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

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

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

  onDrop: (effect, pos) ->

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

    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] = @_getCurvePoints(curve, originTime)

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

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

        @dia.setNote(@uri, screenPts, effect)

        @_updateAdjusters(screenPts, curveWidthCalc, yForV, U(@song))

        @_updateInlineAttrs(screenPts)

    if screenPts[screenPts.length - 1].e(1) - screenPts[0].e(1) < 100

      @clearAdjusters()

    else

      @_makeOffsetAdjuster(yForV, curveWidthCalc, ctx)

      @_makeCurvePointAdjusters(yForV, @worldPts, ctx)

      @_makeFadeAdjusters(yForV, ctx)

  _updateInlineAttrs: (screenPts) ->

    leftX = Math.max(2, screenPts[Math.min(1, screenPts.length - 1)].e(1) + 5)

    rightX = screenPts[Math.min(2, screenPts.length - 1)].e(1) - 5

    if screenPts.length < 3

      rightX = leftX + 120