diff options
author | Valerio Virgillito | 2012-03-13 11:16:47 -0700 |
---|---|---|
committer | Valerio Virgillito | 2012-03-13 11:16:47 -0700 |
commit | 9f3307810541ca6f95d7ca6d1febe8afdcd2c101 (patch) | |
tree | dac91cf9c9f65b33886160db3aae364873a4352b /js/tools/EyedropperTool.js | |
parent | 91335d6572a611ecde7a71dbbfdb82bdb40f7e2b (diff) | |
parent | 2ac9a855724cc4ccf147ce4130a733a84cc647c3 (diff) | |
download | ninja-9f3307810541ca6f95d7ca6d1febe8afdcd2c101.tar.gz |
Merge pull request #110 from mqg734/WebGLFixes
Gradient Support for Shapes and Eyedropper support for gradients. Also fixed 3d bug when moving multiple selections in 3d using the Selection Tool
Diffstat (limited to 'js/tools/EyedropperTool.js')
-rwxr-xr-x | js/tools/EyedropperTool.js | 133 |
1 files changed, 110 insertions, 23 deletions
diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js index 11c15158..927b86cf 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,27 @@ 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); | ||
137 | if(typeof(c) === "string") | 151 | if(typeof(c) === "string") |
138 | { | 152 | { |
139 | color = this.application.ninja.colorController.getColorObjFromCss(c); | 153 | color = this.application.ninja.colorController.getColorObjFromCss(c); |
140 | } | 154 | } |
141 | else | 155 | else if(c.mode !== "gradient") |
142 | { | 156 | { |
143 | color = this.application.ninja.colorController.getColorObjFromCss(c.color.css); | 157 | color = this.application.ninja.colorController.getColorObjFromCss(c.color.css); |
144 | } | 158 | } |
159 | else | ||
160 | { | ||
161 | color = c; | ||
162 | } | ||
145 | } | 163 | } |
146 | 164 | ||
147 | this._updateColor(color, false); | 165 | this._updateColor(color, false); |
@@ -161,7 +179,8 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
161 | if(updateColorToolBar) | 179 | if(updateColorToolBar) |
162 | { | 180 | { |
163 | eventType = "change"; | 181 | eventType = "change"; |
164 | if (color && color.value) | 182 | // TODO - Color chips in toolbar doesn't support gradients yet |
183 | if (color && color.value && (color.mode !== "gradient")) | ||
165 | { | 184 | { |
166 | var input = this.application.ninja.colorController.colorModel.input; | 185 | var input = this.application.ninja.colorController.colorModel.input; |
167 | 186 | ||
@@ -232,6 +251,8 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
232 | _getColorFromElement: { | 251 | _getColorFromElement: { |
233 | value: function(elt, event) | 252 | value: function(elt, event) |
234 | { | 253 | { |
254 | this._deleteImageDataCanvas(); | ||
255 | |||
235 | var border = ElementsMediator.getProperty(elt, "border"), | 256 | var border = ElementsMediator.getProperty(elt, "border"), |
236 | borderWidth, | 257 | borderWidth, |
237 | bounds3D, | 258 | bounds3D, |
@@ -279,19 +300,53 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
279 | x = tmpPt[0]; | 300 | x = tmpPt[0]; |
280 | y = tmpPt[1]; | 301 | y = tmpPt[1]; |
281 | 302 | ||
282 | if(x < innerBounds[0][0]) return ElementsMediator.getProperty(elt, "border-left-color"); | 303 | if(x < innerBounds[0][0]) return ElementsMediator.getColor(elt, false, "left"); |
283 | if(x > innerBounds[2][0]) return ElementsMediator.getProperty(elt, "border-right-color"); | 304 | if(x > innerBounds[2][0]) return ElementsMediator.getColor(elt, false, "right"); |
284 | if(y < innerBounds[0][1]) return ElementsMediator.getProperty(elt, "border-top-color"); | 305 | if(y < innerBounds[0][1]) return ElementsMediator.getColor(elt, false, "top"); |
285 | if(y > innerBounds[1][1]) return ElementsMediator.getProperty(elt, "border-bottom-color"); | 306 | if(y > innerBounds[1][1]) return ElementsMediator.getColor(elt, false, "bottom"); |
286 | } | 307 | } |
287 | 308 | ||
288 | return ElementsMediator.getColor(elt, true); | 309 | return ElementsMediator.getColor(elt, true); |
289 | } | 310 | } |
290 | }, | 311 | }, |
291 | 312 | ||
292 | _getColorAtPoint: { | 313 | // TODO - We don't want to calculate this repeatedly |
314 | _getColorFromShape: { | ||
293 | value: function(elt, event) | 315 | value: function(elt, event) |
294 | { | 316 | { |
317 | var c, | ||
318 | ctx, | ||
319 | tmpPt, | ||
320 | pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, | ||
321 | new WebKitPoint(event.pageX, event.pageY)); | ||
322 | |||
323 | tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); | ||
324 | |||
325 | if(elt.elementModel.shapeModel.useWebGl) | ||
326 | { | ||
327 | c = this._getColorAtPoint(elt, event, true); | ||
328 | } | ||
329 | else | ||
330 | { | ||
331 | this._deleteImageDataCanvas(); | ||
332 | ctx = elt.getContext("2d"); | ||
333 | if(ctx) | ||
334 | { | ||
335 | c = this._getColorFromCanvas(ctx, tmpPt); | ||
336 | } | ||
337 | } | ||
338 | return c; | ||
339 | } | ||
340 | }, | ||
341 | |||
342 | _getColorAtPoint: { | ||
343 | value: function(elt, event, isWebGl) | ||
344 | { | ||
345 | var pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, | ||
346 | new WebKitPoint(event.pageX, event.pageY)); | ||
347 | |||
348 | var tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); | ||
349 | |||
295 | if(!this._imageDataCanvas) | 350 | if(!this._imageDataCanvas) |
296 | { | 351 | { |
297 | this._imageDataCanvas = document.createElement("canvas"); | 352 | this._imageDataCanvas = document.createElement("canvas"); |
@@ -311,25 +366,52 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
311 | this._imageDataCanvas.height = h; | 366 | this._imageDataCanvas.height = h; |
312 | 367 | ||
313 | this._imageDataContext = this._imageDataCanvas.getContext("2d"); | 368 | this._imageDataContext = this._imageDataCanvas.getContext("2d"); |
314 | this._imageDataContext.drawImage(elt, 0, 0); | 369 | if(isWebGl) |
370 | { | ||
371 | var worldData = elt.elementModel.shapeModel.GLWorld.export(); | ||
372 | if(worldData) | ||
373 | { | ||
374 | this._webGlDataCanvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", {"data-RDGE-id": njModule.NJUtils.generateRandom()}, true); | ||
375 | this._applyElementStyles(elt, this._webGlDataCanvas, ["display", "position", "width", "height", | ||
376 | "-webkit-transform", "-webkit-transform-style"]); | ||
377 | this._webGlDataCanvas.style.left = eltCoords[0] + "px"; | ||
378 | this._webGlDataCanvas.style.top = eltCoords[1] + "px"; | ||
379 | this._webGlDataCanvas.width = w; | ||
380 | this._webGlDataCanvas.height = h; | ||
381 | this._webGlWorld = new World(this._webGlDataCanvas, true, true); | ||
382 | this._webGlWorld.import(worldData); | ||
383 | this._webGlWorld.render(); | ||
384 | setTimeout(function() { | ||
385 | this._webGlWorld.draw(); | ||
386 | this._imageDataContext.drawImage(this._webGlDataCanvas, 0, 0); | ||
387 | return this._getColorFromCanvas(this._imageDataContext, tmpPt, true); | ||
388 | }.bind(this), 250); | ||
389 | } | ||
390 | } | ||
391 | else | ||
392 | { | ||
393 | this._imageDataContext.drawImage(elt, 0, 0); | ||
394 | } | ||
315 | } | 395 | } |
316 | 396 | ||
317 | var pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, | 397 | return this._getColorFromCanvas(this._imageDataContext, tmpPt, isWebGl); |
318 | new WebKitPoint(event.pageX, event.pageY)); | ||
319 | |||
320 | var tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); | ||
321 | |||
322 | return this._getColorFromCanvas(this._imageDataContext, tmpPt); | ||
323 | } | 398 | } |
324 | }, | 399 | }, |
325 | 400 | ||
326 | _getColorFromCanvas: { | 401 | _getColorFromCanvas: { |
327 | value: f |