Add option to invert text color in the PeriodicTableCell.js and remov…

…e stroke highlight. See phetsims/build-a-nucleus#46
phetsims · Nov 1, 2022 · b0410cb · b0410cb
1 parent d21b2ff
commit b0410cb
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/js/view/PeriodicTableCell.js b/js/view/PeriodicTableCell.js
@@ -33,6 +33,7 @@ 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
       tandem: Tandem.REQUIRED,
       phetioEventType: EventType.USER
     }, options );
@@ -88,8 +89,13 @@ class PeriodicTableCell extends Rectangle {
   // @public
   setHighlighted( highLighted ) {
     this.fill = highLighted ? this.highlightedFill : this.normalFill;
-    this.stroke = highLighted ? PhetColorScheme.RED_COLORBLIND : 'black';
-    this.lineWidth = highLighted ? 2 : 1;
+    if ( !this.options.invertColors ) {
+      this.stroke = highLighted ? PhetColorScheme.RED_COLORBLIND : 'black';
+      this.lineWidth = highLighted ? 2 : 1;
+    }
+    else {
+      this.labelText.fill = highLighted ? 'white' : 'black';
+    }
     if ( this.options.showLabels ) {
       this.labelText.fontWeight = highLighted ? 'bold' : 'normal';
     }

diff --git a/js/view/PeriodicTableNode.js b/js/view/PeriodicTableNode.js
@@ -40,6 +40,7 @@ class PeriodicTableNode extends Node {
       interactiveMax: 0, //Atomic number of the heaviest element that should be interactive
       cellDimension: 25,
       showLabels: true,
+      invertColors: false,
       enabledCellColor: ENABLED_CELL_COLOR,
       disabledCellColor: DISABLED_CELL_COLOR,
       selectedCellColor: SELECTED_CELL_COLOR,
@@ -62,6 +63,7 @@ class PeriodicTableNode extends Node {
         const cell = new PeriodicTableCell( elementIndex, numberAtom, cellColor, {
           interactive: elementIndex <= options.interactiveMax,
           showLabels: options.showLabels,
+          invertColors: options.invertColors,
           length: options.cellDimension,
           tandem: options.tandem.createTandem( `${AtomIdentifier.getEnglishName( elementIndex )}Cell` )
         } );