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 --- js/panels/Materials/materials-data.json | 5 + .../materials-library-panel.css | 18 +- .../materials-library-panel.html | 25 +- .../materials-library-panel.js | 109 ++++++- .../materials-popup.reel/materials-popup.css | 36 ++- .../materials-popup.reel/materials-popup.html | 26 +- .../materials-popup.reel/materials-popup.js | 333 +++++++-------------- 7 files changed, 297 insertions(+), 255 deletions(-) (limited to 'js/panels/Materials') diff --git a/js/panels/Materials/materials-data.json b/js/panels/Materials/materials-data.json index a5d8997b..fde82d3d 100644 --- a/js/panels/Materials/materials-data.json +++ b/js/panels/Materials/materials-data.json @@ -101,6 +101,11 @@ "id" : "Z-Invert" } ] + }, + { + "label": "Custom Materials", + "children": [ + ] } ] } \ No newline at end of file diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.css b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.css index bed3acfe..b5d36108 100755 --- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.css +++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.css @@ -15,6 +15,12 @@ margin: 4px 0 4px 0; } +.materials_library_panel .ml_tree_holder { + height: 200px; + min-height: 200px; + max-height: 200px; + overflow-y: scroll; +} .ml_buttons { clear:both; @@ -30,9 +36,19 @@ cursor: pointer; margin: 0 1px; float: left; + width: 40px; +} + +.ml_buttons .ml_duplicate_btn { width: 60px; } -.ml_buttons .nj-skinned:last-child { +.ml_buttons .ml_delete_btn { + width: 50px; float: right; +} + +.ml_buttons .nj-skinned:hover, +.ml_buttons .nj-skinned:active { + color: white; } \ No newline at end of file diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html index 6fa54495..3adb2108 100755 --- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html +++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html @@ -10,12 +10,12 @@ - - - + } + + + + -
+
@@ -125,7 +125,7 @@ POSSIBILITY OF SUCH DAMAGE.
-
+ diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js index b5d6bb96..1cf3cec7 100755 --- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js +++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js @@ -40,8 +40,8 @@ exports.MaterialsLibraryPanel = Montage.create(Component, { }, _hasFocus: { - enumerable: false, - value: false + enumerable: false, + value: false }, didCreate: { @@ -98,10 +98,10 @@ exports.MaterialsLibraryPanel = Montage.create(Component, { }, _showMaterialPopup: { - enumerable: false, - value: function (materialObj) { + enumerable: false, + value: function (materialObj) { - if(!this._materialPopup) + if(!this._materialPopup) { this._materialPopup = Popup.create(); this._materialPopup.content = this._materialInfo; @@ -113,15 +113,15 @@ exports.MaterialsLibraryPanel = Montage.create(Component, { materialID = materialObj.materialId; this._materialInfo.loadMaterials(materialID, materialObj.useSelection, materialObj.whichMaterial); - } + } }, handleHideMaterialPopup: { - enumerable: false, - value: function (event) { + enumerable: false, + value: function (event) { if(this._materialPopup){ this._materialPopup.hide(); } - } + } } }); diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.css b/js/panels/Materials/materials-popup.reel/materials-popup.css index a5362615..3ddc8a98 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.css +++ b/js/panels/Materials/materials-popup.reel/materials-popup.css @@ -105,8 +105,8 @@ POSSIBILITY OF SUCH DAMAGE. .mp_properties_list > .mp_property > .colortoolbar { - width: 27px !important; - height: 27px !important; + width: 27px !important; + height: 27px !important; overflow:hidden !important; margin-top: -6px; } diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.html b/js/panels/Materials/materials-popup.reel/materials-popup.html index b377fa2d..eb2433e3 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.html +++ b/js/panels/Materials/materials-popup.reel/materials-popup.html @@ -29,13 +29,13 @@ ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. --> - + - + - + - - + - -
+ +
Material Name
-
Preview Pane
+
Preview Pane
@@ -125,6 +125,6 @@ POSSIBILITY OF SUCH DAMAGE.
-
- +
+ diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js index 7c5493c6..cecb0a71 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.js +++ b/js/panels/Materials/materials-popup.reel/materials-popup.js @@ -51,26 +51,26 @@ exports.MaterialsPopup = Montage.create(Component, { serializable: true }, - // Material Properties + // Material Properties _materialName: { enumerable: true, value: "" }, - _useSelection: { value: false, enumerable: true }, - _whichMaterial: { value: "fill", enumerable: true }, - _originalValues: {value: null, enumerable: true }, - - captureAction: { - value:function(event) { - switch(event._currentTarget.label) - { - case "Cancel": - console.log("Cancel material edit"); - this.revertToOriginalValues(); - break; - case "OK": - console.log("Committing material with the following values:"); + _useSelection: { value: false, enumerable: true }, + _whichMaterial: { value: "fill", enumerable: true }, + _originalValues: {value: null, enumerable: true }, + + captureAction: { + value:function(event) { + switch(event._currentTarget.label) + { + case "Cancel": + console.log("Cancel material edit"); + this.revertToOriginalValues(); + break; + case "OK": + 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]; @@ -88,53 +88,53 @@ exports.MaterialsPopup = Montage.create(Component, { console.log("--------------"); } - break; - } + break; + } // Notify Materials Library to close popup NJevent("hideMaterialPopup"); - } - }, - - revertToOriginalValues: - { - value: function() - { - if (this._originalValues) - { - this._material.importJSON( this._originalValues ); - - if (this._useSelection) - { - var selection = this.application.ninja.selectedElements; - if (selection && (selection.length > 0)) - { - var nObjs = selection.length; - for (var iObj=0; iObj 0)) + { + var nObjs = selection.length; + for (var iObj=0; iObj 0)) - { - var nObjs = selection.length; - for (var iObj=0; iObj 0)) - { - var index = value.lastIndexOf( "/" ); - if (index < 0) index = value.lastIndexOf( "\\" ); - if (index >= 0) - { - value = value.substr( index+1 ); - value = "assets/images/" + value; - } - rtnValue = value.slice(0); - } - break; - - case "checkbox": - rtnValue = value; - break; - - default: - console.log( "unrecognized material control type: " + type ); - break; - } - return rtnValue; - } - }, + applyProperty: + { + value: function( propLabel, propValue) + { + // find the property lable in the array + // This assumes no duplication in labels + if (this._propLabels) + { + // the label cones through with a trailing ':'. remove that + var ch = propLabel[ propLabel.length - 1]; + if (ch == ':') + propLabel = propLabel.substr(0, propLabel.length - 1); + + var index; + var nProps = this._propLabels.length; + for (var i=0; i 0)) + { + var nObjs = selection.length; + for (var iObj=0; iObj 0)) + { + var index = value.lastIndexOf( "/" ); + if (index < 0) index = value.lastIndexOf( "\\" ); + if (index >= 0) + { + value = value.substr( index+1 ); + value = "assets/images/" + value; + } + rtnValue = value.slice(0); + } + break; + + case "checkbox": + rtnValue = value; + break; + + default: + console.log( "unrecognized material control type: " + type ); + break; + } + return rtnValue; + } + }, //////////////////////////////////////////////////////////////////// - // - prepareForDraw: { - enumerable: false, - value: function() { + // + prepareForDraw: { + enumerable: false, + value: function() { this.cancelButton.addEventListener("action", this, true); this.okButton.addEventListener("action", this, true); } }, - //////////////////////////////////////////////////////////////////// - // - didDraw: { - enumerable: false, - value: function() { + //////////////////////////////////////////////////////////////////// + // + didDraw: { + enumerable: false, + value: function() { this.materialTitle.innerHTML = this._materialName; - } - }, - - //Garbage collection (Manual method) - destroy: { - enumerable: false, - value: function() { - // add cleanup routines here - } - }, - - loadMaterials: - { - enumerable: true, - value: function(materialID, useSelection, whichMaterial) - { - //TODO - Hack to force repetition to draw. Setting .length = 0 did not work. - this.materialsData = []; - - var material; - this._materialName = materialID; - if (useSelection) - { - this._useSelection = true; - var selection = this.application.ninja.selectedElements; - if (selection && (selection.length > 0)) - { - var canvas = selection[0]; - var obj; - this._whichMaterial = whichMaterial; - if (canvas.elementModel && canvas.elementModel.shapeModel) obj = canvas.elementModel.shapeModel.GLGeomObj; - if (obj) - material = (whichMaterial === 'stroke') ? obj.getStrokeMaterial() : obj.getFillMaterial(); - } - } - else - { - this._useSelection = false; - - if( - (materialID === "Bump Metal") || - (materialID === "Deform") || - (materialID === "Flat") || - (materialID === "Flag") || - (materialID === "Fly") || - (materialID === "Julia") || - (materialID === "Keleidoscope") || - (materialID === "Linear Gradient") || - (materialID === "Mandel") || - (materialID === "Paris") || - (materialID === "Plasma") || - (materialID === "Pulse") || - (materialID === "Radial Blur") || - (materialID === "Radial Gradient") || - (materialID === "Raiders") || - (materialID === "Relief Tunnel") || - (materialID === "Square Tunnel") || - (materialID === "Star") || - (materialID === "Taper") || - (materialID === "Tunnel") || - (materialID === "Twist") || - (materialID === "Twist Vertex") || - (materialID === "Uber") || - (materialID === "Water") || - (materialID === "Z-Invert") - ) - { - material = MaterialsModel.getMaterial( materialID ); - } - } - - if (material) - { - this._material = material; - this._originalValues = material.exportJSON(); - this.materialsData = this.getMaterialData( material ); - } - else - { - this.materialsData = this[materialID]; - } - this.needsDraw = true; - } - }, - - getMaterialData: - { - value: function( material ) - { - // declare the array to hold the results - var rtnArray = []; - - var propNames = [], propValues = [], propTypes = [], propLabels = []; - this._propNames = propNames; - this._propValues = propValues; - this._propTypes = propTypes; - this._propLabels = propLabels; - material.getAllProperties( propNames, propValues, propTypes, propLabels); - var n = propNames.length; - for (var i=0; i