Cura/resources/qml/Widgets/SingleSettingTextField.qml

// 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")
            }
        }
    ]
}