Add FilterComboBox.qml and update AttributeItemDelegate.qml

meshroom/ui/qml/Controls/FilterComboBox.qml

@@ -0,0 +1,104 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import Utils 1.0
+
+/**
+* ComboBox with filter text area
+*
+* @param inputModel - model to filter
+*/
+
+ComboBox {
+
+    property var inputModel
+
+    id: combo
+    enabled: root.editable
+    model: {
+        var filteredData = inputModel.filter(condition => {
+                                            if (filterTextArea.text.length > 0) return condition.toString().includes(filterTextArea.text)
+                                            return true
+                                        })
+
+        if (filteredData.length == 0 || filterTextArea.length == 0) {
+            filteredData = inputModel
+
+            filterTextArea.background.color = Colors.red
+        } else {
+            filterTextArea.background.color = Qt.lighter(palette.base, 2)
+
+            // order filtered data by relevance (results that start with the filter text come first)
+            filteredData.sort((a, b) => {
+                const nameA = a.toString().toLowerCase();
+                const nameB = b.toString().toLowerCase();
+                const filterText = filterTextArea.text.toLowerCase()
+                if (nameA.startsWith(filterText) && !nameB.startsWith(filterText))
+                    return -1
+                if (!nameA.startsWith(filterText) && nameB.startsWith(filterText))
+                    return 1
+                return 0
+            });
+        }
+
+        return filteredData
+    }
+
+    popup: Popup {
+        width: combo.width
+        implicitHeight: contentItem.implicitHeight
+
+        onAboutToShow: {
+            filterTextArea.forceActiveFocus()
+        }
+
+        contentItem: Item {
+            anchors.fill: parent
+            TextArea {
+                id: filterTextArea
+                leftPadding: 12
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.top: parent.top
+
+                selectByMouse: true
+                hoverEnabled: true
+                wrapMode: TextEdit.WrapAnywhere
+                placeholderText: "Filter"
+                background: Rectangle {}
+
+                onEditingFinished: {
+                    combo.popup.close()
+                }
+
+                Keys.onReturnPressed: {
+                    editingFinished();
+                }
+            }
+        }
+
+        ListView {
+            clip: true
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: filterTextArea.bottom
+
+            implicitHeight: contentHeight
+            model: combo.popup.visible ? combo.delegateModel : null
+            currentIndex: combo.highlightedIndex
+
+            ScrollIndicator.vertical: ScrollIndicator {}
+        }
+    }
+
+    delegate: ItemDelegate {
+        width: combo.width
+        height: combo.height
+
+        contentItem: Text {
+            text: modelData
+            color: palette.text
+        }
+
+        highlighted: combo.highlightedIndex === index
+    }
+}

meshroom/ui/qml/Controls/qmldir

@@ -11,3 +11,4 @@ SearchBar 1.0 SearchBar.qml
 TabPanel 1.0 TabPanel.qml
 TextFileViewer 1.0 TextFileViewer.qml
 ExifOrientedViewer 1.0 ExifOrientedViewer.qml
+FilterComboBox 1.0 FilterComboBox.qml

meshroom/ui/qml/GraphEditor/AttributeItemDelegate.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls 2.2
 import QtQuick.Dialogs 1.3
 import MaterialIcons 2.2
 import Utils 1.0
+import Controls 1.0
 
 /**
   Instantiate a control to visualize and edit an Attribute based on its type.
@@ -342,18 +343,9 @@ RowLayout {
 
         Component {
             id: comboBox_component
-            ComboBox {
-                id: combo
-                enabled: root.editable
-                model: attribute.values
-                Component.onCompleted: currentIndex = find(attribute.value)
-                onActivated: _reconstruction.setAttribute(attribute, currentText)
-                Connections {
-                    target: attribute
-                    function onValueChanged() {
-                        combo.currentIndex = combo.find(attribute.value)
-                    }
-                }
+
+            FilterComboBox {
+                inputModel: attribute.desc.values
             }
         }