[ui] GraphEditor: Graph Editor gets the toggle based search

Search bar is now placed in the bottom pane of the Graph Editor making it non-obstructing for navigating nodes across Graph Editor
This commit is contained in:
waaake 2024-11-30 20:09:04 +05:30
parent f78ee9bb67
commit b0ed5e465e

View file

@ -1005,7 +1005,11 @@ Item {
padding: 2 padding: 2
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
RowLayout { RowLayout {
id: navigation
spacing: 4 spacing: 4
// Default index for search
property int currentIndex: -1
// Fit // Fit
MaterialToolButton { MaterialToolButton {
text: MaterialIcons.fullscreen text: MaterialIcons.fullscreen
@ -1044,7 +1048,7 @@ Item {
ComboBox { ComboBox {
flat: true flat: true
model: ['Minimum', 'Maximum'] model: ['Minimum', 'Maximum']
implicitWidth: 80 implicitWidth: 85
currentIndex: uigraph ? uigraph.layout.depthMode : -1 currentIndex: uigraph ? uigraph.layout.depthMode : -1
onActivated: { onActivated: {
uigraph.layout.depthMode = currentIndex uigraph.layout.depthMode = currentIndex
@ -1071,26 +1075,29 @@ Item {
uigraph.setSelectedNodesColor(color) uigraph.setSelectedNodesColor(color)
} }
} }
}
// Separator
Rectangle {
Layout.fillHeight: true
Layout.margins: 2
implicitWidth: 1
color: activePalette.window
} }
// Graph Nodes Search // Search nodes in the graph
FloatingPane {
id: navigation
padding: 2
anchors.top: parent.top
property int currentIndex: -1
RowLayout {
spacing: 0
SearchBar { SearchBar {
id: graphSearchBar id: graphSearchBar
Layout.minimumWidth: 150
width: 150 toggle: true // enable toggling the actual text field by the search button
Layout.minimumWidth: graphSearchBar.width
maxWidth: 150
textField.background.opacity: 0.5 textField.background.opacity: 0.5
textField.onTextChanged: navigation.currentIndex = -1 textField.onTextChanged: navigation.currentIndex = -1
onAccepted: {
nextArrow.clicked()
}
} }
MaterialToolButton { MaterialToolButton {
@ -1124,8 +1131,6 @@ Item {
visible: graphSearchBar.text !== "" visible: graphSearchBar.text !== ""
} }
}
Repeater { Repeater {
id: filteredNodes id: filteredNodes
model: SortFilterDelegateModel { model: SortFilterDelegateModel {
@ -1133,6 +1138,7 @@ Item {
sortRole: "label" sortRole: "label"
filters: [{role: "label", value: graphSearchBar.text}] filters: [{role: "label", value: graphSearchBar.text}]
delegate: Item { delegate: Item {
visible: false // Hide the items to not affect the layout as the nodes model gets changes
property var index_: index property var index_: index
} }
function modelData(item, roleName_) { function modelData(item, roleName_) {
@ -1152,6 +1158,7 @@ Item {
draggable.y = bbox.y*draggable.scale * -1 + (root.height - bbox.height * draggable.scale) * 0.5 draggable.y = bbox.y*draggable.scale * -1 + (root.height - bbox.height * draggable.scale) * 0.5
} }
} }
}
function registerAttributePin(attribute, pin) { function registerAttributePin(attribute, pin) {
root._attributeToDelegate[attribute] = pin root._attributeToDelegate[attribute] = pin