keep text centered in atoms for screen icons, #140

phetsims · Sep 12, 2022 · 60ba90a · 60ba90a
1 parent f790dcd
commit 60ba90a
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 10 deletions.
diff --git a/js/threeatoms/ThreeAtomsScreen.ts b/js/threeatoms/ThreeAtomsScreen.ts
@@ -93,26 +93,37 @@ function createScreenIcon(): ScreenIcon {
     centerY: bondBC.bottom
   } );
 
+  const textMaxWidth = 0.65 * atomDiameter;
+
   const textA = new Text( MoleculePolarityStrings.atomAStringProperty, {
     font: font,
-    maxWidth: 0.75 * atomDiameter,
-    center: atomA.center
+    maxWidth: textMaxWidth
   } );
 
   const textB = new Text( MoleculePolarityStrings.atomBStringProperty, {
     font: font,
-    maxWidth: 0.75 * atomDiameter,
-    center: atomB.center
+    maxWidth: textMaxWidth
   } );
 
   const textC = new Text( MoleculePolarityStrings.atomCStringProperty, {
     font: font,
-    maxWidth: 0.75 * atomDiameter,
-    center: atomC.center
+    maxWidth: textMaxWidth
   } );
 
   const iconNode = new Node( { children: [ background, bondAB, bondBC, atomA, atomB, atomC, textA, textB, textC ] } );
 
+  textA.boundsProperty.link( bounds => {
+    textA.center = atomA.center;
+  } );
+
+  textB.boundsProperty.link( bounds => {
+    textB.center = atomB.center;
+  } );
+
+  textC.boundsProperty.link( bounds => {
+    textC.center = atomC.center;
+  } );
+
   return new ScreenIcon( iconNode, {
     maxIconWidthProportion: 1,
     maxIconHeightProportion: 1

diff --git a/js/twoatoms/TwoAtomsScreen.ts b/js/twoatoms/TwoAtomsScreen.ts
@@ -76,20 +76,28 @@ function createScreenIcon(): ScreenIcon {
     y: bond.centerY
   } );
 
+  const textMaxWidth = 0.65 * atomDiameter;
+
   const textA = new Text( MoleculePolarityStrings.atomAStringProperty, {
     font: font,
-    maxWidth: 0.75 * atomDiameter,
-    center: atomA.center
+    maxWidth: textMaxWidth
   } );
 
   const textB = new Text( MoleculePolarityStrings.atomBStringProperty, {
     font: font,
-    maxWidth: 0.75 * atomDiameter,
-    center: atomB.center
+    maxWidth: textMaxWidth
   } );
 
   const iconNode = new Node( { children: [ background, bond, atomA, atomB, textA, textB ] } );
 
+  textA.boundsProperty.link( bounds => {
+    textA.center = atomA.center;
+  } );
+
+  textB.boundsProperty.link( bounds => {
+    textB.center = atomB.center;
+  } );
+
   return new ScreenIcon( iconNode, {
     maxIconWidthProportion: 1,
     maxIconHeightProportion: 1