catch e

      console.log(e)

    unhighlight()

    @is: "edit-choice",

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

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

    connectedCallback: ->

      super.connectedCallback()

      @uri = null

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

        @uri=uri

        @updateLabel()

    unlink: ->

      @uri = null

    </style>

    <div id="box">

      <resource-display graph="{{graph}}" uri="{{uri}}" rename></resource-display>

      <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 }

    duration: { type: Number, notify: true }

    song: { type: String, notify: true }

    # It does not yet work to write back to the playing/t

    # properties. See seekPlayOrPause.

    playing: { type: Boolean, notify: true }

    t: { type: Number, notify: true }

  ready: ->

    @turboUntil = 0

    @poll()

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

  estimateTimeLoop: ->

    if @playing

      @t = @remoteT + (Date.now() - @remoteAsOfMs) / 1000

    else

      @t = @remoteT

  poll: ->

    clearTimeout(@nextPoll) if @nextPoll

    @$.getTime.generateRequest()

    @status = "♫"

  onResponse: ->

    @status = " "

  seekPlayOrPause: (t) ->

    @$.seek.body = {t: t}

    @$.seek.generateRequest()

    @turboUntil = Date.now() + 1000

    @poll()

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

<!-- remote control of ascoltami -->

<dom-module id="light9-music">

  <template>

    <style>

         background: black;

         color: white;

         border: 1px solid #2782ad;

         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>

log = console.log

Drawing = window.Drawing

  @is: 'light9-adjusters-canvas'

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

    'updateAllCoords(adjs)'

  ]

    'iron-resize': 'resizeUpdate'

  connectedCallback: ->

    super.connectedCallback()

    @adjs = {}

    @ctx = @$.canvas.getContext('2d')

    # coords from a center that's passed in

    # # special layout for the thaeter ones with middinh 

    # 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 = @$.canvas.getContext('2d')

  onViewState: ->

      @ctx.strokeStyle = '#ff0303'

      @ctx.lineWidth = 3

      @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

    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 }

    'addHandler(graph, uri)'

    'onColorScale(graph, uri, colorScale)'

    ]

  displayed: ->

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

  onColorScale: ->

      @colorScale = '#ffffff'

    #console.timeEnd('attrs update')

  onDel: ->

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

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

<script src="/lib/underscore/underscore-min.js"></script>

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

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

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

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

        setTimeout(gotoStep, delay)

        lastTime = delay

    setTimeout(=>

        @zoomSpec.t1(newT1)

        @zoomSpec.t2(newT2)

      , lastTime + 10)  

  @is: 'light9-timeline-editor'

    viewState: { type: Object }

    debug: {type: String}

    graph: {type: Object, notify: true}

    project: {type: Object}

    setAdjuster: {type: Function, notify: true}

    playerSong: {type: String, 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

    window.debug_adjUpdateDisplay = 0

    @viewState = new ViewState()

      # fullzoom is not right- the sides shouldn't be able to go

      # offscreen

      getTarget: () => $V([@fullZoomX(panObs()), yMid()])

      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()

    @renderer = PIXI.autoDetectRenderer({

         backgroundColor: 0xff6060,

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

    @update()

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

  onGraph: ->

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

  gatherNotes: ->

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

    log('assign rows',@song, 'graph has', @graph.quads().length)

    graphics = new PIXI.Graphics({nativeLines: true})

    dropTime = @viewState.zoomInX.invert(pos.e(1))

    desiredWidthX = @offsetWidth * .3

    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 =>

      dependOn = [@viewState.zoomSpec.t1(), @viewState.zoomSpec.t2()]

      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) ->

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

  observers: [

    'observedUpdate(graph, song, rowIndex)'

    'onZoom(zoomInX)'

    ]

  observedUpdate: (graph, song, rowIndex) ->

    @update() # old behavior

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

  update: (patch) ->

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

      $V([0, 30])

    else

      $V([0, -30])

  # note boxes. 

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

    selection: {type: Object, notify: true}

  }

  connectedCallback: ->

    super.connectedCallback()

    @elemById = {}

      elem.setAttribute('class', classes)

    #elem = @getOrCreateElem(uri+'/label', 'noteLabels', 'text', {style: "font-size:13px;line-height:125%;font-family:'Verana Sans';text-align:start;text-anchor:start;fill:#000000;"})

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

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

    #elem.innerHTML = effectLabel;