light9 Changeset - 70873145cc71

Changeset - 70873145cc71

Parent rev.

Child rev.

[Not reviewed]

default

0 3 0

Drew Perttula - 7 years ago 2018-05-19 21:55:08
drewp@bigasterisk.com

get mouse events to pixi. fix pixi-vs-adj coordinate issue
Ignore-this: dbf065b862823c312ceebbbe80dc99df

3 files changed with 40 insertions and 12 deletions:

light9/web/timeline/adjusters.coffee

light9/web/timeline/timeline-elements.html

light9/web/timeline/timeline.coffee

0 comments (0 inline, 0 general)

light9/web/timeline/adjusters.coffee

➞

Show inline comments

@@ @@ -22,16 +22,17 @@ coffeeElementSetup(class AdjustersCanvas @@
     @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 @@ coffeeElementSetup(class AdjustersCanvas @@
   _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

light9/web/timeline/timeline-elements.html

➞

Show inline comments

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

light9/web/timeline/timeline.coffee

➞

Show inline comments

@@ @@ -123,6 +123,9 @@ coffeeElementSetup(class TimelineEditor @@
   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
@@ @@ -135,7 +138,7 @@ coffeeElementSetup(class TimelineEditor @@
     @trackMouse()
     @bindKeys()
-    @bindWheelZoom(@$.adjustersCanvas)
     @bindWheelZoom(@)
     setInterval(@updateDebugSummary.bind(@), 100)
@@ @@ -296,6 +299,7 @@ coffeeElementSetup(class TimeZoomed exte @@
     super()
     @notes = []
     @stage = new PIXI.Container()
     @stage.interactive=true
     @renderer = PIXI.autoDetectRenderer({
          backgroundColor: 0x606060,
@@ @@ -311,24 +315,31 @@ coffeeElementSetup(class TimeZoomed exte @@
     @$.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 @@ coffeeElementSetup(class TimeZoomed exte @@
     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 @@ coffeeElementSetup(class TimeAxis extend @@
 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 @@ class Note @@
     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 @@ class Note @@
     @container.removeChildren()
     graphics = new PIXI.Graphics({nativeLines: false})
     graphics.interactive = true
     @container.addChild(graphics)
     shape = new PIXI.Polygon(screenPts)
@@ @@ -431,6 +444,17 @@ class Note @@
     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)

0 comments (0 inline, 0 general)