1 files changed, 477 insertions, 281 deletions

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,
                 vX = this.cameraTargetPoint[0] - this.cameraPosition[0],
                 vY = this.cameraTargetPoint[1] - this.cameraPosition[1],
                 vZ = this.cameraTargetPoint[2] - this.cameraPosition[2],
-                yAngle = Math.PI / 2 - Math.atan2(vZ, vX),
-                tmpZ = vX * Math.sin(yAngle) + vZ * Math.cos(yAngle),
+                yAngle = this._halfPI - math.atan2(vZ, vX),
+                tmpZ = vX * math.sin(yAngle) + vZ * math.cos(yAngle),
                 rX, rY, rZ,
                 rX2, rY2, rZ2,
-                xAngle = Math.PI / 2 - Math.atan2(tmpZ, vY),
+                xAngle = this._halfPI - math.atan2(tmpZ, vY),
                 invLength,
                 vectors = [[z, 0, x], [-z, 0, x], [0, z, y], [0, -z, y]],
                 iVector,
-                out = [],
                 i;
 
             for (i = 0; i < 4; i++) {
                 iVector = vectors[i];
                 rX = iVector[0];
-                rY = iVector[1] * Math.cos(-xAngle) - iVector[2] * Math.sin(-xAngle);
-                rZ = iVector[1] * Math.sin(-xAngle) + iVector[2] * Math.cos(-xAngle);
-                rX2 = rX * Math.cos(-yAngle) - rZ * Math.sin(-yAngle);
+                rY = iVector[1] * math.cos(-xAngle) - iVector[2] * math.sin(-xAngle);
+                rZ = iVector[1] * math.sin(-xAngle) + iVector[2] * math.cos(-xAngle);
+                rX2 = rX * math.cos(-yAngle) - rZ * math.sin(-yAngle);