null

    onDrop(uri, pos)

    unhighlight()

Polymer

    is: "edit-choice",

    properties:

        graph: {type: Object, notify: true},

        uri: {type: String, notify: true},

    ready: ->

      @uri = null

      setupDrop @$.box, @$.box, null, (uri) =>

        @uri=uri

        @updateLabel()

    unlink: ->

      @uri = null

    <style>

     :host {

         display: block;

         background: green;

         /* outline: 2px solid red; */

     }

    </style>

    <light9-timeline-note-inline-attrs rect="{{inlineRect}}"

                                       graph="{{graph}}"

                                       selection="{{selection}}"

                                       song="{{song}}"

                                       uri="{{uri}}"

    >

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

  </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.

     Maybe includes selecting things that don't even have adjusters.

     Maybe manages the layout of other labels and text too, to avoid overlaps.

   -->

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

         position: absolute;

         overflow: hidden;

         background: rgba(123, 123, 123, 0.71);

         border-radius: 6px;

         border: 1px solid #313131;

         padding: 3px;

         z-index: 2;

     }

    </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>colorScale:</th><td>

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

        </td></tr>

      </table>

    </div>

  </template>

</dom-module>

<script src="/lib/sylvester/sylvester.js"></script>

<script src="/lib/d3/build/d3.min.js"></script>

<!-- version with https://github.com/RubenVerborgh/N3.js/pull/61 -->

  is: 'light9-timeline-graph-row'

  behaviors: [ Polymer.IronResizableBehavior ]

  properties:

    graph: { type: Object, notify: true }

    dia: { type: Object, notify: true }

    song:  { type: String, notify: true }

    zoomInX: { type: Object, notify: true }

    noteUris: { type: Array, notify: true }

    rowIndex: { type: Object, notify: true }

    selection: { type: Object, notify: true }

  observers: [

    'onGraph(graph, dia, setAdjuster, song, zoomInX)'

    'onZoom(zoomInX)'

    ]

  onGraph: ->

    @graph.runHandler(@update.bind(@), "row notes #{@rowIndex}")

    @update() # old behavior

    #@graph.runHandler(@update.bind(@), "row notes #{@rowIndex}")

  update: (patch) ->

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

    notesForThisRow = []

    i = 0

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

      if (i % ROW_COUNT) == @rowIndex

        notesForThisRow.push(n)

      i++

      $V([0, -30])

Polymer

  is: "light9-timeline-note-inline-attrs"

  properties:

    graph: { type: Object, notify: true }

    song: { type: String, notify: true }

    uri: { type: String, notify: true }  # the Note

    rect: { type: Object, notify: true }

    effect: { type: String, notify: true }

    colorScale: { type: String, notify: true }

    noteLabel: { type: String, notify: true }

    selection: { type: Object, notify: true }

  observers: [

    'addHandler(graph, uri)'

    'onColorScale(graph, uri, colorScale)'

    ]

  displayed: ->

    @querySelector('light9-color-picker').displayed()

  onColorScale: ->

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

    if @colorScale == @colorScaleFromGraph

        quad(setting, U(':effectAttr'), attr)

        quad(setting, U(':value'), value)

        ]}

      @graph.applyAndSendPatch(patch)

  addHandler: ->

    @graph.runHandler(@update.bind(@), "update inline attrs #{@uri}")

  update: ->

    #console.time('attrs update')

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

    @effect = @graph.uriValue(@uri, U(':effectClass'))

    @noteLabel = @uri.replace(/.*\//, '')

    existingColorScaleSetting = null

    for setting in @graph.objects(@uri, U(':setting'))

      ea = @graph.uriValue(setting, U(':effectAttr'))

      value = @graph.stringValue(setting, U(':value'))

      if ea == U(':colorScale')

        @colorScaleFromGraph = value

        @colorScale = value

        existingColorScaleSetting = setting

    if existingColorScaleSetting == null

      @colorScaleFromGraph = '#ffffff'