create new material definitions

js/materials/DMAMaterials.js

@@ -14,10 +14,12 @@ define(['underscore', 'three', 'appState', 'lattice', 'plist', 'threeModel'], fu
             if (id && data === null) return deleteMaterial(id);
             if (!materials[id]) materials[id] = {};
             var oldColor = materials[id].color;
+
             _.each(_.keys(data), function(key){//todo trigger change on all instances
                 if (data[key] && data[key].x) materials[id][key] = new THREE.Vector3(data[key].x, data[key].y, data[key].z);
                 else materials[id][key] = data[key];
             });
+
             if (materials[id].threeMaterial || oldColor != materials[id].color) changeSingleMaterialColorScheme(id);
             return false;
         }

js/menus/MaterialMenuView.js

@@ -5,13 +5,16 @@
 define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice', 'globals', 'materials', 'text!materialMenuTemplate'],
     function($, _, MenuParentView, plist, lattice, globals, materials, template){
 
+    var materialID = 0;
+
     return MenuParentView.extend({
 
         events: {
             "click #navToCompositeMenu":                             "_navToCompositeMenu",
             "click #compositeFromLattice":                           "_latticeToComposite",
             "click .editComposite":                                  "_editComposite",
-            "click .editMaterial":                                   "_editMaterial"
+            "click .editMaterial":                                   "_editMaterial",
+            "click #newElementaryMaterial":                          "_newMaterial"
         },
 
         _initialize: function(){
@@ -36,6 +39,23 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice', 'globals', 'ma
             e.stopPropagation();
             e.preventDefault();
             var id = $(e.target).data("id");
+            this._openMaterialEditor(id);
+        },
+
+        _newMaterial: function(e){
+            e.preventDefault();
+            //first create dummy material
+            var id = "material" + this.cid + materialID++;
+            materials.setMaterial(id, {
+                name: "",
+                color: '#000000',
+                altColor: '#000000',
+                noDelete: false
+            });
+            this._openMaterialEditor(id);
+        },
+
+        _openMaterialEditor: function(id){
             this.model.set("materialType", id);
             this.model.set("currentTab", "materialEditor", {silent:true});
             this.model.set("currentNav", "navMaterial");

js/menus/templates/MaterialMenuView.html

@@ -16,8 +16,9 @@ Material Class:   
             <div style="background-color:<% if(realisticColorScheme){ %><%= allMaterials[materialClass][key].color %><% }else{ %><%= allMaterials[materialClass][key].altColor %><% } %>"></div>
             <span><span class="materialListTitle"><%= allMaterials[materialClass][key].name %></span><a data-id="<%= key %>" class="editMaterial">Edit...</a></span></div>
         </label>
-    <% }); %><br/>
-    <label class="checkbox" for="realisticColorScheme">
+    <% }); %>
+    <!--<a id="newElementaryMaterial" href="#" class="btn btn-block btn-lg btn-default">+ Create New Material Definition</a>-->
+    <br/><label class="checkbox" for="realisticColorScheme">
     <input id="realisticColorScheme" data-property="realisticColorScheme" type="checkbox" <% if (realisticColorScheme){ %> checked="checked"<% } %> value="" data-toggle="checkbox" class="appState custom-checkbox">
     <span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
     Use realistic color scheme</label>
@@ -35,7 +36,7 @@ Composite Materials:<br/>
             <span><span class="materialListTitle"><%= materials[key].name %></span><a data-id="<%= key %>" class="editComposite">Edit...</a></span></div>
         </label>
     <% }); %><br/>
-    <% if (_.filter(_.keys(materials), function(name){return name.substr(0,5) == "super"; }).length > 0) { %>
+    <% if (materialType.substr(0,5) == "super") { %>
         Offset (xyz): &nbsp;&nbsp;<input data-property="superCellIndex" data-key="x" value="<%= superCellIndex.x %>" placeholder="X" class="form-control intInput appState" type="text">&nbsp;
             <input data-property="superCellIndex" data-key="y" value="<%= superCellIndex.y %>" placeholder="Y" class="form-control intInput appState" type="text">&nbsp;
             <input data-property="superCellIndex" data-key="z" value="<%= superCellIndex.z %>" placeholder="Z" class="form-control intInput appState" type="text"><br/><br/>