diff --git a/js/least-squares-regression/view/EquationNode.ts b/js/least-squares-regression/view/EquationNode.ts index db87932..345c8d1 100644 --- a/js/least-squares-regression/view/EquationNode.ts +++ b/js/least-squares-regression/view/EquationNode.ts @@ -9,7 +9,7 @@ import Utils from '../../../../dot/js/Utils.js'; import optionize from '../../../../phet-core/js/optionize.js'; import MathSymbols from '../../../../scenery-phet/js/MathSymbols.js'; -import { Node, NodeOptions, Text } from '../../../../scenery/js/imports.js'; +import { ManualConstraint, Node, NodeOptions, Text } from '../../../../scenery/js/imports.js'; import leastSquaresRegression from '../../leastSquaresRegression.js'; import LeastSquaresRegressionStrings from '../../LeastSquaresRegressionStrings.js'; import LeastSquaresRegressionConstants from '../LeastSquaresRegressionConstants.js'; @@ -118,14 +118,19 @@ export default class EquationNode extends Node { ] } ); - // layout of the entire equation - this.yText.left = 0; - this.equalText.left = this.yText.right + 3; - this.signSlopeText.left = this.equalText.right + 1; - this.valueSlopeText.left = this.signSlopeText.right + 3; - this.xText.left = this.valueSlopeText.right + 3; - this.signInterceptText.left = this.xText.right + 3; - this.valueInterceptText.left = this.signInterceptText.right + 3; + + ManualConstraint.create( this, [ this.yText, this.equalText, this.signSlopeText, this.valueSlopeText, this.xText, this.signInterceptText, this.valueInterceptText ], + ( yTextProxy, equalTextProxy, signSlopeTextProxy, valueSlopeTextProxy, xTextProxy, signInterceptTextProxy, valueInterceptTextProxy ) => { + + // layout of the entire equation + yTextProxy.left = 0; + equalTextProxy.left = yTextProxy.right + 3; + signSlopeTextProxy.left = equalTextProxy.right + 1; + valueSlopeTextProxy.left = signSlopeTextProxy.right + 3; + xTextProxy.left = valueSlopeTextProxy.right + 3; + signInterceptTextProxy.left = xTextProxy.right + 3; + valueInterceptTextProxy.left = signInterceptTextProxy.right + 3; + } ); this.addChild( mutableEquationText ); diff --git a/js/least-squares-regression/view/MyLineControlPanel.ts b/js/least-squares-regression/view/MyLineControlPanel.ts index 7c20a67..bad18d0 100644 --- a/js/least-squares-regression/view/MyLineControlPanel.ts +++ b/js/least-squares-regression/view/MyLineControlPanel.ts @@ -11,7 +11,7 @@ import Dimension2 from '../../../../dot/js/Dimension2.js'; import Range from '../../../../dot/js/Range.js'; import merge from '../../../../phet-core/js/merge.js'; import MathSymbols from '../../../../scenery-phet/js/MathSymbols.js'; -import { HStrut, Node, SceneryConstants, Text, VBox } from '../../../../scenery/js/imports.js'; +import { HStrut, ManualConstraint, Node, SceneryConstants, Text, VBox } from '../../../../scenery/js/imports.js'; import Checkbox from '../../../../sun/js/Checkbox.js'; import Panel, { PanelOptions } from '../../../../sun/js/Panel.js'; import VSlider from '../../../../sun/js/VSlider.js'; @@ -91,19 +91,19 @@ export default class MyLineControlPanel extends Panel { } ); // Layout the immutable equation - yText.left = equationText.yText.left; - equalText.left = equationText.equalText.left; - aText.center = equationText.valueSlopeText.center; - xText.left = equationText.xText.left; - signInterceptText.left = equationText.signInterceptText.left; - bText.center = equationText.valueInterceptText.center; + yText.centerX = equationText.yText.centerX; + equalText.centerX = equationText.equalText.centerX; + aText.centerX = equationText.valueSlopeText.centerX; + xText.centerX = equationText.xText.centerX; + signInterceptText.centerX = equationText.signInterceptText.centerX; + bText.centerX = equationText.valueInterceptText.centerX; // create the equation panel with white background const equationPanel = new Panel( equationText, { fill: 'white', cornerRadius: LeastSquaresRegressionConstants.SMALL_PANEL_CORNER_RADIUS, stroke: LeastSquaresRegressionConstants.SMALL_PANEL_STROKE, - resize: false + resize: true } ); // Create two sliders: The aSlider controls the angle of the line and by proxy the slope, the bSlider controls the intercept @@ -182,6 +182,30 @@ export default class MyLineControlPanel extends Panel { super( mainBox, options ); + ManualConstraint.create( this, [ yText, equalText, aText, xText, signInterceptText, bText, + equationText.valueInterceptText, + equationText.valueSlopeText, + equationText.yText, + equationText.equalText, + equationText.xText, + equationText.signInterceptText, + equationText + ], ( yTextProxy, equalTextProxy, aTextProxy, xTextProxy, signInterceptTextProxy, bTextProxy, + equationTextValueInterceptTextProxy, + equationTextValueSlopeTextProxy, + equationTextYTextProxy, + equationTextEqualTextProxy, + equationTextXTextProxy, + equationTextSignInterceptTextProxy + ) => { + yTextProxy.centerX = equationTextYTextProxy.centerX; + equalTextProxy.centerX = equationTextEqualTextProxy.centerX; + aTextProxy.centerX = equationTextValueSlopeTextProxy.centerX; + xTextProxy.centerX = equationTextXTextProxy.centerX; + signInterceptTextProxy.centerX = equationTextSignInterceptTextProxy.centerX; + bTextProxy.centerX = equationTextValueInterceptTextProxy.centerX; + } ); + // Trigger the opacity/non-opacity when checking the myLine checkbox graph.myLineVisibleProperty.link( enabled => { equationText.visible = enabled;