diff options
Diffstat (limited to 'node_modules/montage/ui/flow.reel/flow.js')
-rw-r--r-- | node_modules/montage/ui/flow.reel/flow.js | 758 |
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, { | |||
30 | 30 | ||
31 | appendPath: { | 31 | appendPath: { |
32 | value: function (path) { | 32 | value: function (path) { |
33 | var splinePath = Object.create(FlowBezierSpline), | 33 | var splinePath = Object.create(FlowBezierSpline).init(), |
34 | pathKnots = path.knots, | 34 | pathKnots = path.knots, |
35 | length = path.knots.length, | 35 | length = path.knots.length, |
36 | knots = [], | 36 | knots = [], |
37 | nextHandlers = [], | 37 | nextHandlers = [], |
38 | previousHandlers = [], | 38 | previousHandlers = [], |
39 | densities = [], | 39 | densities = [], |
40 | i; | 40 | i, j; |
41 | 41 | ||
42 | splinePath.parameters = {}; | ||
43 | for (i in path.units) { | ||
44 | splinePath.parameters[i] = { | ||
45 | data: [], | ||
46 | units: path.units[i] | ||
47 | }; | ||
48 | } | ||
42 | for (i = 0; i < length; i++) { | 49 | for (i = 0; i < length; i++) { |
43 | knots[i] = pathKnots[i].knotPosition; | 50 | knots[i] = pathKnots[i].knotPosition; |
44 | previousHandlers[i] = pathKnots[i].previousHandlerPosition; | 51 | previousHandlers[i] = pathKnots[i].previousHandlerPosition; |
45 | nextHandlers[i] = pathKnots[i].nextHandlerPosition; | 52 | nextHandlers[i] = pathKnots[i].nextHandlerPosition; |
46 | densities[i] = pathKnots[i].previousDensity; // TODO: implement previous/next density | 53 | densities[i] = pathKnots[i].previousDensity; // TODO: implement previous/next density |
47 | // TODO: add rotations, arbitrary CSS and units | 54 | for (j in path.units) { |
55 | splinePath.parameters[j].data.push(pathKnots[i][j]); | ||
56 | } | ||
48 | } | 57 | } |
49 | splinePath.knots = knots; | 58 | splinePath.knots = knots; |
50 | splinePath.previousHandlers = previousHandlers; | 59 | splinePath.previousHandlers = previousHandlers; |
@@ -52,7 +61,14 @@ var Flow = exports.Flow = Montage.create(Component, { | |||
52 | splinePath.densities = densities; | 61 | splinePath.densities = densities; |
53 | splinePath._computeDensitySummation(); | 62 | splinePath._computeDensitySummation(); |
54 | this.splinePaths.push(splinePath); | 63 | this.splinePaths.push(splinePath); |
64 | if (!path.hasOwnProperty("headOffset")) { | ||
65 | path.headOffset = 0; | ||
66 | } | ||
67 | if (!path.hasOwnProperty("tailOffset")) { | ||
68 | path.tailOffset = 0; | ||
69 | } | ||
55 | this._paths.push(path); | 70 | this._paths.push(path); |
71 | this._updateLength(); | ||
56 | } | 72 | } |
57 | }, | 73 | }, |
58 | 74 | ||
@@ -70,7 +86,14 @@ var Flow = exports.Flow = Montage.create(Component, { | |||
70 | i; | 86 | i; |
71 | 87 | ||
72 | if (length) { | 88 | if (length) { |
73 | this._paths = []; | 89 | |
90 | if (!this._paths) { | ||
91 | this._paths = []; | ||
92 | } else { | ||
93 | this._paths.wipe(); | ||
94 | this._splinePaths.wipe(); | ||
95 | } | ||
96 | |||
74 | for (i = 0; i < length; i++) { | 97 | for (i = 0; i < length; i++) { |
75 | this.appendPath(value[i]); | 98 | this.appendPath(value[i]); |
76 | } | 99 | } |
@@ -144,6 +167,23 @@ var Flow = exports.Flow = Montage.create(Component, { | |||
144 | } | 167 | } |
145 | }, | 168 | }, |
146 | 169 | ||
170 | _stride: { | ||
171 | enumerable: false, | ||
172 | value: 0 | ||
173 | }, | ||
174 | |||
175 | stride: { | ||
176 | get: function () { | ||
177 | return this._stride; | ||
178 | }, | ||
179 | set: function (value) { | ||
180 | this._stride = value; | ||
181 | if (this._translateComposer) { | ||
182 | this._translateComposer.translateStrideX = value * 300; | ||
183 | } | ||
184 | } | ||
185 | }, | ||
186 | |||
147 | _scrollingTransitionDurationMiliseconds: { | 187 | _scrollingTransitionDurationMiliseconds: { |
148 | enumerable: false, | 188 | enumerable: false, |
149 | value: 500 | 189 | value: 500 |
@@ -203,8 +243,8 @@ var Flow = exports.Flow = Montage.create(Component, { | |||
203 | _handleSelectedIndexesChange: { | 243 | _handleSelectedIndexesChange: { |
204 | enumerable: false, | 244 | enumerable: false, |
205 | value: function (event) { | 245 | value: function (event) { |
206 | if (this.hasSelectedIndexScrolling && event._plus) { | 246 | if (this.hasSelectedIndexScrolling && event.plus) { |
207 | this.startScrollingIndexToOffset(event._plus[0], this.selectedIndexScrollingOffset); | 247 | this.startScrollingIndexToOffset(event.plus[0], this.selectedIndexScrollingOffset); |
208 | } | 248 | } |
209 | } | 249 | } |
210 | }, | 250 | }, |
@@ -225,15 +265,16 @@ var Flow = exports.Flow = Montage.create(Component, { | |||
225 | return this._scrollingTransitionTimingFunction; | 265 | return this._scrollingTransitionTimingFunction; |
226 | }, | 266 | }, |
227 | set: function (timingFunction) { | 267 | set: function (timingFunction) { |
228 | var string = timingFunction + ""; | 268 | var string = timingFunction + "", |
269 | bezier, | ||
270 | i; | ||
229 | 271 | ||
230 | if (this._timingFunctions.hasOwnProperty(string)) { | 272 | if (this._timingFunctions.hasOwnProperty(string)) { |
231 | this._scrollingTransitionTimingFunction = string; | 273 | this._scrollingTransitionTimingFunction = string; |
232 | this._scrollingTransitionTimingFunctionBezier = this._timingFunctions[string]; | 274 | this._scrollingTransitionTimingFunctionBezier = this._timingFunctions[string]; |
233 | } else { | 275 | } else { |
234 | if ((string.substr(0, 13) === "cubic-bezier(") && (string.substr(string.length - 1, 1) === ")")) { | 276 | if ((string.substr(0, 13) === "cubic-bezier(") && (string.substr(string.length - 1, 1) === ")")) { |
235 | var bezier = string.substr(13, string.length - 14).split(","), | 277 | bezier = string.substr(13, string.length - 14).split(","); |
236 | i; | ||
237 | 278 | ||
238 | if (bezier.length === 4) { | 279 | if (bezier.length === 4) { |
239 | for (i = 0; i < 4; i++) { | 280 | for (i = 0; i < 4; i++) { |
@@ -304,8 +345,15 @@ var Flow = exports.Flow = Montage.create(Component, { | |||
304 | 345 | ||
305 | startScrollingIndexToOffset: { // TODO: Fire scrollingTransitionStart event | 346 | startScrollingIndexToOffset: { // TODO: Fire scrollingTransitionStart event |
306 | value: function (index, offset) { | 347 | value: function (index, offset) { |
307 | this._scrollingOrigin = this.origin; | 348 | this._scrollingOrigin = this.scroll; |
308 | this._scrollingDestination = index - offset; | 349 | this._scrollingDestination = index - offset; |
350 | if (this._scrollingDestination > this._length) { | ||
351 | this._scrollingDestination = this._length; | ||
352 | } else { | ||
353 | if (this._scrollingDestination < 0) { | ||
354 | this._scrollingDestination = 0; | ||
355 | } | ||
356 | } | ||
309 | this._isScrolling = true; | 357 | this._isScrolling = true; |
310 | this._scrollingStartTime = Date.now(); | 358 | this._scrollingStartTime = Date.now(); |
311 | this._isTransitioningScroll = true; | 359 | this._isTransitioningScroll = true; |
@@ -349,39 +397,48 @@ var Flow = exports.Flow = Montage.create(Component, { | |||
349 | } | 397 | } |
350 | } | 398 | } |
351 | }, | 399 | }, |
400 | |||
401 | _halfPI: { | ||
402 | enumerable: false, | ||
403 | value: Math.PI*0.5 | ||
404 | }, | ||
405 | |||
406 | _doublePI: { | ||
407 | enumerable: false, | ||
408 | value: Math.PI*2 | ||
409 | }, | ||
352 | 410 | ||
353 | _computeFrustumNormals: { | 411 | _computeFrustumNormals: { |
354 | value: function() { | 412 | value: function(out) { |
355 | var angle = ((this.cameraFov * .5) * Math.PI * 2) / 360, | 413 | var math = Math, |
356 | y = Math.sin(angle), | 414 | angle = ((this.cameraFov * .5) * this._doublePI) / 360, |
357 | z = Math.cos(angle), | 415 | y = math.sin(angle), |
416 | z = math.cos(angle), | ||
358 | x = (y * this._width) / this._height, | 417 | x = (y * this._width) / this._height, |
359 | vX = this.cameraTargetPoint[0] - this.cameraPosition[0], | 418 | vX = this.cameraTargetPoint[0] - this.cameraPosition[0], |
360 | vY = this.cameraTargetPoint[1] - this.cameraPosition[1], | 419 | vY = this.cameraTargetPoint[1] - this.cameraPosition[1], |
361 | vZ = this.cameraTargetPoint[2] - this.cameraPosition[2], | 420 | vZ = this.cameraTargetPoint[2] - this.cameraPosition[2], |
362 | yAngle = Math.PI / 2 - Math.atan2(vZ, vX), | 421 | yAngle = this._halfPI - math.atan2(vZ, vX), |
363 | tmpZ = vX * Math.sin(yAngle) + vZ * Math.cos(yAngle), | 422 | tmpZ = vX * math.sin(yAngle) + vZ * math.cos(yAngle), |
364 | rX, rY, rZ, | 423 | rX, rY, rZ, |
365 | rX2, rY2, rZ2, | 424 | rX2, rY2, rZ2, |
366 | xAngle = Math.PI / 2 - Math.atan2(tmpZ, vY), | 425 | xAngle = this._halfPI - math.atan2(tmpZ, vY), |
367 | invLength, | 426 | invLength, |
368 | vectors = [[z, 0, x], [-z, 0, x], [0, z, y], [0, -z, y]], | 427 | vectors = [[z, 0, x], [-z, 0, x], [0, z, y], [0, -z, y]], |
369 | iVector, | 428 | iVector, |
370 | out = [], | ||
371 | i; | 429 | i; |
372 | 430 | ||
373 | for (i = 0; i < 4; i++) { | 431 | for (i = 0; i < 4; i++) { |
374 | iVector = vectors[i]; | 432 | iVector = vectors[i]; |
375 | rX = iVector[0]; | 433 | rX = iVector[0]; |
376 | rY = iVector[1] * Math.cos(-xAngle) - iVector[2] * Math.sin(-xAngle); | 434 | rY = iVector[1] * math.cos(-xAngle) - iVector[2] * math.sin(-xAngle); |
377 | rZ = iVector[1] * Math.sin(-xAngle) + iVector[2] * Math.cos(-xAngle); |