Changeset - fbe417cb765c
Parent rev.
Child rev.
[Not reviewed]
default
0 2 0
drewp@bigasterisk.com - 7 years ago 2018-05-10 07:12:39
drewp@bigasterisk.com
fix or workaround js errors on timeline. view zooming broken. adjusters not drawing
Ignore-this: f3d990bc9e312efb3625ac439d89c561
2 files changed with 48 insertions and 33 deletions:
light9/web/timeline/adjusters.coffee
7
2
light9/web/timeline/timeline.coffee
41
31
0 comments (0 inline, 0 general)
light9/web/timeline/adjusters.coffee
➞
Show inline comments
 
@@ -49,13 +49,14 @@ class AdjustersCanvas extends Polymer.El
 
        delete @adjs[adjId]
 
      else
 
        adj = makeAdjustable()
 
        @adjs[adjId] = adj
 
        adj.id = adjId
 

			




	
	
	
		
 
    @debounce('adj redraw', @redraw.bind(@))

			




	
	
	
		
 
    #@debounce('adj redraw', @redraw.bind(@))

			




	
	
	
		
 
    setTimeout((() => @redraw()), 2)

			




	
	
	
		
 

			




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

			




	
	
	
		
 

			




	
	
	
		
 
  updateAllCoords: ->

			




	
	
	
		
 
    @redraw()

			




	
	
	
		
 

			




	
	
		
 
@@ -68,15 +69,17 @@ class AdjustersCanvas extends Polymer.El

			




	
	
	
		
 
  resizeUpdate: (ev) ->

			




	
	
	
		
 
    @$.canvas.width = ev.target.offsetWidth

			




	
	
	
		
 
    @$.canvas.height = ev.target.offsetHeight

			




	
	
	
		
 
    @redraw()

			




	
	
	
		
 

			




	
	
	
		
 
  redraw: (adjs) ->

			




	
	
	
		
 
    @debounce('redraw', @_throttledRedraw.bind(@))

			




	
	
	
		
 
    @_throttledRedraw(adjs)

			




	
	
	
		
 
    #@debounce('redraw', @_throttledRedraw.bind(@))

			




	
	
	
		
 

			




	
	
	
		
 
  _throttledRedraw: () ->

			




	
	
	
		
 
    return unless @ctx?

			




	
	
	
		
 
    console.time('adjs redraw')

			




	
	
	
		
 
    @_layoutCenters()

			




	
	
	
		
 
    

			




	
	
	
		
 
    @ctx.clearRect(0, 0, @$.canvas.width, @$.canvas.height)

			




	
	
	
		
 

			




	
	
	
		
 
    for adjId, adj of @adjs

			




	
	
		
 
@@ -152,6 +155,8 @@ class AdjustersCanvas extends Polymer.El

			




	
	
	
		
 

			




	
	
	
		
 
    # 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

			




	
	
	
		
 

			




	
	
	
		
 
customElements.define(AdjustersCanvas.is, AdjustersCanvas)

			




	
	
		
 
\ No newline at end of file

			




        

    


    
    

    

        

                

                    light9/web/timeline/timeline.coffee
                

                

                  
                      
                        

                      ➞

                      
                        
                  

                  
                      
                  
                      
                  
                      
                  
                      
                  
                  
                

                

                    Show inline comments
                    
                

        

        

            



	
	
		
 
