TelloViz / Card-Collection

Project for CPSC 362 Software Engineering
0 stars 0 forks source link

Binding loop detected #144

Open TelloViz opened 1 day ago

TelloViz commented 1 day ago

image

                    ComboBox {
                        id: setComboBox
                        width: 264
                        height: 25
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.leftMargin: 2
                        anchors.rightMargin: 6
                        Layout.leftMargin: 6
                        Layout.preferredHeight: -1
                        Layout.preferredWidth: -1
                        displayText: "Sets"

                        model: setsModel

                        function handleSpacePressed(event) {
                            console.log("Space pressed");
                            if (setComboBox.popup.visible) {
                                console.log("setComboBox.popup is visible");
                                console.log("Highlighted index: " + setComboBox.highlightedIndex);
                                if (setComboBox.highlightedIndex >= 0) {
                                    var item = setsModel.get(setComboBox.highlightedIndex);
                                    item.selected = !item.selected;  // Toggle the selected state
                                    event.accepted = true;
                                }
                            }
                        }

                        Keys.onSpacePressed: handleSpacePressed

                        delegate: Item {
                            width: parent ? parent.width : 0
                            height: checkDelegate ? checkDelegate.height : 30

                            function toggle() {
                                checkDelegate.toggle()
                            }

                            MouseArea {
                                anchors.fill: parent
                                onClicked: checkDelegate.checked = !checkDelegate.checked
                                onEntered: setComboBox.highlightedIndex = index  // Manually set the highlighted index
                            }

                            CheckDelegate {
                                id: checkDelegate
                                anchors.fill: parent
                                text: model.name
                                highlighted: setComboBox.highlightedIndex == index
                                checked: model.selected
                                onCheckedChanged: {
                                    model.selected = checked;
                                }
                            }
                        }

                        Component.onCompleted: {
                            // Request All Sets to populate combo box
                            backendController.request_sets_retrieve()
                            forceActiveFocus()
                        }

                        Connections {
                            target: backendController

                            function onSetsResults(response) {
                                var data = JSON.parse(response)
                                setsModel.clear() // Clear existing items in the model

                                if (data.error) {
                                    console.log("Error in the data received from backend.")
                                } else {
                                    var tempSets = []
                                    data.forEach(function (set) {
                                        tempSets.push({
                                                          "name": set.name,
                                                          "selected": false
                                                      })
                                    })

                                    tempSets.sort(function (a, b) {
                                        return a.name.localeCompare(b.name)
                                    })

                                    tempSets.forEach(function (sortedSet) {
                                        setsModel.append(sortedSet)
                                    })
                                }
                            }
                        }
                    }
TelloViz commented 1 day ago

Code that fixes the Binding Loop:

                    ComboBox {
                        id: setComboBox
                        width: 264
                        height: 25
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.leftMargin: 2
                        anchors.rightMargin: 6
                        Layout.leftMargin: 6
                        Layout.preferredHeight: -1
                        Layout.preferredWidth: -1
                        displayText: "Sets"

                        model: setsModel

                        function handleSpacePressed(event) {
                            console.log("Space pressed");
                            if (setComboBox.popup.visible) {
                                console.log("setComboBox.popup is visible");
                                console.log("Highlighted index: " + setComboBox.highlightedIndex);
                                if (setComboBox.highlightedIndex >= 0) {
                                    var item = setsModel.get(setComboBox.highlightedIndex);
                                    item.selected = !item.selected;  // Toggle the selected state
                                    event.accepted = true;
                                }
                            }
                        }

                        Keys.onSpacePressed: handleSpacePressed

                        delegate: Item {
                            width: parent ? parent.width : 0
                            height: checkDelegate ? checkDelegate.height : 30

                            MouseArea {
                                anchors.fill: parent
                                onClicked: {
                                    // Toggle the checked state directly in the delegate
                                    var currentCheckedState = checkDelegate.checked;
                                    checkDelegate.checked = !currentCheckedState;
                                    // Update the model selected state based on the new checked state
                                    model.selected = !currentCheckedState;
                                }
                                onEntered: setComboBox.highlightedIndex = index  // Manually set the highlighted index
                            }

                            CheckDelegate {
                                id: checkDelegate
                                anchors.fill: parent
                                text: model.name
                                highlighted: setComboBox.highlightedIndex == index
                                checked: model.selected
                            }
                        }

                        Component.onCompleted: {
                            // Request All Sets to populate combo box
                            backendController.request_sets_retrieve()
                            forceActiveFocus()
                        }

                        Connections {
                            target: backendController

                            function onSetsResults(response) {
                                var data = JSON.parse(response)
                                setsModel.clear() // Clear existing items in the model

                                if (data.error) {
                                    console.log("Error in the data received from backend.")
                                } else {
                                    var tempSets = []
                                    data.forEach(function (set) {
                                        tempSets.push({
                                                          "name": set.name,
                                                          "selected": false
                                                      })
                                    })

                                    tempSets.sort(function (a, b) {
                                        return a.name.localeCompare(b.name)
                                    })

                                    tempSets.forEach(function (sortedSet) {
                                        setsModel.append(sortedSet)
                                    })
                                }
                            }
                        }
                    }