From 84af1c10ca02dd3ac2b36cb141d180c55bcdebdd Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 7 Mar 2012 16:23:51 -0800 Subject: Eyedropper now supports strokes in rectangle shapes. Signed-off-by: Nivesh Rajbhandari --- js/tools/EyedropperTool.js | 59 ++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 55 insertions(+), 4 deletions(-) (limited to 'js/tools/EyedropperTool.js') diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js index 11c15158..d6a162cd 100755 --- a/js/tools/EyedropperTool.js +++ b/js/tools/EyedropperTool.js @@ -6,9 +6,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage, ElementsMediator = require("js/mediators/element-mediator").ElementMediator, - drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils, - vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils, - toolBase = require("js/tools/ToolBase").toolBase; + toolBase = require("js/tools/ToolBase").toolBase, + ShapesController = require("js/controllers/elements/shapes-controller").ShapesController; exports.EyedropperTool = Montage.create(toolBase, { @@ -133,7 +132,15 @@ exports.EyedropperTool = Montage.create(toolBase, { { this._deleteImageDataCanvas(); - c = this._getColorFromElement(obj, event); + if(ShapesController.isElementAShape(obj)) + { + c = this._getColorFromShape(obj, event); + } + else + { + c = this._getColorFromElement(obj, event); + } + if(typeof(c) === "string") { color = this.application.ninja.colorController.getColorObjFromCss(c); @@ -289,6 +296,50 @@ exports.EyedropperTool = Montage.create(toolBase, { } }, + // TODO - We don't want to calculate this repeatedly + _getColorFromShape: { + value: function(elt, event) + { + var strokeWidth = ShapesController.getShapeProperty(elt, "strokeSize"), + bounds3D, + innerBounds, + pt, + tmpPt, + x, + y; + if(strokeWidth) + { + strokeWidth = parseFloat(strokeWidth); + bounds3D = this.application.ninja.stage.viewUtils.getElementViewBounds3D( elt ); + innerBounds = []; + pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, + new WebKitPoint(event.pageX, event.pageY)); + + innerBounds.push([bounds3D[0][0] + strokeWidth, bounds3D[0][1] + strokeWidth, 0]); + + innerBounds.push([bounds3D[1][0] + strokeWidth, bounds3D[1][1] - strokeWidth, 0]); + + innerBounds.push([bounds3D[2][0] - strokeWidth, bounds3D[2][1] - strokeWidth, 0]); + + innerBounds.push([bounds3D[3][0] - strokeWidth, bounds3D[3][1] + strokeWidth, 0]); + + tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); + x = tmpPt[0]; + y = tmpPt[1]; + + if( (x < innerBounds[0][0]) || + (x > innerBounds[2][0]) || + (y < innerBounds[0][1]) || + (y > innerBounds[1][1]) ) + { + return ShapesController.getColor(elt, false); + } + } + + return ShapesController.getColor(elt, true); + } + }, + _getColorAtPoint: { value: function(elt, event) { -- cgit v1.2.3 From 86784888a98a05523dbedcbe32fd4dea336878e7 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 9 Mar 2012 08:21:13 -0800 Subject: Eyedropper support for getting color value from webgl shapes. Signed-off-by: Nivesh Rajbhandari --- js/tools/EyedropperTool.js | 121 ++++++++++++++++++++++++++++----------------- 1 file changed, 76 insertions(+), 45 deletions(-) (limited to 'js/tools/EyedropperTool.js') 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 var Montage = require("montage/core/core").Montage, ElementsMediator = require("js/mediators/element-mediator").ElementMediator, toolBase = require("js/tools/ToolBase").toolBase, - ShapesController = require("js/controllers/elements/shapes-controller").ShapesController; + ShapesController = require("js/controllers/elements/shapes-controller").ShapesController, + World = require("js/lib/drawing/world").World, + njModule = require("js/lib/NJUtils"); exports.EyedropperTool = Montage.create(toolBase, { @@ -16,6 +18,8 @@ exports.EyedropperTool = Montage.create(toolBase, { _color: { value: null}, _elementUnderMouse: { value: null }, _imageDataCanvas: { value: null }, + _webGlDataCanvas: { value: null }, + _webGlWorld: { value: null }, _imageDataContext: { value: null }, _canSnap: { value: false }, @@ -29,6 +33,11 @@ exports.EyedropperTool = Montage.create(toolBase, { else { NJevent("disableStageMove"); + this._deleteImageDataCanvas(); + this._isMouseDown = false; + this._elementUnderMouse = null; + this._previousColor = null; + this._color = null; } } }, @@ -122,7 +131,7 @@ exports.EyedropperTool = Montage.create(toolBase, { new WebKitPoint(event.pageX, event.pageY)), ctx = obj.getContext("2d"); - c = this._getColorFromCanvas(ctx, pt); + c = this._getColorFromCanvas(ctx, [pt.x, pt.y]); if(c) { color = this.application.ninja.colorController.getColorObjFromCss(c); @@ -130,8 +139,6 @@ exports.EyedropperTool = Montage.create(toolBase, { } else { - this._deleteImageDataCanvas(); - if(ShapesController.isElementAShape(obj)) { c = this._getColorFromShape(obj, event); @@ -239,6 +246,8 @@ exports.EyedropperTool = Montage.create(toolBase, { _getColorFromElement: { value: function(elt, event) { + this._deleteImageDataCanvas(); + var border = ElementsMediator.getProperty(elt, "border"), borderWidth, bounds3D, @@ -300,49 +309,39 @@ exports.EyedropperTool = Montage.create(toolBase, { _getColorFromShape: { value: function(elt, event) { - var strokeWidth = ShapesController.getShapeProperty(elt, "strokeSize"), - bounds3D, - innerBounds, - pt, + var c, + ctx, tmpPt, - x, - y; - if(strokeWidth) - { - strokeWidth = parseFloat(strokeWidth); - bounds3D = this.application.ninja.stage.viewUtils.getElementViewBounds3D( elt ); - innerBounds = []; pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, - new WebKitPoint(event.pageX, event.pageY)); - - innerBounds.push([bounds3D[0][0] + strokeWidth, bounds3D[0][1] + strokeWidth, 0]); - - innerBounds.push([bounds3D[1][0] + strokeWidth, bounds3D[1][1] - strokeWidth, 0]); - - innerBounds.push([bounds3D[2][0] - strokeWidth, bounds3D[2][1] - strokeWidth, 0]); - - innerBounds.push([bounds3D[3][0] - strokeWidth, bounds3D[3][1] + strokeWidth, 0]); + new WebKitPoint(event.pageX, event.pageY)); - tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); - x = tmpPt[0]; - y = tmpPt[1]; + tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); - if( (x < innerBounds[0][0]) || - (x > innerBounds[2][0]) || - (y < innerBounds[0][1]) || - (y > innerBounds[1][1]) ) + if(elt.elementModel.shapeModel.useWebGl) + { + c = this._getColorAtPoint(elt, event, true); + } + else + { + this._deleteImageDataCanvas(); + ctx = elt.getContext("2d"); + if(ctx) { - return ShapesController.getColor(elt, false); + c = this._getColorFromCanvas(ctx, tmpPt); } } - - return ShapesController.getColor(elt, true); + return c; } }, _getColorAtPoint: { - value: function(elt, event) + value: function(elt, event, isWebGl) { + var pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, + new WebKitPoint(event.pageX, event.pageY)); + + var tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); + if(!this._imageDataCanvas) { this._imageDataCanvas = document.createElement("canvas"); @@ -362,25 +361,52 @@ exports.EyedropperTool = Montage.create(toolBase, { this._imageDataCanvas.height = h; this._imageDataContext = this._imageDataCanvas.getContext("2d"); - this._imageDataContext.drawImage(elt, 0, 0); + if(isWebGl) + { + var worldData = elt.elementModel.shapeModel.GLWorld.export(); + if(worldData) + { + this._webGlDataCanvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", {"data-RDGE-id": njModule.NJUtils.generateRandom()}, true); + this._applyElementStyles(elt, this._webGlDataCanvas, ["display", "position", "width", "height", + "-webkit-transform", "-webkit-transform-style"]); + this._webGlDataCanvas.style.left = eltCoords[0] + "px"; + this._webGlDataCanvas.style.top = eltCoords[1] + "px"; + this._webGlDataCanvas.width = w; + this._webGlDataCanvas.height = h; + this._webGlWorld = new World(this._webGlDataCanvas, true, true); + this._webGlWorld.import(worldData); + this._webGlWorld.render(); + setTimeout(function() { + this._webGlWorld.draw(); + this._imageDataContext.drawImage(this._webGlDataCanvas, 0, 0); + return this._getColorFromCanvas(this._imageDataContext, tmpPt, true); + }.bind(this), 250); + } + } + else + { + this._imageDataContext.drawImage(elt, 0, 0); + } } - var pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, - new WebKitPoint(event.pageX, event.pageY)); - - var tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); - - return this._getColorFromCanvas(this._imageDataContext, tmpPt); + return this._getColorFromCanvas(this._imageDataContext, tmpPt, isWebGl); } }, _getColorFromCanvas: { - value: function(ctx, pt) + value: function(ctx, pt, isWebGl) { - var imageData = ctx.getImageData(pt[0], pt[1], 1, 1).data; + var imageData = ctx.getImageData(~~pt[0], ~~pt[1], 1, 1).data; if(imageData) { - return ("rgba(" + imageData[0] + "," + imageData[1] + "," + imageData[2] + "," + imageData[3] + ")"); + if(isWebGl) + { + return ("rgba(" + imageData[0] + "," + imageData[1] + "," + imageData[2] + "," + imageData[3]/255 + ")"); + } + else + { + return ("rgba(" + imageData[0] + "," + imageData[1] + "," + imageData[2] + "," + imageData[3] + ")"); + } } else { @@ -394,6 +420,11 @@ exports.EyedropperTool = Montage.create(toolBase, { { if(this._imageDataCanvas) { + if(this._webGlDataCanvas) + { + this._webGlWorld = null; + this._webGlDataCanvas = null; + } this._imageDataCanvas = null; this._imageDataContext = null; } -- cgit v1.2.3 From 2c6339a9191033c937c2bac3e181c2bc380f4c48 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 12 Mar 2012 12:00:07 -0700 Subject: Fixed element mediator, PI, and eye-dropper to handle different borders sides and gradients. Signed-off-by: Nivesh Rajbhandari --- js/tools/EyedropperTool.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) (limited to 'js/tools/EyedropperTool.js') diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js index 6e71c693..927b86cf 100755 --- a/js/tools/EyedropperTool.js +++ b/js/tools/EyedropperTool.js @@ -152,10 +152,14 @@ exports.EyedropperTool = Montage.create(toolBase, { { color = this.application.ninja.colorController.getColorObjFromCss(c); } - else + else if(c.mode !== "gradient") { color = this.application.ninja.colorController.getColorObjFromCss(c.color.css); } + else + { + color = c; + } } this._updateColor(color, false); @@ -175,7 +179,8 @@ exports.EyedropperTool = Montage.create(toolBase, { if(updateColorToolBar) { eventType = "change"; - if (color && color.value) + // TODO - Color chips in toolbar doesn't support gradients yet + if (color && color.value && (color.mode !== "gradient")) { var input = this.application.ninja.colorController.colorModel.input; @@ -295,10 +300,10 @@ exports.EyedropperTool = Montage.create(toolBase, { x = tmpPt[0]; y = tmpPt[1]; - if(x < innerBounds[0][0]) return ElementsMediator.getProperty(elt, "border-left-color"); - if(x > innerBounds[2][0]) return ElementsMediator.getProperty(elt, "border-right-color"); - if(y < innerBounds[0][1]) return ElementsMediator.getProperty(elt, "border-top-color"); - if(y > innerBounds[1][1]) return ElementsMediator.getProperty(elt, "border-bottom-color"); + if(x < innerBounds[0][0]) return ElementsMediator.getColor(elt, false, "left"); + if(x > innerBounds[2][0]) return ElementsMediator.getColor(elt, false, "right"); + if(y < innerBounds[0][1]) return ElementsMediator.getColor(elt, false, "top"); + if(y > innerBounds[1][1]) return ElementsMediator.getColor(elt, false, "bottom"); } return ElementsMediator.getColor(elt, true); -- cgit v1.2.3