NumericTextFieldWithUnit.qml 9.0 KB

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