Mercurial > code > home > repos > light9

changeset 1729:338ea27aeb23

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fix axis and cursor Ignore-this: c53185c841b29ce43356c2858d275e0e
author Drew Perttula <drewp@bigasterisk.com>
date Sat, 12 May 2018 09:22:00 +0000
parents d7e4d5b0d61e
children 7d2d20f06d1d
files light9/web/timeline/timeline-elements.html light9/web/timeline/timeline.coffee
diffstat 2 files changed, 60 insertions(+), 49 deletions(-) [+]
line wrap: on
line diff
--- a/light9/web/timeline/timeline-elements.html	Fri May 11 10:11:29 2018 +0000
+++ b/light9/web/timeline/timeline-elements.html	Sat May 12 09:22:00 2018 +0000
@@ -110,7 +110,7 @@
      }
     </style>
     <div id="top">
-      <light9-timeline-time-axis id="time"></light9-timeline-time-axis>
+      <light9-timeline-time-axis id="time" view-state="{{viewState}}"></light9-timeline-time-axis>
       <light9-timeline-audio id="audio"
                              graph="{{graph}}"
                              song="{{song}}"
@@ -136,17 +136,16 @@
 <dom-module id="light9-timeline-diagram-layer">
   <template>
     <style>
-      :host {
-      }
-      svg {
-      width: 100%;
-      height: 100%;
-      }
-      #notes > path {
-      
-      stroke:#000000;
-      stroke-width:1.5;
-      }
+     :host {
+     }
+     svg {
+         width: 100%;
+         height: 100%;
+     }
+     #notes > path {
+         stroke:#000000;
+         stroke-width:1.5;
+     }
      #notes > path.hover {
          stroke-width: 1.5;
          stroke: #888;
@@ -167,7 +166,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="zzztimeAxis" transform="translate(0,40)"></g>
         <g id="mouse"></g>
         <g id="notes"></g>
       </g>
@@ -202,12 +201,18 @@
 <dom-module id="light9-timeline-time-axis">
   <template>
     <style>
-     div {
-         width: 100%;
-         height: 31px;
-     }
+      div {
+          width: 100%;
+          height: 31px;
+      }
+      svg {
+          width: 100%;
+          height: 30px;
+      }
     </style>
-    <div></div>
+    <svg id="timeAxis" xmlns="http://www.w3.org/2000/svg">
+      <g id="axis" transform="translate(0,30)"></g>    
+    </svg>
   </template>
 </dom-module>
 
--- a/light9/web/timeline/timeline.coffee	Fri May 11 10:11:29 2018 +0000
+++ b/light9/web/timeline/timeline.coffee	Sat May 12 09:22:00 2018 +0000
@@ -109,6 +109,10 @@
     @zoomInX = d3.scaleLinear()
 
     ko.computed(@zoomOrLayoutChanged.bind(@))    
+ 
+  setWidth: (w) ->
+    @width(w)
+    @zoomOrLayoutChanged() # before other handleers run
     
   zoomOrLayoutChanged: () ->
     log('zoomOrLayoutChanged')
@@ -124,11 +128,9 @@
     @fullZoomX.domain([0, @zoomSpec.duration()])
     @fullZoomX.range([0, @width()])
 
-    # had trouble making notes update when this changes
-    zoomInX = d3.scaleLinear()
-    zoomInX.domain([@zoomSpec.t1(), @zoomSpec.t2()])
-    zoomInX.range([0, @width()])
-    @zoomInX = zoomInX
+    @zoomInX.domain([@zoomSpec.t1(), @zoomSpec.t2()])
+    @zoomInX.range([0, @width()])
+    log('update zoomInX')
     
   latestMouseTime: ->
     @zoomInX.invert(@mouse.pos().e(1))
@@ -165,9 +167,8 @@
         @zoomSpec.t2(newT2)
       , lastTime + 10)  
     
-class TimelineEditor extends Polymer.Element
+class TimelineEditor extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element)
   @is: 'light9-timeline-editor'
-  @behaviors: [ Polymer.IronResizableBehavior ]
   @properties:
     viewState: { type: Object }
     debug: {type: String}
@@ -178,12 +179,10 @@
     followPlayerSong: {type: Boolean, notify: true, value: true}
     song: {type: String, notify: true}
     show: {value: 'http://light9.bigasterisk.com/show/dance2017'}
-    songTime: {type: Number, notify: true, observer: '_onSongTime'}
-    songDuration: {type: Number, notify: true, observer: '_onSongDuration'}
+    songTime: {type: Number, notify: true},#, observer: '_onSongTime'}
+    songDuration: {type: Number, notify: true},#, observer: '_onSongDuration'}
     songPlaying: {type: Boolean, notify: true}
     selection: {type: Object, notify: true}
