aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--js/tools/EyedropperTool.js233
1 files changed, 108 insertions, 125 deletions
diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js
index 62a3eadd..8301480d 100644
--- a/js/tools/EyedropperTool.js
+++ b/js/tools/EyedropperTool.js
@@ -15,6 +15,9 @@ exports.EyedropperTool = Montage.create(toolBase, {
15 _isMouseDown: { value: false }, 15 _isMouseDown: { value: false },
16 _previousColor: { value: null}, 16 _previousColor: { value: null},
17 _color: { value: null}, 17 _color: { value: null},
18 _elementUnderMouse: { value: null },
19 _imageDataCanvas: { value: null },
20 _imageDataContext: { value: null },
18 21
19 Configure: { 22 Configure: {
20 value: function ( doActivate ) 23 value: function ( doActivate )
@@ -96,27 +99,68 @@ exports.EyedropperTool = Montage.create(toolBase, {
96 99
97 _updateColorFromPoint: { 100 _updateColorFromPoint: {
98 value : function (event) { 101 value : function (event) {
99 var obj = this.application.ninja.stage.GetElement(event); 102 var c,
103 color,
104 obj = this.application.ninja.stage.GetElement(event);
100 if (obj) 105 if (obj)
101 { 106 {
102 // TODO - figure out if user clicked on a border - for now, just get fill 107 this._elementUnderMouse = obj;
103 var c = ElementsMediator.getColor(obj, this._isOverBorder(obj, event)); 108 // Depending on the object type, we need to get different colors
104 if(c) 109 if(obj.elementModel.type === "IMG")
105 { 110 {
106 var color = this.application.ninja.colorController.getColorObjFromCss(c.color.css); 111 c = this._getColorAtPoint(obj, event);
107 if (color && color.value) { 112 if(c)
108 color.value.wasSetByCode = true; 113 {
109 color.value.type = 'changing'; 114 color = this.application.ninja.colorController.getColorObjFromCss(c);
110 if (color.value.a) {
111 this.application.ninja.colorController.colorModel.alpha = {value: color.value.a,
112 wasSetByCode: true,
113 type: 'changing'};
114 }
115 this.application.ninja.colorController.colorModel[color.mode] = color.value;
116 this._color = color;
117 } 115 }
118 } 116 }
117 else if (obj.elementModel.type === "CANVAS")
118 {
119 this._imageDataCanvas = null;
120 this._imageDataContext = null;
121
122 var pt = webkitConvertPointFromPageToNode(obj,
123 new WebKitPoint(event.pageX, event.pageY)),
124 ctx = obj.getContext("2d");
125
126 c = this._getColorFromCanvas(ctx, pt);
127 if(c)
128 {
129 color = this.application.ninja.colorController.getColorObjFromCss(c);
130 }
131 }
132 else
133 {
134 this._imageDataCanvas = null;
135 this._imageDataContext = null;
136
137 // TODO - figure out if user clicked on a border - for now, just get fill
138 c = ElementsMediator.getColor(obj, this._isOverBackground(obj, event));
139 if(c)
140 {
141 color = this.application.ninja.colorController.getColorObjFromCss(c.color.css);
142 }
143 }
144
145 if (color && color.value) {
146 color.value.wasSetByCode = true;
147 color.value.type = 'changing';
148 if (color.value.a) {
149 this.application.ninja.colorController.colorModel.alpha = {value: color.value.a,
150 wasSetByCode: true,
151 type: 'changing'};
152 }
153 this.application.ninja.colorController.colorModel[color.mode] = color.value;
154 this._color = color;
155 }
119 } 156 }
157 else
158 {
159 this._elementUnderMouse = null;
160 this._imageDataCanvas = null;
161 this._imageDataContext = null;
162 }
163
120 } 164 }
121 }, 165 },
122 166
@@ -151,7 +195,7 @@ exports.EyedropperTool = Montage.create(toolBase, {
151 }, 195 },
152 196
153 // TODO - We don't want to calculate this repeatedly 197 // TODO - We don't want to calculate this repeatedly
154 _isOverBorder: { 198 _isOverBackground: {
155 value: function(elt, event) 199 value: function(elt, event)
156 { 200 {
157 var border = ElementsMediator.getProperty(elt, "border", parseFloat); 201 var border = ElementsMediator.getProperty(elt, "border", parseFloat);
@@ -168,8 +212,8 @@ exports.EyedropperTool = Montage.create(toolBase, {
168 212
169// this.application.ninja.stage.viewUtils.setViewportObj( elt ); 213// this.application.ninja.stage.viewUtils.setViewportObj( elt );
170 bounds3D = this.application.ninja.stage.viewUtils.getElementViewBounds3D( elt ); 214 bounds3D = this.application.ninja.stage.viewUtils.getElementViewBounds3D( elt );
171 console.log("bounds"); 215// console.log("bounds");
172 console.dir(bounds3D); 216// console.dir(bounds3D);
173 217
174 var xAdj = bl || border, 218 var xAdj = bl || border,
175 yAdj = bt || border; 219 yAdj = bt || border;
@@ -183,8 +227,8 @@ exports.EyedropperTool = Montage.create(toolBase, {
183 227
184 yAdj = bt || border; 228 yAdj = bt || border;
185 innerBounds.push([bounds3D[3][0] - xAdj, bounds3D[3][1] + yAdj, 0]); 229 innerBounds.push([bounds3D[3][0] - xAdj, bounds3D[3][1] + yAdj, 0]);
186 console.log("innerBounds"); 230// console.log("innerBounds");
187 console.dir(innerBounds); 231// console.dir(innerBounds);
188 232
189 var tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); 233 var tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt);
190 var x = tmpPt[0], 234 var x = tmpPt[0],
@@ -194,117 +238,56 @@ exports.EyedropperTool = Montage.create(toolBase, {
194 if(x > innerBounds[2][0]) return false; 238 if(x > innerBounds[2][0]) return false;
195 if(y < innerBounds[0][1]) return false; 239 if(y < innerBounds[0][1]) return false;
196 if(y > innerBounds[1][1]) return false; 240 if(y > innerBounds[1][1]) return false;
241 }
242 return true;
243 }
244 },
197 245
198 return true; 246 _getColorAtPoint: {
199 247 value: function(elt, event)
200 248 {
201// var contain = MathUtils.boundaryContainsPoint(innerBounds, tmpPt, false); 249 var imageData;
202// console.log("contain is " + contain); 250 if(!this._imageDataCanvas)
203// var tmpMat = this.application.ninja.stage.viewUtils.getLocalToGlobalMatrix( elt ); 251 {
204//// var zoomFactor = 1; 252 this._imageDataCanvas = document.createElement("canvas");
205//// if (this.application.ninja.stage.viewport.style && this.application.ninja.stage.viewport.style.zoom) 253 this._imageDataCanvas.style.display = "block";
206//// { 254 this._imageDataCanvas.style.position = "absolute";
207//// zoomFactor = Number(this.application.ninja.stage.viewport.style.zoom); 255
208//// } 256 var eltCoords = this.application.ninja.stage.toViewportCoordinates(elt.offsetLeft, elt.offsetTop);
209// 257 this._imageDataCanvas.style.left = eltCoords[0] + "px";
210// for (var j=0; j<4; j++) 258 this._imageDataCanvas.style.top = eltCoords[1] + "px";
211// { 259 this._imageDataCanvas.style.width = elt.offsetWidth + "px";
212// var localPt = innerBounds[j]; 260 this._imageDataCanvas.style.height = elt.offsetHeight + "px";
213// var tmpPt = this.application.ninja.stage.viewUtils.localToGlobal2(localPt, tmpMat); 261 this._imageDataCanvas.width = elt.offsetWidth;
214// 262 this._imageDataCanvas.height = elt.offsetHeight;
215//// if(zoomFactor !== 1) 263
216//// { 264 this.application.ninja.stage.element.appendChild(this._imageDataCanvas);
217//// tmpPt = vecUtils.vecScale(3, tmpPt, zoomFactor); 265
218//// tmpPt[0] += this.application.ninja.stage.scrollLeft*(zoomFactor - 1); 266 this._imageDataContext = this._imageDataCanvas.getContext("2d");
219//// tmpPt[1] += this.application.ninja.stage.scrollTop*(zoomFactor - 1); 267// this._imageDataContext.drawImage(elt, eltCoords[0], eltCoords[1]);
220//// } 268 this._imageDataContext.drawImage(elt, 0, 0);
221// innerBounds[j] = tmpPt;
222// }
223//
224// var contain = MathUtils.boundaryContainsPoint(innerBounds, [pt.x, pt.y], false);
225// console.log("contain is " + contain);
226
227
228
229// var bounds,
230// innerBounds = [],
231// plane = ElementsMediator.get3DProperty(elt, "elementPlane"),
232// pt = webkitConvertPointFromPageToNode(drawUtils.getDrawingSurfaceElement(), new WebKitPoint(event.pageX, event.pageY)),
233// bt = ElementsMediator.getProperty(elt, "border-top", parseFloat),
234// br = ElementsMediator.getProperty(elt, "border-right", parseFloat),
235// bb = ElementsMediator.getProperty(elt, "border-bottom", parseFloat),
236// bl = ElementsMediator.getProperty(elt, "border-left", parseFloat);
237//
238// if(plane)
239// {
240// bounds = plane.getBoundaryPoints().slice(0);
241// var b = bl || border;
242// var dirV = vecUtils.vecSubtract(2, bounds[3], bounds[0]);
243// dirV = vecUtils.vecNormalize(2, dirV, b);
244// innerBounds.push(vecUtils.vecAdd(2, bounds[0], dirV));
245//
246// b = bb || border;
247// dirV = vecUtils.vecSubtract(2, bounds[1], bounds[0]);
248// dirV = vecUtils.vecNormalize(2, dirV, b);
249// innerBounds.push(vecUtils.vecAdd(2, bounds[0], dirV));
250//
251// b = br || border;
252// dirV = vecUtils.vecSubtract(2, bounds[2], bounds[1]);
253// dirV = vecUtils.vecNormalize(2, dirV, b);
254// innerBounds.push(vecUtils.vecAdd(2, bounds[1], dirV));
255//
256// b = bt || border;
257// dirV = vecUtils.vecSubtract(2, bounds[2], bounds[3]);
258// dirV = vecUtils.vecNormalize(2, dirV, b);
259// innerBounds.push(vecUtils.vecAdd(2, bounds[3], dirV));
260//
261// console.log("outerBounds");
262// console.dir(bounds);
263//
264// console.log("innerBounds");
265// console.dir(innerBounds);