aboutsummaryrefslogtreecommitdiff
path: root/js/tools/EyedropperTool.js
diff options
context:
space:
mode:
authorJohn Mayhew2012-04-02 16:28:39 -0700
committerJohn Mayhew2012-04-02 16:28:39 -0700
commitb4155fb4c33675a8a7cd37473513718043fdf0ba (patch)
tree3d8c802473f2395d53d599ec9d8b70b60a4db50c /js/tools/EyedropperTool.js
parent5ba9aeac94c86049423fd5d4b37b277263939c13 (diff)
parentc6de22bf42be90b403491b5f87b1818d9020310c (diff)
downloadninja-b4155fb4c33675a8a7cd37473513718043fdf0ba.tar.gz
Merge branch 'master' of github.com:Motorola-Mobility/ninja-internal into WorkingBranch
Conflicts: js/helper-classes/RDGE/rdge-compiled.js js/helper-classes/RDGE/runtime/GLRuntime.js js/helper-classes/RDGE/src/core/script/MeshManager.js js/helper-classes/RDGE/src/core/script/engine.js js/helper-classes/RDGE/src/core/script/fx/ssao.js js/helper-classes/RDGE/src/core/script/init_state.js js/helper-classes/RDGE/src/core/script/run_state.js js/helper-classes/RDGE/src/core/script/scenegraphNodes.js js/helper-classes/RDGE/src/core/script/utilities.js js/helper-classes/RDGE/src/tools/compile-rdge-core.bat js/helper-classes/RDGE/src/tools/compile-rdge-core.sh js/helper-classes/RDGE/src/tools/rdge-compiled.js js/lib/drawing/world.js js/lib/rdge/materials/bump-metal-material.js js/lib/rdge/materials/deform-material.js js/lib/rdge/materials/flat-material.js js/lib/rdge/materials/fly-material.js js/lib/rdge/materials/julia-material.js js/lib/rdge/materials/keleidoscope-material.js js/lib/rdge/materials/linear-gradient-material.js js/lib/rdge/materials/mandel-material.js js/lib/rdge/materials/plasma-material.js js/lib/rdge/materials/pulse-material.js js/lib/rdge/materials/radial-blur-material.js js/lib/rdge/materials/radial-gradient-material.js js/lib/rdge/materials/relief-tunnel-material.js js/lib/rdge/materials/square-tunnel-material.js js/lib/rdge/materials/star-material.js js/lib/rdge/materials/taper-material.js js/lib/rdge/materials/tunnel-material.js js/lib/rdge/materials/twist-material.js js/lib/rdge/materials/twist-vert-material.js js/lib/rdge/materials/uber-material.js js/lib/rdge/materials/water-material.js js/lib/rdge/materials/z-invert-material.js js/preloader/Preloader.js
Diffstat (limited to 'js/tools/EyedropperTool.js')
-rwxr-xr-xjs/tools/EyedropperTool.js151
1 files changed, 127 insertions, 24 deletions
diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js
index 11c15158..d627f03b 100755
--- a/js/tools/EyedropperTool.js
+++ b/js/tools/EyedropperTool.js
@@ -6,9 +6,10 @@ 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 drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils, 9 toolBase = require("js/tools/ToolBase").toolBase,
10 vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils, 10 ShapesController = require("js/controllers/elements/shapes-controller").ShapesController,
11 toolBase = require("js/tools/ToolBase").toolBase; 11 World = require("js/lib/drawing/world").World,
12 njModule = require("js/lib/NJUtils");
12 13
13exports.EyedropperTool = Montage.create(toolBase, { 14exports.EyedropperTool = Montage.create(toolBase, {
14 15
@@ -17,6 +18,8 @@ exports.EyedropperTool = Montage.create(toolBase, {
17 _color: { value: null}, 18 _color: { value: null},
18 _elementUnderMouse: { value: null }, 19 _elementUnderMouse: { value: null },
19 _imageDataCanvas: { value: null }, 20 _imageDataCanvas: { value: null },
21 _webGlDataCanvas: { value: null },
22 _webGlWorld: { value: null },
20 _imageDataContext: { value: null }, 23 _imageDataContext: { value: null },
21 _canSnap: { value: false }, 24 _canSnap: { value: false },
22 25
@@ -30,6 +33,11 @@ exports.EyedropperTool = Montage.create(toolBase, {
30 else 33 else
31 { 34 {
32 NJevent("disableStageMove"); 35 NJevent("disableStageMove");
36 this._deleteImageDataCanvas();
37 this._isMouseDown = false;
38 this._elementUnderMouse = null;
39 this._previousColor = null;
40 this._color = null;
33 } 41 }
34 } 42 }
35 }, 43 },
@@ -123,7 +131,7 @@ exports.EyedropperTool = Montage.create(toolBase, {
123 new WebKitPoint(event.pageX, event.pageY)), 131 new WebKitPoint(event.pageX, event.pageY)),
124 ctx = obj.getContext("2d"); 132 ctx = obj.getContext("2d");
125 133
126 c = this._getColorFromCanvas(ctx, pt); 134 c = this._getColorFromCanvas(ctx, [pt.x, pt.y]);
127 if(c) 135 if(c)
128 { 136 {
129 color = this.application.ninja.colorController.getColorObjFromCss(c); 137 color = this.application.ninja.colorController.getColorObjFromCss(c);
@@ -131,17 +139,31 @@ exports.EyedropperTool = Montage.create(toolBase, {
131 } 139 }
132 else 140 else
133 { 141 {
134 this._deleteImageDataCanvas(); 142 if(ShapesController.isElementAShape(obj))
143 {
144 c = this._getColorFromShape(obj, event);
145 }
146 else
147 {
148 c = this._getColorFromElement(obj, event);
149 }
135 150
136 c = this._getColorFromElement(obj, event); 151 if(!c)
137 if(typeof(c) === "string") 152 {
153 color = null;
154 }
155 else if(typeof(c) === "string")
138 { 156 {
139 color = this.application.ninja.colorController.getColorObjFromCss(c); 157 color = this.application.ninja.colorController.getColorObjFromCss(c);
140 } 158 }
141 else 159 else if(c.mode !== "gradient")
142 { 160 {
143 color = this.application.ninja.colorController.getColorObjFromCss(c.color.css); 161 color = this.application.ninja.colorController.getColorObjFromCss(c.color.css);
144 } 162 }
163 else
164 {
165 color = c;
166 }
145 } 167 }
146 168
147 this._updateColor(color, false); 169 this._updateColor(color, false);
@@ -161,7 +183,8 @@ exports.EyedropperTool = Montage.create(toolBase, {
161 if(updateColorToolBar) 183 if(updateColorToolBar)
162 { 184 {
163 eventType = "change"; 185 eventType = "change";
164 if (color && color.value) 186 // TODO - Color chips in toolbar doesn't support gradients yet
187 if (color && color.value && (color.mode !== "gradient"))
165 { 188 {
166 var input = this.application.ninja.colorController.colorModel.input; 189 var input = this.application.ninja.colorController.colorModel.input;
167 190
@@ -232,6 +255,8 @@ exports.EyedropperTool = Montage.create(toolBase, {
232 _getColorFromElement: { 255 _getColorFromElement: {
233 value: function(elt, event) 256 value: function(elt, event)
234 { 257 {
258 this._deleteImageDataCanvas();
259
235 var border = ElementsMediator.getProperty(elt, "border"), 260 var border = ElementsMediator.getProperty(elt, "border"),
236 borderWidth, 261 borderWidth,
237 bounds3D, 262 bounds3D,
@@ -279,19 +304,53 @@ exports.EyedropperTool = Montage.create(toolBase, {
279 x = tmpPt[0]; 304 x = tmpPt[0];
280 y = tmpPt[1]; 305 y = tmpPt[1];
281 306
282 if(x < innerBounds[0][0]) return ElementsMediator.getProperty(elt, "border-left-color"); 307 if(x < innerBounds[0][0]) return ElementsMediator.getColor(elt, false, "left");
283 if(x > innerBounds[2][0]) return ElementsMediator.getProperty(elt, "border-right-color"); 308 if(x > innerBounds[2][0]) return ElementsMediator.getColor(elt, false, "right");
284 if(y < innerBounds[0][1]) return ElementsMediator.getProperty(elt, "border-top-color"); 309 if(y < innerBounds[0][1]) return ElementsMediator.getColor(elt, false, "top");
285 if(y > innerBounds[1][1]) return ElementsMediator.getProperty(elt, "border-bottom-color"); 310 if(y > innerBounds[1][1]) return ElementsMediator.getColor(elt, false, "bottom");
286 } 311 }
287 312
288 return ElementsMediator.getColor(elt, true); 313 return ElementsMediator.getColor(elt, true);
289 } 314 }
290 }, 315 },
291 316
292 _getColorAtPoint: { 317 // TODO - We don't want to calculate this repeatedly
318 _getColorFromShape: {
293 value: function(elt, event) 319 value: function(elt, event)
294 { 320 {
321 var c,
322 ctx,
323 tmpPt,
324 pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas,
325 new WebKitPoint(event.pageX, event.pageY));
326
327 tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt);
328
329 if(elt.elementModel.shapeModel.useWebGl)
330 {
331 c = this._getColorAtPoint(elt, event, true);
332 }
333 else
334 {
335 this._deleteImageDataCanvas();
336 ctx = elt.getContext("2d");
337 if(ctx)
338 {
339 c = this._getColorFromCanvas(ctx, tmpPt);
340 }
341 }
342 return c;
343 }
344 },
345
346 _getColorAtPoint: {
347 value: function(elt, event, isWebGl)
348 {
349 var pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas,
350 new WebKitPoint(event.pageX, event.pageY));
351
352 var tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt);
353
295 if(!this._imageDataCanvas) 354 if(!this._imageDataCanvas)
296 { 355 {
297 this._imageDataCanvas = document.createElement("canvas"); 356 this._imageDataCanvas = document.createElement("canvas");
@@ -311,25 +370,64 @@ exports.EyedropperTool = Montage.create(toolBase, {
311 this._imageDataCanvas.height = h; 370 this._imageDataCanvas.height = h;
312 371
313 this._imageDataContext = this._imageDataCanvas.getContext("2d"); 372 this._imageDataContext = this._imageDataCanvas.getContext("2d");
314 this._imageDataContext.drawImage(elt, 0, 0); 373 if(isWebGl)
374 {
375 var worldData = elt.elementModel.shapeModel.GLWorld.exportJSON();
376 if(worldData)
377 {
378 this._webGlDataCanvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", {"data-RDGE-id": njModule.NJUtils.generateRandom()}, true);
379 this._applyElementStyles(elt, this._webGlDataCanvas, ["display", "position", "width", "height",
380 "-webkit-transform", "-webkit-transform-style"]);
381 this._webGlDataCanvas.style.left = eltCoords[0] + "px";
382 this._webGlDataCanvas.style.top = eltCoords[1] + "px";
383 this._webGlDataCanvas.width = w;
384 this._webGlDataCanvas.height = h;
385 this._webGlWorld = new World(this._webGlDataCanvas, true, true);
386
387 var index = worldData.indexOf( ';' );
388 if ((worldData[0] === 'v') && (index < 24))
389 {
390 // JSON format. separate the version info from the JSON info
391 var jStr = worldData.substr( index+1 );
392 worldData = JSON.parse( jStr );
393 }
394
395 this._webGlWorld.importJSON(worldData);
396 this._webGlWorld.render();
397 setTimeout(function() {
398 if(this._webGlWorld)
399 {
400 this._webGlWorld.draw();
401 this._imageDataContext.drawImage(this._webGlDataCanvas, 0, 0);
402 return this._getColorFromCanvas(this._imageDataContext, tmpPt, true);