diff options
Diffstat (limited to 'js/controllers')
-rw-r--r-- | js/controllers/elements/shapes-controller.js | 99 | ||||
-rw-r--r-- | js/controllers/styles-controller.js | 159 | ||||
-rw-r--r-- | js/controllers/tree-controller.js | 185 |
3 files changed, 419 insertions, 24 deletions
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 48072309..e764de4e 100644 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js | |||
@@ -5,7 +5,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
5 | </copyright> */ | 5 | </copyright> */ |
6 | 6 | ||
7 | var Montage = require("montage/core/core").Montage, | 7 | var Montage = require("montage/core/core").Montage, |
8 | CanvasController = require("js/controllers/elements/canvas-controller").CanvasController; | 8 | CanvasController = require("js/controllers/elements/canvas-controller").CanvasController, |
9 | njModule = require("js/lib/NJUtils"); | ||
9 | 10 | ||
10 | exports.ShapesController = Montage.create(CanvasController, { | 11 | exports.ShapesController = Montage.create(CanvasController, { |
11 | 12 | ||
@@ -56,6 +57,35 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
56 | el.elementModel.shapeModel.GLWorld.setViewportFromCanvas(el); | 57 | el.elementModel.shapeModel.GLWorld.setViewportFromCanvas(el); |
57 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); | 58 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); |
58 | break; | 59 | break; |
60 | case "useWebGl": | ||
61 | var canvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", el.className, true); | ||
62 | canvas.width = el.width; | ||
63 | canvas.height = el.height; | ||
64 | this.application.ninja.elementMediator.replaceElement(el, canvas); | ||
65 | NJevent("elementDeleted", el); | ||
66 | this.application.ninja.selectionController.selectElement(canvas); | ||
67 | el = canvas; | ||
68 | this.toggleWebGlMode(el, value); | ||
69 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); | ||
70 | break; | ||
71 | case "strokeMaterial": | ||
72 | var sm = Object.create(MaterialsLibrary.getMaterial(value)); | ||
73 | if(sm) | ||
74 | { | ||
75 | el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(sm); | ||
76 | el.elementModel.shapeModel.strokeMaterial = sm; | ||
77 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); | ||
78 | } | ||
79 | break; | ||
80 | case "fillMaterial": | ||
81 | var fm = Object.create(MaterialsLibrary.getMaterial(value)); | ||
82 | if(fm) | ||
83 | { | ||
84 | el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm); | ||
85 | el.elementModel.shapeModel.fillMaterial = fm; | ||
86 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); | ||
87 | } | ||
88 | break; | ||
59 | default: | 89 | default: |
60 | CanvasController.setProperty(el, p, value); | 90 | CanvasController.setProperty(el, p, value); |
61 | } | 91 | } |
@@ -72,12 +102,21 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
72 | case "trRadius": | 102 | case "trRadius": |
73 | case "blRadius": | 103 | case "blRadius": |
74 | case "brRadius": | 104 | case "brRadius": |
75 | case "strokeMaterial": | ||
76 | case "fillMaterial": | ||
77 | case "border": | 105 | case "border": |
78 | case "background": | 106 | case "background": |
79 | case "useWebGl": | 107 | case "useWebGl": |
80 | return this.getShapeProperty(el, p); | 108 | return this.getShapeProperty(el, p); |
109 | case "strokeMaterial": | ||
110 | case "fillMaterial": | ||
111 | var m = this.getShapeProperty(el, p); | ||
112 | if(m) | ||
113 | { | ||
114 | return this.getShapeProperty(el, p).getName(); | ||
115 | } | ||
116 | else | ||
117 | { | ||
118 | return "FlatMaterial"; | ||
119 | } | ||
81 | default: | 120 | default: |
82 | return CanvasController.getProperty(el, p); | 121 | return CanvasController.getProperty(el, p); |
83 | } | 122 | } |
@@ -276,6 +315,60 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
276 | { | 315 | { |
277 | return (el.elementModel && el.elementModel.isShape); | 316 | return (el.elementModel && el.elementModel.isShape); |
278 | } | 317 | } |
318 | }, | ||
319 | |||
320 | toggleWebGlMode: { | ||
321 | value: function(el, useWebGl) | ||
322 | { | ||
323 | if(useWebGl) | ||
324 | { | ||
325 | this.convertToWebGlWorld(el); | ||
326 | } | ||
327 | else | ||
328 | { | ||
329 | this.convertTo2DWorld(el); | ||
330 | } | ||
331 | } | ||
332 | }, | ||
333 | |||
334 | convertToWebGlWorld: { | ||
335 | value: function(el) | ||
336 | { | ||
337 | if(el.elementModel.shapeModel.useWebGl) | ||
338 | { | ||
339 | return; | ||
340 | } | ||
341 | var world, | ||
342 | worldData = el.elementModel.shapeModel.GLWorld.export(); | ||
343 | if(worldData) | ||
344 | { | ||
345 | world = new GLWorld(el, true); | ||
346 | el.elementModel.shapeModel.GLWorld = world; | ||
347 | el.elementModel.shapeModel.useWebGl = true; | ||
348 | world.import(worldData); | ||
349 | } | ||
350 | |||
351 | } | ||
352 | }, | ||
353 | |||
354 | convertTo2DWorld: { | ||
355 | value: function(el) | ||
356 | { | ||
357 | if(!el.elementModel.shapeModel.useWebGl) | ||
358 | { | ||
359 | return; | ||
360 | } | ||
361 | var world, | ||
362 | worldData = el.elementModel.shapeModel.GLWorld.export(); | ||
363 | if(worldData) | ||
364 | { | ||
365 | world = new GLWorld(el, false); | ||
366 | el.elementModel.shapeModel.GLWorld = world; | ||
367 | el.elementModel.shapeModel.useWebGl = false; | ||
368 | world.import(worldData); | ||
369 | } | ||
370 | |||
371 | } | ||
279 | } | 372 | } |
280 | 373 | ||
281 | }); | 374 | }); |
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index afd298c9..21024125 100644 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js | |||
@@ -171,7 +171,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
171 | if(argType === 'string') { | 171 | if(argType === 'string') { |
172 | ruleText += '{' + declaration + '}'; | 172 | ruleText += '{' + declaration + '}'; |
173 | } else if(argType === 'object') { | 173 | } else if(argType === 'object') { |
174 | ruleText += '{' + nj.cssFromObject(declaration) + '}'; | 174 | ruleText += '{' + this.cssFromObject(declaration) + '}'; |
175 | } | 175 | } |
176 | 176 | ||
177 | stylesheet.insertRule(ruleText, index); | 177 | stylesheet.insertRule(ruleText, index); |
@@ -199,25 +199,42 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
199 | 199 | ||
200 | ///// Locally-scoped function to de-clutter variable declarations | 200 | ///// Locally-scoped function to de-clutter variable declarations |
201 | function getSelector(el, rule) { | 201 | function getSelector(el, rule) { |
202 | |||
203 | return this._getMostSpecificSelectorForElement(el, rule[this.CONST.SPECIFICITY_KEY]).selector; | 202 | return this._getMostSpecificSelectorForElement(el, rule[this.CONST.SPECIFICITY_KEY]).selector; |
204 | } | 203 | } |
205 | 204 | ||
206 | var selectorToOverride = getSelector.bind(this)(element, ruleToOverride), | 205 | var selectorToOverride = getSelector.bind(this)(element, ruleToOverride), |
207 | tokens = selectorToOverride.split(/\s/), | 206 | overrideData, rule; |
208 | newClass = this.generateClassName(element.nodeName), | 207 | |
209 | lastToken, pseudoSplit, base, pseudo, newToken, newSelector, rule; | 208 | ///// Get the overriding selector and className |
209 | overrideData = this.createOverrideSelector(selectorToOverride, element.nodeName); | ||
210 | |||
211 | ///// Create new rule with selector and insert it after the rule we're overriding | ||
212 | rule = this.addRule(overrideData.selector + ' { }', this.getRuleIndex(ruleToOverride)+1); | ||
213 | |||
214 | return { | ||
215 | className : overrideData.className, | ||
216 | rule : rule | ||
217 | }; | ||
218 | |||
219 | } | ||
220 | }, | ||
221 | |||
222 | createOverrideSelector : { | ||
223 | value: function(selectorToOverride, classPrefix, className) { | ||
224 | var tokens = selectorToOverride.split(/\s/), | ||
225 | newClass = className || this.generateClassName(classPrefix, true), | ||
226 | lastToken, pseudoSplit, base, pseudo, newToken, newSelector; | ||
210 | 227 | ||
211 | ///// Creating an overriding selector by replacing the last | 228 | ///// Creating an overriding selector by replacing the last |
212 | ///// class, attribute or type selector in passed-in rule's selector | 229 | ///// class, attribute or type selector in passed-in rule's selector |
213 | 230 | ||
214 | ///// Grab the last token | 231 | ///// Grab the last token |
215 | lastToken = tokens[tokens.length-1]; | 232 | lastToken = tokens[tokens.length-1]; |
216 | pseudoSplit = lastToken.split(':'); | 233 | pseudoSplit = lastToken.split(':'); |
217 | ///// The last token can have pseudo class. Let's preserve it | 234 | ///// The last token can have pseudo class. Let's preserve it |
218 | base = pseudoSplit[0]; | 235 | base = pseudoSplit[0]; |
219 | pseudo = (pseudoSplit[1]) ? ':'+pseudoSplit[1] : ''; | 236 | pseudo = (pseudoSplit[1]) ? ':'+pseudoSplit[1] : ''; |
220 | 237 | ||
221 | ///// Now, all we want to do is replace the last token with a | 238 | ///// Now, all we want to do is replace the last token with a |
222 | ///// generated class name, except if the last token is an ID selector, | 239 | ///// generated class name, except if the last token is an ID selector, |
223 | ///// in which case we append the generated class name to the ID selector | 240 | ///// in which case we append the generated class name to the ID selector |
@@ -231,18 +248,15 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
231 | ///// Append the generated class | 248 | ///// Append the generated class |
232 | newToken += '.' + newClass + pseudo; | 249 | newToken += '.' + newClass + pseudo; |
233 | } | 250 | } |
234 | 251 | ||
235 | ///// Now we can build the new selector by replacing the last token |