Timeline: Hook up data binding for changes on subproperties.

4 files changed, 127 insertions, 28 deletions

diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 5206ae16..b54d6ce0 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -314,9 +314,11 @@ var Layer = exports.Layer = Montage.create(Component, {
                 return this._isMainCollapsed;
         },
         set: function(newVal) {
-                this.log('layer.js: isMainCollapsed: ' + newVal);
                 if (newVal !== this._isMainCollapsed) {
+                        this.log('layer.js: isMainCollapsed: ' + newVal);
                         this._isMainCollapsed = newVal;
+                        this.layerData.isMainCollapsed = newVal;
+                        // this.triggerOutgoingBinding();
                 }
         }
     },
@@ -333,6 +335,8 @@ var Layer = exports.Layer = Montage.create(Component, {
         set: function(newVal) {
                 if (newVal !== this._isTransformCollapsed) {
                         this._isTransformCollapsed = newVal;
+                        this.layerData.isTransformCollapsed = newVal;
+                        this.triggerOutgoingBinding();
                         //this.needsDraw = true;
                 }
         }
@@ -350,6 +354,8 @@ var Layer = exports.Layer = Montage.create(Component, {
         set: function(newVal) {
                 if (newVal !== this._isPositionCollapsed) {
                         this._isPositionCollapsed = newVal;
+                        this.layerData.isPositionCollapsed = newVal;
+                        this.triggerOutgoingBinding();
                         //this.needsDraw = true;
                 }
         }
@@ -367,6 +373,8 @@ var Layer = exports.Layer = Montage.create(Component, {
         set: function(newVal) {
                 if (newVal !== this._isStyleCollapsed) {
                         this._isStyleCollapsed = newVal;
+                        this.layerData.isStyleCollapsed = newVal;
+                        this.triggerOutgoingBinding();
                         //this.needsDraw = true;
                 }
         }
@@ -381,7 +389,11 @@ var Layer = exports.Layer = Montage.create(Component, {
                 return this._bypassAnimation;
         },
         set: function(newVal) {
-                this._bypassAnimation = newVal;
+                if (newVal !== this._bypassAnimation) {
+                        this._bypassAnimation = newVal;
+                        this.layerData.bypassAnimation = newVal;
+                        //this.triggerOutgoingBinding();        
+                }
         }
     },
 
@@ -426,6 +438,36 @@ var Layer = exports.Layer = Montage.create(Component, {
             this.needsDraw = true;
         }
     },
+    
+    /* Data binding point and outgoing binding trigger method */
+    _bindingPoint : {
+        serializable: true,
+        value : {}
+    },
+    bindingPoint: {
+        serializable: true,
+        get: function() {
+                return this._bindingPoint;
+        },
+        set: function(newVal) {
+                if (newVal !== this._bindingPoint) {
+                        this._bindingPoint = newVal;
+                        this.setData();
+                }
+        }
+    },
+    
+    triggerOutgoingBinding : {
+        value: function() {
+                if (this.layerData.triggerBinding === true) {
+                        this.layerData.triggerBinding = false;
+                } else {
+                        this.layerData.triggerBinding = true;
+                }
+        }
+    },
+    
+    // Is this the first draw?
     _isFirstDraw : {
         value: true
     },
@@ -700,44 +742,52 @@ var Layer = exports.Layer = Montage.create(Component, {
                 value: function(event) {
                         this.mainCollapser.bypassAnimation = false;
                         this.bypassAnimation = false;
+                        this.layerData.bypassAnimation = false;
                         if (this.isMainCollapsed) {
                                 this.isMainCollapsed = false;
                         } else {
                                 this.isMainCollapsed = true;
                         }
+                        this.triggerOutgoingBinding();
                 }
         },
         handlePositionCollapserClick : {
                 value: function(event) {
                         this.positionCollapser.bypassAnimation = false;
                         this.bypassAnimation = false;
+                        this.layerData.bypassAnimation = false;
                         if (this.isPositionCollapsed) {
                                 this.isPositionCollapsed = false;
                         } else {
                                 this.isPositionCollapsed = true;
                         }
+                        this.triggerOutgoingBinding();
                 }
         },
         handleTransformCollapserClick : {
                 value: function(event) {
                         this.transformCollapser.bypassAnimation = false;
                         this.bypassAnimation = false;
+                        this.layerData.bypassAnimation = false;
                         if (this.isTransformCollapsed) {
                                 this.isTransformCollapsed = false;
                         } else {
                                 this.isTransformCollapsed = true;
                         }
+                        this.triggerOutgoingBinding();
                 }
         },
         handleStyleCollapserClick : {
                 value: function(event) {
                         this.styleCollapser.bypassAnimation = false;
                         this.bypassAnimation = false;
+                        this.layerData.bypassAnimation = false;
                         if (this.isStyleCollapsed) {
                                 this.isStyleCollapsed = false;
                         } else {
                                 this.isStyleCollapsed = true;
                         }
+                        this.triggerOutgoingBinding();
                 }
         },
         /* End: Event handlers */
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 14c5f1c8..34860ae7 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -77,7 +77,12 @@
                                 "boundObject" : {"@" : "repetition1"},
                                 "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData",
                                 "oneway" : false
-                        }
+                        },
+                        "bindingPoint" : {
+                            "boundObject" : {"@" : "repetition1"},
+                            "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData.triggerBinding",
+                            "oneway" : false
+                        }
                         }
                     },
                     
@@ -107,7 +112,13 @@
                             "boundObject" : {"@" : "repetition2"},
                             "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData",
                             "oneway" : false
+                        },
+                        "bindingPoint" : {
+                            "boundObject" : {"@" : "repetition2"},
+                            "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData.triggerBinding",
+                            "oneway" : false