aboutsummaryrefslogtreecommitdiff
path: root/js/tools/EyedropperTool.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/tools/EyedropperTool.js')
-rw-r--r--js/tools/EyedropperTool.js199
1 files changed, 183 insertions, 16 deletions
diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js
index 795753d2..43286122 100644
--- 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,13 @@ 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 if(this._imageDataCanvas)
55 {
56 this.application.ninja.stage.element.removeChild(this._imageDataCanvas);
57 this._imageDataCanvas = null;
58 this._imageDataContext = null;
59 }
49 } 60 }
50 if(this._isMouseDown) 61 if(this._isMouseDown)
51 { 62 {
@@ -67,6 +78,14 @@ exports.EyedropperTool = Montage.create(toolBase, {
67 this._updateColor(this._color); 78 this._updateColor(this._color);
68 79
69 this._color = null; 80 this._color = null;
81
82 this._elementUnderMouse = null;
83 if(this._imageDataCanvas)
84 {
85 this.application.ninja.stage.element.removeChild(this._imageDataCanvas);
86 this._imageDataCanvas = null;
87 this._imageDataContext = null;
88 }
70 } 89 }
71 } 90 }
72 }, 91 },
@@ -95,27 +114,80 @@ exports.EyedropperTool = Montage.create(toolBase, {
95 114
96 _updateColorFromPoint: { 115 _updateColorFromPoint: {
97 value : function (event) { 116 value : function (event) {
98 var obj = this.application.ninja.stage.GetElement(event); 117 var c,
118 color,
119 obj = this.application.ninja.stage.GetElement(event);
99 if (obj) 120 if (obj)
100 { 121 {
101 // TODO - figure out if user clicked on a border - for now, just get fill 122 this._elementUnderMouse = obj;
102 var c = ElementsMediator.getColor(obj, true); 123 // Depending on the object type, we need to get different colors
103 if(c) 124 if(obj.elementModel.type === "IMG")
125 {
126 c = this._getColorAtPoint(obj, event);
127 if(c)
128 {
129 color = this.application.ninja.colorController.getColorObjFromCss(c);
130 }
131 }
132 else if (obj.elementModel.type === "CANVAS")
133 {
134 if(this._imageDataCanvas)
135 {
136 this.application.ninja.stage.element.removeChild(this._imageDataCanvas);
137 this._imageDataCanvas = null;
138 this._imageDataContext = null;
139 }
140
141 var pt = webkitConvertPointFromPageToNode(obj,
142 new WebKitPoint(event.pageX, event.pageY)),
143 ctx = obj.getContext("2d");
144
145 c = this._getColorFromCanvas(ctx, pt);
146 if(c)
147 {
148 color = this.application.ninja.colorController.getColorObjFromCss(c);
149 }
150 }
151 else
104 { 152 {
105 var color = this.application.ninja.colorController.getColorObjFromCss(c); 153 if(this._imageDataCanvas)
106 if (color && color.value) { 154 {
107 color.value.wasSetByCode = true; 155 this.application.ninja.stage.element.removeChild(this._imageDataCanvas);
108 color.value.type = 'changing'; 156 this._imageDataCanvas = null;
109 if (color.value.a) { 157 this._imageDataContext = null;
110 this.application.ninja.colorController.colorModel.alpha = {value: color.value.a,
111 wasSetByCode: true,
112 type: 'changing'};
113 }
114 this.application.ninja.colorController.colorModel[color.mode] = color.value;
115 this._color = color;
116 } 158 }
159
160 // TODO - figure out if user clicked on a border - for now, just get fill
161 c = ElementsMediator.getColor(obj, this._isOverBackground(obj, event));
162 if(c)
163 {
164 color = this.application.ninja.colorController.getColorObjFromCss(c.color.css);
165 }
166 }
167
168 if (color && color.value) {
169 color.value.wasSetByCode = true;
170 color.value.type = 'changing';
171 if (color.value.a) {
172 this.application.ninja.colorController.colorModel.alpha = {value: color.value.a,
173 wasSetByCode: true,
174 type: 'changing'};
175 }
176 this.application.ninja.colorController.colorModel[color.mode] = color.value;
177 this._color = color;
178 }
179 }
180 else
181 {
182 this._elementUnderMouse = null;
183 if(this._imageDataCanvas)
184 {
185 this.application.ninja.stage.element.removeChild(this._imageDataCanvas);
186 this._imageDataCanvas = null;
187 this._imageDataContext = null;
117 } 188 }
118 } 189 }
190
119 } 191 }
120 }, 192 },
121 193
@@ -147,6 +219,101 @@ exports.EyedropperTool = Montage.create(toolBase, {
147 this._previousColor = color.value.css; 219 this._previousColor = color.value.css;
148 } 220 }
149 } 221 }
222 },
223
224 // TODO - We don't want to calculate this repeatedly
225 _isOverBackground: {
226 value: function(elt, event)
227 {
228 var border = ElementsMediator.getProperty(elt, "border", parseFloat);
229
230 if(border)
231 {
232 var bounds3D,
233 innerBounds = [],
234 pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)),
235 bt = ElementsMediator.getProperty(elt, "border-top", parseFloat),
236 br = ElementsMediator.getProperty(elt, "border-right", parseFloat),
237 bb = ElementsMediator.getProperty(elt, "border-bottom", parseFloat),
238 bl = ElementsMediator.getProperty(elt, "border-left", parseFloat);
239
240// this.application.ninja.stage.viewUtils.setViewportObj( elt );
241 bounds3D = this.application.ninja.stage.viewUtils.getElementViewBounds3D( elt );
242// console.log("bounds");
243// console.dir(bounds3D);
244
245 var xAdj = bl || border,
246 yAdj = bt || border;
247 innerBounds.push([bounds3D[0][0] + xAdj, bounds3D[0][1] + yAdj, 0]);
248
249 yAdj += bb || border;
250 innerBounds.push([bounds3D[1][0] + xAdj, bounds3D[1][1] - yAdj, 0]);
251
252 xAdj += br || border;
253 innerBounds.push([bounds3D[2][0] - xAdj, bounds3D[2][1] - yAdj, 0]);
254
255 yAdj = bt || border;
256 innerBounds.push([bounds3D[3][0] - xAdj, bounds3D[3][1] + yAdj, 0]);
257// console.log("innerBounds");
258// console.dir(innerBounds);
259
260 var tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt);
261 var x = tmpPt[0],
262 y = tmpPt[1];
263
264 if(x < innerBounds[0][0]) return false;
265 if(x > innerBounds[2][0]) return false;
266 if(y < innerBounds[0][1]) return false;
267 if(y > innerBounds[1][1]) return false;
268 }
269 return true;
270 }
271 },
272
273 _getColorAtPoint: {
274 value: function(elt, event)
275 {
276 var imageData;
277 if(!this._imageDataCanvas)
278 {
279 this._imageDataCanvas = document.createElement("canvas");
280 this._imageDataCanvas.style.display = "block";
281 this._imageDataCanvas.style.position = "absolute";
282
283 var eltCoords = this.application.ninja.stage.toViewportCoordinates(elt.offsetLeft, elt.offsetTop);
284 this._imageDataCanvas.style.left = eltCoords[0] + "px";
285 this._imageDataCanvas.style.top = eltCoords[1] + "px";
286 this._imageDataCanvas.style.width = elt.offsetWidth + "px";
287 this._imageDataCanvas.style.height = elt.offsetHeight + "px";
288 this._imageDataCanvas.width = elt.offsetWidth;
289 this._imageDataCanvas.height = elt.offsetHeight;
290
291 this.application.ninja.stage.element.appendChild(this._imageDataCanvas);
292
293 this._imageDataContext = this._imageDataCanvas.getContext("2d");
294