Mercurial > code > home > repos > light9
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)