diff options
Diffstat (limited to 'js/controllers/elements')
-rwxr-xr-x | js/controllers/elements/body-controller.js | 9 | ||||
-rwxr-xr-x | js/controllers/elements/component-controller.js | 4 | ||||
-rwxr-xr-x | js/controllers/elements/controller-factory.js | 4 | ||||
-rwxr-xr-x | js/controllers/elements/element-controller.js | 128 | ||||
-rwxr-xr-x | js/controllers/elements/shapes-controller.js | 107 |
5 files changed, 193 insertions, 59 deletions
diff --git a/js/controllers/elements/body-controller.js b/js/controllers/elements/body-controller.js index 7a3a66f5..0dc11b82 100755 --- a/js/controllers/elements/body-controller.js +++ b/js/controllers/elements/body-controller.js | |||
@@ -30,7 +30,8 @@ exports.BodyController = Montage.create(ElementController, { | |||
30 | value: function(el, p) { | 30 | value: function(el, p) { |
31 | switch(p) { | 31 | switch(p) { |
32 | case "background" : | 32 | case "background" : |
33 | return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el, "background-color", false, true)); | 33 | case "background-color": |
34 | return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el, "background-color")); | ||
34 | case "border": | 35 | case "border": |
35 | return 0; | 36 | return 0; |
36 | case "height": | 37 | case "height": |
@@ -47,8 +48,8 @@ exports.BodyController = Montage.create(ElementController, { | |||
47 | setProperty: { | 48 | setProperty: { |
48 | value: function(el, p, value) { | 49 | value: function(el, p, value) { |
49 | switch(p) { | 50 | switch(p) { |
50 | case "body-background": | ||
51 | case "background": | 51 | case "background": |
52 | case "background-color": | ||
52 | this.application.ninja.stylesController.setElementStyle(el, "background-color", value); | 53 | this.application.ninja.stylesController.setElementStyle(el, "background-color", value); |
53 | break; | 54 | break; |
54 | case "overflow": | 55 | case "overflow": |
@@ -71,7 +72,7 @@ exports.BodyController = Montage.create(ElementController, { | |||
71 | 72 | ||
72 | getPerspectiveDist: { | 73 | getPerspectiveDist: { |
73 | value: function(el) { | 74 | value: function(el) { |
74 | if(el.elementModel && el.elementModel.props3D && el.elementModel.props3D.perspectiveDist) { | 75 | if(el.elementModel.props3D && el.elementModel.props3D.perspectiveDist) { |
75 | return el.elementModel.props3D.perspectiveDist; | 76 | return el.elementModel.props3D.perspectiveDist; |
76 | } else { | 77 | } else { |
77 | var dist = this.application.ninja.stylesController.getPerspectiveDistFromElement(el, true); | 78 | var dist = this.application.ninja.stylesController.getPerspectiveDistFromElement(el, true); |
@@ -83,7 +84,7 @@ exports.BodyController = Montage.create(ElementController, { | |||
83 | 84 | ||
84 | getMatrix: { | 85 | getMatrix: { |
85 | value: function(el) { | 86 | value: function(el) { |
86 | if(el.elementModel && el.elementModel.props3D && el.elementModel.props3D.matrix3d) | 87 | if(el.elementModel.props3D && el.elementModel.props3D.matrix3d) |
87 | { | 88 | { |
88 | return el.elementModel.props3D.matrix3d.slice(0); | 89 | return el.elementModel.props3D.matrix3d.slice(0); |
89 | } | 90 | } |
diff --git a/js/controllers/elements/component-controller.js b/js/controllers/elements/component-controller.js index 5b0aaeac..dd0766df 100755 --- a/js/controllers/elements/component-controller.js +++ b/js/controllers/elements/component-controller.js | |||
@@ -11,7 +11,7 @@ exports.ComponentController = Montage.create(ElementController, { | |||
11 | 11 | ||
12 | getProperty: { | 12 | getProperty: { |
13 | value: function(el, prop) { | 13 | value: function(el, prop) { |
14 | var component = el.controller || this.application.ninja.currentDocument.model.getComponentFromElement(el); | 14 | var component = el.controller; |
15 | 15 | ||
16 | switch(prop) { | 16 | switch(prop) { |
17 | case "id": | 17 | case "id": |
@@ -34,7 +34,7 @@ exports.ComponentController = Montage.create(ElementController, { | |||
34 | 34 | ||
35 | setProperty: { | 35 | setProperty: { |
36 | value: function(el, p, value) { | 36 | value: function(el, p, value) { |
37 | var component = el.controller || this.application.ninja.currentDocument.model.getComponentFromElement(el); | 37 | var component = el.controller; |
38 | 38 | ||
39 | switch(p) { | 39 | switch(p) { |
40 | case "id": | 40 | case "id": |
diff --git a/js/controllers/elements/controller-factory.js b/js/controllers/elements/controller-factory.js index 3ac3fe14..2d2a5cd1 100755 --- a/js/controllers/elements/controller-factory.js +++ b/js/controllers/elements/controller-factory.js | |||
@@ -8,7 +8,6 @@ var Montage = require("montage/core/core").Montage; | |||
8 | 8 | ||
9 | var BodyController = require("js/controllers/elements/body-controller").BodyController, | 9 | var BodyController = require("js/controllers/elements/body-controller").BodyController, |
10 | BlockController = require("js/controllers/elements/block-controller").BlockController, | 10 | BlockController = require("js/controllers/elements/block-controller").BlockController, |
11 | StageController = require("js/controllers/elements/stage-controller").StageController, | ||
12 | ShapesController = require("js/controllers/elements/shapes-controller").ShapesController, | 11 | ShapesController = require("js/controllers/elements/shapes-controller").ShapesController, |
13 | ImageController = require("js/controllers/elements/image-controller").ImageController, | 12 | ImageController = require("js/controllers/elements/image-controller").ImageController, |
14 | VideoController = require("js/controllers/elements/video-controller").VideoController, | 13 | VideoController = require("js/controllers/elements/video-controller").VideoController, |
@@ -27,7 +26,8 @@ exports.ControllerFactory = Montage.create(Montage, { | |||
27 | if(value.indexOf("block") !== -1) { | 26 | if(value.indexOf("block") !== -1) { |
28 | return BlockController; | 27 | return BlockController; |
29 | } else if(value.indexOf("stage") !== -1) { | 28 | } else if(value.indexOf("stage") !== -1) { |
30 | return StageController; | 29 | // return StageController; |
30 | alert("Calling the stage controller. Should not be calling this object"); | ||
31 | } else if(value.indexOf("body") !== -1) { | 31 | } else if(value.indexOf("body") !== -1) { |
32 | return BodyController; | 32 | return BodyController; |
33 | } else if(value.indexOf("shape") !== -1) { | 33 | } else if(value.indexOf("shape") !== -1) { |
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index 20225c61..4a02e9a3 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js | |||
@@ -5,12 +5,16 @@ 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 | Component = require("montage/ui/component").Component; | 8 | Component = require("montage/ui/component").Component, |
9 | njModule = require("js/lib/NJUtils"); | ||
9 | 10 | ||
10 | exports.ElementController = Montage.create(Component, { | 11 | exports.ElementController = Montage.create(Component, { |
11 | 12 | ||
12 | addElement: { | 13 | addElement: { |
13 | value: function(el, styles) { | 14 | value: function(el, styles) { |
15 | |||
16 | if (el.getAttribute) el.setAttribute('data-ninja-node', 'true'); | ||
17 | |||
14 | if(this.application.ninja.timeline.currentLayerSelected) { | 18 | if(this.application.ninja.timeline.currentLayerSelected) { |
15 | var selectedLayerIndex = this.application.ninja.timeline.getLayerIndexByID(this.application.ninja.timeline.currentLayerSelected.layerData.layerID); | 19 | var selectedLayerIndex = this.application.ninja.timeline.getLayerIndexByID(this.application.ninja.timeline.currentLayerSelected.layerData.layerID); |
16 | 20 | ||
@@ -33,7 +37,7 @@ exports.ElementController = Montage.create(Component, { | |||
33 | // Remove the element from the DOM and clear the GLWord. | 37 | // Remove the element from the DOM and clear the GLWord. |
34 | removeElement: { | 38 | removeElement: { |
35 | value: function(el) { | 39 | value: function(el) { |
36 | if(el.elementModel && el.elementModel.shapeModel && el.elementModel.shapeModel.GLWorld) { | 40 | if(el.elementModel.shapeModel && el.elementModel.shapeModel.GLWorld) { |
37 | el.elementModel.shapeModel.GLWorld.clearTree(); | 41 | el.elementModel.shapeModel.GLWorld.clearTree(); |
38 | } | 42 | } |
39 | el.parentNode.removeChild(el); | 43 | el.parentNode.removeChild(el); |
@@ -159,28 +163,12 @@ exports.ElementController = Montage.create(Component, { | |||
159 | el.elementModel.stroke = null; | 163 | el.elementModel.stroke = null; |
160 | return; | 164 | return; |
161 | case 'gradient': | 165 | case 'gradient': |
162 | this.setProperty(el, "border-image", color.color.css); | 166 | this.setGradientBorder(el, color.color.gradientMode, color.color.css); |
163 | this.setProperty(el, "border-color", "none"); | ||
164 | if(color.borderInfo) { | ||
165 | if(color.borderInfo.borderWidth) { | ||
166 | this.setProperty(el, "border-width", color.borderInfo.borderWidth + color.borderInfo.borderUnits); | ||
167 | } | ||
168 | if(color.borderInfo.borderStyle) { | ||
169 | this.setProperty(el, "border-style", color.borderInfo.borderStyle); | ||
170 | } | ||
171 | } | ||
172 | break; | 167 | break; |
173 | default: | 168 | default: |
174 | this.setProperty(el, "border-image", "none"); | 169 | this.setProperty(el, "border-image", "none"); |
170 | this.setProperty(el, "border-image-slice", ""); | ||
175 | this.setProperty(el, "border-color", color.color.css); | 171 | this.setProperty(el, "border-color", color.color.css); |
176 | if(color.borderInfo) { | ||
177 | if(color.borderInfo.borderWidth) { | ||
178 | this.setProperty(el, "border-width", color.borderInfo.borderWidth + color.borderInfo.borderUnits); | ||
179 | } | ||
180 | if(color.borderInfo.borderStyle) { | ||
181 | this.setProperty(el, "border-style", color.borderInfo.borderStyle); | ||
182 | } | ||
183 | } | ||
184 | } | 172 | } |
185 | } | 173 | } |
186 | el.elementModel.stroke = color; | 174 | el.elementModel.stroke = color; |
@@ -188,26 +176,108 @@ exports.ElementController = Montage.create(Component, { | |||
188 | } | 176 | } |
189 | }, | 177 | }, |
190 | 178 | ||
179 | setGradientBorder: { | ||
180 | value: function(el, gradientMode, css) { | ||
181 | if(gradientMode === "radial") { | ||
182 | this.setProperty(el, "border-image", css.replace("ellipse", "circle")); | ||
183 | } else { | ||
184 | this.setProperty(el, "border-image", css); | ||
185 | } | ||
186 | this.setProperty(el, "border-color", "none"); | ||
187 | // gradient slice = borderWidth/totalWidth | ||
188 | var b = parseInt(this.getProperty(el, "border-left-width", true)), | ||
189 | w = parseInt(this.getProperty(el, "width", true)), | ||
190 | h = parseInt(this.getProperty(el, "height", true)); | ||
191 | if(h > w) { | ||
192 | w = h; | ||
193 | } | ||
194 | this.setProperty(el, "border-image-slice", Math.floor(b/(w+b+b) * 100) + "%"); | ||
195 | } | ||
196 | }, | ||
197 | |||
191 | getStroke: { | 198 | getStroke: { |
192 | value: function(el) { | 199 | value: function(el, stroke) { |
193 | // TODO - Need to figure out which border side user wants | 200 | var strokeInfo = {}, |
194 | return this.application.ninja.stylesController.getElementStyle(el, "border"); | 201 | color, |
202 | borderWidth, | ||
203 | border; | ||
204 | if(stroke.colorInfo) { | ||
205 | strokeInfo.colorInfo = {}; | ||
206 | color = this.getColor(el, false); | ||
207 | if(color && color.color) { | ||
208 | strokeInfo.col |