- 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%;

     }

    </style>

    <svg xmlns="http://www.w3.org/2000/svg"

         xmlns:svg="http://www.w3.org/2000/svg"

         xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" >

      <g id="layer1">

        <text

            xml:space="preserve"

            style="font-size:13px;line-height:125%;font-family:'Verana Sans';-inkscape-font-specification:'Verana Sans';text-align:start;text-anchor:start;fill:#000000;"

            x="-338.38403"

            y="631.3988"

            id="text4290"

     #{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()

  zoomOrLayoutChanged: ->

    # not for cursor updates

    window.debug_zoomOrLayoutChangedCount++

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

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

    # had trouble making notes update when this changes

        @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

  latestMouseTime: ->

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

      zs = @viewState.zoomSpec

      center = @latestMouseTime()

      left = center - zs.t1()

      right = zs.t2() - center

      scale = Math.pow(1.005, ev.deltaY)

      zs.t1(center - left * scale)

      zs.t2(center + right * scale)

  forwardMouseEventsToAdjustersCanvas: ->

    ac = @$.adjustersCanvas

    # l/r arrows

    # mouse arrow cursor upon hover, and accent the hovered adjuster

    # connector

Polymer

  # note boxes

  is: 'light9-timeline-diagram-layer'

  properties: {}

  ready: ->

    @elemById = {}

  setTimeAxis: (width, yTop, scale) ->

    pxPerTick = 50

    axis = d3.axisTop(scale).ticks(width / pxPerTick)

    d3.select(@$.timeAxis).attr('transform', 'translate(0,'+yTop+')').call(axis)

  getOrCreateElem: (uri, groupId, tag, attrs) ->

    elem = @elemById[uri]

    if !elem

      elem = @elemById[uri] = document.createElementNS("http://www.w3.org/2000/svg", tag)

      @$[groupId].appendChild(elem)

      elem.setAttribute('id', uri)

      for k,v of attrs