Pass context through THREEScene. fix Izzimach#48

akoel · Oct 18, 2015 · 53a4aa5 · 53a4aa5
1 parent 0975512
commit 53a4aa5
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 25 deletions.
diff --git a/karma.conf-withrender.js b/karma.conf-withrender.js
@@ -5,9 +5,8 @@ var test_render_files = [
   'build/react-three.js',
   'test/createTestFixtureMountPoint.js', // why did I make this filename so long/
   'test/basics/*.js',
-
-  'node_modules/resemblejs/resemble.js',
   'test/components/*.js',
+  'node_modules/resemblejs/resemble.js',
   'test/pixels/pixelTests.js',
   {pattern:'test/pixels/*.png',included:false, served:true} // for render tests
 ];

diff --git a/src/components/THREEScene.js b/src/components/THREEScene.js
@@ -68,10 +68,9 @@ var THREEScene = React.createClass({
     },
 
     componentDidMount() {
-        var renderelement = ReactDOM.findDOMNode(this);
-        var props = this.props;
-
-//    var instance = this._reactInternalInstance._renderedComponent;
+        let renderelement = ReactDOM.findDOMNode(this);
+        let props = this.props;
+        let context = this._reactInternalInstance._context;
 
         this._THREEObject3D = new THREE.Scene();
         this._THREErenderer = new THREE.WebGLRenderer({
@@ -87,14 +86,17 @@ var THREEScene = React.createClass({
         this._THREErenderer.setSize(+props.width, +props.height);
         this._THREEraycaster = new THREE.Raycaster();
         //this.setApprovedDOMProperties(props);
-        THREEObject3DMixin.applyTHREEObject3DPropsToObject(this._THREEObject3D, {}, props);
+      THREEObject3DMixin.applyTHREEObject3DPropsToObject(this._THREEObject3D, {}, props);
+
+      console.log(context);
 
         var transaction = ReactUpdates.ReactReconcileTransaction.getPooled();
         transaction.perform(
-            this.mountAndAddChildrenAtRoot,
-            this,
-            props.children,
-            transaction
+          this.mountAndAddChildren,
+          this,
+          props.children,
+          transaction,
+	  context
         );
         ReactUpdates.ReactReconcileTransaction.release(transaction);
 
@@ -175,7 +177,8 @@ var THREEScene = React.createClass({
     },
 
     componentDidUpdate(oldProps) {
-        var props = this.props;
+        let props = this.props;
+        let context = this._reactInternalInstance._context;
 
         if (props.pixelRatio != oldProps.pixelRatio) {
             this._THREErenderer.setPixelRatio(props.pixelRatio);
@@ -197,12 +200,13 @@ var THREEScene = React.createClass({
 
         THREEObject3DMixin.applyTHREEObject3DPropsToObject(this._THREEObject3D, oldProps, props);
 
-        var transaction = ReactUpdates.ReactReconcileTransaction.getPooled();
+        let transaction = ReactUpdates.ReactReconcileTransaction.getPooled();
         transaction.perform(
-            this.updateChildrenAtRoot,
-            this,
-            this.props.children,
-            transaction
+          this.updateChildren,
+          this,
+          this.props.children,
+          transaction,
+	  context
         );
         ReactUpdates.ReactReconcileTransaction.release(transaction);
 

diff --git a/src/mixins/THREEContainerMixin.js b/src/mixins/THREEContainerMixin.js
@@ -45,10 +45,6 @@ var THREEContainerMixin = assign({},  ReactMultiChild.Mixin, {
         this._updateChildren(nextChildren, transaction, context);
     },
 
-    updateChildrenAtRoot: function (nextChildren, transaction) {
-        this.updateChildren(nextChildren, transaction, emptyObject);
-    },
-
     // called by any container component after it gets mounted
     mountAndAddChildren: function(children, transaction, context) {
         var mountedImages = this.mountChildren(
@@ -66,10 +62,6 @@ var THREEContainerMixin = assign({},  ReactMultiChild.Mixin, {
                 i++;
             }
         }
-    },
-
-    mountAndAddChildrenAtRoot: function(children, transaction) {
-        this.mountAndAddChildren(children, transaction, emptyObject);
     }
 });
 

diff --git a/test/components/scene.js b/test/components/scene.js
@@ -38,4 +38,70 @@ describe("THREE Scene Component", function() {
 
     expect(mountpoint.childNodes.length).toBe(0);
   });
+
+  it("passes the context down into threejs elements", function() {
+
+    // this component is an object that uses the x/y/z from the context to position the object
+    var Object3DFromContext = React.createClass({
+      displayName:'Object3D_PositionFromContext',
+      contextTypes: {
+	position_context: React.PropTypes.any
+      },
+      render: function() {
+	console.log(this.context);
+	return React.createElement(
+	  ReactTHREE.Object3D,
+	  {position: this.context.position_context}
+	);
+      }
+    });
+
+    // this component creates a context that contains the desired position
+    var TestFixtureWithContext = React.createClass({
+      displayName:'TestFixtureWithContext',
+      childContextTypes: {
+	position_context: React.PropTypes.any
+      },
+      getChildContext: function() {
+	return {
+	  position_context: new THREE.Vector3(
+	    this.props.mesh_x,
+	    this.props.mesh_y,
+	    this.props.mesh_z
+	  )
+	};
+      },
+      render: function() {
+	var sceneprops = {width:this.props.width, height:this.props.height, ref:'scene'};
+
+	// note that object3d  x/y/z are not passed down in the props, but must
+	// be obtained from the context
+	return React.createElement(ReactTHREE.Scene,
+				   sceneprops,
+				   React.createElement(Object3DFromContext)
+				  );
+      }
+    });
+
+    var contextcomponent = React.createElement(
+      TestFixtureWithContext,
+      {
+	width: 300,
+	height: 300,
+	mesh_x: 51,
+	mesh_y: 52,
+	mesh_z: 53
+      });
+
+    var reactinstance = ReactTHREE.render(contextcomponent, mountpoint);
+
+    // if the context was passed in the sprite x/y should have been
+    // determined by the x/y values in the context
+    var scene = reactinstance.refs.scene._THREEObject3D;
+    expect(scene.children[0].position.x).toBe(51);
+    expect(scene.children[0].position.y).toBe(52);
+    expect(scene.children[0].position.z).toBe(53);
+
+  });
+
 });