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') 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') 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') 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 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 61a419422b1a05a779fd9a66c53de3fa8ab5f65a Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Thu, 22 Mar 2012 10:28:34 -0700 Subject: - enable/disable save, saveAs, saveAll, close, closeAll as per documents open - added close file and close all menu items Signed-off-by: Ananya Sen Conflicts: js/helper-classes/3D/draw-utils.js Signed-off-by: Ananya Sen --- js/controllers/document-controller.js | 26 +++++++++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) (limited to 'js/controllers') diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js index 7d982a62..4363e440 100755 --- a/js/controllers/document-controller.js +++ b/js/controllers/document-controller.js @@ -32,22 +32,30 @@ var DocumentController = exports.DocumentController = Montage.create(Component, _iframeHolder: { value: null, enumerable: false }, _textHolder: { value: null, enumerable: false }, _codeMirrorCounter: {value: 1, enumerable: false}, + + canSave:{value: false},//for Save menu state update + canSaveAll:{value: false},//for Save All menu state update activeDocument: { get: function() { return this._activeDocument; }, set: function(doc) { - if(!!this._activeDocument) this._activeDocument.isActive = false; - + if(!!this._activeDocument){ this._activeDocument.isActive = false;} this._activeDocument = doc; if(!!this._activeDocument){ - if(this._documents.indexOf(doc) === -1) this._documents.push(doc); this._activeDocument.isActive = true; + if(!!this._activeDocument.editor){ this._activeDocument.editor.focus(); } + + this.canSave = doc.needsSave; + this.canSaveAll = doc.needsSave; + }else{ + this.canSave = false; + this.canSaveAll = false; } } }, @@ -61,6 +69,7 @@ var DocumentController = exports.DocumentController = Montage.create(Component, this.eventManager.addEventListener("executeSaveAs", this, false); this.eventManager.addEventListener("executeSaveAll", this, false); this.eventManager.addEventListener("executeFileClose", this, false); + this.eventManager.addEventListener("executeFileCloseAll", this, false); this.eventManager.addEventListener("styleSheetDirty", this, false); @@ -172,6 +181,17 @@ var DocumentController = exports.DocumentController = Montage.create(Component, } }, //////////////////////////////////////////////////////////////////// + handleExecuteFileCloseAll:{ + value: function(event) { + var i=0; + if(this.activeDocument && this.application.ninja.coreIoApi.cloudAvailable()){ + while(this._documents.length > 0){ + this.closeDocument(this._documents[this._documents.length -1].uuid); + } + } + } + }, + //////////////////////////////////////////////////////////////////// // fileSaveResult: { value: function (result) { -- cgit v1.2.3 From fea875906664f12feaad0f282901fa8d9a8b054a Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 22 Mar 2012 11:52:44 -0700 Subject: Presets Panel - Adding presets controller and removing functionality from panel code --- js/controllers/presets-controller.js | 108 +++++++++++++++++++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 js/controllers/presets-controller.js (limited to 'js/controllers') diff --git a/js/controllers/presets-controller.js b/js/controllers/presets-controller.js new file mode 100644 index 00000000..7152ba93 --- /dev/null +++ b/js/controllers/presets-controller.js @@ -0,0 +1,108 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + + +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; + +exports.PresetsController = Montage.create(Component, { + + hasTemplate : { + value: false + }, + + transitionClass : { + value : "nj-preset-transition" + }, + + addTransition: { + value: function(element) { + element.classList.add(this.transitionClass); + element.addEventListener("webkitTransitionEnd", this, true); + } + }, + + captureWebkitTransitionEnd : { + value : function(e) { + var el = e.target; + el.classList.remove(this.transitionClass); + el.removeEventListener("webkitTransitionEnd", this, true); + } + }, + + applyPreset : { + value: function(presetData, useTransition) { + var selection = this.application.ninja.selectedElements; + + if(!selection || !selection.length || selection.length === 0) { return false; } + + var stylesController = this.application.ninja.stylesController, + selectorBase = presetData.selectorBase, + rules = []; + + selectorBase = stylesController.generateClassName(selectorBase); + + presetData.rules.forEach(function(rule, i) { + ///// Treat keyframed rules differently + if(rule.isKeyFrameRule) { + this.application.ninja.stylesController.addRule( + '@-webkit-keyframes ' + presetData.selectorBase, + this.stringifyKeys(rule.keys) + ); + } else { + var suffix = rule.selectorSuffix || ''; + rules.push(stylesController.addRule('.'+selectorBase + suffix, rule.styles)); + } + }, this); + + selection.forEach(function(element) { + var el = element._element; + + if(useTransition) { + this.addTransition(el); + } + + el.classList.add(selectorBase); + + //// Keep track of elements with presets and don't add duplicates + this.setCachedPreset(el, presetData.id, rules); + + }, this); + + } + }, + + setCachedPreset : { + value: function(el, presetId, rules) { + + } + }, + + getPresets : { + value: function(element) { + + } + + }, + + stringifyKeys : { + value: function(keysArray) { + var keysString = ''; + + keysArray.forEach(function(key) { + var styles = '', style; + + for(style in key.styles) { + styles += style + ':' + key.styles[style] + '; '; + } + + keysString += key.keyText + ' {' + styles + ' }'; + }); + + return keysString; + } + } +}); \ No newline at end of file -- 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 db6c0d20eba328408b37b65e67215d1866100c18 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Tue, 27 Mar 2012 11:34:06 -0700 Subject: removed trace statement Signed-off-by: Valerio Virgillito --- js/controllers/document-controller.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/controllers') diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js index d5556fa8..b6d9dc67 100755 --- a/js/controllers/document-controller.js +++ b/js/controllers/document-controller.js @@ -71,7 +71,7 @@ var DocumentController = exports.DocumentController = Montage.create(Component, handleAddComponentFirstDraw: { value: function (e) { //TODO: Add logic to reparse the document for dynamically added styles - console.log(e); + //console.log(e); } }, -- 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/color-controller.js | 4 ++-- js/controllers/elements/shapes-controller.js | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) (limited to 'js/controllers') diff --git a/js/controllers/color-controller.js b/js/controllers/color-controller.js index 8e000b19..c6d664cf 100755 --- a/js/controllers/color-controller.js +++ b/js/controllers/color-controller.js @@ -227,14 +227,14 @@ exports.ColorController = Montage.create(Component, { // this.fill = color; // - if(e._event.wasSetByCode && mode !== 'nocolor') return; + if(e._event.wasSetByCode) return; // this.setColor(mode, color, true); } else if (input === 'stroke') { // this.stroke = color; // - if(e._event.wasSetByCode && mode !== 'nocolor') return; + if(e._event.wasSetByCode) return; this.setColor(mode, color, false); } 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 7aefa059c79c9bef5c7a8a93cdfbd1ce55f69118 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 29 Mar 2012 16:28:34 -0700 Subject: Presets - Remove style transition when transition doesn't start. Also added temporary fix for aggregating animations (from timeline/presets) --- js/controllers/presets-controller.js | 76 ++++++++++++++++++++++++------------ 1 file changed, 51 insertions(+), 25 deletions(-) (limited to 'js/controllers') diff --git a/js/controllers/presets-controller.js b/js/controllers/presets-controller.js index 7152ba93..e436023a 100644 --- a/js/controllers/presets-controller.js +++ b/js/controllers/presets-controller.js @@ -20,14 +20,39 @@ exports.PresetsController = Montage.create(Component, { addTransition: { value: function(element) { + var transitionDuration; + element.classList.add(this.transitionClass); element.addEventListener("webkitTransitionEnd", this, true); + + + //// TODO: replace this hack when webkit supports transitionStart event + transitionDuration = this.application.ninja.stylesController.getElementStyle(element, '-webkit-transition-duration', true); + element.njTimeout = window.setTimeout(function() { + this.captureWebkitTransitionEnd({ + 'target': element + }); + }.bind(this), this._getMilliseconds(transitionDuration) + 100); + } + }, + + _getMilliseconds : { + value: function(duration) { + if(duration.indexOf('ms') !== -1) { + return parseInt(duration); + } else { + return parseFloat(duration)*1000; + } } }, captureWebkitTransitionEnd : { value : function(e) { var el = e.target; + + //// TODO: replace this hack when webkit supports transitionStart event (see above) + window.clearTimeout(el.njTimeout); + el.classList.remove(this.transitionClass); el.removeEventListener("webkitTransitionEnd", this, true); } @@ -41,30 +66,25 @@ exports.PresetsController = Montage.create(Component, { var stylesController = this.application.ninja.stylesController, selectorBase = presetData.selectorBase, - rules = []; + rules = [], + animationNames = []; selectorBase = stylesController.generateClassName(selectorBase); - presetData.rules.forEach(function(rule, i) { - ///// Treat keyframed rules differently - if(rule.isKeyFrameRule) { - this.application.ninja.stylesController.addRule( - '@-webkit-keyframes ' + presetData.selectorBase, - this.stringifyKeys(rule.keys) - ); - } else { - var suffix = rule.selectorSuffix || ''; - rules.push(stylesController.addRule('.'+selectorBase + suffix, rule.styles)); - } - }, this); - selection.forEach(function(element) { - var el = element._element; + var el = element._element, + animationName; if(useTransition) { this.addTransition(el); } + ///// TODO: remove when we find out what to do with competing animations + animationName = stylesController.getElementStyle(el, '-webkit-animation-name'); + if(animationName) { + animationNames.push(animationName); + } + el.classList.add(selectorBase); //// Keep track of elements with presets and don't add duplicates @@ -72,20 +92,26 @@ exports.PresetsController = Montage.create(Component, { }, this); - } - }, - - setCachedPreset : { - value: function(el, presetId, rules) { + presetData.rules.forEach(function(rule, i) { + ///// Treat keyframed rules differently + if(rule.isKeyFrameRule) { + this.application.ninja.stylesController.addRule( + '@-webkit-keyframes ' + presetData.selectorBase, + this.stringifyKeys(rule.keys) + ); + } else { + var suffix = rule.selectorSuffix || ''; - } - }, + ///// TODO: remove when we find out what to do with competing animations + if(rule.styles['-webkit-animation-name']) { + rule.styles['-webkit-animation-name'] += ',' + animationNames.join(','); + } - getPresets : { - value: function(element) { + rules.push(stylesController.addRule('.'+selectorBase + suffix, rule.styles)); + } + }, this); } - }, stringifyKeys : { -- 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(CanvasControl