if ev.touches?.length

      ev = ev.touches[0]

    # storing root on the object to remember it across calls in case

    # you drag outside the editor.

    @root = rootElem.getBoundingClientRect() if rootElem

    offsetParentPos = $V([ev.pageX - @root.left, ev.pageY - @root.top])

    return offsetParentPos 

class window.AdjustableFloatObservable extends Adjustable

  constructor: (@config) ->

    # config also has:

    #   observable -> ko.observable we will read and write

    #   getValueForPos(pos) -> what should we set to if the user

    #                          moves target to this coord?

    super()

    @ctor2()

  _getValue: () ->

    @config.observable()

  continueDrag: (pos) ->

    # pos is vec2 of pixels relative to the drag start.

    super(pos)

    epos = @_editorCoordinates()

    newValue = @config.getValueForPos(epos)

    @config.observable(newValue)

  subscribe: (onChange) ->

    log('AdjustableFloatObservable subscribe', @config)

    ko.computed =>

      @config.observable()

      onChange()

class window.AdjustableFloatObject extends Adjustable

  constructor: (@config) ->

    # config also has:

    #   graph

    #   subj

    #   pred

    #   ctx

    #   getTargetPosForValue(value) -> getTarget result for value

    #   getValueForPos

    super()

    @ctor2()

    if not @config.ctx?

      throw new Error("missing ctx")

  _syncValue: () ->

    @_currentValue = @config.graph.floatValue(@config.subj, @config.pred)

    @_onChange() if @_onChange

  _getValue: () ->

    # this is a big speedup- callers use _getValue about 4x as much as

    # the graph changes and graph.floatValue is slow

    @_currentValue

  getTarget: () ->

    @config.getTargetPosForValue(@_getValue())

  subscribe: (onChange) ->

    # only works on one subscription at a time

    throw new Error('multi subscribe not implemented') if @_onChange

    @_onChange = onChange

  continueDrag: (pos) ->

    # pos is vec2 of pixels relative to the drag start

    super(pos)

    newValue = @config.getValueForPos(@_editorCoordinates())

    @config.graph.patchObject(@config.subj, @config.pred,

                              @config.graph.LiteralRoundedFloat(newValue),

                              @config.ctx)

class window.AdjustableFade extends Adjustable

  constructor: (@yForV, @i0, @i1, @note, offset, ctx) ->

    super()

    @config = {

      getSuggestedTargetOffset: -> offset

      getTarget: @getTarget.bind(@)

      ctx: ctx

    }

    @ctor2()

  getTarget: ->

    mid = @note.worldPts[@i0].x(.5).add(@note.worldPts[@i1].x(.5))

    $V([@note.zoomInX(mid.e(1)), @yForV(mid.e(2))])

  _getValue: ->

    mid = @note.worldPts[@i0].x(.5).add(@note.worldPts[@i1].x(.5))

    mid.e(1)

   continueDrag: (pos) ->

    # pos is vec2 of pixels relative to the drag start

    super(pos)

         border: 1px solid black;

         overflow: hidden;

     }

     light9-timeline-audio {

         width: 100%;

         height: 30px;

     }

     light9-timeline-time-zoomed {

         flex-grow: 1;

     }

     #coveredByDiagram {

         position: relative;

         display: flex;

         flex-direction: column;

         height: 100%;

     }

     #dia, #adjusters, #cursorCanvas, #adjustersCanvas {

         position: absolute;

         left: 0; top: 0; right: 0; bottom: 0;

     }

     #debug {

         background: white;

         font-family: monospace;

         font-size: 125%;

         height: 15px;

     }

    </style>

    <div>

      <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph>

      <light9-music id="music"

                    song="{{playerSong}}"

                    t="{{songTime}}"

                    playing="{{songPlaying}}"

                    duration="{{songDuration}}"></light9-music>

      timeline editor: song <edit-choice graph="{{graph}}" uri="{{song}}"></edit-choice>

      <label><input type="checkbox" checked="{{followPlayerSong::change}}" > follow player song choice</label>

    </div>

    <div id="debug">[[debug]]</div>

    <iron-ajax id="vidrefTime" url="/vidref/time" method="PUT" content-type="application/json"></iron-ajax>

    <div id="coveredByDiagram">

      <light9-timeline-audio id="audio"

                             graph="{{graph}}"

                             show="{{show}}"

                             song="{{song}}"></light9-timeline-audio>

      <light9-timeline-time-zoomed id="zoomed"

                                   graph="{{graph}}"

                                   project="{{project}}"

                                   selection="{{selection}}"

                                   set-adjuster="{{setAdjuster}}"

                                   song="{{song}}"

                                   show="{{show}}"

                                   view-state="{{viewState}}">

      </light9-timeline-time-zoomed>

      <light9-adjusters-canvas id="adjustersCanvas" set-adjuster="{{setAdjuster}}">

      </light9-adjusters-canvas>

      <light9-cursor-canvas id="cursorCanvas" view-state="{{viewState}}"></light9-cursor-canvas>

    </div>

  </template>

