NumericTextFieldWithUnit.qml 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. // Copyright (c) 2020 Ultimaker B.V.
  2. // Cura is released under the terms of the LGPLv3 or higher.
  3. import QtQuick 2.15
  4. import QtQuick.Controls 2.3
  5. import UM 1.5 as UM
  6. import Cura 1.1 as Cura
  7. //
  8. // TextField widget with validation for editing numeric data in the Machine Settings dialog.
  9. //
  10. UM.TooltipArea
  11. {
  12. id: numericTextFieldWithUnit
  13. UM.I18nCatalog { id: catalog; name: "cura"; }
  14. height: childrenRect.height
  15. width: childrenRect.width
  16. property int controlWidth: UM.Theme.getSize("setting_control").width
  17. property int controlHeight: UM.Theme.getSize("setting_control").height
  18. property real spacing: UM.Theme.getSize("default_margin").width
  19. text: tooltipText
  20. property alias containerStackId: propertyProvider.containerStackId
  21. property alias settingKey: propertyProvider.key
  22. property alias settingStoreIndex: propertyProvider.storeIndex
  23. property alias propertyProvider: propertyProvider
  24. property alias labelText: fieldLabel.text
  25. property alias labelFont: fieldLabel.font
  26. property alias labelWidth: fieldLabel.width
  27. property alias unitText: unitLabel.text
  28. property alias textField: textFieldWithUnit
  29. property alias valueText: textFieldWithUnit.text
  30. property alias enabled: textFieldWithUnit.enabled
  31. property alias editingFinishedFunction: textFieldWithUnit.editingFinishedFunction
  32. property string tooltipText: propertyProvider.properties.description ? propertyProvider.properties.description : ""
  33. property real minimum: 0
  34. property real maximum: Number.POSITIVE_INFINITY
  35. property int decimals: 6
  36. // callback functions
  37. property var afterOnEditingFinishedFunction: dummy_func
  38. property var forceUpdateOnChangeFunction: dummy_func
  39. property var setValueFunction: null
  40. // a dummy function for default property values
  41. function dummy_func() {}
  42. UM.SettingPropertyProvider
  43. {
  44. id: propertyProvider
  45. watchedProperties: [ "value", "description" ]
  46. }
  47. Label
  48. {
  49. id: fieldLabel
  50. anchors.left: parent.left
  51. anchors.verticalCenter: textFieldWithUnit.verticalCenter
  52. visible: text != ""
  53. font: UM.Theme.getFont("default")
  54. color: UM.Theme.getColor("text")
  55. renderType: Text.NativeRendering
  56. }
  57. TextField
  58. {
  59. id: textFieldWithUnit
  60. anchors.left: fieldLabel.right
  61. anchors.leftMargin: spacing
  62. verticalAlignment: Text.AlignVCenter
  63. selectionColor: UM.Theme.getColor("text_selection")
  64. selectedTextColor: UM.Theme.getColor("setting_control_text")
  65. padding: 0
  66. leftPadding: UM.Theme.getSize("narrow_margin").width
  67. width: numericTextFieldWithUnit.controlWidth
  68. height: numericTextFieldWithUnit.controlHeight
  69. // Background is a rounded-cornered box with filled color as state indication (normal, warning, error, etc.)
  70. background: UM.UnderlineBackground
  71. {
  72. anchors.fill: parent
  73. borderColor: (textFieldWithUnit.hovered || textFieldWithUnit.activeFocus) ? UM.Theme.getColor("text_field_border_hovered") : "transparent"
  74. liningColor:
  75. {
  76. if (!textFieldWithUnit.enabled)
  77. {
  78. return UM.Theme.getColor("setting_control_disabled_border")
  79. }
  80. switch (propertyProvider.properties.validationState)
  81. {
  82. case "ValidatorState.Exception":
  83. case "ValidatorState.MinimumError":
  84. case "ValidatorState.MaximumError":
  85. return UM.Theme.getColor("setting_validation_error")
  86. case "ValidatorState.MinimumWarning":
  87. case "ValidatorState.MaximumWarning":
  88. return UM.Theme.getColor("setting_validation_warning")
  89. }
  90. // Validation is OK.
  91. if (textFieldWithUnit.hovered || textFieldWithUnit.activeFocus)
  92. {
  93. return UM.Theme.getColor("text_field_border_hovered")
  94. }
  95. return UM.Theme.getColor("border_field_light")
  96. }
  97. color:
  98. {
  99. if (!textFieldWithUnit.enabled)
  100. {
  101. return UM.Theme.getColor("setting_control_disabled")
  102. }
  103. switch (propertyProvider.properties.validationState)
  104. {
  105. case "ValidatorState.Exception":
  106. case "ValidatorState.MinimumError":
  107. case "ValidatorState.MaximumError":
  108. return UM.Theme.getColor("setting_validation_error_background")
  109. case "ValidatorState.MinimumWarning":
  110. case "ValidatorState.MaximumWarning":
  111. return UM.Theme.getColor("setting_validation_warning_background")
  112. case "ValidatorState.Valid":
  113. return UM.Theme.getColor("setting_validation_ok")
  114. default:
  115. return UM.Theme.getColor("setting_control")
  116. }
  117. }
  118. }
  119. hoverEnabled: true
  120. selectByMouse: true
  121. font: UM.Theme.getFont("default")
  122. color: UM.Theme.getColor("text")
  123. renderType: Text.NativeRendering
  124. // When the textbox gets focused by TAB, select all text
  125. onActiveFocusChanged:
  126. {
  127. if (activeFocus && (focusReason == Qt.TabFocusReason || focusReason == Qt.BacktabFocusReason))
  128. {
  129. selectAll()
  130. }
  131. }
  132. text:
  133. {
  134. const value = propertyProvider.properties.value
  135. return value ? value : ""
  136. }
  137. property string validatorString:
  138. {
  139. var digits = Math.min(8, 1 + Math.floor(
  140. Math.log(Math.max(Math.abs(numericTextFieldWithUnit.maximum), Math.abs(numericTextFieldWithUnit.minimum)))/Math.log(10)
  141. ))
  142. var minus = numericTextFieldWithUnit.minimum < 0 ? "-?" : ""
  143. if (numericTextFieldWithUnit.decimals == 0)
  144. {
  145. return "^%0\\d{1,%1}$".arg(minus).arg(digits)
  146. }
  147. else
  148. {
  149. return "^%0\\d{0,%1}[.,]?\\d{0,%2}$".arg(minus).arg(digits).arg(numericTextFieldWithUnit.decimals)
  150. }
  151. }
  152. validator: RegularExpressionValidator
  153. {
  154. regularExpression: new RegExp(textFieldWithUnit.validatorString)
  155. }
  156. //Enforce actual minimum and maximum values.
  157. //The DoubleValidator allows intermediate values, which essentially means that the maximum gets rounded up to the nearest power of 10.
  158. //This is not accurate at all, so here if the value exceeds the maximum or the minimum we disallow it.
  159. property string previousText
  160. onTextChanged:
  161. {
  162. var value = Number(text);
  163. if(value < numericTextFieldWithUnit.minimum || value > numericTextFieldWithUnit.maximum)
  164. {
  165. text = previousText;
  166. }
  167. previousText = text;
  168. }
  169. onEditingFinished: editingFinishedFunction()
  170. property var editingFinishedFunction: defaultEditingFinishedFunction
  171. function defaultEditingFinishedFunction()
  172. {
  173. if (propertyProvider && text != propertyProvider.properties.value)
  174. {
  175. // For some properties like the extruder-compatible material diameter, they need to
  176. // trigger many updates, such as the available materials, the current material may
  177. // need to be switched, etc. Although setting the diameter can be done directly via
  178. // the provider, all the updates that need to be triggered then need to depend on
  179. // the metadata update, a signal that can be fired way too often. The update functions
  180. // can have if-checks to filter out the irrelevant updates, but still it incurs unnecessary
  181. // overhead.
  182. // The ExtruderStack class has a dedicated function for this call "setCompatibleMaterialDiameter()",
  183. // and it triggers the diameter update signals only when it is needed. Here it is optionally
  184. // choose to use setCompatibleMaterialDiameter() or other more specific functions that
  185. // are available.
  186. if (setValueFunction !== null)
  187. {
  188. setValueFunction(text)
  189. }
  190. else
  191. {
  192. propertyProvider.setPropertyValue("value", text)
  193. }
  194. forceUpdateOnChangeFunction()
  195. afterOnEditingFinishedFunction()
  196. }
  197. }
  198. UM.Label
  199. {
  200. id: unitLabel
  201. anchors.right: parent.right
  202. anchors.rightMargin: Math.round(UM.Theme.getSize("setting_unit_margin").width)
  203. anchors.verticalCenter: parent.verticalCenter
  204. text: unitText
  205. textFormat: Text.PlainText
  206. color: UM.Theme.getColor("setting_unit")
  207. }
  208. }
  209. }