diff --git a/js/quadrilateral/view/QuadrilateralScreenView.ts b/js/quadrilateral/view/QuadrilateralScreenView.ts index 29e56ad3..b498c9bd 100644 --- 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 index 9f1ae064..25631d38 100644 --- 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,