Remove cellTextFontSize option from NuclideChartCell. Create nuclide …

…chart in static function in NuclideChartNode. Create chartTransform in static function in NuclideChartAccordionBox. Create icon node for Nuclide Chart, CompleteNuclideChartIconNode. See #46.
phetsims · May 26, 2023 · 79a3c1d · 79a3c1d
1 parent eac693c
commit 79a3c1d
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 40 deletions.
diff --git a/js/chart-intro/view/CompleteNuclideChartIconNode.ts b/js/chart-intro/view/CompleteNuclideChartIconNode.ts
@@ -0,0 +1,28 @@
+// Copyright 2023, University of Colorado Boulder
+
+/**
+ * Icon node for NuclideChart.
+ *
+ * @author Luisa Vargas
+ * @author Marla Schulz (PhET Interactive Simulations)
+ */
+
+import buildANucleus from '../../buildANucleus.js';
+import NuclideChartNode from './NuclideChartNode.js';
+import NuclideChartAccordionBox from './NuclideChartAccordionBox.js';
+import { Node } from '../../../../scenery/js/imports.js';
+
+class CompleteNuclideChartIconNode extends Node {
+
+  public constructor() {
+
+    const cellLayerNode = new Node();
+    const smallChartTransform = NuclideChartAccordionBox.getChartTransform( 5 );
+    NuclideChartNode.createNuclideChart( cellLayerNode, smallChartTransform, smallChartTransform.modelToViewDeltaX( 1 ) );
+
+    super( { children: [ cellLayerNode ] } );
+  }
+}
+
+buildANucleus.register( 'CompleteNuclideChartIconNode', CompleteNuclideChartIconNode );
+export default CompleteNuclideChartIconNode;
diff --git a/js/chart-intro/view/NuclideChartAccordionBox.ts b/js/chart-intro/view/NuclideChartAccordionBox.ts
@@ -27,16 +27,9 @@ class NuclideChartAccordionBox extends AccordionBox {
   public constructor( protonCountProperty: TReadOnlyProperty<number>, neutronCountProperty: TReadOnlyProperty<number>,
                       minWidth: number, selectedNuclideChartProperty: TReadOnlyProperty<SelectedChartType> ) {
 
-    const getChartTransform = ( scaleFactor: number ) => new ChartTransform( {
-      viewWidth: BANConstants.CHART_MAX_NUMBER_OF_NEUTRONS * scaleFactor,
-      modelXRange: new Range( BANConstants.DEFAULT_INITIAL_NEUTRON_COUNT, BANConstants.CHART_MAX_NUMBER_OF_NEUTRONS ),
-      viewHeight: BANConstants.CHART_MAX_NUMBER_OF_PROTONS * scaleFactor,
-      modelYRange: new Range( BANConstants.DEFAULT_INITIAL_PROTON_COUNT, BANConstants.CHART_MAX_NUMBER_OF_PROTONS )
-    } );
-
-    const partialChartTransform = getChartTransform( 20 );
-    const focusedChartTransform = getChartTransform( 10 );
-    const zoomInChartTransform = getChartTransform( 30 );
+    const partialChartTransform = NuclideChartAccordionBox.getChartTransform( 20 );
+    const focusedChartTransform = NuclideChartAccordionBox.getChartTransform( 10 );
+    const zoomInChartTransform = NuclideChartAccordionBox.getChartTransform( 30 );
 
     const nuclideChartAndNumberLines = new NuclideChartAndNumberLines( protonCountProperty, neutronCountProperty,
       partialChartTransform );
@@ -99,6 +92,15 @@ class NuclideChartAccordionBox extends AccordionBox {
       cornerRadius: BANConstants.PANEL_CORNER_RADIUS
     } );
   }
+
+  public static getChartTransform( scaleFactor: number ): ChartTransform {
+    return new ChartTransform( {
+      viewWidth: BANConstants.CHART_MAX_NUMBER_OF_NEUTRONS * scaleFactor,
+      modelXRange: new Range( BANConstants.DEFAULT_INITIAL_NEUTRON_COUNT, BANConstants.CHART_MAX_NUMBER_OF_NEUTRONS ),
+      viewHeight: BANConstants.CHART_MAX_NUMBER_OF_PROTONS * scaleFactor,
+      modelYRange: new Range( BANConstants.DEFAULT_INITIAL_PROTON_COUNT, BANConstants.CHART_MAX_NUMBER_OF_PROTONS )
+    } );
+  }
 }
 
 buildANucleus.register( 'NuclideChartAccordionBox', NuclideChartAccordionBox );

