Changeset - 59be536746eb
[Not reviewed]
default
0 1 0
drewp@bigasterisk.com - 7 years ago 2018-06-02 05:52:33
drewp@bigasterisk.com
refactor: add BrickLayout object. no major changes yet
Ignore-this: 176e207524ddc729c4cfdf122beb2c99
1 file changed with 74 insertions and 35 deletions:
0 comments (0 inline, 0 general)
light9/web/timeline/timeline.coffee
Show inline comments
 
@@ -273,12 +273,30 @@ coffeeElementSetup(class TimelineEditor 
 
      getTarget: () => $V([@viewState.fullZoomX(panObs()), yMid()])
 
      getSuggestedTargetOffset: () => $V([0, 0])
 
      getValueForPos: valForPos
 
    }))
 
)
 

	
 
nr=0
 
class BrickLayout
 
  constructor: (@viewState, @numRows) ->
 
    @noteRow = {} # uristr: row, t0, t1
 
  addNote: (n) ->
 
    @noteRow[n.uri.value] = {row: nr%6, t0: 0, t1: 0}
 
    nr++
 
  setNoteSpan: (n, t0, t1) ->
 
    @noteRow[n.uri.value].t0 = t0
 
    @noteRow[n.uri.value].t1 = t1
 
  delNote: (n) ->
 
    delete @noteRow[n.uri.value]
 
  rowBottom: (row) -> @viewState.rowsY() + 20 + 150 * row + 140
 
  yForVFor: (n) ->
 
    row = @noteRow[n.uri.value].row
 
    rowBottom = @rowBottom(row)
 
    rowTop = rowBottom - 140
 
    (v) => rowBottom + (rowTop - rowBottom) * v      
 

	
 
# 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'
 
