changeset 1462:d8929e28b8bc

TL: bring back debug line. optimize refreshes when only time cursor changed Ignore-this: f0a90866c1e909c4f8365873f63c8c24
author drewp@bigasterisk.com
date Sun, 12 Jun 2016 02:36:29 +0000
parents a7de122a7b18
children d5a0c77dfc5b
files light9/web/timeline/index.html light9/web/timeline/timeline-elements.html light9/web/timeline/timeline.coffee
diffstat 3 files changed, 18 insertions(+), 3 deletions(-) [+]
line wrap: on
line diff
--- a/light9/web/timeline/index.html	Sun Jun 12 02:12:28 2016 +0000
+++ b/light9/web/timeline/index.html	Sun Jun 12 02:36:29 2016 +0000
@@ -7,7 +7,7 @@
     <link rel="import" href="timeline-elements.html"
   </head>
   <body>
-    <light9-timeline-editor style="width: 100%; height: 600px">
+    <light9-timeline-editor style="width: 100%; height: 400px">
     </light9-timeline-editor>
   </body>
 </html>
--- a/light9/web/timeline/timeline-elements.html	Sun Jun 12 02:12:28 2016 +0000
+++ b/light9/web/timeline/timeline-elements.html	Sun Jun 12 02:36:29 2016 +0000
@@ -32,6 +32,11 @@
          position: absolute;
          left: 0; top: 0; right: 0; bottom: 0;
      }
+     #debug {
+      background: white;
+      font-family: monospace;
+      font-size: 125%;
+     }
     </style>
     <div>
       <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph>
@@ -43,7 +48,7 @@
       timeline editor: song <edit-choice graph="{{graph}}" uri="{{song}}"></edit-choice>
       <label><input type="checkbox" checked="{{followPlayerSong::change}}" > follow player song choice</label>
     </div>
-    <div>[[debug]]</div>
+    <div id="debug">[[debug]]</div>
     <iron-ajax id="vidrefTime" url="/vidref/time" method="PUT" content-type="application/json"></iron-ajax>
     <light9-timeline-audio id="audio"
                            graph="{{graph}}"
--- a/light9/web/timeline/timeline.coffee	Sun Jun 12 02:12:28 2016 +0000
+++ b/light9/web/timeline/timeline.coffee	Sun Jun 12 02:36:29 2016 +0000
@@ -34,6 +34,7 @@
     @song = @playerSong if @followPlayerSong
 
   ready: ->
+    @debug_zoomOrLayoutChangedCount = 0
     @viewState =
       zoomSpec:
         duration: ko.observable(100)
@@ -46,6 +47,11 @@
     @fullZoomX = d3.scaleLinear()
     @zoomInX = d3.scaleLinear()
     @setAdjuster = @$.adjusters.setAdjuster.bind(@$.adjusters)
+
+    setInterval(@updateDebugSummary.bind(@), 100)
+
+  updateDebugSummary: ->
+    @debug = "#{@debug_zoomOrLayoutChangedCount} layout change, "
     
   attached: ->
     @dia = @$.dia
@@ -59,6 +65,9 @@
     @makeZoomAdjs()
 
   zoomOrLayoutChanged: ->
+    # not for cursor updates
+
+    @debug_zoomOrLayoutChangedCount++
     @fullZoomX.domain([0, @viewState.zoomSpec.duration()])
     @fullZoomX.range([0, @width()])
 
@@ -72,7 +81,8 @@
     @dia.setTimeAxis(@width(), @$.zoomed.$.audio.offsetTop, @zoomInX)
     @$.adjusters.updateAllCoords()
 
-    @songTimeChanged()
+    # cursor needs update when layout changes, but I don't want zoom/layout to depend on the playback time
+    setTimeout(@songTimeChanged.bind(@), 1)
 
   songTimeChanged: ->
     @dia.setCursor(@$.audio.offsetTop, @$.audio.offsetHeight,