use vertex width constant in model bounds constants, see #398

js/QuadrilateralConstants.ts

@@ -10,26 +10,27 @@ import PhetFont from '../../scenery-phet/js/PhetFont.js';
 import quadrilateral from './quadrilateral.js';
 
 const SCREEN_TEXT_FONT = new PhetFont( { size: 18 } );
+const VERTEX_WIDTH = 0.1;
 
 const QuadrilateralConstants = {
 
   //----------------------------------------------------------------------------------------------------------
   // MODEL CONSTANTS
   //----------------------------------------------------------------------------------------------------------
 
-  // Amount of spacing in model coordinates between grid lines in the visual grid.
+  // Width of a square vertex in model coordinates.
+  VERTEX_WIDTH: VERTEX_WIDTH,
+
+  // Amount of spacing in model coordinates between major grid lines in the visual grid.
   GRID_SPACING: 0.25,
 
-  // Dimensions of model bounds.
-  // REVIEW: Explain why it is 3.1.  What is the 0.1 overlap exactly?  Or recompute the dimensions based on
-  // total number of gridlines, etc.
-  BOUNDS_WIDTH: 3.1,
-  BOUNDS_HEIGHT: 2.1,
+  // Dimensions of model bounds - base size extended by VERTEX_WIDTH so that the edge of a Vertex can get flush
+  // against the model bounds as the vertex center snaps to grid lines.
+  BOUNDS_WIDTH: 3 + VERTEX_WIDTH,
+  BOUNDS_HEIGHT: 2 + VERTEX_WIDTH,
 
-  // The "major" vertex interval when using ?reducedStepSize query parameter. Value is in model coordinates.
+  // ONLY FOR ?reducedStepSize.
   MAJOR_REDUCED_SIZE_VERTEX_INTERVAL: 0.0625,
-
-  // The "minor" vertex interval when the using ?reducedStepSize query parameter. Value is in model coordinates.
   MINOR_REDUCED_SIZE_VERTEX_INTERVAL: 0.015625,
 
   //----------------------------------------------------------------------------------------------------------

js/quadrilateral/model/QuadrilateralModel.ts

@@ -54,7 +54,7 @@ export default class QuadrilateralModel implements TModel {
 
   // The available bounds for smooth vertex dragging (the model bounds eroded by the width of a vertex so a vertex
   // can never go out of the model bounds.
-  public readonly vertexDragBounds = this.modelBounds.eroded( QuadrilateralVertex.VERTEX_WIDTH / 2 );
+  public readonly vertexDragBounds = this.modelBounds.eroded( QuadrilateralConstants.VERTEX_WIDTH / 2 );
 
   // The interval that Vertices are constrained to during interaction. There are many things that control the value:
   //  - A button in the UI to lock to small intervals (see useMinorIntervalsProperty and lockToMinorIntervalsProperty)

js/quadrilateral/model/QuadrilateralVertex.ts

@@ -20,8 +20,9 @@ import VertexLabel from './VertexLabel.js';
 import NullableIO from '../../../../tandem/js/types/NullableIO.js';
 import NumberIO from '../../../../tandem/js/types/NumberIO.js';
 import QuadrilateralMovable from './QuadrilateralMovable.js';
+import QuadrilateralConstants from '../../QuadrilateralConstants.js';
 
-const VERTEX_BOUNDS = new Bounds2( 0, 0, 0.1, 0.1 );
+const VERTEX_BOUNDS = new Bounds2( 0, 0, QuadrilateralConstants.VERTEX_WIDTH, QuadrilateralConstants.VERTEX_WIDTH );
 const HALF_WIDTH = VERTEX_BOUNDS.width / 2;
 const HALF_HEIGHT = VERTEX_BOUNDS.height / 2;
 
@@ -86,9 +87,6 @@ export default class QuadrilateralVertex extends QuadrilateralMovable {
   // The collection of n <= SMOOTHING_LENGTH number of positions for prototype tangible control. See smoothPosition().
   private readonly smoothingPositions: Vector2[] = [];
 
-  // in model coordinates, the width of the QuadrilateralVertex
-  public static readonly VERTEX_WIDTH = VERTEX_BOUNDS.width;
-
   /**
    * @param initialPosition - The initial position for the QuadrilateralVertex in model coordinates.
    * @param vertexLabel - A label tagging the vertex, so we can look up the equivalent vertex on another shape model

js/quadrilateral/view/CornerGuideNode.ts

@@ -24,6 +24,7 @@ import QuadrilateralColors from '../../QuadrilateralColors.js';
 import BooleanProperty from '../../../../axon/js/BooleanProperty.js';
 import QuadrilateralShapeModel from '../model/QuadrilateralShapeModel.js';
 import Multilink from '../../../../axon/js/Multilink.js';
+import QuadrilateralConstants from '../../QuadrilateralConstants.js';
 
 // constants
 // The size of each wedge of the angle guide, in radians
@@ -34,8 +35,8 @@ const WEDGE_SIZE_RADIANS = Utils.toRadians( WEDGE_SIZE_DEGREES );
 const WEDGE_RADIAL_LENGTH = 0.05;
 
 // The radii of the annulus
-const INNER_RADIUS = QuadrilateralVertex.VERTEX_WIDTH / 2;
-const OUTER_RADIUS = QuadrilateralVertex.VERTEX_WIDTH / 2 + WEDGE_RADIAL_LENGTH;
+const INNER_RADIUS = QuadrilateralConstants.VERTEX_WIDTH / 2;
+const OUTER_RADIUS = QuadrilateralConstants.VERTEX_WIDTH / 2 + WEDGE_RADIAL_LENGTH;
 
 const EXTERNAL_ANGLE_GUIDE_LENGTH = WEDGE_RADIAL_LENGTH * 8;