diff options
-rwxr-xr-x | js/lib/drawing/world.js | 10 | ||||
-rwxr-xr-x | js/tools/EyedropperTool.js | 121 |
2 files changed, 83 insertions, 48 deletions
diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js index 3d6c6fc4..04e4d96b 100755 --- a/js/lib/drawing/world.js +++ b/js/lib/drawing/world.js | |||
@@ -26,7 +26,7 @@ var MaterialsModel = require("js/models/materials-model").MaterialsModel; | |||
26 | // Class GLWorld | 26 | // Class GLWorld |
27 | // Manages display in a canvas | 27 | // Manages display in a canvas |
28 | /////////////////////////////////////////////////////////////////////// | 28 | /////////////////////////////////////////////////////////////////////// |
29 | var World = function GLWorld( canvas, use3D ) { | 29 | var World = function GLWorld( canvas, use3D, preserveDrawingBuffer ) { |
30 | /////////////////////////////////////////////////////////////////////// | 30 | /////////////////////////////////////////////////////////////////////// |
31 | // Instance variables | 31 | // Instance variables |
32 | /////////////////////////////////////////////////////////////////////// | 32 | /////////////////////////////////////////////////////////////////////// |
@@ -39,7 +39,11 @@ var World = function GLWorld( canvas, use3D ) { | |||
39 | 39 | ||
40 | this._canvas = canvas; | 40 | this._canvas = canvas; |
41 | if (this._useWebGL) { | 41 | if (this._useWebGL) { |
42 | this._glContext = canvas.getContext("experimental-webgl"); | 42 | if(preserveDrawingBuffer) { |
43 | this._glContext = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true}); | ||
44 | } else { | ||
45 | this._glContext = canvas.getContext("experimental-webgl"); | ||
46 | } | ||
43 | } else { | 47 | } else { |
44 | this._2DContext = canvas.getContext( "2d" ); | 48 | this._2DContext = canvas.getContext( "2d" ); |
45 | } | 49 | } |
@@ -680,7 +684,7 @@ World.prototype.render = function() { | |||
680 | var root = this.getGeomRoot(); | 684 | var root = this.getGeomRoot(); |
681 | this.hRender( root ); | 685 | this.hRender( root ); |
682 | } else { | 686 | } else { |
683 | g_Engine.setContext( this._canvas.rdgeId ); | 687 | g_Engine.setContext( this._canvas.rdgeid ); |
684 | //this.draw(); | 688 | //this.draw(); |
685 | this.restartRenderLoop(); | 689 | this.restartRenderLoop(); |
686 | } | 690 | } |
diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js index d6a162cd..6e71c693 100755 --- a/js/tools/EyedropperTool.js +++ b/js/tools/EyedropperTool.js | |||
@@ -7,7 +7,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
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 | toolBase = require("js/tools/ToolBase").toolBase, | 9 | toolBase = require("js/tools/ToolBase").toolBase, |
10 | ShapesController = require("js/controllers/elements/shapes-controller").ShapesController; | 10 | ShapesController = require("js/controllers/elements/shapes-controller").ShapesController, |
11 | World = require("js/lib/drawing/world").World, | ||
12 | njModule = require("js/lib/NJUtils"); | ||
11 | 13 | ||
12 | exports.EyedropperTool = Montage.create(toolBase, { | 14 | exports.EyedropperTool = Montage.create(toolBase, { |
13 | 15 | ||
@@ -16,6 +18,8 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
16 | _color: { value: null}, | 18 | _color: { value: null}, |
17 | _elementUnderMouse: { value: null }, | 19 | _elementUnderMouse: { value: null }, |
18 | _imageDataCanvas: { value: null }, | 20 | _imageDataCanvas: { value: null }, |
21 | _webGlDataCanvas: { value: null }, | ||
22 | _webGlWorld: { value: null }, | ||
19 | _imageDataContext: { value: null }, | 23 | _imageDataContext: { value: null }, |
20 | _canSnap: { value: false }, | 24 | _canSnap: { value: false }, |
21 | 25 | ||
@@ -29,6 +33,11 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
29 | else | 33 | else |
30 | { | 34 | { |
31 | NJevent("disableStageMove"); | 35 | NJevent("disableStageMove"); |
36 | this._deleteImageDataCanvas(); | ||
37 | this._isMouseDown = false; | ||
38 | this._elementUnderMouse = null; | ||
39 | this._previousColor = null; | ||
40 | this._color = null; | ||
32 | } | 41 | } |
33 | } | 42 | } |
34 | }, | 43 | }, |
@@ -122,7 +131,7 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
122 | new WebKitPoint(event.pageX, event.pageY)), | 131 | new WebKitPoint(event.pageX, event.pageY)), |
123 | ctx = obj.getContext("2d"); | 132 | ctx = obj.getContext("2d"); |
124 | 133 | ||
125 | c = this._getColorFromCanvas(ctx, pt); | 134 | c = this._getColorFromCanvas(ctx, [pt.x, pt.y]); |
126 | if(c) | 135 | if(c) |
127 | { | 136 | { |
128 | color = this.application.ninja.colorController.getColorObjFromCss(c); | 137 | color = this.application.ninja.colorController.getColorObjFromCss(c); |
@@ -130,8 +139,6 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
130 | } | 139 | } |
131 | else | 140 | else |
132 | { | 141 | { |
133 | this._deleteImageDataCanvas(); | ||
134 | |||
135 | if(ShapesController.isElementAShape(obj)) | 142 | if(ShapesController.isElementAShape(obj)) |
136 | { | 143 | { |
137 | c = this._getColorFromShape(obj, event); | 144 | c = this._getColorFromShape(obj, event); |
@@ -239,6 +246,8 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
239 | _getColorFromElement: { | 246 | _getColorFromElement: { |
240 | value: function(elt, event) | 247 | value: function(elt, event) |
241 | { | 248 | { |
249 | this._deleteImageDataCanvas(); | ||
250 | |||
242 | var border = ElementsMediator.getProperty(elt, "border"), | 251 | var border = ElementsMediator.getProperty(elt, "border"), |
243 | borderWidth, | 252 | borderWidth, |
244 | bounds3D, | 253 | bounds3D, |
@@ -300,49 +309,39 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
300 | _getColorFromShape: { | 309 | _getColorFromShape: { |
301 | value: function(elt, event) | 310 | value: function(elt, event) |
302 | { | 311 | { |
303 | var strokeWidth = ShapesController.getShapeProperty(elt, "strokeSize"), | 312 | var c, |
304 | bounds3D, | 313 | ctx, |
305 | innerBounds, | ||
306 | pt, | ||
307 | tmpPt, | 314 | tmpPt, |
308 | x, | ||
309 | y; | ||
310 | if(strokeWidth) | ||
311 | { | ||
312 | strokeWidth = parseFloat(strokeWidth); | ||
313 | bounds3D = this.application.ninja.stage.viewUtils.getElementViewBounds3D( elt ); | ||
314 | innerBounds = []; | ||
315 | pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, | 315 | pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, |
316 | new WebKitPoint(event.pageX, event.pageY)); | 316 | new WebKitPoint(event.pageX, event.pageY)); |
317 | |||
318 | innerBounds.push([bounds3D[0][0] + strokeWidth, bounds3D[0][1] + strokeWidth, 0]); | ||
319 | |||
320 | innerBounds.push([bounds3D[1][0] + strokeWidth, bounds3D[1][1] - strokeWidth, 0]); | ||
321 | |||
322 | innerBounds.push([bounds3D[2][0] - strokeWidth, bounds3D[2][1] - strokeWidth, 0]); | ||
323 | |||
324 | innerBounds.push([bounds3D[3][0] - strokeWidth, bounds3D[3][1] + strokeWidth, 0]); | ||
325 | 317 | ||
326 | tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); | 318 | tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); |
327 | x = tmpPt[0]; | ||
328 | y = tmpPt[1]; | ||
329 | 319 | ||
330 | if( (x < innerBounds[0][0]) || | 320 | if(elt.elementModel.shapeModel.useWebGl) |
331 | (x > innerBounds[2][0]) || | 321 | { |
332 | (y < innerBounds[0][1]) || | 322 | c = this._getColorAtPoint(elt, event, true); |
333 | (y > innerBounds[1][1]) ) | 323 | } |
324 | else | ||
325 | { | ||
326 | this._deleteImageDataCanvas(); | ||
327 | ctx = elt.getContext("2d"); | ||
328 | if(ctx) | ||
334 | { | 329 | { |
335 | return ShapesController.getColor(elt, false); | 330 | c = this._getColorFromCanvas(ctx, tmpPt); |
336 | } | 331 | } |
337 | } | 332 | } |
338 | 333 | return c; | |
339 | return ShapesController.getColor(elt, true); | ||
340 | } | 334 | } |
341 | }, | 335 | }, |
342 | 336 | ||
343 | _getColorAtPoint: { | 337 | _getColorAtPoint: { |
344 | value: function(elt, event) | 338 | value: function(elt, event, isWebGl) |
345 | { | 339 | { |
340 | var pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, | ||
341 | new WebKitPoint(event.pageX, event.pageY)); | ||
342 | |||
343 | var tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); | ||
344 | |||
346 | if(!this._imageDataCanvas) | 345 | if(!this._imageDataCanvas) |
347 | { | 346 | { |
348 | this._imageDataCanvas = document.createElement("canvas"); | 347 | this._imageDataCanvas = document.createElement("canvas"); |
@@ -362,25 +361,52 @@ exports.EyedropperTool = Montage.create(toolBase, { | |||
362 | this._imageDataCanvas.height = h; | 361 | this._imageDataCanvas.height = h; |
363 | 362 | ||
364 | this._imageDataContext = this._imageDataCanvas.getContext("2d"); | 363 | this._imageDataContext = this._imageDataCanvas.getContext("2d"); |
365 | this._imageDataContext.drawImage(elt, 0, 0); | 364 | if(isWebGl) |
365 | { | ||
366 | var worldData = elt.elementModel.shapeModel.GLWorld.export(); | ||
367 | if(worldData) | ||
368 | { | ||
369 | this._webGlDataCanvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", {"data-RDGE-id": njModule.NJUtils.generateRandom()}, true); | ||
370 | this._applyElementStyles(elt, this._webGlDataCanvas, ["display", "position", "width", "height", | ||
371 | "-webkit-transform", "-webkit-transform-style"]); | ||
372 | this._webGlDataCanvas.style.left = eltCoords[0] + "px"; | ||
373 | this._webGlDataCanvas.style.top = eltCoords[1] + "px"; | ||
374 | this._webGlDataCanvas.width = w; | ||
375 | this._webGlDataCanvas.height = h; | ||
376 | this._webGlWorld = new World(this._webGlDataCanvas, true, true); | ||
377 | this._webGlWorld.import(worldData); | ||
378 | this._webGlWorld.render(); | ||
379 | setTimeout(function() { | ||
380 | this._webGlWorld.draw(); | ||
381 | this._imageDataContext.drawImage(this._webGlDataCanvas, 0, 0); | ||
382 | return this._getColorFromCanvas(this._imageDataContext, tmpPt, true); | ||
383 | }.bind(this), 250); | ||
384 | } | ||
385 | } | ||
386 | else | ||
387 | { | ||
388 | this._imageDataContext.drawImage(elt, 0, 0); | ||
389 | } | ||
366 | } | 390 | } |
367 | 391 | ||
368 | var pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, | 392 | return this._getColorFromCanvas(this._imageDataContext, tmpPt, isWebGl); |
369 | new WebKitPoint(event.pageX, event.pageY)); | ||
370 | |||
371 | var tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); | ||
372 | |||
373 | return this._getColorFromCanvas(this._imageDataContext, tmpPt); | ||
374 | } | 393 | } |
375 | }, | 394 | }, |