New data structure for MediaPipe vertex positions

[samreid]

Discovered in #398, @matthew-blackman and @jessegreenberg and I are interested in a data structure that maps vertex to position like so:

Subject: [PATCH] Center the label on creation, see https://github.com/phetsims/quadrilateral/issues/398
---
Index: js/quadrilateral/model/prototype/TangibleConnectionModel.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/quadrilateral/model/prototype/TangibleConnectionModel.ts b/js/quadrilateral/model/prototype/TangibleConnectionModel.ts
--- a/js/quadrilateral/model/prototype/TangibleConnectionModel.ts	(revision 0281e68bf49507e40b449e3998f61c639fbcfb11)
+++ b/js/quadrilateral/model/prototype/TangibleConnectionModel.ts	(date 1677791544046)
@@ -46,6 +46,7 @@
   // A transform that goes from tangible to virtual space. Used to set simulation vertex positions from
   // positions from position data provided by the physical device.
   // REVIEW: What is the virtual coordinate frame?
+  // REVIEW: Rename physicalToModelTransform
   public physicalToVirtualTransform = ModelViewTransform2.createIdentity();
 
   // If true, the simulation is currently "calibrating" to a physical device. During this phase, we are setting
@@ -134,6 +135,7 @@
 
     // REVIEW: Do we know each of these has only one association? If not, an earlier definition could be overwritten
     // by null later
+    // REVIEW: Maybe a different data structure, or at a minimum,
     vertexWithProposedPositions.forEach( vertexWithProposedPosition => {
       if ( vertexWithProposedPosition.vertex === shapeModel.vertexA ) {
         vertexAPosition = vertexWithProposedPosition.proposedPosition!;
Index: js/quadrilateral/view/prototype/QuadrilateralMediaPipe.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/quadrilateral/view/prototype/QuadrilateralMediaPipe.ts b/js/quadrilateral/view/prototype/QuadrilateralMediaPipe.ts
--- a/js/quadrilateral/view/prototype/QuadrilateralMediaPipe.ts	(revision 0281e68bf49507e40b449e3998f61c639fbcfb11)
+++ b/js/quadrilateral/view/prototype/QuadrilateralMediaPipe.ts	(date 1677791544036)
@@ -24,6 +24,7 @@
 import QuadrilateralShapeModel from '../../model/QuadrilateralShapeModel.js';
 import MediaPipeQueryParameters from '../../../../../tangible/js/mediaPipe/MediaPipeQueryParameters.js';
 import QuadrilateralTangibleController from './QuadrilateralTangibleController.js';
+import QuadrilateralVertex from '../../model/QuadrilateralVertex.js';
 
 // aspect ratio of the video stream to map camera coordinates to sim model coordinates
 const streamDimension2 = MediaPipe.videoStreamDimension2;
@@ -83,23 +84,13 @@
         const leftHandPositions = sortedPositions[ 0 ];
         const rightHandPositions = sortedPositions[ 1 ];
 
-        // package and attempt to update shape
-        const firstPositionProposal = {
-          vertex: this.quadrilateralShapeModel.vertexA,
-          proposedPosition: leftHandPositions.indexPosition
-        };
-        const secondPositionProposal = {
-          vertex: this.quadrilateralShapeModel.vertexB,
-          proposedPosition: rightHandPositions.indexPosition
-        };
-        const thirdPositionProposal = {
-          vertex: this.quadrilateralShapeModel.vertexC,
-          proposedPosition: rightHandPositions.thumbPosition
-        };
-        const fourthPositionProposal = {
-          vertex: this.quadrilateralShapeModel.vertexD,
-          proposedPosition: leftHandPositions.thumbPosition
-        };
+        // const vertices = { a: leftHandPositions.indexPosition, b: rightHandPositions.indexPosition, c: rightHandPositions.thumbPosition, d: leftHandPositions.thumbPosition };
+        const map = new Map<QuadrilateralVertex, Vector2>();
+        map.set( this.quadrilateralShapeModel.vertexA, leftHandPositions.indexPosition );
+        map.set( this.quadrilateralShapeModel.vertexB, rightHandPositions.indexPosition );
+        map.set( this.quadrilateralShapeModel.vertexC, rightHandPositions.thumbPosition );
+        map.set( this.quadrilateralShapeModel.vertexD, leftHandPositions.thumbPosition );
+
         this.tangibleController.setPositionsFromAbsolutePositionData( [ firstPositionProposal, secondPositionProposal, thirdPositionProposal, fourthPositionProposal ] );
       }
     }

[jessegreenberg]

I forgot there was an issue for this, I made this change as part of #398 while going through review comments. Here is the commit:

67c9960

It touched a number of functions but was pretty straight forward. Closing.