light9 Changeset - 715a442c2635

Changeset - 715a442c2635

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

Drew Perttula - 9 years ago 2016-06-03 22:00:24
drewp@bigasterisk.com

cursor use d3.scales for coordinate system transforms
Ignore-this: 373c3e855697624dc05e4555863002d4

2 files changed with 15 insertions and 10 deletions:

light9/web/timeline-elements.html

light9/web/timeline.coffee

0 comments (0 inline, 0 general)

light9/web/timeline-elements.html

➞

Show inline comments

@@ @@ -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]]));
+       }
    });

light9/web/timeline.coffee

➞

Show inline comments

@@ @@ -81,7 +81,7 @@ Polymer @@
   behaviors: [ Polymer.IronResizableBehavior ]
   properties:
     viewState: { type: Object }
-  ready: ->
+  attached: ->
     @viewState =
       zoomSpec:
         duration: 190
@@ @@ -90,13 +90,15 @@ Polymer @@
       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))

0 comments (0 inline, 0 general)