Mercurial > code > home > repos > light9

changeset 1380:5805056fdf93

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fix a lot of refresh and cleanup issues Ignore-this: 521fef8e76f7af266cda635d8add6c30
author Drew Perttula <drewp@bigasterisk.com>
date Wed, 08 Jun 2016 08:07:28 +0000
parents ea198addff5f
children f345d3d3ea00
files light9/web/edit-choice.coffee light9/web/timeline/adjustable.coffee light9/web/timeline/timeline-elements.html light9/web/timeline/timeline.coffee
diffstat 4 files changed, 52 insertions(+), 33 deletions(-) [+]
line wrap: on
line diff
--- a/light9/web/edit-choice.coffee	Wed Jun 08 07:04:40 2016 +0000
+++ b/light9/web/edit-choice.coffee	Wed Jun 08 08:07:28 2016 +0000
@@ -22,7 +22,8 @@
       event.preventDefault()
       @uri = event.dataTransfer.getData('text/uri-list')
       @updateLabel()
-      
+      @$.box.classList.remove('over')
+
     gotGraph: ->
       @graph.runHandler(@updateLabel.bind(@))
         
--- a/light9/web/timeline/adjustable.coffee	Wed Jun 08 07:04:40 2016 +0000
+++ b/light9/web/timeline/adjustable.coffee	Wed Jun 08 08:07:28 2016 +0000
@@ -58,7 +58,6 @@
     @root = rootElem.getBoundingClientRect() if rootElem
     offsetParentPos = $V([ev.pageX - @root.left, ev.pageY - @root.top])
 
-    setMouse(offsetParentPos) # for debugging
     return offsetParentPos 
 
 class window.AdjustableFloatObservable extends Adjustable
--- a/light9/web/timeline/timeline-elements.html	Wed Jun 08 07:04:40 2016 +0000
+++ b/light9/web/timeline/timeline-elements.html	Wed Jun 08 08:07:28 2016 +0000
@@ -51,6 +51,7 @@
                            song="{{song}}"></light9-timeline-audio>
     <light9-timeline-time-zoomed id="zoomed"
                                  graph="{{graph}}"
+                                 dia="{{dia}}"
                                  song="{{song}}"
                                  show="{{show}}"
                                  zoom="{{viewState.zoomSpec}}"
@@ -99,6 +100,8 @@
       </light9-timeline-audio>
       <template is="dom-repeat" items="{{rows}}">
         <light9-timeline-graph-row graph="{{graph}}"
+                                   dia="{{dia}}"
+                                   song="{{song}}"
                                    zoom-in-x="{{zoomInX}}"
                                    row-index="{{item}}"
         >
@@ -106,27 +109,6 @@
       </template>
     </div>
   </template>
-  <script>
-   Polymer({
-       is: "light9-timeline-time-zoomed",
-       behaviors: [
-           Polymer.IronResizableBehavior
-       ],
-       properties: {
-           graph: { type: Object, notify: true },
-           song: { type: String, notify: true },
-           zoomInX: { type: Object, notify: true },
-           rows: {value: [0,1,2]},
-           zoom: {type: Object, notify: true, observer: 'onZoom'},
-           zoomFlattened: {type: Object, notify: true}
-       },
-       onZoom: function() {
-           ko.computed(function() {
-               this.zoomFlattened = ko.toJS(this.zoom);
-           }.bind(this));
-       }
-   });
-  </script>
 </dom-module>
 
 
@@ -204,7 +186,9 @@
     </style>
     <template is="dom-repeat" items="{{noteUris}}">
       <light9-timeline-note graph="{{graph}}"
+                            dia="{{dia}}"
                             uri="{{item}}"
+                            song="{{song}}"
                             zoom-in-x="{{zoomInX}}">
       </light9-timeline-note>
     </template>
--- a/light9/web/timeline/timeline.coffee	Wed Jun 08 07:04:40 2016 +0000
+++ b/light9/web/timeline/timeline.coffee	Wed Jun 08 08:07:28 2016 +0000
@@ -44,8 +44,9 @@
     @fullZoomX = d3.scaleLinear()
     @zoomInX = d3.scaleLinear()
   attached: ->
-
+    @dia = @$.dia
     ko.computed(@zoomOrLayoutChanged.bind(@)).extend({rateLimit: 5})
+    ko.computed(@songTimeChanged.bind(@))
 
     @adjs = @makeZoomAdjs()
 
@@ -64,10 +65,13 @@
     @zoomInX = zoomInX
 
     # todo: these run a lot of work purely for a time change    
-    @$.dia.setTimeAxis(@width(), @$.zoomed.$.audio.offsetTop, @zoomInX)
+    @dia.setTimeAxis(@width(), @$.zoomed.$.audio.offsetTop, @zoomInX)
     @$.adjusters.updateAllCoords()
 
