light9 Changeset - d5c3dec3dbd9

Changeset - d5c3dec3dbd9

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

Drew Perttula - 8 years ago 2017-03-30 09:52:21
drewp@bigasterisk.com

move time and mouse cursors to a <canvas> tag
Ignore-this: da8de9cb12a93dffa0b61a13f0358efa

2 files changed with 88 insertions and 38 deletions:

light9/web/timeline/timeline-elements.html

light9/web/timeline/timeline.coffee

0 comments (0 inline, 0 general)

light9/web/timeline/timeline-elements.html

➞

Show inline comments

@@ @@ -28,7 +28,7 @@ @@
      light9-timeline-time-zoomed {
          flex-grow: 1;
+     }
-     light9-timeline-diagram-layer, light9-timeline-adjusters {
+     #dia, #adjusters, #cursorCanvas {
          position: absolute;
          left: 0; top: 0; right: 0; bottom: 0;
+     }
@@ @@ -72,6 +72,7 @@ @@
                                set-adjuster="{{setAdjuster}}"
                                zoom-in-x="{{zoomInX}}">
     </light9-timeline-adjusters>
     <light9-cursor-canvas id="cursorCanvas"></light9-cursor-canvas>
   </template>
 </dom-module>
@@ @@ -165,16 +166,22 @@ background: rgba(126, 52, 245, 0.0784313 @@
         <g id="notes"></g>
         <g id="noteLabels"></g>
         <g id="connectors"></g>
         <g id="cursor">
           <path id="cursor1" style="fill:none; stroke:#ff0303; stroke-width:1.5; stroke-linecap:butt;" />
           <path id="cursor2" style="fill:#9c0303;" />
           <path id="cursor3" style="fill:none; stroke:#ff0303; stroke-width:3; stroke-linecap:butt;" />
         </g>
       </g>
     </svg>
   </template>
 </dom-module>
 <dom-module id="light9-cursor-canvas">
   <template>
     <style>
      #canvas, :host {
          pointer-events: none;
+     }
     </style>
     <canvas id="canvas"></canvas>
   </template>
 </dom-module>
 <!-- seconds labels -->
 <dom-module id="light9-timeline-time-axis">

light9/web/timeline/timeline.coffee

➞

Show inline comments

@@ @@ -121,7 +121,7 @@ Polymer @@
     setTimeout(@songTimeChanged.bind(@), 1)
   songTimeChanged: ->
-    @dia.setCursor(@$.audio.offsetTop, @$.audio.offsetHeight,
+    @$.cursorCanvas.setCursor(@$.audio.offsetTop, @$.audio.offsetHeight,
                      @$.zoomed.$.time.offsetTop,
                      @$.zoomed.$.time.offsetHeight,
                      @fullZoomX, @zoomInX, @viewState.cursor)
@@ @@ -139,7 +139,7 @@ Polymer @@
         @root = @getBoundingClientRect()
         @viewState.mouse.pos($V([ev.pageX - @root.left, ev.pageY - @root.top]))
-        @dia.setMouse(@viewState.mouse.pos())
+        @$.cursorCanvas.setMouse(@viewState.mouse.pos())
         @sendMouseToVidref()
   sendMouseToVidref: ->
@@ @@ -715,6 +715,79 @@ svgPathFromPoints = (pts) -> @@
   out
 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()
   _line: (p1, p2) ->
     @ctx.moveTo(p1.e(1), p1.e(2))
     @ctx.lineTo(p2.e(1), p2.e(2))
   redraw: ->
     @ctx.clearRect(0, 0, @$.canvas.width, @$.canvas.height)
     @ctx.strokeStyle = '#fff'
     @ctx.lineWidth = 0.5
     @ctx.beginPath()
     @_line($V([0, @mouseY]), $V([@$.canvas.width, @mouseY]), '#fff', '0.5px')
     @_line($V([@mouseX, 0]), $V([@mouseX, @$.canvas.height]), '#fff', '0.5px')
     @ctx.stroke()
     if @cursorPath
       @ctx.strokeStyle = '#ff0303'
       @ctx.lineWidth = 1.5
       @ctx.beginPath()
       @_line(@cursorPath.top0, @cursorPath.top1, '#ff0303', 1.5)
       @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()
       @_line(@cursorPath.bot0, @cursorPath.bot1, '#ff0303', '3px')
       @ctx.stroke()
 Polymer
   is: 'light9-timeline-diagram-layer'
   properties: {}
   ready: ->
@@ @@ -725,12 +798,6 @@ Polymer @@
     axis = d3.axisTop(scale).ticks(width / pxPerTick)
     d3.select(@$.timeAxis).attr('transform', 'translate(0,'+yTop+')').call(axis)
   setMouse: (pos) ->
     elem = @getOrCreateElem('mouse-x', 'mouse', 'path', {style: "fill:none;stroke:#fff;stroke-width:0.5;"})
     elem.setAttribute('d', svgPathFromPoints([[-9999, pos.e(2)], [9999, pos.e(2)]]))
     elem = @getOrCreateElem('mouse-y', 'mouse', 'path', {style: "fill:none;stroke:#fff;stroke-width:0.5;"})
     elem.setAttribute('d', svgPathFromPoints([[pos.e(1), -9999], [pos.e(1), 9999]]))
   getOrCreateElem: (uri, groupId, tag, attrs) ->
     elem = @elemById[uri]
     if !elem
@@ @@ -784,30 +851,6 @@ Polymer @@
     #elem.setAttribute('y', curvePts[0].e(2)-10)
     #elem.innerHTML = effectLabel;
   setCursor: (y1, h1, y2, h2, fullZoomX, zoomInX, cursor) ->
     @cursorPath =
       top: @querySelector('#cursor1')
       mid: @querySelector('#cursor2')
       bot: @querySelector('#cursor3')
     return if !@cursorPath.top
     xZoomedOut = fullZoomX(cursor.t())
     xZoomedIn = zoomInX(cursor.t())
     @cursorPath.top.setAttribute 'd', svgPathFromPoints([
       [xZoomedOut, y1]
       [xZoomedOut, y1 + h1]
     ])
     @cursorPath.mid.setAttribute 'd', svgPathFromPoints([
       [xZoomedIn + 2, y2 + h2]
       [xZoomedIn - 2, y2 + h2]
       [xZoomedOut - 1, y1 + h1]
       [xZoomedOut + 1, y1 + h1]
     ]) + ' Z'
     @cursorPath.bot.setAttribute 'd', svgPathFromPoints([
       [xZoomedIn, y2 + h2]
       [xZoomedIn, @offsetParent.offsetHeight]
     ])
   setAdjusterConnector: (uri, center, target) ->
     id = uri + '/adj'
     if not @anyPointsInView([center, target])

0 comments (0 inline, 0 general)