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

…nery#1340

js/quadrilateral/view/SideNode.ts

@@ -21,17 +21,13 @@ import QuadrilateralConstants from '../../common/QuadrilateralConstants.js';
 import QuadrilateralShapeModel from '../model/QuadrilateralShapeModel.js';
 import QuadrilateralModel from '../model/QuadrilateralModel.js';
 
-class SideNode extends Path {
+class SideNode extends Voicing( Path ) {
   private side: Side;
   private scratchSide: Side;
   private readonly quadrilateralShapeModel: QuadrilateralShapeModel;
   private scratchShapeModel: QuadrilateralShapeModel;
   private quadrilateralModel: QuadrilateralModel;
 
-  /**
-   * // TODO: How to do Voicing mixin?
-   * @mixes Voicing
-   */
   public constructor( quadrilateralModel: QuadrilateralModel, side: Side, scratchSide: Side, modelViewTransform: ModelViewTransform2, options?: any ) {
 
     options = merge( {
@@ -64,11 +60,7 @@ class SideNode extends Path {
     // A scratch model so we can test vertex positions before setting them with input
     this.scratchShapeModel = quadrilateralModel.quadrilateralTestShapeModel;
 
-    // initialize the voicing trait
-    // @ts-ignore - TODO: How to do mixin/Trait pattern?
-    this.initializeVoicing();
-
-    // Mutate options eagerly, but after voicing is initialized
+    // Mutate options eagerly, but not in super because that doesn't work with the Voicing trait
     this.mutate( options );
 
     // pdom - make the focus highlight tightly surround the line so that it is easier to see the shape
@@ -230,8 +222,5 @@ class SideNode extends Path {
   }
 }
 
-// @ts-ignore - TODO: How to do mixin/trait with TypeScript?
-Voicing.compose( SideNode );
-
 quadrilateral.register( 'SideNode', SideNode );
 export default SideNode;

js/quadrilateral/view/VertexNode.ts

@@ -18,7 +18,7 @@ import Vector2 from '../../../../dot/js/Vector2.js';
 import QuadrilateralConstants from '../../common/QuadrilateralConstants.js';
 import QuadrilateralModel from '../model/QuadrilateralModel.js';
 
-class VertexNode extends Rectangle {
+class VertexNode extends Voicing( Rectangle ) {
   private readonly model: QuadrilateralModel;
 
   constructor( vertex: Vertex, model: QuadrilateralModel, modelViewTransform: ModelViewTransform2, options?: Object ) {
@@ -37,9 +37,6 @@ class VertexNode extends Rectangle {
 
     this.model = model;
 
-    // @ts-ignore - how do we deal with mixin?
-    this.initializeVoicing();
-
     // debugging = to show the positions of the vertices while we don't have a graphical display
     let showVerticesPath: null | Path = null;
     if ( QuadrilateralQueryParameters.showVertices ) {
@@ -124,8 +121,5 @@ class VertexNode extends Rectangle {
   }
 }
 
-// @ts-ignore - TODO: What to do with trait? See #27
-Voicing.compose( VertexNode );
-
 quadrilateral.register( 'VertexNode', VertexNode );
 export default VertexNode;