2 files changed, 483 insertions, 285 deletions

diff --git a/node_modules/montage/ui/flow.reel/flow.html b/node_modules/montage/ui/flow.reel/flow.html
index 8a9603bf..b00512cf 100644
--- a/node_modules/montage/ui/flow.reel/flow.html
+++ b/node_modules/montage/ui/flow.reel/flow.html
@@ -21,11 +21,14 @@
                 "prototype": "montage/ui/composer/translate-composer",
                 "properties": {
                     "component": {"@": "owner"},
-                    "maxTranslateX": 250000,
-                    "invertAxis": true
+                    "minTranslateX": 0,
+                    "invertAxis": true,
+                    "allowFloats": true
                 },
                 "bindings": {
-                    "element": {"<-": "@owner._element"}
+                    "element": {"<-": "@owner._element"},
+                    "maxTranslateX": {"<-": "@owner.maxTranslateX"},
+                    "translateX": {"->": "@owner.translateX"}
                 }
             },
             "owner": {
@@ -42,7 +45,6 @@
                     }
                 },
                 "bindings": {
-                    "translateX": {"<-": "@translateComposer.translateX"},
                     "isSelectionEnabled": {
                         "boundObject": {"@": "repetition"},
                         "boundObjectPropertyPath": "isSelectionEnabled"
diff --git a/node_modules/montage/ui/flow.reel/flow.js b/node_modules/montage/ui/flow.reel/flow.js
index 2137f782..9fa9d8b1 100644
--- a/node_modules/montage/ui/flow.reel/flow.js
+++ b/node_modules/montage/ui/flow.reel/flow.js
@@ -30,21 +30,30 @@ var Flow = exports.Flow = Montage.create(Component, {
 
     appendPath: {
         value: function (path) {
-            var splinePath = Object.create(FlowBezierSpline),
+            var splinePath = Object.create(FlowBezierSpline).init(),
                 pathKnots = path.knots,
                 length = path.knots.length,
                 knots = [],
                 nextHandlers = [],
                 previousHandlers = [],
                 densities = [],
-                i;
+                i, j;
 
+            splinePath.parameters = {};
+            for (i in path.units) {
+                splinePath.parameters[i] = {
+                    data: [],
+                    units: path.units[i]
+                };
+            }
             for (i = 0; i < length; i++) {
                 knots[i] = pathKnots[i].knotPosition;
                 previousHandlers[i] = pathKnots[i].previousHandlerPosition;
                 nextHandlers[i] = pathKnots[i].nextHandlerPosition;
                 densities[i] = pathKnots[i].previousDensity; // TODO: implement previous/next density
-                // TODO: add rotations, arbitrary CSS and units
+                for (j in path.units) {
+                    splinePath.parameters[j].data.push(pathKnots[i][j]);
+                }
             }
             splinePath.knots = knots;
             splinePath.previousHandlers = previousHandlers;
@@ -52,7 +61,14 @@ var Flow = exports.Flow = Montage.create(Component, {
             splinePath.densities = densities;
             splinePath._computeDensitySummation();
             this.splinePaths.push(splinePath);
+            if (!path.hasOwnProperty("headOffset")) {
+                path.headOffset = 0;
+            }
+            if (!path.hasOwnProperty("tailOffset")) {
+                path.tailOffset = 0;
+            }
             this._paths.push(path);
+            this._updateLength();
         }
     },
 
@@ -70,7 +86,14 @@ var Flow = exports.Flow = Montage.create(Component, {
                 i;
 
             if (length) {
-                this._paths = [];
+
+                if (!this._paths) {
+                    this._paths = [];
+                } else {
+                    this._paths.wipe();
+                    this._splinePaths.wipe();
+                }
+
                 for (i = 0; i < length; i++) {
                     this.appendPath(value[i]);
                 }
@@ -144,6 +167,23 @@ var Flow = exports.Flow = Montage.create(Component, {
         }
     },
 
+    _stride: {
+        enumerable: false,
+        value: 0
+    },
+
+    stride: {
+        get: function () {
+            return this._stride;
+        },
+        set: function (value) {
+            this._stride = value;
+            if (this._translateComposer) {
+                this._translateComposer.translateStrideX = value * 300;
+            }
+        }
+    },
+
     _scrollingTransitionDurationMiliseconds: {
         enumerable: false,
         value: 500
@@ -203,8 +243,8 @@ var Flow = exports.Flow = Montage.create(Component, {
     _handleSelectedIndexesChange: {
         enumerable: false,
         value: function (event) {
-            if (this.hasSelectedIndexScrolling && event._plus) {
-                this.startScrollingIndexToOffset(event._plus[0], this.selectedIndexScrollingOffset);
+            if (this.hasSelectedIndexScrolling && event.plus) {
+                this.startScrollingIndexToOffset(event.plus[0], this.selectedIndexScrollingOffset);
             }
         }
     },
@@ -225,15 +265,16 @@ var Flow = exports.Flow = Montage.create(Component, {
             return this._scrollingTransitionTimingFunction;
         },
         set: function (timingFunction) {
-            var string = timingFunction + "";
+            var string = timingFunction + "",
+                bezier,
+                i;
 
             if (this._timingFunctions.hasOwnProperty(string)) {
                 this._scrollingTransitionTimingFunction = string;
                 this._scrollingTransitionTimingFunctionBezier = this._timingFunctions[string];
             } else {
                 if ((string.substr(0, 13) === "cubic-bezier(") && (string.substr(string.length - 1, 1) === ")")) {
-                    var bezier = string.substr(13, string.length - 14).split(","),
-                        i;
+                    bezier = string.substr(13, string.length - 14).split(",");
 
                     if (bezier.length === 4) {
                         for (i = 0; i < 4; i++) {
@@ -304,8 +345,15 @@ var Flow = exports.Flow = Montage.create(Component, {
 
     startScrollingIndexToOffset: { // TODO: Fire scrollingTransitionStart event
         value: function (index, offset) {
-            this._scrollingOrigin = this.origin;
+            this._scrollingOrigin = this.scroll;
             this._scrollingDestination = index - offset;
+            if (this._scrollingDestination > this._length) {
+                this._scrollingDestination = this._length;
+            } else {
+                if (this._scrollingDestination < 0) {
+                    this._scrollingDestination = 0;
+                }
+            }
             this._isScrolling = true;
             this._scrollingStartTime = Date.now();
             this._isTransitioningScroll = true;
@@ -349,39 +397,48 @@ var Flow = exports.Flow = Montage.create(Component, {
             }
         }
     },
+    
+    _halfPI: {
+        enumerable: false,
+        value: Math.PI*0.5
+    },
+    
+    _doublePI: {
+        enumerable: false,
+        value: Math.PI*2
+    },
 
     _computeFrustumNormals: {
-        value: function() {
-            var angle = ((this.cameraFov * .5) * Math.PI * 2) / 360,
-                y = Math.sin(angle),
-                z = Math.cos(angle),
+        value: function(out) {
+            var math = Math,
+                angle = ((this.cameraFov * .5) * this._doublePI) / 360,
+                y = math.sin(angle),
+                z = math.cos(angle),
                 x = (y * this._width) / this._height,