dynamic layout support, see #399

phetsims · Mar 8, 2023 · b0d4209 · b0d4209
1 parent 0beab87
commit b0d4209
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/js/quadrilateral/view/QuadrilateralScreenView.ts b/js/quadrilateral/view/QuadrilateralScreenView.ts
@@ -181,10 +181,14 @@ export default class QuadrilateralScreenView extends ScreenView {
 
     shapeNameDisplay.centerBottom = gridNode.centerTop.minusXY( 0, QuadrilateralConstants.VIEW_SPACING );
     shapeSoundsCheckbox.rightCenter = new Vector2( gridNode.right, shapeNameDisplay.centerY );
-    resetShapeButton.rightCenter = shapeSoundsCheckbox.leftCenter.minusXY(
-      // effectively centers this button between the other name display controls
-      ( shapeSoundsCheckbox.left - shapeNameDisplay.right - resetShapeButton.width ) / 2, 0
-    );
+
+    // dynamic string layout
+    resetShapeButton.boundsProperty.link( () => {
+      resetShapeButton.rightCenter = shapeSoundsCheckbox.leftCenter.minusXY(
+        // effectively centers this button between the other name display controls
+        ( shapeSoundsCheckbox.left - shapeNameDisplay.right - resetShapeButton.width ) / 2, 0
+      );
+    } );
 
     deviceConnectionParentNode.leftBottom = visibilityControls.leftTop.minusXY( 0, QuadrilateralConstants.VIEW_GROUP_SPACING );
 

diff --git a/js/quadrilateral/view/QuadrilateralVertexNode.ts b/js/quadrilateral/view/QuadrilateralVertexNode.ts
@@ -49,7 +49,6 @@ export default class QuadrilateralVertexNode extends QuadrilateralMovableNode {
     this.quadrilateralModel = quadrilateralModel;
 
     const vertexLabelText = new Text( vertexLabel, {
-      center: this.center,
       font: LABEL_TEXT_FONT,
 
       // i18n
@@ -88,6 +87,11 @@ export default class QuadrilateralVertexNode extends QuadrilateralMovableNode {
       vertexLabelText.visible = vertexLabelsVisible;
     } );
 
+    // dynamic string layout
+    vertexLabelText.boundsProperty.link( () => {
+      vertexLabelText.center = circle.center;
+    } );
+
     const keyboardDragListener = new KeyboardDragListener( {
       dragDelta: this.largeViewDragDelta,
       shiftDragDelta: this.smallViewDragDelta,