# HG changeset patch
# User Drew Perttula <drewp@bigasterisk.com>
# Date 1465004356 0
# Node ID a77bb5bf9d899a08cd40eda3960efceb89a3c8db
# Parent  fb8aa1cb96e1f73396bf17a12d1406ef9d9f1027
switch zoom system to ko.observable, which works much better
Ignore-this: a35d2a2a045cdc4d5002ba5f5085fbef

diff -r fb8aa1cb96e1 -r a77bb5bf9d89 light9/web/graph.coffee
--- a/light9/web/graph.coffee	Fri Jun 03 22:42:27 2016 +0000
+++ b/light9/web/graph.coffee	Sat Jun 04 01:39:16 2016 +0000
@@ -65,7 +65,9 @@
 
   applyAndSendPatch: (patch, cb) ->
     @applyPatch(patch)
-    console.log('patch to server:', patch)
+    #console.log('patch to server:')
+    #console.log('  delete:', JSON.stringify(patch.delQuads))
+    #console.log('  add:', JSON.stringify(patch.addQuads))
     # post to server
 
   applyPatch: (patch) ->
diff -r fb8aa1cb96e1 -r a77bb5bf9d89 light9/web/lib/bower.json
--- a/light9/web/lib/bower.json	Fri Jun 03 22:42:27 2016 +0000
+++ b/light9/web/lib/bower.json	Sat Jun 04 01:39:16 2016 +0000
@@ -8,7 +8,7 @@
     "underscore": "~1.8.3",
     "jquery-ui": "~1.11.4",
     "QueryString": "http://unixpapa.com/js/QueryString.js",
-    "knockout": "~3.4.0",
+    "knockout": "knockoutjs#^3.4.0",
     "sylvester": "~0.1.3",
     "d3": "https://github.com/d3/d3.git#e7194db33090a0afc06c77a959594361ffb949df",
     "rdflib.js": "https://github.com/linkeddata/rdflib.js.git#920e59fe37",
diff -r fb8aa1cb96e1 -r a77bb5bf9d89 light9/web/light9-timeline-audio.html
--- a/light9/web/light9-timeline-audio.html	Fri Jun 03 22:42:27 2016 +0000
+++ b/light9/web/light9-timeline-audio.html	Sat Jun 04 01:39:16 2016 +0000
@@ -39,15 +39,17 @@
            if (!zoom.duration) {
                return "100%";
            }
+
            return (100 / ((zoom.t2 - zoom.t1) / zoom.duration)) + "%";
        },
        _imgLeft: function(zoom) {
            if (!zoom.duration) {
                return "0";
            }
-           return (-100 * zoom.t1 / zoom.duration) + "%";
+
+           var percentPerSec = 100 / (zoom.t2 - zoom.t1);
+           return (-percentPerSec * zoom.t1) + '%';
        },
-       
    });
   </script>
 </dom-module>
diff -r fb8aa1cb96e1 -r a77bb5bf9d89 light9/web/timeline-elements.html
--- a/light9/web/timeline-elements.html	Fri Jun 03 22:42:27 2016 +0000
+++ b/light9/web/timeline-elements.html	Sat Jun 04 01:39:16 2016 +0000
@@ -42,7 +42,7 @@
          See from current time -> end .. shift+esc
          Zoom all .. ctrl+esc
        -->
-    <light9-timeline-audio id="audio"></light9-timeline-audio> <!-- should have a zoom-out cursor on it, or zigzag the one cursor -->
+    <light9-timeline-audio id="audio"></light9-timeline-audio>
     <light9-timeline-time-zoomed id="zoomed" zoom="{{viewState.zoomSpec}}"></light9-timeline-time-zoomed>
     <light9-timeline-diagram-layer id="dia"></light9-timeline-diagram-layer>
     <light9-timeline-adjusters id="adjusters" adjs="{{adjs}}"></light9-timeline-adjusters>
@@ -76,7 +76,7 @@
     </style>
     <div>
       <light9-timeline-time-axis id="time"></light9-timeline-time-axis>
-      <light9-timeline-audio zoom="{{zoom}}"></light9-timeline-audio>
+      <light9-timeline-audio zoom="{{zoomFlattened}}"></light9-timeline-audio>
       <template is="dom-repeat" items="{{rows}}">
         <light9-timeline-graph-row></light9-timeline-graph-row>
       </template>
