Changeset - b72198260bf0
Parent rev.
Child rev.
[Not reviewed]
default
0 2 0
Drew Perttula - 9 years ago 2016-06-12 10:01:24
drewp@bigasterisk.com
large fixes to timeline note&adjuster refreshes. seems ok now
Ignore-this: 985e3de87d1896c89f93701473a4b86
2 files changed with 143 insertions and 120 deletions:
light9/web/timeline/timeline-elements.html
3
9
light9/web/timeline/timeline.coffee
140
111
0 comments (0 inline, 0 general)
light9/web/timeline/timeline-elements.html
➞
Show inline comments
 
@@ -189,33 +189,25 @@ background: rgba(126, 52, 245, 0.0784313
 
  </template>
 
</dom-module>
 

			




	
	
	
		
 
<!-- one row of notes -->

			




	
	
	
		
 
<dom-module id="light9-timeline-graph-row">

			




	
	
	
		
 
  <template>

			




	
	
	
		
 
    <style>

			




	
	
	
		
 
     :host {

			




	
	
	
		
 
         border-top: 1px solid black;

			




	
	
	
		
 
         display: flex;

			




	
	
	
		
 
     }

			




	
	
	
		
 
    </style>

			




	
	
	
		
 
    <template is="dom-repeat" items="{{noteUris}}">

			




	
	
	
		
 
      <light9-timeline-note graph="{{graph}}"

			




	
	
	
		
 
                            dia="{{dia}}"

			




	
	
	
		
 
                            uri="{{item}}"

			




	
	
	
		
 
                            set-adjuster="{{setAdjuster}}"

			




	
	
	
		
 
                            song="{{song}}"

			




	
	
	
		
 
                            zoom-in-x="{{zoomInX}}">

			




	
	
	
		
 
      </light9-timeline-note>

			




	
	
	
		
 
    </template>

			




	
	
	
		
 
    <!-- light9-timeline-note repeated here -->

			




	
	
	
		
 
  </template>

			




	
	
	
		
 
</dom-module>

			




	
	
	
		
 

			




	
	
	
		
 
<!-- One trapezoid note shape in a row.

			




	
	
	
		
 
     This element has the right Y coords.

			




	
	
	
		
 
     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;

			




	
	
		
 
@@ -233,24 +225,25 @@ background: rgba(126, 52, 245, 0.0784313

			




	
	
	
		
 
     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>

			




	
	
	
		
 
    <div id="all">

			




	
	
	
		
 
      <!-- light9-timeline-adjuster repeated here  -->

			




	
	
	
		
 
    </div>

			




	
	
	
		
 
  </template>

			




	
	
	
		
 
</dom-module>

			




	
	
	
		
 

			




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

			




	
	
	
		
 
   -->

			




	
	
		
 
@@ -322,14 +315,15 @@ background: rgba(126, 52, 245, 0.0784313

			




	
	
	
		
 

			




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

			




	
	
	
		
 
<script src="/lib/N3.js-pull61/browser/n3-browser.js"></script>

			




	
	
	
		
 
<!-- master version -->

			




	
	
	
		
 
<xxscript src="/lib/N3.js/browser/n3-browser.js"></script>

			




	
	
	
		
 
  

			




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

			




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

			




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

			




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

			




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

			




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

			




        

    


    
    

    

        

                

                    light9/web/timeline/timeline.coffee
                

                

                  
                      
                        

                      ➞

                      
                        
                  

                  
                      
                  
                      
                  
                      
                  
                      
                  
                  
                

                

                    Show inline comments
                    
                

        

        

            



	
	
	
		
 
log = console.log

			




	
	
	
		
 
RDF = 'http://www.w3.org/1999/02/22-rdf-syntax-ns#'

			




	
	
	
		
 

			




	
	
	
		
 

			




	
	
	
		
 
# polymer dom-repeat is happy to shuffle children by swapping their

			




	
	
	
		
 
# attribute values, and it's hard to correctly setup/teardown your

			




	
	
	
		
 
# side effects if your attributes are changing before the detach

			




	
	
	
		
 
# call. This alternative to dom-repeat never reassigns

			




	
	
	
		
 
# attributes. But, it can't set up property bindings.

			




	
	
	
		
 
updateChildren = (parent, newUris, makeChild) ->

			




	
	
	
		
 
  childUris = []

			




	
	
	
		
 
  childByUri = {}

			




	
	
	
		
 
  for e in parent.children

			




	
	
	
		
 
    childUris.push(e.uri)

			




	
	
	
		
 
    childByUri[e.uri] = e

			




	
	
	
		
 

			




	
	
	
		
 
  for uri in _.difference(childUris, newUris)

			




	
	
	
		
 
    childByUri[uri].remove()

			




	
	
	
		
 
  for uri in _.difference(newUris, childUris)

			




	
	
	
		
 
    parent.appendChild(makeChild(uri))

			




	
	
	
		
 

			




	
	
	
		
 

			




	
	
	
		
 
Polymer

			




	
	
	
		
 
  is: 'light9-timeline-editor'

			




	
	
	
		
 
  behaviors: [ Polymer.IronResizableBehavior ]

			




	
	
	
		
 
  properties:

			




	
	
	
		
 
    viewState: { type: Object }

			




	
	
	
		
 
    debug: {type: String}

			




	
	
	
		
 
    graph: {type: Object, notify: true}

			




	
	
	
		
 
    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/dance2016'}

			




	
	
		
 
@@ -284,199 +303,203 @@ Polymer

			




	
	
	
		
 

			




	
	
	
		
 
    patch = {

			




	
	
	
		
 
      delQuads: []

			




	
	
	
		
 
      addQuads: curveQuads.concat(pointQuads)

			




	
	
	
		
 
      }

			




	
	
	
		
 
    @graph.applyAndSendPatch(patch)

			




	
	
	
		
 

			




	
	
	
		
 
Polymer

			




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

			




	
	
	
		
 
  # for now since it's just one line calling dia,

			




	
	
	
		
 
  # light9-timeline-editor does our drawing work.

			




	
	
	
		
 

			




	
	
	
		
 

			




	
	
	
		
 
Polymer

			




	
	
	
		
 
  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 }

			




	
	
	
		
 
  observers: [

			




	
	
	
		
 
    'onGraph(graph)'

			




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

			




	
	
	
		
 
    'update(song)'

			




	
	
	
		
 
    'onZoom(zoomInX)'

			




	
	
	
		
 
    ]

			




	
	
	
		
 
  onGraph: ->

			




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

			




	
	
	
		
 
  update: ->

			




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

			




	
	
	
		
 
    log("row #{@rowIndex} updating")

			




	
	
	
		
 
    @noteUris = []

			




	
	
	
		
 
    for note in @graph.objects(@song, U(':note'))

			




	
	
	
		
 
      @push('noteUris', note)

			




	
	
	
		
 

			




	
	
	
		
 
    notesForThisRow = @graph.objects(@song, U(':note'))

			




	
	
	
		
 

			




	
	
	
		
 
    updateChildren @, notesForThisRow, (newUri) =>

			




	
	
	
		
 
      child = document.createElement('light9-timeline-note')

			




	
	
	
		
 
      child.graph = @graph

			




	
	
	
		
 
      child.dia = @dia

			




	
	
	
		
 
      child.uri = newUri

			




	
	
	
		
 
      child.setAdjuster = @setAdjuster

			




	
	
	
		
 
      child.song = @song # could change, but all the notes will be rebuilt

			




	
	
	
		
 
      child.zoomInX = @zoomInX # missing binding; see onZoom

			




	
	
	
		
 
      return child      

			




	
	
	
		
 

			




	
	
	
		
 
  onZoom: ->

			




	
	
	
		
 
    log('row onzoom')

			




	
	
	
		
 
    for e in @children

			




	
	
	
		
 
      e.zoomInX = @zoomInX

			




	
	
	
		
 

			




	
	
	
		
 

			




	
	
	
		
 
getCurvePoints = (graph, curve, xOffset) ->

			




	
	
	
		
 
  worldPts = []

			




	
	
	
		
 
  for pt in graph.objects(curve, graph.Uri(':point'))

			




	
	
	
		
 
    v = $V([xOffset + graph.floatValue(pt, graph.Uri(':time')),

			




	
	
	
		
 
            graph.floatValue(pt, graph.Uri(':value'))])

			




	
	
	
		
 
    v.uri = pt

			




	
	
	
		
 
    worldPts.push(v)

			




	
	
	
		
 
  worldPts.sort((a,b) -> a.e(1) > b.e(1))

			




	
	
	
		
 
  return worldPts

			




	
	
	
		
 

			




	
	
	
		
 
Polymer

			




	
	
	
		
 
  is: 'light9-timeline-note'

			




	
	
	
		
 
  behaviors: [ Polymer.IronResizableBehavior ]

			




	
	
	
		
 
  listeners: 'iron-resize': 'update'

			




	
	
	
		
 
  properties:

			




	
	
	
		
 
    graph: { type: Object, notify: true }

			




	
	
	
		
 
    dia: { type: Object, notify: true }

			




	
	
	
		
 
    uri: { type: String, notify: true }

			




	
	
	
		
 
    zoomInX: { type: Object, notify: true }

			




	
	
	
		
 
    setAdjuster: {type: Function, notify: true}

			




	
	
	
		
 
  observers: [

			




	
	
	
		
 
    'onUri(graph, dia, uri)'

			




	
	
	
		
 
    'onUri(graph, dia, uri, zoomInX, setAdjuster)'

			




	
	
	
		
 
    'update(graph, dia, uri, zoomInX, setAdjuster)'

			




	
	
	
		
 
    ]

			




	
	
	
		
 
  ready: ->

			




	
	
	
		
 
    @adjusterIds = []

			




	
	
	
		
 
    @adjusterIds = {}

			




	
	
	
		
 
  detached: ->

			




	
	
	
		
 
    @dia.clearElem(@uri)

			




	
	
	
		
 
    for i in @adjusterIds

			




	
	
	
		
 
    log('detatch', @uri)

			




	
	
	
		
 
    @dia.clearElem(@uri, ['/area', '/label'])

			




	
	
	
		
 
    @isDetached = true

			




	
	
	
		
 
    for i in Object.keys(@adjusterIds)

			




	
	
	
		
 
      @setAdjuster(i, null)

			




	
	
	
		
 

			




	
	
	
		
 
  onUri: ->

			




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

			




	
	
	
		
 
    

			




	
	
	
		
 
  update: ->

			




	
	
	
		
 
    if @isDetached?

			




	
	
	
		
 
      log('skipping update', @uri)

			




	
	
	
		
 
      return 

			




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

			




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

			




	
	
	
		
 
    try

			




	
	
	
		
 
      worldPts = [] # (song time, value)

			




	
	
	
		
 

			




	
	
	
		
 
      yForV = (v) => @offsetTop + (1 - v) * @offsetHeight

			




	
	
	
		
 
    worldPts = [] # (song time, value)

			




	
	
	
		
 

			




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

			




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

			




	
	
	
		
 
        if @graph.uriValue(curve, U(':attr')) == U(':strength')

			




	
	
	
		
 
          worldPts = getCurvePoints(@graph, curve, originTime)

			




	
	
	
		
 
    yForV = (v) => @offsetTop + (1 - v) * @offsetHeight

			




	
	
	
		
 

			




	
	
	
		
 
          curveWidth = =>

			




	
	
	
		
 
            tMin = @graph.floatValue(worldPts[0].uri, U(':time'))

			




	
	
	
		
 
            tMax = @graph.floatValue(worldPts[3].uri, U(':time'))

			




	
	
	
		
 
            tMax - tMin            

			




	
	
	
		
 
          

			




	
	
	
		
 
          @setAdjuster(@uri+'/offset', => new AdjustableFloatObject({

			




	
	
	
		
 
            graph: @graph

			




	
	
	
		
 
            subj: @uri

			




	
	
	
		
 
            pred: @graph.Uri(':originTime')

			




	
	
	
		
 
            ctx: @graph.Uri(@song)

			




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

			




	
	
	
		
 
            getTargetPosForValue: (value) =>

			




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

			




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

			




	
	
	
		
 
            getValueForPos: (pos) =>

			




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

			




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

			




	
	
	
		
 
          }))

			




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

			




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

			




	
	
	
		
 
      if @graph.uriValue(curve, U(':attr')) == U(':strength')

			




	
	
	
		
 
        worldPts = getCurvePoints(@graph, curve, originTime)

			




	
	
	
		
 

			




	
	
	
		
 
        curveWidth = =>

			




	
	
	
		
 
          tMin = @graph.floatValue(worldPts[0].uri, U(':time'))

			




	
	
	
		
 
          tMax = @graph.floatValue(worldPts[3].uri, U(':time'))

			




	
	
	
		
 
          tMax - tMin            

			




	
	
	
		
 

			




	
	
	
		
 
          for pointNum in [0, 1, 2, 3]

			




	
	
	
		
 
            @setAdjuster(@uri+'/p'+pointNum, =>

			




	
	
	
		
 
                adj = new AdjustableFloatObject({

			




	
	
	
		
 
                  graph: @graph

			




	
	
	
		
 
                  subj: worldPts[pointNum].uri

			




	
	
	
		
 
                  pred: @graph.Uri(':time')

			




	
	
	
		
 
                  ctx: @graph.Uri(@song)

			




	
	
	
		
 
                  getTargetPosForValue: (value) => $V([@zoomInX(value), yForV(0)])

			




	
	
	
		
 
                  getValueForPos: (pos) =>

			




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

			




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

			




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

			




	
	
	
		
 
                })

			




	
	
	
		
 
                adj._getValue = (=>

			




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

			




	
	
	
		
 
                  # graph dependency

			




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

			




	
	
	
		
 
                  )

			




	
	
	
		
 
                log('note made this point adj', adj)

			




	
	
	
		
 
                adj

			




	
	
	
		
 
              )

			




	
	
	
		
 
            

			




	
	
	
		
 
      screenPos = (pt) =>

			




	
	
	
		
 
        $V([@zoomInX(pt.e(1)), @offsetTop + (1 - pt.e(2)) * @offsetHeight])

			




	
	
	
		
 
        @adjusterIds[@uri+'/offset'] = true

			




	
	
	
		
 
        @setAdjuster(@uri+'/offset', => new AdjustableFloatObject({

			




	
	
	
		
 
          graph: @graph

			




	
	
	
		
 
          subj: @uri

			




	
	
	
		
 
          pred: @graph.Uri(':originTime')

			




	
	
	
		
 
          ctx: @graph.Uri(@song)

			




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

			




	
	
	
		
 
          getTargetPosForValue: (value) =>

			




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

			




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

			




	
	
	
		
 
          getValueForPos: (pos) =>

			




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

			




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

			




	
	
	
		
 
        }))

			




	
	
	
		
 

			




	
	
	
		
 
      label = @graph.uriValue(@uri, U(':effectClass')).replace(/.*\//, '')

			




	
	
	
		
 
      @dia.setNote(@uri, (screenPos(pt) for pt in worldPts), label)

			




	
	
	
		
 
        for pointNum in [0, 1, 2, 3]

			




	
	
	
		
 
          @adjusterIds[@uri+'/p'+pointNum] = true

			




	
	
	
		
 
          @setAdjuster(@uri+'/p'+pointNum, =>

			




	
	
	
		
 
              adj = new AdjustableFloatObject({

			




	
	
	
		
 
                graph: @graph

			




	
	
	
		
 
                subj: worldPts[pointNum].uri

			




	
	
	
		
 
                pred: @graph.Uri(':time')

			




	
	
	
		
 
                ctx: @graph.Uri(@song)

			




	
	
	
		
 
                getTargetPosForValue: (value) => $V([@zoomInX(value), yForV(0)])

			




	
	
	
		
 
                getValueForPos: (pos) =>

			




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

			




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

			




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

			




	
	
	
		
 
              })

			




	
	
	
		
 
              adj._getValue = (=>

			




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

			




	
	
	
		
 
                # graph dependency

			




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

			




	
	
	
		
 
                )

			




	
	
	
		
 
              adj

			




	
	
	
		
 
            )

			




	
	
	
		
 

			




	
	
	
		
 
    catch e

			




	
	
	
		
 
      log("during resize of #{@uri}: #{@e}")

			




	
	
	
		
 
    screenPos = (pt) =>

			




	
	
	
		
 
      $V([@zoomInX(pt.e(1)), @offsetTop + (1 - pt.e(2)) * @offsetHeight])

			




	
	
	
		
 

			




	
	
	
		
 
    label = @graph.uriValue(@uri, U(':effectClass')).replace(/.*\//, '')

			




	
	
	
		
 
    @dia.setNote(@uri, (screenPos(pt) for pt in worldPts), label)

			




	
	
	
		
 

			




	
	
	
		
 
Polymer

			




	
	
	
		
 
  is: "light9-timeline-adjusters"

			




	
	
	
		
 
  properties:

			




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

			




	
	
	
		
 
    dia: { type: Object }

			




	
	
	
		
 

			




	
	
	
		
 
  ready: ->

			




	
	
	
		
 
    @adjs = {}

			




	
	
	
		
 
    

			




	
	
	
		
 
  setAdjuster: (adjId, makeAdjustable) ->

			




	
	
	
		
 
    # callers register/unregister the Adjustables they want us to make

			




	
	
	
		
 
    # adjuster elements for. Caller invents adjId.  makeAdjustable is

			




	
	
	
		
 
    # a function returning the Adjustable or it is null to clear any

			




	
	
	
		
 
    # adjusters with this id.

			




	
	
	
		
 

			




	
	
	
		
 
    

			




	
	
	
		
 
    

			




	
	
	
		
 
    if not @adjs[adjId] or not makeAdjustable?

			




	
	
	
		
 
      if not makeAdjustable?

			




	
	
	
		
 
        delete @adjs[adjId]

			




	
	
	
		
 
      else

			




	
	
	
		
 
        adj = makeAdjustable()

			




	
	
	
		
 
        @adjs[adjId] = adj

			




	
	
	
		
 
        adj.id = adjId

			




	
	
	
		
 
      @debounce('adjsChanged', @adjsChanged.bind(@), 1)

			




	
	
	
		
 
    else

			




	
	
	
		
 
      for e in @$.all.children

			




	
	
	
		
 
        if e.id == adjId

			




	
	
	
		
 
          e.updateDisplay()

			




	
	
	
		
 

			




	
	
	
		
 
    window.debug_adjsCount = Object.keys(@adjs).length

			




	
	
	
		
 
    

			




	
	
	
		
 
  adjsChanged: ->

			




	
	
	
		
 

			




	
	
	
		
 
    added = removed = 0

			




	
	
	
		
 
    newIds = Object.keys(@adjs)

			




	
	
	
		
 

			




	
	
	
		
 
    parent = @$.all

			




	
	
	
		
 
    haveIds = []

			




	
	
	
		
 
    for c in parent.children

			




	
	
	
		
 
      id = c.getAttribute('id')

			




	
	
	
		
 
      if newIds.indexOf(id) == -1

			




	
	
	
		
 
        c.remove()

			




	
	
	
		
 
        removed++

			




	
	
	
		
 
        # ...?

			




	
	
	
		
 
      else

			




	
	
	
		
 
        haveIds.push(id)

			




	
	
	
		
 

			




	
	
	
		
 
    for id, adj of @adjs

			




	
	
	
		
 
      if haveIds.indexOf(id) == -1

			




	
	
	
		
 
        log('need new one for', id)

			




	
	
	
		
 
        child = document.createElement('light9-timeline-adjuster')

			




	
	
	
		
 
        child.dia = @dia

			




	
	
	
		
 
        child.graph = @graph

			




	
	
	
		
 
        child.setAttribute('id', id)

			




	
	
	
		
 
        child.adj = adj # set this  last

			




	
	
	
		
 
        parent.appendChild(child)

			




	
	
	
		
 
        added++

			




	
	
	
		
 
    log("adjsChanged removed #{removed} added #{added}") if added or removed

			




	
	
	
		
 
    updateChildren @$.all, Object.keys(@adjs), (newUri) =>

			




	
	
	
		
 
      child = document.createElement('light9-timeline-adjuster')

			




	
	
	
		
 
      child.dia = @dia

			




	
	
	
		
 
      child.graph = @graph

			




	
	
	
		
 
      child.uri = newUri

			




	
	
	
		
 
      child.id = newUri

			




	
	
	
		
 
      child.adj = @adjs[newUri]

			




	
	
	
		
 
      return child

			




	
	
	
		
 
    @updateAllCoords()

			




	
	
	
		
 

			




	
	
	
		
 
  layoutCenters: ->

			




	
	
	
		
 
    # push Adjustable centers around to avoid overlaps

			




	
	
	
		
 
    qt = d3.quadtree()

			




	
	
	
		
 
    qt.extent([[0,0], [8000,8000]])

			




	
	
	
		
 
    for _, adj of @adjs

			




	
	
	
		
 
      desired = adj.getSuggestedCenter()

			




	
	
	
		
 
      output = desired

			




	
	
	
		
 
      for tries in [0...2]

			




	
	
	
		
 
        nearest = qt.find(output.e(1), output.e(2))

			




	
	
	
		
 
        if nearest

			




	
	
	
		
 
          dist = output.distanceFrom(nearest)

			




	
	
		
 
@@ -495,61 +518,67 @@ Polymer

			




	
	
	
		
 

			




	
	
	
		
 
  updateAllCoords: ->

			




	
	
	
		
 
    @layoutCenters()

			




	
	
	
		
 
    

			




	
	
	
		
 
    for elem in @querySelectorAll('light9-timeline-adjuster')

			




	
	
	
		
 
      elem.updateDisplay()

			




	
	
	
		
 
    

			




	
	
	
		
 

			




	
	
	
		
 
Polymer

			




	
	
	
		
 
  is: 'light9-timeline-adjuster'

			




	
	
	
		
 
  properties:

			




	
	
	
		
 
    graph: { type: Object, notify: true }

			




	
	
	
		
 
    adj: { type: Object, notify: true, observer: 'onAdj' }

			




	
	
	
		
 
    target: { type: Object, notify: true }

			




	
	
	
		
 
    adj: { type: Object, notify: true }

			




	
	
	
		
 
    id: { type: String, notify: true }

			




	
	
	
		
 
    

			




	
	
	
		
 
    displayValue: { type: String }

			




	
	
	
		
 
    centerStyle: { type: Object }

			




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

			




	
	
	
		
 

			




	
	
	
		
 
  onAdj: (adj) ->

			




	
	
	
		
 
  observer: [

			




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

			




	
	
	
		
 
    ]

			




	
	
	
		
 
  onAdj:  ->

			




	
	
	
		
 
    log('onAdj', @id)

			




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

			




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

			




	
	
	
		
 

			




	
	
	
		
 
  updateDisplay: () ->

			




	
	
	
		
 
    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)

			




	
	
	
		
 
    go = =>

			




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

			




	
	
	
		
 
        

			




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

			




	
	
	
		
 
    @dia.clearElem(@adj.id + '/conn')

			




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

			




	
	
	
		
 

			




	
	
	
		
 

			




	
	
	
		
 
svgPathFromPoints = (pts) ->

			




	
	
	
		
 
  out = ''

			




	
	
	
		
 
  pts.forEach (p) ->

			




	
	
	
		
 
    p = p.elements if p.elements # for vec2

			




	
	
	
		
 
    if out.length == 0

			




	
	
	
		
 
      out = 'M '

			




	
	
	
		
 
    else

			




	
	
	
		
 
      out += 'L '

			




	
	
	
		
 
    out += '' + p[0] + ',' + p[1] + ' '

			




	
	
	
		
 
    return

			




	
	
		
 
@@ -573,42 +602,42 @@ Polymer

			




	
	
	
		
 
    elem.setAttribute('d', svgPathFromPoints([[pos.e(1), -9999], [pos.e(1), 9999]]))   

			




	
	
	
		
 

			




	
	
	
		
 
  getOrCreateElem: (uri, groupId, tag, attrs) ->

			




	
	
	
		
 
    elem = @elemById[uri]

			




	
	
	
		
 
    if !elem

			




	
	
	
		
 
      elem = @elemById[uri] = document.createElementNS("http://www.w3.org/2000/svg", tag)

			




	
	
	
		
 
      @$[groupId].appendChild(elem)

			




	
	
	
		
 
      elem.setAttribute('id', uri)

			




	
	
	
		
 
      for k,v of attrs

			




	
	
	
		
 
        elem.setAttribute(k, v)

			




	
	
	
		
 
    return elem

			




	
	
	
		
 

			




	
	
	
		
 
  clearElem: (uri) ->

			




	
	
	
		
 
    elem = @elemById[uri]

			




	
	
	
		
 
    if elem

			




	
	
	
		
 
      elem.remove()

			




	
	
	
		
 
      delete @elemById[uri]

			




	
	
	
		
 
  clearElem: (uri, suffixes) -> # todo: caller shouldn't have to know suffixes!

			




	
	
	
		
 
    for suff in suffixes

			




	
	
	
		
 
      elem = @elemById[uri+suff]

			




	
	
	
		
 
      if elem

			




	
	
	
		
 
        elem.remove()

			




	
	
	
		
 
        delete @elemById[uri+suff]

			




	
	
	
		
 

			




	
	
	
		
 
  anyPointsInView: (pts) ->

			




	
	
	
		
 
    for pt in pts

			




	
	
	
		
 
      if pt.e(1) > -100 && pt.e(1) < 2500

			




	
	
	
		
 
        return true

			




	
	
	
		
 
    return false

			




	
	
	
		
 
    

			




	
	
	
		
 
  setNote: (uri, curvePts, effectLabel) ->

			




	
	
	
		
 
    areaId = uri + '/area'

			




	
	
	
		
 
    labelId = uri + '/label'

			




	
	
	
		
 
    if not @anyPointsInView(curvePts)

			




	
	
	
		
 
      @clearElem(areaId)

			




	
	
	
		
 
      @clearElem(labelId)

			




	
	
	
		
 
      @clearElem(uri, ['/area', '/label'])

			




	
	
	
		
 
      return

			




	
	
	
		
 
    elem = @getOrCreateElem(areaId, 'notes', 'path',

			




	
	
	
		
 
      {style:"fill:#53774b; stroke:#000000; stroke-width:1.5;"})

			




	
	
	
		
 
    elem.setAttribute('d', svgPathFromPoints(curvePts))

			




	
	
	
		
 

			




	
	
	
		
 
    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;

			




	
	
	
		
 

			




	
	
	
		
 
  setCursor: (y1, h1, y2, h2, fullZoomX, zoomInX, cursor) ->

			




	
	
	
		
 
    @cursorPath =

			




	
	
		
 
@@ -628,16 +657,16 @@ Polymer

			




	
	
	
		
 
      [xZoomedIn - 2, y2 + h2]

			




	
	
	
		
 
      [xZoomedOut - 1, y1 + h1]

			




	
	
	
		
 
      [xZoomedOut + 1, y1 + h1]

			




	
	
	
		
 
    ]) + ' Z'

			




	
	
	
		
 
    @cursorPath.bot.setAttribute 'd', svgPathFromPoints([

			




	
	
	
		
 
      [xZoomedIn, y2 + h2]

			




	
	
	
		
 
      [xZoomedIn, @offsetParent.offsetHeight]

			




	
	
	
		
 
    ])

			




	
	
	
		
 

			




	
	
	
		
 
  setAdjusterConnector: (uri, center, target) ->

			




	
	
	
		
 
    id = uri + '/adj'

			




	
	
	
		
 
    if not @anyPointsInView([center, target])

			




	
	
	
		
 
      @clearElem(uri)

			




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

			




        

    



    


    



    



      

      





    
    0 comments (0 inline, 0 general)
    





    


  

  







  


    




    








    
        Server instance: kallithea-749ff669b6-v9g5f-75
    
    
        This site is powered by
            Kallithea 0.7.0,
        which is
        © 2010–2021 by various authors & licensed under GPLv3.
            – Support