aboutsummaryrefslogtreecommitdiff
path: root/js/tools/EyedropperTool.js
diff options
context:
space:
mode:
authorJose Antonio Marquez2012-02-28 13:33:31 -0800
committerJose Antonio Marquez2012-02-28 13:33:31 -0800
commit3a25881b3a463e4f695be2f663f141710ba1d1c1 (patch)
tree657d55ad394de168dd627cf89b875906d10584e2 /js/tools/EyedropperTool.js
parentd764428023d87446fbbb153d8e04a23b900d71d5 (diff)
parent7c9291a5bab4abd849547f8878f6fb962fc88250 (diff)
downloadninja-3a25881b3a463e4f695be2f663f141710ba1d1c1.tar.gz
Merge branch 'refs/heads/NinjaInternal' into Color
Diffstat (limited to 'js/tools/EyedropperTool.js')
-rwxr-xr-xjs/tools/EyedropperTool.js187
1 files changed, 111 insertions, 76 deletions
diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js
index d007da39..11c15158 100755
--- a/js/tools/EyedropperTool.js
+++ b/js/tools/EyedropperTool.js
@@ -18,6 +18,7 @@ exports.EyedropperTool = Montage.create(toolBase, {
18 _elementUnderMouse: { value: null }, 18 _elementUnderMouse: { value: null },
19 _imageDataCanvas: { value: null }, 19 _imageDataCanvas: { value: null },
20 _imageDataContext: { value: null }, 20 _imageDataContext: { value: null },
21 _canSnap: { value: false },
21 22
22 Configure: { 23 Configure: {
23 value: function ( doActivate ) 24 value: function ( doActivate )
@@ -70,7 +71,7 @@ exports.EyedropperTool = Montage.create(toolBase, {
70 this._escape = false; 71 this._escape = false;
71 } 72 }
72 73
73 this._updateColor(this._color); 74 this._updateColor(this._color, true);
74 75
75 this._color = null; 76 this._color = null;
76 77
@@ -85,18 +86,7 @@ exports.EyedropperTool = Montage.create(toolBase, {
85 if(this._color && this._color.value) 86 if(this._color && this._color.value)
86 { 87 {
87 var color = this.application.ninja.colorController.getColorObjFromCss(this._previousColor); 88 var color = this.application.ninja.colorController.getColorObjFromCss(this._previousColor);
88 89 this._updateColor(color, true);
89 if (color && color.value) {
90 color.value.wasSetByCode = true;
91 color.value.type = 'change';
92 if (color.value.a) {
93 this.application.ninja.colorController.colorModel.alpha = {value: color.value.a,
94 wasSetByCode: true,
95 type: 'change'};
96 }
97 this.application.ninja.colorController.colorModel[color.mode] = color.value;
98 this._color = null;
99 }
100 } 90 }
101 this._escape = true; 91 this._escape = true;
102 } 92 }
@@ -143,24 +133,18 @@ exports.EyedropperTool = Montage.create(toolBase, {
143 { 133 {
144 this._deleteImageDataCanvas(); 134 this._deleteImageDataCanvas();
145 135
146 c = ElementsMediator.getColor(obj, this._isOverBackground(obj, event)); 136 c = this._getColorFromElement(obj, event);
147 if(c) 137 if(typeof(c) === "string")
138 {
139 color = this.application.ninja.colorController.getColorObjFromCss(c);
140 }
141 else
148 { 142 {
149 color = this.application.ninja.colorController.getColorObjFromCss(c.color.css); 143 color = this.application.ninja.colorController.getColorObjFromCss(c.color.css);
150 } 144 }
151 } 145 }
152 146
153 if (color && color.value) { 147 this._updateColor(color, false);
154 color.value.wasSetByCode = true;
155 color.value.type = 'changing';
156 if (color.value.a) {
157 this.application.ninja.colorController.colorModel.alpha = {value: color.value.a,
158 wasSetByCode: true,
159 type: 'changing'};
160 }
161 this.application.ninja.colorController.colorModel[color.mode] = color.value;
162 this._color = color;
163 }
164 } 148 }
165 else 149 else
166 { 150 {
@@ -172,81 +156,136 @@ exports.EyedropperTool = Montage.create(toolBase, {
172 }, 156 },
173 157
174 _updateColor: { 158 _updateColor: {
175 value: function(color) { 159 value: function(color, updateColorToolBar) {
176 if (color && color.value) { 160 var eventType = "changing";
177 var input = this.application.ninja.colorController.colorModel.input; 161 if(updateColorToolBar)
162 {
163 eventType = "change";
164 if (color && color.value)
165 {
166 var input = this.application.ninja.colorController.colorModel.input;
167
168 if(input === "fill")
169 {
170 this.application.ninja.colorController.colorToolbar.fill_btn.color(color.mode, color.value);
171 }
172 else
173 {
174 this.application.ninja.colorController.colorToolbar.stroke_btn.color(color.mode, color.value);
175 }
176
177 // Updating color chips will set the input type to "chip", so set it back here.
178 this.application.ninja.colorController.colorModel.input = input;
179 }
180 }
181
182 if(color)
183 {
184 if(color.color)
185 {
186 color.color.wasSetByCode = true;
187 color.color.type = eventType;
188 }
178 189
179 if(input === "fill") 190 if(color.mode === "gradient")
180 { 191 {
181 this.application.ninja.colorController.colorToolbar.fill_btn.color(color.mode, color.value); 192 this.application.ninja.colorController.colorModel["gradient"] =
193 {value: color.color, wasSetByCode: true, type: eventType};
182 } 194 }
183 else 195 else
184 { 196 {
185 this.application.ninja.colorController.colorToolbar.stroke_btn.color(color.mode, color.value); 197 if (color.color.a !== undefined)
198 {
199 this.application.ninja.colorController.colorModel.alpha =
200 {value: color.color.a, wasSetByCode: true, type: eventType};
201 }
202 if(color.color.mode)
203 {
204 this.application.ninja.colorController.colorModel[color.color.mode] = color.color;
205 }
206 else
207 {
208 this.application.ninja.colorController.colorModel["rgb"] = color.color;
209 }
186 } 210 }
187 211
188 // Updating color chips will set the input type to "chip", so set it back here. 212 if(updateColorToolBar)
189 this.application.ninja.colorController.colorModel.input = input; 213 {
190 214 this._previousColor = color.color.css;
191 color.value.wasSetByCode = true; 215 }
192 color.value.type = 'change'; 216 }
193 if (color.value.a) { 217 else
194 this.application.ninja.colorController.colorModel.alpha = {value: color.value.a, 218 {
195 wasSetByCode: true, 219 this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: eventType};
196 type: 'change'}; 220 this.application.ninja.colorController.colorModel.applyNoColor();
221 if(updateColorToolBar)
222 {
223 this._previousColor = "none";
197 } 224 }
198 this.application.ninja.colorController.colorModel[color.mode] = color.value;
199 this._previousColor = color.value.css;
200 } 225 }
226
227 this._color = color;
201 } 228 }
202 }, 229 },
203 230
204 // TODO - We don't want to calculate this repeatedly 231 // TODO - We don't want to calculate this repeatedly
205 _isOverBackground: { 232 _getColorFromElement: {
206 value: function(elt, event) 233 value: function(elt, event)
207 { 234 {
208 var border = ElementsMediator.getProperty(elt, "border", parseFloat); 235 var border = ElementsMediator.getProperty(elt, "border"),
209 236 borderWidth,
237 bounds3D,
238 innerBounds,
239 pt,
240 bt,
241 br,
242 bb,
243 bl,
244 xAdj,
245 yAdj,
246 tmpPt,
247 x,
248 y;
210 if(border) 249 if(border)
211 { 250 {
212 var bounds3D,
213 innerBounds = [],
214 pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)),
215 bt = ElementsMediator.getProperty(elt, "border-top", parseFloat),
216 br = ElementsMediator.getProperty(elt, "border-right", parseFloat),
217 bb = ElementsMediator.getProperty(elt, "border-bottom", parseFloat),
218 bl = ElementsMediator.getProperty(elt, "border-left", parseFloat);
219
220// this.application.ninja.stage.viewUtils.setViewportObj( elt );
221 bounds3D = this.application.ninja.stage.viewUtils.getElementViewBounds3D( elt ); 251 bounds3D = this.application.ninja.stage.viewUtils.getElementViewBounds3D( elt );
222// console.log("bounds"); 252 innerBounds = [];
223// console.dir(bounds3D); 253 pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas,
254 new WebKitPoint(event.pageX, event.pageY));
255 borderWidth = parseFloat(border);
256 if(isNaN(borderWidth))
257 {
258 bt = ElementsMediator.getProperty(elt, "border-top", parseFloat);
259 br = ElementsMediator.getProperty(elt, "border-right", parseFloat);
260 bb = ElementsMediator.getProperty(elt, "border-bottom", parseFloat);
261 bl = ElementsMediator.getProperty(elt, "border-left", parseFloat);
262 borderWidth = 0;
263 }
264 xAdj = bl || borderWidth;
265 yAdj = bt || borderWidth;
224 266
225 var xAdj = bl || border,
226 yAdj = bt || bor