diff options
author | John Mayhew | 2012-04-02 16:28:39 -0700 |
---|---|---|
committer | John Mayhew | 2012-04-02 16:28:39 -0700 |
commit | b4155fb4c33675a8a7cd37473513718043fdf0ba (patch) | |
tree | 3d8c802473f2395d53d599ec9d8b70b60a4db50c /js/tools/EyedropperTool.js | |
parent | 5ba9aeac94c86049423fd5d4b37b277263939c13 (diff) | |
parent | c6de22bf42be90b403491b5f87b1818d9020310c (diff) | |
download | ninja-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-x | js/tools/EyedropperTool.js | 151 |
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 | ||
7 | var Montage = require("montage/core/core").Montage, | 7 | var 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 | ||
13 | exports.EyedropperTool = Montage.create(toolBase, { | 14 | exports.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); | ||