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 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 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(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 b7ca1821ad43403a2a54361ffc6a0cdf9cba0e59 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 2 Apr 2012 15:10:10 -0700 Subject: Animation Presets - Only combine animations if pre-existing animations exist --- js/controllers/presets-controller.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/controllers') diff --git a/js/controllers/presets-controller.js b/js/controllers/presets-controller.js index 9d898a53..975f9f7a 100644 --- a/js/controllers/presets-controller.js +++ b/js/controllers/presets-controller.js @@ -100,7 +100,7 @@ exports.PresetsController = Montage.create(Component, { var suffix = rule.selectorSuffix || ''; ///// TODO: remove when we find out what to do with competing animations - if(rule.styles['-webkit-animation-name']) { + if(rule.styles['-webkit-animation-name'] && animationNames.length) { rule.styles['-webkit-animation-name'] += ',' + animationNames.join(','); } -- 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 a11ef2eed7049835c8bdfa50a2b893632c46eaa0 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 4 Apr 2012 11:11:58 -0700 Subject: Squashed commit of Preparing for the montage undo-manager: Architecture changes Reworked the add and remove elements into 1 function which can take 1 or more elements. Removed the _element from the selection array Many other changes related to those 2 changes Undo/Redo shortcuts are now using montage undo/redo manager. Signed-off-by: Valerio Virgillito --- js/controllers/elements/element-controller.js | 15 ++- js/controllers/elements/shapes-controller.js | 5 +- js/controllers/presets-controller.js | 8 +- js/controllers/selection-controller.js | 147 +++++++------------------- 4 files changed, 52 insertions(+), 123 deletions(-) (limited to 'js/controllers') diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index b35251ad..efb33292 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -5,22 +5,27 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot */ var Montage = require("montage/core/core").Montage, - NJComponent = require("js/lib/nj-base").NJComponent; + Component = require("montage/ui/component").Component; -var ElementController = exports.ElementController = Montage.create(NJComponent, { +exports.ElementController = Montage.create(Component, { addElement: { value: function(el, styles) { this.application.ninja.currentDocument.documentRoot.appendChild(el); - // Nested elements - - // TODO make sure the CSS is correct before nesting elements + // Nested elements - TODO make sure the CSS is correct before nesting elements // this.application.ninja.currentSelectedContainer.appendChild(el); - this.application.ninja.stylesController.setElementStyles(el, styles); + if(styles) { + this.application.ninja.stylesController.setElementStyles(el, styles); + } } }, + // Remove the element from the DOM and clear the GLWord. removeElement: { value: function(el) { + if(el.elementModel && el.elementModel.shapeModel && el.elementModel.shapeModel.GLWorld) { + el.elementModel.shapeModel.GLWorld.clearTree(); + } el.parentNode.removeChild(el); } }, diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index ef453bea..c9164e3e 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -72,8 +72,9 @@ exports.ShapesController = Montage.create(CanvasController, { canvas.setAttribute("data-RDGE-id", njModule.NJUtils.generateRandom()); canvas.width = el.width; canvas.height = el.height; - this.application.ninja.elementMediator.replaceElement(el, canvas); - NJevent("elementDeleted", el); + canvas.elementModel = el.elementModel; + this.application.ninja.currentDocument.documentRoot.replaceChild(canvas, el); + NJevent("elementsRemoved", el); el = canvas; this.toggleWebGlMode(el, value);