diff options
Diffstat (limited to 'js/tools/EyedropperTool.js')
-rwxr-xr-x | js/tools/EyedropperTool.js | 187 |
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 || border; | ||
227 | innerBounds.push([bounds3D[0][0] + xAdj, bounds3D[0][1] + yAdj, 0]); | 267 | innerBounds.push([bounds3D[0][0] + xAdj, bounds3D[0][1] + yAdj, 0]); |
228 | 268 | ||
229 | yAdj += bb || border; | 269 | yAdj = bb || borderWidth; |
230 | innerBounds.push([bounds3D[1][0] + xAdj, bounds3D[1][1] - yAdj, 0]); | 270 | innerBounds.push([bounds3D[1][0] + xAdj, bounds3D[1][1] - yAdj, 0]); |