diff --git a/js/chart-intro/view/NuclideChartCell.ts b/js/chart-intro/view/NuclideChartCell.ts
@@ -8,11 +8,9 @@
 
 import { Color, Rectangle, RectangleOptions, TPaint } from '../../../../scenery/js/imports.js';
 import buildANucleus from '../../buildANucleus.js';
-import optionize from '../../../../phet-core/js/optionize.js';
+import optionize, { EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
 
-type SelfOptions = {
-  cellTextFontSize: number;
-};
+type SelfOptions = EmptySelfOptions;
 
 type NuclideChartCellOptions = SelfOptions & RectangleOptions;
 

diff --git a/js/chart-intro/view/NuclideChartNode.ts b/js/chart-intro/view/NuclideChartNode.ts
@@ -56,35 +56,13 @@ class NuclideChartNode extends Node {
     }, providedOptions );
     super( options );
 
-    // keep track of the cells of the chart
-    this.cells = [];
     const cellLength = chartTransform.modelToViewDeltaX( 1 );
+    const cellLayerNode = new Node();
 
-    // create and add the chart cells to the chart. row is proton number and column is neutron number.
-    chartTransform.forEachSpacing( Orientation.VERTICAL, 1, 0, 'strict', ( row, viewPosition ) => {
-      const populatedCellsInRow = POPULATED_CELLS[ row ];
-      const rowCells: ( NuclideChartCell | null )[] = [];
-      populatedCellsInRow.forEach( column => {
-
-        // get first decay in available decays to color the cell according to that decay type
-        const decayType = AtomIdentifier.getAvailableDecays( row, column )[ 0 ];
-
-        const color = AtomIdentifier.isStable( row, column ) ? BANColors.stableColorProperty.value :
-                      decayType === undefined ? BANColors.unknownColorProperty.value : // no available decays, unknown decay type
-                      DecayType.enumeration.getValue( decayType.toString() ).colorProperty.value;
+    // keep track of the cells of the chart
+    this.cells = NuclideChartNode.createNuclideChart( cellLayerNode, chartTransform, cellLength );
 
-        // create and add the NuclideChartCell
-        const cell = new NuclideChartCell( cellLength, row, column, decayType, {
-          fill: color,
-          cellTextFontSize: options.cellTextFontSize,
-          lineWidth: chartTransform.modelToViewDeltaX( BANConstants.NUCLIDE_CHART_CELL_LINE_WIDTH )
-        } );
-        cell.translation = new Vector2( chartTransform.modelToViewX( column ), viewPosition );
-        this.addChild( cell );
-        rowCells.push( cell );
-      } );
-      this.cells.push( rowCells );
-    } );
+    this.addChild( cellLayerNode );
 
     const arrowNode = new ArrowNode( 0, 0, 0, 0, {
       tailWidth: 3,
@@ -162,6 +140,38 @@ class NuclideChartNode extends Node {
         }
       } );
   }
+
+  public static createNuclideChart( cellLayerNode: Node, chartTransform: ChartTransform, cellLength: number ): ( NuclideChartCell | null )[][] {
+    const cells: ( NuclideChartCell | null )[][] = [];
+
+    // create and add the chart cells to the chart. row is proton number and column is neutron number.
+    chartTransform.forEachSpacing( Orientation.VERTICAL, 1, 0, 'strict', ( row, viewPosition ) => {
+      const populatedCellsInRow = POPULATED_CELLS[ row ];
+      const rowCells: ( NuclideChartCell | null )[] = [];
+      populatedCellsInRow.forEach( column => {
+
+        // get first decay in available decays to color the cell according to that decay type
+        const decayType = AtomIdentifier.getAvailableDecays( row, column )[ 0 ];
+
+        const color = AtomIdentifier.isStable( row, column ) ? BANColors.stableColorProperty.value :
+                      decayType === undefined ? BANColors.unknownColorProperty.value : // no available decays, unknown decay type
+                      DecayType.enumeration.getValue( decayType.toString() ).colorProperty.value;
+
+        // create and add the NuclideChartCell
+        const cell = new NuclideChartCell( cellLength, row, column, decayType, {
+          fill: color,
+          lineWidth: chartTransform.modelToViewDeltaX( BANConstants.NUCLIDE_CHART_CELL_LINE_WIDTH )
+        } );
+        cell.translation = new Vector2( chartTransform.modelToViewX( column ), viewPosition );
+        cellLayerNode.addChild( cell );
+        rowCells.push( cell );
+      } );
+      cells.push( rowCells );
+    } );
+
+    return cells;
+  }
+
 }
 
 buildANucleus.register( 'NuclideChartNode', NuclideChartNode );