Fix array-based serialized properties (like wrapS/wrapT) and display the appropriate enum values

Author: jsantell

src/app/constants.js

@@ -200,8 +200,6 @@ const ConstantTypes = {
 // Copy some over since the constant type is found
 // by property name.
 ConstantTypes.shadowSide = ConstantTypes.side;
-ConstantTypes.wrapS = ConstantTypes.wrapping;
-ConstantTypes.wrapT = ConstantTypes.wrapping;
 ConstantTypes.blendSrcAlpha = ['null', ...ConstantTypes.blendSrc];
 ConstantTypes.blendDstAlpha = ['null', ...ConstantTypes.blendDst];
 ConstantTypes.blendEquationAlpha = ['null', ...ConstantTypes.blendEquation];

src/app/data/textures.js

@@ -15,21 +15,19 @@ const Filters = {
 const Wrapping = object => ({
   name: 'Wrapping',
   type: 'group',
+  // wrapR is currently used with DataTexture3D but not serialized,
+  // let's not display it for now.
   props: [{
     name: 'Wrap S',
-    prop: 'wrapS',
+    prop: 'wrap[0]',
     type: 'enum',
+    enumType: 'wrapping',
   }, {
     name: 'Wrap T',
-    prop: 'wrapT',
+    prop: 'wrap[1]',
     type: 'enum',
-  }, {
-    name: 'Wrap R',
-    prop: 'wrapR',
-    type: 'enum',
-  }].filter(p => p.prop === 'wrapR' ?
-    object.textureType === 'DepthTexture' :
-    true)
+    enumType: 'wrapping',
+  }]
 });
 
 const Transform = {

src/app/elements/ParametersViewElement.js

@@ -6,6 +6,22 @@ import GeometryTypes from '../data/geometry.js';
 import TextureTypes from '../data/textures.js';
 import { getEntityName } from '../utils.js';
 
+// https://stackoverflow.com/a/6491621
+const propByString = function(o, s) {
+    s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
+    s = s.replace(/^\./, '');           // strip a leading dot
+    var a = s.split('.');
+    for (var i = 0, n = a.length; i < n; ++i) {
+        var k = a[i];
+        if (k in o) {
+            o = o[k];
+        } else {
+            return;
+        }
+    }
+    return o;
+}
+
 const $onRefresh = Symbol('onRefresh');
 const commonProps = [{
   name: 'Type',
@@ -41,20 +57,12 @@ function propsToElements(entity, elements, props, entities) {
       </accordion-view>`);
       continue;
     } else {
-      const { name, type, prop: propName, default: def } = prop;
-      let path = propName.split('.');
-      let target = entity;
-      let key = path.shift();
-      // Support nested properties, like 'data.attributes'
-      while (path.length) {
-        if (!(key in target)) {
-          break;
-        }
-        target = target[key];
-        key = path.shift();
-      }
+      const { name, type, prop: propName, enumType, default: def } = prop;
 
-      const value = (key in target ) ? target[key] : def;
+      let value = propByString(entity, propName);
+      if (value === undefined) {
+        value = def;
+      }
 
       // For number/int types
       let min = 'min' in prop ? prop.min : -Infinity;
@@ -76,6 +84,7 @@ function propsToElements(entity, elements, props, entities) {
           .value="${value}"
           type="${type}"
           property="${propName}"
+          enumType="${enumType || ''}"
           .min="${min}"
           .max="${max}"
           .step="${step}"

src/app/elements/values/KeyValueElement.js

@@ -15,6 +15,7 @@ export default class KeyValueElement extends LitElement {
       keyName: { type: String, reflect: true, attribute: 'key-name'},
       value: { type: String, reflect: true },
       type: { type: String, reflect: true },
+      enumType: { type: String, reflect: true },
       property: { type: String, reflect: true },
       // For number types only
       min: { type: Number, reflect: true },
@@ -74,7 +75,8 @@ export default class KeyValueElement extends LitElement {
           }
           break;
         case 'enum':
-          valueElement = html`<enum-value .uuid="${this.uuid}" .type="${this.property}" .value="${this.value}"></enum-value>`;
+	  let enumType = this.enumType || this.property;
+          valueElement = html`<enum-value .uuid="${this.uuid}" .type="${enumType}" .value="${this.value}"></enum-value>`;
           break;
         case 'vec2':
         case 'vec3':