2 files changed, 44 insertions, 11 deletions

diff --git a/node_modules/montage/ui/flow.reel/flow.html b/node_modules/montage/ui/flow.reel/flow.html
index b00512cf..4d8cc16b 100644
--- a/node_modules/montage/ui/flow.reel/flow.html
+++ b/node_modules/montage/ui/flow.reel/flow.html
@@ -10,7 +10,7 @@
     <script type="text/montage-serialization">
         {
             "repetition": {
-                "prototype": "montage/ui/repetition.reel",
+                "prototype": "ui/repetition.reel",
                 "properties": {
                     "element": {
                         "#": "montage-flow-repetition"
@@ -18,7 +18,7 @@
                 }
             },
             "translateComposer": {
-                "prototype": "montage/ui/composer/translate-composer",
+                "prototype": "ui/composer/translate-composer",
                 "properties": {
                     "component": {"@": "owner"},
                     "minTranslateX": 0,
@@ -27,12 +27,10 @@
                 },
                 "bindings": {
                     "element": {"<-": "@owner._element"},
-                    "maxTranslateX": {"<-": "@owner.maxTranslateX"},
-                    "translateX": {"->": "@owner.translateX"}
+                    "maxTranslateX": {"<-": "@owner.maxTranslateX"}
                 }
             },
             "owner": {
-                "prototype": "montage/ui/flow.reel",
                 "properties": {
                     "element": {
                         "#": "montage-flow"
@@ -48,7 +46,8 @@
                     "isSelectionEnabled": {
                         "boundObject": {"@": "repetition"},
                         "boundObjectPropertyPath": "isSelectionEnabled"
-                    }
+                    },
+                    "translateX": {"<-": "@translateComposer.translateX"}
                 }
             }
         }
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) {