</dom-module>

<!-- the whole section that pans/zooms in time (most of the editor) -->

<dom-module id="light9-timeline-time-zoomed">

  <template>

    <style>

     :host {

         display: flex;

         height: 100%;

         flex-direction: column;

     }

     #top {

     }

     #rows {

         height: 100%;

     }

     #rows.dragging {

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

     }

     light9-timeline-time-axis {

     }

     light9-timeline-audio {

         width: 100%;

         height: 100px;

     }

     light9-timeline-graph-row {

         flex-grow: 1;

     }

    </style>

    <div id="top">

      <light9-timeline-time-axis id="time" view-state="{{viewState}}"></light9-timeline-time-axis>

      <light9-timeline-audio id="audio"

                             graph="{{graph}}"

                             song="{{song}}"

                             show="{{show}}"

                             zoom="{{zoomFlattened}}">

      </light9-timeline-audio>

    </div>

    <div id="rows"></div>

  </template>

</dom-module>

     We compute X coords from the zoom setting.

     diagram-layer draws the note body. -->

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

  <template>

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

                                       effect="{{effect}}"

    >

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

  <template>

    <style>

     :host {

         pointer-events: none; /* restored on the individual adjusters */

     }

    </style>

  </template>

</dom-module>

<script src="/lib/async/dist/async.js"></script>

<script src="/lib/knockout/dist/knockout.js"></script>

<script src="/lib/shortcut/index.js"></script>

