Merge pull request #113 from HippoAR/allow-updating-most-properties

allow to update most properties and therefore do transitions

ARKit.js

@@ -199,4 +199,4 @@ ARKit.propTypes = {
 
 const RCTARKit = requireNativeComponent('RCTARKit', ARKit);
 
-module.exports = ARKit;
+export default ARKit;

DeviceMotion.js

@@ -16,4 +16,4 @@ const DeviceMotion = {
   },
 };
 
-module.exports = DeviceMotion;
+export default DeviceMotion;

components/ARBox.js

@@ -20,4 +20,4 @@ const ARBox = createArComponent('addBox', {
   material,
 });
 
-module.exports = ARBox;
+export default ARBox;

components/ARCapsule.js

@@ -18,4 +18,4 @@ const ARCapsule = createArComponent('addCapsule', {
   material,
 });
 
-module.exports = ARCapsule;
+export default ARCapsule;

components/ARCone.js

@@ -19,4 +19,4 @@ const ARCone = createArComponent('addCone', {
   material,
 });
 
-module.exports = ARCone;
+export default ARCone;

components/ARCylinder.js

@@ -18,4 +18,4 @@ const ARCylinder = createArComponent('addCylinder', {
   material,
 });
 
-module.exports = ARCylinder;
+export default ARCylinder;

components/ARGroup.js

@@ -7,4 +7,4 @@ const ARGroup = class extends Component {
   }
 };
 
-module.exports = ARGroup;
+export default ARGroup;

components/ARLight.js

@@ -25,4 +25,4 @@ const ARLight = createArComponent('addLight', {
   lightCategoryBitMask: categoryBitMask,
 });
 
-module.exports = ARLight;
+export default ARLight;

components/ARModel.js

@@ -25,6 +25,7 @@ const ARModel = createArComponent(
     }),
     material,
   },
+  ['model'],
 );
 
-module.exports = ARModel;
+export default ARModel;

components/ARPlane.js

@@ -22,4 +22,4 @@ const ARPlane = createArComponent('addPlane', {
   material,
 });
 
-module.exports = ARPlane;
+export default ARPlane;

components/ARPyramid.js

@@ -19,4 +19,4 @@ const ARPyramid = createArComponent('addPyramid', {
   material,
 });
 
-module.exports = ARPyramid;
+export default ARPyramid;

components/ARShape.js

@@ -11,9 +11,9 @@ const ARShape = createArComponent('addShape', {
     chamferMode,
     chamferRadius: PropTypes.number,
     chamferProfilePathSvg: PropTypes.string,
-    chamferProfilePathFlatness: PropTypes.string,
+    chamferProfilePathFlatness: PropTypes.number,
   }),
   material,
 });
 
-module.exports = ARShape;
+export default ARShape;

components/ARSphere.js

@@ -17,4 +17,4 @@ const ARSphere = createArComponent('addSphere', {
   material,
 });
 
-module.exports = ARSphere;
+export default ARSphere;

components/ARSprite.js

@@ -48,4 +48,4 @@ ARSprite.propTypes = {
   position
 };
 
-module.exports = ARSprite;
+export default ARSprite;

components/ARText.js

@@ -21,10 +21,11 @@ const ARText = createArComponent(
       // weight: PropTypes.string,
       size: PropTypes.number,
       depth: PropTypes.number,
-      chamfer: PropTypes.number,
+      chamfer: PropTypes.number
     }),
-    material,
+    material
   },
+  ['text', 'font']
 );
 
-module.exports = ARText;
+export default ARText;

components/ARTorus.js

@@ -18,4 +18,4 @@ const ARTorus = createArComponent('addTorus', {
   material,
 });
 
-module.exports = ARTorus;
+export default ARTorus;

components/ARTube.js

@@ -19,4 +19,4 @@ const ARTube = createArComponent('addTube', {
   material,
 });
 
-module.exports = ARTube;
+export default ARTube;

components/lib/createArComponent.js

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import { NativeModules } from 'react-native';
 import PropTypes from 'prop-types';
 import filter from 'lodash/filter';
 import isDeepEqual from 'fast-deep-equal';
@@ -7,8 +8,6 @@ import keys from 'lodash/keys';
 import pick from 'lodash/pick';
 import some from 'lodash/some';
 
-import { NativeModules } from 'react-native';
-
 import {
   castsShadow,
   categoryBitMask,
@@ -47,25 +46,29 @@ const PROP_TYPES_NODE = {
 
 const NODE_PROPS = keys(PROP_TYPES_NODE);
 const IMMUTABLE_PROPS = keys(PROP_TYPES_IMMUTABLE);
-
-const nodeProps = (id, props) => ({
-  id,
-  ...pick(props, NODE_PROPS),
-});
-
 const DEBUG = false;
 const TIMERS = {};
-export default (mountConfig, propTypes = {}) => {
+
+/**
+mountConfig,
+propTypes,
+nonUpdateablePropKeys: if a prop key is in this list,
+the property will be updated on scenekit, instead of beeing remounted.
+
+this excludes at the moment: model, font, text, (???)
+* */
+export default (mountConfig, propTypes = {}, nonUpdateablePropKeys = []) => {
   const allPropTypes = {
     ...MOUNT_UNMOUNT_ANIMATION_PROPS,
     ...PROP_TYPES_IMMUTABLE,
     ...PROP_TYPES_NODE,
     ...propTypes,
   };
+  // any custom props (material, shape, ...)
   const nonNodePropKeys = keys(propTypes);
 
-  const getNonNodeProps = props => ({
-    ...pick(props, nonNodePropKeys),
+  const processColors = props => ({
+    ...props,
     ...(props.color ? { color: processColor(props.color) } : {}),
     ...(props.shadowColor
       ? { shadowColor: processColor(props.shadowColor) }
@@ -75,22 +78,25 @@ export default (mountConfig, propTypes = {}) => {
       : {}),
   });
 
+  const getNonNodeProps = props => ({
+    ...pick(props, nonNodePropKeys),
+    ...processColors(props),
+  });
+
   const mountFunc =
     typeof mountConfig === 'string'
       ? ARGeosManager[mountConfig]
       : mountConfig.mount;
 
-  // this function is only called on non-node properties
-  const updateFunc =
-    typeof mountConfig === 'object' && mountConfig.update
-      ? mountConfig.update
-      : mountFunc;
-
   const mount = (id, props) => {
-    mountFunc(getNonNodeProps(props), nodeProps(id, props), props.frame);
-  };
-  const update = (id, props) => {
-    updateFunc(getNonNodeProps(props), nodeProps(id, props), props.frame);
+    mountFunc(
+      getNonNodeProps(props),
+      {
+        id,
+        ...pick(props, NODE_PROPS),
+      },
+      props.frame,
+    );
   };
 
   const ARComponent = class extends Component {
@@ -99,12 +105,13 @@ export default (mountConfig, propTypes = {}) => {
       this.identifier = this.props.id || generateId();
       const { propsOnMount, ...props } = this.props;
       if (propsOnMount) {
+        const fullPropsOnMount = { ...props, ...propsOnMount };
         const {
           transition: transitionOnMount = { duration: 0 },
-        } = propsOnMount;
-        if (DEBUG) console.log('mount', { ...props, ...propsOnMount });
+        } = fullPropsOnMount;
+        if (DEBUG) console.log('mount', fullPropsOnMount);
         this.doPendingTimers();
-        mount(this.identifier, { ...props, ...propsOnMount });
+        mount(this.identifier, fullPropsOnMount);
 
         this.delayed(() => {
           this.props = propsOnMount;
@@ -121,12 +128,10 @@ export default (mountConfig, propTypes = {}) => {
         key => !isDeepEqual(props[key], this.props[key]),
       );
 
-      if (DEBUG) {
-        console.log('will update', changedKeys, props);
-      }
       if (isEmpty(changedKeys)) {
         return;
       }
+
       if (__DEV__) {
         const nonAllowedUpdates = filter(changedKeys, k =>
           IMMUTABLE_PROPS.includes(k),
@@ -137,14 +142,25 @@ export default (mountConfig, propTypes = {}) => {
           );
         }
       }
-      if (some(NODE_PROPS, k => changedKeys.includes(k))) {
-        if (DEBUG) console.log('update node');
-        ARGeosManager.updateNode(this.identifier, pick(props, NODE_PROPS));
-      }
 
-      if (some(nonNodePropKeys, k => changedKeys.includes(k))) {
-        if (DEBUG) console.log('update other stuff');
-        update(this.identifier, props);
+      if (some(changedKeys, k => nonUpdateablePropKeys.includes(k))) {
+        if (DEBUG) console.log('need to remount node because of ', changedKeys);
+        mount(this.identifier, { ...this.props, ...props });
+      } else {
+        // every property is updateable
+        // send only these changed property to the native part
+
+        const propsToupdate = {
+          // always inclue transition
+          transition: {
+            ...this.props.transition,
+            ...props.transition,
+          },
+          ...processColors(pick(props, changedKeys)),
+        };
+
+        if (DEBUG) console.log('update node', propsToupdate);
+        ARGeosManager.updateNode(this.identifier, propsToupdate);
       }
     }
 

components/lib/propTypes.js

@@ -1,8 +1,7 @@
+import { NativeModules } from 'react-native';
 import { values } from 'lodash';
 import PropTypes from 'prop-types';
 
-import { NativeModules } from 'react-native';
-
 const ARKitManager = NativeModules.ARKitManager;
 
 export const position = PropTypes.shape({

index.js

@@ -40,7 +40,7 @@ ARKit.Group = ARGroup;
 ARKit.Shape = ARShape;
 ARKit.Light = ARLight;
 
-module.exports = {
+export {
   ARKit,
   DeviceMotion,
   ARBox,
@@ -57,5 +57,5 @@ module.exports = {
   ARModel,
   ARLight,
   ARGroup,
-  withProjectedPosition
+  withProjectedPosition,
 };

ios/RCTARKit.m

@@ -239,7 +239,6 @@ -(ARWorldTrackingConfiguration *)configuration {
 
     _configuration = [ARWorldTrackingConfiguration new];
     _configuration.planeDetection = ARPlaneDetectionHorizontal;
-
     return _configuration;
 }
 

ios/RCTARKitNodes.h

@@ -36,7 +36,7 @@ typedef NS_OPTIONS(NSUInteger, RFReferenceFrame) {
 + (instancetype)sharedInstance;
 
 - (void)addNodeToScene:(SCNNode *)node inReferenceFrame:(NSString *)referenceFrame;
-- (void)updateNode:(NSString *)key properties:(NSDictionary *) properties;
+- (void)updateNode:(NSString *)nodeId properties:(NSDictionary *) properties;
 - (float)getCameraDistanceToPoint:(SCNVector3)point;
 - (void)registerNode:(SCNNode *)node forKey:(NSString *)key;
 - (SCNNode *)nodeForKey:(NSString *)key;

ios/RCTARKitNodes.m

@@ -234,16 +234,30 @@ - (void)removeNodeForKey:(NSString *)key {
     }
 }
 
-- (void)updateNode:(NSString *)key properties:(NSDictionary *) properties {
-    SCNNode *node = [self.nodes objectForKey:key];
-    // only basic properties like position and rotation can currently be updated this way
+- (void)updateNode:(NSString *)nodeId properties:(NSDictionary *) properties {
+    SCNNode *node = [self.nodes objectForKey:nodeId];
     if(node) {
         [RCTConvert setNodeProperties:node properties:properties];
+        if(node.geometry && properties[@"shape"]) {
+              [RCTConvert setShapeProperties:node.geometry properties:properties[@"shape"]];
+        }
+        if(properties[@"material"]) {
+            for (id material in node.geometry.materials) {
+                [RCTConvert setMaterialProperties:material properties:properties[@"material"]];
+            }
+        }
+        if(node.light) {
+            [RCTConvert setLightProperties:node.light properties:properties];
+        }
+
+
     }
 
 }
 
 
+
+
 #pragma mark - RCTARKitSessionDelegate
 - (void)session:(ARSession *)session didUpdateFrame:(ARFrame *)frame {
     simd_float4 pos = frame.camera.transform.columns[3];

ios/RCTConvert+ARKit.h

@@ -38,6 +38,8 @@
 
 + (void)setNodeProperties:(SCNNode *)node properties:(id)json;
 + (void)setMaterialProperties:(SCNMaterial *)material properties:(id)json;
++ (void)setShapeProperties:(SCNGeometry *)geometry properties:(id)json;
++ (void)setLightProperties:(SCNLight *)light properties:(id)json;
 
 @end