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/controllers/elements/element-controller.js | 13 ++++++++++ js/controllers/elements/shapes-controller.js | 8 ++++++ js/tools/FillTool.js | 3 +-- js/tools/InkBottleTool.js | 35 ++++++++++++++++++--------- 4 files changed, 46 insertions(+), 13 deletions(-) diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index 65d26bdd..5eb75613 100644 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -115,6 +115,7 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, } else { + // TODO - Need to update border style and width also el.elementModel.stroke = colorObj; } @@ -159,10 +160,22 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, case 'gradient': this.setProperty(el, "border-image", color.color.css); this.setProperty(el, "border-color", "none"); + if(color.borderInfo) + { + this.setProperty(el, "border-width", color.borderInfo.borderWidth + + color.borderInfo.borderUnits); + this.setProperty(el, "border-style", color.borderInfo.borderStyle); + } break; default: this.setProperty(el, "border-image", "none"); this.setProperty(el, "border-color", color.color.css); + if(color.borderInfo) + { + this.setProperty(el, "border-width", color.borderInfo.borderWidth + + color.borderInfo.borderUnits); + this.setProperty(el, "border-style", color.borderInfo.borderStyle); + } } } el.elementModel.stroke = color; diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 640119c4..42c2528f 100644 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -260,6 +260,14 @@ exports.ShapesController = Montage.create(CanvasController, { el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl); this.setShapeProperty(el, "stroke", webGl); this.setShapeProperty(el, "border", color); + if(color.strokeInfo) + { + var strokeWidth = this.GetValueInPixels(color.strokeInfo.strokeSize, + color.strokeInfo.strokeUnits); + el.elementModel.shapeModel.GLGeomObj.setStrokeWidth(strokeWidth); + this.setShapeProperty(el, "strokeSize", color.strokeInfo.strokeSize + " " + + color.strokeInfo.strokeUnits); + } } el.elementModel.shapeModel.GLWorld.render(); } 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(-) 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 c0ab12c07d18149e3704d3e5f66aee43c13b7fd0 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 13 Feb 2012 11:57:04 -0800 Subject: Working around inconsistent color object when getting/setting WebGL values. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 42c2528f..8953f155 100644 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -249,6 +249,10 @@ exports.ShapesController = Montage.create(CanvasController, { setColor: { value: function(el, color, isFill) { var webGl = color.webGlColor || color.color.webGlColor; + if(!webGl) + { + webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); + } if(isFill) { el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); -- 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(-) 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(-) 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(-) 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/data/tools-data.js | 2 +- js/tools/EyedropperTool.js | 40 +++++++++++++++++++++++++++++++++------- 2 files changed, 34 insertions(+), 8 deletions(-) diff --git a/js/data/tools-data.js b/js/data/tools-data.js index de965dbc..f63d14ae 100644 --- a/js/data/tools-data.js +++ b/js/data/tools-data.js @@ -174,7 +174,7 @@ exports.ToolsData = Montage.create(Montage, { "spriteSheet": true, "action": "EyedropperTool", "toolTip": "Eyedropper Tool", - "cursor": "url('images/tools/eyedropper_down.png'), default", + "cursor": "url('images/tools/eyedropper_down.png') 6 20, default", "lastInGroup": false, "container": false, "selected": false 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 e80a79bff57fecf3aa9b869d8ed2de5fd815287c Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 14 Feb 2012 14:37:42 -0800 Subject: Fix for not being able to select an element in Top/Side view. Fall back to use SnapManager code if elementFromPoint returns the viewport. Signed-off-by: Nivesh Rajbhandari --- js/stage/stage.reel/stage.js | 31 ++++++++++++++++++++++++++++--- 1 file changed, 28 insertions(+), 3 deletions(-) diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 6d9a7355..9cf97e09 100644 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -510,12 +510,37 @@ exports.Stage = Montage.create(Component, { */ GetElement: { value: function(pos) { - var point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(pos.pageX, pos.pageY)); - return this.application.ninja.currentDocument.GetElementFromPoint(point.x + this.scrollLeft,point.y + this.scrollTop); + var point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(pos.pageX, pos.pageY)), + elt = this.application.ninja.currentDocument.GetElementFromPoint(point.x + this.scrollLeft,point.y + this.scrollTop); + + // workaround Chrome 3d bug + if(elt === this._viewport) + { + return this._getElementUsingSnapping(point); + } else { + return elt; + } } }, - + /** + * _getElementUsingSnapping: Returns the object at point using snap manager + * + * @param: point + * @return: Returns the Object in the user document under the point + */ + _getElementUsingSnapping: { + value: function(point) { + this.stageDeps.snapManager.enableElementSnap( true ); + var hitRec = this.stageDeps.snapManager.snap(point.x, point.y, true); + this.stageDeps.snapManager.enableElementSnap( this.stageDeps.snapManager.elementSnapEnabledAppLevel() ); + if (hitRec) { + return hitRec.getElement(); + } else { + return null; + } + } + }, draw: { -- cgit v1.2.3 From bb4da39a73cbd6fbe83f3b7c9ed5ae60fe58dd6b Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 15 Feb 2012 14:23:19 -0800 Subject: Tool Icons : New layout Signed-off-by: Armen Kesablyan --- css/ninja.css | 179 ++- images/tools/Tool-3DRotate.png | Bin 0 -> 1484 bytes images/tools/Tool-3DRotateStage.png | Bin 0 -> 1477 bytes images/tools/Tool-3DTranslate.png | Bin 0 -> 1474 bytes images/tools/Tool-3DTranslateStage.png | Bin 0 -> 1454 bytes images/tools/Tool-Erase.png | Bin 0 -> 1421 bytes images/tools/Tool-EyeDropper.png | Bin 0 -> 1314 bytes images/tools/Tool-Fill.png | Bin 0 -> 1394 bytes images/tools/Tool-FillColor.png | Bin 0 -> 1111 bytes images/tools/Tool-PaintBrush.png | Bin 0 -> 1293 bytes images/tools/Tool-Pan.png | Bin 0 -> 1723 bytes images/tools/Tool-Pen.png | Bin 0 -> 1298 bytes images/tools/Tool-Pencil.png | Bin 0 -> 1230 bytes images/tools/Tool-Rectangle.png | Bin 0 -> 1179 bytes images/tools/Tool-Selection.png | Bin 0 -> 1289 bytes images/tools/Tool-Stroke.png | Bin 0 -> 1117 bytes images/tools/Tool-Subselect.png | Bin 0 -> 1227 bytes images/tools/Tool-Tag.png | Bin 0 -> 1197 bytes images/tools/Tool-Text.png | Bin 0 -> 1142 bytes images/tools/Tool-Zoom.png | Bin 0 -> 1362 bytes .../layout/tool-button.reel/tool-button.html | 7 +- .../layout/tool-button.reel/tool-button.js | 21 +- .../layout/tools-list.reel/tools-list.html | 17 +- js/data/tools-data.js | 66 +- .../ninja.scssc | Bin 0 -> 4467 bytes .../_colors.scssc | Bin 0 -> 17819 bytes .../_fonts.scssc | Bin 0 -> 1872 bytes .../_mixins.scssc | Bin 0 -> 4555 bytes .../_Base.scssc | Bin 0 -> 25106 bytes .../_Components.scssc | Bin 0 -> 3384 bytes .../_MainWindow.scssc | 426 +++++ .../_MenuUI.scssc | Bin 0 -> 6093 bytes .../_MontageOverrides.scssc | Bin 0 -> 2665 bytes .../_PanelUI.scssc | 1638 ++++++++++++++++++++ .../_ScrollBars.scssc | Bin 0 -> 14691 bytes .../_Stage.scssc | Bin 0 -> 13754 bytes .../_Tools.scssc | 592 +++++++ .../_UserContent.scssc | Bin 0 -> 2196 bytes .../_mixins.scssc | Bin 0 -> 2734 bytes .../_toolbar.scssc | Bin 0 -> 15338 bytes scss/compass_app_log.txt | 16 + scss/imports/scss/_Tools.scss | 24 - scss/imports/scss/_toolbar.scss | 328 ++-- scss/ninja.scss | 1 + 44 files changed, 2956 insertions(+), 359 deletions(-) create mode 100644 images/tools/Tool-3DRotate.png create mode 100644 images/tools/Tool-3DRotateStage.png create mode 100644 images/tools/Tool-3DTranslate.png create mode 100644 images/tools/Tool-3DTranslateStage.png create mode 100644 images/tools/Tool-Erase.png create mode 100644 images/tools/Tool-EyeDropper.png create mode 100644 images/tools/Tool-Fill.png create mode 100644 images/tools/Tool-FillColor.png create mode 100644 images/tools/Tool-PaintBrush.png create mode 100644 images/tools/Tool-Pan.png create mode 100644 images/tools/Tool-Pen.png create mode 100644 images/tools/Tool-Pencil.png create mode 100644 images/tools/Tool-Rectangle.png create mode 100644 images/tools/Tool-Selection.png create mode 100644 images/tools/Tool-Stroke.png create mode 100644 images/tools/Tool-Subselect.png create mode 100644 images/tools/Tool-Tag.png create mode 100644 images/tools/Tool-Text.png create mode 100644 images/tools/Tool-Zoom.png create mode 100644 scss/.sass-cache/5fc5391a1d3f0cc8c82108187482ad8e2d9a4dfd/ninja.scssc create mode 100644 scss/.sass-cache/a47e87879ba03b17bf638aaaf0d186d50bf1ca11/_colors.scssc create mode 100644 scss/.sass-cache/a47e87879ba03b17bf638aaaf0d186d50bf1ca11/_fonts.scssc create mode 100644 scss/.sass-cache/a47e87879ba03b17bf638aaaf0d186d50bf1ca11/_mixins.scssc create mode 100644 scss/.sass-cache/bf7669b9251ffa007260472c0d41aebd1dfdcf8a/_Base.scssc create mode 100644 scss/.sass-cache/bf7669b9251ffa007260472c0d41aebd1dfdcf8a/_Components.scssc create mode 100644 scss/.sass-cache/bf7669b9251ffa007260472c0d41aebd1dfdcf8a/_MainWindow.scssc create mode 100644 scss/.sass-cache/bf7669b9251ffa007260472c0d41aebd1dfdcf8a/_MenuUI.scssc create mode 100644 scss/.sass-cache/bf7669b9251ffa007260472c0d41aebd1dfdcf8a/_MontageOverrides.scssc create mode 100644 scss/.sass-cache/bf7669b9251ffa007260472c0d41aebd1dfdcf8a/_PanelUI.scssc create mode 100644 scss/.sass-cache/bf7669b9251ffa007260472c0d41aebd1dfdcf8a/_ScrollBars.scssc create mode 100644 scss/.sass-cache/bf7669b9251ffa007260472c0d41aebd1dfdcf8a/_Stage.scssc create mode 100644 scss/.sass-cache/bf7669b9251ffa007260472c0d41aebd1dfdcf8a/_Tools.scssc create mode 100644 scss/.sass-cache/bf7669b9251ffa007260472c0d41aebd1dfdcf8a/_UserContent.scssc create mode 100644 scss/.sass-cache/bf7669b9251ffa007260472c0d41aebd1dfdcf8a/_mixins.scssc create mode 100644 scss/.sass-cache/bf7669b9251ffa007260472c0d41aebd1dfdcf8a/_toolbar.scssc create mode 100644 scss/compass_app_log.txt diff --git a/css/ninja.css b/css/ninja.css index 934bd60b..20fa85f5 100644 --- a/css/ninja.css +++ b/css/ninja.css @@ -210,10 +210,6 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co #mainContent .CodeMirror-scroll { height: 100%; overflow: scroll; overflow-x: auto; overflow-y: auto; } -.montage-editor-frame { position: absolute; z-index: 7; top: 0; left: 0; display: none; -webkit-user-select: initial; } - -.montage-editor { padding: 0px; word-wrap: normal; } - .panelContainer { margin: 0px; padding: 0px 0px; position: relative; overflow: auto; } .panelDisclosureIcon { background-image: url("../images/panels/panelDisclosureIcon.png"); background-repeat: no-repeat; width: 16px; height: 16px; float: left; -webkit-transition-property: rotate; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: linear; padding-right: 2px; } @@ -670,16 +666,10 @@ nav.menuBar ul ul, nav.menuBar ul li:hover ul ul, nav.menuBar ul ul li:hover ul nav.menuBar ul li:hover ul, nav.menuBar ul ul li:hover ul, nav.menuBar ul ul ul li:hover ul { display: block; } -.toolButton { width: 26px; height: 23px; padding: 0px; margin: 1px; border-width: 1px; border-style: solid; } - .subToolButton { float: left; } .subOption { float: left; margin-top: 5px; margin-left: 10px; margin-right: 10px; } -.toolButton:active { border-top-width: 1px; border-top-style: solid; border-left-width: 1px; border-left-style: solid; } - -.toolButtonSelected { border-top-width: 1px; border-top-style: solid; border-left-width: 1px; border-left-style: solid; } - .toolSeparator { height: 1px; width: 30px; } .toolSeparatorTop { margin-top: 3px; margin-bottom: 0px; } @@ -816,118 +806,123 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1 #zoomToolOptionHolder input.zoom-option { background: none; } -.SelectionToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -360px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; } - -.SelectionToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -390px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; } - -.SubselectionToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -420px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; } - -.SubselectionToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -450px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; } - -.RotateTool3DPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: 0px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; } - -.RotateTool3DUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -30px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; } - -.Translate3DPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -120px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; } - -.Translate3DUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -150px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; } - -.TagToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: 0px -54px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; } - -.TagToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -30px -54px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; } - -.PenToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -180px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; } - -.PenToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -210px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; } - -.TextToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -60px -54px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; } - -.TextToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -90px -54px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; } - -.ShapeContainerPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -120px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; } - -.ShapeContainerUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -150px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; } - -.OvalToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -120px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; } - -.OvalToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -150px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; } - -.RectangleToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -300px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; } - -.RectangleToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -330px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; } - -.LineToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -60px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; } - -.LineToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -90px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; } - -.PencilToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -240px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; } - -.PencilToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -270px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; } - -.BrushToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -240px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; } - -.BrushToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -270px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; } - -.FillToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -300px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; } +#toolsPanelContent { width: 40px; } -.FillToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -330px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; } +.toolsList { width: 30px; margin: auto; } -.EyedropperToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -420px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; } +.toolsList hr { border: 0px; border-top: 1px solid #232323; border-bottom: 1px solid #3A3A3A; margin: 2px; } -.EyedropperToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -450px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; } +.toolbutton { width: 30px; height: 30px; background-position: center center; background-repeat: no-repeat; -webkit-border-radius: 4px; opacity: 0.6; margin-bottom: 2px; } -.EraserToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -360px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; } +.toolsList .toolbutton:hover, .toolsList .active { box-shadow: inset 0px 0px 8px #999; opacity: 1; } -.EraserToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -390px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; } +.toolsList .active { background-color: #555; } -.RotateStageTool3DPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -60px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; } +.SelectionTool { background-image: url("../images/tools/Tool-Selection.png"); } -.RotateStageTool3DUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -90px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; } +.SubselectionTool { background-image: url("../images/tools/Tool-Subselect.png"); } -.TranslateStageTool3DPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -180px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; } +.RotateTool3D { background-image: url("../images/tools/Tool-3DRotate.png"); } -.TranslateStageTool3DUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -210px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; } +.Translate3D { background-image: url("../images/tools/Tool-3DTranslate.png"); } -.PanToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: 0px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; } +.TagTool { background-image: url("../images/tools/Tool-Tag.png"); } -.PanToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -30px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; } +.PenTool { background-image: url("../images/tools/Tool-Pen.png"); } -.ZoomToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -180px -54px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; } +.TextTool { background-image: url("../images/tools/Tool-Text.png"); } -.ZoomToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -210px -54px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; } +.ShapeContainer { background-image: url("../images/tools/Tool-Rectangle.png"); } -.InkBottleToolPressed { background-image: url("../images/tools/inkbottle_down.png"); background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; } +.OvalTool { background-image: url("../images/tools/Tool-Oval.png"); } -.InkBottleToolUnpressed { background-image: url("../images/tools/inkbottle_down.png"); background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; } +.RectangleTool { background-image: url("../images/tools/Tool-Rectangle.png"); } -.topAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -240px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } +.LineTool { background-image: url("../images/tools/Tool-Stroke.png"); } -.rightAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -270px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } +.PencilTool { background-image: url("../images/tools/Tool-Pencil.png"); } -.bottomAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -300px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } +.BrushTool { background-image: url("../images/tools/Tool-PaintBrush.png"); } -.verticalLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -330px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } +.FillTool { background-image: url("../images/tools/Tool-Fill.png"); } -.verticalCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -360px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } +.EyedropperTool { background-image: url("../images/tools/Tool-EyeDropper.png"); } -.verticalRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -390px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } +.EraserTool { background-image: url("../images/tools/Tool-Erase.png"); } -.distRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: 0px -81px; background-repeat: no-repeat; height: 23px; width: 26px; } +.RotateStageTool3D { background-image: url("../images/tools/Tool-3DRotateStage.png"); } -.distLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -420px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } +.TranslateStageTool3D { background-image: url("../images/tools/Tool-3DTranslateStage.png"); } -.distCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -60px -81px; background-repeat: no-repeat; height: 23px; width: 26px; } +.PanTool { background-image: url("../images/tools/Tool-Pan.png"); } -.distTopUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -30px -81px; background-repeat: no-repeat; height: 23px; width: 26px; } +.ZoomTool { background-image: url("../images/tools/Tool-Zoom.png"); } -.distBottomUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -90px -81px; background-repeat: no-repeat; height: 23px; width: 26px; } +.InkBottleTool { background-image: url("../images/tools/Tool-FillColor.png"); } -.distVCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -450px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } +.toolsList .colortoolbar button { width: 27px; height: 27px; background: black; border: 1px solid #000; padding: 0; margin: 0px; } -.bucketToolUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -330px 0px; background-repeat: no-repeat; height: 23px; width: 26px; } +.toolsList .colortoolbar div { width: 27px; height: 27px; margin: 0; } -.pencilToolUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -270px -27px; background-repeat: no-repeat; height: 23px; width: 26px; } +.toolsList .colortoolbar div.cpe_colortoolbar_container { margin: 0; } +/*.InkBottleToolPressed {*/ +/*background-image: url("../images/tools/inkbottle_down.png");*/ +/*background-repeat: no-repeat;*/ +/*height: 23px;*/ +/*width: 26px;*/ +/*opacity: 1;*/ +/*}*/ +/*.InkBottleToolUnpressed {*/ +/*background-image: url("../images/tools/inkbottle_down.png");*/ +/*background-repeat: no-repeat;*/ +/*height: 23px;*/ +/*width: 26px;*/ +/*opacity: 0.7;*/ +/*}*/ +/*// Selection Tool Options */ +/*.topAlignUp {*/ +/*@include background-pos(8,2,26px,23px);*/ +/*}*/ +/*.rightAlignUp {*/ +/*@include background-pos(9,2,26px,23px);*/ +/*}*/ +/*.bottomAlignUp {*/ +/*@include background-pos(10,2,26px,23px);*/ +/*}*/ +/*.verticalLeftUp {*/ +/*@include background-pos(11,2,26px,23px);*/ +/*}*/ +/*.verticalCenterUp {*/ +/*@include background-pos(12,2,26px,23px);*/ +/*}*/ +/*.verticalRightUp {*/ +/*@include background-pos(13,2,26px,23px);*/ +/*}*/ +/*.distRightUp {*/ +/*@include background-pos(0,3,26px,23px);*/ +/*}*/ +/*.distLeftUp {*/ +/*@include background-pos(14,2,26px,23px);*/ +/*}*/ +/*.distCenterUp {*/ +/*@include background-pos(2,3,26px,23px);*/ +/*}*/ +/*.distTopUp {*/ +/*@include background-pos(1,3,26px,23px);*/ +/*}*/ +/*.distBottomUp {*/ +/*@include background-pos(3,3,26px,23px);*/ +/*}*/ +/*.distVCenterUp {*/ +/*@include background-pos(15,2,26px,23px);*/ +/*}*/ +/*.bucketToolUp {*/ +/*@include background-pos(11,0,26px,23px);*/ +/*}*/ +/*.pencilToolUp {*/ +/*@include background-pos(9,1,26px,23px);*/ +/*}*/ .blueDiv { background: blue; opacity: 0.2; } ::-webkit-scrollbar { width: 11px; height: 11px; } diff --git a/images/tools/Tool-3DRotate.png b/images/tools/Tool-3DRotate.png new file mode 100644 index 00000000..e27c0904 Binary files /dev/null and b/images/tools/Tool-3DRotate.png differ diff --git a/images/tools/Tool-3DRotateStage.png b/images/tools/Tool-3DRotateStage.png new file mode 100644 index 00000000..1acfad15 Binary files /dev/null and b/images/tools/Tool-3DRotateStage.png differ diff --git a/images/tools/Tool-3DTranslate.png b/images/tools/Tool-3DTranslate.png new file mode 100644 index 00000000..4be2fe04 Binary files /dev/null and b/images/tools/Tool-3DTranslate.png differ diff --git a/images/tools/Tool-3DTranslateStage.png b/images/tools/Tool-3DTranslateStage.png new file mode 100644 index 00000000..b8cdee80 Binary files /dev/null and b/images/tools/Tool-3DTranslateStage.png differ diff --git a/images/tools/Tool-Erase.png b/images/tools/Tool-Erase.png new file mode 100644 index 00000000..d992e3a6 Binary files /dev/null and b/images/tools/Tool-Erase.png differ diff --git a/images/tools/Tool-EyeDropper.png b/images/tools/Tool-EyeDropper.png new file mode 100644 index 00000000..e73e0a79 Binary files /dev/null and b/images/tools/Tool-EyeDropper.png differ diff --git a/images/tools/Tool-Fill.png b/images/tools/Tool-Fill.png new file mode 100644 index 00000000..012d8d29 Binary files /dev/null and b/images/tools/Tool-Fill.png differ diff --git a/images/tools/Tool-FillColor.png b/images/tools/Tool-FillColor.png new file mode 100644 index 00000000..f0580ef9 Binary files /dev/null and b/images/tools/Tool-FillColor.png differ diff --git a/images/tools/Tool-PaintBrush.png b/images/tools/Tool-PaintBrush.png new file mode 100644 index 00000000..b1b296ad Binary files /dev/null and b/images/tools/Tool-PaintBrush.png differ diff --git a/images/tools/Tool-Pan.png b/images/tools/Tool-Pan.png new file mode 100644 index 00000000..948a6a4c Binary files /dev/null and b/images/tools/Tool-Pan.png differ diff --git a/images/tools/Tool-Pen.png b/images/tools/Tool-Pen.png new file mode 100644 index 00000000..8182e57f Binary files /dev/null and b/images/tools/Tool-Pen.png differ diff --git a/images/tools/Tool-Pencil.png b/images/tools/Tool-Pencil.png new file mode 100644 index 00000000..a3272193 Binary files /dev/null and b/images/tools/Tool-Pencil.png differ diff --git a/images/tools/Tool-Rectangle.png b/images/tools/Tool-Rectangle.png ne