:host {

         display: block;

         background: green;

         /* outline: 2px solid red; */

     }

    </style>

                                       graph="{{graph}}"

                                       song="{{song}}"

                                       uri="{{uri}}"

    >

  </template>

</dom-module>

<!-- All the adjusters you can edit or select. Tells a light9-adjusters-canvas how to draw them. Probabaly doesn't need to be an element.

     This element manages their layout and suppresion.

     Owns the selection.

<dom-module id="light9-timeline-note-inline-attrs">

  <template>

    <style>

     #top {

         position: absolute;

         overflow: hidden;

         border-radius: 6px;

         padding: 3px;

     }

    </style>

    <div id="top" style$="left: [[rect.left]]px; top: [[rect.top]]px; width: [[rect.width]]px; height: [[rect.height]]px; display: [[rect.display]]">

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

      <table>

        <tr><th>effect:</th><td><edit-choice uri="{{effect}}" label="{{effectLabel}}"></edit-choice></td></tr>

    @makeCurveAdjusters(curveWidth, yForV, @worldPts)

  makeCurveAdjusters: (curveWidth, yForV, worldPts) ->

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

      @adjusterIds[@uri+'/offset'] = true

      @setAdjuster(@uri+'/offset', => new AdjustableFloatObject({

        graph: @graph

        subj: @uri

        pred: U(':originTime')

        ctx: U(@song)