@@ -115,26 +115,19 @@ class TimelineEditor extends Polymer.Ele

			




	
	
	
		
 
  @listeners:

			




	
	
	
		
 
    'iron-resize': '_onIronResize'

			




	
	
	
		
 
  @observers: [

			




	
	
	
		
 
    'setSong(playerSong, followPlayerSong)',

			




	
	
	
		
 
    'onGraph(graph)',

			




	
	
	
		
 
    ]

			




	
	
	
		
 
  _onIronResize: ->

			




	
	
	
		
 
    @width(@offsetWidth)

			




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

			




	
	
	
		
 
  setSong: (s) ->

			




	
	
	
		
 
    @song = @playerSong if @followPlayerSong

			




	
	
	
		
 
  onGraph: (graph) ->

			




	
	
	
		
 
    @project = new Project(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 =

			




	
	
		
 
@@ -143,50 +136,66 @@ class TimelineEditor extends Polymer.Ele

			




	
	
	
		
 
        t1: ko.observable(0) # need validation to stay in bounds and not go too close

			




	
	
	
		
 
        t2: ko.observable(100)

			




	
	
	
		
 
      cursor:

			




	
	
	
		
 
        t: ko.observable(20)

			




	
	
	
		
 
      mouse:

			




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

			




	
	
	
		
 
    window.viewState = @viewState

			




	
	
	
		
 
    @fullZoomX = d3.scaleLinear()

			




	
	
	
		
 
    @zoomInX = d3.scaleLinear()

			




	
	
	
		
 
    @setAdjuster = (adjId, makeAdjustable) =>

			




	
	
	
		
 
      @$.adjustersCanvas.setAdjuster(adjId, makeAdjustable)

			




	
	
	
		
 
      ac = @$.adjustersCanvas

			




	
	
	
		
 
      setTimeout((()=>ac.setAdjuster(adjId, makeAdjustable)),10)

			




	
	
	
		
 

			




	
	
	
		
 
    setTimeout =>

			




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

			




	
	
	
		
 
      ko.computed(@songTimeChanged.bind(@))

			




	
	
	
		
 

			




	
	
	
		
 
      @trackMouse()

			




	
	
	
		
 
      @bindKeys()

			




	
	
	
		
 
      @bindWheelZoom(@dia)

			




	
	
	
		
 
      setTimeout => # depends on child node being ready

			




	
	
	
		
 
          @forwardMouseEventsToAdjustersCanvas()

			




	
	
	
		
 
        , 400

			




	
	
	
		
 

			




	
	
	
		
 
      @makeZoomAdjs()

			




	
	
	
		
 

			




	
	
	
		
 
      zoomed = @$.zoomed

			




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

			




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

			




	
	
	
		
 

			




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

			




	
	
	
		
 
    , 500

			




	
	
	
		
 

			




	
	
	
		
 
    #if anchor == loadtest

			




	
	
	
		
 
    #  add note and delete it repeatedly

			




	
	
	
		
 
    #  disconnect the graph, make many notes, drag a point over many steps, measure lag somewhere

			




	
	
	
		
 

			




	
	
	
		
 
  _onIronResize: ->

			




	
	
	
		
 
    @width(@offsetWidth)

			




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

			




	
	
	
		
 
    

			




	
	
	
		
 
  setSong: (s) ->

			




	
	
	
		
 
    @song = @playerSong if @followPlayerSong

			




	
	
	
		
 
  onGraph: (graph) ->

			




	
	
	
		
 
    @project = new Project(graph)

			




	
	
	
		
 

			




	
	
	
		
 
  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,

			




	
	
	
		
 
    "

			




	
	
	
		
 
    

			




	
	
	
		
 
  attached: ->

			




	
	
	
		
 
    super()

			




	
	
	
		
 
    @dia = @$.dia

			




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

			




	
	
	
		
 
    ko.computed(@songTimeChanged.bind(@))

			




	
	
	
		
 

			




	
	
	
		
 
    @trackMouse()

			




	
	
	
		
 
    @bindKeys()

			




	
	
	
		
 
    @bindWheelZoom(@dia)

			




	
	
	
		
 
    @forwardMouseEventsToAdjustersCanvas()

			




	
	
	
		
 

			




	
	
	
		
 
    @makeZoomAdjs()

			




	
	
	
		
 

			




	
	
	
		
 
    zoomed = @$.zoomed

			




	
	
	
		
 
    setupDrop(@$.dia.querySelector('svg'), zoomed.$.rows, @, zoomed.onDrop.bind(zoomed))

			




	
	
	
		
 

			




	
	
	
		
 

			




	
	
	
		
 
  zoomOrLayoutChanged: ->

			




	
	
	
		
 
    log('zoomOrLayoutChanged')

			




	
	
	
		
 
    # not for cursor updates

			




	
	
	
		
 

			




	
	
	
		
 
    vs = @viewState

			




	
	
	
		
 
    

			




	
	
		
 
@@ -203,20 +212,22 @@ class TimelineEditor extends Polymer.Ele

			




	
	
	
		
 
    zoomInX = d3.scaleLinear()

			




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

			




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

			




	
	
	
		
 
    @zoomInX = zoomInX

			




	
	
	
		
 

			




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

			




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

			




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

			




	
	
	
		
 
    @$.adjustersCanvas.updateAllCoords()

			




	
	
	
		
 

			




	
	
	
		
 
    # cursor needs update when layout changes, but I don't want

			




	
	
	
		
 
    # zoom/layout to depend on the playback time

			




	
	
	
		
 
    setTimeout(@songTimeChanged.bind(@), 1)

			




	
	
	
		
 

			




	
	
	
		
 
  songTimeChanged: ->

			




	
	
	
		
 
    return unless @$.zoomed?.$?.time?

			




	
	
	
		
 
    @$.cursorCanvas.setCursor(@$.audio.offsetTop, @$.audio.offsetHeight,

			




	
	
	
		
 
                              @$.zoomed.$.time.offsetTop,

			




	
	
	
		
 
                              @$.zoomed.$.time.offsetHeight,

			




	
	
	
		
 
                              @fullZoomX, @zoomInX, @viewState.cursor)

			




	
	
	
		
 
    

			




	
	
	
		
 
  trackMouse: ->

			




	
	
		
 
@@ -254,12 +265,13 @@ class TimelineEditor extends Polymer.Ele

			




	
	
	
		
 
      left = center - zs.t1()

			




	
	
	
		
 
      right = zs.t2() - center

			




	
	
	
		
 
      scale = Math.pow(1.005, ev.deltaY)

			




	
	
	
		
 

			




	
	
	
		
 
      zs.t1(center - left * scale)

			




	
	
	
		
 
      zs.t2(center + right * scale)

			




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

			




	
	
	
		
 

			




	
	
	
		
 
  forwardMouseEventsToAdjustersCanvas: ->

			




	
	
	
		
 
    ac = @$.adjustersCanvas

			




	
	
	
		
 
    @addEventListener('mousedown', ac.onDown.bind(ac))

			




	
	
	
		
 
    @addEventListener('mousemove', ac.onMove.bind(ac))

			




	
	
	
		
 
    @addEventListener('mouseup', ac.onUp.bind(ac))

			




	
	
		
 
@@ -407,24 +419,22 @@ class TimeZoomed extends Polymer.Element

			




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

			




	
	
	
		
 

			




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

			




	
	
	
		
 
      #should only make new ones

			




	
	
	
		
 
      # 

			




	
	
	
		
 
      child = new Note(@graph, @selection, @dia, uri, @setAdjuster, @song, @zoomInX)

			




	
	
	
		
 
      log('note ',uri)

			




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

			




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

			




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

			




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

			




	
	
	
		
 

			




	
	
	
		
 
          [@pointUris, @worldPts] = @project.getCurvePoints(curve, originTime)

			




	
	
	
		
 
          curveWidthCalc = () => @_curveWidth(@worldPts)

			




	
	
	
		
 

			




	
	
	
		
 
          h = 150 #@offsetHeight

			




	
	
	
		
 
          screenPts = ($V([@zoomInX(pt.e(1)), @offsetTop + (1 - pt.e(2)) * h]) for pt in @worldPts)

			




	
	
	
		
 

			




	
	
	
		
 
          graphics.beginFill(0xFF3300);

			




	
	
	
		
 
          graphics.lineStyle(4, 0xffd900, 1)

			




	
	
	
		
 

			




	
	
	
		
 
          graphics.moveTo(screenPts[0].e(1), screenPts[0].e(2))

			




	
	
	
		
 
          for p in screenPts.slice(1)

			




	
	
	
		
 
            graphics.lineTo(p.e(1), p.e(2))

			




        

    



    


    



    



      

      





    
    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