Mercurial > code > home > repos > light9

changeset 1321:715a442c2635

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
cursor use d3.scales for coordinate system transforms Ignore-this: 373c3e855697624dc05e4555863002d4
author Drew Perttula <drewp@bigasterisk.com>
date Fri, 03 Jun 2016 22:00:24 +0000
parents f40b1796d956
children fb8aa1cb96e1
files light9/web/timeline-elements.html light9/web/timeline.coffee
diffstat 2 files changed, 15 insertions(+), 10 deletions(-) [+]
line wrap: on
line diff
--- 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]]));
 
        }
    });
--- 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))