-    @$.dia.setCursor(@$.audio.offsetTop, @$.audio.offsetHeight,
+    @songTimeChanged()
+
+  songTimeChanged: ->
+    @dia.setCursor(@$.audio.offsetTop, @$.audio.offsetHeight,
                      @$.zoomed.$.time.offsetTop,
                      @$.zoomed.$.time.offsetHeight,
                      @fullZoomX, @zoomInX, @viewState.cursor)
@@ -85,7 +89,7 @@
         @root = @getBoundingClientRect()
         @viewState.mouse.pos($V([ev.pageX - @root.left, ev.pageY - @root.top]))
 
-        @$.dia.setMouse(@viewState.mouse.pos())
+        @dia.setMouse(@viewState.mouse.pos())
         #@sendMouseToVidref()
 
   sendMouseToVidref: ->
@@ -194,6 +198,22 @@
     return [left, right, pan]
 
 Polymer
+  is: 'light9-timeline-time-zoomed'
+  behaviors: [ Polymer.IronResizableBehavior ]
+  properties:
+    graph: { type: Object, notify: true }
+    dia: { type: Object, notify: true }
+    song: { type: String, notify: true }
+    zoomInX: { type: Object, notify: true }
+    rows: { value: [0, 1, 2] }
+    zoom: { type: Object, notify: true, observer: 'onZoom' }
+    zoomFlattened: { type: Object, notify: true }
+  onZoom: ->
+    updateZoomFlattened = ->
+      @zoomFlattened = ko.toJS(@zoom)
+    ko.computed(updateZoomFlattened.bind(@))
+
+Polymer
   is: "light9-timeline-time-axis",
   # for now since it's just one line calling dia,
   # light9-timeline-editor does our drawing work.
@@ -203,11 +223,14 @@
   behaviors: [ Polymer.IronResizableBehavior ]
   properties:
     graph: { type: Object, notify: true }
+    dia: { type: Object, notify: true }
+    song:  { type: String, notify: true }
     zoomInX: { type: Object, notify: true }
     noteUris: { type: Array, notify: true }
     rowIndex: { type: Object, notify: true }
   observers: [
     'onGraph(graph)'
+    'update(song)'
     ]
   onGraph: ->
     @graph.runHandler(@update.bind(@))
@@ -217,7 +240,6 @@
     @noteUris = []
     for note in @graph.objects(@song, U(':note'))
       @push('noteUris', note)
-  
 
 Polymer
   is: 'light9-timeline-note'
@@ -225,14 +247,18 @@
   listeners: 'iron-resize': 'update'
   properties:
     graph: { type: Object, notify: true }
+    dia: { type: Object, notify: true }
     uri: { type: String, notify: true }
     zoomInX: { type: Object, notify: true }
   observers: [
-    'onUri(graph, uri)'
-    'update(graph, uri, zoomInX)'
+    'onUri(graph, dia, uri)'
+    'update(graph, dia, uri, zoomInX)'
     ]
   ready: ->
 
+  detached: ->
+    @dia.clearElem(@uri)
+
   onUri: ->
     @graph.runHandler(@update.bind(@))
     
@@ -257,7 +283,7 @@
       screenPos = (pt) =>
         $V([@zoomInX(pt.e(1)), @offsetTop + (1 - pt.e(2)) * @offsetHeight])
 
-      setNote(@uri, (screenPos(pt) for pt in worldPts))
+      @dia.setNote(@uri, (screenPos(pt) for pt in worldPts))
 
     catch e
       log("during resize of #{@uri}: #{@e}")
@@ -342,6 +368,11 @@
       @adj?.continueDrag($V([d3.event.x, d3.event.y]))
     drag.on('end', () => @adj?.endDrag())
 
+    @updateDisplay()
+
+  detached: ->
+    @dia.clearElem(@myId)
+
 
 svgPathFromPoints = (pts) ->
   out = ''
@@ -360,8 +391,6 @@
   properties: {}
   ready: ->
     @elemById = {}
-    window.setNote = @setNote.bind(this)
-    window.setMouse = @setMouse.bind(this)
 
   setTimeAxis: (width, yTop, scale) ->
     pxPerTick = 50
@@ -383,6 +412,12 @@
       for k,v of attrs
         elem.setAttribute(k, v)
     return elem
+
+  clearElem: (uri) ->
+    elem = @elemById[uri]
+    if elem
+      elem.remove()
+      delete @elemById[uri]
     
   setNote: (uri, curvePts) ->
     elem = @getOrCreateElem(uri, 'notes', 'path', {style:"fill:#53774b; stroke:#000000; stroke-width:1.5;"})