getAttribute -> getDefinedAttribute, getComputedAttribute -> getAttribute (fixes #1590)

docs/core/entity.md

@@ -159,24 +159,28 @@ entity.emit('sink', null, false);
 `flushToDOM` will manually serialize all of the entity's components' data and update the DOM.
 Read more about [component-to-DOM serialization][component-to-dom-serialization].
 
-### `getAttribute (attr)`
+### `getAttribute (componentName)`
 
-`getAttribute` can be used to retrieve parsed component data. If `attr` is the name of a registered component, `getAttribute` will return only the component data defined in the HTML as a parsed object. `getAttribute` for components is the partial form of `getComputedAttribute` since the returned component data does not include applied mixins or default values:
+`getAttribute` retrieves parsed component data (including mixins and defaults).
 
 ```js
 // <a-entity geometry="primitive: box; width: 3">
 
 entity.getAttribute('geometry');
-// >> { primitive: "box", width: 3 }
+// >> {primitive: "box", depth: 2, height: 2, translate: "0 0 0", width: 3, ...}
 
 entity.getAttribute('geometry').primitive;
 // >> "box"
 
 entity.getAttribute('geometry').height;
-// >> undefined
+// >> 2
+
+entity.getAttribute('position');
+// >> {x: 0, y: 0, z: 0}
 ```
 
-If `attr` is not the name of a registered component, `getAttribute` will behave as it normally would:
+If `componentName` is not the name of a registered component, `getAttribute`
+will behave as it normally would:
 
 ```js
 // <a-entity data-position="0 1 1">
@@ -185,26 +189,32 @@ entity.getAttribute('data-position');
 // >> "0 1 1"
 ```
 
-### `getComputedAttribute (attr)`
+### `getDOMAttribute (componentName)`
 
-`getComputedAttribute` is similar to `getAttribute`, but it will return *all* of the component's properties for multi-property components. It can be thought of as an analog to [`getComputedStyle`](https://developer.mozilla.org/docs/Web/API/Window/getComputedStyle), which in CSS returns all CSS properties after applying stylesheets and computations. `getComputedAttribute` will return all component properties after applying mixins and default values.
+`getDOMAttribute` retrieves only parsed component data that is explicitly
+defined in the DOM or via `setAttribute`. If `componentName` is the name of a
+registered component, `getDOMAttribute` will return only the component data
+defined in the HTML as a parsed object. `getDOMAttribute` for components is
+the partial form of `getAttribute` since the returned component data does not
+include applied mixins or default values:
 
 Compare the output of the above example of [`getAttribute`](#getAttribute):
 
 ```js
 // <a-entity geometry="primitive: box; width: 3">
 
-entity.getComputedAttribute('geometry');
-// >> { primitive: "box", depth: 2, height: 2, translate: "0 0 0", width: 3, ... }
+entity.getDOMAttribute('geometry');
+// >> { primitive: "box", width: 3 }
 
-entity.getComputedAttribute('geometry').primitive;
+entity.getDOMAttribute('geometry').primitive;
 // >> "box"
 
-entity.getComputedAttribute('geometry').height;
-// >> 2
-```
+entity.getDOMAttribute('geometry').height;
+// >> undefined
 
-More often we will want to use `getComputedAttribute` to inspect the component's data. Though sometimes we might want to use `getAttribute` to discern which properties were explicitly defined.
+entity.getDOMAttribute('position');
+// >> undefined
+```
 
 ### `getObject3D (type)`
 

src/components/camera.js

@@ -110,7 +110,7 @@ module.exports.Component = registerComponent('camera', {
     var userHeightOffset = this.data.userHeight;
 
     oldOffset = oldOffset || 0;
-    currentPosition = el.getComputedAttribute('position') || {x: 0, y: 0, z: 0};
+    currentPosition = el.getAttribute('position') || {x: 0, y: 0, z: 0};
     el.setAttribute('position', {
       x: currentPosition.x,
       y: currentPosition.y - oldOffset + userHeightOffset,

src/components/geometry.js

@@ -69,7 +69,7 @@ module.exports.Component = registerComponent('geometry', {
     toMesh = toEl.getObject3D('mesh');
     if (!toMesh) {
       toMesh = toEl.getOrCreateObject3D('mesh', THREE.Mesh);
-      toEl.setAttribute('material', el.getComputedAttribute('material'));
+      toEl.setAttribute('material', el.getAttribute('material'));
       return;
     }
 

src/components/look-controls.js

@@ -145,7 +145,7 @@ module.exports.Component = registerComponent('look-controls', {
           z: radToDeg(hmdEuler.z)
         };
       } else if (!sceneEl.is('vr-mode') || isNullVector(hmdEuler) || !this.data.hmdEnabled) {
-        currentRotation = this.el.getComputedAttribute('rotation');
+        currentRotation = this.el.getAttribute('rotation');
         deltaRotation = this.calculateDeltaRotation();
         // Mouse look only if HMD disabled or no info coming from the sensors
         rotation = {
@@ -197,7 +197,7 @@ module.exports.Component = registerComponent('look-controls', {
     var deltaHMDPosition = new THREE.Vector3();
     return function () {
       var el = this.el;
-      var currentPosition = el.getComputedAttribute('position');
+      var currentPosition = el.getAttribute('position');
       var currentHMDPosition;
       var previousHMDPosition = this.previousHMDPosition;
       var sceneEl = this.el.sceneEl;

src/components/wasd-controls.js

@@ -57,7 +57,7 @@ module.exports.Component = registerComponent('wasd-controls', {
 
     // Get movement vector and translate position.
     movementVector = this.getMovementVector(delta);
-    position = el.getComputedAttribute('position');
+    position = el.getAttribute('position');
     el.setAttribute('position', {
       x: position.x + movementVector.x,
       y: position.y + movementVector.y,
@@ -132,7 +132,7 @@ module.exports.Component = registerComponent('wasd-controls', {
     var rotationEuler = new THREE.Euler(0, 0, 0, 'YXZ');
 
     return function (delta) {
-      var rotation = this.el.getComputedAttribute('rotation');
+      var rotation = this.el.getAttribute('rotation');
       var velocity = this.velocity;
 
       directionVector.copy(velocity);

src/core/a-entity.js

@@ -8,6 +8,7 @@ var bind = utils.bind;
 
 var AEntity;
 var debug = utils.debug('core:a-entity:debug');
+var warn = utils.debug('core:a-entity:warn');
 
 var MULTIPLE_COMPONENT_DELIMITER = '__';
 
@@ -116,7 +117,7 @@ var proto = Object.create(ANode.prototype, {
         this.updateComponents();
         return;
       }
-      this.updateComponent(attrName, this.getAttribute(attrName));
+      this.updateComponent(attrName, this.getDOMAttribute(attrName));
     }
   },
 
@@ -411,7 +412,7 @@ var proto = Object.create(ANode.prototype, {
        * Update component with given name.
        */
       function updateComponent (name) {
-        var attrValue = self.getAttribute(name);
+        var attrValue = self.getDOMAttribute(name);
         delete elComponents[name];
         self.updateComponent(name, attrValue);
       }
@@ -626,9 +627,8 @@ var proto = Object.create(ANode.prototype, {
   },
 
   /**
-   * If `attr` is a component, returns JUST the component data defined on the entity.
-   * Like a partial version of `getComputedAttribute` as returned component data
-   * does not include applied mixins or defaults.
+   * If `attr` is a component, returns ALL component data including applied mixins and
+   * defaults.
    *
    * If `attr` is not a component, fall back to HTML getAttribute.
    *
@@ -637,30 +637,46 @@ var proto = Object.create(ANode.prototype, {
    */
   getAttribute: {
     value: function (attr) {
-      // If cached value exists, return partial component data.
+      // If component, return component data.
       var component = this.components[attr];
-      if (component) { return component.attrValue; }
+      if (component) { return component.getData(); }
       return HTMLElement.prototype.getAttribute.call(this, attr);
     },
     writable: window.debug
   },
 
   /**
-   * If `attr` is a component, returns ALL component data including applied mixins and
-   * defaults.
+   * `getAttribute` used to be `getDOMAttribute` and `getComputedAttribute` used to be
+   * what `getAttribute` is now. Now legacy code.
+   *
+   * @param {string} attr
+   * @returns {object|string} Object if component, else string.
+   */
+  getComputedAttribute: {
+    value: function (attr) {
+      warn('`getComputedAttribute` is deprecated. Use `getAttribute` instead.');
+      return this.getAttribute(attr);
+    }
+  },
+
+  /**
+   * If `attr` is a component, returns JUST the component data defined on the entity.
+   * Like a partial version of `getComputedAttribute` as returned component data
+   * does not include applied mixins or defaults.
    *
    * If `attr` is not a component, fall back to HTML getAttribute.
    *
    * @param {string} attr
    * @returns {object|string} Object if component, else string.
    */
-  getComputedAttribute: {
+  getDOMAttribute: {
     value: function (attr) {
-      // If component, return component data.
+      // If cached value exists, return partial component data.
       var component = this.components[attr];
-      if (component) { return component.getData(); }
+      if (component) { return component.attrValue; }
       return HTMLElement.prototype.getAttribute.call(this, attr);
-    }
+    },
+    writable: window.debug
   },
 
   addState: {

src/core/scene/a-scene.js

@@ -16,6 +16,7 @@ var checkHeadsetConnected = utils.checkHeadsetConnected;
 var registerElement = re.registerElement;
 var isIOS = utils.isIOS();
 var isMobile = utils.isMobile();
+var warn = utils.debug('core:a-scene:warn');
 
 /**
  * Scene element, holds all entities.
@@ -225,14 +226,25 @@ module.exports = registerElement('a-scene', {
     },
 
     /**
-     * Wraps Entity.getComputedAttribute to take into account for systems.
-     * If system exists, then return system data rather than possible component data.
+     * `getAttribute` used to be `getDOMAttribute` and `getComputedAttribute` used to be
+     * what `getAttribute` is now. Now legacy code.
      */
     getComputedAttribute: {
+      value: function (attr) {
+        warn('`getComputedAttribute` is deprecated. Use `getAttribute` instead.');
+        this.getAttribute(attr);
+      }
+    },
+
+    /**
+     * Wraps Entity.getDOMAttribute to take into account for systems.
+     * If system exists, then return system data rather than possible component data.
+     */
+    getDOMAttribute: {
       value: function (attr) {
         var system = this.systems[attr];
         if (system) { return system.data; }
-        return AEntity.prototype.getComputedAttribute.call(this, attr);
+        return AEntity.prototype.getDOMAttribute.call(this, attr);
       }
     },
 

src/extras/primitives/primitives.js

@@ -84,7 +84,7 @@ module.exports.registerPrimitive = function registerPrimitive (name, definition)
             // Set component properties individually to not overwrite user-defined components.
             if (componentData instanceof Object) {
               var component = components[componentName];
-              var attrValues = self.getAttribute(componentName) || {};
+              var attrValues = self.getDOMAttribute(componentName) || {};
               var data = component.parse(attrValues);
 
               // Check if component property already defined.

src/utils/entity.js

@@ -7,9 +7,9 @@ module.exports.getComponentProperty = function (el, name, delimiter) {
   delimiter = delimiter || '.';
   if (name.indexOf(delimiter) !== -1) {
     splitName = name.split(delimiter);
-    return el.getComputedAttribute(splitName[0])[splitName[1]];
+    return el.getAttribute(splitName[0])[splitName[1]];
   }
-  return el.getComputedAttribute(name);
+  return el.getAttribute(name);
 };
 
 /**

tests/components/position.test.js

@@ -19,7 +19,7 @@ suite('position', function () {
 
   suite('schema', function () {
     test('can get position', function () {
-      assert.shallowDeepEqual(this.el.getComputedAttribute('position'), {
+      assert.shallowDeepEqual(this.el.getAttribute('position'), {
         x: 0, y: 0, z: 0
       });
     });

tests/components/rotation.test.js

@@ -20,7 +20,7 @@ suite('rotation', function () {
 
   suite('schema', function () {
     test('can get rotation', function () {
-      assert.shallowDeepEqual(this.el.getComputedAttribute('rotation'), {
+      assert.shallowDeepEqual(this.el.getAttribute('rotation'), {
         x: 0, y: 0, z: 0
       });
     });

tests/components/scale.test.js

@@ -19,7 +19,7 @@ suite('scale', function () {
 
   suite('schema', function () {
     test('can get scale', function () {
-      assert.shallowDeepEqual(this.el.getComputedAttribute('scale'), {
+      assert.shallowDeepEqual(this.el.getAttribute('scale'), {
         x: 1, y: 1, z: 1
       });
     });

tests/core/a-animation.test.js

@@ -154,20 +154,20 @@ suite('a-animation', function () {
     });
 
     test('start value', function () {
-      assert.equal(this.el.getComputedAttribute('light').intensity, 0);
+      assert.equal(this.el.getAttribute('light').intensity, 0);
     });
 
     test('between value', function () {
       var intensity;
       this.animationEl.tween.update(this.startTime + 500);
-      intensity = this.el.getComputedAttribute('light').intensity;
+      intensity = this.el.getAttribute('light').intensity;
       assert.isAbove(intensity, 0);
       assert.isBelow(intensity, 1);
     });
 
     test('finish value', function () {
       this.animationEl.tween.update(this.startTime + 1000);
-      assert.equal(this.el.getComputedAttribute('light').intensity, 1);
+      assert.equal(this.el.getAttribute('light').intensity, 1);
     });
   });
 
@@ -644,20 +644,20 @@ suite('a-animation', function () {
     });
 
     test('start value', function () {
-      assert.equal(this.el.getComputedAttribute(attribute), '#ff0000');
+      assert.equal(this.el.getAttribute(attribute), '#ff0000');
     });
 
     test('between value', function () {
       var color;
       this.animationEl.tween.update(this.startTime + 500);
-      color = this.el.getComputedAttribute(attribute);
+      color = this.el.getAttribute(attribute);
       assert.isAbove(color, '#0000ff');
       assert.isBelow(color, '#ff0000');
     });
 
     test('finish value', function () {
       this.animationEl.tween.update(this.startTime + 1000);
-      assert.equal(this.el.getComputedAttribute(attribute), '#0000ff');
+      assert.equal(this.el.getAttribute(attribute), '#0000ff');
     });
   });