Refine GroupSelectDragInteraction for Location Counting Objects

[marlitas]

A few things that need to be done:

• Refine the traversal algorithm when selecting counting objects to only include counting objects within the 90 degree angle in the direction of the key pressed.
• Add more documentation
• Specify placement of cues
• Check in on drag speed (with and without shift)

[marlitas]

• Fix bead keyboard dragging. It needs to know which bead to select when they get pushed past the separator. I'm sure there's some observable array logic happening there.

[marlitas]

@catherinecarter
Where do we want the "grab/release" cue to be? This is where it's at for now:

[marlitas]

I fixed the left addend, but now the right addend is not working as expected... I need to look into this tomorrow.

EDIT: this comment was actually related to #29, so disregard here.

[marlitas]

I worked on this for a bit, and though we got pretty close there's still some funky stuff happening. I'll abandon a patch here, but we're probably going to end up keeping the algorithm as is.

Subject: [PATCH] improved select search
---
Index: js/common/view/LocationCountingObjectNode.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/common/view/LocationCountingObjectNode.ts b/js/common/view/LocationCountingObjectNode.ts
--- a/js/common/view/LocationCountingObjectNode.ts	(revision 7173868d1f3772ae8d719341c784aef9575e6019)
+++ b/js/common/view/LocationCountingObjectNode.ts	(date 1740431367843)
@@ -28,6 +28,8 @@
 import { PositionPropertyType } from '../model/NumberPairsModel.js';
 import RepresentationType from '../model/RepresentationType.js';
 import OneCard from './OneCard.js';
+import Text from '../../../../scenery/js/nodes/Text.js';
+import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
 
 type SelfOptions = {
   handleLocationChange: ( countingObject: CountingObject, newPosition: Vector2 ) => void;
@@ -102,6 +104,25 @@
       this.center = position;
       !isSettingPhetioStateProperty.value && !isResettingAllProperty.value && providedOptions.handleLocationChange( countingObject, position );
     } );
+
+    if ( phet.chipper.queryParameters.dev ) {
+      this.addChild( new Text( countingObject.id + '', {
+        font: new PhetFont( 20 ),
+        fill: 'black',
+        center: appleNode.center
+      } ) );
+    }
+  }
+
+  /**
+   * Show the bead's id (object number) when debugging with ?dev.
+   */
+  private addCountingObjectID( id: number ): void {
+    this.addChild( new Text( id + '', {
+      font: new PhetFont( 20 ),
+      fill: 'black',
+      center: this.center
+    } ) );
   }
 }
 
Index: js/common/view/LocationCountingObjectsLayerNode.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/common/view/LocationCountingObjectsLayerNode.ts b/js/common/view/LocationCountingObjectsLayerNode.ts
--- a/js/common/view/LocationCountingObjectsLayerNode.ts	(revision 7173868d1f3772ae8d719341c784aef9575e6019)
+++ b/js/common/view/LocationCountingObjectsLayerNode.ts	(date 1740441555180)
@@ -9,7 +9,6 @@
 
 import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
 import DynamicProperty from '../../../../axon/js/DynamicProperty.js';
-import Utils from '../../../../dot/js/Utils.js';
 import Vector2 from '../../../../dot/js/Vector2.js';
 import Shape from '../../../../kite/js/Shape.js';
 import optionize, { EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
@@ -24,6 +23,8 @@
 import GroupSelectDragInteractionView from './GroupSelectDragInteractionView.js';
 import LocationCountingObjectNode from './LocationCountingObjectNode.js';
 import { NumberPairsUtils } from '../model/NumberPairsUtils.js';
+import { clamp } from '../../../../dot/js/util/clamp.js';
+import Line from '../../../../scenery/js/nodes/Line.js';
 
 type LocationCountingObjectsLayerNodeOptions = WithRequired<NodeOptions, 'tandem'>;
 
@@ -69,21 +70,41 @@
         // delta created by the arrow keys (1, 0) for right, (-1, 0), etc.
         const startingPoint = groupItem.locationPositionProperty.value;
         const delta = this.getKeysDelta( keysPressed );
-        const countingObjectsInDirection = model.countingObjects.filter( countingObject =>
-          countingObject.addendTypeProperty.value !== AddendType.INACTIVE &&
-          countingObject.locationPositionProperty.value.dot( delta ) > groupItem.locationPositionProperty.value.dot( delta ) );
 
-        let selectedGroupItem = groupItem;
-
-        // Return all counting objects in the above calculated direction. (if none stay where we are)
         // TODO: Refine to only include counting objects within the 90 degree angle of the direction. Currently
         //  is defaulting to 180 degrees.
+        const slope = Math.tan( 90 / 2 );
+        const startingPointX = startingPoint.x;
+        const startingPointY = startingPoint.y;
+
+        const vectorA = new Vector2( startingPointX, slope * startingPointY );
+        const vectorB = new Vector2( startingPointX, -slope * startingPointY );
+        delta.x < 0 && vectorA.negate() && vectorB.negate();
+        delta.y < 0 && vectorB.negate();
+        delta.y > 0 && vectorA.negate();
+
+        const countingObjectsInDirection = model.countingObjects.filter( countingObject => {
+          const inDirection = countingObject.locationPositionProperty.value.dot( delta ) > startingPoint.dot( delta );
+          const counterClockwiseA = vectorA.crossScalar( countingObject.locationPositionProperty.value ) > 0;
+          const counterClockwiseB = vectorB.crossScalar( countingObject.locationPositionProperty.value ) > 0;
+          if ( inDirection ) {
+            console.log( 'countingObjectID:', countingObject.id );
+            console.log( 'counterClockwiseA', counterClockwiseA );
+            console.log( 'counterClockwiseB', counterClockwiseB );
+          }
+
+          return countingObject.addendTypeProperty.value !== AddendType.INACTIVE && inDirection && counterClockwiseA !== counterClockwiseB;
+        } );
+
+
+        let selectedGroupItem = groupItem;
+        console.log( countingObjectsInDirection );
+        // Return all counting objects in the above calculated direction. (if none stay where we are)
         if ( countingObjectsInDirection.length > 0 ) {
           countingObjectsInDirection.sort( ( a, b ) =>
             a.locationPositionProperty.value.distance( startingPoint ) - b.locationPositionProperty.value.distance( startingPoint ) );
 
-          const coordinate = Utils.clamp( delta.x === 0 ? Math.abs( delta.y ) : Math.abs( delta.x ), 0, countingObjectsInDirection.length );
-          selectedGroupItem = countingObjectsInDirection[ coordinate - 1 ];
+          selectedGroupItem = countingObjectsInDirection[ 0 ];
         }
         return selectedGroupItem;
       },