[iOS - iPhone] Hubs in-world movement breaks when attempting to use the pen

[misslivirose]

To reproduce
Enter the Hubs room and confirm that you can move around normally. Open the 'Place' menu and select the pen. The pen does not appear and I cannot write on the screen, which seems to no longer respond to any drag movement with the finger (e.g. movement or looking around)

Expected behavior
I can use the pen with clear instructions on how to drop it.

Hardware

• Device: iPhone
• OS: iOS
• Browser: Safari

[emclaren]

Happens on Android as well

[robertlong]

@misslivirose @emclaren can you see if you can reproduce this on the latest staging build? I can't on Android or iOS. Maybe there was something else going on in our test?

[misslivirose]

This didn't reproduce for me on my iPhone today.

[robertlong]

I encountered this bug in my own testing today when spawning a pen in one client and joining with another:

Also, while capturing details I tabbed away and when I came back there was this error repeatedly thrown:

So the pen error may be related to: #3383

I think what's happening is the networked entity isn't cloned correctly due to some JSON parse error and so the pen's networked component has an undefined data property. That would cause both the NAF.utils.isMine and getPendingOrExistingEntityMetadata functions to fail. Now I need to track down the cause of the JSON parse error.

[robertlong]

I've now traced this back to a network instantiation / DOM lifecycle bug and I have easy reproduction steps.

In this PR I added the pen-tools system. Which exists to store a reference to the currently active pen and toggles the pen scene state. This is used in the PlacePopover to toggle the pen and show the pen state.

The pen-tools system is basically a clone of the camera-tools system. The main difference between the two is where the component that is managed by these systems (pen and camera-tool) is located in the network template.

For camera-tool it is located on the root element of the network template. The pen component is located on a direct decedent of the root of it's network template. Both components register themselves with their system in the init method:
https://github.com/mozilla/hubs/blob/room-ui-redesign/src/components/tools/pen.js#L169
https://github.com/mozilla/hubs/blob/room-ui-redesign/src/components/camera-tool.js#L239

Inside both register functions we update the active tool and to do that, we check if we are the network owner of the object using NAF.utils.isMine: https://github.com/MozillaReality/networked-aframe/blob/master/src/utils.js#L103

NAF.utils.isMine checks if the user is the owner of the given entity and if not, it walks up the AFrame scene graph (DOM tree) until it finds the entity with the network component. For the camera-tool the component is on the entity with the networked component and it works just fine. However, for the pen component, the parent entity is the one with the networked component. Unfortunately, after some debugging I found that the networked component is on the parent component, but there's no data object, leading to the errors in my previous comment.

So it looks like the networked component attribute is set, but not parsed yet.

What's a little odd is that the pen component's data is parsed:

I'm a little stumped here. I know we have network instantiation race conditions, I just don't if that's what this is or how I would fix it yet.

[robertlong]

I think this might fix it. This issue is waiting on us to merge this PR: Hubs-Foundation/networked-aframe#44