<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="drawing.js"></script>

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

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

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

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

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

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

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

    song: {type: String, notify: true}

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

    songTime: {type: Number, notify: true}

    songDuration: {type: Number, notify: true}

    songPlaying: {type: Boolean, notify: true}

    selection: {type: Object, notify: true}

  @getter_observers: [

    '_onSong(playerSong, followPlayerSong)',

    '_onGraph(graph)',

    '_onSongDuration(songDuration, viewState)',

    '_onSongTime(songTime, viewState)',

    '_onSetAdjuster(setAdjuster)',

  ]

  constructor: ->

    super()

    @viewState = new ViewState()

    window.viewState = @viewState

  ready: ->

    super.ready()

    ko.options.deferUpdates = true;

    @dia = @$.dia

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

    window.debug_zoomOrLayoutChangedCount = 0

    window.debug_adjUpdateDisplay = 0

    ko.computed(@zoomOrLayoutChanged.bind(@))

    @trackMouse()

    @bindKeys()

    @bindWheelZoom(@$.adjustersCanvas)

    setInterval(@updateDebugSummary.bind(@), 100)

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

    Polymer.RenderStatus.afterNextRender(this, @_onIronResize.bind(@))

    #zoomed = @$.zoomed 

    #setupDrop(@dia.shadowRoot.querySelector('svg'),

    #          zoomed.$.rows, @, zoomed.onDrop.bind(zoomed))

  _onIronResize: ->

    @viewState.setWidth(@offsetWidth)

    @viewState.audioY(@$.audio.offsetTop)

    @viewState.audioH(@$.audio.offsetHeight)

    if @$.zoomed?.$?.time?

      @viewState.zoomedTimeY(@$.zoomed.$.time.offsetTop)

      @viewState.zoomedTimeH(@$.zoomed.$.time.offsetHeight)

  _onSongTime: (t) ->

    @viewState.cursor.t(t)

  _onSongDuration: (d) ->

    d = 700 if d < 1 # bug is that asco isn't giving duration, but 0 makes the scale corrupt

    @viewState.zoomSpec.duration(d)

  _onSong: (s) ->

    @song = @playerSong if @followPlayerSong

  _onGraph: (graph) ->

    @project = new Project(graph)

  _onSetAdjuster: () ->

    @makeZoomAdjs()

  updateDebugSummary: ->

    elemCount = (tag) -> document.getElementsByTagName(tag).length

    @debug = "#{window.debug_zoomOrLayoutChangedCount} layout change,

     #{elemCount('light9-timeline-note')} notes,

     #{@selection.selected().length} selected

     #{elemCount('light9-timeline-graph-row')} rows,

     #{window.debug_adjsCount} adjuster items registered,

     #{window.debug_adjUpdateDisplay} adjuster updateDisplay calls,

    "

  zoomOrLayoutChanged: ->

    vs = @viewState

    dependOn = [vs.zoomSpec.t1(), vs.zoomSpec.t2(), vs.width()]

    @$.zoomed.gatherNotes() if @$.zoomed?.gatherNotes?

    # todo: these run a lot of work purely for a time change

    if @$.zoomed?.$?.audio?

      #@dia.setTimeAxis(vs.width(), @$.zoomed.$.audio.offsetTop, vs.zoomInX)

      @$.adjustersCanvas.updateAllCoords()

  trackMouse: ->

    # not just for show- we use the mouse pos sometimes

    for evName in ['mousemove', 'touchmove']

      @addEventListener evName, (ev) =>

        ev.preventDefault()

        t = @viewState.fullZoomX.invert(x)

    @setAdjuster('zoom-left', => new AdjustableFloatObservable({

      observable: @viewState.zoomSpec.t1,

      getTarget: () =>

        $V([@viewState.fullZoomX(@viewState.zoomSpec.t1()), yMid()])

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

      getValueForPos: valForPos

    }))

    @setAdjuster('zoom-right', => new AdjustableFloatObservable({

      observable: @viewState.zoomSpec.t2,

      getTarget: () =>

        $V([@viewState.fullZoomX(@viewState.zoomSpec.t2()), yMid()])

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

      getValueForPos: valForPos

    }))

    panObs = ko.pureComputed({

        read: () =>

          (@viewState.zoomSpec.t1() + @viewState.zoomSpec.t2()) / 2

        write: (value) =>

          zs = @viewState.zoomSpec

          span = zs.t2() - zs.t1()

          zs.t1(value - span / 2)

          zs.t2(value + span / 2)

      })

    @setAdjuster('zoom-pan', => new AdjustableFloatObservable({

      observable: panObs

      emptyBox: true

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

      # offscreen

      getTarget: () => $V([@viewState.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.

coffeeElementSetup(class TimeZoomed extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element)

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

  @getter_properties:

    graph: { type: Object, notify: true }

    project: { type: Object }

    selection: { type: Object, notify: true }

    song: { type: String, notify: true }

    viewState: { type: Object, notify: true }

  @getter_observers: [

  ]

  constructor: ->

    super()

    @stage = new PIXI.Container()

    @renderer = PIXI.autoDetectRenderer({

         backgroundColor: 0x606060,

    })

  ready: ->

    super.ready()

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

    @renderer.resize(@clientWidth, @clientHeight)

    @renderer.render(@stage)

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

  gatherNotes: ->

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

    noteNum = 0

      noteNum = noteNum + 1

    @renderer.render(@stage)

  onDrop: (effect, pos) ->

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

    return unless effect and effect.match(/^http/)

    # we could probably accept some initial overrides right on the

    # effect uri, maybe as query params

    if not @graph.contains(effect, RDF + 'type', U(':Effect'))

      if @graph.contains(effect, RDF + 'type', U(':LightSample'))

        effect = @project.makeEffect(effect)

      else

        log("drop #{effect} is not an effect")

        return

    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)

)

coffeeElementSetup(class TimeAxis extends Polymer.Element

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

  @getter_properties:

    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)

)

# Maintains a pixi object and some adjusters corresponding to a note

# in the graph.

class Note

    @adjusterIds = {} # id : true

  destroy: ->

    @isDetached = true

    @clearAdjusters()

  clearAdjusters: ->

    for i in Object.keys(@adjusterIds)

      @setAdjuster(i, null)

  draw: ->

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

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

        for p in screenPts.slice(1)

       @_updateAdjusters(screenPts, worldPts, curveWidthCalc, yForV, @song)

       @_updateInlineAttrs(screenPts)

  onUri: ->

    @graph.runHandler(@update.bind(@), "note updates #{@uri}")

  patchCouldAffectMe: (patch) ->

    if patch and patch.addQuads # sometimes patch is a polymer-sent value. @update is used as a listener too

      if patch.addQuads.length == patch.delQuads.length == 1

        add = patch.addQuads[0]

        del = patch.delQuads[0]

        if (add.predicate.equals(del.predicate) and del.predicate.equals(@graph.Uri(':time')) and add.subject.equals(del.subject))

          timeEditFor = add.subject

          if @worldPts and timeEditFor not in @pointUris

            return false

    return true

  update: (patch) ->

    # update our note DOM and SVG elements based on the graph

    if not @patchCouldAffectMe(patch)

      # as autodep still fires all handlers on all patches, we just

      # need any single dep to cause another callback. (without this,

      # we would no longer be registered at all)

      @graph.subjects(@uri, @uri, @uri)

      return

    if @isDetached?

      return

    @_updateDisplay()

  _updateAdjusters: (screenPts, worldPts, curveWidthCalc, yForV, ctx) ->

      @clearAdjusters()

    else

      @_makeOffsetAdjuster(yForV, curveWidthCalc, ctx)

      @_makeCurvePointAdjusters(yForV, worldPts, ctx)

  _updateInlineAttrs: (screenPts) ->

    if screenPts.length < 3

      rightX = leftX + 120

    w = 250

    h = 110

    wasHidden = @inlineRect?.display == 'none'

    @inlineRect = {

      left: leftX,

      top: @offsetTop + @offsetHeight - h - 5,

      width: w,

      height: h,

      display: if rightX - leftX > w then 'block' else 'none'

      }

    if wasHidden and @inlineRect.display != 'none'

      @async =>

        @querySelector('light9-timeline-note-inline-attrs')?.displayed()

  _makeCurvePointAdjusters: (yForV, worldPts, ctx) ->

    for pointNum in [0...worldPts.length]

      @_makePointAdjuster(yForV, worldPts, pointNum, ctx)

  _makePointAdjuster: (yForV, worldPts, pointNum, ctx) ->

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

    @adjusterIds[adjId] = true

    @setAdjuster adjId, =>

      adj = new AdjustableFloatObject({

        graph: @graph

        subj: worldPts[pointNum].uri

        pred: U(':time')

        ctx: ctx

        getTargetPosForValue: (value) =>

          $V([@viewState.zoomInX(value), yForV(worldPts[pointNum].e(2))])

        getValueForPos: (pos) =>

          origin = @graph.floatValue(@uri, U(':originTime'))

          (@viewState.zoomInX.invert(pos.e(1)) - origin)

        getSuggestedTargetOffset: () => @_suggestedOffset(worldPts[pointNum]),

      })

      adj._getValue = (=>

        # note: don't use originTime from the closure- we need the

        # graph dependency

        adj._currentValue + @graph.floatValue(@uri, U(':originTime'))

        )

      adj

  _makeOffsetAdjuster: (yForV, curveWidthCalc, ctx) ->

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

    @adjusterIds[adjId] = true

    @setAdjuster adjId, => 

      adj = new AdjustableFloatObject({

        graph: @graph

        subj: @uri

        pred: U(':originTime')

        ctx: ctx

        getDisplayValue: (v, dv) => "o=#{dv}"

        getTargetPosForValue: (value) =>

          # display bug: should be working from pt[0].t, not from origin

          $V([@viewState.zoomInX(value + curveWidthCalc() / 2), yForV(.5)])

        getValueForPos: (pos) =>

          @viewState.zoomInX.invert(pos.e(1)) - curveWidthCalc() / 2

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

      })

      adj

  _makeFadeAdjuster: (yForV, ctx, adjId, i0, i1, offset) ->

    @adjusterIds[adjId] = true

    @setAdjuster adjId, => new AdjustableFade(yForV, i0, i1, @, offset, ctx)

  _suggestedOffset: (pt) ->

    if pt.e(2) > .5

      $V([0, 30])

    else

      $V([0, -30])

  _addNoteListeners: (elem, uri) ->

    elem.addEventListener 'mouseenter', =>

      @selection.hover(uri)

    elem.addEventListener 'mousedown', (ev) =>

      sel = @selection.selected()

      if ev.getModifierState('Control')

        if uri in sel

          sel = _.without(sel, uri)

        else

          sel.push(uri)

      else

        sel = [uri]

      @selection.selected(sel)

    elem.addEventListener 'mouseleave', =>

      @selection.hover(null)

    if effect in ['http://light9.bigasterisk.com/effect/blacklight',

      'http://light9.bigasterisk.com/effect/strobewarm']

      hue = 0

      sat = 100

    else        

      hash = 0

      for i in [(effect.length-10)...effect.length]

        hash += effect.charCodeAt(i)

      hue = (hash * 8) % 360

      sat = 40 + (hash % 20) # don't conceal colorscale too much

  _noteInDiagram: (uri) ->

  _updateNotePathClasses: (uri, elem) ->

    ko.computed =>

      return if not @_noteInDiagram(uri)

      classes = 'light9-timeline-diagram-layer ' + (if @selection.hover() == uri then 'hover' else '') + ' '  + (if uri in @selection.selected() then 'selected' else '')

      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;

class window.ViewState

  constructor: () ->

    # caller updates all these observables

    @zoomSpec =

      duration: ko.observable(100) # current song duration

      t1: ko.observable(0)

      t2: ko.observable(100)

    @cursor =

      t: ko.observable(20) # songTime

    @mouse =

      pos: ko.observable($V([0,0]))

    @width = ko.observable(500)

    @audioY = ko.observable(0)

    @audioH = ko.observable(0)

    @zoomedTimeY = ko.observable(0)

    @zoomedTimeH = ko.observable(0)

    @fullZoomX = d3.scaleLinear()

    @zoomInX = d3.scaleLinear()

    @zoomAnimSec = .1

    ko.computed(@maintainZoomLimitsAndScales.bind(@))    

  setWidth: (w) ->

    @width(w)

    @maintainZoomLimitsAndScales() # before other handlers run

  maintainZoomLimitsAndScales: () ->

    log('maintainZoomLimitsAndScales')

    # not for cursor updates

    if @zoomSpec.t1() < 0

      @zoomSpec.t1(0)

    if @zoomSpec.duration() and @zoomSpec.t2() > @zoomSpec.duration()

      @zoomSpec.t2(@zoomSpec.duration())

    @fullZoomX.domain([0, @zoomSpec.duration()])

    @fullZoomX.range([0, @width()])

    @zoomInX.domain([@zoomSpec.t1(), @zoomSpec.t2()])

    @zoomInX.range([0, @width()])

  latestMouseTime: ->

    @zoomInX.invert(@mouse.pos().e(1))

  onMouseWheel: (deltaY) ->

    zs = @zoomSpec

    center = @latestMouseTime()

    left = center - zs.t1()

    right = zs.t2() - center

    scale = Math.pow(1.005, deltaY)

    zs.t1(center - left * scale)

    zs.t2(center + right * scale)

    log('view to', ko.toJSON(@))

  frameCursor: ->

    zs = @zoomSpec

    visSeconds = zs.t2() - zs.t1()

    margin = visSeconds * .4

    # buggy: really needs t1/t2 to limit their ranges

    if @cursor.t() < zs.t1() or @cursor.t() > zs.t2() - visSeconds * .6

{

  "name": "light9",

  "version": "1.0.0",

  "repository": "...",

  "license": "MIT",

  "description": "Mini instructions:",

  "main": "index.js",

  "directories": {

    "test": "test"

  },

  "dependencies": {

    "@webcomponents/shadycss": "^1.1.3",

    "@webcomponents/webcomponentsjs": "^1.2.0",

    "bower": "^1.8.4",