New number input works with real numbers

MerginMaps · Dec 20, 2023 · 6a6ef29 · 6a6ef29 · inputapp-bot · Dec 20, 2023
1 parent a55a445
commit 6a6ef29
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 37 deletions.
diff --git a/app/qml/inputs/MMNumberEditor.qml b/app/qml/inputs/MMNumberEditor.qml
@@ -15,54 +15,84 @@ import "../components"
 MMAbstractEditor {
   id: root
 
-  property alias placeholderText: textField.placeholderText
-  property int number: 0
+  property var parentValue: parent.value ?? 0
+  property bool parentValueIsNull: parent.valueIsNull ?? false
+  property bool isReadOnly: parent.readOnly ?? false
+
+  property var locale: Qt.locale()
+  // TODO: uncomment in Input app
+  property real precision//: config['Precision'] ? config['Precision'] : 0
+  property string suffix//: config['Suffix'] ? config['Suffix'] : ''
+  property real from //: config["Min"]
+  property real to //: config["Max"]
+
+  property alias placeholderText: numberInput.placeholderText
+
+  // don't ever use a step smaller than would be visible in the widget
+  // i.e. if showing 2 decimals, smallest increment will be 0.01
+  // https://github.com/qgis/QGIS/blob/a038a79997fb560e797daf3903d94c7d68e25f42/src/gui/editorwidgets/qgsdoublespinbox.cpp#L83-L87
+  property real step//: Math.max(config["Step"], Math.pow( 10.0, 0.0 - precision ))
 
   signal editorValueChanged( var newValue, var isNull )
 
-  hasFocus: textField.activeFocus
+  enabled: !isReadOnly
+  hasFocus: numberInput.activeFocus
 
   leftAction: MMIcon {
     id: leftIcon
 
     height: parent.height
 
     source: __style.minusIcon
-    color: root.enabled ? __style.forestColor : __style.mediumGreenColor
+    color: enabled ? __style.forestColor : __style.mediumGreenColor
+    enabled: Number( numberInput.text ) - root.step >= root.from
   }
 
-  content: TextField {
-    id: textField
-
+  content: Item {
     anchors.fill: parent
-
-    text: root.number
-    color: root.enabled ? __style.nightColor : __style.mediumGreenColor
-    placeholderTextColor: __style.nightAlphaColor
-    font: __style.p5
-    hoverEnabled: true
-    horizontalAlignment: TextInput.AlignHCenter
-    inputMethodHints: Qt.ImhFormattedNumbersOnly
-
-    // taking care to show numbers only
-    onTextChanged: {
-      const newNumber = parseInt(textField.text, 10)
-
-      if(textField.text === "" || textField.text === "-") {
-        root.number = 0
-        textField.text = ""
-        return
+    Row {
+      height: parent.height
+      anchors.horizontalCenter: parent.horizontalCenter
+      clip: true
+
+      TextField {
+        id: numberInput
+
+        height: parent.height
+
+        clip: true
+        text: root.parentValue === undefined || root.parentValueIsNull ? "" : root.parentValue
+        color: root.enabled ? __style.nightColor : __style.mediumGreenColor
+        placeholderTextColor: __style.nightAlphaColor
+        font: __style.p5
+        hoverEnabled: true
+        verticalAlignment: Qt.AlignVCenter
+        inputMethodHints: Qt.ImhFormattedNumbersOnly
+
+        onTextEdited: {
+          let val = text.replace( ",", "." ).replace( / /g, '' ) // replace comma with dot
+
+          root.editorValueChanged( val, val  === "" )
+        }
+
+        background: Rectangle {
+          color: __style.transparentColor
+        }
       }
 
-      if(Number.isInteger(newNumber)) {
-        root.number = newNumber
-      }
-      textField.text = root.number
-      console.log(newNumber)
-    }
+      Text {
+        id: suffix
+
+        text: root.suffix
 
-    background: Rectangle {
-      color: __style.transparentColor
+        visible: root.suffix !== "" && numberInput.text !== ""
+
+        height: parent.height
+        verticalAlignment: Qt.AlignVCenter
+
+        font: __style.p5
+        color: numberInput.color
+      }
     }
   }
 
@@ -72,9 +102,22 @@ MMAbstractEditor {
     height: parent.height
 
     source: __style.plusIcon
-    color: root.enabled ? __style.forestColor : __style.mediumGreenColor
+    color: enabled ? __style.forestColor : __style.mediumGreenColor
+    enabled: Number( numberInput.text ) + root.step <= root.to
   }
 
-  onLeftActionClicked: { textField.forceActiveFocus(); textField.text = --root.number }
-  onRightActionClicked: { textField.forceActiveFocus(); textField.text = ++root.number }
+  onLeftActionClicked: {
+    numberInput.forceActiveFocus()
+    if ( leftIcon.enabled ) {
+      let decremented = Number( numberInput.text ) - root.step
+      root.editorValueChanged( decremented.toFixed( root.precision ), false )
+    }
+  }
+  onRightActionClicked: {
+    numberInput.forceActiveFocus();
+    if ( rightIcon.enabled ) {
+      let incremented = Number( numberInput.text ) + root.step
+      root.editorValueChanged( incremented.toFixed( root.precision ), false )
+    }
+  }
 }
diff --git a/gallery/qml/pages/EditorsPage.qml b/gallery/qml/pages/EditorsPage.qml
@@ -55,9 +55,15 @@ ScrollView {
 
         MMNumberEditor {
           title: "MMNumberEditor"
-          number: 123
-          enabled: checkbox.checked
+          parentValue: "2.0"
+          from: 1.0
+          to: 3.0
           width: parent.width
+          enabled: checkbox.checked
+          precision: 1
+          suffix: "s."
+          step: Math.pow( 10.0, 0.0 - precision )
+          onEditorValueChanged: function(newValue) { parentValue = newValue }
         }
 
         MMInputEditor {