[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)
} }
} }
}
}
// Graph Nodes Search // Separator
FloatingPane { Rectangle {
id: navigation Layout.fillHeight: true
padding: 2 Layout.margins: 2
anchors.top: parent.top implicitWidth: 1
color: activePalette.window
property int currentIndex: -1 }
RowLayout {
spacing: 0
// Search nodes in the graph
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,32 +1131,32 @@ Item {
visible: graphSearchBar.text !== "" visible: graphSearchBar.text !== ""
} }
} Repeater {
id: filteredNodes
Repeater { model: SortFilterDelegateModel {
id: filteredNodes model: root.graph ? root.graph.nodes : undefined
model: SortFilterDelegateModel { sortRole: "label"
model: root.graph ? root.graph.nodes : undefined filters: [{role: "label", value: graphSearchBar.text}]
sortRole: "label" delegate: Item {
filters: [{role: "label", value: graphSearchBar.text}] visible: false // Hide the items to not affect the layout as the nodes model gets changes
delegate: Item { property var index_: index
property var index_: index }
} function modelData(item, roleName_) {
function modelData(item, roleName_) { return item.model.object[roleName_]
return item.model.object[roleName_] }
} }
} }
}
function nextItem() { function nextItem() {
// Compute bounding box // Compute bounding box
var node = nodeRepeater.itemAt(filteredNodes.itemAt(navigation.currentIndex).index_) var node = nodeRepeater.itemAt(filteredNodes.itemAt(navigation.currentIndex).index_)
var bbox = Qt.rect(node.x, node.y, node.width, node.height) var bbox = Qt.rect(node.x, node.y, node.width, node.height)
// Rescale to fit the bounding box in the view, zoom is limited to prevent huge text // Rescale to fit the bounding box in the view, zoom is limited to prevent huge text
draggable.scale = Math.min(Math.min(root.width / bbox.width, root.height / bbox.height),maxZoom) draggable.scale = Math.min(Math.min(root.width / bbox.width, root.height / bbox.height),maxZoom)
// Recenter // Recenter
draggable.x = bbox.x*draggable.scale * -1 + (root.width - bbox.width * draggable.scale) * 0.5 draggable.x = bbox.x*draggable.scale * -1 + (root.width - bbox.width * draggable.scale) * 0.5
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
}
} }
} }