From 978b9049d057d2a0995758275f68da8641193201 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 27 Jun 2012 14:21:27 -0700 Subject: Integrating Materials UI changes. Squashed commit of the following: commit 89ccb55130e67c4516e616ccc56d2a649a2b9160 Author: Nivesh Rajbhandari Date: Wed Jun 27 14:20:01 2012 -0700 Position Materials Editor popup and change buttons' text color. Signed-off-by: Nivesh Rajbhandari commit 89bca82adc781f4913f8d302a49a8baa907631c5 Author: Nivesh Rajbhandari Date: Wed Jun 27 12:00:51 2012 -0700 Support deleting and editing custom materials. Signed-off-by: Nivesh Rajbhandari commit 5be5160c4786beb70e8ad4d75562adb135718c6c Merge: 1d9d9f6 2ebf3e3 Author: Nivesh Rajbhandari Date: Wed Jun 27 11:11:37 2012 -0700 Merge branch 'refs/heads/ninja-internal' into WebGLMaterials Conflicts: js/data/panels-data.js Signed-off-by: Nivesh Rajbhandari commit 1d9d9f6e66ea7585f07ed461cebba99e71f65de0 Author: Nivesh Rajbhandari Date: Tue Jun 26 22:01:22 2012 -0700 "Save as" support to duplicate material with modified settings. Also removed Add button and disabled Reset button for now. Signed-off-by: Nivesh Rajbhandari commit bf1037508dbc686f2884765344832f906cbf06d0 Author: Nivesh Rajbhandari Date: Tue Jun 26 17:23:31 2012 -0700 Added UI for duplicating and deleting materials in the Materials Library. Signed-off-by: Nivesh Rajbhandari commit 54930792f9c417df5f739831164aa1f96a41d67a Author: Nivesh Rajbhandari Date: Tue Jun 26 14:29:17 2012 -0700 Added preview of material in materials editor popup and fixed some styling. Signed-off-by: Nivesh Rajbhandari Signed-off-by: Nivesh Rajbhandari --- .../materials-popup.reel/materials-popup.css | 36 ++- .../materials-popup.reel/materials-popup.html | 26 +- .../materials-popup.reel/materials-popup.js | 333 +++++++-------------- 3 files changed, 163 insertions(+), 232 deletions(-) (limited to 'js/panels/Materials/materials-popup.reel') diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.css b/js/panels/Materials/materials-popup.reel/materials-popup.css index 943d9bcb..2de03e91 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.css +++ b/js/panels/Materials/materials-popup.reel/materials-popup.css @@ -6,7 +6,8 @@ */ .materials_popup { - width:400px; + width:auto; + min-width: 300px; font-size: 12px; overflow: hidden; background: #494949; @@ -32,6 +33,7 @@ .mp_preview { height: 100px; text-align: center; + margin: 20px 0 10px 0; } .mp_property @@ -59,7 +61,19 @@ .mp_property .hottext, .mp_property .hottextInput { - width: 30px; + width: 23px; +} + +.mp_property .hottext +{ + color: white; + background: none; +} + +.mp_property .hottextInput +{ + color: black; + background: white; } .mp_property .button @@ -76,7 +90,8 @@ .mp_properties_list { - padding-bottom: 8px; + padding-bottom: 8px; + padding-right: 20px; } .mp_properties_list > .mp_property > .colortoolbar @@ -104,13 +119,28 @@ display: block; cursor: pointer; } +.mp_buttons button:hover, +.mp_buttons button:active { + color: white; +} .mp_buttons .mp_cancel_btn { float: left; width: 60px; } +.mp_buttons .mp_saveAs_btn { + float: right; + width: 60px; +} + .mp_buttons .mp_ok_btn { float: right; width: 30px; + margin-left:4px; +} + +.materials_popup .mp_reset_btn { + float: right; + margin-right: 8px; } \ No newline at end of file diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.html b/js/panels/Materials/materials-popup.reel/materials-popup.html index bac722cd..c2f3af4e 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.html +++ b/js/panels/Materials/materials-popup.reel/materials-popup.html @@ -27,6 +27,21 @@ "label": "Cancel" } }, + "saveAsButton": { + "prototype": "montage/ui/button.reel", + "properties": { + "element": {"#": "mp_saveAs_btn"}, + "label": "Save As..." + } + }, + "resetButton": { + "prototype": "montage/ui/button.reel", + "properties": { + "element": {"#": "mp_reset_btn"}, + "label": "Reset", + "enabled": false + } + }, "eventDelegator": { "prototype": "montage/core/event/action-event-listener", "properties": { @@ -79,7 +94,10 @@ "element": {"#": "materials_popup"}, "okButton": {"@": "okButton"}, "cancelButton": {"@": "cancelButton"}, - "materialTitle": {"#": "mp_title"} + "saveAsButton": {"@": "saveAsButton"}, + "resetButton": {"@": "resetButton"}, + "materialTitle": {"#": "mp_title"}, + "previewCanvas": {"#": "mp_preview_canvas"} } } } @@ -91,15 +109,19 @@
Material Name
-
Preview Pane
+
+ +
+
+
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js index 40f07509..3f702459 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.js +++ b/js/panels/Materials/materials-popup.reel/materials-popup.js @@ -6,7 +6,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component, - MaterialsModel = require("js/models/materials-model").MaterialsModel; + MaterialsModel = require("js/models/materials-model").MaterialsModel, + NJUtils = require("js/lib/NJUtils").NJUtils, + World = require("js/lib/drawing/world").World, + Rectangle = require("js/lib/geom/rectangle").Rectangle; //////////////////////////////////////////////////////////////////////// //Exporting as MaterialsPopup @@ -22,11 +25,35 @@ exports.MaterialsPopup = Montage.create(Component, { serializable: true }, + saveAsButton: { + value: null, + serializable: true + }, + + resetButton: { + value: null, + serializable: true + }, + + materialsLibraryRef: { + value: null + }, + materialTitle: { value: null, serializable: true }, + previewCanvas: { + value: null, + serializable: true + }, + + previewShape: { + value: null, + serializable: true + }, + // Material Properties _materialName: { enumerable: true, @@ -65,6 +92,12 @@ exports.MaterialsPopup = Montage.create(Component, { } break; + case "Save As...": + this.saveAs(); + break; + case "Reset": + this.reset(); + break; } // Notify Materials Library to close popup @@ -72,6 +105,28 @@ exports.MaterialsPopup = Montage.create(Component, { } }, + saveAs: + { + value: function() + { + console.log("Save As..."); + var materialCopy = prompt("Save material as", this._materialName + "_Copy"); + + if (materialCopy) + { + this.materialsLibraryRef.duplicateMaterial(materialCopy); + } + } + }, + + reset: + { + value: function() + { + console.log("Reset"); + } + }, + revertToOriginalValues: { value: function() @@ -195,6 +250,7 @@ exports.MaterialsPopup = Montage.create(Component, { this._material.setProperty( this._propNames[index], value ); } + var obj, matArray, matTypeArray, nMats, iMat, world; if (this._useSelection) { console.log( "apply to selection" ); @@ -206,25 +262,38 @@ exports.MaterialsPopup = Montage.create(Component, { for (var iObj=0; iObj --- .../materials-popup.reel/materials-popup.js | 51 +++++++++++----------- 1 file changed, 26 insertions(+), 25 deletions(-) (limited to 'js/panels/Materials/materials-popup.reel') diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js index 3f702459..9b7b031b 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.js +++ b/js/panels/Materials/materials-popup.reel/materials-popup.js @@ -69,11 +69,11 @@ exports.MaterialsPopup = Montage.create(Component, { switch(event._currentTarget.label) { case "Cancel": - console.log("Cancel material edit"); +// console.log("Cancel material edit"); this.revertToOriginalValues(); break; case "OK": - console.log("Committing material with the following values:"); +// console.log("Committing material with the following values:"); for(var i=0, len=this.materialsProperties.childComponents.length; i< len; i++) { var childControl = this.materialsProperties.childComponents[i]; @@ -109,7 +109,7 @@ exports.MaterialsPopup = Montage.create(Component, { { value: function() { - console.log("Save As..."); +// console.log("Save As..."); var materialCopy = prompt("Save material as", this._materialName + "_Copy"); if (materialCopy) @@ -123,7 +123,7 @@ exports.MaterialsPopup = Montage.create(Component, { { value: function() { - console.log("Reset"); +// console.log("Reset"); } }, @@ -186,15 +186,15 @@ exports.MaterialsPopup = Montage.create(Component, { { value: function(event) { - if(typeof event.propertyValue === "object") - { - console.log(event.propertyLabel + " changing to "); - console.dir(event.propertyValue); - } - else - { - console.log(event.propertyLabel + " changing to " + event.propertyValue); - } +// if(typeof event.propertyValue === "object") +// { +// console.log(event.propertyLabel + " changing to "); +// console.dir(event.propertyValue); +// } +// else +// { +// console.log(event.propertyLabel + " changing to " + event.propertyValue); +// } if (event.propertyLabel && event.propertyValue) this.applyProperty( event.propertyLabel, event.propertyValue ); @@ -206,15 +206,15 @@ exports.MaterialsPopup = Montage.create(Component, { value: function(theEvent) { var event = theEvent._event; - if(typeof event.propertyValue === "object") - { - console.log(event.propertyLabel + " changed to "); - console.dir(event.propertyValue); - } - else - { - console.log(event.propertyLabel + " changed to " + event.propertyValue); - } +// if(typeof event.propertyValue === "object") +// { +// console.log(event.propertyLabel + " changed to "); +// console.dir(event.propertyValue); +// } +// else +// { +// console.log(event.propertyLabel + " changed to " + event.propertyValue); +// } if (event.propertyLabel) this.applyProperty( event.propertyLabel, event.propertyValue ); @@ -253,7 +253,7 @@ exports.MaterialsPopup = Montage.create(Component, { var obj, matArray, matTypeArray, nMats, iMat, world; if (this._useSelection) { - console.log( "apply to selection" ); +// console.log( "apply to selection" ); var selection = this.application.ninja.selectedElements; if (selection && (selection.length > 0)) @@ -385,7 +385,7 @@ exports.MaterialsPopup = Montage.create(Component, { this.previewShape.setFillMaterial(this._material); this.previewShape.buildBuffers(); - world.render(); + world.restartRenderLoop(); } }, @@ -393,7 +393,8 @@ exports.MaterialsPopup = Montage.create(Component, { destroy: { enumerable: false, value: function() { - // add cleanup routines here +// console.log("cleanup routines here"); + this.previewShape.getWorld().stop(); } }, -- cgit v1.2.3 From ac27d538af33ca8d67d3d88729f49c05793afda7 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 9 Jul 2012 11:43:36 -0700 Subject: PI, drawing and editing fixes for shapes and materials. IKNinja-1841 - Cannot change webgl shape with LinearGradient and RadialGradient to solid color. IKNINJA-1851 - Cannot draw webgl shapes with Linear/RadialGradient material. IKNINJA-1864 - PI doesn't update the color of shape if WebGL material switches to Flat. IKNINJA-1886 - Gradient edits not applied to WebGL Stage object. Signed-off-by: Nivesh Rajbhandari --- .../materials-popup.reel/materials-popup.css | 10 +++ .../materials-popup.reel/materials-popup.js | 76 ++++++++++++++++++---- 2 files changed, 74 insertions(+), 12 deletions(-) (limited to 'js/panels/Materials/materials-popup.reel') diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.css b/js/panels/Materials/materials-popup.reel/materials-popup.css index 2de03e91..b57d4a03 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.css +++ b/js/panels/Materials/materials-popup.reel/materials-popup.css @@ -88,6 +88,16 @@ position: relative; } +.mp_property .gradientpicker +{ + top: 0; +} + +.mp_property .gradientpicker .type +{ + display: none; +} + .mp_properties_list { padding-bottom: 8px; diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js index 9b7b031b..a1415343 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.js +++ b/js/panels/Materials/materials-popup.reel/materials-popup.js @@ -9,7 +9,8 @@ var Montage = require("montage/core/core").Montage, MaterialsModel = require("js/models/materials-model").MaterialsModel, NJUtils = require("js/lib/NJUtils").NJUtils, World = require("js/lib/drawing/world").World, - Rectangle = require("js/lib/geom/rectangle").Rectangle; + Rectangle = require("js/lib/geom/rectangle").Rectangle, + ShapesController = require("js/controllers/elements/shapes-controller").ShapesController; //////////////////////////////////////////////////////////////////////// //Exporting as MaterialsPopup @@ -341,6 +342,10 @@ exports.MaterialsPopup = Montage.create(Component, { rtnValue = value; break; + case "gradient": + rtnValue = value; + break; + default: console.log( "unrecognized material control type: " + type ); break; @@ -432,7 +437,11 @@ exports.MaterialsPopup = Montage.create(Component, { { this._material = material; this._originalValues = material.exportJSON(); - this.materialsData = this.getMaterialData( material ); + if((materialID === "Linear Gradient") || (materialID === "Radial Gradient")) { + this.materialsData = this.getEditableProperties( material ); + } else { + this.materialsData = this.getMaterialData( material ); + } } else { @@ -442,6 +451,26 @@ exports.MaterialsPopup = Montage.create(Component, { } }, + getEditableProperties: { + value: function(material) { + // declare the array to hold the results + var rtnArray = [], + obj, + colorObj = ShapesController.getMaterialColor(material.getName()); + + this._propNames = ["gradient"]; + this._propValues = ["gradient"]; + this._propTypes = ["gradient"]; + this._propLabels = ["gradient"]; + + obj = this.createGradientData("gradient", colorObj); + + rtnArray.push(obj); + + return rtnArray; + } + }, + getMaterialData: { value: function( material ) @@ -489,17 +518,21 @@ exports.MaterialsPopup = Montage.create(Component, { obj = this.createCheckboxData( propLabels[i], propValues[i] ); break; - default: - console.log( "unrecognized material control type: " + propType[i] ); - break; - } + case "gradient": + obj = this.createGradientData( propLabels[i], propValues[i] ); + break; - if (obj) - { - rtnArray.push( obj ); - obj = null; - } - } + default: + console.log( "unrecognized material control type: " + propType[i] ); + break; + } + + if (obj) + { + rtnArray.push( obj ); + obj = null; + } + } return rtnArray; } @@ -650,6 +683,25 @@ exports.MaterialsPopup = Montage.create(Component, { } }, + createGradientData: + { + value: function( label, colorObj ) + { + var obj = { + "label": label, + "description": "a gradient", + "controlType": "GradientPicker", + "defaults": + { + "_mode": colorObj.gradientMode, + "value": colorObj.color + } + }; + + return obj; + } + }, + materialsProperties: { serializable: true, value: null -- cgit v1.2.3