src/plugins/qmldesigner/components/itemlibrary/qml/ItemsView.qml

   1 /**************************************************************************
   2 **
   3 ** This file is part of Qt Creator
   4 **
   5 ** Copyright (c) 2011 Nokia Corporation and/or its subsidiary(-ies).
   6 **
   7 ** Contact: Nokia Corporation (info@qt.nokia.com)
   8 **
   9 **
  10 ** GNU Lesser General Public License Usage
  11 **
  12 ** This file may be used under the terms of the GNU Lesser General Public
  13 ** License version 2.1 as published by the Free Software Foundation and
  14 ** appearing in the file LICENSE.LGPL included in the packaging of this file.
  15 ** Please review the following information to ensure the GNU Lesser General
  16 ** Public License version 2.1 requirements will be met:
  17 ** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
  18 **
  19 ** In addition, as a special exception, Nokia gives you certain additional
  20 ** rights. These rights are described in the Nokia Qt LGPL Exception
  21 ** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
  22 **
  23 ** Other Usage
  24 **
  25 ** Alternatively, this file may be used in accordance with the terms and
  26 ** conditions contained in a signed written agreement between you and Nokia.
  27 **
  28 ** If you have questions regarding the use of this file, please contact
  29 ** Nokia at qt-info@nokia.com.
  30 **
  31 **************************************************************************/
  32
  33 import Qt 4.7
  34
  35 /* The view displaying the item grid.
  36
  37 The following Qml context properties have to be set:
  38 - listmodel itemLibraryModel
  39 - int itemLibraryIconWidth
  40 - int itemLibraryIconHeight
  41
  42 itemLibraryModel has to have the following structure:
  43
  44 ListModel {
  45 ListElement {
  46 int sectionLibId
  47 string sectionName
  48 list sectionEntries: [
  49 ListElement {
  50 int itemLibId
  51 string itemName
  52 pixmap itemPixmap
  53 },
  54 ...
  55 ]
  56 }
  57 ...
  58 }
  59 */
  60
  61 Rectangle {
  62     id: itemsView
  63
  64     // public
  65
  66     function scrollView(delta) {
  67         scrollbar.scroll(-delta / style.scrollbarWheelDeltaFactor)
  68     }
  69
  70     function resetView() {
  71         expandAllEntries()
  72         scrollbar.reset()
  73     }
  74
  75     signal itemSelected(int itemLibId)
  76     signal itemDragged(int itemLibId)
  77
  78     signal stopDragAndDrop
  79
  80     // internal
  81
  82     signal expandAllEntries
  83
  84     ItemsViewStyle { id: style }
  85
  86     color: style.backgroundColor
  87
  88     /* workaround: without this, a completed drag and drop operation would
  89 result in the drag being continued when QmlView re-gains
  90 focus */
  91     MouseArea {
  92         anchors.fill: parent
  93         hoverEnabled: true
  94         onEntered: {
  95             if (!pressed)
  96                 stopDragAndDrop()
  97             }
  98             }
  99
 100                 signal selectionUpdated(int itemSectionIndex)
 101
 102                 property int selectedItemLibId: -1
 103                 property int selectionSectionLibId: -1
 104
 105                 function setSelection(itemLibId) {
 106                     selectedItemLibId = itemLibId
 107                     selectionSectionLibId = itemLibraryModel.getSectionLibId(itemLibId)
 108                     selectionUpdated(itemLibraryModel.getItemSectionIndex(itemLibId))
 109                 }
 110
 111                 function unsetSelection() {
 112                     selectedItemLibId = -1
 113                     selectionSectionLibId = -1
 114                     selectionUpdated(-1)
 115                 }
 116
 117                 Connections {
 118                     target: itemLibraryModel
 119                     onVisibilityChanged: {
 120                         if (itemLibraryModel.isItemVisible(selectedItemLibId))
 121                             setSelection(selectedItemLibId)
 122                             else
 123                                 unsetSelection()
 124                         }
 125                         }
 126
 127                             /* the following 3 properties are calculated here for performance
 128 reasons and then passed to the section views */
 129                             property int entriesPerRow: Math.max(1, Math.floor((itemsFlickable.width - 2) / style.cellWidth))
 130                             property int cellWidth: Math.floor((itemsFlickable.width - 2) / entriesPerRow)
 131                             property int cellHeight: style.cellHeight
 132
 133                             Component {
 134                                 id: sectionDelegate
 135
 136                                 SectionView {
 137                                     id: section
 138
 139                                     entriesPerRow: itemsView.entriesPerRow
 140                                     cellWidth: itemsView.cellWidth
 141                                     cellHeight: itemsView.cellHeight
 142
 143                                     width: itemsFlickable.width
 144                                     itemHighlight: selector
 145
 146                                     property bool containsSelection: (selectionSectionLibId == sectionLibId)
 147
 148                                     onItemSelected: {
 149                                         itemsView.setSelection(itemLibId)
 150                                         itemsView.itemSelected(itemLibId)
 151                                     }
 152                                     onItemDragged: {
 153                                         section.itemSelected(itemLibId)
 154                                         itemsView.itemDragged(itemLibId)
 155                                     }
 156
 157                                     Connections {
 158                                         target: itemsView
 159                                         onExpandAllEntries: section.expand()
 160                                         onSelectionUpdated: {
 161                                             if (containsSelection) {
 162                                                 section.setSelection(itemSectionIndex)
 163                                                 section.focusSelection(itemsFlickable)
 164                                             } else
 165                                                 section.unsetSelection()
 166                                             }
 167                                             }
 168
 169                                                 Component {
 170                                                     id: selector
 171
 172                                                     Selector {
 173                                                         x: containsSelection? section.currentItem.x:0
 174                                                         y: containsSelection? section.currentItem.y:0
 175                                                         width: itemsView.cellWidth
 176                                                         height: itemsView.cellHeight
 177
 178                                                         visible: containsSelection
 179                                                     }
 180                                                 }
 181                                             }
 182                             }
 183
 184                             Flickable {
 185                                 id: itemsFlickable
 186
 187                                 anchors.top: parent.top
 188                                 anchors.topMargin: 3
 189                                 anchors.bottom: parent.bottom
 190                                 anchors.left: parent.left
 191                                 anchors.right: scrollbarFrame.left
 192                                 boundsBehavior: Flickable.DragOverBounds
 193
 194                                 interactive: false
 195                                 contentHeight: col.height
 196
 197                                 /* Limit the content position. Without this, resizing would get the
 198 content position out of scope regarding the scrollbar. */
 199                                 function limitContentPos() {
 200                                     if (contentY < 0)
 201                                         contentY = 0;
 202                                     else {
 203                                         var maxContentY = Math.max(0, contentHeight - height)
 204                                         if (contentY > maxContentY)
 205                                             contentY = maxContentY;
 206                                     }
 207                                 }
 208                                 onHeightChanged: limitContentPos()
 209                                 onContentHeightChanged: limitContentPos()
 210
 211                                 Column {
 212                                     id: col
 213
 214                                     Repeater {
 215                                         model: itemLibraryModel  // to be set in Qml context
 216                                         delegate: sectionDelegate
 217                                     }
 218                                 }
 219                             }
 220
 221                             Item {
 222                                 id: scrollbarFrame
 223
 224                                 anchors.top: parent.top
 225                                 anchors.topMargin: 2
 226                                 anchors.bottom: parent.bottom
 227                                 anchors.bottomMargin: 1
 228                                 anchors.right: parent.right
 229                                 width: (itemsFlickable.contentHeight > itemsFlickable.height)? 11:0
 230
 231                                 Scrollbar {
 232                                     id: scrollbar
 233                                     anchors.fill: parent
 234                                     anchors.leftMargin: 1
 235
 236                                     flickable: itemsFlickable
 237                                 }
 238                             }
 239                         }