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 e1c4f30a4c13d747fa69d78598e0961286bbe571 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 20 Mar 2012 10:59:05 -0700 Subject: Support button control in Properties Panel and use them for edit fill and stroke material. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 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 d72d9c14..b3ac9ddb 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -6,10 +6,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage, CanvasController = require("js/controllers/elements/canvas-controller").CanvasController, - njModule = require("js/lib/NJUtils"); - -var World = require("js/lib/drawing/world").World; -var MaterialsModel = require("js/models/materials-model").MaterialsModel; + njModule = require("js/lib/NJUtils"), + World = require("js/lib/drawing/world").World, + MaterialsModel = require("js/models/materials-model").MaterialsModel; exports.ShapesController = Montage.create(CanvasController, { @@ -100,6 +99,12 @@ exports.ShapesController = Montage.create(CanvasController, { el.elementModel.shapeModel.GLWorld.render(); } break; + case "editStrokeMaterial": + NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.strokeMaterial.getName()}); + break; + case "editFillMaterial": + NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.fillMaterial.getName()}); + break; default: CanvasController.setProperty(el, p, value); } -- cgit v1.2.3 From 49eba848c3006045c6096d21fd8262c9d98a35d8 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 20 Mar 2012 13:47:03 -0700 Subject: IKNINJA-1370 - Toggle WebGL on/off is no longer working in the PI. This bug was injected by some changes in GLWorld.import. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 4 ++-- 1 file changed, 2 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 b3ac9ddb..9b0159d4 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -495,7 +495,7 @@ exports.ShapesController = Montage.create(CanvasController, { world = new World(el, true); el.elementModel.shapeModel.GLWorld = world; el.elementModel.shapeModel.useWebGl = true; - world.import(worldData); + world.import(worldData, true); el.elementModel.shapeModel.GLGeomObj = world.getGeomRoot(); sm = Object.create(MaterialsModel.getMaterial("FlatMaterial")); @@ -531,7 +531,7 @@ exports.ShapesController = Montage.create(CanvasController, { world = new World(el, false); el.elementModel.shapeModel.GLWorld = world; el.elementModel.shapeModel.useWebGl = false; - world.import(worldData); + world.import(worldData, true); el.elementModel.shapeModel.GLGeomObj = world.getGeomRoot(); el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(null); el.elementModel.shapeModel.strokeMaterial = null; -- cgit v1.2.3 From 636014cf5d824909993d7dc3510fbe6ce2fc72f1 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 22 Mar 2012 14:24:46 -0700 Subject: WebGL needs to have 3d styles to render. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 1 + 1 file changed, 1 insertion(+) (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 9b0159d4..689bc421 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -495,6 +495,7 @@ exports.ShapesController = Montage.create(CanvasController, { world = new World(el, true); el.elementModel.shapeModel.GLWorld = world; el.elementModel.shapeModel.useWebGl = true; + el.elementModel.controller.setProperty(el, "-webkit-transform-style", "preserve-3d"); world.import(worldData, true); el.elementModel.shapeModel.GLGeomObj = world.getGeomRoot(); -- cgit v1.2.3 From e52b0dcb9540b854a341a881de2d26aa753e9a82 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 22 Mar 2012 16:18:38 -0700 Subject: Adding checkbox in PI to start/stop WebGL animation preview. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 13 +++++++++++++ 1 file changed, 13 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 b3ac9ddb..9b2fa618 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -105,6 +105,18 @@ exports.ShapesController = Montage.create(CanvasController, { case "editFillMaterial": NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.fillMaterial.getName()}); break; + case "animate": + if(value) + { + el.elementModel.shapeModel.animate = true; + el.elementModel.shapeModel.GLWorld.restartRenderLoop(); + } + else + { + el.elementModel.shapeModel.animate = false; + el.elementModel.shapeModel.GLWorld._canvas.task.stop(); + } + break; default: CanvasController.setProperty(el, p, value); } @@ -123,6 +135,7 @@ exports.ShapesController = Montage.create(CanvasController, { case "border": case "background": case "useWebGl": + case "animate": return this.getShapeProperty(el, p); case "strokeMaterial": case "fillMaterial": -- cgit v1.2.3 From 8e9ac98ea1001289cb3834b262200eee253cb408 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 23 Mar 2012 11:41:11 -0700 Subject: Respect play/pause WebGL animation when saving files and re-rendering caused by geometry changes. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 2 ++ 1 file changed, 2 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 9b2fa618..b060b751 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -109,11 +109,13 @@ exports.ShapesController = Montage.create(CanvasController, { if(value) { el.elementModel.shapeModel.animate = true; + el.elementModel.shapeModel.GLWorld._previewAnimation = true; el.elementModel.shapeModel.GLWorld.restartRenderLoop(); } else { el.elementModel.shapeModel.animate = false; + el.elementModel.shapeModel.GLWorld._previewAnimation = false; el.elementModel.shapeModel.GLWorld._canvas.task.stop(); } break; -- cgit v1.2.3 From 86770d0dba6b137e651cbf5c8d240856be65857c Mon Sep 17 00:00:00 2001 From: hwc487 Date: Fri, 23 Mar 2012 14:59:51 -0700 Subject: Fixed a problem switching from 3D to 2D and back to 3D. --- js/controllers/elements/shapes-controller.js | 28 ++++++++++++++++++++++++---- 1 file changed, 24 insertions(+), 4 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 b060b751..5b9e4672 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -504,13 +504,14 @@ exports.ShapesController = Montage.create(CanvasController, { var sm, fm, world, - worldData = el.elementModel.shapeModel.GLWorld.export(); + worldData = el.elementModel.shapeModel.GLWorld.exportJSON(); if(worldData) { + worldData = this.flip3DSense (worldData ); world = new World(el, true); el.elementModel.shapeModel.GLWorld = world; el.elementModel.shapeModel.useWebGl = true; - world.import(worldData); + world.importJSON(worldData); el.elementModel.shapeModel.GLGeomObj = world.getGeomRoot(); sm = Object.create(MaterialsModel.getMaterial("FlatMaterial")); @@ -540,13 +541,14 @@ exports.ShapesController = Montage.create(CanvasController, { return; } var world, - worldData = el.elementModel.shapeModel.GLWorld.export(); + worldData = el.elementModel.shapeModel.GLWorld.exportJSON(); if(worldData) { + worldData = this.flip3DSense (worldData ); world = new World(el, false); el.elementModel.shapeModel.GLWorld = world; el.elementModel.shapeModel.useWebGl = false; - world.import(worldData); + world.importJSON(worldData); el.elementModel.shapeModel.GLGeomObj = world.getGeomRoot(); el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(null); el.elementModel.shapeModel.strokeMaterial = null; @@ -558,6 +560,24 @@ exports.ShapesController = Montage.create(CanvasController, { } } } + }, + + flip3DSense: { + value: function( importStr ) + { + var jObj; + var index = importStr.indexOf( ';' ); + if ((importStr[0] === 'v') && (index < 24)) + { + // JSON format. separate the version info from the JSON info + //var vStr = importStr.substr( 0, index+1 ); + var jStr = importStr.substr( index+1 ); + jObj = JSON.parse( jStr ); + jObj.webGL = !jObj.webGL; + } + + return jObj; + } } }); -- cgit v1.2.3 From 6d03f6716104bf5b5daf9c8399623797e1672c89 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 27 Mar 2012 11:47:43 -0700 Subject: Reverting change for IKNinja-1355 because it is causing line tool to fail. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 4 ++++ 1 file changed, 4 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 5b9e4672..f0e9458b 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -274,6 +274,10 @@ exports.ShapesController = Montage.create(CanvasController, { color = this.getShapeProperty(el, "stroke"); } + if(!css) { + return null; + } + css = this.application.ninja.colorController.colorModel.webGlToCss(color); return this.application.ninja.colorController.getColorObjFromCss(css); } -- 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 From 4dc89306c43e86cdac254c81fb9bb3a92eb4a8b9 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 5 Apr 2012 12:12:36 -0700 Subject: Removing fill, stroke, fillMaterial and strokeMaterial from the shapeModel cache because they can easily get out of sync with the actual colors and materials. Instead, we will always query the object for these values. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 9 +-------- 1 file changed, 1 insertion(+), 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 b97d04b0..d1bc1fb7 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -386,14 +386,7 @@ exports.ShapesController = Montage.create(CanvasController, { value: function(el, isFill) { if(isFill) { - if(el.elementModel.shapeModel.GLGeomObj.getFillColor) - { - return this.application.ninja.colorController.colorModel.webGlToColor(el.elementModel.shapeModel.GLGeomObj.getFillColor()); - } - else - { - return null; - } + return this.application.ninja.colorController.colorModel.webGlToColor(el.elementModel.shapeModel.GLGeomObj.getFillColor()); } else { -- cgit v1.2.3 From 8122876daad3e5a03b33f522751f3aca354615ca Mon Sep 17 00:00:00 2001 From