@@ -289,12 +307,13 @@ coffeeElementSetup(class TimeZoomed exte
 
    song: { type: String, notify: true }
 
    viewState: { type: Object, notify: true }
 
    inlineAttrConfigs: { type: Array, value: [] } # only for inlineattrs that should be displayed
 
  @getter_observers: [
 
    '_onGraph(graph, setAdjuster, song, viewState, project)',
 
    'onZoom(viewState)',
 
    '_onViewState(viewState)',
 
  ]
 
  constructor: ->
 
    super()
 
    @numRows = 6
 
    @noteByUriStr = new Map()
 
    @stage = new PIXI.Container()
 
@@ -334,12 +353,15 @@ coffeeElementSetup(class TimeZoomed exte
 
    @dirty()
 

	
 
  _onGraph: (graph, setAdjuster, song, viewState, project)->
 
    return unless @song # polymer will call again
 
    @graph.runHandler(@gatherNotes.bind(@), 'zoom notes')
 

	
 
  _onViewState: (viewState) ->
 
    @brickLayout = new BrickLayout(@viewState, @numRows)
 

	
 
  noteDirty: -> @dirty()
 
    
 
  onZoom: ->
 
    updateZoomFlattened = ->
 
      log('updateZoomFlattened')
 
      @zoomFlattened = ko.toJS(@viewState.zoomSpec)
 
@@ -349,18 +371,16 @@ coffeeElementSetup(class TimeZoomed exte
 
    U = (x) => @graph.Uri(x)
 
    return unless @song?
 
    songNotes = @graph.objects(U(@song), U(':note'))
 

	
 
    toRemove = new Set(@noteByUriStr.keys())
 
    
 
    noteNum = 0
 
    for uri in _.sortBy(songNotes, 'id')
 
      had = toRemove.delete(uri.value)
 
      if not had
 
        @_addNote(uri, noteNum)
 
      noteNum = noteNum + 1
 
        @_addNote(uri)
 

	
 
    toRemove.forEach @_delNote.bind(@)
 

	
 
    @dirty()
 

	
 
  isActiveNote: (note) -> @noteByUriStr.has(note.value)
 
@@ -374,36 +394,32 @@ coffeeElementSetup(class TimeZoomed exte
 
    @bg.removeChildren()
 
    gfx = new PIXI.Graphics()
 
    @bg.addChild(gfx)
 

	
 
    gfx.lineStyle(1, 0x222222, 1)
 
    for row in [0...@numRows]
 
      y = @rowBottom(row)
 
      y = @brickLayout.rowBottom(row)
 
      gfx.moveTo(0, y)
 
      gfx.lineTo(@clientWidth, y)
 

	
 
  rowTop: (n) -> @viewState.rowsY() + 20 + 150 * n
 

	
 
  rowBottom: (n) -> @rowTop(n) + 140
 

	
 
  _addNote: (uri, noteNum) ->
 
  _addNote: (uri) ->
 
    U = (x) => @graph.Uri(x)
 
    
 
    con = new PIXI.Container()
 
    con.interactive=true
 
    @stage.addChild(con)
 
    
 
    row = noteNum % @numRows
 
    rowTop = @rowTop(row)
 
    note = new Note(@, con, @project, @graph, @selection, uri, @setAdjuster, U(@song), @viewState, @rowTop(row), @rowBottom(row))
 
    note = new Note(@, con, @project, @graph, @selection, uri, @setAdjuster, U(@song), @viewState, @brickLayout)
 
    # this must come before the first Note.draw
 
    @noteByUriStr.set(uri.value, note)
 
    @brickLayout.addNote(note)
 
    note.initWatchers()
 

	
 
  _delNote: (uriStr) ->
 
    n = @noteByUriStr.get(uriStr)
 
    @brickLayout.delNote(n)
 
    @stage.removeChild(n.container)
 
    n.destroy()
 
    @noteByUriStr.delete(uriStr)
 
            
 
  onDrop: (effect, pos) ->
 
    U = (x) => @graph.Uri(x)
 
@@ -443,12 +459,13 @@ coffeeElementSetup(class TimeZoomed exte
 
          return
 
        index += 1
 
      @push('inlineAttrConfigs', config)
 
)
 

	
 

	
 

	
 
coffeeElementSetup(class TimeAxis extends Polymer.Element
 
  @is: "light9-timeline-time-axis",
 
  @getter_properties:
 
    viewState: { type: Object, notify: true, observer: "onViewState" }
 
  onViewState: ->
 
    ko.computed =>
 
@@ -459,18 +476,18 @@ coffeeElementSetup(class TimeAxis extend
 
)
 

	
 

	
 
# Maintains a pixi object, some adjusters, and inlineattrs corresponding to a note
 
# in the graph.
 
class Note
 
  constructor: (@parentElem, @container, @project, @graph, @selection, @uri, @setAdjuster, @song, @viewState, @rowTopY, @rowBotY) ->
 
  constructor: (@parentElem, @container, @project, @graph, @selection, @uri, @setAdjuster, @song, @viewState, @brickLayout) ->
 
    @adjusterIds = new Set() # id string
 

	
 
  initWatchers: ->
 
    @graph.runHandler(@draw.bind(@), "note draw #{@uri.value}")
 
    ko.computed @draw.bind(@)
 
    @graph.runHandler(@update.bind(@), "note update #{@uri.value}")
 
    ko.computed @update.bind(@)
 

	
 
  destroy: ->
 
    log('destroy', @uri.value)
 
    @isDetached = true
 
    @clearAdjusters()
 
    @parentElem.updateInlineAttrs(@uri, null)
 
@@ -490,48 +507,70 @@ class Note
 
    throw new Error("curve #{@uri.value} has no attr #{curveAttr.value}")
 

	
 
  midPoint: (i0, i1) ->
 
    p0 = @worldPts[i0]
 
    p1 = @worldPts[i1]
 
    p0.x(.5).add(p1.x(.5))
 
    
 
  draw: ->
 
    if not @parentElem.isActiveNote(@uri)
 
      # stale redraw call
 
      return
 

	
 
  _planDrawing: ->
 
    U = (x) => @graph.Uri(x)
 
    [pointUris, @worldPts] = @getCurvePoints(@uri, U(':strength'))
 
    [pointUris, worldPts] = @getCurvePoints(@uri, U(':strength'))
 
    effect = @graph.uriValue(@uri, U(':effectClass'))
 

	
 
    yForV = (v) => @rowBotY + (@rowTopY - @rowBotY) * v
 
    dependOn = [@viewState.zoomSpec.t1(), @viewState.zoomSpec.t2(), @viewState.width()]
 
    screenPts = (new PIXI.Point(@viewState.zoomInX(pt.e(1)), yForV(pt.e(2))) for pt in @worldPts)
 
    yForV = @brickLayout.yForVFor(@)
 
    dependOn = [@viewState.zoomSpec.t1(),
 
                @viewState.zoomSpec.t2(),
 
                @viewState.width()]
 
    screenPts = (new PIXI.Point(@viewState.zoomInX(pt.e(1)),
 
                                yForV(pt.e(2))) for pt in worldPts)
 
    return {
 
      yForV: yForV
 
      worldPts: worldPts
 
      screenPts: screenPts
 
      effect: effect
 
    }
 

	
 
  redraw: (params) ->
 
    @container.removeChildren()
 
    @graphics = new PIXI.Graphics({nativeLines: false})
 
    @graphics.interactive = true
 
    @container.addChild(@graphics)
 

	
 
    if @uri.equals(@selection.hover())
 
      @_traceBorder(screenPts, 12, 0x888888)
 
      @_traceBorder(params.screenPts, 12, 0x888888)
 
    @selection.selected().forEach (s) =>
 
      if s.equals(@uri)
 
        @_traceBorder(screenPts, 6, 0xff2900)
 
        @_traceBorder(params.screenPts, 6, 0xff2900)
 

	
 
    shape = new PIXI.Polygon(screenPts)
 
    @graphics.beginFill(@_noteColor(effect), .313)
 
    shape = new PIXI.Polygon(params.screenPts)
 
    @graphics.beginFill(@_noteColor(params.effect), .313)
 
    @graphics.drawShape(shape)
 
    @graphics.endFill()
 

	
 
    @_traceBorder(screenPts, 2, 0xffd900)
 
    @_traceBorder(params.screenPts, 2, 0xffd900)
 
                 
 
  update: ->
 
    if not @parentElem.isActiveNote(@uri)
 
      # stale redraw call
 
      return
 

	
 
    if @worldPts
 
      @brickLayout.setNoteSpan(@, @worldPts[0].e(1),
 
                               @worldPts[@worldPts.length - 1].e(1))
 

	
 
    params = @_planDrawing()
 
    @worldPts = params.worldPts
 

	
 
    @redraw(params)
 

	
 
    @_addMouseBindings()
 

	
 
    curveWidthCalc = () => @project.curveWidth(@worldPts)
 
    @_updateAdjusters(screenPts, @worldPts, curveWidthCalc, yForV, @viewState.zoomInX, @song)
 
    @_updateInlineAttrs(screenPts)
 
    @_updateAdjusters(params.screenPts, @worldPts, curveWidthCalc,
 
                      params.yForV, @viewState.zoomInX, @song)
 
    @_updateInlineAttrs(params.screenPts, params.yForV)
 
    @parentElem.noteDirty()
 

	
 
  _traceBorder: (screenPts, thick, color) ->
 
    @graphics.lineStyle(thick, color, 1)
 
    @graphics.moveTo(screenPts[0].x, screenPts[0].y)
 
    for p in screenPts.slice(1)
 
@@ -564,13 +603,13 @@ class Note
 
        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) ->
 
  xupdate: (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)
 
@@ -586,13 +625,13 @@ class Note
 
      @clearAdjusters()
 
    else
 
      @_makeOffsetAdjuster(yForV, curveWidthCalc, ctx)
 
      @_makeCurvePointAdjusters(yForV, worldPts, ctx)
 
      @_makeFadeAdjusters(yForV, zoomInX, ctx, worldPts)
 

	
 
  _updateInlineAttrs: (screenPts) ->
 
  _updateInlineAttrs: (screenPts, yForV) ->
 
    w = 280
 

	
 
    leftX = Math.max(2, screenPts[Math.min(1, screenPts.length - 1)].x + 5)
 
    rightX = screenPts[Math.min(2, screenPts.length - 1)].x - 5
 
    if screenPts.length < 3
 
      rightX = leftX + w
 
@@ -601,15 +640,15 @@ class Note
 
      @parentElem.updateInlineAttrs(@uri, null)
 
      return
 

	
 
    config = {
 
      uri: @uri,
 
      left: leftX,
 
      top: @rowTopY + 5,
 
      top: yForV(1) + 5,
 
      width: w,
 
      height: @rowBotY - @rowTopY - 15,
 
      height: yForV(0) - yForV(1) - 15,
 
      }
 

	
 
    @parentElem.updateInlineAttrs(@uri, config)
 

	
 
  _makeCurvePointAdjusters: (yForV, worldPts, ctx) ->
 
    for pointNum in [0...worldPts.length]
0 comments (0 inline, 0 general)