light9 Changeset - d8929e28b8bc

Changeset - d8929e28b8bc

Parent rev.

Child rev.

[Not reviewed]

default

0 3 0

drewp@bigasterisk.com - 9 years ago 2016-06-12 02:36:29
drewp@bigasterisk.com

TL: bring back debug line. optimize refreshes when only time cursor changed
Ignore-this: f0a90866c1e909c4f8365873f63c8c24

3 files changed with 18 insertions and 3 deletions:

light9/web/timeline/index.html

light9/web/timeline/timeline-elements.html

light9/web/timeline/timeline.coffee

0 comments (0 inline, 0 general)

light9/web/timeline/index.html

➞

Show inline comments

@@ @@ -4,10 +4,10 @@ @@
     <title>timeline</title>
     <meta charset="utf-8" />
     <script src="/lib/webcomponentsjs/webcomponents-lite.min.js"></script>
     <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>

light9/web/timeline/timeline-elements.html

➞

Show inline comments

@@ @@ -29,24 +29,29 @@ @@
          flex-grow: 1;
+     }
      light9-timeline-diagram-layer, light9-timeline-adjusters {
          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>
       <light9-music id="music"
                     song="{{playerSong}}"
                     t="{{songTime}}"
                     playing="{{songPlaying}}"
                     duration="{{songDuration}}"></light9-music>
       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}}"
                            show="{{show}}"
                            song="{{song}}"></light9-timeline-audio>
     <light9-timeline-time-zoomed id="zoomed"

light9/web/timeline/timeline.coffee

➞

Show inline comments

@@ @@ -31,24 +31,30 @@ Polymer @@
   _onSongDuration: (d) ->
     @viewState.zoomSpec.duration(d)
   setSong: (s) ->
     @song = @playerSong if @followPlayerSong
   ready: ->
     @debug_zoomOrLayoutChangedCount = 0
     @viewState =
       zoomSpec:
         duration: ko.observable(100)
         t1: ko.observable(0) # need validation to stay in bounds and not go too close
         t2: ko.observable(100)
       cursor:
         t: ko.observable(20)
       mouse:
         pos: ko.observable($V([0,0]))
     @fullZoomX = d3.scaleLinear()
     @zoomInX = d3.scaleLinear()
     @setAdjuster = @$.adjusters.setAdjuster.bind(@$.adjusters)
     setInterval(@updateDebugSummary.bind(@), 100)
   updateDebugSummary: ->
     @debug = "#{@debug_zoomOrLayoutChangedCount} layout change, "
   attached: ->
     @dia = @$.dia
     ko.computed(@zoomOrLayoutChanged.bind(@)).extend({rateLimit: 5})
     ko.computed(@songTimeChanged.bind(@))
@@ @@ -56,12 +62,15 @@ Polymer @@
     @bindKeys()
     @bindWheelZoom()
     @makeZoomAdjs()
   zoomOrLayoutChanged: ->
     # not for cursor updates
     @debug_zoomOrLayoutChangedCount++
     @fullZoomX.domain([0, @viewState.zoomSpec.duration()])
     @fullZoomX.range([0, @width()])
     # had trouble making notes update when this changes
     zoomInX = d3.scaleLinear()
     zoomInX.domain([@viewState.zoomSpec.t1(), @viewState.zoomSpec.t2()])
@@ @@ -69,13 +78,14 @@ Polymer @@
     @zoomInX = zoomInX
     # todo: these run a lot of work purely for a time change
     @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,
                      @$.zoomed.$.time.offsetTop,
                      @$.zoomed.$.time.offsetHeight,
                      @fullZoomX, @zoomInX, @viewState.cursor)

0 comments (0 inline, 0 general)