Mercurial > code > home > repos > light9

changeset 1332:1310a807de06

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
show seconds on the zooming area Ignore-this: a6373dc818bbba9ba2fc535c5e98d1fa
author Drew Perttula <drewp@bigasterisk.com>
date Sat, 04 Jun 2016 08:46:11 +0000
parents 14b8e874e89b
children b355f8089950
files light9/web/timeline-elements.html light9/web/timeline.coffee
diffstat 2 files changed, 21 insertions(+), 9 deletions(-) [+]
line wrap: on
line diff
--- a/light9/web/timeline-elements.html	Sat Jun 04 08:45:16 2016 +0000
+++ b/light9/web/timeline-elements.html	Sat Jun 04 08:46:11 2016 +0000
@@ -80,7 +80,7 @@
     </style>
     <div>
       <light9-timeline-time-axis id="time"></light9-timeline-time-axis>
-      <light9-timeline-audio zoom="{{zoomFlattened}}"></light9-timeline-audio>
+      <light9-timeline-audio id="audio" zoom="{{zoomFlattened}}"></light9-timeline-audio>
       <template is="dom-repeat" items="{{rows}}">
         <light9-timeline-graph-row></light9-timeline-graph-row>
       </template>
@@ -142,6 +142,7 @@
             y="631.3988"
             id="text4290"
             sodipodi:linespacing="125%" ><tspan sodipodi:role="line" id="tspan4292" x="-338.38403" y="631.3988">spotchase</tspan></text>
+        <g id="timeAxis" transform="translate(0,40)"></g>
         <g id="mouse"></g>
         <g id="notes"></g>
         <g id="connectors"></g>
@@ -159,15 +160,14 @@
 <!-- seconds labels -->
 <dom-module id="light9-timeline-time-axis">
   <template>
-    <pre>0 sec    10   20   30   40   50</pre>
+    <style>
+     div {
+         width: 100%;
+         height: 31px;
+     }
+    </style>
+    <div></div>
   </template>
-  <script>
-   Polymer({
-       is: "light9-timeline-time-axis",
-       properties: {
-       }
-   });
-  </script>
 </dom-module>
 
 <!-- one row of notes -->
--- a/light9/web/timeline.coffee	Sat Jun 04 08:45:16 2016 +0000
+++ b/light9/web/timeline.coffee	Sat Jun 04 08:46:11 2016 +0000
@@ -29,6 +29,7 @@
     ko.computed =>
       @fullZoomX = d3.scaleLinear().domain([0, @viewState.zoomSpec.duration()]).range([0, @width()])
       @zoomInX = d3.scaleLinear().domain([@viewState.zoomSpec.t1(), @viewState.zoomSpec.t2()]).range([0, @width()])
+      @dia.setTimeAxis(@width(), @$.zoomed.$.audio.offsetTop, @zoomInX)
       @$.adjusters.updateAllCoords()
 
     animCursor = () => 
@@ -116,6 +117,12 @@
     return [left, right, pan]
 
 Polymer
+  is: "light9-timeline-time-axis",
+  # for now since it's just one line calling dia,
+  # light9-timeline-editor does our drawing work.
+
+
+Polymer
   is: "light9-timeline-adjusters"
   properties:
     adjs: { type: Array },
@@ -191,6 +198,11 @@
     window.setNote = @setNote.bind(this)
     window.setMouse = @setMouse.bind(this)
 
+  setTimeAxis: (width, yTop, scale) ->
+    pxPerTick = 50
+    axis = d3.axisTop(scale).ticks(width / pxPerTick)
+    d3.select(@$.timeAxis).attr('transform', 'translate(0,'+yTop+')').call(axis)
+
   setMouse: (pos) ->
     elem = @getOrCreateElem('mouse-x', 'mouse', 'path', {style: "fill:none;stroke:#333;stroke-width:0.5;"})
     elem.setAttribute('d', svgPathFromPoints([[-999, pos.e(2)], [999, pos.e(2)]]))