Allow components to define before/after constraints (#5478)

* Allow components to define before/after constraints

* Fix bug preventing runtime registered components from being sorted into componentOrder

* Move order logic into a-scene.js and introduce callComponentBehaviors method

---------

Co-authored-by: Noeri Huisman <mrxz@users.noreply.github.com>

Author: mrxz

examples/showcase/tracked-controls/components/grab.js

@@ -6,6 +6,8 @@
 * Updates its position to move along the controller.
 */
 AFRAME.registerComponent('grab', {
+  after: ['tracked-controls-webxr'],
+  before: ['aabb-collider'],
   init: function () {
     this.GRABBED_STATE = 'grabbed';
     // Bind event handlers
@@ -67,6 +69,7 @@ AFRAME.registerComponent('grab', {
       y: position.y + this.deltaPosition.y,
       z: position.z + this.deltaPosition.z
     });
+    hitEl.object3D.updateMatrixWorld();
   },
 
   updateDelta: function () {

src/components/cursor.js

@@ -53,6 +53,8 @@ module.exports.Component = registerComponent('cursor', {
     rayOrigin: {default: 'entity', oneOf: ['mouse', 'entity', 'xrselect']}
   },
 
+  after: ['tracked-controls'],
+
   multiple: true,
 
   init: function () {

src/components/generic-tracked-controller-controls.js

@@ -42,6 +42,8 @@ module.exports.Component = registerComponent('generic-tracked-controller-control
     disabled: {default: false}
   },
 
+  after: ['tracked-controls'],
+
   /**
    * Button IDs:
    * 0 - trackpad

src/components/hand-controls.js

@@ -55,6 +55,8 @@ module.exports.Component = registerComponent('hand-controls', {
     handModelStyle: {default: 'lowPoly', oneOf: ['lowPoly', 'highPoly', 'toon']}
   },
 
+  after: ['tracked-controls'],
+
   init: function () {
     var self = this;
     var el = this.el;

src/components/hand-tracking-controls.js

@@ -56,6 +56,8 @@ module.exports.Component = registerComponent('hand-tracking-controls', {
     modelOpacity: {default: 1.0}
   },
 
+  after: ['tracked-controls'],
+
   bindMethods: function () {
     this.onControllersUpdate = this.onControllersUpdate.bind(this);
     this.checkIfControllerPresent = this.checkIfControllerPresent.bind(this);

src/components/oculus-touch-controls.js

@@ -197,6 +197,8 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     orientationOffset: {type: 'vec3', default: {x: 43, y: 0, z: 0}}
   },
 
+  after: ['tracked-controls'],
+
   mapping: INPUT_MAPPING,
 
   bindMethods: function () {

src/components/tracked-controls.js

@@ -26,6 +26,10 @@ module.exports.Component = registerComponent('tracked-controls', {
     space: {type: 'string', oneOf: ['targetRaySpace', 'gripSpace'], default: 'targetRaySpace'}
   },
 
+  // Run after both tracked-controls-webvr and tracked-controls-webxr to allow other components
+  // to be after either without having to list them both.
+  after: ['tracked-controls-webvr', 'tracked-controls-webxr'],
+
   update: function () {
     var data = this.data;
     var el = this.el;

src/components/valve-index-controls.js

@@ -55,6 +55,8 @@ module.exports.Component = registerComponent('valve-index-controls', {
     orientationOffset: {type: 'vec3'}
   },
 
+  after: ['tracked-controls'],
+
   mapping: {
     axes: {
       trackpad: [0, 1],

src/components/vive-controls.js

@@ -65,6 +65,8 @@ module.exports.Component = registerComponent('vive-controls', {
     orientationOffset: {type: 'vec3'}
   },
 
+  after: ['tracked-controls'],
+
   mapping: INPUT_MAPPING,
 
   init: function () {

src/components/vive-focus-controls.js

@@ -55,6 +55,8 @@ module.exports.Component = registerComponent('vive-focus-controls', {
     armModel: {default: true}
   },
 
+  after: ['tracked-controls'],
+
   mapping: INPUT_MAPPING,
 
   bindMethods: function () {