fix dynamic layout, #140

phetsims · Sep 1, 2022 · d5714e0 · d5714e0
1 parent 880ce71
commit d5714e0
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 13 deletions.
diff --git a/js/common/view/SurfaceColorKey.ts b/js/common/view/SurfaceColorKey.ts
@@ -99,10 +99,19 @@ export default class SurfaceColorKey extends Node {
     }
 
     // layout
-    titleText.centerX = spectrumNode.centerX;
-    leftLabelText.left = spectrumNode.left + options.xMargin;
-    rightLabelText.right = spectrumNode.right - options.xMargin;
-    titleText.top = leftLabelText.top = rightLabelText.top = spectrumNode.bottom + options.ySpacing;
+    const top = spectrumNode.bottom + options.ySpacing;
+    titleText.boundsProperty.link( () => {
+      titleText.centerX = spectrumNode.centerX;
+      titleText.top = top;
+    } );
+    leftLabelText.boundsProperty.link( () => {
+      leftLabelText.left = spectrumNode.left + options.xMargin;
+      leftLabelText.top = top;
+    } );
+    rightLabelText.boundsProperty.link( () => {
+      rightLabelText.right = spectrumNode.right - options.xMargin;
+      rightLabelText.top = top;
+    } );
 
     this.mutate( options );
   }

diff --git a/js/twoatoms/view/TwoAtomsScreenView.ts b/js/twoatoms/view/TwoAtomsScreenView.ts
@@ -6,6 +6,7 @@
  * @author Chris Malley (PixelZoom, Inc.)
  */
 
+import Multilink from '../../../../axon/js/Multilink.js';
 import ScreenView, { ScreenViewOptions } from '../../../../joist/js/ScreenView.js';
 import optionize, { EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
 import PickRequired from '../../../../phet-core/js/types/PickRequired.js';
@@ -120,17 +121,22 @@ export default class TwoAtomsScreenView extends ScreenView {
     platesNode.centerX = moleculeX;
     platesNode.bottom = moleculeY + ( platesNode.plateHeight / 2 );
 
-    // centered below molecule
-    electronegativityPanels.centerX = moleculeX;
-    electronegativityPanels.bottom = this.layoutBounds.bottom - 25;
+    Multilink.multilink( [ electronegativityPanels.boundsProperty, bondCharacterPanel.boundsProperty ], () => {
 
-    // centered above molecule
-    electrostaticPotentialColorKey.centerX = electronDensityColorKey.centerX = moleculeX;
-    electrostaticPotentialColorKey.top = electronDensityColorKey.top = 25;
+      // centered below molecule
+      electronegativityPanels.centerX = moleculeX;
+      electronegativityPanels.bottom = this.layoutBounds.bottom - 25;
+
+      // centered above EN controls
+      bondCharacterPanel.centerX = moleculeX;
+      bondCharacterPanel.bottom = electronegativityPanels.top - 10;
+    } );
 
-    // centered above EN controls
-    bondCharacterPanel.centerX = moleculeX;
-    bondCharacterPanel.bottom = electronegativityPanels.top - 10;
+    // centered above molecule
+    electrostaticPotentialColorKey.boundsProperty.link( () => {
+      electrostaticPotentialColorKey.centerX = electronDensityColorKey.centerX = moleculeX;
+      electrostaticPotentialColorKey.top = electronDensityColorKey.top = 25;
+    } );
 
     // to right of positive plate, top aligned
     controlPanel.left = platesNode.right + 70;