diff options
Diffstat (limited to 'node_modules/montage/ui/flow.reel/flow.js')
-rw-r--r-- | node_modules/montage/ui/flow.reel/flow.js | 1002 |
1 files changed, 740 insertions, 262 deletions
diff --git a/node_modules/montage/ui/flow.reel/flow.js b/node_modules/montage/ui/flow.reel/flow.js index 089353a8..929e61b8 100644 --- a/node_modules/montage/ui/flow.reel/flow.js +++ b/node_modules/montage/ui/flow.reel/flow.js | |||
@@ -5,145 +5,319 @@ | |||
5 | </copyright> */ | 5 | </copyright> */ |
6 | 6 | ||
7 | var Montage = require("montage").Montage, | 7 | var Montage = require("montage").Montage, |
8 | Component = require("ui/component").Component; | 8 | Component = require("ui/component").Component, |
9 | FlowBezierSpline = require("ui/flow-bezier-spline").FlowBezierSpline; | ||
9 | 10 | ||
10 | var Flow = exports.Flow = Montage.create(Component, { | 11 | var Flow = exports.Flow = Montage.create(Component, { |
11 | 12 | ||
12 | // TODO: Review _externalUpdate | 13 | _splinePaths: { |
14 | enumerable: false, | ||
15 | value: null | ||
16 | }, | ||
13 | 17 | ||
14 | _externalUpdate: { | 18 | splinePaths: { |
15 | enumerable: false, | 19 | enumerable: false, |
16 | value: true | 20 | get: function () { |
21 | if (!this._splinePaths) { | ||
22 | this._splinePaths = []; | ||
23 | } | ||
24 | return this._splinePaths; | ||
25 | }, | ||
26 | set: function (value) { | ||
27 | this._splinePaths = value; | ||
28 | } | ||
17 | }, | 29 | }, |
18 | 30 | ||
19 | _isCameraUpdated: { | 31 | appendPath: { |
32 | value: function (path) { | ||
33 | var splinePath = Object.create(FlowBezierSpline), | ||
34 | pathKnots = path.knots, | ||
35 | length = path.knots.length, | ||
36 | knots = [], | ||
37 | nextHandlers = [], | ||
38 | previousHandlers = [], | ||
39 | densities = [], | ||
40 | i; | ||
41 | |||
42 | for (i = 0; i < length; i++) { | ||
43 | knots[i] = pathKnots[i].knotPosition; | ||
44 | previousHandlers[i] = pathKnots[i].previousHandlerPosition; | ||
45 | nextHandlers[i] = pathKnots[i].nextHandlerPosition; | ||
46 | densities[i] = pathKnots[i].previousDensity; // TODO: implement previous/next density | ||
47 | // TODO: add rotations, arbitrary CSS and units | ||
48 | } | ||
49 | splinePath.knots = knots; | ||
50 | splinePath.previousHandlers = previousHandlers; | ||
51 | splinePath.nextHandlers = nextHandlers; | ||
52 | splinePath.densities = densities; | ||
53 | splinePath._computeDensitySummation(); | ||
54 | this.splinePaths.push(splinePath); | ||
55 | this._paths.push(path); | ||
56 | } | ||
57 | }, | ||
58 | |||
59 | _paths: { | ||
20 | enumerable: false, | 60 | enumerable: false, |
21 | value: false | 61 | value: null |
22 | }, | 62 | }, |
23 | 63 | ||
24 | // Camera rotation based in CSS3 rotate3D axis/angle system | 64 | paths: { // TODO: listen for changes? |
65 | get: function () { | ||
66 | return this._paths; | ||
67 | }, | ||
68 | set: function (value) { | ||
69 | var length = value.length, | ||
70 | i; | ||
25 | 71 | ||
26 | _cameraRotationAxisX: { | 72 | if (length) { |
73 | this._paths = []; | ||
74 | for (i = 0; i < length; i++) { | ||
75 | this.appendPath(value[i]); | ||
76 | } | ||
77 | } | ||
78 | } | ||
79 | }, | ||
80 | |||
81 | _cameraPosition: { | ||
27 | enumerable: false, | 82 | enumerable: false, |
28 | value: 0 | 83 | value: [0, 0, 800] |
29 | }, | 84 | }, |
30 | 85 | ||
31 | _cameraRotationAxisY: { | 86 | _cameraTargetPoint: { |
32 | enumerable: false, | 87 | enumerable: false, |
33 | value: 0 | 88 | value: [0, 0, 0] |
34 | }, | 89 | }, |
35 | 90 | ||
36 | _cameraRotationAxisZ: { | 91 | _cameraFov: { |
37 | enumerable: false, | 92 | enumerable: false, |
38 | value: 1 | 93 | value: 50 |
39 | }, | 94 | }, |
40 | 95 | ||
41 | _cameraRotationAngle: { | 96 | // TODO: Implement camera roll |
97 | |||
98 | _cameraRoll: { | ||
42 | enumerable: false, | 99 | enumerable: false, |
43 | value: 0 | 100 | value: 0 |
44 | }, | 101 | }, |
45 | 102 | ||
46 | cameraRotationAxisX: { | 103 | cameraPosition: { |
47 | get: function () { | 104 | get: function () { |
48 | return this._cameraRotationAxisX; | 105 | return this._cameraPosition; |
49 | }, | 106 | }, |
50 | set: function (value) { | 107 | set: function (value) { |
51 | this._cameraRotationAxisX = value; | 108 | this._cameraPosition = value; |
52 | this._isCameraUpdated = true; | 109 | this._isCameraUpdated = true; |
53 | this.needsDraw = true; | 110 | this.needsDraw = true; |
54 | } | 111 | } |
55 | }, | 112 | }, |
56 | 113 | ||
57 | cameraRotationAxisY: { | 114 | cameraTargetPoint: { |
58 | get: function () { | 115 | get: function () { |
59 | return this._cameraRotationAxisY; | 116 | return this._cameraTargetPoint; |
60 | }, | 117 | }, |
61 | set: function (value) { | 118 | set: function (value) { |
62 | this._cameraRotationAxisY = value; | 119 | this._cameraTargetPoint = value; |
63 | this._isCameraUpdated = true; | 120 | this._isCameraUpdated = true; |
64 | this.needsDraw = true; | 121 | this.needsDraw = true; |
65 | } | 122 | } |
66 | }, | 123 | }, |
67 | 124 | ||
68 | cameraRotationAxisZ: { | 125 | cameraFov: { |
69 | get: function () { | 126 | get: function () { |
70 | return this._cameraRotationAxisZ; | 127 | return this._cameraFov; |
71 | }, | 128 | }, |
72 | set: function (value) { | 129 | set: function (value) { |
73 | this._cameraRotationAxisZ = value; | 130 | this._cameraFov = value; |
74 | this._isCameraUpdated = true; | 131 | this._isCameraUpdated = true; |
75 | this.needsDraw = true; | 132 | this.needsDraw = true; |
76 | } | 133 | } |
77 | }, | 134 | }, |
78 | 135 | ||
79 | cameraRotationAngle: { | 136 | cameraRoll: { |
80 | get: function () { | 137 | get: function () { |
81 | return this._cameraRotationAngle; | 138 | return this._cameraRoll; |
82 | }, | 139 | }, |
83 | set: function (value) { | 140 | set: function (value) { |
84 | this._cameraRotationAngle = value; | 141 | this._cameraRoll = value; |
85 | this._isCameraUpdated = true; | 142 | this._isCameraUpdated = true; |
86 | this.needsDraw = true; | 143 | this.needsDraw = true; |
87 | } | 144 | } |
88 | }, | 145 | }, |
89 | 146 | ||
90 | _path: { | 147 | _scrollingTransitionDurationMiliseconds: { |
91 | enumerable: false, | 148 | enumerable: false, |
92 | value: { | 149 | value: 500 |
93 | value: function (slide) { | 150 | }, |
94 | return { | 151 | |
95 | translateX: slide.time, | 152 | _scrollingTransitionDuration: { |
96 | translateY: 0, | 153 | enumerable: false, |
97 | translateZ: 0, | 154 | value: "500ms" |
98 | scale: 1, | ||
99 | rotateX: 0, | ||
100 | rotateY: 0, | ||
101 | rotateZ: 0, | ||
102 | transformOriginX: 0, | ||
103 | transformOriginY: 0, | ||
104 | transformOriginZ: 0, | ||
105 | style: {} | ||
106 | }; | ||
107 | } | ||
108 | } | ||
109 | }, | 155 | }, |
110 | 156 | ||
111 | path: { | 157 | scrollingTransitionDuration: { // TODO: think about using the Date Converter |
112 | get: function () { | 158 | get: function () { |
113 | return this._path; | 159 | return this._scrollingTransitionDuration; |
114 | }, | 160 | }, |