light9 Changeset - 1310a807de06

Changeset - 1310a807de06

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

Drew Perttula - 9 years ago 2016-06-04 08:46:11
drewp@bigasterisk.com

show seconds on the zooming area
Ignore-this: a6373dc818bbba9ba2fc535c5e98d1fa

2 files changed with 21 insertions and 9 deletions:

light9/web/timeline-elements.html

light9/web/timeline.coffee

0 comments (0 inline, 0 general)

light9/web/timeline-elements.html

➞

Show inline comments

@@ @@ -77,13 +77,13 @@ @@
      light9-timeline-graph-row {
          flex-grow: 1;
+     }
     </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>
     </div>
   </template>
   <script>
@@ @@ -139,12 +139,13 @@ @@
             xml:space="preserve"
             style="font-size:13px;line-height:125%;font-family:'Verana Sans';-inkscape-font-specification:'Verana Sans';text-align:start;text-anchor:start;fill:#000000;"
             x="-338.38403"
             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>
         <g id="cursor">
           <path id="cursor1" style="fill:none; stroke:#ff0303; stroke-width:1.5; stroke-linecap:butt;" />
           <path id="cursor2" style="fill:#9c0303;" />
@@ @@ -156,21 +157,20 @@ @@
 </dom-module>
 <!-- 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 -->
 <dom-module id="light9-timeline-graph-row">
   <template>
     <style>

light9/web/timeline.coffee

➞

Show inline comments

@@ @@ -26,12 +26,13 @@ Polymer @@
     ko.computed =>
       @debug = ko.toJSON(@viewState)
     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 = () =>
       @viewState.cursor.t = 130 + 20 * Math.sin(Date.now() / 2000)
       @$.dia.setCursor(@$.audio.offsetTop, @$.audio.offsetHeight,
                        @$.zoomed.$.time.offsetTop,
@@ @@ -113,12 +114,18 @@ Polymer @@
       getValueForPos: valForPos
       })
     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 },
     dia: { type: Object }
   updateAllCoords: ->
     for elem in @querySelectorAll('light9-timeline-adjuster')
@@ @@ -188,12 +195,17 @@ Polymer @@
   properties: {}
   ready: ->
     @elemById = {}
     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)]]))
     elem = @getOrCreateElem('mouse-y', 'mouse', 'path', {style: "fill:none;stroke:#333;stroke-width:0.5;"})
     elem.setAttribute('d', svgPathFromPoints([[pos.e(1), -999], [pos.e(1), 999]]))

0 comments (0 inline, 0 general)