-  @listeners:
-    'iron-resize': '_onIronResize'
   @observers: [
     'setSong(playerSong, followPlayerSong)',
     'onGraph(graph)',
@@ -191,8 +190,9 @@
     
   connectedCallback: ->
     super.connectedCallback()
+    
     ko.options.deferUpdates = true;
-
+    
     @dia = @$.dia
     
 
@@ -207,8 +207,8 @@
       ac = @$.adjustersCanvas
       setTimeout((()=>ac.setAdjuster(adjId, makeAdjustable)),10)
 
+    ko.computed(@zoomOrLayoutChanged.bind(@))
     setTimeout =>
-      ko.computed(@zoomOrLayoutChanged.bind(@))
       ko.computed(@songTimeChanged.bind(@))
 
       @trackMouse()
@@ -227,13 +227,17 @@
       setInterval(@updateDebugSummary.bind(@), 100)
     , 500
 
+    @addEventListener('iron-resize', @_onIronResize.bind(@))
+    @_onIronResize()
+    
     #if anchor == loadtest
     #  add note and delete it repeatedly
     #  disconnect the graph, make many notes, drag a point over many steps, measure lag somewhere
 
   _onIronResize: ->
-    log('set w to',   @offsetWidth)
-    @viewState.width(@offsetWidth)
+    @viewState.setWidth(@offsetWidth)
+
+    log('changed width')
   _onSongTime: (t) ->
     @viewState.cursor.t(t)
   _onSongDuration: (d) ->
@@ -262,7 +266,8 @@
   
     # todo: these run a lot of work purely for a time change
     if @$.zoomed?.$?.audio?
-      @dia.setTimeAxis(vs.width(), @$.zoomed.$.audio.offsetTop, vs.zoomInX)
+      vs.zoomSpec.t1()
+      #@dia.setTimeAxis(vs.width(), @$.zoomed.$.audio.offsetTop, vs.zoomInX)
       @$.adjustersCanvas.updateAllCoords()
 
     # cursor needs update when layout changes, but I don't want
@@ -273,7 +278,7 @@
     return unless @$.zoomed?.$?.time?
     @$.cursorCanvas.setCursor(@$.audio.offsetTop, @$.audio.offsetHeight,
                               @$.zoomed.$.time.offsetTop,
-                              @$.zoomed.$.time.offsetHeight,
+                              30,#@$.zoomed.$.time.offsetHeight,
                               @viewState)
     
   trackMouse: ->
@@ -286,8 +291,8 @@
         if ev.touches?.length
           ev = ev.touches[0]
 
-        @root = @getBoundingClientRect()
-        @viewState.mouse.pos($V([ev.pageX - @root.left, ev.pageY - @root.top]))
+        root = @$.cursorCanvas.getBoundingClientRect()
+        @viewState.mouse.pos($V([ev.pageX - root.left, ev.pageY - root.top]))
 
         @$.cursorCanvas.setMouse(@viewState.mouse.pos())
         # should be controlled by a checkbox next to follow-player-song-choice
@@ -384,7 +389,7 @@
 # plan: in here, turn all the notes into simple js objects with all
 # their timing data and whatever's needed for adjusters. From that, do
 # the brick layout. update only changing adjusters.
-class TimeZoomed extends Polymer.Element
+class TimeZoomed extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element)
   @is: 'light9-timeline-time-zoomed'
   @behaviors: [ Polymer.IronResizableBehavior ]
   @properties:
@@ -398,7 +403,6 @@
     'onGraph(graph, setAdjuster, song, viewState, project)',
     'onZoom(viewState)',
   ]
-  @listeners: {'iron-resize': 'update'}
   update: ->
     @renderer.resize(@clientWidth, @clientHeight)
     @renderer.render(@stage)
@@ -420,11 +424,11 @@
   connectedCallback: ->
     super.connectedCallback()
      
+    @addEventListener('iron-resize', @update.bind(@))
+    @update()
+    
     @$.rows.appendChild(@renderer.view);
   
-    # iron-resize should be doing this but it never fires
-    setInterval(@update.bind(@), 1000)
-    
   onGraph: ->
     @graph.runHandler(@gatherNotes.bind(@), 'zoom notes')
   gatherNotes: ->
@@ -487,8 +491,14 @@
 
 class TimeAxis extends Polymer.Element
   @is: "light9-timeline-time-axis",
-  # for now since it's just one line calling dia,
-  # light9-timeline-editor does our drawing work.
+  @properties:
+    viewState: { type: Object, notify: true, observer: "onViewState" }
+  onViewState: ->
+    ko.computed =>
+      dependOn = [@viewState.zoomSpec.t1(), @viewState.zoomSpec.t2()]
+      pxPerTick = 50
+      axis = d3.axisTop(@viewState.zoomInX).ticks(@viewState.width() / pxPerTick)
+      d3.select(@$.axis).call(axis)
 
 customElements.define(TimeAxis.is, TimeAxis)
 
@@ -706,11 +716,7 @@
     super.connectedCallback()
     @elemById = {}
 
-  setTimeAxis: (width, yTop, scale) ->
-    pxPerTick = 50
-    axis = d3.axisTop(scale).ticks(width / pxPerTick)
-    d3.select(@$.timeAxis).attr('transform', 'translate(0,'+yTop+')').call(axis)
-
+ 
   getOrCreateElem: (uri, groupId, tag, attrs, moreBuild) ->
     elem = @elemById[uri]
     if !elem