aboutsummaryrefslogtreecommitdiff
path: root/js/controllers
diff options
context:
space:
mode:
Diffstat (limited to 'js/controllers')
-rw-r--r--js/controllers/color-controller.js100
-rw-r--r--js/controllers/elements/canvas-controller.js14
-rw-r--r--js/controllers/elements/element-controller.js150
-rw-r--r--js/controllers/elements/shapes-controller.js58
-rw-r--r--js/controllers/styles-controller.js161
-rw-r--r--js/controllers/tree-controller.js185
6 files changed, 510 insertions, 158 deletions
diff --git a/js/controllers/color-controller.js b/js/controllers/color-controller.js
index 87180873..e3b15f1c 100644
--- a/js/controllers/color-controller.js
+++ b/js/controllers/color-controller.js
@@ -175,76 +175,21 @@ exports.ColorController = Montage.create(Component, {
175 }, 175 },
176 //////////////////////////////////////////////////////////////////// 176 ////////////////////////////////////////////////////////////////////
177 // 177 //
178 setBackground: { 178 setColor: {
179 enumerable: true, 179 enumerable: true,
180 value: function (type, background, selection) { 180 value: function (mode, color, isFill, selection) {
181 //TODO: Remove hack 181 var elements;
182 var elements, i, hack = [], hackNone = [];
183 //The selection is optional, if none, it asks for the currently selected elements 182 //The selection is optional, if none, it asks for the currently selected elements
184 if (selection) { 183 if (selection) {
185 elements = selection; 184 elements = selection;
186 } else { 185 } else {
187 elements = this.application.ninja.selectedElements; 186 elements = this.application.ninja.selectedElements;
188 } 187 }
189 // 188 if (elements && elements.length) {
190 for (i=0; elements[i]; i++) { 189 var colorInfo = { mode:mode,
191 hack[i] = background; 190 color:color
192 hackNone[i] = 'none'; 191 };
193 } 192 ElementsMediator.setColor(elements, colorInfo, isFill, "Change", "color-controller");
194 //
195 if (elements && elements.length > 0) {
196 switch (type) {
197 case 'image':
198 ElementsMediator.setProperty(elements, "background-image", hack, {"background-image": background}, "Change", "color-controller");
199 ElementsMediator.setProperty(elements, "background-color", hackNone, {"background-color": 'none'}, "Change", "color-controller");
200 break;
201 case 'color':
202 //TODO: Add logic to handle setting color when image (like gradients) is applied
203 //TODO: Handle applying to multiple items, currently, we need to create a dummy array of the same value
204 ElementsMediator.setProperty(elements, "background-image", hackNone, {"background-image": 'none'}, "Change", "color-controller");
205 ElementsMediator.setProperty(elements, "background-color", hack, {"background-color": background}, "Change", "color-controller");
206 break;
207 case 'background':
208 break;
209 }
210 //
211 //console.log(this.getColorObjFromCss('#333'));
212 }
213 }
214 },
215 ////////////////////////////////////////////////////////////////////
216 //
217 setBorder: {
218 enumerable: true,
219 value: function (type, border, selection) {
220 //
221 var elements, i, hack = [], hackNone = [];
222 //The selection is optional, if none, it asks for the currently selected elements
223 if (selection) {
224 elements = selection;
225 } else {
226 elements = this.application.ninja.selectedElements;
227 }
228 //
229 for (i=0; elements[i]; i++) {
230 hack[i] = border;
231 hackNone[i] = 'none';
232 }
233 //
234 if (elements && elements.length > 0) {
235 switch (type) {
236 case 'image':
237 //TODO: Figure out why color must be removed, might be related to the CSS
238 ElementsMediator.setProperty(elements, "border-color", hackNone, {"border-color": 'none'}, "Change", "color-controller");
239 ElementsMediator.setProperty(elements, "border-image", hack, {"border-image": border}, "Change", "color-controller");
240 break;
241 case 'color':
242 ElementsMediator.setProperty(elements, "border-image", hackNone, {"border-image": 'none'}, "Change", "color-controller");
243 ElementsMediator.setProperty(elements, "border-color", hack, {"border-color": border}, "Change", "color-controller");
244 break;
245 case 'border':
246 break;
247 }
248 } 193 }
249 } 194 }
250 }, 195 },
@@ -264,13 +209,18 @@ exports.ColorController = Montage.create(Component, {
264 color = {value: null, css: 'none'}; 209 color = {value: null, css: 'none'};
265 } else if (panelMode === 'rgb' && e._event.rgba && mode !== 'gradient') { 210 } else if (panelMode === 'rgb' && e._event.rgba && mode !== 'gradient') {
266 color = e._event.rgba; 211 color = e._event.rgba;
212 color.webGlColor = e._event.webGlColor;
267 } else if (panelMode === 'hsl' && e._event.hsla && mode !== 'gradient') { 213 } else if (panelMode === 'hsl' && e._event.hsla && mode !== 'gradient') {
268 color = e._event.hsla; 214 color = e._event.hsla;
215 color.webGlColor = e._event.webGlColor;
269 } else if (mode !== 'gradient'){ 216 } else if (mode !== 'gradient'){
270 color = {value: e._event.hex, css: '#'+e._event.hex}; 217 color = {value: e._event.hex, css: '#'+e._event.hex};
271 } else if (mode === 'gradient'){ 218 } else if (mode === 'gradient'){
272 color = e._event.value.value; 219 color = e._event.value.value;
273 } 220 }
221 color.mode = panelMode;
222 color.wasSetByCode = true;
223 color.type = "change";
274 //////////////////////////////////////////////////////////// 224 ////////////////////////////////////////////////////////////
275 //////////////////////////////////////////////////////////// 225 ////////////////////////////////////////////////////////////
276 // 226 //
@@ -280,32 +230,14 @@ exports.ColorController = Montage.create(Component, {
280 // 230 //
281 if(e._event.wasSetByCode) return; 231 if(e._event.wasSetByCode) return;
282 // 232 //
283 if (mode === 'nocolor') { 233 this.setColor(mode, color, true);
284 //TODO: Add a check instead of setting properties
285 this.setBackground('image', color.css, false);
286 this.setBackground('color', color.css, false);
287 this.setBackground('background', color.css, false);
288 } else if (mode === 'gradient') {
289 this.setBackground('image', color.css, false);
290 } else {
291 this.setBackground('color', color.css, false);
292 }
293 } else if (input === 'stroke') { 234 } else if (input === 'stroke') {
294 // 235 //
295 this.stroke = color; 236 this.stroke = color;
296 // 237 //
297 if(e._event.wasSetByCode) return; 238 if(e._event.wasSetByCode) return;
298 // 239
299 if (mode === 'nocolor') { 240 this.setColor(mode, color, false);
300 //TODO: Add a check instead of setting properties
301 this.setBorder('image', color.css, false);
302 this.setBorder('color', color.css, false);
303 this.setBorder('border', color.css, false);
304 } else if (mode === 'gradient') {
305 this.setBorder('image', color.css, false);
306 } else {
307 this.setBorder('color', color.css, false);
308 }
309 } 241 }
310 //////////////////////////////////////////////////////////// 242 ////////////////////////////////////////////////////////////
311 //////////////////////////////////////////////////////////// 243 ////////////////////////////////////////////////////////////
diff --git a/js/controllers/elements/canvas-controller.js b/js/controllers/elements/canvas-controller.js
index 21de9879..b5df3911 100644
--- a/js/controllers/elements/canvas-controller.js
+++ b/js/controllers/elements/canvas-controller.js
@@ -34,12 +34,12 @@ exports.CanvasController = Montage.create(ElementController, {
34 } 34 }
35 } 35 }
36 }, 36 },
37 37
38 setProperties: { 38 setProperties: {
39 value: function(el, props, index) { 39 value: function(el, props, index) {
40 for(var p in props) { 40 for(var p in props) {
41 el.elementModel.controller.setProperty(el, p, props[p][index]); 41 el.elementModel.controller.setProperty(el, p, props[p][index]);
42 } 42 }
43 } 43 }
44 } 44 }
45}); \ No newline at end of file 45}); \ No newline at end of file
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index f254220c..65d26bdd 100644
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -69,27 +69,103 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
69 // Routines to get/set color properties 69 // Routines to get/set color properties
70 getColor: { 70 getColor: {
71 value: function(el, isFill) { 71 value: function(el, isFill) {
72 var colorObj,
73 color,
74 image;
75
76 // Return cached value if one exists
72 if(isFill) 77 if(isFill)
73 { 78 {
74 return this.application.ninja.stylesController.getElementStyle(el, "background-color"); 79 if(el.elementModel.fill)
80 {
81 return el.elementModel.fill;
82 }
83// return this.application.ninja.stylesController.getElementStyle(el, "background-color");
84 //TODO: Once logic for color and gradient is established, this needs to be revised
85 color = this.getProperty(el, "background-color");
86 image = this.getProperty(el, "background-image");
75 } 87 }
76 else 88 else
77 { 89 {
78 // TODO - Need to figure out which border side user wants 90 // TODO - Need to figure out which border side user wants
79 return this.application.ninja.stylesController.getElementStyle(el, "border-color"); 91 if(el.elementModel.stroke)
92 {
93 return el.elementModel.stroke;
94 }
95 // TODO - Need to figure out which border side user wants
96// return t