Changeset - c8543026d609
[Not reviewed]
default
0 1 1
Drew Perttula - 7 years ago 2018-04-29 12:21:39
drewp@bigasterisk.com
extract cursor-canvas code
Ignore-this: 7c9fe7c56c173ca59458f8c29e743a84
2 files changed with 69 insertions and 68 deletions:
0 comments (0 inline, 0 general)
light9/web/timeline/cursor_canvas.coffee
Show inline comments
 
new file 100644
 

	
 
Polymer
 
  is: 'light9-cursor-canvas'
 
  behaviors: [ Polymer.IronResizableBehavior ]
 
  listeners: 'iron-resize': 'update'
 

	
 
  ready: ->
 
    @mouseX = 0
 
    @mouseY = 0
 
    @cursorPath = null
 
    @ctx = @$.canvas.getContext('2d')
 

	
 
  update: (ev) ->
 
    @$.canvas.width = ev.target.offsetWidth
 
    @$.canvas.height = ev.target.offsetHeight
 
    @redraw()
 

	
 
  setMouse: (pos) ->
 
    @mouseX = pos.e(1)
 
    @mouseY = pos.e(2)
 
    @redraw()
 

	
 
  setCursor: (y1, h1, y2, h2, fullZoomX, zoomInX, cursor) ->
 
    
 
    xZoomedOut = fullZoomX(cursor.t())
 
    xZoomedIn = zoomInX(cursor.t())
 

	
 
    @cursorPath = {
 
      top0: $V([xZoomedOut, y1])
 
      top1: $V([xZoomedOut, y1 + h1])
 
      mid0: $V([xZoomedIn + 2, y2 + h2])
 
      mid1: $V([xZoomedIn - 2, y2 + h2])
 
      mid2: $V([xZoomedOut - 1, y1 + h1])
 
      mid3: $V([xZoomedOut + 1, y1 + h1])
 
      bot0: $V([xZoomedIn, y2 + h2])
 
      bot1: $V([xZoomedIn, @offsetParent.offsetHeight])
 
    }
 
    @redraw()
 

	
 
  redraw: ->
 
    @ctx.clearRect(0, 0, @$.canvas.width, @$.canvas.height)
 

	
 
    @ctx.strokeStyle = '#fff'
 
    @ctx.lineWidth = 0.5
 
    @ctx.beginPath()
 
    Drawing.line(@ctx, $V([0, @mouseY]), $V([@$.canvas.width, @mouseY]))
 
    Drawing.line(@ctx, $V([@mouseX, 0]), $V([@mouseX, @$.canvas.height]))
 
    @ctx.stroke()
 

	
 
    if @cursorPath
 
      @ctx.strokeStyle = '#ff0303'
 
      @ctx.lineWidth = 1.5
 
      @ctx.beginPath()
 
      Drawing.line(@ctx, @cursorPath.top0, @cursorPath.top1)
 
      @ctx.stroke()
 

	
 
      @ctx.fillStyle = '#9c0303'
 
      @ctx.beginPath()
 
      @ctx.moveTo(@cursorPath.mid0.e(1), @cursorPath.mid0.e(2))
 
      @ctx.lineTo(p.e(1), p.e(2)) for p in [
 
        @cursorPath.mid1, @cursorPath.mid2, @cursorPath.mid3]
 
      @ctx.fill()
 
      
 
      @ctx.strokeStyle = '#ff0303'
 
      @ctx.lineWidth = 3
 
      @ctx.beginPath()
 
      Drawing.line(@ctx, @cursorPath.bot0, @cursorPath.bot1, '#ff0303', '3px')
 
      @ctx.stroke()
 
    
 
\ No newline at end of file
light9/web/timeline/timeline.coffee
Show inline comments
 
@@ -684,80 +684,12 @@ deleteNote = (graph, song, note, selecti
 
  graph.applyAndSendPatch(patch)
 
  if note in selection.selected()
 
    selection.selected(_.without(selection.selected(), note))
 
  
 

	
 
Polymer
 
  is: 'light9-cursor-canvas'
 
  behaviors: [ Polymer.IronResizableBehavior ]
 
  listeners: 'iron-resize': 'update'
 

	
 
  ready: ->
 
    @mouseX = 0
 
    @mouseY = 0
 
    @cursorPath = null
 
    @ctx = @$.canvas.getContext('2d')
 

	
 
  update: (ev) ->
 
    @$.canvas.width = ev.target.offsetWidth
 
    @$.canvas.height = ev.target.offsetHeight
 
    @redraw()
 

	
 
  setMouse: (pos) ->
 
    @mouseX = pos.e(1)
 
    @mouseY = pos.e(2)
 
    @redraw()
 

	
 
  setCursor: (y1, h1, y2, h2, fullZoomX, zoomInX, cursor) ->
 
    
 
    xZoomedOut = fullZoomX(cursor.t())
 
    xZoomedIn = zoomInX(cursor.t())
 

	
 
    @cursorPath = {
 
      top0: $V([xZoomedOut, y1])
 
      top1: $V([xZoomedOut, y1 + h1])
 
      mid0: $V([xZoomedIn + 2, y2 + h2])
 
      mid1: $V([xZoomedIn - 2, y2 + h2])
 
      mid2: $V([xZoomedOut - 1, y1 + h1])
 
      mid3: $V([xZoomedOut + 1, y1 + h1])
 
      bot0: $V([xZoomedIn, y2 + h2])
 
      bot1: $V([xZoomedIn, @offsetParent.offsetHeight])
 
    }
 
    @redraw()
 

	
 
  redraw: ->
 
    @ctx.clearRect(0, 0, @$.canvas.width, @$.canvas.height)
 

	
 
    @ctx.strokeStyle = '#fff'
 
    @ctx.lineWidth = 0.5
 
    @ctx.beginPath()
 
    Drawing.line(@ctx, $V([0, @mouseY]), $V([@$.canvas.width, @mouseY]))
 
    Drawing.line(@ctx, $V([@mouseX, 0]), $V([@mouseX, @$.canvas.height]))
 
    @ctx.stroke()
 

	
 
    if @cursorPath
 
      @ctx.strokeStyle = '#ff0303'
 
      @ctx.lineWidth = 1.5
 
      @ctx.beginPath()
 
      Drawing.line(@ctx, @cursorPath.top0, @cursorPath.top1)
 
      @ctx.stroke()
 

	
 
      @ctx.fillStyle = '#9c0303'
 
      @ctx.beginPath()
 
      @ctx.moveTo(@cursorPath.mid0.e(1), @cursorPath.mid0.e(2))
 
      @ctx.lineTo(p.e(1), p.e(2)) for p in [
 
        @cursorPath.mid1, @cursorPath.mid2, @cursorPath.mid3]
 
      @ctx.fill()
 
      
 
      @ctx.strokeStyle = '#ff0303'
 
      @ctx.lineWidth = 3
 
      @ctx.beginPath()
 
      Drawing.line(@ctx, @cursorPath.bot0, @cursorPath.bot1, '#ff0303', '3px')
 
      @ctx.stroke()
 
    
 
Polymer
 
  is: 'light9-adjusters-canvas'
 
  behaviors: [ Polymer.IronResizableBehavior ]
 
  properties:
 
    adjs: { type: Object, notify: true }, # adjId: Adjustable
 
  observers: [
 
    'updateAllCoords(adjs)'
0 comments (0 inline, 0 general)