aboutsummaryrefslogtreecommitdiff
path: root/js/tools
diff options
context:
space:
mode:
Diffstat (limited to 'js/tools')
-rwxr-xr-xjs/tools/EyedropperTool.js97
1 files changed, 52 insertions, 45 deletions
diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js
index 43286122..d007da39 100755
--- a/js/tools/EyedropperTool.js
+++ b/js/tools/EyedropperTool.js
@@ -51,12 +51,7 @@ exports.EyedropperTool = Montage.create(toolBase, {
51 this._isMouseDown = false; 51 this._isMouseDown = false;
52 this._escape = false; 52 this._escape = false;
53 this._elementUnderMouse = null; 53 this._elementUnderMouse = null;
54 if(this._imageDataCanvas) 54 this._deleteImageDataCanvas();
55 {
56 this.application.ninja.stage.element.removeChild(this._imageDataCanvas);
57 this._imageDataCanvas = null;
58 this._imageDataContext = null;
59 }
60 } 55 }
61 if(this._isMouseDown) 56 if(this._isMouseDown)
62 { 57 {
@@ -80,12 +75,7 @@ exports.EyedropperTool = Montage.create(toolBase, {
80 this._color = null; 75 this._color = null;
81 76
82 this._elementUnderMouse = null; 77 this._elementUnderMouse = null;
83 if(this._imageDataCanvas) 78 this._deleteImageDataCanvas();
84 {
85 this.application.ninja.stage.element.removeChild(this._imageDataCanvas);
86 this._imageDataCanvas = null;
87 this._imageDataContext = null;
88 }
89 } 79 }
90 } 80 }
91 }, 81 },
@@ -119,9 +109,15 @@ exports.EyedropperTool = Montage.create(toolBase, {
119 obj = this.application.ninja.stage.GetElement(event); 109 obj = this.application.ninja.stage.GetElement(event);
120 if (obj) 110 if (obj)
121 { 111 {
112 if(this.application.ninja.currentDocument.inExclusion(obj) !== -1)
113 {
114 this._elementUnderMouse = null;
115 this._deleteImageDataCanvas();
116 return;
117 }
122 this._elementUnderMouse = obj; 118 this._elementUnderMouse = obj;
123 // Depending on the object type, we need to get different colors 119 // Depending on the object type, we need to get different colors
124 if(obj.elementModel.type === "IMG") 120 if(obj.elementModel.selection === "image")
125 { 121 {
126 c = this._getColorAtPoint(obj, event); 122 c = this._getColorAtPoint(obj, event);
127 if(c) 123 if(c)
@@ -129,14 +125,9 @@ exports.EyedropperTool = Montage.create(toolBase, {
129 color = this.application.ninja.colorController.getColorObjFromCss(c); 125 color = this.application.ninja.colorController.getColorObjFromCss(c);
130 } 126 }
131 } 127 }
132 else if (obj.elementModel.type === "CANVAS") 128 else if (obj.elementModel.selection === "canvas")
133 { 129 {
134 if(this._imageDataCanvas) 130 this._deleteImageDataCanvas();
135 {
136 this.application.ninja.stage.element.removeChild(this._imageDataCanvas);
137 this._imageDataCanvas = null;
138 this._imageDataContext = null;
139 }
140 131
141 var pt = webkitConvertPointFromPageToNode(obj, 132 var pt = webkitConvertPointFromPageToNode(obj,
142 new WebKitPoint(event.pageX, event.pageY)), 133 new WebKitPoint(event.pageX, event.pageY)),
@@ -150,14 +141,8 @@ exports.EyedropperTool = Montage.create(toolBase, {
150 } 141 }
151 else 142 else
152 { 143 {
153 if(this._imageDataCanvas) 144 this._deleteImageDataCanvas();
154 {
155 this.application.ninja.stage.element.removeChild(this._imageDataCanvas);
156 this._imageDataCanvas = null;
157 this._imageDataContext = null;
158 }
159 145
160 // TODO - figure out if user clicked on a border - for now, just get fill
161 c = ElementsMediator.getColor(obj, this._isOverBackground(obj, event)); 146 c = ElementsMediator.getColor(obj, this._isOverBackground(obj, event));
162 if(c) 147 if(c)
163 { 148 {
@@ -180,12 +165,7 @@ exports.EyedropperTool = Montage.create(toolBase, {
180 else 165 else
181 { 166 {
182 this._elementUnderMouse = null; 167 this._elementUnderMouse = null;
183 if(this._imageDataCanvas) 168 this._deleteImageDataCanvas();
184 {
185 this.application.ninja.stage.element.removeChild(this._imageDataCanvas);
186 this._imageDataCanvas = null;
187 this._imageDataContext = null;
188 }
189 } 169 }
190 170
191 } 171 }
@@ -273,38 +253,44 @@ exports.EyedropperTool = Montage.create(toolBase, {
273 _getColorAtPoint: { 253 _getColorAtPoint: {
274 value: function(elt, event) 254 value: function(elt, event)
275 { 255 {
276 var imageData;
277 if(!this._imageDataCanvas) 256 if(!this._imageDataCanvas)
278 { 257 {
279 this._imageDataCanvas = document.createElement("canvas"); 258 this._imageDataCanvas = document.createElement("canvas");
280 this._imageDataCanvas.style.display = "block";
281 this._imageDataCanvas.style.position = "absolute";
282 259
283 var eltCoords = this.application.ninja.stage.toViewportCoordinates(elt.offsetLeft, elt.offsetTop); 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);
284 this._imageDataCanvas.style.left = eltCoords[0] + "px"; 269 this._imageDataCanvas.style.left = eltCoords[0] + "px";
285 this._imageDataCanvas.style.top = eltCoords[1] + "px"; 270 this._imageDataCanvas.style.top = eltCoords[1] + "px";
286 this._imageDataCanvas.style.width = elt.offsetWidth + "px"; 271 this._imageDataCanvas.width = w;
287 this._imageDataCanvas.style.height = elt.offsetHeight + "px"; 272 this._imageDataCanvas.height = h;
288 this._imageDataCanvas.width = elt.offsetWidth;
289 this._imageDataCanvas.height = elt.offsetHeight;
290 273
291 this.application.ninja.stage.element.appendChild(this._imageDataCanvas); 274// this.application.ninja.currentDocument.documentRoot.appendChild(this._imageDataCanvas);
292 275
293 this._imageDataContext = this._imageDataCanvas.getContext("2d"); 276 this._imageDataContext = this._imageDataCanvas.getContext("2d");
294 this._imageDataContext.drawImage(elt, 0, 0); 277 this._imageDataContext.drawImage(elt, 0, 0);
295 } 278 }
296 279
297 var pt = webkitConvertPointFromPageToNode(this._imageDataCanvas, 280 var pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas,
298 new WebKitPoint(event.pageX, event.pageY)); 281 new WebKitPoint(event.pageX, event.pageY));
299 282
300 return this._getColorFromCanvas(this._imageDataContext, pt); 283 var tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt);
284
285 return this._getColorFromCanvas(this._imageDataContext, tmpPt);
301 } 286 }
302 }, 287 },
303 288
304 _getColorFromCanvas: { 289 _getColorFromCanvas: {
305 value: function(ctx, pt) 290 value: function(ctx, pt)
306 { 291 {
307 var imageData = ctx.getImageData(pt.x, pt.y, 1, 1).data; 292// var imageData = ctx.getImageData(pt.x, pt.y, 1, 1).data;
293 var imageData = ctx.getImageData(pt[0], pt[1], 1, 1).data;
308 if(imageData) 294 if(imageData)
309 { 295 {
310 return ("rgba(" + imageData[0] + "," + imageData[1] + "," + imageData[2] + "," + imageData[3] + ")"); 296 return ("rgba(" + imageData[0] + "," + imageData[1] + "," + imageData[2] + "," + imageData[3] + ")");
@@ -314,6 +300,27 @@ exports.EyedropperTool = Montage.create(toolBase, {
314 return null; 300 return null;
315 } 301 }
316 } 302 }
303 },
304
305 _deleteImageDataCanvas : {
306 value: function()
307 {
308 if(this._imageDataCanvas)
309 {
310// this.application.ninja.currentDocument.documentRoot.removeChild(this._imageDataCanvas);
311 this._imageDataCanvas = null;
312 this._imageDataContext = null;
313 }
314 }
315 },
316
317 _applyElementStyles : {
318 value: function(fromElement, toElement, styles) {
319 styles.forEach(function(style) {
320 var styleCamelCase = style.replace(/(\-[a-z])/g, function($1){return $1.toUpperCase().replace('-','');});
321 toElement.style[styleCamelCase] = window.getComputedStyle(fromElement)[style];
322 }, this);
323 }
317 } 324 }
318 325
319}); \ No newline at end of file 326}); \ No newline at end of file