aboutsummaryrefslogtreecommitdiff
path: root/js/tools
diff options
context:
space:
mode:
Diffstat (limited to 'js/tools')
-rwxr-xr-xjs/tools/EyedropperTool.js116
-rwxr-xr-xjs/tools/SelectionTool.js28
-rwxr-xr-xjs/tools/Translate3DToolBase.js1
-rwxr-xr-xjs/tools/TranslateObject3DTool.js2
-rwxr-xr-xjs/tools/modifier-tool-base.js12
5 files changed, 123 insertions, 36 deletions
diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js
index 11c15158..6e71c693 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,9 +139,15 @@ 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);
@@ -232,6 +246,8 @@ exports.EyedropperTool = Montage.create(toolBase, {
232 _getColorFromElement: { 246 _getColorFromElement: {
233 value: function(elt, event) 247 value: function(elt, event)
234 { 248 {
249 this._deleteImageDataCanvas();
250
235 var border = ElementsMediator.getProperty(elt, "border"), 251 var border = ElementsMediator.getProperty(elt, "border"),
236 borderWidth, 252 borderWidth,
237 bounds3D, 253 bounds3D,
@@ -289,9 +305,43 @@ exports.EyedropperTool = Montage.create(toolBase, {
289 } 305 }
290 }, 306 },
291 307
292 _getColorAtPoint: { 308 // TODO - We don't want to calculate this repeatedly
309 _getColorFromShape: {
293 value: function(elt, event) 310 value: function(elt, event)
294 { 311 {
312 var c,
313 ctx,
314 tmpPt,
315 pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas,
316 new WebKitPoint(event.pageX, event.pageY));
317
318 tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt);
319
320 if(elt.elementModel.shapeModel.useWebGl)
321 {
322 c = this._getColorAtPoint(elt, event, true);
323 }
324 else
325 {
326 this._deleteImageDataCanvas();
327 ctx = elt.getContext("2d");
328 if(ctx)
329 {
330 c = this._getColorFromCanvas(ctx, tmpPt);
331 }
332 }
333 return c;
334 }
335 },
336
337 _getColorAtPoint: {
338 value: function(elt, event, isWebGl)
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
295 if(!this._imageDataCanvas) 345 if(!this._imageDataCanvas)
296 { 346 {
297 this._imageDataCanvas = document.createElement("canvas"); 347 this._imageDataCanvas = document.createElement("canvas");
@@ -311,25 +361,52 @@ exports.EyedropperTool = Montage.create(toolBase, {
311 this._imageDataCanvas.height = h; 361 this._imageDataCanvas.height = h;
312 362
313 this._imageDataContext = this._imageDataCanvas.getContext("2d"); 363 this._imageDataContext = this._imageDataCanvas.getContext("2d");
314 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 }
315 } 390 }
316 391
317 var pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, 392 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 } 393 }
324 }, 394 },
325 395
326 _getColorFromCanvas: { 396 _getColorFromCanvas: {
327 value: function(ctx, pt) 397 value: function(ctx, pt, isWebGl)
328 { 398 {
329 var imageData = ctx.getImageData(pt[0], pt[1], 1, 1).data; 399 var imageData = ctx.getImageData(~~pt[0], ~~pt[1], 1, 1).data;
330 if(imageData) 400 if(imageData)
331 { 401 {
332 return ("rgba(" + imageData[0] + "," + imageData[1] + "," + imageData[2] + "," + imageData[3] + ")"); 402 if(isWebGl)
403 {
404 return ("rgba(" + imageData[0] + "," + imageData[1] + "," + imageData[2] + "," + imageData[3]/255 + ")");
405 }
406 else
407 {
408 return ("rgba(" + imageData[0] + "," + imageData[1] + "," + imageData[2] + "," + imageData[3] + ")");
409 }
333 } 410 }
334 else 411 else
335 { 412 {
@@ -343,6 +420,11 @@ exports.EyedropperTool = Montage.create(toolBase, {
343 { 420 {
344 if(this._imageDataCanvas) 421 if(this._imageDataCanvas)
345 { 422 {
423 if(this._webGlDataCanvas)
424 {
425 this._webGlWorld = null;
426 this._webGlDataCanvas = null;
427 }
346 this._imageDataCanvas = null; 428 this._imageDataCanvas = null;
347 this._imageDataContext = null; 429 this._imageDataContext = null;
348 } 430 }
diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js
index 6d8ff175..5f48f74d 100755
--- a/js/tools/SelectionTool.js
+++ b/js/tools/SelectionTool.js
@@ -16,6 +16,7 @@ var Montage = require("montage/core/core").Montage,
16var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { 16var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
17 drawingFeedback: { value: { mode: "Draw2D", type: "" } }, 17 drawingFeedback: { value: { mode: "Draw2D", type: "" } },
18 18
19 _inLocalMode: { value: false}, // This tool should always use global mode for translations
19 _canOperateOnStage: { value: true}, 20 _canOperateOnStage: { value: true},
20 _isSelecting: {value: false, writable:true}, 21 _isSelecting: {value: false, writable:true},
21 _shiftMove: { value: 10},