light9 Changeset - 5028707d45d3

Changeset - 5028707d45d3

Parent rev.

Child rev.

[Not reviewed]

default

0 3 0

Drew Perttula - 9 years ago 2016-06-05 00:11:56
drewp@bigasterisk.com

mousewheel zoom
Ignore-this: bb4209dddd30b781037ed731f56b899e

3 files changed with 24 insertions and 21 deletions:

light9/web/light9-timeline-audio.html

light9/web/timeline-elements.html

light9/web/timeline.coffee

0 comments (0 inline, 0 general)

light9/web/light9-timeline-audio.html

➞

Show inline comments

@@ @@ -6,7 +6,9 @@ @@
     <style>
      :host {
          display: block;
          background: red;
          /* shouldn't be seen, but black is correct for 'no
          audio'. Maybe loading stripes would be better */
          background: black;
+     }
      div {
          width: 100%;

light9/web/timeline-elements.html

➞

Show inline comments

@@ @@ -30,9 +30,6 @@ @@
          position: absolute;
          left: 0; top: 0; right: 0; bottom: 0;
+     }
      light9-timeline-adjusters {
          pointer-events: none; /* temporary */
+         }
     </style>
     <div>
       <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph>
@@ @@ -74,7 +71,7 @@ @@
+     }
      light9-timeline-audio {
          width: 100%;
-         height: 90px;
+         height: 100px;
+     }
      light9-timeline-graph-row {
          flex-grow: 1;
@@ @@ -215,6 +212,10 @@ @@
 <dom-module id="light9-timeline-adjusters">
   <template>
     <style>
      :host {
          pointer-events: none; /* restored on the individual adjusters */
+     }
     </style>
     <template is="dom-repeat" items="{{adjs}}">
       <light9-timeline-adjuster dia="{{dia}}" adj="{{item}}"></light9-timeline-adjuster>
@@ @@ -248,6 +249,7 @@ @@
          top: -40px; /* percent had no effect */
          z-index: 2;
          border-collapse: collapse;
          pointer-events: all;
+     }
      td {
          text-align: center;

light9/web/timeline.coffee

➞

Show inline comments

@@ @@ -73,20 +73,20 @@ Polymer @@
         @$.dia.setMouse(@viewState.mouse.pos())
   latestMouseTime: ->
     @zoomInX.invert(@viewState.mouse.pos().e(1))
   bindWheelZoom: ->
     # tried d3.zoom but couldn't figure it out
     zoom = d3.zoom()
     zoom.filter ->
       # LMB drag is for selection, but MMB can scroll
       return !(event.type == 'mousedown' && event.button != 1)
     zoom.extent([[0, 0], [196, 1]])
     zoom.translateExtent([[0, 0], [196, 1]])
     zoom.on 'zoom', (a,b,c) =>
       xf = d3.event.transform
       log('zoom', xf)
       @viewState.zoomSpec.t1(xf.invertX(0))
       @viewState.zoomSpec.t2(xf.invertX(@viewState.zoomSpec.duration()))
     d3.select(@$.zoomed).call(zoom)
     @$.zoomed.addEventListener 'mousewheel', (ev) =>
       zs = @viewState.zoomSpec
       center = @latestMouseTime()
       left = center - zs.t1()
       right = zs.t2() - center
       scale = Math.pow(1.005, ev.deltaY)
       zs.t1(center - left * scale)
       zs.t2(center + right * scale)
   animatedZoom: (newT1, newT2, secs) ->
     fps = 30
@@ @@ -99,7 +99,6 @@ Polymer @@
         gotoStep = =>
           @viewState.zoomSpec.t1((1 - frac) * oldT1 + frac * newT1)
           @viewState.zoomSpec.t2((1 - frac) * oldT2 + frac * newT2)
           console.log('to', frac, @viewState.zoomSpec.t1(), @viewState.zoomSpec.t2())
         delay = frac * secs * 1000
         setTimeout(gotoStep, delay)
         lastTime = delay
@@ @@ -110,9 +109,9 @@ Polymer @@
   bindKeys: ->
     shortcut.add "Ctrl+P", (ev) =>
-      @$.music.seekPlayOrPause(@zoomInX.invert(@viewState.mouse.pos().e(1)))
+      @$.music.seekPlayOrPause(@latestMouseTime())
-    zoomAnimSec = .2
+    zoomAnimSec = .1
     shortcut.add "Ctrl+Escape", =>
       @animatedZoom(0, @viewState.zoomSpec.duration(), zoomAnimSec)
     shortcut.add "Shift+Escape", =>

0 comments (0 inline, 0 general)