1 files changed, 39 insertions, 5 deletions

diff --git a/node_modules/montage/ui/flow.reel/flow.js b/node_modules/montage/ui/flow.reel/flow.js
index 9fa9d8b1..74f05d88 100644
--- a/node_modules/montage/ui/flow.reel/flow.js
+++ b/node_modules/montage/ui/flow.reel/flow.js
@@ -10,6 +10,16 @@ var Montage = require("montage").Montage,
 
 var Flow = exports.Flow = Montage.create(Component, {
 
+    _repetition: {
+        serializable: true,
+        value: null
+    },
+
+    _translateComposer: {
+        serializable: true,
+        value: null
+    },
+
     _splinePaths: {
         enumerable: false,
         value: null
@@ -78,6 +88,7 @@ var Flow = exports.Flow = Montage.create(Component, {
     },
 
     paths: { // TODO: listen for changes?
+        serializable: true,
         get: function () {
             return this._paths;
         },
@@ -124,6 +135,7 @@ var Flow = exports.Flow = Montage.create(Component, {
     },
 
     cameraPosition: {
+        serializable: true,
         get: function () {
             return this._cameraPosition;
         },
@@ -135,6 +147,7 @@ var Flow = exports.Flow = Montage.create(Component, {
     },
 
     cameraTargetPoint: {
+        serializable: true,
         get: function () {
             return this._cameraTargetPoint;
         },
@@ -146,6 +159,7 @@ var Flow = exports.Flow = Montage.create(Component, {
     },
 
     cameraFov: {
+        serializable: true,
         get: function () {
             return this._cameraFov;
         },
@@ -157,6 +171,7 @@ var Flow = exports.Flow = Montage.create(Component, {
     },
 
     cameraRoll: {
+        serializable: true,
         get: function () {
             return this._cameraRoll;
         },
@@ -173,6 +188,7 @@ var Flow = exports.Flow = Montage.create(Component, {
     },
 
     stride: {
+        serializable: true,
         get: function () {
             return this._stride;
         },
@@ -195,6 +211,7 @@ var Flow = exports.Flow = Montage.create(Component, {
     },
 
     scrollingTransitionDuration: { // TODO: think about using the Date Converter
+        serializable: true,
         get: function () {
             return this._scrollingTransitionDuration;
         },
@@ -231,12 +248,12 @@ var Flow = exports.Flow = Montage.create(Component, {
     },
 
     hasSelectedIndexScrolling: {
-        enumerable: false,
+        serializable: true,
         value: false
     },
 
     selectedIndexScrollingOffset: {
-        enumerable: false,
+        serializable: true,
         value: 0
     },
 
@@ -261,6 +278,7 @@ var Flow = exports.Flow = Montage.create(Component, {
     },
 
     scrollingTransitionTimingFunction: {
+        serializable: true,
         get: function () {
             return this._scrollingTransitionTimingFunction;
         },
@@ -387,6 +405,7 @@ var Flow = exports.Flow = Montage.create(Component, {
     },
 
     elementsBoundingSphereRadius: {
+        serializable: true,
         get: function () {
             return this._elementsBoundingSphereRadius;
         },
@@ -875,6 +894,7 @@ var Flow = exports.Flow = Montage.create(Component, {
     },
 
     selectedIndexes: {
+        serializable: true,
         get: function () {
             if (this._repetition) {
                 return this._repetition.selectedIndexes;
@@ -897,6 +917,7 @@ var Flow = exports.Flow = Montage.create(Component, {
     },
 
     activeIndexes: {
+        serializable: true,
         get: function () {
             if (this._repetition) {
                 return this._repetition.activeIndexes;
@@ -938,6 +959,7 @@ var Flow = exports.Flow = Montage.create(Component, {
                     }
                     this.length = maxLength;
                 }
+                this.needsDraw = true;
             }
         }
     },
@@ -966,6 +988,7 @@ var Flow = exports.Flow = Montage.create(Component, {
     },
 
     objects: {
+        serializable: true,
         get: function() {
             if (this._repetition) {
                 return this._repetition.objects;
@@ -989,6 +1012,7 @@ var Flow = exports.Flow = Montage.create(Component, {
     },
 
     contentController: {
+        serializable: true,
         get: function() {
             if (this._repetition) {
                 return this._repetition.contentController;
@@ -1011,6 +1035,7 @@ var Flow = exports.Flow = Montage.create(Component, {
     },
 
     isSelectionEnabled: {
+        serializable: true,
         get: function() {
             if (this._repetition) {
                 return this._repetition.isSelectionEnabled;
@@ -1054,7 +1079,8 @@ var Flow = exports.Flow = Montage.create(Component, {
             var orphanedFragment,
                 currentContentRange = this.element.ownerDocument.createRange(),
                 wrapper,
-                self = this;
+                self = this,
+                oldWillDraw = this._repetition.willDraw;
 
             currentContentRange.selectNodeContents(this.element);
             orphanedFragment = currentContentRange.extractContents();
@@ -1062,7 +1088,6 @@ var Flow = exports.Flow = Montage.create(Component, {
             wrapper.appendChild(orphanedFragment);
             this._repetition.indexMapEnabled = true;
             this._repetition.childComponents = this._orphanedChildren;
-            this._repetition.needsDraw = true;
             if (this._objectsForRepetition !== null) {
                 this._repetition.objects = this._objectsForRepetition;
                 this._objectsForRepetition = null;
@@ -1083,7 +1108,12 @@ var Flow = exports.Flow = Montage.create(Component, {
                 this._repetition.activeIndexes = this._activeIndexesForRepetition;
                 this._activeIndexesForRepetition = null;
             }
-            
+            this._repetition.willDraw = function () {
+                if (oldWillDraw) {
+                    oldWillDraw.apply(self._repetition, arguments);
+                }