From 23baa44e0bc7bfb24e42702c1ef58bf62da083d8 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Wed, 14 Mar 2012 15:37:09 -0700 Subject: PI for pen and brush strokes --- js/controllers/elements/shapes-controller.js | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) (limited to 'js/controllers/elements/shapes-controller.js') diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index d72d9c14..b273350a 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -100,6 +100,31 @@ exports.ShapesController = Montage.create(CanvasController, { el.elementModel.shapeModel.GLWorld.render(); } break; + case "strokeHardness": + this.setShapeProperty(el, "strokeHardness", value); + el.elementModel.shapeModel.GLGeomObj.setStrokeHardness(val); + el.elementModel.shapeModel.GLWorld.render(); + break; + case "strokeSmoothing": + this.setShapeProperty(el, "strokeSmoothing", value); + el.elementModel.shapeModel.GLGeomObj.setSmoothingAmount(val); + el.elementModel.shapeModel.GLWorld.render(); + break; + case "doSmoothing": + this.setShapeProperty(el, "doSmoothing", value); + el.elementModel.shapeModel.GLGeomObj.setDoSmoothing(value); + el.elementModel.shapeModel.GLWorld.render(); + break; + case "isCalligraphic": + this.setShapeProperty(el, "isCalligraphic", value); + el.elementModel.shapeModel.GLGeomObj.setStrokeUseCalligraphic(value); + el.elementModel.shapeModel.GLWorld.render(); + break; + case "strokeAngle": + this.setShapeProperty(el, "strokeAngle", value); + el.elementModel.shapeModel.GLGeomObj.setStrokeAngle(Math.PI * -val/180); + el.elementModel.shapeModel.GLWorld.render(); + break; default: CanvasController.setProperty(el, p, value); } -- cgit v1.2.3 From e574f722864a246bad40d3f5a4e59f7ccb206ea9 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Thu, 15 Mar 2012 14:33:48 -0700 Subject: update values in the PI from values of the selected brush stroke or pen tool path --- js/controllers/elements/shapes-controller.js | 37 ++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) (limited to 'js/controllers/elements/shapes-controller.js') diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index b273350a..b5e63514 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -144,6 +144,43 @@ exports.ShapesController = Montage.create(CanvasController, { case "background": case "useWebGl": return this.getShapeProperty(el, p); + case "strokeHardness": + if (el.elementModel && el.elementModel.shapeModel){ + return el.elementModel.shapeModel.GLGeomObj.getStrokeHardness();; + } else { + return null; + } + break; + case "doSmoothing": + if (el.elementModel && el.elementModel.shapeModel){ + return el.elementModel.shapeModel.GLGeomObj.getDoSmoothing();; + } else { + return null; + } + break; + case "strokeSmoothing": + if (el.elementModel && el.elementModel.shapeModel){ + return el.elementModel.shapeModel.GLGeomObj.getSmoothingAmount();; + } else { + return null; + } + break; + case "isCalligraphic": + if (el.elementModel && el.elementModel.shapeModel){ + return el.elementModel.shapeModel.GLGeomObj.getStrokeUseCalligraphic();; + } else { + return null; + } + break; + case "strokeAngle": + if (el.elementModel && el.elementModel.shapeModel){ + return el.elementModel.shapeModel.GLGeomObj.getStrokeAngle();; + } else { + return null; + } + break; + + case "strokeMaterial": case "fillMaterial": var m = this.getShapeProperty(el, p); -- cgit v1.2.3 From 92bc54df4acfec849568ab619150a5da49c087fa Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Tue, 20 Mar 2012 10:24:15 -0700 Subject: revert to using the angle without flipping its sign...fixing some minor bugs and code cleanup GOOD status before doing 3D unprojection step --- js/controllers/elements/shapes-controller.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'js/controllers/elements/shapes-controller.js') diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index b5e63514..46e337b7 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -122,7 +122,7 @@ exports.ShapesController = Montage.create(CanvasController, { break; case "strokeAngle": this.setShapeProperty(el, "strokeAngle", value); - el.elementModel.shapeModel.GLGeomObj.setStrokeAngle(Math.PI * -val/180); + el.elementModel.shapeModel.GLGeomObj.setStrokeAngle(Math.PI * val/180); el.elementModel.shapeModel.GLWorld.render(); break; default: @@ -146,35 +146,35 @@ exports.ShapesController = Montage.create(CanvasController, { return this.getShapeProperty(el, p); case "strokeHardness": if (el.elementModel && el.elementModel.shapeModel){ - return el.elementModel.shapeModel.GLGeomObj.getStrokeHardness();; + return el.elementModel.shapeModel.GLGeomObj.getStrokeHardness(); } else { return null; } break; case "doSmoothing": if (el.elementModel && el.elementModel.shapeModel){ - return el.elementModel.shapeModel.GLGeomObj.getDoSmoothing();; + return el.elementModel.shapeModel.GLGeomObj.getDoSmoothing(); } else { return null; } break; case "strokeSmoothing": if (el.elementModel && el.elementModel.shapeModel){ - return el.elementModel.shapeModel.GLGeomObj.getSmoothingAmount();; + return el.elementModel.shapeModel.GLGeomObj.getSmoothingAmount(); } else { return null; } break; case "isCalligraphic": if (el.elementModel && el.elementModel.shapeModel){ - return el.elementModel.shapeModel.GLGeomObj.getStrokeUseCalligraphic();; + return el.elementModel.shapeModel.GLGeomObj.getStrokeUseCalligraphic(); } else { return null; } break; case "strokeAngle": if (el.elementModel && el.elementModel.shapeModel){ - return el.elementModel.shapeModel.GLGeomObj.getStrokeAngle();; + return 180*el.elementModel.shapeModel.GLGeomObj.getStrokeAngle()/Math.PI; } else { return null; } -- cgit v1.2.3 From 5b4f6b1618cf571a6bce5a631f976a008e04a64e Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 29 Mar 2012 15:52:08 -0700 Subject: Updated shapes to always check for its stroke and fill colors and materials instead of relying on the shapeModel cache because it can get out of sync. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 277 +++++++++++++++------------ 1 file changed, 157 insertions(+), 120 deletions(-) (limited to 'js/controllers/elements/shapes-controller.js') diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index f0e9458b..45b822e2 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -84,7 +84,6 @@ exports.ShapesController = Montage.create(CanvasController, { if(sm) { el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(sm); - el.elementModel.shapeModel.strokeMaterial = sm; el.elementModel.shapeModel.GLGeomObj.buildBuffers(); el.elementModel.shapeModel.GLWorld.render(); } @@ -94,16 +93,15 @@ exports.ShapesController = Montage.create(CanvasController, { if(fm) { el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm); - el.elementModel.shapeModel.fillMaterial = fm; el.elementModel.shapeModel.GLGeomObj.buildBuffers(); el.elementModel.shapeModel.GLWorld.render(); } break; case "editStrokeMaterial": - NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.strokeMaterial.getName()}); + NJevent("showMaterialPopup",{materialId : this.getProperty(el, "strokeMaterial")}); break; case "editFillMaterial": - NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.fillMaterial.getName()}); + NJevent("showMaterialPopup",{materialId : this.getProperty(el, "fillMaterial")}); break; case "animate": if(value) @@ -134,17 +132,28 @@ exports.ShapesController = Montage.create(CanvasController, { case "trRadius": case "blRadius": case "brRadius": - case "border": - case "background": case "useWebGl": case "animate": return this.getShapeProperty(el, p); + case "border": + return this.getColor(el, false); + case "background": + return this.getColor(el, true); case "strokeMaterial": + var sm = el.elementModel.shapeModel.GLGeomObj.getStrokeMaterial(); + if(sm) + { + return sm.getName(); + } + else + { + return "FlatMaterial"; + } case "fillMaterial": - var m = this.getShapeProperty(el, p); - if(m) + var fm = el.elementModel.shapeModel.GLGeomObj.getFillMaterial(); + if(fm) { - return this.getShapeProperty(el, p).getName(); + return fm.getName(); } else { @@ -255,67 +264,94 @@ exports.ShapesController = Montage.create(CanvasController, { // Routines to get/set color properties getColor: { value: function(el, isFill) { - var color, - css; if(isFill) { - if(el.elementModel.shapeModel.background) + if(el.elementModel.shapeModel.GLGeomObj.getFillColor) { - return el.elementModel.shapeModel.background; + return this.application.ninja.colorController.colorModel.webGlToColor(el.elementModel.shapeModel.GLGeomObj.getFillColor()); } - color = this.getShapeProperty(el, "fill"); - } - else - { - if(el.elementModel.shapeModel.border) + else { - return el.elementModel.shapeModel.border; + return null; } - color = this.getShapeProperty(el, "stroke"); } - - if(!css) { - return null; + else + { + return this.application.ninja.colorController.colorModel.webGlToColor(el.elementModel.shapeModel.GLGeomObj.getStrokeColor()); } - - css = this.application.ninja.colorController.colorModel.webGlToCss(color); - return this.application.ninja.colorController.getColorObjFromCss(css); } }, _setGradientMaterial: { value: function(el, gradientMode, isFill) { - var m = "LinearGradientMaterial", - fm; + var m, + gradientM; + if(isFill) + { + m = el.elementModel.shapeModel.GLGeomObj.getFillMaterial(); + } + else + { + m = el.elementModel.shapeModel.GLGeomObj.getStrokeMaterial(); + } + if(gradientMode === "radial") { - m = "RadialGradientMaterial"; + if( !m || (m.getName() !== "RadialGradientMaterial") ) + { + gradientM = Object.create(MaterialsModel.getMaterial("RadialGradientMaterial")); + } + } + else + { + if( !m || (m.getName() !== "LinearGradientMaterial") ) + { + gradientM = Object.create(MaterialsModel.getMaterial("LinearGradientMaterial")); + } } - if(isFill) + if(gradientM) { - if(el.elementModel.shapeModel.fillMaterial.getName() !== m) + if(isFill) { - fm = Object.create(MaterialsModel.getMaterial(m)); - if(fm) - { - el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm); - el.elementModel.shapeModel.fillMaterial = fm; - el.elementModel.shapeModel.GLGeomObj.buildBuffers(); - } + el.elementModel.shapeModel.GLGeomObj.setFillMaterial(gradientM); } + else + { + el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(gradientM); + } + el.elementModel.shapeModel.GLGeomObj.buildBuffers(); + } + } + }, + + _setFlatMaterial: { + value: function(el, isFill) { + var m, + flatM; + if(isFill) + { + m = el.elementModel.shapeModel.GLGeomObj.getFillMaterial(); } else { - if(el.elementModel.shapeModel.strokeMaterial.getName() !== m) + m = el.elementModel.shapeModel.GLGeomObj.getStrokeMaterial(); + } + + if(!m || ((m.getName() === "LinearGradientMaterial") || m.getName() === "RadialGradientMaterial") ) + { + flatM = Object.create(MaterialsModel.getMaterial("FlatMaterial")); + if(flatM) { - fm = Object.create(MaterialsModel.getMaterial(m)); - if(fm) + if(isFill) { - el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(fm); - el.elementModel.shapeModel.strokeMaterial = fm; - el.elementModel.shapeModel.GLGeomObj.buildBuffers(); + el.elementModel.shapeModel.GLGeomObj.setFillMaterial(flatM); + } + else + { + el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(flatM); } + el.elementModel.shapeModel.GLGeomObj.buildBuffers(); } } } @@ -324,7 +360,8 @@ exports.ShapesController = Montage.create(CanvasController, { setColor: { value: function(el, color, isFill) { var mode = color.mode, - webGl; + webGl, + m; if(isFill) { if(mode) @@ -332,9 +369,6 @@ exports.ShapesController = Montage.create(CanvasController, { switch (mode) { case 'nocolor': el.elementModel.shapeModel.GLGeomObj.setFillColor(null); - this.setShapeProperty(el, "fill", null); - this.setShapeProperty(el, "background", color); - el.elementModel.fill = null; return; case 'gradient': if(el.elementModel.shapeModel.useWebGl) @@ -343,16 +377,15 @@ exports.ShapesController = Montage.create(CanvasController, { } el.elementModel.shapeModel.GLGeomObj.setFillColor({gradientMode:color.color.gradientMode, color:color.color.stops}); el.elementModel.shapeModel.GLWorld.render(); - this.setShapeProperty(el, "fill", color.color.css); - this.setShapeProperty(el, "background", color); - el.elementModel.fill = color; break; default: + if(el.elementModel.shapeModel.useWebGl) + { + this._setFlatMaterial(el, isFill); + } webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); - this.setShapeProperty(el, "fill", webGl); - this.setShapeProperty(el, "background", color); - el.elementModel.fill = color; + el.elementModel.shapeModel.GLWorld.render(); } } } @@ -373,9 +406,6 @@ exports.ShapesController = Montage.create(CanvasController, { switch (mode) { case 'nocolor': el.elementModel.shapeModel.GLGeomObj.setStrokeColor(null); - this.setShapeProperty(el, "stroke", null); - this.setShapeProperty(el, "border", color); - el.elementModel.fill = null; return; case 'gradient': if(el.elementModel.shapeModel.useWebGl) @@ -384,50 +414,18 @@ exports.ShapesController = Montage.create(CanvasController, { } el.elementModel.shapeModel.GLGeomObj.setStrokeColor({gradientMode:color.color.gradientMode, color:color.color.stops}); el.elementModel.shapeModel.GLWorld.render(); - this.setShapeProperty(el, "stroke", color.color.css); - this.setShapeProperty(el, "border", color); - el.elementModel.fill = color; break; default: + if(el.elementModel.shapeModel.useWebGl) + { + this._setFlatMaterial(el, isFill); + } webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl); - this.setShapeProperty(el, "stroke", webGl); - this.setShapeProperty(el, "border", color); - el.elementModel.fill = color; + el.elementModel.shapeModel.GLWorld.render(); } } } - - - - - - -// 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); -// this.setShapeProperty(el, "fill", webGl); -// this.setShapeProperty(el, "background", color); -// } -// else -// { -// 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(); } }, @@ -505,9 +503,7 @@ exports.ShapesController = Montage.create(CanvasController, { { return; } - var sm, - fm, - world, + var world, worldData = el.elementModel.shapeModel.GLWorld.exportJSON(); if(worldData) { @@ -517,21 +513,6 @@ exports.ShapesController = Montage.create(CanvasController, { el.elementModel.shapeModel.useWebGl = true; world.importJSON(worldData); el.elementModel.shapeModel.GLGeomObj = world.getGeomRoot(); - - sm = Object.create(MaterialsModel.getMaterial("FlatMaterial")); - if(sm) - { - el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(sm); - el.elementModel.shapeModel.strokeMaterial = sm; - } - fm = Object.create(MaterialsModel.getMaterial("FlatMaterial")); - // TODO - Use consts after GL code is converted to object literal notation -// if( fm && (el.elementModel.shapeModel.GLGeomObj.geomType() !== GLGeomObj.GEOM_TYPE_LINE) ) - if( fm && (el.elementModel.shapeModel.GLGeomObj.geomType() !== 3) ) - { - el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm); - el.elementModel.shapeModel.fillMaterial = fm; - } } } @@ -554,14 +535,6 @@ exports.ShapesController = Montage.create(CanvasController, { el.elementModel.shapeModel.useWebGl = false; world.importJSON(worldData); el.elementModel.shapeModel.GLGeomObj = world.getGeomRoot(); - el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(null); - el.elementModel.shapeModel.strokeMaterial = null; - // TODO - Use consts after GL code is converted to object literal notation - if(el.elementModel.shapeModel.GLGeomObj.geomType() !== 3) - { - el.elementModel.shapeModel.GLGeomObj.setFillMaterial(null); - el.elementModel.shapeModel.fillMaterial = null; - } } } }, @@ -578,6 +551,70 @@ exports.ShapesController = Montage.create(CanvasController, { var jStr = importStr.substr( index+1 ); jObj = JSON.parse( jStr ); jObj.webGL = !jObj.webGL; + + if(jObj.children) + { + var nKids = jObj.children.length; + for (var i=0; i --- js/controllers/elements/shapes-controller.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) (limited to 'js/controllers/elements/shapes-controller.js') diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index a4d53e50..5d3cf060 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -78,6 +78,7 @@ exports.ShapesController = Montage.create(CanvasController, { this.toggleWebGlMode(el, value); el.elementModel.shapeModel.GLWorld.render(); this.application.ninja.selectionController.selectElement(el); + this.application.ninja.documentController.activeDocument.needsSave = true; return; case "strokeMaterial": var sm = Object.create(MaterialsModel.getMaterial(value)); @@ -145,6 +146,7 @@ exports.ShapesController = Montage.create(CanvasController, { default: CanvasController.setProperty(el, p, value); } + this.application.ninja.documentController.activeDocument.needsSave = true; } }, @@ -422,8 +424,7 @@ exports.ShapesController = Montage.create(CanvasController, { setColor: { value: function(el, color, isFill) { var mode = color.mode, - webGl, - m; + webGl; if(isFill) { if(mode) @@ -431,14 +432,13 @@ exports.ShapesController = Montage.create(CanvasController, { switch (mode) { case 'nocolor': el.elementModel.shapeModel.GLGeomObj.setFillColor(null); - return; + break; case 'gradient': if(el.elementModel.shapeModel.useWebGl) { this._setGradientMaterial(el, color.color.gradientMode, isFill); } el.elementModel.shapeModel.GLGeomObj.setFillColor({gradientMode:color.color.gradientMode, color:color.color.stops}); - el.elementModel.shapeModel.GLWorld.render(); break; default: if(el.elementModel.shapeModel.useWebGl) @@ -447,7 +447,6 @@ exports.ShapesController = Montage.create(CanvasController, { } webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); - el.elementModel.shapeModel.GLWorld.render(); } } } @@ -468,14 +467,13 @@ exports.ShapesController = Montage.create(CanvasController, { switch (mode) { case 'nocolor': el.elementModel.shapeModel.GLGeomObj.setStrokeColor(null); - return; + break; case 'gradient': if(el.elementModel.shapeModel.useWebGl) { this._setGradientMaterial(el, color.color.gradientMode, isFill); } el.elementModel.shapeModel.GLGeomObj.setStrokeColor({gradientMode:color.color.gradientMode, color:color.color.stops}); - el.elementModel.shapeModel.GLWorld.render(); break; default: if(el.elementModel.shapeModel.useWebGl) @@ -484,11 +482,11 @@ exports.ShapesController = Montage.create(CanvasController, { } webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl); - el.elementModel.shapeModel.GLWorld.render(); } } } el.elementModel.shapeModel.GLWorld.render(); + this.application.ninja.documentController.activeDocument.needsSave = true; } }, -- cgit v1.2.3 From 5377e963c4413640cd3c04e0406384df04144568 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 2 Apr 2012 14:52:14 -0700 Subject: Switching to Linear/RadialGradient materials will set the corresponding color. Also, dispatching an addElement event when toggling shape from WebGL/canvas2d so timeline can draw correctly. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 135 ++++++++++++++++----------- 1 file changed, 82 insertions(+), 53 deletions(-) (limited to 'js/controllers/elements/shapes-controller.js') diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 5d3cf060..a6859361 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -14,7 +14,10 @@ exports.ShapesController = Montage.create(CanvasController, { setProperty: { value: function(el, p, value) { - var val = parseInt(value); + var val = parseInt(value), + canvas, + m, + color; switch(p) { case "strokeSize": // TODO - For now, just handling px units. @@ -68,32 +71,39 @@ exports.ShapesController = Montage.create(CanvasController, { el.elementModel.shapeModel.GLWorld.render(); break; case "useWebGl": - var canvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", el.className, true); + canvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", el.className, true); canvas.setAttribute("data-RDGE-id", njModule.NJUtils.generateRandom()); canvas.width = el.width; canvas.height = el.height; this.application.ninja.elementMediator.replaceElement(el, canvas); NJevent("elementDeleted", el); - el = canvas; - this.toggleWebGlMode(el, value); - el.elementModel.shapeModel.GLWorld.render(); - this.application.ninja.selectionController.selectElement(el); - this.application.ninja.documentController.activeDocument.needsSave = true; - return; + this.toggleWebGlMode(canvas, value); + NJevent("elementAdded", canvas); + break; case "strokeMaterial": - var sm = Object.create(MaterialsModel.getMaterial(value)); - if(sm) + m = Object.create(MaterialsModel.getMaterial(value)); + if(m) { - el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(sm); + el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(m); + color = this.getMaterialColor(value); + if(color) + { + el.elementModel.shapeModel.GLGeomObj.setStrokeColor(color); + } el.elementModel.shapeModel.GLGeomObj.buildBuffers(); el.elementModel.shapeModel.GLWorld.render(); } break; case "fillMaterial": - var fm = Object.create(MaterialsModel.getMaterial(value)); - if(fm) + m = Object.create(MaterialsModel.getMaterial(value)); + if(m) { - el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm); + el.elementModel.shapeModel.GLGeomObj.setFillMaterial(m); + color = this.getMaterialColor(value); + if(color) + { + el.elementModel.shapeModel.GLGeomObj.setFillColor(color); + } el.elementModel.shapeModel.GLGeomObj.buildBuffers(); el.elementModel.shapeModel.GLWorld.render(); } @@ -621,64 +631,83 @@ exports.ShapesController = Montage.create(CanvasController, { if(jObj.webGL) { - // Set Linear/Radial Gradient Material for children geometry if color in canvas 2d has gradient - if(child.strokeColor && child.strokeColor.gradientMode) + if(child.strokeColor) { - if(child.strokeColor.gradientMode === "radial") + if(child.strokeColor.gradientMode) { - child.strokeMat = "RadialGradientMaterial"; - } - else + // Set Linear/Radial Gradient Material for children geometry if color in canvas 2d has gradient + if(child.strokeColor.gradientMode === "radial") + { + child.strokeMat = "RadialGradientMaterial"; + } + else + { + child.strokeMat = "LinearGradientMaterial"; + } + } + else if( (child.strokeMat === "RadialGradientMaterial") || + (child.strokeMat === "LinearGradientMaterial") ) { - child.strokeMat = "LinearGradientMaterial"; + // Set Flat Material for children geometry if color has been changed to solid + child.strokeMat = "FlatMaterial"; } } - if(child.fillColor && child.fillColor.gradientMode) + if(child.fillColor) { - if(child.fillColor.gradientMode === "radial") + if(child.fillColor.gradientMode) { - child.fillMat = "RadialGradientMaterial"; + // Set Linear/Radial Gradient Material for children geometry if color in canvas 2d has gradient + if(child.fillColor.gradientMode === "radial") + { + child.fillMat = "RadialGradientMaterial"; + } + else + { + child.fillMat = "LinearGradientMaterial"; + } } - else + else if( (child.fillMat === "RadialGradientMaterial") || + (child.fillMat === "LinearGradientMaterial") ) { - child.fillMat = "LinearGradientMaterial"; + // Set Flat Material for children geometry if color has been changed to solid + child.fillMat = "FlatMaterial"; } } } -// else -// { -// // Set flat color for children geometry if color in WebGL has been changed to solid -// if(child.strokeColor && !child.strokeColor.gradientMode) -// { -// if(child.strokeColor.gradientMode === "radial") -// { -// child.strokeMat = "RadialGradientMaterial"; -// } -// else -// { -// child.strokeMat = "LinearGradientMaterial"; -// } -// } -// -// if(child.fillColor && child.fillColor.gradientMode) -// { -// if(child.fillColor.gradientMode === "radial") -// { -// child.fillMat = "RadialGradientMaterial"; -// } -// else -// { -// child.fillMat = "LinearGradientMaterial"; -// } -// } -// } } } } return jObj; } + }, + + getMaterialColor: { + value: function(m) + { + var css, + colorObj; + if(m === "LinearGradientMaterial") + { + css = "-webkit-gradient(linear, left top, right top, from(rgb(255, 0, 0)), color-stop(0.3, rgb(0, 255, 0)), color-stop(0.6, rgb(0, 0, 255)), to(rgb(0, 255, 255)))"; + } + else if(m === "RadialGradientMaterial") + { + css = "-webkit-radial-gradient(50% 50%, ellipse cover, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 30%, rgb(0, 0, 255) 60%, rgb(0, 255, 255) 100%)"; + } + + if(css) + { + colorObj = this.application.ninja.colorController.getColorObjFromCss(css); + if(colorObj) + { + return {gradientMode:colorObj.color.gradientMode, color:colorObj.color.stops}; + } + } + + return null; + } } }); -- cgit v1.2.3 From df0389e6a191ebbff4e4b5d6625007873c0737bd Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 4 Apr 2012 10:21:20 -0700 Subject: Adjusting line's width and height when changing stroke size. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 49 +++++++++++++++++++++++++++- 1 file changed, 48 insertions(+), 1 deletion(-) (limited to 'js/controllers/elements/shapes-controller.js') diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index a6859361..236e9caa 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -13,7 +13,7 @@ var Montage = require("montage/core/core").Montage, exports.ShapesController = Montage.create(CanvasController, { setProperty: { - value: function(el, p, value) { + value: function(el, p, value, eventType, source) { var val = parseInt(value), canvas, m, @@ -22,6 +22,53 @@ exports.ShapesController = Montage.create(CanvasController, { case "strokeSize": // TODO - For now, just handling px units. this.setShapeProperty(el, "strokeSize", value); + // Changing stroke size should grow/shrink the shape from the center. + var delta = ~~(val - el.elementModel.shapeModel.GLGeomObj.getStrokeWidth()), + l = this.application.ninja.elementMediator.getProperty(el, "left", parseInt), + t = this.application.ninja.elementMediator.getProperty(el, "top", parseInt), + w = this.application.ninja.elementMediator.getProperty(el, "width", parseInt), + h = this.application.ninja.elementMediator.getProperty(el, "height", parseInt); + + if(el.elementModel.selection === "Line") + { + var slope = el.elementModel.shapeModel.slope; + // set the dimensions + if(slope === "horizontal") + { + h = Math.max(val, 1); + } + else if(slope === "vertical") + { + w = Math.max(val, 1); + } + else + { + var oldXAdj = el.elementModel.shapeModel.GLGeomObj.getXAdj(); + var oldYAdj = el.elementModel.shapeModel.GLGeomObj.getYAdj(); + var theta = Math.atan(el.elementModel.shapeModel.slope); + var xAdj = Math.abs((val/2)*Math.sin(theta)); + var yAdj = Math.abs((val/2)*Math.cos(theta)); + var dX = ~~(xAdj*2 - oldXAdj*2); + var dY = ~~(yAdj*2 - oldYAdj*2); + + if(delta > 0) + { + l -= dX*2; + t -= dY*2; + w += dX*2; + h += dY*2; + } + + el.elementModel.shapeModel.GLGeomObj.setXAdj(xAdj); + el.elementModel.shapeModel.GLGeomObj.setYAdj(yAdj); + + } + } + this.application.ninja.elementMediator.setProperties([el], + { "left": [l + "px"], + "top": [t + "px"], + "width": [w + "px"], + "height": [h + "px"] }, eventType, source ); el.elementModel.shapeModel.GLGeomObj.setStrokeWidth(val); el.elementModel.shapeModel.GLGeomObj.buildBuffers(); el.elementModel.shapeModel.GLWorld.render(); -- cgit v1.2.3 From a11ef2eed7049835c8bdfa50a2b893632c46eaa0 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 4 Apr 2012 11:11:58 -0700 Subject: Squashed commit of Preparing for the montage undo-manager: Architecture changes Reworked the add and remove elements into 1 function which can take 1 or more elements. Removed the _element from the selection array Many other changes related to those 2 changes Undo/Redo shortcuts are now using montage undo/redo manager. Signed-off-by: Valerio Virgillito --- js/controllers/elements/shapes-controller.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'js/controllers/elements/shapes-controller.js') diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index ef453bea..c9164e3e 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -72,8 +72,9 @@ exports.ShapesController = Montage.create(CanvasController, { canvas.setAttribute("data-RDGE-id", njModule.NJUtils.generateRandom()); canvas.width = el.width; canvas.height = el.height; - this.application.ninja.elementMediator.replaceElement(el, canvas); - NJevent("elementDeleted", el); + canvas.elementModel = el.elementModel; + this.application.ninja.currentDocument.documentRoot.replaceChild(canvas, el); + NJevent("elementsRemoved", el); el = canvas; this.toggleWebGlMode(el, value); el.elementModel.shapeModel.GLWorld.render(); -- cgit v1.2.3 From db0fa4e454b76d8a2bd6ba47c6f10166761179e7 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 4 Apr 2012 14:06:38 -0700 Subject: Adding replaceElement routine and event so Timeline can avoid removing and adding layers and PI and SelectionController can avoid deselecting and reselecting the element. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) (limited to 'js/controllers/elements/shapes-controller.js') diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index c9164e3e..e792c646 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -73,12 +73,8 @@ exports.ShapesController = Montage.create(CanvasController, { canvas.width = el.width; canvas.height = el.height; canvas.elementModel = el.elementModel; - this.application.ninja.currentDocument.documentRoot.replaceChild(canvas, el); - NJevent("elementsRemoved", el); - el = canvas; - this.toggleWebGlMode(el, value); - el.elementModel.shapeModel.GLWorld.render(); - this.application.ninja.selectionController.selectElement(el); + this.toggleWebGlMode(canvas, value); + this.application.ninja.elementMediator.replaceElement(canvas, el); return; case "strokeMaterial": var sm = Object.create(MaterialsModel.getMaterial(value)); -- cgit v1.2.3