diff options
Diffstat (limited to 'js/controllers/elements/element-controller.js')
-rwxr-xr-x | js/controllers/elements/element-controller.js | 184 |
1 files changed, 57 insertions, 127 deletions
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index b35251ad..35a543ac 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js | |||
@@ -5,22 +5,27 @@ 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 | NJComponent = require("js/lib/nj-base").NJComponent; | 8 | Component = require("montage/ui/component").Component; |
9 | 9 | ||
10 | var ElementController = exports.ElementController = Montage.create(NJComponent, { | 10 | exports.ElementController = Montage.create(Component, { |
11 | 11 | ||
12 | addElement: { | 12 | addElement: { |
13 | value: function(el, styles) { | 13 | value: function(el, styles) { |
14 | this.application.ninja.currentDocument.documentRoot.appendChild(el); | 14 | this.application.ninja.currentDocument.documentRoot.appendChild(el); |
15 | // Nested elements - | 15 | // Nested elements - TODO make sure the CSS is correct before nesting elements |
16 | // TODO make sure the CSS is correct before nesting elements | ||
17 | // this.application.ninja.currentSelectedContainer.appendChild(el); | 16 | // this.application.ninja.currentSelectedContainer.appendChild(el); |
18 | this.application.ninja.stylesController.setElementStyles(el, styles); | 17 | if(styles) { |
18 | this.application.ninja.stylesController.setElementStyles(el, styles); | ||
19 | } | ||
19 | } | 20 | } |
20 | }, | 21 | }, |
21 | 22 | ||
23 | // Remove the element from the DOM and clear the GLWord. | ||
22 | removeElement: { | 24 | removeElement: { |
23 | value: function(el) { | 25 | value: function(el) { |
26 | if(el.elementModel && el.elementModel.shapeModel && el.elementModel.shapeModel.GLWorld) { | ||
27 | el.elementModel.shapeModel.GLWorld.clearTree(); | ||
28 | } | ||
24 | el.parentNode.removeChild(el); | 29 | el.parentNode.removeChild(el); |
25 | } | 30 | } |
26 | }, | 31 | }, |
@@ -42,10 +47,10 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, | |||
42 | }, | 47 | }, |
43 | 48 | ||
44 | setProperties: { | 49 | setProperties: { |
45 | value: function(el, props, index) { | 50 | value: function(element, properties) { |
46 | for(var p in props) { | 51 | for(var property in properties) { |
47 | this.application.ninja.stylesController.setElementStyle(el, p, props[p][index]); | 52 | this.application.ninja.stylesController.setElementStyle(element, property, properties[property]); |
48 | } | 53 | } |
49 | } | 54 | } |
50 | }, | 55 | }, |
51 | 56 | ||
@@ -60,37 +65,29 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, | |||
60 | // borderSide : "top", "right", "bottom", or "left" | 65 | // borderSide : "top", "right", "bottom", or "left" |
61 | getColor: { | 66 | getColor: { |
62 | value: function(el, isFill, borderSide) { | 67 | value: function(el, isFill, borderSide) { |
63 | var colorObj, | 68 | var colorObj, color, image; |
64 | color, | ||
65 | image; | ||
66 | 69 | ||
67 | // Return cached value if one exists | 70 | // Return cached value if one exists |
68 | if(isFill) | 71 | if(isFill) { |
69 | { | 72 | if(el.elementModel.fill) { |
70 | if(el.elementModel.fill) | ||
71 | { | ||
72 | return el.elementModel.fill; | 73 | return el.elementModel.fill; |
73 | } | 74 | } |
74 | //TODO: Once logic for color and gradient is established, this needs to be revised | 75 | //TODO: Once logic for color and gradient is established, this needs to be revised |
75 | color = this.getProperty(el, "background-color"); | 76 | color = this.getProperty(el, "background-color"); |
76 | image = this.getProperty(el, "background-image"); | 77 | image = this.getProperty(el, "background-image"); |
77 | } | 78 | } else { |
78 | else | ||
79 | { | ||
80 | // Try getting border color from specific side first | 79 | // Try getting border color from specific side first |
81 | if(borderSide) | 80 | if(borderSide) { |
82 | { | ||
83 | color = this.getProperty(el, "border-" + borderSide + "-color"); | 81 | color = this.getProperty(el, "border-" + borderSide + "-color"); |
84 | image = this.getProperty(el, "border-" + borderSide + "-image"); | 82 | image = this.getProperty(el, "border-" + borderSide + "-image"); |
85 | } | 83 | } |
86 | 84 | ||
87 | // If no color was found, look up the shared border color | 85 | // If no color was found, look up the shared border color |
88 | if(!color && !image) | 86 | if(!color && !image) { |
89 | { | 87 | if(el.elementModel.stroke) { |
90 | if(el.elementModel.stroke) | ||
91 | { | ||
92 | return el.elementModel.stroke; | 88 | return el.elementModel.stroke; |
93 | } | 89 | } |
90 | |||
94 | color = this.getProperty(el, "border-color"); | 91 | color = this.getProperty(el, "border-color"); |
95 | image = this.getProperty(el, "border-image"); | 92 | image = this.getProperty(el, "border-image"); |
96 | } | 93 | } |
@@ -107,17 +104,12 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, | |||
107 | } | 104 | } |
108 | 105 | ||
109 | // Update cache | 106 | // Update cache |
110 | if(isFill) | 107 | if(isFill) { |
111 | { | ||
112 | el.elementModel.fill = colorObj; | 108 | el.elementModel.fill = colorObj; |
113 | } | 109 | } else if(!borderSide) { |
114 | else if(!borderSide) | ||
115 | { | ||
116 | // TODO - Need to update border style and width also | 110 | // TODO - Need to update border style and width also |
117 | el.elementModel.stroke = colorObj; | 111 | el.elementModel.stroke = colorObj; |
118 | } | 112 | } else { |
119 | else | ||
120 | { | ||
121 | // TODO - Should update specific border sides too | 113 | // TODO - Should update specific border sides too |
122 | } | 114 | } |
123 | 115 | ||
@@ -128,10 +120,9 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, | |||
128 | setColor: { | 120 | setColor: { |
129 | value: function(el, color, isFill) { | 121 | value: function(el, color, isFill) { |
130 | var mode = color.mode; | 122 | var mode = color.mode; |
131 | if(isFill) | 123 | |
132 | { | 124 | if(isFill) { |
133 | if(mode) | 125 | if(mode) { |
134 | { | ||
135 | switch (mode) { | 126 | switch (mode) { |
136 | case 'nocolor': | 127 | case 'nocolor': |
137 | this.setProperty(el, "background-image", "none"); | 128 | this.setProperty(el, "background-image", "none"); |
@@ -147,12 +138,10 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, | |||
147 | this.setProperty(el, "background-color", color.color.css); | 138 | this.setProperty(el, "background-color", color.color.css); |
148 | } | 139 | } |
149 | } | 140 | } |
141 | |||
150 | el.elementModel.fill = color; | 142 | el.elementModel.fill = color; |
151 | } | 143 | } else { |
152 | else | 144 | if(mode) { |
153 | { | ||
154 | if(mode) | ||
155 | { | ||
156 | switch (mode) { | 145 | switch (mode) { |
157 | case 'nocolor': | 146 | case 'nocolor': |
158 | this.setProperty(el, "border-image", "none"); | 147 | this.setProperty(el, "border-image", "none"); |
@@ -162,20 +151,16 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, | |||
162 | case 'gradient': | 151 | case 'gradient': |
163 | this.setProperty(el, "border-image", color.color.css); | 152 | this.setProperty(el, "border-image", color.color.css); |
164 | this.setProperty(el, "border-color", "none"); | 153 | this.setProperty(el, "border-color", "none"); |
165 | if(color.borderInfo) | 154 | if(color.borderInfo) { |
166 | { | 155 | this.setProperty(el, "border-width", color.borderInfo.borderWidth + color.borderInfo.borderUnits); |
167 | this.setProperty(el, "border-width", color.borderInfo.borderWidth + | ||
168 | color.borderInfo.borderUnits); | ||
169 | this.setProperty(el, "border-style", color.borderInfo.borderStyle); | 156 | this.setProperty(el, "border-style", color.borderInfo.borderStyle); |
170 | } | 157 | } |
171 | break; | 158 | break; |
172 | default: | 159 | default: |
173 | this.setProperty(el, "border-image", "none"); | 160 | this.setProperty(el, "border-image", "none"); |
174 | this.setProperty(el, "border-color", color.color.css); | 161 | this.setProperty(el, "border-color", color.color.css); |
175 | if(color.borderInfo) | 162 | if(color.borderInfo) { |
176 | { | 163 | this.setProperty(el, "border-width", color.borderInfo.borderWidth + color.borderInfo.borderUnits); |
177 | this.setProperty(el, "border-width", color.borderInfo.borderWidth + | ||
178 | color.borderInfo.borderUnits); | ||
179 | this.setProperty(el, "border-style", color.borderInfo.borderStyle); | 164 | this.setProperty(el, "border-style", color.borderInfo.borderStyle); |
180 | } | 165 | } |
181 | } | 166 | } |
@@ -204,8 +189,7 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, | |||
204 | // Routines to get/set 3D properties | 189 | // Routines to get/set 3D properties |
205 | get3DProperty: { | 190 | get3DProperty: { |
206 | value: function(el, prop) { | 191 | value: function(el, prop) { |
207 | if(el.elementModel && el.elementModel.props3D) | 192 | if(el.elementModel && el.elementModel.props3D) { |
208 | { | ||
209 | return el.elementModel.props3D[prop]; | 193 | return el.elementModel.props3D[prop]; |
210 | } | 194 | } |
211 | } | 195 | } |
@@ -213,21 +197,16 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, | |||
213 |