Fix Angle Mode positioning (#3914)

Author: haslinghuis

src/js/tabs/pid_tuning.js

@@ -2705,35 +2705,53 @@ pid_tuning.updateRatesLabels = function() {
             const rcRate = self.currentRates.rc_rate;
             const rcRatePitch = self.currentRates.rc_rate_pitch;
 
+            function getOffsetForBalloon(value) {
+                return curveWidth - (Math.ceil(stickContext.measureText(value).width) / (stickContext.canvas.clientWidth / stickContext.canvas.clientHeight)) - 40;
+            }
+
+            const angleModeText = `Angle Mode`;
+
             if (self.currentRatesType === FC.RATES_TYPE.ACTUAL) {
-                drawAxisLabel(stickContext, `Angle Mode`, (curveWidth - 10) / textScale, curveHeight - 250, 'right');
+                drawAxisLabel(stickContext, angleModeText, (curveWidth - 10) / textScale, curveHeight - 250, 'right');
 
                 const angleCenterSensitivityRoll = (rcRate / maxAngleRollRate * angleLimit).toFixed(1);
                 const angleCenterSensitivityPitch = (rcRatePitch / maxAnglePitchRate * angleLimit).toFixed(1);
 
+                const angleCenterSensitivityRollText = `${angleCenterSensitivityRoll}...${angleLimit}`;
+                const angleCenterSensitivityPitchText = `${angleCenterSensitivityPitch}...${angleLimit}`;
+
+                const angleCenterSensitivityRollOffset = getOffsetForBalloon(angleCenterSensitivityRollText);
+                const angleCenterSensitivityPitchOffset = getOffsetForBalloon(angleCenterSensitivityPitchText);
+
                 balloons.push(
-                    {value: parseInt(angleCenterSensitivityRoll), balloon: function() {drawBalloonLabel(stickContext, `${angleCenterSensitivityRoll}...${angleLimit}`, ((curveWidth / 2) - 10) / textScale, curveHeight - 150, 'none', BALLOON_COLORS.roll, balloonsDirty);}},
-                    {value: parseInt(angleCenterSensitivityPitch), balloon: function() {drawBalloonLabel(stickContext, `${angleCenterSensitivityPitch}...${angleLimit}`, ((curveWidth / 2) - 10) / textScale, curveHeight - 50, 'none', BALLOON_COLORS.pitch, balloonsDirty);}},
+                    {value: parseInt(angleCenterSensitivityRoll), balloon: function() {drawBalloonLabel(stickContext, angleCenterSensitivityRollText, angleCenterSensitivityRollOffset, curveHeight - 150, 'none', BALLOON_COLORS.roll, balloonsDirty);}},
+                    {value: parseInt(angleCenterSensitivityPitch), balloon: function() {drawBalloonLabel(stickContext, angleCenterSensitivityPitchText, angleCenterSensitivityPitchOffset, curveHeight - 50, 'none', BALLOON_COLORS.pitch, balloonsDirty);}},
                 );
             }
 
             if (self.currentRatesType === FC.RATES_TYPE.BETAFLIGHT) {
-                drawAxisLabel(stickContext, `Angle Mode`, (curveWidth - 10) / textScale, curveHeight - 250, 'right');
+                drawAxisLabel(stickContext, angleModeText, (curveWidth - 10) / textScale, curveHeight - 250, 'right');
 
                 const RC_RATE_INCREMENTAL = 14.54;
 
                 // ROLL
                 const expo = self.currentRates.rc_expo;
                 const rcRateModified = rcRate > 2.0 ? (rcRate - 2.0) * RC_RATE_INCREMENTAL + 2.0: rcRate;
                 const sensitivityFractionRoll = (angleLimit * ((1 - expo) * rcRateModified * 200 / maxAngleRollRate)).toFixed(1);
+
+                const sensitivityFractionRollText = `${sensitivityFractionRoll}...${angleLimit}`;
+                const sensitivityFractionRollOffset = getOffsetForBalloon(sensitivityFractionRollText);
                 // PITCH
                 const expoPitch = self.currentRates.rc_pitch_expo;
                 const rcRateModifiedPitch = rcRatePitch > 2.0 ? (rcRatePitch - 2.0) * RC_RATE_INCREMENTAL + 2.0: rcRatePitch;
                 const sensitivityFractionPitch = (angleLimit * ((1 - expoPitch) * rcRateModifiedPitch * 200 / maxAnglePitchRate)).toFixed(1);
 
+                const sensitivityFractionPitchText = `${sensitivityFractionPitch}...${angleLimit}`;
+                const sensitivityFractionPitchOffset = getOffsetForBalloon(sensitivityFractionPitchText);
+
                 balloons.push(
-                    {value: parseInt(sensitivityFractionRoll), balloon: function() {drawBalloonLabel(stickContext, `${sensitivityFractionRoll}...${angleLimit}`, ((curveWidth / 2) - 10) / textScale, curveHeight - 150, 'none', BALLOON_COLORS.roll, balloonsDirty);}},
-                    {value: parseInt(sensitivityFractionPitch), balloon: function() {drawBalloonLabel(stickContext, `${sensitivityFractionPitch}...${angleLimit}`, ((curveWidth / 2) - 10) / textScale, curveHeight - 50, 'none', BALLOON_COLORS.pitch, balloonsDirty);}},
+                    {value: parseInt(sensitivityFractionRoll), balloon: function() {drawBalloonLabel(stickContext, sensitivityFractionRollText, sensitivityFractionRollOffset, curveHeight - 150, 'none', BALLOON_COLORS.roll, balloonsDirty);}},
+                    {value: parseInt(sensitivityFractionPitch), balloon: function() {drawBalloonLabel(stickContext, sensitivityFractionPitchText, sensitivityFractionPitchOffset, curveHeight - 50, 'none', BALLOON_COLORS.pitch, balloonsDirty);}},
                 );
             }