Merge pull request #769 from ngokevin/flat5

schema property types, single-property schemas (fixes #740)

Author: dmarcos

src/components/geometry.js

@@ -5,7 +5,7 @@ var utils = require('../utils');
 
 var DEFAULT_RADIUS = 1;
 var helperMatrix = new THREE.Matrix4();
-var rad = THREE.Math.degToRad;
+var degToRad = THREE.Math.degToRad;
 var warn = debug('components:geometry:warn');
 
 /**
@@ -50,7 +50,6 @@ module.exports.Component = registerComponent('geometry', {
     height: { default: 2, min: 0, if: { primitive: ['box', 'plane'] } },
     openEnded: { default: false, if: { primitive: ['cylinder'] } },
     p: { default: 2, if: { primitive: ['torusKnot'] }, type: 'int' },
-    translate: { default: { x: 0, y: 0, z: 0 } },
     primitive: {
       default: '',
       oneOf: ['', 'box', 'circle', 'cylinder', 'plane',
@@ -75,6 +74,7 @@ module.exports.Component = registerComponent('geometry', {
     thetaLength: { default: 360, min: 0, if: { primitive: ['circle', 'cylinder', 'ring',
                                                            'sphere'] } },
     thetaStart: { default: 0, if: { primitive: ['circle', 'cylinder', 'ring', 'sphere'] } },
+    translate: { type: 'vec3' },
     width: { default: 2, min: 0, if: { primitive: ['box', 'plane'] } }
   },
 
@@ -125,40 +125,40 @@ function getGeometry (data, schema) {
     }
     case 'circle': {
       return new THREE.CircleGeometry(
-        data.radius, data.segments, rad(data.thetaStart), rad(data.thetaLength));
+        data.radius, data.segments, degToRad(data.thetaStart), degToRad(data.thetaLength));
     }
     case 'cone': {
       return new THREE.CylinderGeometry(
         data.radiusTop, data.radiusBottom, data.height,
         data.segmentsRadial, data.segmentsHeight,
-        data.openEnded, rad(data.thetaStart), rad(data.thetaLength));
+        data.openEnded, degToRad(data.thetaStart), degToRad(data.thetaLength));
     }
     case 'cylinder': {
       return new THREE.CylinderGeometry(
         data.radius, data.radius, data.height,
         data.segmentsRadial, data.segmentsHeight,
-        data.openEnded, rad(data.thetaStart), rad(data.thetaLength));
+        data.openEnded, degToRad(data.thetaStart), degToRad(data.thetaLength));
     }
     case 'plane': {
       return new THREE.PlaneBufferGeometry(data.width, data.height);
     }
     case 'ring': {
       return new THREE.RingGeometry(
         data.radiusInner, data.radiusOuter, data.segmentsTheta, data.segmentsPhi,
-        rad(data.thetaStart), rad(data.thetaLength));
+        degToRad(data.thetaStart), degToRad(data.thetaLength));
     }
     case 'sphere': {
       // thetaLength's default for spheres is different from those of the other geometries.
       // For now, we detect if thetaLength is exactly 360 to switch to a different default.
       if (data.thetaLength === 360) { data.thetaLength = 180; }
       return new THREE.SphereBufferGeometry(
-        data.radius, data.segmentsWidth, data.segmentsHeight, rad(data.phiStart),
-        rad(data.phiLength), rad(data.thetaStart), rad(data.thetaLength));
+        data.radius, data.segmentsWidth, data.segmentsHeight, degToRad(data.phiStart),
+        degToRad(data.phiLength), degToRad(data.thetaStart), degToRad(data.thetaLength));
     }
     case 'torus': {
       return new THREE.TorusGeometry(
         data.radius, data.radiusTubular * 2, data.segmentsRadial, data.segmentsTubular,
-        rad(data.arc));
+        degToRad(data.arc));
     }
     case 'torusKnot': {
       return new THREE.TorusKnotGeometry(

src/components/light.js

@@ -3,7 +3,7 @@ var debug = require('../utils/debug');
 var registerComponent = require('../core/component').registerComponent;
 var THREE = require('../../lib/three');
 
-var rad = THREE.Math.degToRad;
+var degToRad = THREE.Math.degToRad;
 var warn = debug('components:light:warn');
 
 /**
@@ -123,7 +123,7 @@ function getLight (data) {
       return new THREE.PointLight(color, intensity, distance, decay);
     }
     case 'spot': {
-      return new THREE.SpotLight(color, intensity, distance, rad(angle), data.exponent,
+      return new THREE.SpotLight(color, intensity, distance, degToRad(angle), data.exponent,
                                  decay);
     }
     default: {

src/components/look-at.js

@@ -26,6 +26,8 @@ var isCoordinate = coordinates.isCoordinate;
  * @member {object} vector - Helper vector to do matrix transformations.
  */
 module.exports.Component = registerComponent('look-at', {
+  schema: { default: '' },
+
   init: function () {
     this.target3D = null;
     this.vector = new THREE.Vector3();
@@ -37,84 +39,67 @@ module.exports.Component = registerComponent('look-at', {
    */
   update: function () {
     var self = this;
-    var data = self.data;
-    var position = data.position;
+    var target = self.data;
     var object3D = self.el.object3D;
     var target3D = self.target3D;
     var targetEl;
-    var targetSelector = data.targetSelector;
 
     // Track target object position. Depends on parent object keeping global transforms up
     // to state with updateMatrixWorld(). In practice, this is handled by the renderer.
     if (target3D) {
       return object3D.lookAt(self.vector.setFromMatrixPosition(target3D.matrixWorld));
     }
 
-    // Query for the element, grab its object3D, then register a behavior on the scene to
-    // track the target on every tick.
-    if (targetSelector) {
-      targetEl = document.querySelector(targetSelector);
-      if (!targetEl) {
-        warn('"' + targetSelector + '" does not point to a valid entity to look-at');
-        return;
-      }
-      if (!targetEl.hasLoaded) {
-        return targetEl.addEventListener('loaded', function () {
-          self.beginTracking(targetEl);
-        });
-      }
-      return self.beginTracking(targetEl);
+    // No longer looking at anything (i.e., look-at="").
+    if (!target ||
+        (typeof target === 'object' && !Object.keys(target).length)) {
+      return self.remove();
     }
 
     // Look at a position.
-    if (position) {
-      object3D.lookAt(new THREE.Vector3(position.x, position.y, position.z));
-      return;
+    if (typeof target === 'object') {
+      return object3D.lookAt(new THREE.Vector3(target.x, target.y, target.z));
     }
 
-    // No longer looking at anything (i.e., look-at="").
-    if (!position && !targetSelector) { return self.remove(); }
+    // Assume target is a string.
+    // Query for the element, grab its object3D, then register a behavior on the scene to
+    // track the target on every tick.
+    targetEl = self.el.sceneEl.querySelector(target);
+    if (!targetEl) {
+      warn('"' + target + '" does not point to a valid entity to look-at');
+      return;
+    }
+    if (!targetEl.hasLoaded) {
+      return targetEl.addEventListener('loaded', function () {
+        self.beginTracking(targetEl);
+      });
+    }
+    return self.beginTracking(targetEl);
   },
 
   /**
    * Remove follow behavior on remove (callback).
    */
   remove: function () {
-    this.el.sceneEl.removeBehavior(this);
-  },
-
-  beginTracking: function (targetEl) {
-    this.target3D = targetEl.object3D;
-    this.el.sceneEl.addBehavior(this);
+    if (this.target3D) {
+      this.el.sceneEl.removeBehavior(this);
+      this.target3D = null;
+    }
   },
 
-  /**
-   * Determine whether attribute value is a target selector or a position.
-   * Parse the attribute value if it is a position.
-   *
-   * @param {string} value - HTML attribute of component.
-   * @returns {object}
-   */
   parse: function (value) {
-    if (!value) {
-      return {
-        position: null,
-        targetSelector: null
-      };
+    if (isCoordinate(value) || typeof value === 'object') {
+      return coordinates.parse(value);
     }
-    // Check if value is a position. Need to match digits since a target selector could have
-    // three values as well (e.g., look-at="#el .el .box").
-    if (isCoordinate(value)) {
-      return {
-        position: coordinates.parse(value),
-        targetSelector: null
-      };
-    }
-    return {
-      position: null,
-      targetSelector: value
-    };
+    return value;
+  },
+
+  stringify: function (data) {
+    return coordinates.stringify(data);
   },
 
-  stringify: coordinates.componentMixin.stringify
+  beginTracking: function (targetEl) {
+    this.target3D = targetEl.object3D;
+    this.el.sceneEl.addBehavior(this);
+  }
 });

src/components/position.js

@@ -1,17 +1,11 @@
-var coordinatesMixin = require('../utils/coordinates').componentMixin;
 var registerComponent = require('../core/component').registerComponent;
-var utils = require('../utils/');
 
-module.exports.Component = registerComponent('position', utils.extend({
-  schema: {
-    x: { default: 0 },
-    y: { default: 0 },
-    z: { default: 0 }
-  },
+module.exports.Component = registerComponent('position', {
+  schema: { type: 'vec3' },
 
   update: function () {
     var object3D = this.el.object3D;
     var data = this.data;
     object3D.position.set(data.x, data.y, data.z);
   }
-}, coordinatesMixin));
+});

src/components/rotation.js

@@ -1,24 +1,16 @@
-var coordinatesMixin = require('../utils/coordinates').componentMixin;
+var degToRad = require('../../lib/three').Math.degToRad;
 var registerComponent = require('../core/component').registerComponent;
-var THREE = require('../../lib/three');
-var utils = require('../utils/');
 
-module.exports.Component = registerComponent('rotation', utils.extend({
-  schema: {
-    x: { default: 0 },
-    y: { default: 0 },
-    z: { default: 0 }
-  },
+module.exports.Component = registerComponent('rotation', {
+  schema: { type: 'vec3' },
 
   /**
    * Updates object3D rotation.
    */
   update: function () {
     var data = this.data;
     var object3D = this.el.object3D;
-    object3D.rotation.set(THREE.Math.degToRad(data.x),
-                          THREE.Math.degToRad(data.y),
-                          THREE.Math.degToRad(data.z));
+    object3D.rotation.set(degToRad(data.x), degToRad(data.y), degToRad(data.z));
     object3D.rotation.order = 'YXZ';
   }
-}, coordinatesMixin));
+});

src/components/scale.js

@@ -1,15 +1,12 @@
-var coordinatesMixin = require('../utils/coordinates').componentMixin;
 var registerComponent = require('../core/component').registerComponent;
-var utils = require('../utils/');
 
 // Avoids triggering a zero-determinant which makes object3D matrix non-invertible.
 var zeroScale = 0.00001;
 
-module.exports.Component = registerComponent('scale', utils.extend({
+module.exports.Component = registerComponent('scale', {
   schema: {
-    x: { default: 1 },
-    y: { default: 1 },
-    z: { default: 1 }
+    type: 'vec3',
+    default: { x: 1, y: 1, z: 1 }
   },
 
   update: function () {
@@ -20,4 +17,4 @@ module.exports.Component = registerComponent('scale', utils.extend({
     var z = data.z === 0 ? zeroScale : data.z;
     object3D.scale.set(x, y, z);
   }
-}, coordinatesMixin));
+});

src/components/visible.js

@@ -2,21 +2,14 @@ var registerComponent = require('../core/component').registerComponent;
 
 /**
  * Visibility component.
- *
- * @param {bool}
  */
 module.exports.Component = registerComponent('visible', {
-  schema: { default: true },
+  schema: {
+    type: 'boolean',
+    default: true
+  },
 
   update: function () {
     this.el.object3D.visible = this.data;
-  },
-
-  parse: function (value) {
-    return value !== 'false';
-  },
-
-  stringify: function (value) {
-    return value.toString();
   }
 });

src/core/a-animation.js

@@ -1,7 +1,7 @@
 var ANode = require('./a-node');
-var coerce = require('../utils/').coerce;
 var constants = require('../constants/animation');
 var coordinates = require('../utils/').coordinates;
+var parseProperty = require('./schema').parseProperty;
 var registerElement = require('./a-register-element').registerElement;
 var TWEEN = require('tween.js');
 var utils = require('../utils/');
@@ -367,7 +367,7 @@ function cloneValue (val) {
  */
 function getAnimationValues (el, attribute, dataFrom, dataTo, currentValue) {
   var attributeSplit = attribute.split('.');
-  var coerceSchema;
+  var schema;
   var component;
   var componentPropName;
   var componentName;
@@ -401,14 +401,14 @@ function getAnimationValues (el, attribute, dataFrom, dataTo, currentValue) {
       el.setAttribute(componentName, '');
       component = el.components[componentName];
     }
-    coerceSchema = component.schema;
+    schema = component.schema;
     if (dataFrom === undefined) {  // dataFrom can be 0.
       from[attribute] = el.getComputedAttribute(componentName)[componentPropName];
     } else {
       from[attribute] = dataFrom;
     }
-    from[attribute] = coerce(from[attribute], coerceSchema, componentPropName);
-    to[attribute] = coerce(dataTo, coerceSchema, componentPropName);
+    from[attribute] = parseProperty(from[attribute], schema[componentPropName]);
+    to[attribute] = parseProperty(dataTo, schema[componentPropName]);
     partialSetAttribute = function (value) {
       el.setAttribute(componentName, componentPropName, value[attribute]);
     };

src/core/a-entity.js

@@ -322,9 +322,6 @@ var proto = Object.create(ANode.prototype, {
           delete this.components[name];
           return;
         }
-        if (typeof newData === 'string') {
-          newData = component.parse(newData);
-        }
         // Component already initialized. Update component.
         component.updateProperties(newData);
         return;
@@ -447,6 +444,7 @@ var proto = Object.create(ANode.prototype, {
       value = value === undefined ? '' : value;
       var valueStr = value;
       var oldValue;
+
       if (component) {
         if (typeof value === 'string' && componentPropValue !== undefined) {
           // Update currently-defined component data with the new property value.