Add support for parameter types and explicitly setting parameters as …

…blackboard keys
HexyWitch · Mar 31, 2017 · deeeda2 · deeeda2
1 parent ccbb9cc
commit deeeda2
Show file tree

Hide file tree

Showing 9 changed files with 364 additions and 125 deletions.
diff --git a/src/app/menu/menu.js b/src/app/menu/menu.js
@@ -116,14 +116,13 @@ angular.module('app.menu', ['app.modal'])
     }
 
     for (category in nodes) {
-      fs.writeFileSync(path.join(editor.project.nodesPath, category + ".json"), nodes[category]);
+      fs.writeFileSync(path.join(editor.project.nodesPath, category + ".nodes"), nodes[category]);
     }
     return false;
   }
 
   $scope.onButtonNewProject = function(e) {
     if (e) e.preventDefault();
-    console.log("New project");
     dialog.showOpenDialog({
       title: "Select path for nodes",
       filters : [

diff --git a/src/app/node/modal-editnode.html b/src/app/node/modal-editnode.html
@@ -29,8 +29,13 @@ <h1 class="modal-title">Edit Custom Node</h1>
             <table id="editnode-properties-table">
               <tbody>
                   <tr ng-repeat="(key, value) in properties">
+                    <td>
+                      <select id="type">
+                        <option ng-repeat="valueType in valueTypes" ng-model="value.type" value="{{valueType.id}}" ng-selected="value.type == valueType.id">{{valueType.name}}</option>
+                      </select>
+                    </td>
                     <td><input id="key" type="text" value="{{key}}" placeholder="key" /></td>
-                    <td><input id="value" type="text" value="{{value}}" placeholder="value" /></td>
+                    <td><input id="value" type="text" value="{{value.value}}" placeholder="value" /></td>
                     <td><a href="#" propertyremovable class="button alert right">-</a></td>
                   </tr>
               </tbody>
@@ -46,8 +51,13 @@ <h1 class="modal-title">Edit Custom Node</h1>
             <table id="editnode-output-table">
               <tbody>
                   <tr ng-repeat="(key, value) in output">
+                    <td>
+                      <select id="type">
+                        <option ng-repeat="valueType in valueTypes" ng-model="value.type" value="{{valueType.id}}" ng-selected="value.type == valueType.id">{{valueType.name}}</option>
+                      </select>
+                    </td>
                     <td><input id="key" type="text" value="{{key}}" placeholder="key" /></td>
-                    <td><input id="value" type="text" value="{{value}}" placeholder="value" /></td>
+                    <td><input id="value" type="text" value="{{value.key}}" placeholder="value" /></td>
                     <td><a href="#" propertyremovable class="button alert right">-</a></td>
                   </tr>
               </tbody>
@@ -77,4 +87,4 @@ <h1 class="modal-title">Edit Custom Node</h1>
 
     </div>
   </div>
-</div>
+</div>
diff --git a/src/app/node/node.js b/src/app/node/node.js
@@ -10,7 +10,7 @@ angular.module('app.node', ['app.modal'])
   $scope.types = ['composite', 'decorator', 'action', 'module'];
   $scope.nodes = {};
   $scope.categories = {};
-  
+
   $scope.showAddNodeModal = function() {
     ModalService.showModal({
       templateUrl: "app/node/modal-addnode.html",
@@ -98,36 +98,47 @@ angular.module('app.node', ['app.modal'])
 //
 .controller('AddNodeModalController', function($scope, $window, $compile, close) {
   $scope.close = function(result) { close(result); };
-  
+
   // DYNAMIC TABLE ------------------------------------------------------------
-
+
+  $scope.types = ['composite', 'decorator', 'action', 'module'];
+  $scope.valueTypes = [
+    {id: 'json', name: 'json'},
+    {id: "entity", name: "entity"},
+    {id: "position", name: "position"},
+    {id: "vec2", name: "vec2"},
+    {id: "number", name: "number"},
+    {id: "bool", name: "bool"},
+    {id: "list", name: "list"},
+    {id: "table", name: "table"},
+    {id: "string", name: "string"}
+  ];
+
   this.propertyTemplate = '\
     <tr>\
-      <td><input id="key" type="text" value="{0}" placeholder="key" /></td>\
-      <td><input id="value" type="text" value="{1}" placeholder="value" /></td>\
+      <td>\
+        <select id="type">\
+          <option ng-repeat="valueType in valueTypes" value="{{valueType.id}}">{{valueType.name}}</option>\
+        </select>\
+      </td>\
+      <td><input id="key" type="text" value="" placeholder="key" /></td>\
+      <td><input id="value" type="text" value="" placeholder="value" /></td>\
       <td><a href="#" propertyremovable class="button alert right">-</a></td>\
     </tr>\
   ';
 
-  $scope.types = ['composite', 'decorator', 'action', 'module'];
-
   var this_ = this;
 
-  $scope.addProperty = function(key, value) {
-    if (typeof key == 'undefined') key = '';
-    if (typeof value == 'undefined') value = '';
-    value = JSON.stringify(value).replace(/["]/g, "&quot;").replace(/['"']/g, "&apos;");
-    var template = this_.propertyTemplate.format(key, value);
+  $scope.addProperty = function() {
+    var template = this_.propertyTemplate.format();
     var propertiesTable = angular.element(
       document.querySelectorAll('#addnode-properties-table>tbody')
     );
     propertiesTable.append($compile(template)($scope));
   }
 
-  $scope.addOutput = function(key, value) {
-    if (typeof key == 'undefined') key = '';
-    if (typeof value == 'undefined') value = '';
-    var template = this_.propertyTemplate.format(key, value);
+  $scope.addOutput = function() {
+    var template = this_.propertyTemplate.format();
     var outputTable = angular.element(
       document.querySelectorAll('#addnode-output-table>tbody')
     );
@@ -155,6 +166,7 @@ angular.module('app.node', ['app.modal'])
     var domType = document.querySelector('#addnode-modal #type');
     var domName = document.querySelector('#addnode-modal #name');
     var domTitle = document.querySelector('#addnode-modal #title');
+    var domPropertyTypes = document.querySelectorAll('#addnode-properties #type');
     var domPropertyKeys = document.querySelectorAll('#addnode-properties #key');
     var domPropertyValues = document.querySelectorAll('#addnode-properties #value');
 
@@ -166,48 +178,58 @@ angular.module('app.node', ['app.modal'])
     }
 
     if (newNode.type == 'action'){
+      var domOutputTypes = document.querySelectorAll('#addnode-output #type');
       var domOutputKeys = document.querySelectorAll('#addnode-output #key');
       var domOutputValues = document.querySelectorAll('#addnode-output #value');
       var domCategory = document.querySelector('#addnode-modal #category');
       var domScript = document.querySelector('#addnode-modal #script');
-      
+
       newNode.script = domScript.value;
       newNode.category = domCategory.value;
       newNode.output = {};
 
       for (var i=0; i<domOutputKeys.length; i++) {
+        var type = domOutputTypes[i].value;
         var key = domOutputKeys[i].value;
         var value = domOutputValues[i].value;
+        if (value === '') value = null;
         if (key)
           newNode.output[key] = value;
       }
     }
 
     for (var i=0; i<domPropertyKeys.length; i++) {
+      var type = domPropertyTypes[i].value;
       var key = domPropertyKeys[i].value;
       var value = domPropertyValues[i].value;
 
-      try {
-        value = JSON.parse(value);
-      } catch (e){
-        $window.app.editor.trigger('notification', name, {
-          level: 'error',
-          message: 'Invalid JSON value in property \'' + key + '\'. <br>' + e
-        });
+      if (type != 'string' && value != '') {
+        try {
+          value = JSON.parse(value);
+        } catch (e){
+          $window.app.editor.trigger('notification', name, {
+            level: 'error',
+            message: 'Invalid JSON value in property \'' + key + '\'. <br>' + e
+          });
+        }
       }
 
+      if (value === '') value = null;
       if (key) {
-        newNode.properties[key] = value;
+        newNode.properties[key] = {
+          type: type,
+          value: value
+        };
       }
     }
-    
+
     if (newNode.name) {
       $window.app.editor.addNode(newNode);
     }
   }
 })
 
-.directive('propertyremovable', function() {    
+.directive('propertyremovable', function() {
   return {
     restrict: 'A',
     link: function(scope, element, attrs) {
@@ -226,43 +248,64 @@ angular.module('app.node', ['app.modal'])
   $scope.close = function(result) { close(result); };
 
   $scope.node = $window.app.editor.nodes[node];
+  $scope.valueTypes = [
+    {id: 'json', name: 'json'},
+    {id: "entity", name: "entity"},
+    {id: "position", name: "position"},
+    {id: "vec2", name: "vec2"},
+    {id: "number", name: "number"},
+    {id: "bool", name: "bool"},
+    {id: "list", name: "list"},
+    {id: "table", name: "table"},
+    {id: "string", name: "string"}
+  ];
 
   this.jsonProperties = function(properties){
     var props = {}
     for (key in properties) {
-      props[key] = JSON.stringify(properties[key]);
+      props[key] = {
+        type: properties[key].type
+      }
+      if (properties[key].type != 'string') {
+        if (properties[key].value === null)
+          props[key].value = '';
+        else
+          props[key].value = JSON.stringify(properties[key].value);
+      } else {
+        props[key].value = properties[key].value;
+      }
     }
     return props;
   }
 
   $scope.properties = this.jsonProperties($scope.node.prototype.properties);
   $scope.output = $scope.node.prototype.output;
-  
+
   this.propertyTemplate = '\
     <tr>\
-      <td><input id="key" type="text" value="{0}" placeholder="key" /></td>\
-      <td><input id="value" type="text" value="{1}" placeholder="value" /></td>\
+      <td>\
+        <select id="type">\
+          <option ng-repeat="valueType in valueTypes" value="{{valueType.id}}">{{valueType.name}}</option>\
+        </select>\
+      </td>\
+      <td><input id="key" type="text" value="" placeholder="key" /></td>\
+      <td><input id="value" type="text" value="" placeholder="value" /></td>\
       <td><a href="#" propertyremovable class="button alert right">-</a></td>\
     </tr>\
   ';
 
   var this_ = this;
 
-  $scope.addProperty = function(key, value) {
-    if (typeof key == 'undefined') key = '';
-    if (typeof value == 'undefined') value = '';
-    value = JSON.stringify(value).replace(/["]/g, "&quot;").replace(/['"']/g, "&apos;");
-    var template = this_.propertyTemplate.format(key, value);
+  $scope.addProperty = function() {
+    var template = this_.propertyTemplate.format();
     var propertiesTable = angular.element(
       document.querySelectorAll('#editnode-properties-table>tbody')
     );
     propertiesTable.append($compile(template)($scope));
   }
 
-  $scope.addOutput = function(key, value) {
-    if (typeof key == 'undefined') key = '';
-    if (typeof value == 'undefined') value = '';
-    var template = this_.propertyTemplate.format(key, value);
+  $scope.addOutput = function() {
+    var template = this_.propertyTemplate.format(type, key, value);
     var outputTable = angular.element(
       document.querySelectorAll('#editnode-output-table>tbody')
     );
@@ -272,16 +315,18 @@ angular.module('app.node', ['app.modal'])
   $scope.saveNode = function() {
     var domName = document.querySelector('#editnode-form #name');
     var domTitle = document.querySelector('#editnode-form #title');
+    var domTypes = document.querySelectorAll('#editnode-properties #type');
     var domKeys = document.querySelectorAll('#editnode-properties #key');
     var domValues = document.querySelectorAll('#editnode-properties #value');
-    
+
     var newNode = {
       name: domName.value,
       title: domTitle.value,
       properties: {}
     }
 
     if ($scope.node.prototype.type == 'action'){
+      var domOutputTypes = document.querySelectorAll('#editnode-output #type');
       var domOutputKeys = document.querySelectorAll('#editnode-output #key');
       var domOutputValues = document.querySelectorAll('#editnode-output #value');
       var domCategory = document.querySelector('#editnode-modal #category');
@@ -295,28 +340,40 @@ angular.module('app.node', ['app.modal'])
         newNode.output = {};
 
       for (var i=0; i<domOutputKeys.length; i++) {
+        var type = domOutputTypes[i].value;
         var key = domOutputKeys[i].value;
         var value = domOutputValues[i].value;
+        if (value === '') value = null;
         if (key)
-          newNode.output[key] = value;
+          newNode.output[key] = {
+            type: type,
+            key: value
+          };
       }
     }
 
     for (var i=0; i<domKeys.length; i++) {
+      var type = domTypes[i].value
       var key = domKeys[i].value;
       var value = domValues[i].value;
 
-      try {
-        value = JSON.parse(value);
-      } catch (e){
-        $window.app.editor.trigger('notification', name, {
-          level: 'error',
-          message: 'Invalid JSON value in property \'' + key + '\'. <br>' + e
-        });
+      if (type != 'string' && value != '') {
+        try {
+          value = JSON.parse(value);
+        } catch (e){
+          $window.app.editor.trigger('notification', name, {
+            level: 'error',
+            message: 'Invalid JSON value in property \'' + key + '\'. <br>' + e
+          });
+        }
       }
 
+      if (value === '') value = null;
       if (key) {
-        newNode.properties[key] = value;
+        newNode.properties[key] = {
+          type: type,
+          value: value
+        };
       }
     }
 
@@ -328,4 +385,4 @@ angular.module('app.node', ['app.modal'])
   $scope.removeNode = function() {
     $window.app.editor.removeNode(node);
   }
-});
+});
diff --git a/src/app/property/property.html b/src/app/property/property.html
@@ -1,10 +1,10 @@
 <div id="property-panel" class="property-panel panel" scrollable>
-  
+
   <div ng-show="block === null">
     <p style="text-align:center">Select a <strong>single</strong> block to change its properties.</p>
     <p style="text-align:center"><em>NOTE: The root node represents a tree. Therefore, changes applied to this node will persist on the tree object.</em></p>
   </div>
-  
+
   <div ng-hide="block === null">
     <form>
       <div class="row">
@@ -41,4 +41,4 @@
       </div>
     </form>
   </div>
-</div>
+</div>