@is: "edit-choice",

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

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

    unlink: ->

      @uri = null

      <button on-click="unlink">Unlink</button>

    </div>

  </template>

  <script src="edit-choice.js"></script>

</dom-module>

log = console.log

# port of light9/curvecalc/musicaccess.py

    status: { type: String, notify: true }

    statusTitle: { type: String, notify: true }

    turboSign: { type: String, notify: true }

    t: { type: Number, notify: true }

  ready: ->

    @turboUntil = 0

    @poll()

    setInterval(@estimateTimeLoop.bind(@), 30)

  estimateTimeLoop: ->

    if @playing

      @t = @remoteT

  poll: ->

    clearTimeout(@nextPoll) if @nextPoll

    @$.getTime.generateRequest()

    @status = "♫"

    @turboUntil = Date.now() + 1000

    @poll()

<link rel="import" href="/lib/iron-ajax/iron-ajax.html">

<!-- remote control of ascoltami -->

         font-size: 12px;

     }

    </style>

    <iron-ajax id="seek"

               method="POST"

               url="/ascoltami/seekPlayOrPause"

               content-type="application/json"></iron-ajax>

    <span>[[status]][[turboSign]]</span>

  </template>

  <script src="light9-music.js"></script>

</dom-module>

Drawing = window.Drawing

  @is: 'light9-adjusters-canvas'

    adjs: { type: Object, notify: true }, # adjId: Adjustable

    'updateAllCoords(adjs)'

  ]

    'iron-resize': 'resizeUpdate'

  connectedCallback: ->

    super.connectedCallback()

    # l/r arrows

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

    # connector

    viewState: { type: Object, notify: true, observer: "onViewState" }

    @mouseX = 0

    @mouseY = 0

    @cursorPath = null

      @ctx.beginPath()

      Drawing.line(@ctx, @cursorPath.bot0, @cursorPath.bot1, '#ff0303', '3px')

      @ctx.stroke()

log = console.log

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

    graph: { type: Object, notify: true }

    song: { type: String, notify: true }

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

    colorScale: { type: String, notify: true }

    noteLabel: { type: String, notify: true }

    selection: { type: Object, notify: true }

    'addHandler(graph, uri)'

    'onColorScale(graph, uri, colorScale)'

    ]

  onDel: ->

    deleteNote(@graph, @song, @uri, @selection)

<script src="/node_modules/n3/n3-browser.js"></script> 

<script src="/node_modules/pixi.js/dist/pixi.min.js"></script>

<script src="adjustable.js"></script>

<script src="adjusters.js"></script>

<script src="drawing.js"></script>

        @zoomSpec.t1(newT1)

        @zoomSpec.t2(newT2)

      , lastTime + 10)  

  @is: 'light9-timeline-editor'

    viewState: { type: Object }

    debug: {type: String}

    graph: {type: Object, notify: true}

    followPlayerSong: {type: Boolean, notify: true, value: true}

    song: {type: String, notify: true}

    show: {value: 'http://light9.bigasterisk.com/show/dance2017'}

    songPlaying: {type: Boolean, notify: true}

    selection: {type: Object, notify: true}

    'setSong(playerSong, followPlayerSong)',

    'onGraph(graph)',

  connectedCallback: ->

    super.connectedCallback()

    ko.options.deferUpdates = true;

    @dia = @$.dia

    @selection = {hover: ko.observable(null), selected: ko.observable([])}

    window.debug_zoomOrLayoutChangedCount = 0

      getSuggestedTargetOffset: () => $V([0, 0])

      getValueForPos: valForPos

      }))

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

  @is: 'light9-timeline-time-zoomed'

    graph: { type: Object, notify: true }

    project: { type: Object }

    selection: { type: Object, notify: true }

    dia: { type: Object, notify: true }

    song: { type: String, notify: true }

    viewState: { type: Object, notify: true }

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

    'onZoom(viewState)',

  ]

  constructor: ->

    super()

    @stage = new PIXI.Container()

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

  onGraph: ->

    @graph.runHandler(@gatherNotes.bind(@), 'zoom notes')

  gatherNotes: ->

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

    desiredWidthT = @viewState.zoomInX.invert(desiredWidthX) - @viewState.zoomInX.invert(0)

    desiredWidthT = Math.min(desiredWidthT, @zoom.duration() - dropTime)

    @project.makeNewNote(effect, dropTime, desiredWidthT)

  @is: "light9-timeline-time-axis",

    viewState: { type: Object, notify: true, observer: "onViewState" }

  onViewState: ->

    ko.computed =>

      pxPerTick = 50

      axis = d3.axisTop(@viewState.zoomInX).ticks(@viewState.width() / pxPerTick)

      d3.select(@$.axis).call(axis)

class NoteRow

  constructor: (@graph, @dia, @song, @zoomInX, @noteUris, @rowIndex, @selection) ->

    'onZoom(zoomInX)'

    ]

  observedUpdate: (graph, song, rowIndex) ->

    @update() # old behavior

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

  # note boxes. 

  @is: 'light9-timeline-diagram-layer'

    selection: {type: Object, notify: true}

  }

  connectedCallback: ->

    #elem.setAttribute('x', curvePts[0].e(1)+20)

    #elem.setAttribute('y', curvePts[0].e(2)-10)

    #elem.innerHTML = effectLabel;