aboutsummaryrefslogtreecommitdiff
path: root/js/tools/EyedropperTool.js
diff options
context:
space:
mode:
authorPushkar Joshi2012-02-24 12:08:49 -0800
committerPushkar Joshi2012-02-24 12:08:49 -0800
commit03ca7a5ed13c25faaa9100bb666e062fd15335e6 (patch)
treec51112223ceb9121cd595a60335eb2795215590f /js/tools/EyedropperTool.js
parentfcb12cc09eb3cd3b42bd215877ba18f449275b75 (diff)
parent053fc63a2950c7a5ee4ebf98033b64d474a3c46e (diff)
downloadninja-03ca7a5ed13c25faaa9100bb666e062fd15335e6.tar.gz
Merge branch 'pentool' into brushtool
Conflicts: imports/codemirror/mode/scheme/scheme.js js/tools/BrushTool.js
Diffstat (limited to 'js/tools/EyedropperTool.js')
-rwxr-xr-x[-rw-r--r--]js/tools/EyedropperTool.js206
1 files changed, 190 insertions, 16 deletions
diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js
index 795753d2..d007da39 100644..100755
--- a/js/tools/EyedropperTool.js
+++ b/js/tools/EyedropperTool.js
@@ -6,7 +6,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
6 6
7var Montage = require("montage/core/core").Montage, 7var Montage = require("montage/core/core").Montage,
8 ElementsMediator = require("js/mediators/element-mediator").ElementMediator, 8 ElementsMediator = require("js/mediators/element-mediator").ElementMediator,
9 9 drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils,
10 vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils,
10 toolBase = require("js/tools/ToolBase").toolBase; 11 toolBase = require("js/tools/ToolBase").toolBase;
11 12
12exports.EyedropperTool = Montage.create(toolBase, { 13exports.EyedropperTool = Montage.create(toolBase, {
@@ -14,6 +15,9 @@ exports.EyedropperTool = Montage.create(toolBase, {
14 _isMouseDown: { value: false }, 15 _isMouseDown: { value: false },
15 _previousColor: { value: null}, 16 _previousColor: { value: null},
16 _color: { value: null}, 17 _color: { value: null},
18 _elementUnderMouse: { value: null },
19 _imageDataCanvas: { value: null },
20 _imageDataContext: { value: null },
17 21
18 Configure: { 22 Configure: {
19 value: function ( doActivate ) 23 value: function ( doActivate )
@@ -46,6 +50,8 @@ exports.EyedropperTool = Montage.create(toolBase, {
46 { 50 {
47 this._isMouseDown = false; 51 this._isMouseDown = false;
48 this._escape = false; 52 this._escape = false;
53 this._elementUnderMouse = null;
54 this._deleteImageDataCanvas();
49 } 55 }
50 if(this._isMouseDown) 56 if(this._isMouseDown)
51 { 57 {
@@ -67,6 +73,9 @@ exports.EyedropperTool = Montage.create(toolBase, {
67 this._updateColor(this._color); 73 this._updateColor(this._color);
68 74
69 this._color = null; 75 this._color = null;
76
77 this._elementUnderMouse = null;
78 this._deleteImageDataCanvas();
70 } 79 }
71 } 80 }
72 }, 81 },
@@ -95,27 +104,70 @@ exports.EyedropperTool = Montage.create(toolBase, {
95 104
96 _updateColorFromPoint: { 105 _updateColorFromPoint: {
97 value : function (event) { 106 value : function (event) {
98 var obj = this.application.ninja.stage.GetElement(event); 107 var c,
108 color,
109 obj = this.application.ninja.stage.GetElement(event);
99 if (obj) 110 if (obj)
100 { 111 {
101 // TODO - figure out if user clicked on a border - for now, just get fill 112 if(this.application.ninja.currentDocument.inExclusion(obj) !== -1)
102 var c = ElementsMediator.getColor(obj, true);
103 if(c)
104 { 113 {
105 var color = this.application.ninja.colorController.getColorObjFromCss(c); 114 this._elementUnderMouse = null;
106 if (color && color.value) { 115 this._deleteImageDataCanvas();
107 color.value.wasSetByCode = true; 116 return;
108 color.value.type = 'changing'; 117 }
109 if (color.value.a) { 118 this._elementUnderMouse = obj;
110 this.application.ninja.colorController.colorModel.alpha = {value: color.value.a, 119 // Depending on the object type, we need to get different colors
111 wasSetByCode: true, 120 if(obj.elementModel.selection === "image")
112 type: 'changing'}; 121 {
113 } 122 c = this._getColorAtPoint(obj, event);
114 this.application.ninja.colorController.colorModel[color.mode] = color.value; 123 if(c)
115 this._color = color; 124 {
125 color = this.application.ninja.colorController.getColorObjFromCss(c);
126 }
127 }
128 else if (obj.elementModel.selection === "canvas")
129 {
130 this._deleteImageDataCanvas();
131
132 var pt = webkitConvertPointFromPageToNode(obj,
133 new WebKitPoint(event.pageX, event.pageY)),
134 ctx = obj.getContext("2d");
135
136 c = this._getColorFromCanvas(ctx, pt);
137 if(c)
138 {
139 color = this.application.ninja.colorController.getColorObjFromCss(c);
140 }
141 }
142 else
143 {
144 this._deleteImageDataCanvas();
145
146 c = ElementsMediator.getColor(obj, this._isOverBackground(obj, event));
147 if(c)
148 {
149 color = this.application.ninja.colorController.getColorObjFromCss(c.color.css);
150 }
151 }
152
153 if (color && color.value) {
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'};
116 } 160 }
161 this.application.ninja.colorController.colorModel[color.mode] = color.value;
162 this._color = color;
117 } 163 }
118 } 164 }
165 else
166 {
167 this._elementUnderMouse = null;
168 this._deleteImageDataCanvas();
169 }
170
119 } 171 }
120 }, 172 },
121 173
@@ -147,6 +199,128 @@ exports.EyedropperTool = Montage.create(toolBase, {
147 this._previousColor = color.value.css; 199 this._previousColor = color.value.css;
148 } 200 }
149 } 201 }
202 },
203
204 // TODO - We don't want to calculate this repeatedly
205 _isOverBackground: {
206 value: function(elt, event)
207 {
208 var border = ElementsMediator.getProperty(elt, "border", parseFloat);
209
210 if(border)
211 {
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 );
222// console.log("bounds");
223// console.dir(bounds3D);
224
225 var xAdj = bl || border,
226 yAdj = bt || border;
227 innerBounds.push([bounds3D[0][0] + xAdj, bounds3D[0][1] + yAdj, 0]);
228
229 yAdj += bb || border;
230 innerBounds.push([bounds3D[1][0] + xAdj, bounds3D[1][1] - yAdj, 0]);
231
232 xAdj += br || border;
233 innerBounds.push([bounds3D[2][0] - xAdj, bounds3D[2][1] - yAdj, 0]);
234
235 yAdj = bt || border;
236 innerBounds.push([bounds3D[3][0] - xAdj, bounds3D[3][1] + yAdj, 0]);
237// console.log("innerBounds");
238// console.dir(innerBounds);
239
240 var tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt);
241 var x = tmpPt[0],
242 y = tmpPt[1];
243
244 if(x < innerBounds[0][0]) return false;
245 if(x > innerBounds[2][0]) return false;
246 if(y < innerBounds[0][1]) return false;
247 if(y > innerBounds[1][1]) return false;
248 }
249 return true;
250 }
251 },
252
253 _getColorAtPoint: {
254 value: function(elt, event)
255 {
256 if(!this._imageDataCanvas)
257 {
258 this._imageDataCanvas = document.createElement("canvas");
259
260 this._applyElementStyles(elt, this._imageDataCanvas, ["display", "position", "width", "height",
261 "-webkit-transform", "-webkit-transform-style"]);
262
263 var l = this.application.ninja.elementMediator.getProperty(elt, "left", parseInt),
264 t = this.application.ninja.elementMediator.getProperty(elt, "top", parseInt),
265 w = this.application.ninja.elementMediator.getProperty(elt, "width", parseInt),
266 h = this.application.ninja.elementMediator.getProperty(elt, "height", parseInt);
267
268 var eltCoords = this.application.ninja.stage.toViewportCoordinates(l, t);
269 this._imageDataCanvas.style.left = eltCoords[0] + "px";
270 this._imageDataCanvas.style.top = eltCoords[1] + "px";
271 this._imageDataCanvas.width = w;
272 this._imageDataCanvas.height = h;
273
274// this.application.ninja.currentDocument.documentRoot.appendChild(this._imageDataCanvas);
275
276 this._imageDataContext = this._imageDataCanvas.getContext("2d");
277 this._imageDataContext.drawImage(elt, 0, 0);
278 }
279
280 var pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas,
281 new WebKitPoint(event.pageX, event.pageY));
282
283 var tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt);
284
285 return this._getColorFromCanvas(this._imageDataContext, tmpPt);
286 }
287 },
288
289 _getColorFromCanvas: {
290 value: function(ctx, pt)
291 {