QmlDesigner: Improve selecting and viewing the added rows/columns

Fixes: QDS-11762
Fixes: QDS-12058
Fixes: QDS-12066
Fixes: QDS-12159
Change-Id: I81efce31fd6f6e48d4109cb397435972f562ae14
Reviewed-by: Qt CI Patch Build Bot <ci_patchbuild_bot@qt.io>
Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io>

1 files changed, 126 insertions, 12 deletions

diff --git a/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsView.qml b/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsView.qml
index 3cde00d0a4..fc8f92f9b7 100644
--- a/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsView.qml
+++ b/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsView.qml
@@ -26,6 +26,7 @@ Rectangle {
 
     Column {
         id: topRow
+        readonly property real maxAvailableHeight: root.height
 
         visible: root.model.collectionName !== ""
         width: parent.width
@@ -39,6 +40,11 @@ Rectangle {
         }
 
         GridLayout {
+            id: gridLayout
+            readonly property real maxAvailableHeight: topRow.maxAvailableHeight
+                                                       - topRow.spacing
+                                                       - toolbar.height
+
             columns: 3
             rowSpacing: 1
             columnSpacing: 1
@@ -184,18 +190,32 @@ Rectangle {
             TableView {
                 id: tableView
 
-                model: root.sortedModel
+                model: root.model
                 clip: true
 
-                property point tableStart: tableTopLeftCorner.mapToItem(root, Qt.point(x, y));
+                readonly property real maxAvailableHeight: gridLayout.maxAvailableHeight
+                                                           - addRowButton.height
+                                                           - headerView.height
+                                                           - (2 * gridLayout.rowSpacing)
+                readonly property real maxAvailableWidth: gridLayout.width
+                                                          - StudioTheme.Values.collectionTableHorizontalMargin
+                                                          - rowIdView.width
+                                                          - addColumnButton.width
+                                                          - gridLayout.columnSpacing
+
+                property real childrenWidth: tableView.contentItem.childrenRect.width
+                property real childrenHeight: tableView.contentItem.childrenRect.height
+
+                property int targetRow
+                property int targetColumn
 
                 Layout.alignment: Qt.AlignTop + Qt.AlignLeft
                 Layout.preferredWidth: tableView.contentWidth
                 Layout.preferredHeight: tableView.contentHeight
                 Layout.minimumWidth: 100
                 Layout.minimumHeight: 20
-                Layout.maximumWidth: root.width - (tableStart.x + addColumnContainer.width)
-                Layout.maximumHeight: root.height - (tableStart.y + addRowContainer.height)
+                Layout.maximumWidth: maxAvailableWidth
+                Layout.maximumHeight: maxAvailableHeight
 
                 columnWidthProvider: function(column) {
                     if (!isColumnLoaded(column))
@@ -215,6 +235,47 @@ Rectangle {
                     return Math.max(h, StudioTheme.Values.collectionCellMinimumHeight)
                 }
 
+                function ensureRowIsVisible(row) {
+                    let rows = tableView.model.rowCount()
+                    if (row < 0 || row >= rows) {
+                        tableView.targetRow = -1
+                        return
+                    }
+
+                    if (tableView.isRowLoaded(row)) {
+                        tableView.positionViewAtRow(row,  Qt.AlignLeft | Qt.AlignTop)
+                        tableView.targetRow = -1
+                        return
+                    }
+
+                    tableView.targetRow = row
+                    verticalScrollBar.position = row / rows
+                    ensureTimer.start()
+                }
+
+                function ensureColumnIsVisible(column) {
+                    let columns = tableView.model.columnCount()
+                    if (column < 0 || column >= columns) {
+                        tableView.targetColumn = -1
+                        return
+                    }
+
+                    if (tableView.isColumnLoaded(column)) {
+                        tableView.positionViewAtColumn(column,  Qt.AlignLeft | Qt.AlignTop)
+                        tableView.targetColumn = -1
+                        return
+                    }
+
+                    tableView.targetColumn = column
+                    horizontalScrollBar.position = column / columns
+                    ensureTimer.start()
+                }
+
+                onMaxAvailableHeightChanged: resetSizeTimer.start()
+                onMaxAvailableWidthChanged: resetSizeTimer.start()
+                onChildrenWidthChanged: resetSizeTimer.start()
+                onChildrenHeightChanged: resetSizeTimer.start()
+
                 delegate: Rectangle {
                     id: itemCell
 
@@ -298,14 +359,67 @@ Rectangle {
                             left: itemCell.left
                         }
                     }
+                }
 
-                    Connections {
-                        target: tableView.model
+                Timer {
+                    id: resetSizeTimer
 
-                        function onModelReset() {
-                            tableView.clearColumnWidths()
-                            tableView.clearRowHeights()
-                        }
+                    interval: 100
+                    repeat: false
+                    onTriggered: {
+                        let cWidth = Math.min(tableView.maxAvailableWidth, tableView.childrenWidth)
+                        let cHeight = Math.min(tableView.maxAvailableHeight, tableView.childrenHeight)
+
+                        if (tableView.contentWidth != cWidth || tableView.contentHeight != cHeight)
+                            tableView.returnToBounds()
+                    }
+                }
+
+                Timer {
+                    id: ensureTimer
+
+                    interval: 100
+                    repeat: false
+                    onTriggered: {
+                        tableView.ensureRowIsVisible(tableView.targetRow)
+                        tableView.ensureColumnIsVisible(tableView.targetColumn)
+                    }
+                }
+
+                Connections {
+                    target: tableView.model
+
+                    function onModelReset() {
+                        tableView.clearColumnWidths()
+                        tableView.clearRowHeights()
+                    }
+
+                    function onRowsInserted(parent, first, last) {
+                        tableView.closeEditor()
+                        tableView.model.selectRow(first)
+                        tableView.ensureRowIsVisible(first)
+                    }
+
+                    function onColumnsInserted(parent, first, last) {
+                        tableView.closeEditor()
+                        tableView.model.selectColumn(first)
+                        tableView.ensureColumnIsVisible(first)
+                    }
+
+                    function onRowsRemoved(parent, first, last) {
+                        let nextRow = first - 1
+                        if (nextRow < 0 && tableView.model.rowCount(parent) > 0)
+                            nextRow = 0
+
+                        tableView.model.selectRow(nextRow)
+                    }
+
+                    function onColumnsRemoved(parent, first, last) {
+                        let nextColumn = first - 1
+                        if (nextColumn < 0 && tableView.model.columnCount(parent) > 0)
+                            nextColumn = 0
+
+                        tableView.model.selectColumn(nextColumn)
                     }
                 }
 
@@ -331,7 +445,7 @@ Rectangle {
             }
 
             HelperWidgets.IconButton {
-                id: addColumnContainer
+                id: addColumnButton
 
                 iconSize:16
                 Layout.preferredWidth: 24
@@ -346,7 +460,7 @@ Rectangle {
             }
 
             HelperWidgets.IconButton {
-                id: addRowContainer
+                id: addRowButton
 
                 iconSize:16
                 Layout.preferredWidth: tableView.width