diff options
Diffstat (limited to 'js/controllers')
-rwxr-xr-x | js/controllers/document-controller.js | 2 | ||||
-rwxr-xr-x | js/controllers/elements/element-controller.js | 49 | ||||
-rwxr-xr-x | js/controllers/elements/shapes-controller.js | 140 | ||||
-rwxr-xr-x | js/controllers/selection-controller.js | 8 |
4 files changed, 154 insertions, 45 deletions
diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js index 87e93465..7d982a62 100755 --- a/js/controllers/document-controller.js +++ b/js/controllers/document-controller.js | |||
@@ -372,7 +372,7 @@ var DocumentController = exports.DocumentController = Montage.create(Component, | |||
372 | nextDocumentIndex = closeDocumentIndex - 1; | 372 | nextDocumentIndex = closeDocumentIndex - 1; |
373 | } | 373 | } |
374 | this.application.ninja.stage.stageView.switchDocument(this._documents[nextDocumentIndex]); | 374 | this.application.ninja.stage.stageView.switchDocument(this._documents[nextDocumentIndex]); |
375 | if(typeof this.activeDocument.stopVideos !== "undefined"){doc.stopVideos();} | 375 | if(typeof doc.stopVideos !== "undefined"){doc.stopVideos();} |
376 | this._removeDocumentView(doc.container); | 376 | this._removeDocumentView(doc.container); |
377 | }else if(this._documents.length === 0){ | 377 | }else if(this._documents.length === 0){ |
378 | if(typeof this.activeDocument.pauseAndStopVideos !== "undefined"){ | 378 | if(typeof this.activeDocument.pauseAndStopVideos !== "undefined"){ |
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index ec0335b4..70aba54e 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js | |||
@@ -51,31 +51,15 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, | |||
51 | 51 | ||
52 | setAttribute: { | 52 | setAttribute: { |
53 | value: function(el, att, value) { | 53 | value: function(el, att, value) { |
54 | if(att === "id") { | ||
55 | if(value === "") { | ||
56 | el.setAttribute(att, value); | ||
57 | return; | ||
58 | } | ||
59 | |||
60 | // Then check if this is a valid id by the following spec: http://www.w3.org/TR/REC-html40/types.html#h-6.2 | ||
61 | var regexID = /^([a-zA-Z])+([a-zA-Z0-9_\.\:\-])+/; | ||
62 | if(!regexID.test(value)) { | ||
63 | alert("Invalid ID"); | ||
64 | return; | ||
65 | } else if (this.application.ninja.currentDocument._document.getElementById(value) !== null) { | ||
66 | alert("The following ID: " + value + " is already in Use"); | ||
67 | } | ||
68 | |||
69 | } | ||
70 | |||
71 | el.setAttribute(att, value); | 54 | el.setAttribute(att, value); |
72 | } | 55 | } |
73 | }, | 56 | }, |
74 | 57 | ||
75 | //-------------------------------------------------------------------------------------------------------- | 58 | //-------------------------------------------------------------------------------------------------------- |
76 | // Routines to get/set color properties | 59 | // Routines to get/set color properties |
60 | // borderSide : "top", "right", "bottom", or "left" | ||
77 | getColor: { | 61 | getColor: { |
78 | value: function(el, isFill) { | 62 | value: function(el, isFill, borderSide) { |
79 | var colorObj, | 63 | var colorObj, |
80 | color, | 64 | color, |
81 | image; | 65 | image; |
@@ -87,22 +71,29 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, | |||
87 | { | 71 | { |
88 | return el.elementModel.fill; | 72 | return el.elementModel.fill; |
89 | } | 73 | } |
90 | // return this.application.ninja.stylesController.getElementStyle(el, "background-color"); | ||
91 | //TODO: Once logic for color and gradient is established, this needs to be revised | 74 | //TODO: Once logic for color and gradient is established, this needs to be revised |
92 | color = this.getProperty(el, "background-color"); | 75 | color = this.getProperty(el, "background-color"); |
93 | image = this.getProperty(el, "background-image"); | 76 | image = this.getProperty(el, "background-image"); |
94 | } | 77 | } |
95 | else | 78 | else |
96 | { | 79 | { |
97 | // TODO - Need to figure out which border side user wants | 80 | // Try getting border color from specific side first |
98 | if(el.elementModel.stroke) | 81 | if(borderSide) |
99 | { | 82 | { |
100 | return el.elementModel.stroke; | 83 | color = this.getProperty(el, "border-" + borderSide + "-color"); |
84 | image = this.getProperty(el, "border-" + borderSide + "-image"); | ||
85 | } | ||
86 | |||
87 | // If no color was found, look up the shared border color | ||
88 | if(!color && !image) | ||
89 | { | ||
90 | if(el.elementModel.stroke) | ||
91 | { | ||
92 | return el.elementModel.stroke; | ||
93 | } | ||
94 | color = this.getProperty(el, "border-color"); | ||
95 | image = this.getProperty(el, "border-image"); | ||
101 | } | 96 | } |
102 | // TODO - Need to figure out which border side user wants | ||
103 | // return this.application.ninja.stylesController.getElementStyle(el, "border-color"); | ||
104 | color = this.getProperty(el, "border-color"); | ||
105 | image = this.getProperty(el, "border-image"); | ||
106 | } | 97 | } |
107 | 98 | ||
108 | if(color || image) { | 99 | if(color || image) { |
@@ -120,11 +111,15 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, | |||
120 | { | 111 | { |
121 | el.elementModel.fill = colorObj; | 112 | el.elementModel.fill = colorObj; |
122 | } | 113 | } |
123 | else | 114 | else if(!borderSide) |
124 | { | 115 | { |
125 | // TODO - Need to update border style and width also | 116 | // TODO - Need to update border style and width also |
126 | el.elementModel.stroke = colorObj; | 117 | el.elementModel.stroke = colorObj; |
127 | } | 118 | } |
119 | else | ||
120 | { | ||
121 | // TODO - Should update specific border sides too | ||
122 | } | ||
128 | 123 | ||
129 | return colorObj; | 124 | return colorObj; |
130 | } | 125 | } |
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 3423a5a7..d72d9c14 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js | |||
@@ -259,24 +259,82 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
259 | } | 259 | } |
260 | }, | 260 | }, |
261 | 261 | ||
262 | setColor: { | 262 | _setGradientMaterial: { |
263 | value: function(el, color, isFill) { | 263 | value: function(el, gradientMode, isFill) { |
264 | var webGl = color.webGlColor || color.color.webGlColor; | 264 | var m = "LinearGradientMaterial", |
265 | if(!webGl) | 265 | fm; |
266 | if(gradientMode === "radial") | ||
266 | { | 267 | { |
267 | webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); | 268 | m = "RadialGradientMaterial"; |
268 | } | 269 | } |
270 | |||
269 | if(isFill) | 271 | if(isFill) |
270 | { | 272 | { |
271 | el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); | 273 | if(el.elementModel.shapeModel.fillMaterial.getName() !== m) |
272 | this.setShapeProperty(el, "fill", webGl); | 274 | { |
273 | this.setShapeProperty(el, "background", color); | 275 | fm = Object.create(MaterialsModel.getMaterial(m)); |
276 | if(fm) | ||
277 | { | ||
278 | el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm); | ||
279 | el.elementModel.shapeModel.fillMaterial = fm; | ||
280 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); | ||
281 | } | ||
282 | } | ||
274 | } | 283 | } |
275 | else | 284 | else |
276 | { | 285 | { |
277 | el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl); | 286 | if(el.elementModel.shapeModel.strokeMaterial.getName() !== m) |
278 | this.setShapeProperty(el, "stroke", webGl); | 287 | { |
279 | this.setShapeProperty(el, "border", color); | 288 | fm = Object.create(MaterialsModel.getMaterial(m)); |
289 | if(fm) | ||
290 | { | ||
291 | el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(fm); | ||
292 | el.elementModel.shapeModel.strokeMaterial = fm; | ||
293 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); | ||
294 | } | ||
295 | } | ||
296 | } | ||
297 | } | ||
298 | }, | ||
299 | |||
300 | setColor: { | ||
301 | value: function(el, color, isFill) { | ||
302 | var mode = color.mode, | ||
303 | webGl; | ||
304 | if(isFill) | ||
305 | { | ||
306 | if(mode) | ||
307 | { | ||
308 | switch (mode) { | ||
309 | case 'nocolor': | ||
310 | el.elementModel.shapeModel.GLGeomObj.setFillColor(null); | ||
311 | this.setShapeProperty(el, "fill", null); | ||
312 | this.setShapeProperty(el, "background", color); | ||
313 | el.elementModel.fill = null; | ||
314 | return; | ||
315 | case 'gradient': | ||
316 | if(el.elementModel.shapeModel.useWebGl) | ||
317 | { | ||
318 | this._setGradientMaterial(el, color.color.gradientMode, isFill); | ||
319 | } | ||
320 | el.elementModel.shapeModel.GLGeomObj.setFillColor({gradientMode:color.color.gradientMode, color:color.color.stops}); | ||
321 | el.elementModel.shapeModel.GLWorld.render(); | ||
322 | this.setShapeProperty(el, "fill", color.color.css); | ||
323 | this.setShapeProperty(el, "background", color); | ||
324 | el.elementModel.fill = color; | ||
325 | break; | ||
326 | default: | ||
327 | webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); | ||
328 | el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); | ||
329 | this.setShapeProperty(el, "fill", webGl); | ||
330 | this.setShapeProperty(el, "background", color); | ||
331 |