Merge pull request #346 from mqg734/MaterialsUI

UI support for preview, edit, duplicate and delete of WebGL Materials.

1 files changed, 186 insertions, 254 deletions

diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js
index 7c5493c6..0d0435a4 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.js
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.js
@@ -30,7 +30,11 @@ POSSIBILITY OF SUCH DAMAGE.
 
 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,
+    ShapesController = require("js/controllers/elements/shapes-controller").ShapesController;
 
 ////////////////////////////////////////////////////////////////////////
 //Exporting as MaterialsPopup
@@ -46,11 +50,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,
@@ -66,11 +94,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];
@@ -89,6 +117,12 @@ exports.MaterialsPopup = Montage.create(Component, {
 
                     }
                                         break;
+                case "Save As...":
+                    this.saveAs();
+                    break;
+                case "Reset":
+                    this.reset();
+                    break;
                         }
 
             // Notify Materials Library to close popup
@@ -96,6 +130,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()
@@ -155,15 +211,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 );
@@ -175,15 +231,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 );
@@ -219,9 +275,10 @@ 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" );
+//                                      console.log( "apply to selection" );
 
                                         var selection = this.application.ninja.selectedElements;
                                         if (selection && (selection.length > 0))
@@ -230,25 +287,38 @@ exports.MaterialsPopup = Montage.create(Component, {
                                                 for (var iObj=0;  iObj<nObjs;  iObj++)
                                                 {
                                                         var canvas = selection[iObj];
-                                                        var obj;
                                                         if (canvas.elementModel && canvas.elementModel.shapeModel)  obj = canvas.elementModel.shapeModel.GLGeomObj;
                                                         if (obj)
                                                         {
-                                                                var matArray = obj._materialArray;
+                                                                matArray = o