Fix GzSpinBox in cases where the value property has a binding (#656)

* Fix `GzSpinBox` in cases where the value property has a binding

Before this fix, if the value property has a binding instead of a value,
any modification from the GUI (e.g. hitting the up arrow on the spin
box) would not actually change the displayed value because it is
immediately reset back to the value set by the binding. This is the case
in the `GzPose` module and the effect can be easily be seen in the
`GridConfig` plugin. To test, run:

`gz gui -c examples/config/grid_config.config`

You will see that, before this change, modifying the x,y,z,roll,pitch,
yaw values actually changes the grid configuration, but the updated values are
not displayed in the spinbox.

Signed-off-by: Addisu Z. Taddese <addisu@openrobotics.org>

Author: azeey

include/gz/gui/qml/GzSpinBox.qml

@@ -28,6 +28,13 @@ Item {
   property real stepSize: 1.0
   property int decimals: 0
 
+  onValueChanged: {
+    if (!spinBox.__modifying)
+    {
+      spinBox.value = decimalToInt(root.value)
+    }
+  }
+
   implicitHeight: spinBox.implicitHeight
 
   readonly property int kMaxInt: Math.pow(2, 31) - 1
@@ -61,17 +68,34 @@ Item {
 
   SpinBox {
       id: spinBox
+      // This property is used to guard against binding loops. When
+      // spinBox.value is modified through user input, (e.g. clicking on the
+      // up arrow), we set the root.value. Without this guard condition, the
+      // ValueChanged event of root.value would fire which would then try to
+      // set spinBox.value, i.e a binding loop.
+      property bool __modifying: false
 
       anchors.fill : parent
       bottomPadding: 0
       topPadding: 0
       leftPadding: 5
       implicitHeight: 40
       clip: true
-
-      value: root.decimalToInt(root.value)
-
+      value: 0
+
+      // Keep the decimal representation of value so that we
+      // can decimalFactor changes properly. This is different from
+      // root.value because this does not have any bindings and thus
+      // cannot be modified from outside of this SpinBox element.
+      property real __valueAsDecimal: 0.0
+      onValueChanged: {
+        __valueAsDecimal = intToDecimal(value)
+      }
+      // Note that this is a different event than ValueChanged. The
+      // ValueModified event only fires when the value is edited by user
+      // input from the GUI.
       onValueModified: {
+        __modifying = true
         // Set the "value" property without breaking/changing its bindings.
         // This is done by temporarily enabling the binding (valueUpdater),
         // emitting the editingFinished signal so users GzSpinBox can be
@@ -80,6 +104,7 @@ Item {
         valueUpdater.when = true
         root.editingFinished()
         valueUpdater.when = false
+        __modifying = false
       }
 
       from: decimalToInt(minimumValue)
@@ -90,6 +115,9 @@ Item {
       anchors.centerIn: parent
 
       readonly property real decimalFactor: Math.pow(10, root.decimals)
+      onDecimalFactorChanged: {
+        value = decimalToInt(__valueAsDecimal)
+      }
 
       contentItem: TextInput {
         font.pointSize: 10