From 8dd707776024ff067064e7841810d04f2f7a1df7 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 24 Feb 2012 11:55:15 -0800 Subject: Adjusting fill and ink bottle cursors to match the tips of the icons. Signed-off-by: Nivesh Rajbhandari --- js/tools/FillTool.js | 4 ++-- js/tools/InkBottleTool.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'js/tools') diff --git a/js/tools/FillTool.js b/js/tools/FillTool.js index 46d76a19..4b07ae83 100755 --- a/js/tools/FillTool.js +++ b/js/tools/FillTool.js @@ -22,14 +22,14 @@ exports.FillTool = Montage.create(ModifierToolBase, { value : function (event) { var obj = this.application.ninja.stage.GetElement(event); - var cursor = "url('images/cursors/fill.png') 17 12, default"; + var cursor = "url('images/cursors/fill.png') 14 14, default"; var canColor = true; if (obj) { var name = obj.nodeName; if ((name !== 'CANVAS') && (name !== 'DIV')) { - cursor = "url('images/cursors/nofill.png') 17 12, default"; + cursor = "url('images/cursors/nofill.png') 14 14, default"; canColor = false; } } diff --git a/js/tools/InkBottleTool.js b/js/tools/InkBottleTool.js index 2be74ada..8340ef50 100755 --- a/js/tools/InkBottleTool.js +++ b/js/tools/InkBottleTool.js @@ -16,14 +16,14 @@ exports.InkBottleTool = Montage.create(ModifierToolBase, { value : function (event) { var obj = this.application.ninja.stage.GetElement(event); - var cursor = "url('images/cursors/ink.png') 17 12, default"; + var cursor = "url('images/cursors/ink.png') 6 11, default"; var canColor = true; if (obj) { var name = obj.nodeName; if ((name !== 'CANVAS') && (name !== 'DIV')) { - cursor = "url('images/cursors/ink_no.png') 17 12, default"; + cursor = "url('images/cursors/ink_no.png') 6 11, default"; canColor = false; } } -- cgit v1.2.3 From 818ec3b66d4394d80fcffbfcee82b40fe1477319 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 24 Feb 2012 11:56:42 -0800 Subject: Distinguish between border top/right/bottom/left colors. Also, fall back to snapping routine when selecting only if the active tool allows snapping. Signed-off-by: Nivesh Rajbhandari --- js/tools/EyedropperTool.js | 81 ++++++++++++++++++++++++++++------------------ 1 file changed, 49 insertions(+), 32 deletions(-) (limited to 'js/tools') diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js index d007da39..710c96ef 100755 --- a/js/tools/EyedropperTool.js +++ b/js/tools/EyedropperTool.js @@ -18,6 +18,7 @@ exports.EyedropperTool = Montage.create(toolBase, { _elementUnderMouse: { value: null }, _imageDataCanvas: { value: null }, _imageDataContext: { value: null }, + _canSnap: { value: false }, Configure: { value: function ( doActivate ) @@ -143,10 +144,14 @@ exports.EyedropperTool = Montage.create(toolBase, { { this._deleteImageDataCanvas(); - c = ElementsMediator.getColor(obj, this._isOverBackground(obj, event)); - if(c) + c = this._getColorFromElement(obj, event); + if(typeof(c) === "string") + { + color = this.application.ninja.colorController.getColorObjFromCss(c); + } + else { - color = this.application.ninja.colorController.getColorObjFromCss(c.color.css); + color = c; } } @@ -202,51 +207,63 @@ exports.EyedropperTool = Montage.create(toolBase, { }, // TODO - We don't want to calculate this repeatedly - _isOverBackground: { + _getColorFromElement: { value: function(elt, event) { - var border = ElementsMediator.getProperty(elt, "border", parseFloat); - + var border = ElementsMediator.getProperty(elt, "border"), + borderWidth, + bounds3D, + innerBounds, + pt, + bt, + br, + bb, + bl, + xAdj, + yAdj, + tmpPt, + x, + y; 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); + innerBounds = []; + pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, + new WebKitPoint(event.pageX, event.pageY)); + borderWidth = parseFloat(border); + if(isNaN(borderWidth)) + { + 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); + borderWidth = 0; + } + xAdj = bl || borderWidth; + yAdj = bt || borderWidth; - var xAdj = bl || border, - yAdj = bt || border; innerBounds.push([bounds3D[0][0] + xAdj, bounds3D[0][1] + yAdj, 0]); - yAdj += bb || border; + yAdj = bb || borderWidth; innerBounds.push([bounds3D[1][0] + xAdj, bounds3D[1][1] - yAdj, 0]); - xAdj += br || border; + xAdj = br || borderWidth; innerBounds.push([bounds3D[2][0] - xAdj, bounds3D[2][1] - yAdj, 0]); - yAdj = bt || border; + yAdj = bt || borderWidth; 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]; + tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt); + 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; + 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"); } - return true; + + return ElementsMediator.getColor(elt, true); } }, -- cgit v1.2.3 From 9ef05a0e137d3d38e9a6b5d94851227440ac0fbc Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 24 Feb 2012 16:48:14 -0800 Subject: Moved all color updating routines to a single function. Signed-off-by: Nivesh Rajbhandari --- js/tools/EyedropperTool.js | 110 ++++++++++++++++++++++++++------------------- 1 file changed, 64 insertions(+), 46 deletions(-) (limited to 'js/tools') diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js index 710c96ef..11c15158 100755 --- a/js/tools/EyedropperTool.js +++ b/js/tools/EyedropperTool.js @@ -71,7 +71,7 @@ exports.EyedropperTool = Montage.create(toolBase, { this._escape = false; } - this._updateColor(this._color); + this._updateColor(this._color, true); this._color = null; @@ -86,18 +86,7 @@ exports.EyedropperTool = Montage.create(toolBase, { if(this._color && this._color.value) { var color = this.application.ninja.colorController.getColorObjFromCss(this._previousColor); - - if (color && color.value) { - color.value.wasSetByCode = true; - color.value.type = 'change'; - if (color.value.a) { - this.application.ninja.colorController.colorModel.alpha = {value: color.value.a, - wasSetByCode: true, - type: 'change'}; - } - this.application.ninja.colorController.colorModel[color.mode] = color.value; - this._color = null; - } + this._updateColor(color, true); } this._escape = true; } @@ -151,21 +140,11 @@ exports.EyedropperTool = Montage.create(toolBase, { } else { - color = 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; - } + this._updateColor(color, false); } else { @@ -177,32 +156,75 @@ exports.EyedropperTool = Montage.create(toolBase, { }, _updateColor: { - value: function(color) { - if (color && color.value) { - var input = this.application.ninja.colorController.colorModel.input; + value: function(color, updateColorToolBar) { + var eventType = "changing"; + if(updateColorToolBar) + { + eventType = "change"; + if (color && color.value) + { + var input = this.application.ninja.colorController.colorModel.input; + + if(input === "fill") + { + this.application.ninja.colorController.colorToolbar.fill_btn.color(color.mode, color.value); + } + else + { + this.application.ninja.colorController.colorToolbar.stroke_btn.color(color.mode, color.value); + } + + // Updating color chips will set the input type to "chip", so set it back here. + this.application.ninja.colorController.colorModel.input = input; + } + } + + if(color) + { + if(color.color) + { + color.color.wasSetByCode = true; + color.color.type = eventType; + } - if(input === "fill") + if(color.mode === "gradient") { - this.application.ninja.colorController.colorToolbar.fill_btn.color(color.mode, color.value); + this.application.ninja.colorController.colorModel["gradient"] = + {value: color.color, wasSetByCode: true, type: eventType}; } else { - this.application.ninja.colorController.colorToolbar.stroke_btn.color(color.mode, color.value); + if (color.color.a !== undefined) + { + this.application.ninja.colorController.colorModel.alpha = + {value: color.color.a, wasSetByCode: true, type: eventType}; + } + if(color.color.mode) + { + this.application.ninja.colorController.colorModel[color.color.mode] = color.color; + } + else + { + this.application.ninja.colorController.colorModel["rgb"] = color.color; + } } - // Updating color chips will set the input type to "chip", so set it back here. - this.application.ninja.colorController.colorModel.input = input; - - color.value.wasSetByCode = true; - color.value.type = 'change'; - if (color.value.a) { - this.application.ninja.colorController.colorModel.alpha = {value: color.value.a, - wasSetByCode: true, - type: 'change'}; + if(updateColorToolBar) + { + this._previousColor = color.color.css; } - this.application.ninja.colorController.colorModel[color.mode] = color.value; - this._previousColor = color.value.css; } + else + { + this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: eventType}; + this.application.ninja.colorController.colorModel.applyNoColor(); + if(updateColorToolBar) + { + this._previousColor = "none"; + } + } + + this._color = color; } }, @@ -288,8 +310,6 @@ exports.EyedropperTool = Montage.create(toolBase, { this._imageDataCanvas.width = w; this._imageDataCanvas.height = h; -// this.application.ninja.currentDocument.documentRoot.appendChild(this._imageDataCanvas); - this._imageDataContext = this._imageDataCanvas.getContext("2d"); this._imageDataContext.drawImage(elt, 0, 0); } @@ -306,7 +326,6 @@ exports.EyedropperTool = Montage.create(toolBase, { _getColorFromCanvas: { value: function(ctx, pt) { -// var imageData = ctx.getImageData(pt.x, pt.y, 1, 1).data; var imageData = ctx.getImageData(pt[0], pt[1], 1, 1).data; if(imageData) { @@ -324,7 +343,6 @@ exports.EyedropperTool = Montage.create(toolBase, { { if(this._imageDataCanvas) { -// this.application.ninja.currentDocument.documentRoot.removeChild(this._imageDataCanvas); this._imageDataCanvas = null; this._imageDataContext = null; } -- cgit v1.2.3