# HG changeset patch
# User Drew Perttula <drewp@bigasterisk.com>
# Date 1464991224 0
# Node ID 715a442c2635aa27d1d0bc3f18997e0b89daba9b
# Parent  f40b1796d9562aae195cd7c3cdeeadda3dd0ba19
cursor use d3.scales for coordinate system transforms
Ignore-this: 373c3e855697624dc05e4555863002d4

diff -r f40b1796d956 -r 715a442c2635 light9/web/timeline-elements.html
--- a/light9/web/timeline-elements.html	Fri Jun 03 21:58:57 2016 +0000
+++ b/light9/web/timeline-elements.html	Fri Jun 03 22:00:24 2016 +0000
@@ -190,17 +190,20 @@
            var d = svgPathFromPoints([[x1, y2], [x1*.75 + x2*.25, y1], [x1*.25 + x2*.75, y1], [x2, y2]]);
            elem.setAttribute('d', d);
        },
-       setCursor: function(y1, h1, y2, h2, zoom, cursor) {
-           var xZoomedOut = this.offsetParent.offsetWidth * cursor.t / zoom.duration;
-           var xZoomedIn = this.offsetParent.offsetWidth * (cursor.t - zoom.t1) / (zoom.t2 - zoom.t1); // replace with d3 scale
-           this.cursorPath.top.setAttribute('d', svgPathFromPoints([[xZoomedOut, y1], [xZoomedOut, y1 + h1]]));
+       setCursor: function(y1, h1, y2, h2, fullZoomX, zoomInX, cursor) {
+           var xZoomedOut = fullZoomX(cursor.t);
+           var xZoomedIn = zoomInX(cursor.t);
+           this.cursorPath.top.setAttribute('d', svgPathFromPoints([
+               [xZoomedOut, y1],
+               [xZoomedOut, y1 + h1]]));
            this.cursorPath.mid.setAttribute('d', svgPathFromPoints([
                [xZoomedIn + 2, y2 + h2],
                [xZoomedIn - 2, y2 + h2],
                [xZoomedOut - 1, y1 + h1],
-               [xZoomedOut + 1, y1 + h1],
-           ]) + ' Z');
-           this.cursorPath.bot.setAttribute('d', svgPathFromPoints([[xZoomedIn, y2 + h2], [xZoomedIn, this.offsetParent.offsetHeight]]));
+               [xZoomedOut + 1, y1 + h1]]) + ' Z');
+           this.cursorPath.bot.setAttribute('d', svgPathFromPoints([
+               [xZoomedIn, y2 + h2],
+               [xZoomedIn, this.offsetParent.offsetHeight]]));
 
        }
    });
diff -r f40b1796d956 -r 715a442c2635 light9/web/timeline.coffee
--- a/light9/web/timeline.coffee	Fri Jun 03 21:58:57 2016 +0000
+++ b/light9/web/timeline.coffee	Fri Jun 03 22:00:24 2016 +0000
@@ -81,7 +81,7 @@
   behaviors: [ Polymer.IronResizableBehavior ]
   properties:
     viewState: { type: Object }
-  ready: ->
+  attached: ->
     @viewState =
       zoomSpec:
         duration: 190
@@ -90,13 +90,15 @@
       cursor:
         t: 105
 
-    @fullZoomX = d3.scaleLinear().domain([0, @viewState.zoomSpec.duration]).range([0, @offsetWidth])
+    @fullZoomX = d3.scaleLinear().domain([0, @viewState.zoomSpec.duration]).range([0, @offsetWidth]) # need to update this if width changes or if duration changes
+    @zoomInX = d3.scaleLinear().domain([@viewState.zoomSpec.t1, @viewState.zoomSpec.t2]).range([0, @offsetWidth]) # need to update this if width changes or if duration changes
+
 
     animCursor = () => 
       @viewState.cursor.t = 130 + 20 * Math.sin(Date.now() / 2000)
       @$.dia.setCursor(@$.audio.offsetTop, @$.audio.offsetHeight,
                        @$.zoomed.$.time.offsetTop, @$.zoomed.$.time.offsetHeight,
-                       @viewState.zoomSpec, @viewState.cursor)
+                       @fullZoomX, @zoomInX, @viewState.cursor)
 
       @set('viewState.zoomSpec.t1', 80 + 10 * Math.sin(Date.now() / 3000))