background: rgba(126, 52, 245, 0.0784313725490196);

       - annotations on notes

       - connectors between adjusters and their targets

        <g id="noteLabels"></g>

        <g id="connectors"></g>

<!-- Yellow dotted handle that you can adjust to edit something.

     Knows an attribute to edit and the true screen location, even if

     parent <light9-timeline-adjusters> has offset us a bit to avoid a

     text overlap.

     Draws affordance arrows and a connector line if we're far

     away from the point that we edit.

     May grow to a bigger editor when you click or drag.

   -->

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

  <template>

    <style>

     /* 

     #top {outline: 2px solid rgba(255, 0, 0, 0.25);}

     table {outline: 2px solid rgba(0, 0, 255, 0.19);}

     */

     #top {

         position: absolute;

         display: inline-block;

     }

     table {

         position: relative;

         left: -50%;

         top: -40px; /* percent had no effect */

         z-index: 2;

         border-collapse: collapse;

     }

     td {

         text-align: center;

         font-size: 20px;

     }

     span {

         font-size: 16px;

         background: rgba(255, 255, 0, 0.5);

         border: 3px yellow dotted;

         border-radius: 8px;

         padding: 5px;

         cursor: ew-resize;

         -webkit-user-select: none;

         pointer-events: all;

     }

     span.empty {

         width: 30px; /* todo: supposed to fill the whole visible section*/

         height: 13px;

         display: inline-block;

         background: rgba(0,0,0,0);

     }

    </style>

    <div id="top" style$="left: [[centerStyle.x]]px; top: [[centerStyle.y]]px">

      <table>

        <tr><td></td><td style="visibility: hidden">↑</td><td></td></tr>

        <tr><td>←</td><td><span id="label" class$="[[spanClass]]">[[displayValue]]</span></td><td>→</td></tr>

        <tr><td></td><td style="visibility: hidden">↓</td><td></td></tr>

      </table>

    </div>

  </template>

</dom-module>

class deleteme

  go: ->

    visible: { type: Boolean, notify: true }

    displayValue: { type: String }

    centerStyle: { type: Object }

    spanClass: { type: String, value: '' }

  observer: [

    'onAdj(graph, adj, dia, id, visible)'

    ]

  onAdj:  ->

    log('onAdj', @id)

    @adj.subscribe(@updateDisplay.bind(this))

    @graph.runHandler(@updateDisplay.bind(@))

  updateDisplay: () ->

    go = =>

      if !@visible

        @clearElements()

        return

      window.debug_adjUpdateDisplay++

      @spanClass = if @adj.config.emptyBox then 'empty' else ''

      @displayValue = @adj.getDisplayValue()

      center = @adj.getCenter()

      target = @adj.getTarget()

      #log("adj updateDisplay center #{center.elements} target #{target.elements}")

      return if isNaN(center.e(1))

      @centerStyle = {x: center.e(1), y: center.e(2)}

      @dia.setAdjusterConnector(@adj.id + '/conn', center, target)

    @debounce('updateDisplay', go)

  attached: ->

    drag = d3.drag()

    sel = d3.select(@$.label)

    sel.call(drag)

    drag.subject((d) -> {x: @offsetLeft, y: @offsetTop})

    drag.container(@offsetParent)

    drag.on('start', () => @adj?.startDrag())

    drag.on 'drag', () =>

      @adj?.continueDrag($V([d3.event.x, d3.event.y]))

    drag.on('end', () => @adj?.endDrag())

    @updateDisplay()

  detached: -> @clearElements()

  clearElements: ->

    @dia.clearElem(@adj.id, ['/conn'])

      for tries in [0...2]

  setAdjusterConnector: (uri, center, target) ->

    id = uri + '/adj'

    if not @anyPointsInView([center, target])

      @clearElem(id, [''])

      return

    elem = @getOrCreateElem(uri, 'connectors', 'path', {style: "fill:none;stroke:#d4d4d4;stroke-width:0.9282527;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:2.78475821, 2.78475821;stroke-dashoffset:0;"})

    elem.setAttribute('d', svgPathFromPoints([center, target]))