From affafafc4db16e5f918c74dfc919025d4c563cc6 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 31 Jan 2012 17:30:53 -0800 Subject: Updated color code to handle shapes. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/element-controller.js | 43 +++++++++++++++++++++++++-- js/controllers/elements/shapes-controller.js | 2 +- 2 files changed, 42 insertions(+), 3 deletions(-) (limited to 'js/controllers/elements') diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index f254220c..8a0735f7 100644 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -83,13 +83,52 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, setColor: { value: function(el, color, isFill) { + var mode = color.mode; if(isFill) { - this.application.ninja.stylesController.setElementStyle(el, "background-color", color.color.css); + if(mode) + { + switch (mode) { + case 'nocolor': + this.setProperty(el, "background-image", "none"); + this.setProperty(el, "background-color", "none"); + break; + case 'gradient': + this.setProperty(el, "background-image", color.color.css); + this.setProperty(el, "background-color", "none"); + break; + default: + this.setProperty(el, "background-image", "none"); + this.setProperty(el, "background-color", color.color.css); + } + } + else + { + this.application.ninja.stylesController.setElementStyle(el, "background-color", color.color.css); + } } else { - this.application.ninja.stylesController.setElementStyle(el, "border-color", color.color.css); + if(mode) + { + switch (mode) { + case 'nocolor': + this.setProperty(el, "border-image", "none"); + this.setProperty(el, "border-color", "none"); + break; + case 'gradient': + this.setProperty(el, "border-image", color.color.css); + this.setProperty(el, "border-color", "none"); + break; + default: + this.setProperty(el, "border-image", "none"); + this.setProperty(el, "border-color", color.color.css); + } + } + else + { + this.application.ninja.stylesController.setElementStyle(el, "border-color", color.color.css); + } } } }, diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index d34644a7..92353f28 100644 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -168,7 +168,7 @@ exports.ShapesController = Montage.create(CanvasController, { setColor: { value: function(el, color, isFill) { // TODO - Format color for webGL before setting - color = color.webGlColor; + color = color.webGlColor || color.color.webGlColor; if(isFill) { el.elementModel.shapeModel.GLGeomObj.setFillColor(color); -- cgit v1.2.3 From 830b011d94d728882286d72e129f7405134957c7 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 1 Feb 2012 17:05:07 -0800 Subject: Updated color code in the PI to go through element mediator. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/element-controller.js | 53 +++++++++++++++++++++++++-- js/controllers/elements/shapes-controller.js | 32 ++++++++++++---- 2 files changed, 73 insertions(+), 12 deletions(-) (limited to 'js/controllers/elements') diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index 8a0735f7..892ac2f2 100644 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -69,15 +69,56 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, // Routines to get/set color properties getColor: { value: function(el, isFill) { + var colorObj, + color, + image; + + // Return cached value if one exists if(isFill) { - return this.application.ninja.stylesController.getElementStyle(el, "background-color"); + if(el.elementModel.fill) + { + return el.elementModel.fill; + } +// return this.application.ninja.stylesController.getElementStyle(el, "background-color"); + //TODO: Once logic for color and gradient is established, this needs to be revised + color = this.getProperty(el, "background-color"); + image = this.getProperty(el, "background-image"); } else { // TODO - Need to figure out which border side user wants - return this.application.ninja.stylesController.getElementStyle(el, "border-color"); + if(el.elementModel.stroke) + { + return el.elementModel.stroke; + } + // TODO - Need to figure out which border side user wants +// return this.application.ninja.stylesController.getElementStyle(el, "border-color"); + color = this.getProperty(el, "border-color"); + image = this.getProperty(el, "border-image"); } + + if(color || image) { + if (image && image !== 'none' && image.indexOf('-webkit') >= 0) { + //Gradient + colorObj = this.application.ninja.colorController.getColorObjFromCss(image); + } else { + //Solid + colorObj = this.application.ninja.colorController.getColorObjFromCss(color); + } + } + + // Update cache + if(isFill) + { + el.elementModel.fill = colorObj; + } + else + { + el.elementModel.stroke = colorObj; + } + + return colorObj; } }, @@ -92,7 +133,8 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, case 'nocolor': this.setProperty(el, "background-image", "none"); this.setProperty(el, "background-color", "none"); - break; + el.elementModel.fill = null; + return; case 'gradient': this.setProperty(el, "background-image", color.color.css); this.setProperty(el, "background-color", "none"); @@ -106,6 +148,7 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, { this.application.ninja.stylesController.setElementStyle(el, "background-color", color.color.css); } + el.elementModel.fill = color; } else { @@ -115,7 +158,8 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, case 'nocolor': this.setProperty(el, "border-image", "none"); this.setProperty(el, "border-color", "none"); - break; + el.elementModel.stroke = null; + return; case 'gradient': this.setProperty(el, "border-image", color.color.css); this.setProperty(el, "border-color", "none"); @@ -129,6 +173,7 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, { this.application.ninja.stylesController.setElementStyle(el, "border-color", color.color.css); } + el.elementModel.stroke = color; } } }, diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 92353f28..1717db94 100644 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -48,6 +48,8 @@ exports.ShapesController = Montage.create(CanvasController, { switch(p) { case "strokeSize": case "innerRadius": + case "border": + case "background": return this.getShapeProperty(el, p); default: return CanvasController.getProperty(el, p); @@ -154,30 +156,44 @@ exports.ShapesController = Montage.create(CanvasController, { // Routines to get/set color properties getColor: { value: function(el, isFill) { + var color, + css; if(isFill) { - return this.getShapeProperty(el, "fill"); + if(el.elementModel.shapeModel.background) + { + return el.elementModel.shapeModel.background; + } + color = this.getShapeProperty(el, "fill"); } else { - return this.getShapeProperty(el, "stroke"); + if(el.elementModel.shapeModel.border) + { + return el.elementModel.shapeModel.border; + } + color = this.getShapeProperty(el, "stroke"); } + + css = this.application.ninja.colorController.colorModel.webGlToCss(color); + return this.application.ninja.colorController.getColorObjFromCss(css); } }, setColor: { value: function(el, color, isFill) { - // TODO - Format color for webGL before setting - color = color.webGlColor || color.color.webGlColor; + var webGl = color.webGlColor || color.color.webGlColor; if(isFill) { - el.elementModel.shapeModel.GLGeomObj.setFillColor(color); - this.setShapeProperty(el, "fill", color); + el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); + this.setShapeProperty(el, "fill", webGl); + this.setShapeProperty(el, "background", color); } else { - el.elementModel.shapeModel.GLGeomObj.setStrokeColor(color); - this.setShapeProperty(el, "stroke", color); + el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl); + this.setShapeProperty(el, "stroke", webGl); + this.setShapeProperty(el, "border", color); } el.elementModel.shapeModel.GLWorld.render(); } -- cgit v1.2.3 From 01efeff045e7196bab37fc60f7030969ad650d6c Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 1 Feb 2012 21:14:17 -0800 Subject: Removed border special-casing from PI since the mediator now handles this generically. Updated mediator's set stroke routine to use the setColor routine. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/element-controller.js | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) (limited to 'js/controllers/elements') diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index 892ac2f2..9b13e703 100644 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -144,10 +144,6 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, this.setProperty(el, "background-color", color.color.css); } } - else - { - this.application.ninja.stylesController.setElementStyle(el, "background-color", color.color.css); - } el.elementModel.fill = color; } else @@ -169,10 +165,6 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, this.setProperty(el, "border-color", color.color.css); } } - else - { - this.application.ninja.stylesController.setElementStyle(el, "border-color", color.color.css); - } el.elementModel.stroke = color; } } @@ -187,8 +179,9 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, setStroke: { value: function(el, stroke) { - var border = stroke.borderWidth + stroke.borderUnits + " " + stroke.borderStyle + " " + stroke.color.color.css; - this.application.ninja.stylesController.setElementStyle(el, "border", border); + this.application.ninja.stylesController.setElementStyle(el, "border-width", stroke.borderWidth + stroke.borderUnits); + this.application.ninja.stylesController.setElementStyle(el, "border-style", stroke.borderStyle); + this.setColor(el, stroke.color, false); } }, -- cgit v1.2.3 From 89d64cf06e170c3c50b02eeadd9dcf10d6efe1a3 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 2 Feb 2012 13:22:30 -0800 Subject: Updating Shapes PI to support corner radii. Also fixed PI bug where we were always updating custom section 0. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) (limited to 'js/controllers/elements') diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index d34644a7..c5f22138 100644 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -24,6 +24,26 @@ exports.ShapesController = Montage.create(CanvasController, { el.elementModel.shapeModel.GLGeomObj.setInnerRadius(val/100); el.elementModel.shapeModel.GLGeomObj.buildBuffers(); break; + case "tlRadius": + this.setShapeProperty(el, "tlRadius", value); + el.elementModel.shapeModel.GLGeomObj.setTLRadius(val); + el.elementModel.shapeModel.GLGeomObj.buildBuffers(); + break; + case "trRadius": + this.setShapeProperty(el, "trRadius", value); + el.elementModel.shapeModel.GLGeomObj.setTRRadius(val); + el.elementModel.shapeModel.GLGeomObj.buildBuffers(); + break; + case "blRadius": + this.setShapeProperty(el, "blRadius", value); + el.elementModel.shapeModel.GLGeomObj.setBLRadius(val); + el.elementModel.shapeModel.GLGeomObj.buildBuffers(); + break; + case "brRadius": + this.setShapeProperty(el, "brRadius", value); + el.elementModel.shapeModel.GLGeomObj.setBRRadius(val); + el.elementModel.shapeModel.GLGeomObj.buildBuffers(); + break; case "width": el.elementModel.shapeModel.GLGeomObj.setWidth(val); CanvasController.setProperty(el, p, value); @@ -46,8 +66,16 @@ exports.ShapesController = Montage.create(CanvasController, { getProperty: { value: function(el, p) { switch(p) { + case "stroke": + case "fill": case "strokeSize": case "innerRadius": + case "tlRadius": + case "trRadius": + case "blRadius": + case "brRadius": + case "strokeMaterial": + case "fillMaterial": return this.getShapeProperty(el, p); default: return CanvasController.getProperty(el, p); -- cgit v1.2.3 From d41dee0c552a30724a146965ae4272a268777fc5 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 2 Feb 2012 14:53:14 -0800 Subject: Integrating Pan and Zoom tool and snap manager fixes. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/canvas-controller.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'js/controllers/elements') diff --git a/js/controllers/elements/canvas-controller.js b/js/controllers/elements/canvas-controller.js index 21de9879..b5df3911 100644 --- a/js/controllers/elements/canvas-controller.js +++ b/js/controllers/elements/canvas-controller.js @@ -34,12 +34,12 @@ exports.CanvasController = Montage.create(ElementController, { } } }, - - setProperties: { - value: function(el, props, index) { - for(var p in props) { - el.elementModel.controller.setProperty(el, p, props[p][index]); - } - } + + setProperties: { + value: function(el, props, index) { + for(var p in props) { + el.elementModel.controller.setProperty(el, p, props[p][index]); + } + } } }); \ No newline at end of file -- cgit v1.2.3