From f8d49121f1d28ae81c6310f1952587c2b29a6989 Mon Sep 17 00:00:00 2001
From: Luisav1 <luisa.vargassuarez@ucalgary.ca>
Date: Fri, 4 Nov 2022 12:49:58 -0600
Subject: [PATCH] Add options to set the stroke width, stroke color and the
 fill of the label text when a PeriodicTableCell.js is highlighted. See
 https://github.com/phetsims/build-a-nucleus/issues/46.

---
 js/view/PeriodicTableCell.js | 14 ++++++--------
 js/view/PeriodicTableNode.js |  9 +++++++--
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/js/view/PeriodicTableCell.js b/js/view/PeriodicTableCell.js
index 3017311..64141c3 100644
--- a/js/view/PeriodicTableCell.js
+++ b/js/view/PeriodicTableCell.js
@@ -33,7 +33,9 @@ class PeriodicTableCell extends Rectangle {
       length: 25, //Width and height of cell (cells are square).
       interactive: false, // Boolean flag that determines whether cell is interactive.
       showLabels: true,
-      invertColors: false, // Boolean flag that inverts the label text color and removes stroke highlight
+      strokeHighlightWidth: 2,
+      strokeHighlightColor: PhetColorScheme.RED_COLORBLIND,
+      labelTextHighlightFill: 'black', // fill of label text when highlighted
       tandem: Tandem.REQUIRED,
       phetioEventType: EventType.USER
     }, options );
@@ -89,13 +91,9 @@ class PeriodicTableCell extends Rectangle {
   // @public
   setHighlighted( highLighted ) {
     this.fill = highLighted ? this.highlightedFill : this.normalFill;
-    if ( !this.options.invertColors ) {
-      this.stroke = highLighted ? PhetColorScheme.RED_COLORBLIND : 'black';
-      this.lineWidth = highLighted ? 2 : 1;
-    }
-    else {
-      this.labelText.fill = highLighted ? 'white' : 'black';
-    }
+    this.stroke = highLighted ? this.options.strokeHighlightColor : 'black';
+    this.lineWidth = highLighted ? this.options.strokeHighlightWidth : 1;
+    this.labelText.fill = highLighted ? this.options.labelTextHighlightFill : 'black';
     if ( this.options.showLabels ) {
       this.labelText.fontWeight = highLighted ? 'bold' : 'normal';
     }
diff --git a/js/view/PeriodicTableNode.js b/js/view/PeriodicTableNode.js
index 3ceadec..5c71af5 100644
--- a/js/view/PeriodicTableNode.js
+++ b/js/view/PeriodicTableNode.js
@@ -12,6 +12,7 @@ import AtomIdentifier from '../AtomIdentifier.js';
 import shred from '../shred.js';
 import ShredConstants from '../ShredConstants.js';
 import PeriodicTableCell from './PeriodicTableCell.js';
+import PhetColorScheme from '../../../scenery-phet/js/PhetColorScheme.js';
 
 // constants
 // 2D array that defines the table structure.
@@ -40,7 +41,9 @@ class PeriodicTableNode extends Node {
       interactiveMax: 0, //Atomic number of the heaviest element that should be interactive
       cellDimension: 25,
       showLabels: true,
-      invertColors: false,
+      strokeHighlightWidth: 2,
+      strokeHighlightColor: PhetColorScheme.RED_COLORBLIND,
+      labelTextHighlightFill: 'black',
       enabledCellColor: ENABLED_CELL_COLOR,
       disabledCellColor: DISABLED_CELL_COLOR,
       selectedCellColor: SELECTED_CELL_COLOR,
@@ -63,7 +66,9 @@ class PeriodicTableNode extends Node {
         const cell = new PeriodicTableCell( elementIndex, numberAtom, cellColor, {
           interactive: elementIndex <= options.interactiveMax,
           showLabels: options.showLabels,
-          invertColors: options.invertColors,
+          strokeHighlightWidth: options.strokeHighlightWidth,
+          strokeHighlightColor: options.strokeHighlightColor,
+          labelTextHighlightFill: options.labelTextHighlightFill,
           length: options.cellDimension,
           tandem: options.tandem.createTandem( `${AtomIdentifier.getEnglishName( elementIndex )}Cell` )
         } );