log = console.log

Drawing = window.Drawing

coffeeElementSetup(class AdjustersCanvas extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element)

  @is: 'light9-adjusters-canvas'

  @getter_properties:

  @getter_observers: [

    'updateAllCoords(adjs)'

  ]

  constructor: ->

    super()

    @redraw = _.throttle(@_throttledRedraw.bind(@), 30, {leading: false})

    @adjs = {}

  ready: ->

    super.ready()

    @addEventListener('iron-resize', @resizeUpdate.bind(@))

    @ctx = @$.canvas.getContext('2d')

    @redraw()

  onDown: (ev) ->

    if ev.buttons == 1

      ev.stopPropagation()

      start = $V([ev.x, ev.y])

      adj = @_adjAtPoint(start)

      if adj

        @currentDrag = {start: start, adj: adj}

        adj.startDrag()

  onMove: (ev) ->

    pos = $V([ev.x, ev.y])

    if @currentDrag

      @currentDrag.cur = pos

      @currentDrag.adj.continueDrag(@currentDrag.cur.subtract(@currentDrag.start))

  onUp: (ev) ->

    return unless @currentDrag

    @currentDrag.adj.endDrag()

    @currentDrag = null

    # callers register/unregister the Adjustables they want us to make

    # adjuster elements for. Caller invents adjId.  makeAdjustable is

    # a function returning the Adjustable or it is null to clear any

    # adjusters with this id.

    if not @adjs[adjId] or not makeAdjustable?

      if not makeAdjustable?

        delete @adjs[adjId]

      else

        adj = makeAdjustable()

        @adjs[adjId] = adj

        adj.id = adjId

    window.debug_adjsCount = Object.keys(@adjs).length

  updateAllCoords: ->

    @redraw()

  _adjAtPoint: (pt) ->

    nearest = @qt.find(pt.e(1), pt.e(2))

    if not nearest? or nearest.distanceFrom(pt) > 50

      return null

    return nearest?.adj

       - background grids

       - zoom arcs

       - notes

     This element is not responsible for any hit detection. Things you click (rows,

     notes, adjusters, etc) are caught on their respective elements. (But is that

     wrong in the case of notes?)

   -->

<dom-module id="light9-timeline-diagram-layer">

  <template>

    <style>

     :host {

     }

     svg {

         width: 100%;

         height: 100%;

     }

     #notes > path {

         stroke:#000000;

         stroke-width:1.5;

     }

     #notes > path.hover {

         stroke-width: 1.5;

         stroke: #888;

     }

     #notes > path.selected {

    <style>

     #canvas, :host {

         pointer-events: none;

     }

    </style>

    <canvas id="canvas"></canvas>

  </template>

</dom-module>

<dom-module id="light9-adjusters-canvas">

  <template>

    <style>

         pointer-events: none;

     }

    </style>

    <canvas id="canvas"></canvas>

  </template>

</dom-module>

<!-- seconds labels -->

<dom-module id="light9-timeline-time-axis">

  <template>

    <style>

    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}

    songDuration: {type: Number, notify: true}

    songPlaying: {type: Boolean, notify: true}

    selection: {type: Object, notify: true}

  @getter_observers: [

    '_onSong(playerSong, followPlayerSong)',

    '_onGraph(graph)',

    '_onSongDuration(songDuration, viewState)',

    '_onSongTime(songTime, viewState)',

  ]

  ready: ->

    super.ready()

    ko.options.deferUpdates = true;

    @dia = @$.dia

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

    window.debug_zoomOrLayoutChangedCount = 0

    window.debug_adjUpdateDisplay = 0

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

    @trackMouse()

    @bindKeys()

    setInterval(@updateDebugSummary.bind(@), 100)

    @addEventListener('iron-resize', @_onIronResize.bind(@))

    Polymer.RenderStatus.afterNextRender(this, @_onIronResize.bind(@))

    #zoomed = @$.zoomed 

    #setupDrop(@dia.shadowRoot.querySelector('svg'),

    #          zoomed.$.rows, @, zoomed.onDrop.bind(zoomed))

  _onIronResize: ->

    @viewState.setWidth(@offsetWidth)

    @viewState.audioY(@$.audio.offsetTop)

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

  _onSong: (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

  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)

  bindKeys: ->

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

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

    shortcut.add "Ctrl+Escape", => @viewState.frameAll()

    shortcut.add "Shift+Escape", => @viewState.frameToEnd()

    shortcut.add "Escape", => @viewState.frameCursor()

    shortcut.add "L", =>

      @$.adjustersCanvas.updateAllCoords()

    shortcut.add 'Delete', =>

      for note in @selection.selected()

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

        write: (value) =>

          zs = @viewState.zoomSpec

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

          zs.t1(value - span / 2)

          zs.t2(value + span / 2)

      })

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

      observable: panObs

      emptyBox: true

      # fullzoom is not right- the sides shouldn't be able to go

      # offscreen

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

      getValueForPos: valForPos

      }))

)

# plan: in here, turn all the notes into simple js objects with all

# their timing data and whatever's needed for adjusters. From that, do

# the brick layout. update only changing adjusters.

coffeeElementSetup(class TimeZoomed extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element)

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

  @getter_properties: