Fix update bug with work items and activities. Fix placement of item in AR view

mobile/src/ARViewer/ARViewer.js

@@ -31,6 +31,7 @@ const shapes = {
     resources: [require("./models/clipboard.mtl")],
   },
 }
+
 const distance = (vectorA, vectorB) => {
   return Math.sqrt(
     (vectorB[0] - vectorA[0]) * (vectorB[0] - vectorA[0]) +
@@ -46,56 +47,55 @@ class WorkItemSceneAR extends React.Component {
     this.state = {
       position: [0, 0, 0],
       rotation: [0, 0, 0],
-      scale: [0.15, 0.15, 0.15],
+      scale: [0.2, 0.2, 0.2],
       shouldBillboard: true,
+      trackingInitialized: false,
+      haveAnchor: false,
     }
   }
 
   @autobind
   handleLoadEnd() {
     this.arScene.getCameraOrientationAsync().then((orientation) => {
+      console.log(orientation)
       return this.arScene
         .performARHitTestWithRay(orientation.forward)
         .then((results) => {
-          // Default position is just 1.5 meters in front of the user.
           const forward = orientation.forward
-          const defaultPosition = [
-            forward[0] * 1.5,
-            forward[1] * 1.5,
-            forward[2] * 1.5,
-          ]
+          const position = orientation.position
+          // Default position is just one meter in front of the user.
+          const defaultPosition =
+            [forward[0] * 1.0, forward[1] * 1.0, forward[2]] * 1.0
           let hitResultPosition = null
 
+          console.log(orientation)
+          console.log(results)
+
           // Filter the hit test results based on the position.
-          if (results.length > 0) {
-            for (var i = 0; i < results.length; i++) {
-              let result = results[i]
+          for (var i = 0; i < results.length; i++) {
+            let result = results[i]
 
-              if (result.type == "ExistingPlaneUsingExtent") {
-                let distance = Math.sqrt(
-                  (result.transform.position[0] - position[0]) *
-                    (result.transform.position[0] - position[0]) +
-                    (result.transform.position[1] - position[1]) *
-                      (result.transform.position[1] - position[1]) +
-                    (result.transform.position[2] - position[2]) *
-                      (result.transform.position[2] - position[2])
-                )
-                if (distance > 0.2 && distance < 10) {
-                  // If we found a plane greater than .2 and less than 10 meters away then choose it!
-                  hitResultPosition = result.transform.position
-                  break
-                }
-              } else if (result.type == "FeaturePoint" && !hitResultPosition) {
-                // If we haven't found a plane and this feature point is within range,
-                // then we'll use it as the initial display point
-                let distance = this._distance(
-                  position,
-                  result.transform.position
-                )
+            if (result.type == "ExistingPlaneUsingExtent") {
+              let distance = Math.sqrt(
+                (result.transform.position[0] - position[0]) *
+                  (result.transform.position[0] - position[0]) +
+                  (result.transform.position[1] - position[1]) *
+                    (result.transform.position[1] - position[1]) +
+                  (result.transform.position[2] - position[2]) *
+                    (result.transform.position[2] - position[2])
+              )
+              if (distance > 0.2 && distance < 10) {
+                // If we found a plane greater than .2 and less than 10 meters away then choose it!
+                hitResultPosition = result.transform.position
+                break
+              }
+            } else if (result.type == "FeaturePoint" && !hitResultPosition) {
+              // If we haven't found a plane and this feature point is within range,
+              // then we'll use it as the initial display point
+              let d = distance(position, result.transform.position)
 
-                if (distance > 0.2 && distance < 10) {
-                  hitResultPosition = result.transform.position
-                }
+              if (d > 0.2 && d < 10) {
+                hitResultPosition = result.transform.position
               }
             }
           }
@@ -108,6 +108,9 @@ class WorkItemSceneAR extends React.Component {
             this.updateInitialRotation()
           }, 200)
         })
+        .catch((err) => {
+          console.log(err)
+        })
     })
   }
 
@@ -132,6 +135,16 @@ class WorkItemSceneAR extends React.Component {
     })
   }
 
+  @autobind
+  handleTrackingInitialized() {
+    this.setState({ trackingInitialized: true })
+  }
+
+  @autobind
+  handleAnchorFound() {
+    this.setState({ haveAnchor: true })
+  }
+
   @autobind
   handleClick(position, source) {
     const { workItemId } = this.props
@@ -142,11 +155,22 @@ class WorkItemSceneAR extends React.Component {
   }
 
   render() {
-    const { position, scale, rotation, shouldBillboard } = this.state
+    const {
+      position,
+      scale,
+      rotation,
+      shouldBillboard,
+      trackingInitialized,
+      haveAnchor,
+    } = this.state
     const shape = shapes[this.props.workItemType]
 
     return (
-      <ViroARScene ref={(ref) => (this.arScene = ref)}>
+      <ViroARScene
+        anchorDetectionTypes="PlanesHorizontal"
+        ref={(ref) => (this.arScene = ref)}
+        onTrackingInitialized={this.handleTrackingInitialized}
+        onAnchorFound={this.handleAnchorFound}>
         <ViroAmbientLight color="#ffffff" intensity={200} />
         <ViroNode
           ref={(ref) => (this.arNode = ref)}
@@ -165,16 +189,18 @@ class WorkItemSceneAR extends React.Component {
             shadowFarZ={6}
             shadowOpacity={0.9}
           />
-          {shape && (
-            <Viro3DObject
-              position={[0, 0, -1]}
-              source={shape.source}
-              resources={shape.resources}
-              type="OBJ"
-              onLoadEnd={this.handleLoadEnd}
-              onClick={this.handleClick}
-            />
-          )}
+          {shape &&
+            trackingInitialized &&
+            haveAnchor && (
+              <Viro3DObject
+                position={[0, 0, -1]}
+                source={shape.source}
+                resources={shape.resources}
+                type="OBJ"
+                onLoadEnd={this.handleLoadEnd}
+                onClick={this.handleClick}
+              />
+            )}
           <ViroSurface
             rotation={[-90, 0, 0]}
             position={[0, -0.001, 0]}