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 5b7e903bb0f32d1d59620d1d800ff260f49bfa48 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 20 Feb 2012 15:03:27 -0800 Subject: Some more tweaks to not being able to select elements in top/side view. Signed-off-by: Nivesh Rajbhandari --- js/stage/stage.reel/stage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 6a8afad4..5734e317 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -522,7 +522,7 @@ exports.Stage = Montage.create(Component, { elt = this.application.ninja.currentDocument.GetElementFromPoint(point.x + this.scrollLeft,point.y + this.scrollTop); // workaround Chrome 3d bug - if(elt === this._viewport) + if(this.application.ninja.currentDocument.inExclusion(elt) !== -1) { return this._getElementUsingSnapping(point); } else { -- cgit v1.2.3 From d2f4d5e5f6742d53b6324d585a700566f73c992a Mon Sep 17 00:00:00 2001 From: mqg734 Date: Tue, 21 Feb 2012 16:49:11 -0800 Subject: Updated Materials Library and Materials Editor Popup to work with latest version of Montage. We had to change our css to not use id's. Also, updated the popup to use Montage's Popup component. It looks like bump material has a bug. So loading that material results in a runtime error. --- js/components/textfield.reel/textfield.html | 2 +- .../rect-properties.reel/rect-properties.css | 12 +- .../rect-properties.reel/rect-properties.html | 2 +- js/components/ui/color-chip.reel/color-chip.js | 20 +++- js/components/ui/file-input.reel/file-input.html | 6 +- js/components/ui/file-input.reel/file-input.js | 2 +- js/components/ui/input-group.reel/input-group.html | 10 +- .../ui/property-control.reel/property-control.html | 6 +- .../ui/property-control.reel/property-control.js | 27 +++-- .../materials-library-panel.html | 8 +- .../materials-library-panel.js | 121 ++++--------------- .../materials-popup.reel/materials-popup.css | 131 ++++----------------- .../materials-popup.reel/materials-popup.html | 18 +-- .../materials-popup.reel/materials-popup.js | 47 +++----- js/panels/properties/content.reel/content.js | 2 +- 15 files changed, 128 insertions(+), 286 deletions(-) diff --git a/js/components/textfield.reel/textfield.html b/js/components/textfield.reel/textfield.html index 89adf776..73defabd 100755 --- a/js/components/textfield.reel/textfield.html +++ b/js/components/textfield.reel/textfield.html @@ -19,6 +19,6 @@ - + \ No newline at end of file diff --git a/js/components/tools-properties/rect-properties.reel/rect-properties.css b/js/components/tools-properties/rect-properties.reel/rect-properties.css index f50a9873..6541f641 100755 --- a/js/components/tools-properties/rect-properties.reel/rect-properties.css +++ b/js/components/tools-properties/rect-properties.reel/rect-properties.css @@ -4,7 +4,7 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ -.button { +.rectProperties .button { border:none; cursor:default; text-align:center; @@ -12,28 +12,26 @@ opacity:0.8; display:table-cell; vertical-align:middle; - width:100%; - height:100%; background-color:#333333; color:white; } -.button:hover +.rectProperties .button:hover { opacity:1; } -.button:active +.rectProperties .button:active { outline:solid 1px black; } -.button.on +.rectProperties .button.on { background-color: #333333; } -.button.off +.rectProperties .button.off { background-color: #cccccc; color:black; diff --git a/js/components/tools-properties/rect-properties.reel/rect-properties.html b/js/components/tools-properties/rect-properties.reel/rect-properties.html index e5c52466..214ff1d5 100755 --- a/js/components/tools-properties/rect-properties.reel/rect-properties.html +++ b/js/components/tools-properties/rect-properties.reel/rect-properties.html @@ -68,7 +68,7 @@ -
+
diff --git a/js/components/ui/color-chip.reel/color-chip.js b/js/components/ui/color-chip.reel/color-chip.js index e51bdd8a..ed1ac27a 100755 --- a/js/components/ui/color-chip.reel/color-chip.js +++ b/js/components/ui/color-chip.reel/color-chip.js @@ -29,12 +29,20 @@ var ColorChip = exports.ColorChip = Montage.create(Component, { value: 20 }, - initialColor: { - value: false + color: { + value: {r:0, g:0, b:0, a:1, css:'rgb(0,0,0)', mode:'rgb'} }, changeDelegate: { - value: null + value: function(event) { + this.color = event._event.color; + + var evt = document.createEvent("CustomEvent"); + evt.initEvent("change", true, true); + evt.type = "change"; + + this.dispatchEvent(evt); + } }, prepareForDraw: { @@ -60,10 +68,10 @@ var ColorChip = exports.ColorChip = Montage.create(Component, { value: function(evt) { if(this.chip) { // This is a single chip - Not related to the color panel -- Set the initial color if found - var mode = "rgb", r = 0, g = 0, b = 0, a = 1, css = "rgb(255,0,0)"; + var mode = "rgb", r = 0, g = 0, b = 0, a = 1, css = "rgb(0,0,0)"; - if(this.initialColor) { - var colorObj = this.application.ninja.colorController.getColorObjFromCss(this.initialColor); + if(this.color) { + var colorObj = this.application.ninja.colorController.getColorObjFromCss(this.color.css); mode = colorObj.mode; r = colorObj.value.r; g = colorObj.value.g; diff --git a/js/components/ui/file-input.reel/file-input.html b/js/components/ui/file-input.reel/file-input.html index 5cdd8f9e..2a8546a5 100755 --- a/js/components/ui/file-input.reel/file-input.html +++ b/js/components/ui/file-input.reel/file-input.html @@ -11,7 +11,7 @@ -
- +
+
diff --git a/js/components/ui/file-input.reel/file-input.js b/js/components/ui/file-input.reel/file-input.js index 2ea38162..b57f7c21 100755 --- a/js/components/ui/file-input.reel/file-input.js +++ b/js/components/ui/file-input.reel/file-input.js @@ -5,7 +5,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot */ var Montage = require("montage/core/core").Montage, -Component = require("montage/ui/component").Component; + Component = require("montage/ui/component").Component; var FileInput = exports.FileInput = Montage.create(Component, { diff --git a/js/components/ui/input-group.reel/input-group.html b/js/components/ui/input-group.reel/input-group.html index c99e29d6..0050b8cb 100755 --- a/js/components/ui/input-group.reel/input-group.html +++ b/js/components/ui/input-group.reel/input-group.html @@ -11,7 +11,7 @@ -
+
diff --git a/js/components/ui/property-control.reel/property-control.html b/js/components/ui/property-control.reel/property-control.html index 2e7c7b53..43e8e67f 100755 --- a/js/components/ui/property-control.reel/property-control.html +++ b/js/components/ui/property-control.reel/property-control.html @@ -11,14 +11,14 @@ -
+
diff --git a/js/components/ui/property-control.reel/property-control.js b/js/components/ui/property-control.reel/property-control.js index 586d2e9a..58b1be9f 100755 --- a/js/components/ui/property-control.reel/property-control.js +++ b/js/components/ui/property-control.reel/property-control.js @@ -6,16 +6,16 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component, - HotText = require("js/components/hottext").HotText, - HotTextUnit = require("js/components/hottextunit").HotTextUnit, - Slider = require("js/components/slider").Slider, - Button = require("js/components/button").Button, - Checkbox = require("js/components/checkbox").Checkbox, - Combobox = require("js/components/combobox").Combobox, - TextField = require("js/components/TextField").TextField, - ColorChip = require("js/components/ui/color-chip").ColorChip, - FileInput = require("js/components/ui/file-input").FileInput, - InputGroup = require("js/components/ui/input-group").InputGroup; + HotText = require("js/components/hottext.reel").HotText, + HotTextUnit = require("js/components/hottextunit.reel").HotTextUnit, + Slider = require("js/components/slider.reel").Slider, + Button = require("js/components/button.reel").Button, + Checkbox = require("js/components/checkbox.reel").Checkbox, + Combobox = require("js/components/combobox.reel").Combobox, + TextField = require("js/components/TextField.reel").TextField, + ColorChip = require("js/components/ui/color-chip.reel").ColorChip, + FileInput = require("js/components/ui/file-input.reel").FileInput, + InputGroup = require("js/components/ui/input-group.reel").InputGroup; var PropertyControl = exports.PropertyControl = Montage.create(Component, { @@ -134,7 +134,7 @@ var PropertyControl = exports.PropertyControl = Montage.create(Component, { { this._control[n] = defaults[n]; } - + this._labelField.innerHTML = this._label; this._control.needsDraw = true; } }, @@ -170,8 +170,6 @@ var PropertyControl = exports.PropertyControl = Montage.create(Component, { prepareForDraw: { value: function() { - this._labelField.innerHTML = this._label; - switch(this._controlType) { case "HotText": @@ -199,6 +197,9 @@ var PropertyControl = exports.PropertyControl = Montage.create(Component, { break; case "ColorChip": this._control = ColorChip.create(); + this._control.chip = true; + this._control.hasIcon = false; + this._control.mode = "chip"; this._control.addEventListener("change", this, false); this._prop = "color"; break; diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html index eede02bd..6ba4ac75 100755 --- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html +++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html @@ -10,14 +10,18 @@ diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js index f97e1a27..b16c4376 100755 --- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js +++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js @@ -7,7 +7,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Tree = require("js/components/tree.reel").Tree, Button = require("js/components/button.reel").Button, MaterialsPopup = require("js/panels/Materials/materials-popup.reel").MaterialsPopup, - PopupMananger = require("js/components/popup-manager.reel").PopupMananger; + PopupMananger = require("js/components/popup-manager.reel").PopupMananger, + Popup = require("montage/ui/popup/popup.reel").Popup; exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(require("montage/ui/component").Component, { @@ -92,20 +93,7 @@ exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(re captureChange: { value:function(e) { var tNode = e._event.treeNode; - var left, top; - //TODO: Figure out if this is the best way to detect where user clicked - var mouseEvent = e._event.mouseEvent; - if (mouseEvent.clientX && mouseEvent.clientY) { - if (mouseEvent.clientX > (parseInt(document.width)/2)) { - left = mouseEvent.clientX - mouseEvent.offsetX-2; - top = mouseEvent.currentTarget.clientHeight/2+mouseEvent.clientY - mouseEvent.offsetY; - } else { - left = mouseEvent.clientX - mouseEvent.offsetX+parseInt(mouseEvent.currentTarget.clientWidth); - top = mouseEvent.clientY - mouseEvent.offsetY; - } - } - - this._showMaterialPopup(left + 'px', top + 'px', 'right', 'top', tNode.id); + this._showMaterialPopup(tNode.id); } }, @@ -113,93 +101,34 @@ exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(re enumerable:true, value:null }, + + _materialInfo: { + enumerable:true + }, _showMaterialPopup: { enumerable: false, - value: function (x, y, side, align, materialID) { - if (this._materialPopup && this._materialPopup.opened) { - if (this._materialPopup.popup.position.x === x && this._materialPopup.popup.position.y === y) { - this._hideMaterialPopup(); - } else { - this._materialPopup.popup.position = {x: x, y: y}; - this._materialPopup.popup.tooltip = {side: side, align: align}; - this._materialPopup.popup.base.loadMaterials(materialID); - //TODO: Tooltip needs to be fixed to allow aligning to change on fly - //this._materialPopup.popup.drawTooltip(); - } - } else { - //////////////////////////////////////////////////// - //Creating popup from m-js component - var popup = document.createElement('div'); - var content = document.createElement('div'); - var popupBase = MaterialsPopup.create(); - - - //TODO: Check to see if this HACK is needed - //(elements needs to be on DOM to be drawn) - document.body.appendChild(popup); - popupBase.element = popup; - popupBase.needsDraw = true; - document.body.removeChild(popup); - //Adding drawn element to container - content.appendChild(popupBase.element); - - //Creating an instance of the popup and sending in created material popup content - this._materialPopup = {}; - this._materialPopup.popup = PopupMananger.createPopup(content, {x: x, y: y}, {side: side, align: align}); - this._materialPopup.popup.element.style.opacity = 0; - this._materialPopup.popup.base = popupBase; - popupBase._material = MaterialsLibrary.getMaterial( materialID ); - popupBase._materialName = materialID; - //TODO: Fix this animation/draw HACK (Move to didDraw callback) - setTimeout(function () { - this._materialPopup.popup.element.style.opacity = 1; - this._materialPopup.popup.base.loadMaterials(materialID); - }.bind(this), 150); - - - - //Popup was added, so it's opened - this._materialPopup.opened = true; - //TODO: Fix this HACK, it listens to this canvas to be clicked to close popup - document.getElementById('stageAndScenesContainer').addEventListener('click', this, false); - } - } - }, - //////////////////////////////////////////////////////////////////// - // - handleClick: { - enumerable: true, - value: function (e) { - //TODO: Fix this HACK - if (e._event.target.id === 'stageCanvas' && this._materialPopup.opened) { - this._handleDocumentClick(e); - } - } - }, - //////////////////////////////////////////////////////////////////// - // - _handleDocumentClick: { - enumerable: false, - value: function (e) { - this._hideMaterialPopup(); - //TODO: Fix this HACK - document.getElementById('stageAndScenesContainer').removeEventListener ('click', this, false); + value: function (materialID) { + + if(!this._materialPopup) + { + this._materialPopup = Popup.create(); + this._materialPopup.content = this._materialInfo; + this._materialPopup.modal = false; + this.eventManager.addEventListener("hideMaterialPopup", this, false); + this._materialPopup.addEventListener("show", this, false); + } + this._materialPopup.show(); + this._materialInfo.loadMaterials(materialID); } }, - //////////////////////////////////////////////////////////////////// - // - _hideMaterialPopup: { + + handleHideMaterialPopup: { enumerable: false, - value: function () { - if (this._materialPopup.opened) { - // - PopupMananger.removePopup(this._materialPopup.popup.element); - this._materialPopup.opened = false; - //TODO: Fix HACK of removing popup - this._materialPopup.popup.base.destroy(); - this._materialPopup.popup = null; - } + value: function (event) { + if(this._materialPopup){ + this._materialPopup.hide(); + } } } }); \ No newline at end of file diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.css b/js/panels/Materials/materials-popup.reel/materials-popup.css index 299dc5f9..89233c64 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.css +++ b/js/panels/Materials/materials-popup.reel/materials-popup.css @@ -6,24 +6,22 @@ */ .materials_popup { - font-size: 12px; - text-shadow: 1px 1px 1px #000; + width:400px; + font-size: 12px; overflow: hidden; -} - -.materials_popup a:hover { - color: #CCC; + background: #494949; + color: white; } .materials_popup hr { - float: left; - clear: both; - width: 100%; - display: block; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #1d1d1d), color-stop(0.75, #424242)); - border: none; - height: 2px; - margin: 4px 0px 4px 0px; + float: left; + clear: both; + width: 100%; + display: block; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #1d1d1d), color-stop(0.75, #424242)); + border: none; + height: 2px; + margin: 4px 0px 4px 0px; } #mp_title { @@ -36,127 +34,46 @@ text-align: center; } -#mp_maps div div, -#mp_maps div div:focus, -#mp_maps div input, -#mp_maps div input:focus { - margin: 0px 0px 2px 0px; +.mp_property +{ + height:40px; } -#mp_properties_labels, -#mp_maps_labels { - display:block; +.mp_property > .prop-label +{ float: left; - width:86px; + /*width:86px;*/ margin: 0px 8px 2px 5px; - font-family: 'Droid Sans', sans-serif; - font-size: 12px; } -#mp_properties_labels div, -#mp_maps_labels div { +.mp_property > .prop-controller +{ float: right; clear: left; width: auto; margin: 0px 0px 3px 0px; } -#mp_maps_labels div { - margin: 2px 0px 3px 0px !important; -} - -#mp_properties_labels div { - margin: 6px 0px 6px 0px !important; -} - -#mp_properties_colors -{ - float:left; - width: 24px; - margin: 0px -8px 0px 10px; -} - -#mp_properties_colors button { - width: 22px; - height: 22px; - margin: 2px 0; -} - -#mp_properties_colors input.hottext { - background: none; - float: right; - margin: 4px 0px; - padding: 0px; - width: 23px; - color: #FFF; - text-shadow: 1px 1px 1px #000; - font-family: 'Droid Sans', sans-serif; - font-size: 11px; - text-align: center; -} - -#mp_properties_colors input.hottextInput { - background: #FFF; - color: #000; - text-shadow: none; - border: 1px solid #333; - margin: 3px -2px 5px 1px; - padding: 1px; - text-decoration: none; - outline: none; -} - -#mp_maps_inputs -{ - float: left; - width: auto; -} - -#mp_maps_inputs input { - float:left; - clear:both; - width: 100px; - background: #555; - border: 1px solid #333; - color: #FFF; - padding: 1px 0px 1px 0px; - margin: 0px 0px 0px 10px; - text-decoration: none !important; - text-shadow: 1px 1px 1px #000; - font-family: 'Droid Sans', sans-serif; - font-size: 11px; - letter-spacing: 1px; -} - -#mp_maps_inputs input:focus { - outline: none; - margin: -1px 0px -1px 10px; - background: #FFF; - color: #000; - text-shadow: none; -} - - -#mp_buttons { +.mp_buttons { clear:both; float: left; margin: 0px -4px 0px 4px; width: 97%; } -#mp_buttons button { +.mp_buttons button { height: 22px; overflow: hidden; display: block; cursor: pointer; } -#mp_cancel_btn { +.mp_buttons .mp_cancel_btn { float: left; width: 60px; } -#mp_ok_btn { +.mp_buttons .mp_ok_btn { float: right; width: 30px; } \ No newline at end o