convert Voicing to typescript and the new mixin pattern, phetsims/sce…

…nery#1340
phetsims · Jan 26, 2022 · efcc0c2 · efcc0c2
1 parent 525e2f7
commit efcc0c2
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 14 deletions.
diff --git a/js/friction/view/book/BookNode.js b/js/friction/view/book/BookNode.js
@@ -32,7 +32,7 @@ const grabButtonHelpTextString = frictionStrings.a11y.grabButtonHelpText;
 
 const SOUND_LEVEL = 0.1;
 
-class BookNode extends Node {
+class BookNode extends Voicing( Node ) {
   /**
    * @param {FrictionModel} model
    * @param {string} title - title that appears on the book spine
@@ -50,6 +50,7 @@ class BookNode extends Node {
       // whether or not we can drag the book
       drag: false,
       color: FrictionConstants.BOTTOM_BOOK_COLOR_MACRO,
+      cursor: 'pointer',
 
       // voicing
       voicingNameResponse: chemistryBookString,
@@ -62,9 +63,8 @@ class BookNode extends Node {
     assert && assert( typeof options.x === 'number', 'options.x must be specified' );
     assert && assert( typeof options.y === 'number', 'options.y must be specified' );
 
+    // TODO: this will pass options to be mutated up to super before Voicing has set its own defaults, https://github.com/phetsims/scenery/issues/1340
     super();
-    this.initializeVoicing();
-    this.mutate( options );
 
     // add cover, pass the whole tandem to hide the "cover" implementation detail
     this.addChild( new CoverNode( title, options.tandem, _.omit( options, [ 'tandem' ] ) ) );
@@ -161,9 +161,7 @@ class BookNode extends Node {
         this.setTranslation( options.x + position.x * model.bookDraggingScaleFactor, options.y + position.y * model.bookDraggingScaleFactor );
       } );
 
-      this.mutate( {
-        cursor: 'pointer'
-      } );
+      this.mutate( options );
     }
   }
 
@@ -176,8 +174,6 @@ class BookNode extends Node {
   }
 }
 
-Voicing.compose( BookNode );
-
 friction.register( 'BookNode', BookNode );
 
 export default BookNode;
diff --git a/js/friction/view/magnifier/MagnifierNode.js b/js/friction/view/magnifier/MagnifierNode.js
@@ -40,7 +40,7 @@ const ARROW_TOP = 22;
 
 const zoomedInChemistryBookString = frictionStrings.a11y.zoomedInChemistryBook;
 
-class MagnifierNode extends Node {
+class MagnifierNode extends Voicing( Node ) {
 
   /**
    * @param {FrictionModel} model
@@ -69,7 +69,7 @@ class MagnifierNode extends Node {
       tandem: Tandem.REQUIRED
     }, options );
 
-    super( options );
+    super();
 
     // add container for clipping
     this.container = new Node();
@@ -356,6 +356,8 @@ class MagnifierNode extends Node {
     this.resetMagnifierNode = () => {
       grabDragInteraction.reset();
     };
+
+    this.mutate( options );
   }
 
   /**
@@ -388,16 +390,15 @@ function addRowCircles( circleRadius, xSpacing, parentNode, options ) {
   }
 }
 
-class VoicingRectangle extends Rectangle {
+class VoicingRectangle extends Voicing( Rectangle ) {
   constructor( x, y, width, height, options ) {
     super( x, y, width, height );
-    this.initializeVoicing();
+
+    // Must be mutated after call
     this.mutate( options );
   }
 }
 
-Voicing.compose( VoicingRectangle );
-
 /**
  *
  * @param {Node} dragArea