Add options to set the stroke width, stroke color and the fill of the…

… label text when a PeriodicTableCell.js is highlighted. See phetsims/build-a-nucleus#46.
phetsims · Nov 4, 2022 · f8d4912 · f8d4912
1 parent 2465654
commit f8d4912
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git 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
@@ -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` )
         } );