From 2edf68e0de786cdc92d5f41548fd61e6c77a57ec Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 13 Feb 2012 09:56:40 -0800 Subject: Updated ink bottle tool to use new setColor routine in the mediator and controllers. Signed-off-by: Nivesh Rajbhandari --- js/tools/FillTool.js | 3 +-- js/tools/InkBottleTool.js | 35 ++++++++++++++++++++++++----------- 2 files changed, 25 insertions(+), 13 deletions(-) (limited to 'js/tools') diff --git a/js/tools/FillTool.js b/js/tools/FillTool.js index fabcec69..46d76a19 100644 --- a/js/tools/FillTool.js +++ b/js/tools/FillTool.js @@ -63,15 +63,14 @@ exports.FillTool = Montage.create(ModifierToolBase, { colorInfo = { mode:color.colorMode, color:color.color }; - ElementsMediator.setColor(this.application.ninja.selectedElements, colorInfo, true, "Change", "fillTool"); } else { colorInfo = { mode:"nocolor", color:color.color }; - ElementsMediator.setColor(this.application.ninja.selectedElements, colorInfo, true, "Change", "fillTool"); } + ElementsMediator.setColor(this.application.ninja.selectedElements, colorInfo, true, "Change", "fillTool"); } } } diff --git a/js/tools/InkBottleTool.js b/js/tools/InkBottleTool.js index cc20d94c..2be74ada 100644 --- a/js/tools/InkBottleTool.js +++ b/js/tools/InkBottleTool.js @@ -48,20 +48,33 @@ exports.InkBottleTool = Montage.create(ModifierToolBase, { value: function(event) { this.isDrawing = true; - if(this._canColor) + if(this._canColor && this.application.ninja.selectedElements.length) { -// var color = this.application.ninja.colorController.colorToolbar.stroke; -// ElementsMediator.setColor(this.application.ninja.selectedElements, color, false, "Change", "inkBottleTool"); + var color = this.application.ninja.colorController.colorToolbar.stroke, + colorInfo; + if(color && color.color) + { + colorInfo = { mode:color.colorMode, + color:color.color + }; + } + else + { + colorInfo = { mode:"nocolor", + color:color.color + }; + } + + colorInfo.borderInfo = { borderStyle:this.options._borderStyle.value, + borderWidth:this.options._borderWidth.value, + borderUnits:this.options._borderWidth.units + }; - var strokeInfo = { borderStyle:this.options._borderStyle.value, - borderWidth:this.options._borderWidth.value, - borderUnits:this.options._borderWidth.units, - strokeSize:this.options._strokeSize.value, - strokeUnits:this.options._strokeSize.units, - color:this.application.ninja.colorController.colorToolbar.stroke - }; + colorInfo.strokeInfo = { strokeSize:this.options._strokeSize.value, + strokeUnits:this.options._strokeSize.units + }; - ElementsMediator.setStroke(this.application.ninja.selectedElements, strokeInfo, "Change", "inkBottleTool"); + ElementsMediator.setColor(this.application.ninja.selectedElements, colorInfo, false, "Change", "inkBottleTool"); } } } -- cgit v1.2.3 From 297af408e671006366ac72f7eac1f64a5d742117 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 13 Feb 2012 09:57:04 -0800 Subject: Fixed eyedropper tool to use new color routines. Signed-off-by: Nivesh Rajbhandari --- js/tools/EyedropperTool.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/tools') diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js index 795753d2..8bb986a3 100644 --- a/js/tools/EyedropperTool.js +++ b/js/tools/EyedropperTool.js @@ -102,7 +102,7 @@ exports.EyedropperTool = Montage.create(toolBase, { var c = ElementsMediator.getColor(obj, true); if(c) { - var color = this.application.ninja.colorController.getColorObjFromCss(c); + var color = this.application.ninja.colorController.getColorObjFromCss(c.color.css); if (color && color.value) { color.value.wasSetByCode = true; color.value.type = 'changing'; -- cgit v1.2.3 From 200a217f485220451a38f1b9c4134462db52dbe1 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 13 Feb 2012 11:58:07 -0800 Subject: Fixed issue with tools not drawing their handles when mousing up. Signed-off-by: Nivesh Rajbhandari --- js/tools/modifier-tool-base.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/tools') diff --git a/js/tools/modifier-tool-base.js b/js/tools/modifier-tool-base.js index 67b217c4..67377ab3 100644 --- a/js/tools/modifier-tool-base.js +++ b/js/tools/modifier-tool-base.js @@ -867,8 +867,8 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { { this._handleMode = null; this._delta = null; - this.DrawHandles(); } + this.DrawHandles(); } }, -- cgit v1.2.3 From c9a2d809558dd441eb63c2a34625d1b2a66f5c02 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 13 Feb 2012 17:05:29 -0800 Subject: Check if eyedropper is over border or background. Signed-off-by: Nivesh Rajbhandari --- js/tools/EyedropperTool.js | 162 ++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 160 insertions(+), 2 deletions(-) (limited to 'js/tools') diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js index 8bb986a3..62a3eadd 100644 --- a/js/tools/EyedropperTool.js +++ b/js/tools/EyedropperTool.js @@ -6,7 +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; exports.EyedropperTool = Montage.create(toolBase, { @@ -99,7 +100,7 @@ exports.EyedropperTool = Montage.create(toolBase, { if (obj) { // TODO - figure out if user clicked on a border - for now, just get fill - var c = ElementsMediator.getColor(obj, true); + var c = ElementsMediator.getColor(obj, this._isOverBorder(obj, event)); if(c) { var color = this.application.ninja.colorController.getColorObjFromCss(c.color.css); @@ -147,6 +148,163 @@ exports.EyedropperTool = Montage.create(toolBase, { this._previousColor = color.value.css; } } + }, + + // TODO - We don't want to calculate this repeatedly + _isOverBorder: { + value: function(elt, event) + { + var border = ElementsMediator.getProperty(elt, "border", parseFloat); + + if(border) + { + var bounds3D, + innerBounds = [], + pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)), + bt = ElementsMediator.getProperty(elt, "border-top", parseFloat), + br = ElementsMediator.getProperty(elt, "border-right", parseFloat), + bb = ElementsMediator.getProperty(elt, "border-bottom", parseFloat), + bl = ElementsMediator.getProperty(elt, "border-left", parseFloat); + +// this.application.ninja.stage.viewUtils.setViewportObj( elt ); + bounds3D = this.application.ninja.stage.viewUtils.getElementViewBounds3D( elt ); + console.log("bounds"); + console.dir(bounds3D); + + var xAdj = bl || border, + yAdj = bt || border; + innerBounds.push([bounds3D[0][0] + xAdj, bounds3D[0][1] + yAdj, 0]); + + yAdj += bb || border; + innerBounds.push([bounds3D[1][0] + xAdj, bounds3D[1][1] - yAdj, 0]); + + xAdj += br || border; + innerBounds.push([bounds3D[2][0] - xAdj, bounds3D[2][1] - yAdj, 0]); + + yAdj = bt || border; + innerBounds.push([bounds3D[3][0] - xAdj, bounds3D[3][1] + yAdj, 0]); + console.log("innerBounds"); + console.dir(innerBounds); + + var tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); + var x = tmpPt[0], + y = tmpPt[1]; + + if(x < innerBounds[0][0]) return false; + if(x > innerBounds[2][0]) return false; + if(y < innerBounds[0][1]) return false; + if(y > innerBounds[1][1]) return false; + + return true; + + +// var contain = MathUtils.boundaryContainsPoint(innerBounds, tmpPt, false); +// console.log("contain is " + contain); +// var tmpMat = this.application.ninja.stage.viewUtils.getLocalToGlobalMatrix( elt ); +//// var zoomFactor = 1; +//// if (this.application.ninja.stage.viewport.style && this.application.ninja.stage.viewport.style.zoom) +//// { +//// zoomFactor = Number(this.application.ninja.stage.viewport.style.zoom); +//// } +// +// for (var j=0; j<4; j++) +// { +// var localPt = innerBounds[j]; +// var tmpPt = this.application.ninja.stage.viewUtils.localToGlobal2(localPt, tmpMat); +// +//// if(zoomFactor !== 1) +//// { +//// tmpPt = vecUtils.vecScale(3, tmpPt, zoomFactor); +//// tmpPt[0] += this.application.ninja.stage.scrollLeft*(zoomFactor - 1); +//// tmpPt[1] += this.application.ninja.stage.scrollTop*(zoomFactor - 1); +//// } +// innerBounds[j] = tmpPt; +// } +// +// var contain = MathUtils.boundaryContainsPoint(innerBounds, [pt.x, pt.y], false); +// console.log("contain is " + contain); + + + +// var bounds, +// innerBounds = [], +// plane = ElementsMediator.get3DProperty(elt, "elementPlane"), +// pt = webkitConvertPointFromPageToNode(drawUtils.getDrawingSurfaceElement(), new WebKitPoint(event.pageX, event.pageY)), +// bt = ElementsMediator.getProperty(elt, "border-top", parseFloat), +// br = ElementsMediator.getProperty(elt, "border-right", parseFloat), +// bb = ElementsMediator.getProperty(elt, "border-bottom", parseFloat), +// bl = ElementsMediator.getProperty(elt, "border-left", parseFloat); +// +// if(plane) +// { +// bounds = plane.getBoundaryPoints().slice(0); +// var b = bl || border; +// var dirV = vecUtils.vecSubtract(2, bounds[3], bounds[0]); +// dirV = vecUtils.vecNormalize(2, dirV, b); +// innerBounds.push(vecUtils.vecAdd(2, bounds[0], dirV)); +// +// b = bb || border; +// dirV = vecUtils.vecSubtract(2, bounds[1], bounds[0]); +// dirV = vecUtils.vecNormalize(2, dirV, b); +// innerBounds.push(vecUtils.vecAdd(2, bounds[0], dirV)); +// +// b = br || border; +// dirV = vecUtils.vecSubtract(2, bounds[2], bounds[1]); +// dirV = vecUtils.vecNormalize(2, dirV, b); +// innerBounds.push(vecUtils.vecAdd(2, bounds[1], dirV)); +// +// b = bt || border; +// dirV = vecUtils.vecSubtract(2, bounds[2], bounds[3]); +// dirV = vecUtils.vecNormalize(2, dirV, b); +// innerBounds.push(vecUtils.vecAdd(2, bounds[3], dirV)); +// +// console.log("outerBounds"); +// console.dir(bounds); +// +// console.log("innerBounds"); +// console.dir(innerBounds); +// } + +// var contain = MathUtils.boundaryContainsPoint( bounds, pt, plane.isBackFacing() ); +// if (contain == MathUtils.OUTSIDE) +// { +// +// } +// if (contain == MathUtils.ON) +// { +// +// } +// +// var bt = ElementsMediator.getProperty(elt, "border-top", parseFloat), +// br = ElementsMediator.getProperty(elt, "border-right", parseFloat), +// bb = ElementsMediator.getProperty(elt, "border-bottom", parseFloat), +// bl = ElementsMediator.getProperty(elt, "border-left", parseFloat), +// left = ElementsMediator.getProperty(elt, "left", parseFloat), +// top = ElementsMediator.getProperty(elt, "top", parseFloat), +// width = ElementsMediator.getProperty(elt, "width", parseFloat), +// height = ElementsMediator.getProperty(elt, "height", parseFloat); +// +// left1 = elt.offsetLeft; +// left2 = box[0]; +// right1 = elt.offsetLeft + ele.offsetWidth; +// right2 = box[2]; +// top1 = ele.offsetTop; +// top2 = box[1]; +// bottom1 = ele.offsetTop + ele.offsetHeight; +// bottom2 = box[3]; +// +// if (bottom1 < top2) return false; +// if (top1 > bottom2) return false; +// if (right1 < left2) return false; +// if (left1 > right2) return false; +// +// return true; + + } + + + } + } }); \ No newline at end of file -- cgit v1.2.3 From 9e43e17a07b60dd6004fb03b1f5c5facc8425b4f Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 14 Feb 2012 13:17:11 -0800 Subject: Get color from canvas and images. Signed-off-by: Nivesh Rajbhandari --- js/tools/EyedropperTool.js | 233 +++++++++++++++++++++------------------------ 1 file changed, 108 insertions(+), 125 deletions(-) (limited to 'js/tools') diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js index 62a3eadd..8301480d 100644 --- a/js/tools/EyedropperTool.js +++ b/js/tools/EyedropperTool.js @@ -15,6 +15,9 @@ exports.EyedropperTool = Montage.create(toolBase, { _isMouseDown: { value: false }, _previousColor: { value: null}, _color: { value: null}, + _elementUnderMouse: { value: null }, + _imageDataCanvas: { value: null }, + _imageDataContext: { value: null }, Configure: { value: function ( doActivate ) @@ -96,27 +99,68 @@ exports.EyedropperTool = Montage.create(toolBase, { _updateColorFromPoint: { value : function (event) { - var obj = this.application.ninja.stage.GetElement(event); + var c, + color, + obj = this.application.ninja.stage.GetElement(event); if (obj) { - // TODO - figure out if user clicked on a border - for now, just get fill - var c = ElementsMediator.getColor(obj, this._isOverBorder(obj, event)); - if(c) + this._elementUnderMouse = obj; + // Depending on the object type, we need to get different colors + if(obj.elementModel.type === "IMG") { - var color = this.application.ninja.colorController.getColorObjFromCss(c.color.css); - if (color && color.value) { - color.value.wasSetByCode = true; - color.value.type = 'changing'; - if (color.value.a) { - this.application.ninja.colorController.colorModel.alpha = {value: color.value.a, - wasSetByCode: true, - type: 'changing'}; - } - this.application.ninja.colorController.colorModel[color.mode] = color.value; - this._color = color; + c = this._getColorAtPoint(obj, event); + if(c) + { + color = this.application.ninja.colorController.getColorObjFromCss(c); } } + else if (obj.elementModel.type === "CANVAS") + { + this._imageDataCanvas = null; + this._imageDataContext = null; + + var pt = webkitConvertPointFromPageToNode(obj, + new WebKitPoint(event.pageX, event.pageY)), + ctx = obj.getContext("2d"); + + c = this._getColorFromCanvas(ctx, pt); + if(c) + { + color = this.application.ninja.colorController.getColorObjFromCss(c); + } + } + else + { + this._imageDataCanvas = null; + this._imageDataContext = null; + + // TODO - figure out if user clicked on a border - for now, just get fill + c = ElementsMediator.getColor(obj, this._isOverBackground(obj, event)); + if(c) + { + color = this.application.ninja.colorController.getColorObjFromCss(c.color.css); + } + } + + if (color && color.value) { + color.value.wasSetByCode = true; + color.value.type = 'changing'; + if (color.value.a) { + this.application.ninja.colorController.colorModel.alpha = {value: color.value.a, + wasSetByCode: true, + type: 'changing'}; + } + this.application.ninja.colorController.colorModel[color.mode] = color.value; + this._color = color; + } } + else + { + this._elementUnderMouse = null; + this._imageDataCanvas = null; + this._imageDataContext = null; + } + } }, @@ -151,7 +195,7 @@ exports.EyedropperTool = Montage.create(toolBase, { }, // TODO - We don't want to calculate this repeatedly - _isOverBorder: { + _isOverBackground: { value: function(elt, event) { var border = ElementsMediator.getProperty(elt, "border", parseFloat); @@ -168,8 +212,8 @@ exports.EyedropperTool = Montage.create(toolBase, { // this.application.ninja.stage.viewUtils.setViewportObj( elt ); bounds3D = this.application.ninja.stage.viewUtils.getElementViewBounds3D( elt ); - console.log("bounds"); - console.dir(bounds3D); +// console.log("bounds"); +// console.dir(bounds3D); var xAdj = bl || border, yAdj = bt || border; @@ -183,8 +227,8 @@ exports.EyedropperTool = Montage.create(toolBase, { yAdj = bt || border; innerBounds.push([bounds3D[3][0] - xAdj, bounds3D[3][1] + yAdj, 0]); - console.log("innerBounds"); - console.dir(innerBounds); +// console.log("innerBounds"); +// console.dir(innerBounds); var tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); var x = tmpPt[0], @@ -194,117 +238,56 @@ exports.EyedropperTool = Montage.create(toolBase, { if(x > innerBounds[2][0]) return false; if(y < innerBounds[0][1]) return false; if(y > innerBounds[1][1]) return false; + } + return true; + } + }, - return true; - - -// var contain = MathUtils.boundaryContainsPoint(innerBounds, tmpPt, false); -// console.log("contain is " + contain); -// var tmpMat = this.application.ninja.stage.viewUtils.getLocalToGlobalMatrix( elt ); -//// var zoomFactor = 1; -//// if (this.application.ninja.stage.viewport.style && this.application.ninja.stage.viewport.style.zoom) -//// { -//// zoomFactor = Number(this.application.ninja.stage.viewport.style.zoom); -//// } -// -// for (var j=0; j<4; j++) -// { -// var localPt = innerBounds[j]; -// var tmpPt = this.application.ninja.stage.viewUtils.localToGlobal2(localPt, tmpMat); -// -//// if(zoomFactor !== 1) -//// { -//// tmpPt = vecUtils.vecScale(3, tmpPt, zoomFactor); -//// tmpPt[0] += this.application.ninja.stage.scrollLeft*(zoomFactor - 1); -//// tmpPt[1] += this.application.ninja.stage.scrollTop*(zoomFactor - 1); -//// } -// innerBounds[j] = tmpPt; -// } -// -// var contain = MathUtils.boundaryContainsPoint(innerBounds, [pt.x, pt.y], false); -// console.log("contain is " + contain); - - - -// var bounds, -// innerBounds = [], -// plane = ElementsMediator.get3DProperty(elt, "elementPlane"), -// pt = webkitConvertPointFromPageToNode(drawUtils.getDrawingSurfaceElement(), new WebKitPoint(event.pageX, event.pageY)), -// bt = ElementsMediator.getProperty(elt, "border-top", parseFloat), -// br = ElementsMediator.getProperty(elt, "border-right", parseFloat), -// bb = ElementsMediator.getProperty(elt, "border-bottom", parseFloat), -// bl = ElementsMediator.getProperty(elt, "border-left", parseFloat); -// -// if(plane) -// { -// bounds = plane.getBoundaryPoints().slice(0); -// var b = bl || border; -// var dirV = vecUtils.vecSubtract(2, bounds[3], bounds[0]); -// dirV = vecUtils.vecNormalize(2, dirV, b); -// innerBounds.push(vecUtils.vecAdd(2, bounds[0], dirV)); -// -// b = bb || border; -// dirV = vecUtils.vecSubtract(2, bounds[1], bounds[0]); -// dirV = vecUtils.vecNormalize(2, dirV, b); -// innerBounds.push(vecUtils.vecAdd(2, bounds[0], dirV)); -// -// b = br || border; -// dirV = vecUtils.vecSubtract(2, bounds[2], bounds[1]); -// dirV = vecUtils.vecNormalize(2, dirV, b); -// innerBounds.push(vecUtils.vecAdd(2, bounds[1], dirV)); -// -// b = bt || border; -// dirV = vecUtils.vecSubtract(2, bounds[2], bounds[3]); -// dirV = vecUtils.vecNormalize(2, dirV, b); -// innerBounds.push(vecUtils.vecAdd(2, bounds[3], dirV)); -// -// console.log("outerBounds"); -// console.dir(bounds); -// -// console.log("innerBounds"); -// console.dir(innerBounds); -// } - -// var contain = MathUtils.boundaryContainsPoint( bounds, pt, plane.isBackFacing() ); -// if (contain == MathUtils.OUTSIDE) -// { -// -// } -// if (contain == MathUtils.ON) -// { -// -// } -// -// var bt = ElementsMediator.getProperty(elt, "border-top", parseFloat), -// br = ElementsMediator.getProperty(elt, "border-right", parseFloat), -// bb = ElementsMediator.getProperty(elt, "border-bottom", parseFloat), -// bl = ElementsMediator.getProperty(elt, "border-left", parseFloat), -// left = ElementsMediator.getProperty(elt, "left", parseFloat), -// top = ElementsMediator.getProperty(elt, "top", parseFloat), -// width = ElementsMediator.getProperty(elt, "width", parseFloat), -// height = ElementsMediator.getProperty(elt, "height", parseFloat); -// -// left1 = elt.offsetLeft; -// left2 = box[0]; -// right1 = elt.offsetLeft + ele.offsetWidth; -// right2 = box[2]; -// top1 = ele.offsetTop; -// top2 = box[1]; -// bottom1 = ele.offsetTop + ele.offsetHeight; -// bottom2 = box[3]; -// -// if (bottom1 < top2) return false; -// if (top1 > bottom2) return false; -// if (right1 < left2) return false; -// if (left1 > right2) return false; -// -// return true; - + _getColorAtPoint: { + value: function(elt, event) + { + var imageData; + if(!this._imageDataCanvas) + { + this._imageDataCanvas = document.createElement("canvas"); + this._imageDataCanvas.style.display = "block"; + this._imageDataCanvas.style.position = "absolute"; + + var eltCoords = this.application.ninja.stage.toViewportCoordinates(elt.offsetLeft, elt.offsetTop); + this._imageDataCanvas.style.left = eltCoords[0] + "px"; + this._imageDataCanvas.style.top = eltCoords[1] + "px"; + this._imageDataCanvas.style.width = elt.offsetWidth + "px"; + this._imageDataCanvas.style.height = elt.offsetHeight + "px"; + this._imageDataCanvas.width = elt.offsetWidth; + this._imageDataCanvas.height = elt.offsetHeight; + + this.application.ninja.stage.element.appendChild(this._imageDataCanvas); + + this._imageDataContext = this._imageDataCanvas.getContext("2d"); +// this._imageDataContext.drawImage(elt, eltCoords[0], eltCoords[1]); + this._imageDataContext.drawImage(elt, 0, 0); } + var pt = webkitConvertPointFromPageToNode(this._imageDataCanvas, + new WebKitPoint(event.pageX, event.pageY)); + return this._getColorFromCanvas(this._imageDataContext, pt); } + }, + _getColorFromCanvas: { + value: function(ctx, pt) + { + var imageData = ctx.getImageData(pt.x, pt.y, 1, 1).data; + if(imageData) + { + return ("rgba(" + imageData[0] + "," + imageData[1] + "," + imageData[2] + "," + imageData[3] + ")"); + } + else + { + return null; + } + } } }); \ No newline at end of file -- cgit v1.2.3 From d77deb60ade63d8526ce16d0b104285411218e14 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 14 Feb 2012 13:38:56 -0800 Subject: Get color under mouse point from image or canvas. Signed-off-by: Nivesh Rajbhandari --- js/tools/EyedropperTool.js | 40 +++++++++++++++++++++++++++++++++------- 1 file changed, 33 insertions(+), 7 deletions(-) (limited to 'js/tools') diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js index 8301480d..43286122 100644 --- a/js/tools/EyedropperTool.js +++ b/js/tools/EyedropperTool.js @@ -50,6 +50,13 @@ exports.EyedropperTool = Montage.create(toolBase, { { this._isMouseDown = false; this._escape = false; + this._elementUnderMouse = null; + if(this._imageDataCanvas) + { + this.application.ninja.stage.element.removeChild(this._imageDataCanvas); + this._imageDataCanvas = null; + this._imageDataContext = null; + } } if(this._isMouseDown) { @@ -71,6 +78,14 @@ exports.EyedropperTool = Montage.create(toolBase, { this._updateColor(this._color); this._color = null; + + this._elementUnderMouse = null; + if(this._imageDataCanvas) + { + this.application.ninja.stage.element.removeChild(this._imageDataCanvas); + this._imageDataCanvas = null; + this._imageDataContext = null; + } } } }, @@ -116,8 +131,12 @@ exports.EyedropperTool = Montage.create(toolBase, { } else if (obj.elementModel.type === "CANVAS") { - this._imageDataCanvas = null; - this._imageDataContext = null; + if(this._imageDataCanvas) + { + this.application.ninja.stage.element.removeChild(this._imageDataCanvas); + this._imageDataCanvas = null; + this._imageDataContext = null; + } var pt = webkitConvertPointFromPageToNode(obj, new WebKitPoint(event.pageX, event.pageY)), @@ -131,8 +150,12 @@ exports.EyedropperTool = Montage.create(toolBase, { } else { - this._imageDataCanvas = null; - this._imageDataContext = null; + if(this._imageDataCanvas) + { + this.application.ninja.stage.element.removeChild(this._imageDataCanvas); + this._imageDataCanvas = null; + this._imageDataContext = null; + } // TODO - figure out if user clicked on a border - for now, just get fill c = ElementsMediator.getColor(obj, this._isOverBackground(obj, event)); @@ -157,8 +180,12 @@ exports.EyedropperTool = Montage.create(toolBase, { else { this._elementUnderMouse = null; - this._imageDataCanvas = null; - this._imageDataContext = null; + if(this._imageDataCanvas) + { + this.application.ninja.stage.element.removeChild(this._imageDataCanvas); + this._imageDataCanvas = null; + this._imageDataContext = null; + } } } @@ -264,7 +291,6 @@ exports.EyedropperTool = Montage.create(toolBase, { this.application.ninja.stage.element.appendChild(this._imageDataCanvas); this._imageDataContext = this._imageDataCanvas.getContext("2d"); -// this._imageDataContext.drawImage(elt, eltCoords[0], eltCoords[1]); this._imageDataContext.drawImage(elt, 0, 0); } -- cgit v1.2.3 From a69c929602e64f10fb3903b89a2ca9e9ed2c8dfb Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 22 Feb 2012 10:33:25 -0800 Subject: Fixing eyedropper tool to get color from image data. This required us to workaround having inconsistent color object. Signed-off-by: Nivesh Rajbhandari --- js/tools/EyedropperTool.js | 97 +++++++++++++++++++++++++--------------------- 1 file changed, 52 insertions(+), 45 deletions(-) (limited to 'js/tools') diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js index 43286122..d007da39 100755 --- a/js/tools/EyedropperTool.js +++ b/js/tools/EyedropperTool.js @@ -51,12 +51,7 @@ exports.EyedropperTool = Montage.create(toolBase, { this._isMouseDown = false; this._escape = false; this._elementUnderMouse = null; - if(this._imageDataCanvas) - { - this.application.ninja.stage.element.removeChild(this._imageDataCanvas); - this._imageDataCanvas = null; - this._imageDataContext = null; - } + this._deleteImageDataCanvas(); } if(this._isMouseDown) { @@ -80,12 +75,7 @@ exports.EyedropperTool = Montage.create(toolBase, { this._color = null; this._elementUnderMouse = null; - if(this._imageDataCanvas) - { - this.application.ninja.stage.element.removeChild(this._imageDataCanvas); - this._imageDataCanvas = null; - this._imageDataContext = null; - } + this._deleteImageDataCanvas(); } } }, @@ -119,9 +109,15 @@ exports.EyedropperTool = Montage.create(toolBase, { obj = this.application.ninja.stage.GetElement(event); if (obj) { + if(this.application.ninja.currentDocument.inExclusion(obj) !== -1) + { + this._elementUnderMouse = null; + this._deleteImageDataCanvas(); + return; + } this._elementUnderMouse = obj; // Depending on the object type, we need to get different colors - if(obj.elementModel.type === "IMG") + if(obj.elementModel.selection === "image") { c = this._getColorAtPoint(obj, event); if(c) @@ -129,14 +125,9 @@ exports.EyedropperTool = Montage.create(toolBase, { color = this.application.ninja.colorController.getColorObjFromCss(c); } } - else if (obj.elementModel.type === "CANVAS") + else if (obj.elementModel.selection === "canvas") { - if(this._imageDataCanvas) - { - this.application.ninja.stage.element.removeChild(this._imageDataCanvas); - this._imageDataCanvas = null; - this._imageDataContext = null; - } + this._deleteImageDataCanvas(); var pt = webkitConvertPointFromPageToNode(obj, new WebKitPoint(event.pageX, event.pageY)), @@ -150,14 +141,8 @@ exports.EyedropperTool = Montage.create(toolBase, { } else { - if(this._imageDataCanvas) - { - this.application.ninja.stage.element.removeChild(this._imageDataCanvas); - this._imageDataCanvas = null; - this._imageDataContext = null; - } + this._deleteImageDataCanvas(); - // TODO - figure out if user clicked on a border - for now, just get fill c = ElementsMediator.getColor(obj, this._isOverBackground(obj, event)); if(c) { @@ -180,12 +165,7 @@ exports.EyedropperTool = Montage.create(toolBase, { else { this._elementUnderMouse = null; - if(this._imageDataCanvas) - { - this.application.ninja.stage.element.removeChild(this._imageDataCanvas); - this._imageDataCanvas = null; - this._imageDataContext = null; - } + this._deleteImageDataCanvas(); } } @@ -273,38 +253,44 @@ exports.EyedropperTool = Montage.create(toolBase, { _getColorAtPoint: { value: function(elt, event) { - var imageData; if(!this._imageDataCanvas) { this._imageDataCanvas = document.createElement("canvas"); - this._imageDataCanvas.style.display = "block"; - this._imageDataCanvas.style.position = "absolute"; - var eltCoords = this.application.ninja.stage.toViewportCoordinates(elt.offsetLeft, elt.offsetTop); + this._applyElementStyles(elt, this._imageDataCanvas, ["display", "position", "width", "height", + "-webkit-transform", "-webkit-transform-style"]); + + var l = this.application.ninja.elementMediator.getProperty(elt, "left", parseInt), + t = this.application.ninja.elementMediator.getProperty(elt, "top", parseInt), + w = this.application.ninja.elementMediator.getProperty(elt, "width", parseInt), + h = this.application.ninja.elementMediator.getProperty(elt, "height", parseInt); + + var eltCoords = this.application.ninja.stage.toViewportCoordinates(l, t); this._imageDataCanvas.style.left = eltCoords[0] + "px"; this._imageDataCanvas.style.top = eltCoords[1] + "px"; - this._imageDataCanvas.style.width = elt.offsetWidth + "px"; - this._imageDataCanvas.style.height = elt.offsetHeight + "px"; - this._imageDataCanvas.width = elt.offsetWidth; - this._imageDataCanvas.height = elt.offsetHeight; + this._imageDataCanvas.width = w; + this._imageDataCanvas.height = h; - this.application.ninja.stage.element.appendChild(this._imageDataCanvas); +// this.application.ninja.currentDocument.documentRoot.appendChild(this._imageDataCanvas); this._imageDataContext = this._imageDataCanvas.getContext("2d"); this._imageDataContext.drawImage(elt, 0, 0); } - var pt = webkitConvertPointFromPageToNode(this._imageDataCanvas, + var pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)); - return this._getColorFromCanvas(this._imageDataContext, pt); + var tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); + + return this._getColorFromCanvas(this._imageDataContext, tmpPt); } }, _getColorFromCanvas: { value: function(ctx, pt) { - var imageData = ctx.getImageData(pt.x, pt.y, 1, 1).data; +// var imageData = ctx.getImageData(pt.x, pt.y, 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] + ")"); @@ -314,6 +300,27 @@ exports.EyedropperTool = Montage.create(toolBase, { return null; } } + }, + + _deleteImageDataCanvas : { + value: function() + { + if(this._imageDataCanvas) + { +// this.application.ninja.currentDocument.documentRoot.removeChild(this._imageDataCanvas); + this._imageDataCanvas = null; + this._imageDataContext = null; + } + } + }, + + _applyElementStyles : { + value: function(fromElement, toElement, styles) { + styles.forEach(function(style) { + var styleCamelCase = style.replace(/(\-[a-z])/g, function($1){return $1.toUpperCase().replace('-','');}); + toElement.style[styleCamelCase] = window.getComputedStyle(fromElement)[style]; + }, this); + } } }); \ No newline at end of file -- cgit v1.2.3 From 75bca514358ed90b8b4274bafed9422c82695776 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 22 Feb 2012 11:58:45 -0800 Subject: Integrating Zoom tool fixes. Signed-off-by: Nivesh Rajbhandari --- js/tools/RotateStage3DTool.js | 7 ++++++- js/tools/ZoomTool.js | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) (limited to 'js/tools') diff --git a/js/tools/RotateStage3DTool.js b/js/tools/RotateStage3DTool.js index ca2a8bf3..2b312e53 100755 --- a/js/tools/RotateStage3DTool.js +++ b/js/tools/RotateStage3DTool.js @@ -131,9 +131,14 @@ exports.RotateStage3DTool = Montage.create(Rotate3DToolBase, { var iMat = Matrix.I(4); ElementsMediator.setMatrix(this.application.ninja.currentDocument.documentRoot, iMat, false); - this.application.ninja.currentDocument.documentRoot.elementModel.props3D.m_transformCtr = null; + // let the document and stage manager know about the zoom change + this.application.ninja.stage._firstDraw = true; + this.application.ninja.documentBar.zoomFactor = 100; + this.application.ninja.currentDocument.iframe.style.zoom = 1.0; + this.application.ninja.stage._firstDraw = false; + // TODO - Any updates to the stage should redraw stage's children. Move this to mediator? this.application.ninja.stage.updatedStage = true; diff --git a/js/tools/ZoomTool.js b/js/tools/ZoomTool.js index 4b6705c1..93caf984 100755 --- a/js/tools/ZoomTool.js +++ b/js/tools/ZoomTool.js @@ -146,7 +146,7 @@ exports.ZoomTool = Montage.create(DrawingTool, { var dx = Math.abs(point.x - this.downPoint.x), dy = Math.abs(point.y - this.downPoint.y); - if ((dx >= 4) || (dy >= 4)) + if ((dx >= 10) || (dy >= 10)) { // Drawing the Marquee if(this.options.selectedElement==="zoomInTool") -- cgit v1.2.3