# HG changeset patch
# User Drew Perttula <drewp@bigasterisk.com>
# Date 2017-03-30 09:52:21
# Node ID d5c3dec3dbd9fafd38d391a259bc3b305a5a8a44
# Parent  776717e5cd1a70c527cc6e12a24a402fe93f7bcf

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

diff --git a/light9/web/timeline/timeline-elements.html b/light9/web/timeline/timeline-elements.html
--- a/light9/web/timeline/timeline-elements.html
+++ b/light9/web/timeline/timeline-elements.html
@@ -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">
diff --git a/light9/web/timeline/timeline.coffee b/light9/web/timeline/timeline.coffee
--- a/light9/web/timeline/timeline.coffee
+++ b/light9/web/timeline/timeline.coffee
@@ -121,10 +121,10 @@ Polymer
     setTimeout(@songTimeChanged.bind(@), 1)
 
   songTimeChanged: ->
-    @dia.setCursor(@$.audio.offsetTop, @$.audio.offsetHeight,
-                     @$.zoomed.$.time.offsetTop,
-                     @$.zoomed.$.time.offsetHeight,
-                     @fullZoomX, @zoomInX, @viewState.cursor)
+    @$.cursorCanvas.setCursor(@$.audio.offsetTop, @$.audio.offsetHeight,
+                              @$.zoomed.$.time.offsetTop,
+                              @$.zoomed.$.time.offsetHeight,
+                              @fullZoomX, @zoomInX, @viewState.cursor)
     
   trackMouse: ->
     # not just for show- we use the mouse pos sometimes
@@ -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])