marlitas
commented
11 months ago Here's a patch for more pattern string work that should probably be reviewed by another dev at some point. There are definitely workarounds here since this is more of an expedited process...
```diff
Subject: [PATCH] Pattern String
---
Index: number-line-integers/js/explore/view/TemperatureSceneView.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/number-line-integers/js/explore/view/TemperatureSceneView.js b/number-line-integers/js/explore/view/TemperatureSceneView.js
--- a/number-line-integers/js/explore/view/TemperatureSceneView.js (revision c545412ea32b5804d2230b20882850693c9c3856)
+++ b/number-line-integers/js/explore/view/TemperatureSceneView.js (date 1698277272270)
@@ -227,14 +227,6 @@
numberLinesRootNode.addChild( celsiusLabelsLayer );
numberLinesRootNode.addChild( fahrenheitLabelsLayer );
- // Set the number line position to be fixed, roughly horizontally centered in the panel, and just below the header
- // label. It's important that these be absolute numbers so that the layout of the panel doesn't change
- // dramatically as the string sizes change (e.g. in translations and string tests). The right side of the number
- // line is used to set the X position because there is no text there, so the position won't change if different
- // size labels are present.
- // numberLinesRootNode.top = 25;
- // numberLinesRootNode.right = 110;
-
const gridBox = new GridBox( {
columns: [ [ titleHBox, numberLinesRootNode ], [ temperatureUnitsSelector ] ],
spacing: PANEL_CONTENT_SPACING,
Index: number-line-integers/js/explore/view/ElevationPointControllerNode.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/number-line-integers/js/explore/view/ElevationPointControllerNode.js b/number-line-integers/js/explore/view/ElevationPointControllerNode.js
--- a/number-line-integers/js/explore/view/ElevationPointControllerNode.js (revision c545412ea32b5804d2230b20882850693c9c3856)
+++ b/number-line-integers/js/explore/view/ElevationPointControllerNode.js (date 1698279422944)
@@ -8,6 +8,7 @@
*/
import Multilink from '../../../../axon/js/Multilink.js';
+import PatternStringProperty from '../../../../axon/js/PatternStringProperty.js';
import { Shape } from '../../../../kite/js/imports.js';
import PointControllerNode from '../../../../number-line-common/js/common/view/PointControllerNode.js';
import merge from '../../../../phet-core/js/merge.js';
@@ -77,12 +78,12 @@
// handling of what the point controller does when the absolute value checkbox is checked
const absoluteValueLine = new Path( null, { stroke: pointController.color, lineWidth: 2 } );
- const distanceText = new Text( '', {
- font: new PhetFont( 18 ),
- fill: pointController.color,
- maxWidth: DISTANCE_TEXT_MAX_WIDTH
- } );
- const distanceLabel = new BackgroundNode( distanceText, NLIConstants.LABEL_BACKGROUND_OPTIONS );
+
+ // We do not have access to the valueProperties we need to create a patternStringProperty at start-up. This is a work-around
+ // to enable dynamicLocale without doing a full restructure of the sim.
+ const distanceTextWrapper = new Node( { children: [] } );
+
+ const distanceLabel = new BackgroundNode( distanceTextWrapper, NLIConstants.LABEL_BACKGROUND_OPTIONS );
this.addChild( absoluteValueLine );
this.addChild( distanceLabel );
absoluteValueLine.moveToBack();
@@ -101,15 +102,15 @@
.moveTo( compositeImageNode.x, compositeImageNode.y )
.lineTo( compositeImageNode.x, seaLevel );
- const value = pointController.numberLinePoints.get( 0 ).valueProperty.value;
- let seaLevelText = seaLevelString;
- if ( value < 0 ) {
- seaLevelText = StringUtils.fillIn( amountBelowSeaLevelString, { value: Math.abs( value ) } );
+ if ( distanceTextWrapper.children.length === 0 ) {
+ const distanceText = new Text( new PatternStringProperty( amountAboveSeaLevelString, { value: pointController.numberLinePoints.get( 0 ).valueProperty } ), {
+ font: new PhetFont( 18 ),
+ fill: pointController.color,
+ maxWidth: DISTANCE_TEXT_MAX_WIDTH
+ } );
+ distanceTextWrapper.children = [ distanceText ];
}
- else if ( value > 0 ) {
- seaLevelText = StringUtils.fillIn( amountAboveSeaLevelString, { value: value } );
- }
- distanceText.string = seaLevelText;
+
distanceLabel.visible = true;
distanceLabel.leftCenter = compositeImageNode.rightCenter.plus( textOffset );
}
Index: number-line-integers/js/explore/view/BankPointControllerNode.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/number-line-integers/js/explore/view/BankPointControllerNode.js b/number-line-integers/js/explore/view/BankPointControllerNode.js
--- a/number-line-integers/js/explore/view/BankPointControllerNode.js (revision c545412ea32b5804d2230b20882850693c9c3856)
+++ b/number-line-integers/js/explore/view/BankPointControllerNode.js (date 1698279935360)
@@ -8,6 +8,8 @@
* @author Saurabh Totey
*/
+import BooleanProperty from '../../../../axon/js/BooleanProperty.js';
+import PatternStringProperty from '../../../../axon/js/PatternStringProperty.js';
import Vector2 from '../../../../dot/js/Vector2.js';
import { Shape } from '../../../../kite/js/imports.js';
import NLCConstants from '../../../../number-line-common/js/common/NLCConstants.js';
@@ -15,7 +17,6 @@
import PiggyBankDecoration from '../../../../number-line-common/js/explore/model/PiggyBankDecoration.js';
import PiggyBankNode from '../../../../number-line-common/js/explore/view/PiggyBankNode.js';
import merge from '../../../../phet-core/js/merge.js';
-import StringUtils from '../../../../phetcommon/js/util/StringUtils.js';
import BackgroundNode from '../../../../scenery-phet/js/BackgroundNode.js';
import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
import { Circle, Color, Node, Text } from '../../../../scenery/js/imports.js';
@@ -75,14 +76,9 @@
controllerNode.addChild( piggyBankNode );
// Add the balance indicator node.
- const balanceNode = new Text( '', {
- font: new PhetFont( 30 ),
- fill: 'white',
- stroke: 'black',
- center: Vector2.ZERO,
- maxWidth: 65
- } );
- controllerNode.addChild( balanceNode );
+ const balanceTextWrapper = new Node();
+
+ controllerNode.addChild( balanceTextWrapper );
// dilates the touch area for the controllerNode
controllerNode.touchArea = controllerNode.bounds.dilated( TOUCH_DILATION );
@@ -92,8 +88,11 @@
super( pointController, options );
// the readout that will display the absolute value in a phrase
- const absoluteValueText = new Text( '', { font: new PhetFont( 18 ), maxWidth: 250 } );
- const absoluteValueBackground = new BackgroundNode( absoluteValueText, NLCConstants.LABEL_BACKGROUND_OPTIONS );
+
+ const absoluteValueMoneyAmountVisibleProperty = new BooleanProperty( false );
+ const absoluteValueDebtAmountVisibleProperty = new BooleanProperty( false );
+ const absoluteValueNode = new Node( );
+ const absoluteValueBackground = new BackgroundNode( absoluteValueNode, NLCConstants.LABEL_BACKGROUND_OPTIONS );
this.addChild( absoluteValueBackground );
// Get a reference to the number line (there is only one for this scene).
@@ -158,25 +157,46 @@
piggyBankNode.fill = fill;
// Update the balance indicator text.
- const signIndicator = currentBalance < 0 ? '-' : '';
- balanceNode.string = signIndicator + StringUtils.fillIn( moneyAmountString, {
- currencyUnit: currencyUnitsString,
- value: Math.abs( currentBalance )
- } );
- balanceNode.center = Vector2.ZERO;
+
+ if ( balanceTextWrapper.children.length === 0 ) {
+ const balanceNode = new Text( new PatternStringProperty( balanceAmountString, {
+ currencyUnit: currencyUnitsString,
+ value: numberLinePoint.valueProperty
+ } ), {
+ font: new PhetFont( 30 ),
+ fill: 'white',
+ stroke: 'black',
+ center: Vector2.ZERO,
+ maxWidth: 65
+ } );
+ balanceTextWrapper.children = [ balanceNode ];
+ }
+
+
+ balanceTextWrapper.center = Vector2.ZERO;
// Update the absolute value readout.
const value = numberLinePoint.valueProperty.value;
- let stringTemplate;
+
+ if ( absoluteValueNode.children.length === 0 ) {
+ const absoluteValueMoneyAmountText = new Text( new PatternStringProperty( moneyAmountString, { value: numberLinePoint.valueProperty } ),
+ { font: new PhetFont( 18 ), maxWidth: 250,
+ fill: POSITIVE_ABSOLUTE_VALUE_TEXT_COLOR, visibleProperty: absoluteValueMoneyAmountVisibleProperty } );
+ const absoluteValueDebtAmountText = new Text( new PatternStringProperty( debtAmountString, { value: numberLinePoint.valueProperty } ),
+ { font: new PhetFont( 18 ), maxWidth: 250,
+ fill: NEGATIVE_ABSOLUTE_VALUE_TEXT_COLOR, visibleProperty: absoluteValueDebtAmountVisibleProperty } );
+
+ absoluteValueNode.children = [ absoluteValueMoneyAmountText, absoluteValueDebtAmountText ];
+ }
+
if ( value < 0 ) {
- stringTemplate = debtAmountString;
- absoluteValueText.fill = NEGATIVE_ABSOLUTE_VALUE_TEXT_COLOR;
+ absoluteValueMoneyAmountVisibleProperty.value = false;
+ absoluteValueDebtAmountVisibleProperty.value = true;
}
else {
- stringTemplate = balanceAmountString;
- absoluteValueText.fill = value > 0 ? POSITIVE_ABSOLUTE_VALUE_TEXT_COLOR : ZERO_FILL;
+ absoluteValueMoneyAmountVisibleProperty.value = true;
+ absoluteValueDebtAmountVisibleProperty.value = false;
}
- absoluteValueText.string = StringUtils.fillIn( stringTemplate, { value: Math.abs( value ) } );
updateAbsoluteValueReadoutPosition();
}
};
Index: number-line-common/js/common/view/SpatializedNumberLineNode.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/number-line-common/js/common/view/SpatializedNumberLineNode.js b/number-line-common/js/common/view/SpatializedNumberLineNode.js
--- a/number-line-common/js/common/view/SpatializedNumberLineNode.js (revision c721395e307b73dfd74f2dab587291e6bbe534f1)
+++ b/number-line-common/js/common/view/SpatializedNumberLineNode.js (date 1698278677784)
@@ -7,6 +7,7 @@
*/
import Multilink from '../../../../axon/js/Multilink.js';
+import PatternStringProperty from '../../../../axon/js/PatternStringProperty.js';
import StringProperty from '../../../../axon/js/StringProperty.js';
import merge from '../../../../phet-core/js/merge.js';
import Orientation from '../../../../phet-core/js/Orientation.js';
@@ -610,10 +611,7 @@
// create label
let labelNode;
if ( addLabel ) {
- labelNode = StringUtils.fillIn( this.options.numericalLabelTemplate, { value: Math.abs( value ) } );
- if ( value < 0 ) {
- labelNode = MathSymbols.UNARY_MINUS + labelNode;
- }
+ labelNode = new PatternStringProperty( this.options.numericalLabelTemplate, { value: value } );
}
let tickMark;
Index: number-line-common/js/common/view/NumberLineRangeSelector.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/number-line-common/js/common/view/NumberLineRangeSelector.js b/number-line-common/js/common/view/NumberLineRangeSelector.js
--- a/number-line-common/js/common/view/NumberLineRangeSelector.js (revision c721395e307b73dfd74f2dab587291e6bbe534f1)
+++ b/number-line-common/js/common/view/NumberLineRangeSelector.js (date 1698278677801)
@@ -7,9 +7,9 @@
* @author John Blanco (PhET Interactive Simulations)
*/
+import PatternStringProperty from '../../../../axon/js/PatternStringProperty.js';
import NumberLineCommonStrings from '../../../../number-line-common/js/NumberLineCommonStrings.js';
import merge from '../../../../phet-core/js/merge.js';
-import StringUtils from '../../../../phetcommon/js/util/StringUtils.js';
import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
import { Text } from '../../../../scenery/js/imports.js';
import ComboBox from '../../../../sun/js/ComboBox.js';
@@ -45,7 +45,7 @@
rangeSelectionComboBoxItems.push( {
value: range,
createNode: () => new Text(
- StringUtils.fillIn( NumberLineCommonStrings.rangePattern, {
+ new PatternStringProperty( NumberLineCommonStrings.rangePatternStringProperty, {
lowValue: range.min,
highValue: range.max
} ),
```
Implementing dynamic locale into this sim looks rather straightforward, so I will quickly see if we can include as part of the new character set publication.