z-index: 2;

         color: white;

     }

    </style>

      <div>note [[noteLabel]] <button on-click="onDel">del</button></div>

      <table>

        <tr><th>effect:</th><td><edit-choice id="effect" graph="{{graph}}" uri="{{effectStr}}"></edit-choice></td></tr>

        <tr><th>colorScale:</th><td>

          <light9-color-picker color="{{colorScale}}"></light9-color-picker>

        </td></tr>

      </table>

  </template>

  <script src="inline-attrs.js"></script>

</dom-module>

     }

    </style>

    <div id="top">

      <light9-timeline-time-axis id="time" view-state="{{viewState}}"></light9-timeline-time-axis>

      <light9-timeline-audio id="audio"

                             graph="{{graph}}"

                             song="{{song}}"

                             show="{{show}}"

                             zoom="{{zoomFlattened}}">

      </light9-timeline-audio>

    </div>

    <div id="rows"></div>

    <template is="dom-repeat" items="{{inlineAttrConfigs}}">

      <light9-timeline-note-inline-attrs graph="{{graph}}"

                                         project="{{project}}"

                                         selection="{{selection}}"

                                         song="{{song}}"

                                         config="{{item}}">

      </light9-timeline-note-inline-attrs>

    </template>

  </template>

</dom-module>

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

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

    graph: { type: Object, notify: true }

    project: { type: Object }

    selection: { type: Object, notify: true }

    song: { type: String, notify: true }

    viewState: { type: Object, notify: true }

    inlineAttrConfigs: { type: Array, value: [] } # only for inlineattrs that should be displayed

  @getter_observers: [

    '_onGraph(graph, setAdjuster, song, viewState, project)',

    'onZoom(viewState)',

    '_onViewState(viewState)',

  ]

  constructor: ->

    super()

    @numRows = 6

    @noteByUriStr = new Map()

    @stage = new PIXI.Container()

    @stage.interactive=true

      backgroundColor: 0x606060,

      antialias: true,

      forceCanvas: true,

    })

    @bg = new PIXI.Container()

    @stage.addChild(@bg)

    @dirty = _.debounce(@_repaint.bind(@), 10)

  ready: ->

    super.ready()

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

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

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

    # This works for display, but pixi hit events didn't correctly

    # move with the objects, so as a workaround, I extended the top of

    # the canvas in _onResize.

    #

    #ko.computed =>

    #  @stage.setTransform(0, -(@viewState.rowsY()), 1, 1, 0, 0, 0, 0, 0)