update: Fix ViroARPlaneSelector

Author: doranteseduardo

components/AR/ViroARPlaneSelector.tsx

@@ -11,7 +11,11 @@
 
 "use strict";
 
-import { ViroARPlaneSizes, ViroPlaneUpdatedMap } from "../Types/ViroEvents";
+import {
+  ViroARPlaneSizes,
+  ViroClickStateEvent,
+  ViroPlaneUpdatedMap,
+} from "../Types/ViroEvents";
 import { ViroARPlaneType, ViroNativeRef } from "../Types/ViroUtils";
 import * as React from "react";
 import { ViroMaterials } from "../Material/ViroMaterials";
@@ -65,9 +69,9 @@ export class ViroARPlaneSelector extends React.Component<Props, State> {
 
   _getARPlanes() {
     if (this.state.selectedSurface == -1) {
-      let arPlanes = [];
+      let arPlanes: JSX.Element[] = [];
       let numPlanes = this.props.maxPlanes || _maxPlanes;
-      for (var i = 0; i < numPlanes; i++) {
+      for (let i = 0; i < numPlanes; i++) {
         let foundARPlane = this.state.foundARPlanes[i];
         let surfaceWidth = foundARPlane ? foundARPlane.width : 0;
         let surfaceHeight = foundARPlane ? foundARPlane.height : 0;
@@ -82,7 +86,9 @@ export class ViroARPlaneSelector extends React.Component<Props, State> {
           >
             <ViroQuad
               materials={"ViroARPlaneSelector_Translucent"}
-              onClick={this._getOnClickSurface(i)}
+              onClickState={(clickState, position, source) =>
+                this._getOnClickSurface(i, { clickState, position, source })
+              }
               position={surfacePosition}
               width={surfaceWidth}
               height={surfaceHeight}
@@ -102,17 +108,20 @@ export class ViroARPlaneSelector extends React.Component<Props, State> {
     }
   }
 
-  _getOnClickSurface = (index: number) => {
-    return () => {
-      this.setState({ selectedSurface: index });
-      this._onPlaneSelected(this.state.foundARPlanes[index]);
-    };
+  _getOnClickSurface = (index: number, event: ViroClickStateEvent) => {
+    if (event.clickState < 3) {
+      return;
+    }
+    this.setState({ selectedSurface: index });
+    this._onPlaneSelected(this.state.foundARPlanes[index]);
   };
 
   _onARPlaneUpdated = (index: number) => {
     return (updateMap: ViroPlaneUpdatedMap) => {
-      this.state.foundARPlanes[index] = updateMap;
+      let newPlanes = [...this.state.foundARPlanes];
+      newPlanes[index] = updateMap;
       this.setState({
+        foundARPlanes: newPlanes,
         arPlaneSizes: this.state.arPlaneSizes,
       });
     };

components/Utilities/ViroVersion.ts

@@ -1 +1 @@
-export const VIRO_VERSION = "2.41.3";
+export const VIRO_VERSION = "2.41.4";

components/ViroText.tsx

@@ -100,7 +100,7 @@ export class ViroText extends ViroBase<Props> {
         // Fixes #272. for some reason, onClick was making it
         // to the native code. Other incorrect props don't make it
         // to the native code.
-        // https://github.com/NativeVision/viro/issues/272
+        // https://github.com/ReactVision/viro/issues/272
         onClick={undefined}
         onTouchViro={this._onTouch}
         onScrollViro={this._onScroll}

dist/components/AR/ViroARPlaneSelector.d.ts

@@ -8,7 +8,7 @@
  *
  * @providesModule ViroARPlaneSelector
  */
-import { ViroARPlaneSizes, ViroPlaneUpdatedMap } from "../Types/ViroEvents";
+import { ViroARPlaneSizes, ViroClickStateEvent, ViroPlaneUpdatedMap } from "../Types/ViroEvents";
 import { ViroARPlaneType, ViroNativeRef } from "../Types/ViroUtils";
 import * as React from "react";
 import { ViroCommonProps, ViroObjectProps } from "./ViroCommonProps";
@@ -38,7 +38,7 @@ export declare class ViroARPlaneSelector extends React.Component<Props, State> {
     };
     render(): JSX.Element;
     _getARPlanes(): JSX.Element | JSX.Element[];
-    _getOnClickSurface: (index: number) => () => void;
+    _getOnClickSurface: (index: number, event: ViroClickStateEvent) => void;
     _onARPlaneUpdated: (index: number) => (updateMap: ViroPlaneUpdatedMap) => void;
     _onPlaneSelected: (updateMap: ViroPlaneUpdatedMap) => void;
     reset: () => void;

dist/components/AR/ViroARPlaneSelector.js

@@ -62,13 +62,13 @@ class ViroARPlaneSelector extends React.Component {
         if (this.state.selectedSurface == -1) {
             let arPlanes = [];
             let numPlanes = this.props.maxPlanes || _maxPlanes;
-            for (var i = 0; i < numPlanes; i++) {
+            for (let i = 0; i < numPlanes; i++) {
                 let foundARPlane = this.state.foundARPlanes[i];
                 let surfaceWidth = foundARPlane ? foundARPlane.width : 0;
                 let surfaceHeight = foundARPlane ? foundARPlane.height : 0;
                 let surfacePosition = foundARPlane ? foundARPlane.center : [0, 0, 0];
                 arPlanes.push(<ViroARPlane_1.ViroARPlane key={_planePrefix + i} minWidth={this.props.minWidth} minHeight={this.props.minHeight} alignment={this.props.alignment} onAnchorUpdated={this._onARPlaneUpdated(i)}>
-            <ViroQuad_1.ViroQuad materials={"ViroARPlaneSelector_Translucent"} onClick={this._getOnClickSurface(i)} position={surfacePosition} width={surfaceWidth} height={surfaceHeight} rotation={[-90, 0, 0]}/>
+            <ViroQuad_1.ViroQuad materials={"ViroARPlaneSelector_Translucent"} onClickState={(clickState, position, source) => this._getOnClickSurface(i, { clickState, position, source })} position={surfacePosition} width={surfaceWidth} height={surfaceHeight} rotation={[-90, 0, 0]}/>
           </ViroARPlane_1.ViroARPlane>);
             }
             return arPlanes;
@@ -77,16 +77,19 @@ class ViroARPlaneSelector extends React.Component {
             return (<ViroARPlane_1.ViroARPlane key={_planePrefix + this.state.selectedSurface} {...this.props}></ViroARPlane_1.ViroARPlane>);
         }
     }
-    _getOnClickSurface = (index) => {
-        return () => {
-            this.setState({ selectedSurface: index });
-            this._onPlaneSelected(this.state.foundARPlanes[index]);
-        };
+    _getOnClickSurface = (index, event) => {
+        if (event.clickState < 3) {
+            return;
+        }
+        this.setState({ selectedSurface: index });
+        this._onPlaneSelected(this.state.foundARPlanes[index]);
     };
     _onARPlaneUpdated = (index) => {
         return (updateMap) => {
-            this.state.foundARPlanes[index] = updateMap;
+            let newPlanes = [...this.state.foundARPlanes];
+            newPlanes[index] = updateMap;
             this.setState({
+                foundARPlanes: newPlanes,
                 arPlaneSizes: this.state.arPlaneSizes,
             });
         };

dist/components/Utilities/ViroVersion.d.ts

@@ -1 +1 @@
-export declare const VIRO_VERSION = "2.41.3";
+export declare const VIRO_VERSION = "2.41.4";

dist/components/Utilities/ViroVersion.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VIRO_VERSION = void 0;
-exports.VIRO_VERSION = "2.41.3";
+exports.VIRO_VERSION = "2.41.4";

dist/components/ViroText.js

@@ -77,7 +77,7 @@ class ViroText extends ViroBase_1.ViroBase {
         // Fixes #272. for some reason, onClick was making it
         // to the native code. Other incorrect props don't make it
         // to the native code.
-        // https://github.com/NativeVision/viro/issues/272
+        // https://github.com/ReactVision/viro/issues/272
         onClick={undefined} onTouchViro={this._onTouch} onScrollViro={this._onScroll} onSwipeViro={this._onSwipe} onDragViro={this._onDrag} onPinchViro={this._onPinch} onRotateViro={this._onRotate} onFuseViro={this._onFuse} onAnimationStartViro={this._onAnimationStart} onAnimationFinishViro={this._onAnimationFinish} materials={materials} transformBehaviors={transformBehaviors} outerStroke={outerStroke} canCollide={this.props.onCollision != undefined} onCollisionViro={this._onCollision} timeToFuse={timeToFuse}/>);
     }
 }

package.json

@@ -3,7 +3,7 @@
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "version": "2.41.3",
+  "version": "2.41.4",
   "license": "MIT",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"