Return cards to their starting home position instead of where their h…

…ome node currently is, see phetsims/number-compare#24
phetsims · Mar 30, 2023 · b4c7718 · b4c7718
1 parent 072a98b
commit b4c7718
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 13 deletions.
diff --git a/js/lab/view/CardCreatorNode.ts b/js/lab/view/CardCreatorNode.ts
@@ -14,6 +14,7 @@ import Easing from '../../../../twixt/js/Easing.js';
 import Animation from '../../../../twixt/js/Animation.js';
 import CardNode from './CardNode.js';
 import TProperty from '../../../../axon/js/TProperty.js';
+import Vector2 from '../../../../dot/js/Vector2.js';
 import NumberCardNode from './NumberCardNode.js';
 import NumberSuiteCommonPreferences from '../../common/model/NumberSuiteCommonPreferences.js';
 
@@ -37,7 +38,8 @@ class CardCreatorNode extends Node {
       iconNode = new SymbolCardNode( {
         symbolType: options.symbolType,
         includeDragListener: false,
-        dragBoundsProperty: screenView.symbolCardBoundsProperty
+        dragBoundsProperty: screenView.symbolCardBoundsProperty,
+        homePosition: Vector2.ZERO
       } );
     }
     else {
@@ -46,28 +48,33 @@ class CardCreatorNode extends Node {
       iconNode = new NumberCardNode( {
         number: options.number!,
         includeDragListener: false,
-        dragBoundsProperty: screenView.objectPlayAreaBoundsProperty
+        dragBoundsProperty: screenView.objectPlayAreaBoundsProperty,
+        homePosition: Vector2.ZERO
       } );
     }
 
     iconNode.addInputListener( DragListener.createForwardingListener( ( event: PressListenerEvent ) => {
+
+      // Calculate the icon's origin.
+      let trail = screenView.getUniqueLeafTrailTo( iconNode );
+      trail = trail.slice( 1, trail.length );
+      const globalOrigin = trail.localToGlobalPoint( iconNode.localBounds.center );
+
+      let cardNode: CardNode;
+      let countProperty: TProperty<number>;
+
       const dropListener = () => {
         const homeNodeBounds = options.symbolType ? screenView.symbolCardCreatorPanel.bounds : screenView.numberCardCreatorCarousel.bounds;
 
         if ( cardNode.bounds.intersectsBounds( homeNodeBounds ) ) {
           cardNode.inputEnabled = false;
 
-          // calculate icon's origin
-          let trail = screenView.getUniqueLeafTrailTo( iconNode );
-          trail = trail.slice( 1, trail.length );
-          const globalOrigin = trail.localToGlobalPoint( iconNode.localBounds.center );
-
           cardNode.animation = new Animation( {
             duration: 0.3,
             targets: [ {
               property: cardNode.positionProperty,
               easing: Easing.CUBIC_IN_OUT,
-              to: globalOrigin
+              to: cardNode.homePosition
             } ]
           } );
 
@@ -80,8 +87,6 @@ class CardCreatorNode extends Node {
         }
       };
 
-      let cardNode: CardNode;
-      let countProperty: TProperty<number>;
       if ( options.symbolType ) {
         assert && assert( !options.number, 'symbolType and number cannot both be provided' );
 
@@ -91,7 +96,8 @@ class CardCreatorNode extends Node {
         cardNode = new SymbolCardNode( {
           symbolType: options.symbolType,
           dragBoundsProperty: screenView.symbolCardBoundsProperty,
-          dropListener: dropListener
+          dropListener: dropListener,
+          homePosition: globalOrigin
         } );
       }
       else {
@@ -102,7 +108,8 @@ class CardCreatorNode extends Node {
         cardNode = new NumberCardNode( {
           number: options.number!,
           dragBoundsProperty: screenView.numberCardBoundsProperty,
-          dropListener: dropListener
+          dropListener: dropListener,
+          homePosition: globalOrigin
         } );
       }
 

diff --git a/js/lab/view/CardNode.ts b/js/lab/view/CardNode.ts
@@ -25,6 +25,7 @@ type SelfOptions = {
   height: number;
   width: number;
   dragBoundsProperty: TReadOnlyProperty<Bounds2>;
+  homePosition: Vector2;
   includeDragListener?: boolean;
   dropListener?: () => void;
 };
@@ -34,6 +35,9 @@ class CardNode extends Node {
   public readonly dragListener: DragListener | null;
   public readonly positionProperty: TProperty<Vector2>;
   public animation: Animation | null;
+
+  // The position of this CardNode's creator icon in screen coords, where we should animate back to when returned.
+  public homePosition: Vector2;
   public static readonly WIDTH = WIDTH;
 
   public constructor( content: Node, providedOptions: CardNodeOptions ) {
@@ -46,6 +50,7 @@ class CardNode extends Node {
 
     this.positionProperty = new Vector2Property( Vector2.ZERO );
     this.animation = null;
+    this.homePosition = options.homePosition;
 
     const halfWidth = options.width / 2;
     const halfHeight = options.height / 2;

diff --git a/js/lab/view/NumberCardCreatorCarousel.ts b/js/lab/view/NumberCardCreatorCarousel.ts
@@ -62,7 +62,7 @@ class NumberCardCreatorCarousel extends Carousel {
       spacing: 10,
       animationOptions: {
         duration: 0.4
-      },
+      }
     } );
 
     this.screenView = screenView;