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 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 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: Nivesh Rajbhandari Date: Thu, 5 Apr 2012 15:53:20 -0700 Subject: Fix for line tool not working because PI requests fill color for line as well and line shape doesn't have getFillColor method. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 11 ++++++++++- 1 file changed, 10 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 d1bc1fb7..514b1472 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -386,7 +386,16 @@ exports.ShapesController = Montage.create(CanvasController, { value: function(el, isFill) { if(isFill) { - return this.application.ninja.colorController.colorModel.webGlToColor(el.elementModel.shapeModel.GLGeomObj.getFillColor()); + // Properties Panel asks for fill color even for shapes that only have strokes + // Check that shape object has a getFillColor method before getting fills + if(el.elementModel.shapeModel.GLGeomObj.getFillColor) + { + return this.application.ninja.colorController.colorModel.webGlToColor(el.elementModel.shapeModel.GLGeomObj.getFillColor()); + } + else + { + return null; + } } else { -- cgit v1.2.3 From d42af4f0f5e893ab0e1f74f50055e0be3bd9e78e Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 5 Apr 2012 16:43:25 -0700 Subject: -webkit-transform-style needs to be set to preserve-3d for shapes regardless of whether they are 2d shapes or WebGL shapes. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 1 - 1 file changed, 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 514b1472..51ddea20 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -629,7 +629,6 @@ 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.importJSON(worldData); el.elementModel.shapeModel.GLGeomObj = world.getGeomRoot(); } -- cgit v1.2.3 From c62c5c4287a1ee8a276b32dc61f06abbc24818ec Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 6 Apr 2012 11:23:11 -0700 Subject: Grow/shrink Line, Oval and Rectangles when changing stroke size. Other shape types will be handled separately for now. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 90 ++++++++++++++++------------ 1 file changed, 51 insertions(+), 39 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 51ddea20..14cdc473 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -22,53 +22,65 @@ 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") + // TODO - For now, just handle Line, Rectangle and Oval. Eventually, move this into each class's + // setStrokeWidth code like SubPath and BrushStroke do. + var geomType = el.elementModel.shapeModel.GLGeomObj.geomType(); + if( (geomType > 0) && (geomType < 4) ) { - var slope = el.elementModel.shapeModel.slope; - // set the dimensions - if(slope === "horizontal") + // 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(geomType === 3) { - 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) + var slope = el.elementModel.shapeModel.slope; + // set the dimensions + if(slope === "horizontal") + { + h = Math.max(val, 1); + t -= ~~(delta/2); + } + else if(slope === "vertical") { - l -= dX*2; - t -= dY*2; + w = Math.max(val, 1); + l -= ~~(delta/2); + } + 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); + + l -= dX; + t -= dY; w += dX*2; h += dY*2; - } - - el.elementModel.shapeModel.GLGeomObj.setXAdj(xAdj); - el.elementModel.shapeModel.GLGeomObj.setYAdj(yAdj); + el.elementModel.shapeModel.GLGeomObj.setXAdj(xAdj); + el.elementModel.shapeModel.GLGeomObj.setYAdj(yAdj); + } + } + else + { + l -= ~~(delta/2); + t -= ~~(delta/2); + w += delta; + h += delta; } + this.application.ninja.elementMediator.setProperties([el], + { "left": [l + "px"], + "top": [t + "px"], + "width": [w + "px"], + "height": [h + "px"] }, + eventType, source ); } - 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