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') 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 52fac825174d16e3ff6875fc497d3f3cfaf4812c Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 21 Mar 2012 12:02:36 -0700 Subject: Get matrix and perspective distance from styles controller. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/element-controller.js | 59 +++--------------------- js/controllers/elements/stage-controller.js | 7 ++- js/controllers/styles-controller.js | 66 ++++++++++++++++++++++++++- 3 files changed, 75 insertions(+), 57 deletions(-) (limited to 'js/controllers') diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index b35251ad..4f360bb9 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -223,11 +223,10 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, if (el) { - var xformStr = this.application.ninja.elementMediator.getProperty(el, "-webkit-transform"); - if (xformStr) - mat = this.transformStringToMat( xformStr ); - if (!mat) + mat = this.application.ninja.stylesController.getMatrixFromElement(el, false); + if (!mat) { mat = Matrix.I(4); + } } el.elementModel.props3D.matrix3d = mat; @@ -244,23 +243,9 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, } else { - var dist = 1400; - - var str = this.getProperty(el, "-webkit-transform"); - if (str) - { - var index1 = str.indexOf( "perspective("); - if (index1 >= 0) - { - index1 += 12; // do not include 'perspective(' - var index2 = str.indexOf( ")", index1 ); - if (index2 >= 0) - { - var substr = str.substr( index1, (index2-index1)); - if (substr && (substr.length > 0)) - dist = MathUtils.styleToNumber( substr ); - } - } + var dist = this.application.ninja.stylesController.getPerspectiveDistFromElement(el, false); + if(dist === null) { + dist = 1400; } el.elementModel.props3D.perspectiveDist = dist; @@ -303,36 +288,6 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, elt.elementModel.props3D.z3D = ~~(elt3DInfo.translation[2]); } } - }, - - transformStringToMat: { - value: function( str ) { - var rtnMat; - - var index1 = str.indexOf( "matrix3d("); - if (index1 >= 0) - { - index1 += 9; // do not include 'matrix3d(' - var index2 = str.indexOf( ")", index1 ); - if (index2 >= 0) - { - var substr = str.substr( index1, (index2-index1)); - if (substr && (substr.length > 0)) - { - var numArray = substr.split(','); - var nNums = numArray.length; - if (nNums == 16) - { - // gl-matrix wants row order - rtnMat = numArray; - for (var i=0; i<16; i++) - rtnMat[i] = Number( rtnMat[i] ); - } - } - } - } - - return rtnMat; - } } + }); \ No newline at end of file diff --git a/js/controllers/elements/stage-controller.js b/js/controllers/elements/stage-controller.js index 97ea3aa5..2734e226 100755 --- a/js/controllers/elements/stage-controller.js +++ b/js/controllers/elements/stage-controller.js @@ -143,11 +143,10 @@ exports.StageController = Montage.create(ElementController, { if (el) { - var xformStr = this.application.ninja.elementMediator.getProperty(el, "-webkit-transform"); - if (xformStr) - mat = this.transformStringToMat( xformStr ); - if (!mat) + mat = this.application.ninja.stylesController.getMatrixFromElement(el, true); + if (!mat) { mat = Matrix.I(4); + } var zoom = this.application.ninja.elementMediator.getProperty(el, "zoom"); if (zoom) diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index addfc24e..5d5f27ba 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js @@ -836,7 +836,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { ///// For a given CSSKeyframesRule, we may add styles to the keyframe at ///// given index. - setKeyframeStyle : { + setKeyframeStyles : { value : function(rule, keyframeIndex, property, value, useImportant) { return this.setStyles(rule.cssRules[keyframeIndex], property, value, useImportant); } @@ -1124,6 +1124,70 @@ var stylesController = exports.StylesController = Montage.create(Component, { } }, + ///// Get Matrix From Element + ///// Returns the matrix from an element's -webkit-transform + //// TODO - This routine should eventually check for other transform styles, i.e., rotateX, translateZ, etc. + + getMatrixFromElement : { + value: function(element, isStage) { + var xformStr = this.getElementStyle(element, "-webkit-transform", false, isStage), + mat; + + if (xformStr) { + var index1 = xformStr.indexOf( "matrix3d("); + if (index1 >= 0) { + index1 += 9; // do not include 'matrix3d(' + var index2 = xformStr.indexOf( ")", index1 ); + if (index2 >= 0) { + var substr = xformStr.substr( index1, (index2-index1)); + if (substr && (substr.length > 0)) { + var numArray = substr.split(','); + var nNums = numArray.length; + if (nNums == 16) { + // gl-matrix wants row order + mat = numArray; + for (var i=0; i<16; i++) { + mat[i] = Number( mat[i] ); + } + } + } + } + } + } + return mat; + } + }, + + ///// Get Perspective Distance From Element + ///// Returns the perspective from an element's -webkit-transform + + getPerspectiveDistFromElement : { + value: function(element, isStage) { + var xformStr = this.getElementStyle(element, "-webkit-transform", false, isStage), + dist; + + if (xformStr) { + var index1 = xformStr.indexOf( "perspective("); + if (index1 >= 0) { + index1 += 12; // do not include 'perspective(' + var index2 = xformStr.indexOf( ")", index1 ); + if (index2 >= 0) { + var substr = xformStr.substr( index1, (index2-index1)); + if (substr && (substr.length > 0)) { + dist = parseInt( substr ); + } + } + } + } else { + xformStr = this.getElementStyle(element, "-webkit-perspective", false, isStage); + if(xformStr) { + dist = parseInt(xformStr); + } + } + return dist; + } + }, + ///// Create Rule From Inline Style ///// Creates a rule for an inline style with a specified, or partially random selector. -- cgit v1.2.3 From 3987b73569e58843f2a91c0c6c4e4132f51ac247 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 21 Mar 2012 17:13:56 -0700 Subject: Do not set webkit-transform styles on elements unless 3d is used on them. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/element-controller.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/controllers') diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index 4f360bb9..9cba6d94 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -244,7 +244,7 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, else { var dist = this.application.ninja.stylesController.getPerspectiveDistFromElement(el, false); - if(dist === null) { + if(dist == null) { dist = 1400; } -- 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') 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 bda9f8f5829c943486f8850e68c991e83f8fb8c8 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Sat, 24 Mar 2012 13:50:46 -0700 Subject: Adding logic for flatten checkbox in PI. This requires minor modifications to both StageController and ComponentController. Also removing unused global3DSettings CSS. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/component-controller.js | 2 ++ js/controllers/elements/stage-controller.js | 5 +++++ 2 files changed, 7 insertions(+) (limited to 'js/controllers') diff --git a/js/controllers/elements/component-controller.js b/js/controllers/elements/component-controller.js index 83450d0f..fbe9a995 100755 --- a/js/controllers/elements/component-controller.js +++ b/js/controllers/elements/component-controller.js @@ -14,6 +14,7 @@ exports.ComponentController = Montage.create(ElementController, { switch(prop) { case "id": case "class": + case "-webkit-transform-style": case "left": case "top": case "width": @@ -34,6 +35,7 @@ exports.ComponentController = Montage.create(ElementController, { switch(p) { case "id": case "class": + case "-webkit-transform-style": case "left": case "top": case "width": diff --git a/js/controllers/elements/stage-controller.js b/js/controllers/elements/stage-controller.js index 2734e226..f2c8fa2d 100755 --- a/js/controllers/elements/stage-controller.js +++ b/js/controllers/elements/stage-controller.js @@ -83,6 +83,8 @@ exports.StageController = Montage.create(ElementController, { return el.elementModel.stageDimension.style.getProperty(p); case "width": return el.elementModel.stageDimension.style.getProperty(p); + case "-webkit-transform-style": + return el.elementModel.stageView.style.getProperty(p); default: return ElementController.getProperty(el, p, false, true); //console.log("Undefined Stage property ", p); @@ -111,6 +113,9 @@ exports.StageController = Montage.create(ElementController, { this.application.ninja.currentDocument.iframe.height = parseInt(value) + 400; el.elementModel.stageDimension.style.setProperty(p, value); break; + case "-webkit-transform-style": + el.elementModel.stageView.style.setProperty(p, value); + break; default: console.log("Undefined property ", p, "for the Stage Controller"); } -- cgit v1.2.3 From b1eb3f5cc37f6e58e765f24221c3f0445a3ee75a Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 27 Mar 2012 10:50:06 -0700 Subject: Check for Viewport case in StageController styles lookup. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/stage-controller.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'js/controllers') diff --git a/js/controllers/elements/stage-controller.js b/js/controllers/elements/stage-controller.js index f2c8fa2d..dc916b1a 100755 --- a/js/controllers/elements/stage-controller.js +++ b/js/controllers/elements/stage-controller.js @@ -84,7 +84,11 @@ exports.StageController = Montage.create(ElementController, { case "width": return el.elementModel.stageDimension.style.getProperty(p); case "-webkit-transform-style": - return el.elementModel.stageView.style.getProperty(p); + if(el.id === "Viewport") { + return this.application.ninja.stylesController.getElementStyle(el, p, false, true); + } else { + return el.elementModel.stageView.style.getProperty(p); + } default: return ElementController.getProperty(el, p, false, true); //console.log("Undefined Stage property ", p); -- 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') 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') 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') 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') 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 ++------ js/controllers/selection-controller.js | 7 +++++++ 2 files changed, 9 insertions(+), 6 deletions(-) (limited to 'js/controllers') 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)); diff --git a/js/controllers/selection-controller.js b/js/controllers/selection-controller.js index dbb3f30d..5665b09c 100755 --- a/js/controllers/selection-controller.js +++ b/js/controllers/selection-controller.js @@ -45,6 +45,7 @@ exports.SelectionController = Montage.create(Component, { this.eventManager.addEventListener("openDocument", this, false); this.eventManager.addEventListener("elementAdded", this, false); this.eventManager.addEventListener("elementsRemoved", this, false); + this.eventManager.addEventListener("elementReplaced", this, false); this.eventManager.addEventListener("selectAll", this, false); this.eventManager.addEventListener("switchDocument", this, false); this.eventManager.addEventListener("closeDocument", this, false); @@ -103,6 +104,12 @@ exports.SelectionController = Montage.create(Component, { } }, + handleElementReplaced: { + value: function(event) { + this.application.ninja.selectedElements[this.application.ninja.selectedElements.indexOf(event.detail.data.oldChild)] = event.detail.data.newChild; + } + }, + handleSelectAll: { value: function(event) { var selected = [], childNodes = []; -- 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') 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') 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') 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') 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