aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rwxr-xr-xjs/lib/drawing/world.js10
-rwxr-xr-xjs/tools/EyedropperTool.js121
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///////////////////////////////////////////////////////////////////////
29var World = function GLWorld( canvas, use3D ) { 29var 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
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 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
12exports.EyedropperTool = Montage.create(toolBase, { 14exports.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 },