@@ -85,12 +85,18 @@
   <script>
    Polymer({
        is: "light9-timeline-time-zoomed",
-    behaviors: [
-      Polymer.IronResizableBehavior
-    ],
+       behaviors: [
+           Polymer.IronResizableBehavior
+       ],
        properties: {
            rows: {value: [0, 1, 2, 3]},
-           zoom: {type: Object, notify: true}
+           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>
@@ -378,5 +384,6 @@
 <script src="/lib/sylvester/sylvester.js"></script>
 <script src="/lib/d3/build/d3.js"></script>
 <script src="/lib/N3.js/browser/n3-browser.js"></script>
+<script src="/lib/knockout/dist/knockout.js"></script>
 <script src="graph.js"></script>
 <script src="timeline.js"></script>
diff -r fb8aa1cb96e1 -r a77bb5bf9d89 light9/web/timeline.coffee
--- a/light9/web/timeline.coffee	Fri Jun 03 22:42:27 2016 +0000
+++ b/light9/web/timeline.coffee	Sat Jun 04 01:39:16 2016 +0000
@@ -49,26 +49,28 @@
   endDrag: () ->
     0
 
-class AdjustableFloatJsValue extends Adjustable
+class AdjustableFloatObservable extends Adjustable
   constructor: (@config) ->
-    # config has obj, key, valueLow, targetLow, valueHigh, targetHigh, getSuggestedTargetOffset, onChange
-    @_normalizedValue = d3.scaleLinear().domain([@config.valueLow, @config.valueHigh]).range([0, 1])
+    # config has observable, valueLow, targetLow, valueHigh, targetHigh, getSuggestedTargetOffset
+    ko.computed =>
+      @_normalizedValue = d3.scaleLinear().domain([
+        ko.unwrap(@config.valueLow),
+        ko.unwrap(@config.valueHigh)]).range([0, 1])
 
   _getValue: () ->
-    @config.obj[@config.key]
+    @config.observable()
 
   getTarget: () ->
     f = @_normalizedValue(@_getValue())
-    [l, h] = [@config.targetLow, @config.targetHigh]
-    return l.add(h.subtract(l).multiply(f))
+    [lo, hi] = [ko.unwrap(@config.targetLow),
+                ko.unwrap(@config.targetHigh)]
+    return lo.add(hi.subtract(lo).multiply(f))
     
   continueDrag: (pos) ->
     # pos is vec2 of pixels relative to the drag start
     
-    # todo
-    newValue = @dragStartValue + pos.e(1) * .1
-    @config.obj[@config.key] = newValue
-    @config.onChange()
+    newValue = @dragStartValue + pos.e(1) * .2
+    @config.observable(newValue)
 
 
 class AdjustableFloatObject extends Adjustable
@@ -98,21 +100,23 @@
   behaviors: [ Polymer.IronResizableBehavior ]
   properties:
     viewState: { type: Object }
-    debug: {type: String, computed: '_debug(viewState.zoomSpec.t1)'}
-  _debug: (viewState) ->
-    JSON.stringify(@viewState)
+    debug: {type: String}
+    
   attached: ->
     @viewState =
       zoomSpec:
-        duration: 190
-        t1: 102
-        t2: 161
+        duration: ko.observable(190)
+        t1: ko.observable(102)
+        t2: ko.observable(161)
       cursor:
-        t: 105
+        t: ko.observable(105)
 
-    @fullZoomX = d3.scaleLinear().domain([0, @viewState.zoomSpec.duration]).range([0, @offsetWidth]) # need to update this if width changes or if duration changes
-    @zoomInX = d3.scaleLinear().domain([@viewState.zoomSpec.t1, @viewState.zoomSpec.t2]).range([0, @offsetWidth]) # need to update this if width changes or if duration changes
+    ko.computed =>
+      @debug = ko.toJSON(@viewState)
 
+    ko.computed =>
+      @fullZoomX = d3.scaleLinear().domain([0, @viewState.zoomSpec.duration()]).range([0, @offsetWidth]) # need to update this if width changes or if duration changes
+      @zoomInX = d3.scaleLinear().domain([@viewState.zoomSpec.t1(), @viewState.zoomSpec.t2()]).range([0, @offsetWidth]) # need to update this if width changes or if duration changes
 
     animCursor = () => 
       #@viewState.cursor.t = 130 + 20 * Math.sin(Date.now() / 2000)
@@ -121,7 +125,7 @@
                        @$.zoomed.$.time.offsetHeight,
                        @fullZoomX, @zoomInX, @viewState.cursor)
 
-      @set('viewState.zoomSpec.t1', 80 + 10 * Math.sin(Date.now() / 3000))
+      @viewState.zoomSpec.t1(80 + 10 * Math.sin(Date.now() / 3000))
       
     #setInterval(animCursor, 50)
 
@@ -152,26 +156,22 @@
 
   makeZoomAdjs: ->
     
-    left = new AdjustableFloatJsValue({
-      obj: @viewState.zoomSpec,
-      key: 't1'
+    left = new AdjustableFloatObservable({
+      observable: @viewState.zoomSpec.t1,
       valueLow: 0
       valueHigh: @viewState.zoomSpec.duration
       targetLow: $V([0, 30])  # y = @$.audio.offsetTop + @$.audio.offsetHeight / 2]
       targetHigh: $V([@offsetWidth, 30])
       getSuggestedTargetOffset: () => $V([-30, 0])
-      onChange: () => @notifyPath('viewState.zoomSpec.t1', @viewState.zoomSpec.t1)
     })
 
-    right = new AdjustableFloatJsValue({
-      obj: @viewState.zoomSpec,
-      key: 't2'
+    right = new AdjustableFloatObservable({
+      observable: @viewState.zoomSpec.t2,
       valueLow: 0
       valueHigh: @viewState.zoomSpec.duration
       targetLow: $V([0, 30])  # y = @$.audio.offsetTop + @$.audio.offsetHeight / 2]
       targetHigh: $V([@offsetWidth, 30])
       getSuggestedTargetOffset: () => $V([30, 0])
-      onChange: () => @notifyPath('viewState.zoomSpec.t2', @viewState.zoomSpec.t2)
     })
     return [left, right]