Add SingleSettingTextField.qml

Added a workaround for states of inheriting components. See comments for details. CURA-9793
2025-08-06 05:23:58 -06:00 · 2022-12-02 11:48:50 +01:00 · 2022-12-02 11:48:50 +01:00 · dfb6c04d00
commit dfb6c04d00
parent f24e6b1961
2 changed files with 166 additions and 0 deletions
--- a/resources/qml/Widgets/SingleSettingTextField.qml
+++ b/resources/qml/Widgets/SingleSettingTextField.qml
@ -0,0 +1,154 @@
+// Copyright (c) 2022 UltiMaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.10
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+
+import UM 1.7 as UM
+import Cura 1.7 as Cura
+
+// This text field allows you to edit a single setting. The setting can be passed by "settingName".
+// You must specify a validator with Validator. We store our default setting validators in qml/Validators
+UM.TextField
+{
+    id: control
+    property alias settingName: propertyProvider.key
+
+    // Resolving the value in the textField.
+    Binding
+    {
+        target: control
+        property: "text"
+
+        value:
+        {
+            if (control.activeFocus)
+            {
+                // This stops the text being reformatted as you edit. For example "10.1" -Edit-> "10." -Auto Format-> "10.0".
+                return control.text
+            }
+            return propertyProvider.properties.value
+        }
+
+    }
+
+    property UM.SettingPropertyProvider propertyProvider: UM.SettingPropertyProvider
+    {
+        id: propertyProvider
+        containerStack: Cura.MachineManager.activeMachine
+        watchedProperties: [ "value", "validationState" ]
+    }
+
+    Connections
+    {
+        target: propertyProvider
+        function onContainerStackChanged() { updateTimer.restart() }
+        function onIsValueUsedChanged() { updateTimer.restart() }
+    }
+
+    // Restart update timer right after releasing a key. This stops lag while typing, but you still get warning and error
+    // textfield styling while typing.
+    Keys.onReleased: updateTimer.restart()
+    // Forces formatting when you finish editing "10.1" -Edit-> "10." -Focus Change-> "10"
+    onActiveFocusChanged: updateTime.restart()
+
+    // Updates to the setting are delayed by interval. This stops lag caused by calling the
+    // parseValueUpdateSetting() function being called repeatedly while changing the text value.
+    Timer
+    {
+        id: updateTimer
+        interval: 50
+        repeat: false
+        onTriggered: parseValueUpdateSetting()
+    }
+
+    function parseValueUpdateSetting()
+    {
+        // Do some parsing of text here
+        updateSetting(text);
+    }
+
+    function updateSetting(value)
+    {
+        if (propertyProvider && text != propertyProvider.properties.value)
+        {
+            propertyProvider.setPropertyValue("value", text)
+        }
+    }
+
+    // Forced to override parent states using overrideState. Otherwise hover in TextField.qml would override the validation states.
+    // The first state to evaluate true applies styling. States in inheriting components get appended to the state list of their parent.
+    overrideState: true
+    states:
+    [
+        State
+        {
+            name: "validationError"
+            when: propertyProvider.properties.validationState == "ValidatorState.Exception" || propertyProvider.properties.validationState == "ValidatorState.MinimumError" || propertyProvider.properties.validationState == "ValidatorState.MaximumError"
+             PropertyChanges
+             {
+                target: background
+                liningColor: UM.Theme.getColor("setting_validation_error")
+                color: UM.Theme.getColor("setting_validation_error_background")
+             }
+        },
+        State
+        {
+            name: "validationWarning"
+            when: propertyProvider.properties.validationState == "ValidatorState.MinimumWarning" || propertyProvider.properties.validationState == "ValidatorState.MaximumWarning"
+            PropertyChanges
+            {
+                target: background
+                liningColor: UM.Theme.getColor("setting_validation_warning")
+                color: UM.Theme.getColor("setting_validation_warning_background")
+            }
+        },
+         State
+        {
+            name: "disabled"
+            when: !control.enabled
+            PropertyChanges
+            {
+                target: control
+                color: UM.Theme.getColor("text_field_text_disabled")
+            }
+            PropertyChanges
+            {
+                target: background
+                liningColor: UM.Theme.getColor("text_field_border_disabled")
+            }
+        },
+        State
+        {
+            name: "invalid"
+            when: !control.acceptableInput
+            PropertyChanges
+            {
+                target: background
+                color: UM.Theme.getColor("setting_validation_error_background")
+            }
+        },
+        State
+        {
+            name: "active"
+            when: control.activeFocus
+            PropertyChanges
+            {
+                target: background
+                liningColor: UM.Theme.getColor("text_field_border_active")
+                borderColor: UM.Theme.getColor("text_field_border_active")
+            }
+        },
+        State
+        {
+            name: "hovered"
+            when: control.hovered && !control.activeFocus
+            PropertyChanges
+            {
+                target: background
+                liningColor: UM.Theme.getColor("text_field_border_hovered")
+            }
+        }
+    ]
+}