Dilate Checkbox vertical touch areas, see #239

phetsims · Sep 4, 2019 · 2c5140f · 2c5140f
1 parent 52d8adc
commit 2c5140f
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/js/common/EFACConstants.js b/js/common/EFACConstants.js
@@ -129,6 +129,7 @@ define( require => {
     ENERGY_SYMBOLS_PANEL_CORNER_RADIUS: 6,
     ENERGY_SYMBOLS_PANEL_MIN_WIDTH: 215,
     ENERGY_SYMBOLS_PANEL_TEXT_MAX_WIDTH: 180,
+    ENERGY_SYMBOLS_PANEL_CHECKBOX_Y_DILATION: 5,
     CONTROL_PANEL_CORNER_RADIUS: 10,
     RESET_ALL_BUTTON_RADIUS: 20,
     PLAY_PAUSE_BUTTON_RADIUS: 20,

diff --git a/js/intro/view/EFACIntroScreenView.js b/js/intro/view/EFACIntroScreenView.js
@@ -604,6 +604,8 @@ define( require => {
           spacing: 5
         } ), model.energyChunksVisibleProperty
       );
+      showEnergyCheckbox.touchArea =
+        showEnergyCheckbox.localBounds.dilatedY( EFACConstants.ENERGY_SYMBOLS_PANEL_CHECKBOX_Y_DILATION );
 
       // Create the control for linking/un-linking the heaters
       const flameNode = new Image( flameImage, {
@@ -619,11 +621,13 @@ define( require => {
           spacing: 5
         } ), model.linkedHeatersProperty
       );
+      linkHeatersCheckbox.touchArea =
+        linkHeatersCheckbox.localBounds.dilatedY( EFACConstants.ENERGY_SYMBOLS_PANEL_CHECKBOX_Y_DILATION );
 
       // Add the checkbox controls
       const controlPanelCheckboxes = new VBox( {
         children: [ showEnergyCheckbox, linkHeatersCheckbox ],
-        spacing: 8,
+        spacing: 10,
         align: 'left'
       } );
       const controlPanel = new Panel( controlPanelCheckboxes, {

diff --git a/js/systems/view/SystemsScreenView.js b/js/systems/view/SystemsScreenView.js
@@ -199,6 +199,8 @@ define( require => {
         } ),
         model.energyChunksVisibleProperty
       );
+      showEnergyChunksCheckbox.touchArea =
+        showEnergyChunksCheckbox.localBounds.dilatedY( EFACConstants.ENERGY_SYMBOLS_PANEL_CHECKBOX_Y_DILATION );
 
       // add the checkbox that controls the visibility of the energy chunks to a panel
       const showEnergyChunksPanel = new Panel( showEnergyChunksCheckbox, {