diff options
-rwxr-xr-x | js/controllers/elements/element-controller.js | 90 |
1 files changed, 29 insertions, 61 deletions
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index adac1420..b8411ac0 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js | |||
@@ -75,37 +75,29 @@ exports.ElementController = Montage.create(Component, { | |||
75 | // borderSide : "top", "right", "bottom", or "left" | 75 | // borderSide : "top", "right", "bottom", or "left" |
76 | getColor: { | 76 | getColor: { |
77 | value: function(el, isFill, borderSide) { | 77 | value: function(el, isFill, borderSide) { |
78 | var colorObj, | 78 | var colorObj, color, image; |
79 | color, | ||
80 | image; | ||
81 | 79 | ||
82 | // Return cached value if one exists | 80 | // Return cached value if one exists |
83 | if(isFill) | 81 | if(isFill) { |
84 | { | 82 | if(el.elementModel.fill) { |
85 | if(el.elementModel.fill) | ||
86 | { | ||
87 | return el.elementModel.fill; | 83 | return el.elementModel.fill; |
88 | } | 84 | } |
89 | //TODO: Once logic for color and gradient is established, this needs to be revised | 85 | //TODO: Once logic for color and gradient is established, this needs to be revised |
90 | color = this.getProperty(el, "background-color"); | 86 | color = this.getProperty(el, "background-color"); |
91 | image = this.getProperty(el, "background-image"); | 87 | image = this.getProperty(el, "background-image"); |
92 | } | 88 | } else { |
93 | else | ||
94 | { | ||
95 | // Try getting border color from specific side first | 89 | // Try getting border color from specific side first |
96 | if(borderSide) | 90 | if(borderSide) { |
97 | { | ||
98 | color = this.getProperty(el, "border-" + borderSide + "-color"); | 91 | color = this.getProperty(el, "border-" + borderSide + "-color"); |
99 | image = this.getProperty(el, "border-" + borderSide + "-image"); | 92 | image = this.getProperty(el, "border-" + borderSide + "-image"); |
100 | } | 93 | } |
101 | 94 | ||
102 | // If no color was found, look up the shared border color | 95 | // If no color was found, look up the shared border color |
103 | if(!color && !image) | 96 | if(!color && !image) { |
104 | { | 97 | if(el.elementModel.stroke) { |
105 | if(el.elementModel.stroke) | ||
106 | { | ||
107 | return el.elementModel.stroke; | 98 | return el.elementModel.stroke; |
108 | } | 99 | } |
100 | |||
109 | color = this.getProperty(el, "border-color"); | 101 | color = this.getProperty(el, "border-color"); |
110 | image = this.getProperty(el, "border-image"); | 102 | image = this.getProperty(el, "border-image"); |
111 | } | 103 | } |
@@ -122,17 +114,12 @@ exports.ElementController = Montage.create(Component, { | |||
122 | } | 114 | } |
123 | 115 | ||
124 | // Update cache | 116 | // Update cache |
125 | if(isFill) | 117 | if(isFill) { |
126 | { | ||
127 | el.elementModel.fill = colorObj; | 118 | el.elementModel.fill = colorObj; |
128 | } | 119 | } else if(!borderSide) { |
129 | else if(!borderSide) | ||
130 | { | ||
131 | // TODO - Need to update border style and width also | 120 | // TODO - Need to update border style and width also |
132 | el.elementModel.stroke = colorObj; | 121 | el.elementModel.stroke = colorObj; |
133 | } | 122 | } else { |
134 | else | ||
135 | { | ||
136 | // TODO - Should update specific border sides too | 123 | // TODO - Should update specific border sides too |
137 | } | 124 | } |
138 | 125 | ||
@@ -143,10 +130,9 @@ exports.ElementController = Montage.create(Component, { | |||
143 | setColor: { | 130 | setColor: { |
144 | value: function(el, color, isFill) { | 131 | value: function(el, color, isFill) { |
145 | var mode = color.mode; | 132 | var mode = color.mode; |
146 | if(isFill) | 133 | |
147 | { | 134 | if(isFill) { |
148 | if(mode) | 135 | if(mode) { |
149 | { | ||
150 | switch (mode) { | 136 | switch (mode) { |
151 | case 'nocolor': | 137 | case 'nocolor': |
152 | this.setProperty(el, "background-image", "none"); | 138 | this.setProperty(el, "background-image", "none"); |
@@ -162,12 +148,10 @@ exports.ElementController = Montage.create(Component, { | |||
162 | this.setProperty(el, "background-color", color.color.css); | 148 | this.setProperty(el, "background-color", color.color.css); |
163 | } | 149 | } |
164 | } | 150 | } |
151 | |||
165 | el.elementModel.fill = color; | 152 | el.elementModel.fill = color; |
166 | } | 153 | } else { |
167 | else | 154 | if(mode) { |
168 | { | ||
169 | if(mode) | ||
170 | { | ||
171 | switch (mode) { | 155 | switch (mode) { |
172 | case 'nocolor': | 156 | case 'nocolor': |
173 | this.setProperty(el, "border-image", "none"); | 157 | this.setProperty(el, "border-image", "none"); |
@@ -177,20 +161,16 @@ exports.ElementController = Montage.create(Component, { | |||
177 | case 'gradient': | 161 | case 'gradient': |
178 | this.setProperty(el, "border-image", color.color.css); | 162 | this.setProperty(el, "border-image", color.color.css); |
179 | this.setProperty(el, "border-color", "none"); | 163 | this.setProperty(el, "border-color", "none"); |
180 | if(color.borderInfo) | 164 | if(color.borderInfo) { |
181 | { | 165 | this.setProperty(el, "border-width", color.borderInfo.borderWidth + color.borderInfo.borderUnits); |
182 | this.setProperty(el, "border-width", color.borderInfo.borderWidth + | ||
183 | color.borderInfo.borderUnits); | ||
184 | this.setProperty(el, "border-style", color.borderInfo.borderStyle); | 166 | this.setProperty(el, "border-style", color.borderInfo.borderStyle); |
185 | } | 167 | } |
186 | break; | 168 | break; |
187 | default: | 169 | default: |
188 | this.setProperty(el, "border-image", "none"); | 170 | this.setProperty(el, "border-image", "none"); |
189 | this.setProperty(el, "border-color", color.color.css); | 171 | this.setProperty(el, "border-color", color.color.css); |
190 | if(color.borderInfo) | 172 | if(color.borderInfo) { |
191 | { | 173 | this.setProperty(el, "border-width", color.borderInfo.borderWidth + color.borderInfo.borderUnits); |
192 | this.setProperty(el, "border-width", color.borderInfo.borderWidth + | ||
193 | color.borderInfo.borderUnits); | ||
194 | this.setProperty(el, "border-style", color.borderInfo.borderStyle); | 174 | this.setProperty(el, "border-style", color.borderInfo.borderStyle); |
195 | } | 175 | } |
196 | } | 176 | } |
@@ -219,8 +199,7 @@ exports.ElementController = Montage.create(Component, { | |||
219 | // Routines to get/set 3D properties | 199 | // Routines to get/set 3D properties |
220 | get3DProperty: { | 200 | get3DProperty: { |
221 | value: function(el, prop) { | 201 | value: function(el, prop) { |
222 | if(el.elementModel && el.elementModel.props3D) | 202 | if(el.elementModel && el.elementModel.props3D) { |
223 | { | ||
224 | return el.elementModel.props3D[prop]; | 203 | return el.elementModel.props3D[prop]; |
225 | } | 204 | } |
226 | } | 205 | } |
@@ -228,16 +207,12 @@ exports.ElementController = Montage.create(Component, { | |||
228 | 207 | ||
229 | getMatrix: { | 208 | getMatrix: { |
230 | value: function(el) { | 209 | value: function(el) { |
231 | if(el.elementModel && el.elementModel.props3D && el.elementModel.props3D.matrix3d) | 210 | if(el.elementModel && el.elementModel.props3D && el.elementModel.props3D.matrix3d) { |
232 | { | ||
233 | return el.elementModel.props3D.matrix3d.slice(0); | 211 | return el.elementModel.props3D.matrix3d.slice(0); |
234 | } | 212 | } else { |
235 | else | ||
236 | { | ||
237 | var mat; | 213 | var mat; |
238 | 214 | ||
239 | if (el) | 215 | if (el) { |
240 | { | ||
241 | mat = this.application.ninja.stylesController.getMatrixFromElement(el, false); | 216 | mat = this.application.ninja.stylesController.getMatrixFromElement(el, false); |
242 | if (!mat) { | 217 | if (!mat) { |
243 | mat = Matrix.I(4); | 218 | mat = Matrix.I(4); |
@@ -252,12 +227,9 @@ exports.ElementController = Montage.create(Component, { | |||
252 | 227 | ||
253 | getPerspectiveDist: { | 228 | getPerspectiveDist: { |
254 | value: function(el) { | 229 | value: function(el) { |
255 | if(el.elementModel && el.elementModel.props3D && el.elementModel.props3D.perspectiveDist) | 230 | if(el.elementModel && el.elementModel.props3D && el.elementModel.props3D.perspectiveDist) { |
256 | { | ||
257 | return el.elementModel.props3D.perspectiveDist; | 231 | return el.elementModel.props3D.perspectiveDist; |
258 | } | 232 | } else { |
259 | else | ||
260 | { | ||
261 | var dist = this.application.ninja.stylesController.getPerspectiveDistFromElement(el, false); | 233 | var dist = this.application.ninja.stylesController.getPerspectiveDistFromElement(el, false); |
262 | if(dist == null) { | 234 | if(dist == null) { |
263 | dist = 1400; | 235 | dist = 1400; |
@@ -274,16 +246,12 @@ exports.ElementController = Montage.create(Component, { | |||
274 | value: function(el, props, index, update3DModel) { | 246 | value: function(el, props, index, update3DModel) { |
275 | var dist = props[index]["dist"], | 247 | var dist = props[index]["dist"], |
276 | mat = props[index]["mat"]; | 248 | mat = props[index]["mat"]; |
277 | this.application.ninja.stylesController.setElementStyle(el, | 249 | this.application.ninja.stylesController.setElementStyle(el, "-webkit-transform", "perspective(" + dist + ") " + "matrix3d(" + MathUtils.scientificToDecimal(mat, 5) + ")"); |
278 | "-webkit-transform", | ||
279 | "perspective(" + dist + ") " + | ||
280 | "matrix3d(" + MathUtils.scientificToDecimal(mat, 5) + ")"); | ||
281 | 250 | ||
282 | el.elementModel.props3D.matrix3d = mat; | 251 | el.elementModel.props3D.matrix3d = mat; |
283 | el.elementModel.props3D.perspectiveDist = dist; | 252 | el.elementModel.props3D.perspectiveDist = dist; |
284 | 253 | ||
285 | if(update3DModel) | 254 | if(update3DModel) { |
286 | { | ||
287 | this._update3DProperties(el, mat, dist); | 255 | this._update3DProperties(el, mat, dist); |
288 | } | 256 | } |
289 | } | 257 |