changeset 1742:70873145cc71

get mouse events to pixi. fix pixi-vs-adj coordinate issue Ignore-this: dbf065b862823c312ceebbbe80dc99df
author Drew Perttula <drewp@bigasterisk.com>
date Sat, 19 May 2018 21:55:08 +0000
parents 17f56584e253
children 92104dcd33e2
files light9/web/timeline/adjusters.coffee light9/web/timeline/timeline-elements.html light9/web/timeline/timeline.coffee
diffstat 3 files changed, 43 insertions(+), 15 deletions(-) [+]
line wrap: on
line diff
--- a/light9/web/timeline/adjusters.coffee	Sat May 19 07:25:01 2018 +0000
+++ b/light9/web/timeline/adjusters.coffee	Sat May 19 21:55:08 2018 +0000
@@ -22,16 +22,17 @@
     @redraw()
     @setAdjuster = @_setAdjuster.bind(@)
 
+    # These don't fire; TimelineEditor calls the handlers for us.
     @addEventListener('mousedown', @onDown.bind(@))
     @addEventListener('mousemove', @onMove.bind(@))
     @addEventListener('mouseup', @onUp.bind(@))
    
   onDown: (ev) ->
     if ev.buttons == 1
-      ev.stopPropagation()
       start = $V([ev.x, ev.y])
       adj = @_adjAtPoint(start)
       if adj
+        ev.stopPropagation()
         @currentDrag = {start: start, adj: adj}
         adj.startDrag()
 
@@ -68,7 +69,9 @@
 
   _adjAtPoint: (pt) ->
     nearest = @qt.find(pt.e(1), pt.e(2))
-    if not nearest? or nearest.distanceFrom(pt) > 50
+    if nearest?
+      log('near', nearest.distanceFrom(pt))
+    if not nearest? or nearest.distanceFrom(pt) > 70
       return null
     return nearest?.adj
 
--- a/light9/web/timeline/timeline-elements.html	Sat May 19 07:25:01 2018 +0000
+++ b/light9/web/timeline/timeline-elements.html	Sat May 19 21:55:08 2018 +0000
@@ -94,6 +94,7 @@
      }
      #rows {
          height: 100%;
+         overflow: hidden;
      }
      #rows.dragging {
          background: rgba(126, 52, 245, 0.0784);
@@ -189,7 +190,7 @@
 <dom-module id="light9-adjusters-canvas">
   <template>
     <style>
-     #canvas {
+     :host {
          pointer-events: none;
      }
     </style>
--- a/light9/web/timeline/timeline.coffee	Sat May 19 07:25:01 2018 +0000
+++ b/light9/web/timeline/timeline.coffee	Sat May 19 21:55:08 2018 +0000
@@ -123,7 +123,10 @@
     
   ready: ->
     super.ready()
-    
+    @addEventListener 'mousedown', (ev) => @$.adjustersCanvas.onDown(ev)
+    @addEventListener 'mousemove', (ev) => @$.adjustersCanvas.onMove(ev)
+    @addEventListener 'mouseup', (ev) => @$.adjustersCanvas.onUp(ev)
+
     ko.options.deferUpdates = true
     
     @selection = {hover: ko.observable(null), selected: ko.observable([])}
@@ -135,7 +138,7 @@
 
     @trackMouse()
     @bindKeys()
-    @bindWheelZoom(@$.adjustersCanvas)
+    @bindWheelZoom(@)
 
     setInterval(@updateDebugSummary.bind(@), 100)
 
@@ -296,6 +299,7 @@
     super()
     @notes = []
     @stage = new PIXI.Container()
+    @stage.interactive=true
     
     @renderer = PIXI.autoDetectRenderer({
          backgroundColor: 0x606060,
@@ -305,30 +309,37 @@
      
   ready: ->
     super.ready()
-     
+
     @addEventListener('iron-resize', @_onResize.bind(@))
     Polymer.RenderStatus.afterNextRender(this, @_onResize.bind(@))
     
     @$.rows.appendChild(@renderer.view)
 
-    ko.computed =>
-      @stage.setTransform(0, -(@viewState.rowsY()), 1, 1, 0, 0, 0, 0, 0)
+    # This works for display, but pixi hit events didn't correctly
+    # move with the objects, so as a workaround, I extended the top of
+    # the canvas in _onResize.
+    # 
+    #ko.computed =>
+    #  @stage.setTransform(0, -(@viewState.rowsY()), 1, 1, 0, 0, 0, 0, 0)
       
   _onResize: ->
-    @renderer.resize(@clientWidth, @clientHeight)
+    @$.rows.firstChild.style.position = 'relative'
+    @$.rows.firstChild.style.top = -@viewState.rowsY() + 'px'
+
+    @renderer.resize(@clientWidth, @clientHeight + @viewState.rowsY())
+    
     @renderer.render(@stage)
   
-  _onGraph: ->
+  _onGraph: (graph, setAdjuster, song, viewState, project)->
+    return unless @song # polymer will call again
     @graph.runHandler(@gatherNotes.bind(@), 'zoom notes')
     
   gatherNotes: ->
     U = (x) => @graph.Uri(x)
     return unless @song?
-    log('assign rows', @song)
 
     songNotes = @graph.objects(U(@song), U(':note'))
     
-
     @stage.removeChildren()
     n.destroy() for n in @notes
     @notes = []
@@ -336,7 +347,9 @@
     noteNum = 0
     for uri in _.sortBy(songNotes, 'id')
       con = new PIXI.Container()
+      con.interactive=true
       @stage.addChild(con)
+      
       row = noteNum % 6
       rowTop = @viewState.rowsY() + 20 + 150 * row
       note = new Note(con, @project, @graph, @selection, uri, @setAdjuster, U(@song), @viewState, rowTop, rowTop + 140)
@@ -387,7 +400,7 @@
 class Note
   constructor: (@container, @project, @graph, @selection, @uri, @setAdjuster, @song, @viewState, @rowTopY, @rowBotY) ->
     @adjusterIds = {} # id : true
-    Polymer.RenderStatus.afterNextRender(this, @graph.runHandler(@draw.bind(@), 'note draw'))
+    @graph.runHandler(@draw.bind(@), 'note draw')
 
   destroy: ->
     log('destroy', @uri.value)
@@ -404,7 +417,6 @@
 
     for curve in @graph.objects(subj, U(':curve'))
       if @graph.uriValue(curve, U(':attr')).equals(curveAttr)
-
         return @project.getCurvePoints(curve, originTime)
     throw new Error("curve #{@uri.value} has no attr #{curveAttr.value}")
 
@@ -419,6 +431,7 @@
 
     @container.removeChildren()    
     graphics = new PIXI.Graphics({nativeLines: false})
+    graphics.interactive = true
     @container.addChild(graphics)
 
     shape = new PIXI.Polygon(screenPts)
@@ -430,7 +443,18 @@
     graphics.moveTo(screenPts[0].x, screenPts[0].y)
     for p in screenPts.slice(1)
       graphics.lineTo(p.x, p.y)
-    
+
+    graphics.on 'mousedown', =>
+      log('down gfx', @uri.value)
+
+    graphics.on 'mouseover', =>
+      log('hover', @uri.value)
+
+    graphics.on 'mouseout', =>
+      log('hoverout', @uri.value)
+      
+
+    @graphics = graphics
     curveWidthCalc = () => @project.curveWidth(worldPts)
     @_updateAdjusters(screenPts, worldPts, curveWidthCalc, yForV, @song)
     @_updateInlineAttrs(screenPts)