Allow ThreeTypeArrays to also accept single values

Author: vidartf

js/scripts/prop-types.js

@@ -126,19 +126,29 @@ _.extend(InitializedThreeType.prototype, ThreeType.prototype, {
     },
 });
 
-function ThreeTypeArray(typeName) {
+function ThreeTypeArray(typeName, options={}) {
     this.typeName = typeName;
     this.defaultValue = [];
     this.serializer = WIDGET_SERIALIZER;
+    this.nullable = options.nullable !== false;
+    this.allow_single = options.allow_single === true;
 }
 _.extend(ThreeTypeArray.prototype, BaseType.prototype, {
     getTraitlet: function() {
+        var baseType = 'Tuple()';
+        if (this.allow_single) {
+            if (this.typeName === 'this') {
+                baseType = 'Union([This, ' + baseType + '])';
+            } else {
+                baseType = 'Union([Instance(' + this.typeName + '), ' + baseType + '])';
+            }
+        }
         if (this.typeName === 'this') {
             // return 'List(trait=This(), default_value=[]).tag(sync=True, **widget_serialization)';
-            return 'Tuple().tag(sync=True, **widget_serialization)';
+            return baseType + '.tag(sync=True, **widget_serialization)';
         }
         // return 'List(trait=Instance(' + this.typeName + ')).tag(sync=True, **widget_serialization)';
-        return 'Tuple().tag(sync=True, **widget_serialization)';
+        return baseType + '.tag(sync=True, **widget_serialization)';
     },
     getPropArrayName: function() {
         return 'three_nested_properties';

js/scripts/three-class-config.js

@@ -1106,7 +1106,7 @@ module.exports = {
         superClass: 'Object3D',
         constructorArgs: [ 'geometry', 'material' ],
         properties: {
-            material: new Types.ThreeType('Material', {nullable: false}),
+            material: new Types.ThreeTypeArray('Material', {nullable: false, allow_single: true}),
             geometry: new Types.ThreeType(['Geometry', 'BufferGeometry'], {nullable: false}),
             drawMode: new Types.Enum('DrawModes', 'TrianglesDrawMode'),
             morphTargetInfluences: new Types.Array(),

js/src/_base/Three.js

@@ -25,6 +25,11 @@ function listenNested(model, propNames, callback) {
     propNames.forEach(function(propName) {
         // listen to current values in array
         var curr = model.get(propName) || [];
+        // ignore ThreeModels in order to support properties
+        // that are either an instance, or a sequence of instances:
+        if (curr instanceof ThreeModel) {
+            return;
+        }
         utils.childModelsNested(curr).forEach(function(childModel) {
             model.listenTo(childModel, 'change', callback);
             model.listenTo(childModel, 'childchange', callback);
@@ -665,12 +670,18 @@ var ThreeModel = widgets.WidgetModel.extend({
 
     // ThreeTypeArray
     convertThreeTypeArrayModelToThree: function(modelArr, propName) {
+        if (!Array.isArray(modelArr)) {
+            return this.convertThreeTypeModelToThree(modelArr, propName);
+        }
         return modelArr.map(function(model) {
             return this.convertThreeTypeModelToThree(model, propName);
         }, this);
     },
 
     convertThreeTypeArrayThreeToModel: function(threeTypeArr, propName) {
+        if (!Array.isArray(threeTypeArr)) {
+            return this.convertThreeTypeThreeToModel(threeTypeArr, propName);
+        }
         return threeTypeArr.map(function(threeType) {
             return this.convertThreeTypeThreeToModel(threeType, propName);
         }, this);