light9 Changeset - 0e9d8a1328d1

Changeset - 0e9d8a1328d1

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

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

tried d3.zoom in this version, but I can't figure it out
Ignore-this: 18b25f2708737d36e9cdf66ca43f7063

2 files changed with 19 insertions and 2 deletions:

light9/web/timeline-elements.html

light9/web/timeline.coffee

0 comments (0 inline, 0 general)

light9/web/timeline-elements.html

➞

Show inline comments

@@ @@ -27,12 +27,15 @@ @@
          flex-grow: 1;
+     }
      light9-timeline-diagram-layer, light9-timeline-adjusters {
          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>
       <light9-music id="music"
                     song="{{song}}"
                     t="{{songTime}}"

light9/web/timeline.coffee

➞

Show inline comments

@@ @@ -53,12 +53,13 @@ Polymer @@
                        @$.zoomed.$.time.offsetHeight,
                        @fullZoomX, @zoomInX, @viewState.cursor)
     @adjs = @makeZoomAdjs().concat(@persistDemo())
     @trackMouse()
     @bindKeys()
     @bindWheelZoom()
   trackMouse: ->
     # not just for show- we use the mouse pos sometimes
     for evName in ['mousemove', 'touchmove']
       @addEventListener evName, (ev) =>
         ev.preventDefault()
@@ @@ -69,12 +70,27 @@ Polymer @@
         @root = @getBoundingClientRect()
         @viewState.mouse.pos($V([ev.pageX - @root.left, ev.pageY - @root.top]))
         @$.dia.setMouse(@viewState.mouse.pos())
   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)
   animatedZoom: (newT1, newT2, secs) ->
     fps = 30
     oldT1 = @viewState.zoomSpec.t1()
     oldT2 = @viewState.zoomSpec.t2()
     lastTime = 0
     for step in [0..secs * fps]
@@ @@ -89,15 +105,13 @@ Polymer @@
         lastTime = delay
     setTimeout(=>
         @viewState.zoomSpec.t1(newT1)
         @viewState.zoomSpec.t2(newT2)
       , lastTime + 10)
   bindKeys: ->
     shortcut.add "Ctrl+P", (ev) =>
       @$.music.seekPlayOrPause(@zoomInX.invert(@viewState.mouse.pos().e(1)))
     zoomAnimSec = .2
     shortcut.add "Ctrl+Escape", =>
       @animatedZoom(0, @viewState.zoomSpec.duration(), zoomAnimSec)

0 comments (0 inline, 0 general)