stateslist.qml 18.7 KB
Newer Older
1 2 3 4 5 6 7 8
import Qt 4.6

// Shows list of states
// the model has to expose the path through an iconUrl property
Rectangle {
    id: root
    property int currentStateIndex : 0
    signal createNewState
9
    signal deleteState(int index)
10 11
    signal duplicateCurrentState

12
    color: "#4f4f4f";
13 14 15 16 17 18

    function adjustCurrentStateIndex() {
        if (currentStateIndex >= statesEditorModel.count)
            currentStateIndex = statesEditorModel.count-1;
    }

19 20 21
    Connections {
        target: statesEditorModel
        onCountChanged: adjustCurrentStateIndex()        
22 23
    }

24 25
    Connections {
        target: statesEditorModel
26
        onChangedToState: { root.currentStateIndex = n; }
27
    }
28 29 30

    // TextInputs don't loose focus automatically when user clicks away, have to be done explicitly
    signal unFocus
31
    MouseArea {
32 33 34 35
        anchors.fill:parent
        hoverEnabled:true
        onExited: root.unFocus();
    }
36 37 38
    onCurrentStateIndexChanged: {
        if (currentStateIndex<0) currentStateIndex=0; else unFocus();
    }
39

40 41 42
    Flickable {
        id: listView

43 44 45
        anchors.left:root.left
        anchors.right:root.right
        anchors.top:root.top
46
        height:statesRow.height+2
47 48
        anchors.topMargin:-1;
        anchors.leftMargin:-1;
49

50 51
        contentHeight: height
        contentWidth: statesRow.width+2
52

53

54
        Row {
55
            id: statesRow
56
            spacing:10
57 58 59 60
            Row {
                id: listViewRow
                Repeater {
                    model: statesEditorModel
61
                    delegate: delegate
62 63
                }
            }
64
            Item {
65
                id: newStateBoxLoader;
66 67 68 69 70 71 72 73 74 75 76
                width:132
                height:listViewRow.height
                Loader {
                    sourceComponent: newStateBox;
                    // make it square
                    width: 100
                    height: 100
                    anchors.horizontalCenter:parent.horizontalCenter
                    anchors.bottom:parent.bottom
                    anchors.bottomMargin:12
                }
77
            }
78 79


80 81 82 83 84 85 86 87 88 89
        }

        focus: true;
        clip: true;
        overShoot: false;
        interactive:false;

    }

    Component {
90
        id: delegate
91 92
        Item {
            id: container
93 94 95 96 97 98 99 100 101 102 103 104
            //width: Math.max(img.width, txt.width+2) + 32
            width:img.width+32
            height: img.height + txt.height + 32

            property bool isCurrentState:root.currentStateIndex==index;
            onXChanged: scrollBarAdjuster.adjustScrollBar();
            onIsCurrentStateChanged: scrollBarAdjuster.adjustScrollBar();

            Item {
                id:scrollBarAdjuster
                function adjustScrollBar() {
                    if (parent.isCurrentState) {
105
                        if (container.x+container.width > listView.contentX + listView.width)
106
                            horizontalScrollbar.viewPosition = container.x+container.width - listView.width;
107
                        if (container.x < listView.contentX)
108 109 110 111 112
                            horizontalScrollbar.viewPosition = container.x;
                    }
                }
            }

113 114

            Rectangle {
115
                id: highlight
116
                anchors.fill: parent
117
                color:parent.isCurrentState?highlightColor:"#4F4F4F";
118
                clip:true
119
                Rectangle {
120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152
                    width:parent.width
                    height:parent.height
                    y:-parent.height/2
                    gradient: Gradient {
                        GradientStop { position: 0.0; color: Qt.lighter(highlight.color) }
                        GradientStop { position: 1.0; color: highlight.color }
                    }
                }
                Rectangle {
                    width:parent.width
                    height:parent.height
                    y:parent.height/2
                    gradient: Gradient {
                        GradientStop { position: 0.0; color: highlight.color }
                        GradientStop { position: 1.0; color: Qt.darker(highlight.color) }
                    }
                }
            }
            Item {
                id: highlightBorders
                anchors.fill:parent
                anchors.topMargin:1
                Rectangle {
                    anchors.top:parent.top
                    anchors.left:parent.left
                    width:parent.width-1
                    height:1
                    color: Qt.lighter(highlight.color)
                }
                Rectangle {
                    anchors.bottom:parent.bottom
                    anchors.left:parent.left
                    anchors.leftMargin:1
153
                    width:parent.width-1
154 155 156 157 158 159 160 161
                    height:1
                    color: Qt.darker(highlight.color)
                }
                Rectangle {
                    anchors.top:parent.top
                    anchors.left:parent.left
                    width:1
                    height:parent.height-1
162
                    gradient: Gradient {
163
                        GradientStop { position: 0.0; color: Qt.lighter(highlight.color) }
164 165
                        GradientStop { position: 1.0; color: highlight.color }
                    }
166
                }
167 168 169 170 171 172 173 174 175 176 177
                Rectangle {
                    anchors.top:parent.top
                    anchors.right:parent.right
                    anchors.topMargin:1
                    width:1
                    height:parent.height-1
                    gradient: Gradient {
                        GradientStop { position: 0.0; color: highlight.color }
                        GradientStop { position: 1.0; color: Qt.darker(highlight.color) }
                    }
                }
178 179
            }

180

181
            Item {
182
                id: img
183 184 185

                width:100
                height:100
186
                anchors.horizontalCenter: parent.horizontalCenter
187
                anchors.top: textLimits.bottom
188 189 190 191 192 193 194 195 196 197 198
                anchors.topMargin: 16
                Image {
                    anchors.centerIn:parent
                    pixmap: statePixmap
                    Rectangle {
                        anchors.fill:parent
                        color:"transparent"
                        border.width:1
                        border.color:"black"
                    }
                }
199 200
            }

201
            MouseArea {
202 203 204
                id: itemRegion
                anchors.fill: container
                onClicked: {
205
                    root.unFocus();
206
                    root.currentStateIndex = index;
207 208 209
                }
            }

210 211

            // The erase button
212
            Item {
213 214
                id: removeState

215
                visible: (index != 0 && root.currentStateIndex==index)
216 217 218

                anchors.right: parent.right
                anchors.top: parent.top
219 220
                anchors.topMargin: 7;
                anchors.rightMargin:4;
221 222 223 224

                width: 12
                height: width

225 226 227 228 229 230
                states: State{
                    name: "Pressed";
                    PropertyChanges {
                        target: removeState
                        buttonColor: buttonColorDown
                    }
231 232
                }

233 234 235
                property var buttonColorUp: "#E1E1E1"
                property var buttonColorDown: Qt.darker(buttonColorUp)
                property var buttonColor: buttonColorUp
236

237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283
                Item {
                    width:parent.width
                    height:parent.height/2 - 1
                    clip: true
                    Rectangle {
                        color: removeState.buttonColor
                        width: removeState.width
                        height: removeState.height
                        radius: width/2
                    }
                }
                Item {
                    width:parent.width
                    height:parent.height/2 - 1
                    y:parent.height/2+1
                    clip: true
                    Rectangle {
                        color: removeState.buttonColor
                        width: removeState.width
                        height: removeState.height
                        radius: width/2
                        y:-parent.y
                    }
                }
                Item {
                    width:2
                    height:parent.height
                    clip: true
                    Rectangle {
                        color: removeState.buttonColor
                        width: removeState.width
                        height: removeState.height
                        radius: width/2
                    }
                }
                Item {
                    width:2
                    height:parent.height
                    x:parent.width-2
                    clip: true
                    Rectangle {
                        color: removeState.buttonColor
                        width: removeState.width
                        height: removeState.height
                        radius: width/2
                        x: -parent.x
                    }
284 285
                }

286
                MouseArea {
287 288
                    anchors.fill:parent
                    onClicked: {
289
                        root.unFocus();
290 291

                        root.deleteState(index);
292
                        horizontalScrollbar.totalLengthDecreased();
293
                    }
294 295 296
                    onPressed: {parent.state="Pressed"}
                    onReleased: {parent.state=""}

297 298
                }
            }
299

300 301 302
            Connections {
                target: root
                onUnFocus: stateNameEditor.unFocus();
303 304 305 306 307
            }

            Item {
                id: textLimits
                anchors.top: parent.top
308
                anchors.topMargin:4
309 310
                anchors.left:parent.left
                anchors.right:removeState.left
311
                anchors.leftMargin:4
312 313
                height: txt.height
                clip: false
314
                Text {
315 316 317 318
                    anchors.top: parent.top
                    anchors.topMargin: 2
                    anchors.horizontalCenter: textLimits.horizontalCenter
                    id: txt
319
                    color: root.currentStateIndex==index?"white":"#E1E1E1";
320 321 322 323
                    text: stateName
                    width:parent.width
                    elide:Qt.ElideMiddle
                    horizontalAlignment:Qt.AlignHCenter
324
                }
325
                MouseArea {
326 327 328 329 330 331 332 333 334 335 336 337
                    id: txtRegion
                    anchors.fill:parent
                    onClicked: {
                        if (root.currentStateIndex != index)
                            root.unFocus();
                        root.currentStateIndex = index;
                    }
                    onDoubleClicked: if (index!=0) {
                        stateNameInput.text=stateName;
                        stateNameInput.focus=true;
                        stateNameEditor.visible=true;
                        stateNameInput.cursorVisible=true;
338
                        stateNameInput.selectAll();
339 340 341
                    }
                }

342

343 344 345
                Rectangle {
                    id:stateNameEditor
                    visible:false
346 347
                    // force update
                    onVisibleChanged: stateNameInput.updateScroll();
348

349
                    x:2-parent.anchors.leftMargin
350 351
                    y:2
                    height:parent.height
352
                    width:container.width-3
353 354 355 356
                    clip:true

                    color:"white"
                    border.width:2
357
                    border.color:"#4f4f4f"
358 359
                    radius:4
                    function unFocus() {
360 361
                        if (visible) {
                            visible=false;
362
                            statesEditorModel.renameState(index,stateNameInput.text);
363
                        }
364 365
                    }

366
                    // There is no QFontMetrics equivalent in QML
367 368 369
                    Text {
                        text:stateNameInput.text
                        visible:false
370
                        id:textMetric
371
                    }
372 373 374
                    Text {
                        visible:false
                        id:cursorMetric
375 376
                    }

377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399

                    Item {
                        x:6
                        width:parent.width-10
                        height:parent.height
                        clip:true

                        TextInput {
                            id:stateNameInput
                            text:stateName
                            width:Math.max(textMetric.width+4, parent.width)
                            onCursorPositionChanged: updateScroll();
                            function updateScroll() {
                                cursorMetric.text=text.substring(0,cursorPosition);
                                var cM = cursorPosition>0?cursorMetric.width:0;
                                if (cM+4+x>parent.width)
                                    x = parent.width - cM - 4;
                                cursorMetric.text=text.substring(0,cursorPosition-1);
                                var cM = cursorPosition>1?cursorMetric.width:0;
                                if (cM+x<0)
                                    x = -cM;
                            }
                            onAccepted: {
400 401 402 403
                                if (stateNameEditor.visible) {
                                    stateNameEditor.visible=false;
                                    statesEditorModel.renameState(index,text);
                                }
404 405 406
                            }
                        }
                    }
407 408
                }
            }
409 410 411 412
        }
    }


413 414 415 416 417 418 419
    Component {
        id: newStateBox
        Rectangle {
            anchors.fill: parent
            color: "transparent"
            border.width: 1
            border.color: "#4F4F4F"
420

421 422 423
            Loader {
                sourceComponent: addState
                anchors.fill: parent
424 425 426

            }
        }
427
    }
428

429 430
    Rectangle {
        id: floatingNewStateBox
431

432 433 434 435 436 437 438 439 440
        color: root.color
        border.width: 1
        border.color: "#4F4F4F"
        width: 40
        height: 40
        anchors.bottom:horizontalScrollbar.top
        anchors.right:root.right
        anchors.bottomMargin:1
        anchors.rightMargin:1
441

442
        visible:(newStateBoxLoader.x+newStateBoxLoader.width/2-11>listView.width+listView.contentX);
443 444 445 446 447


        Loader {
            sourceComponent: addState
            anchors.fill: parent
448 449 450 451 452
        }
    }



453 454 455 456 457 458
    // The add button
    Component {
        id: addState
        Item {
            anchors.fill:parent
            Rectangle {
459

460
                anchors.centerIn: parent
461

462 463
                width: 21
                height: width
464

465 466
                color:"#4F4F4F"
                radius: width/2
467

468 469 470 471 472 473 474
                // "clicked" overlay
                Rectangle {
                    anchors.fill:parent
                    opacity:parent.state=="Pressed"
                    color : "#282828"
                    radius: parent.radius
                }
475

476
                states: State{ name: "Pressed"; }
477

478 479 480 481 482 483 484 485 486 487 488 489 490
                // "plus" sign
                Rectangle {
                    width:parent.width-10
                    height:3
                    color:root.color
                    anchors.centerIn:parent
                }
                Rectangle {
                    width:3
                    height:parent.height-10
                    color:root.color
                    anchors.centerIn:parent
                }
491
            }
492
            MouseArea {
493 494
                anchors.fill:parent
                onClicked: {
495 496
                    // force close textinput
                    root.unFocus();
497
                    if (root.currentStateIndex == 0)
498
                        root.createNewState(); //create new state
499
                    else
500
                        root.duplicateCurrentState(); //duplicate current state
501 502
                    // select the new state
                    root.currentStateIndex = statesEditorModel.count - 1;
503 504 505
                }
                onPressed: {parent.state="Pressed"}
                onReleased: {parent.state=""}
506 507 508 509 510 511
            }
        }
    }

    Item {
        id: horizontalScrollbar
512
        // Current listView implementation sometimes has negative width or contentWidth
513 514
        property int viewPosition: 0;
        property int viewLength: ( listView.width>=0 ? listView.width : 0 );
515
        property int totalLength: ( listView.contentWidth>=0 ? listView.contentWidth : 0 );
516 517


518
        onViewPositionChanged: listView.contentX=viewPosition;
519 520 521 522 523 524 525 526 527 528
        onViewLengthChanged: {
            if ((totalLength>viewLength) && (viewPosition > totalLength-viewLength))
                viewPosition = totalLength-viewLength;
        }

        function totalLengthDecreased()  {
            if ((totalLength>viewLength) && (viewPosition > totalLength-viewLength))
                viewPosition = totalLength-viewLength;
        }

529
        //opacity: viewLength < totalLength;
530 531 532

        anchors.left : listView.left
        anchors.right : listView.right
533 534
        anchors.top : listView.bottom
        anchors.topMargin: 1
535 536 537 538 539 540

        height: 10;

        // the bar itself
        Item {
            id: draggableBar
541 542 543 544
            width: if (horizontalScrollbar.totalLength>0) {
                if (horizontalScrollbar.viewLength>horizontalScrollbar.totalLength) parent.width;
                else horizontalScrollbar.viewLength/horizontalScrollbar.totalLength  * parent.width;
            } else 0;
545
            height: parent.height;
546
            x: (horizontalScrollbar.totalLength>0?horizontalScrollbar.viewPosition*horizontalScrollbar.width/horizontalScrollbar.totalLength:0);
547 548 549 550 551 552 553 554 555 556 557 558 559


            Rectangle {
                height:parent.height-1
                width:parent.width
                y:1

                gradient: Gradient {
                    GradientStop { position: 0.0; color: "#C6C6C6" }
                    GradientStop { position: 1.0; color: "#7E7E7E" }
                }
            }

560
            MouseArea {
561 562 563
                anchors.fill:parent
                property int dragging:0;
                property int originalX:0;
564
                onPressed: { dragging = 1; originalX = mouse.x;root.unFocus(); }
565 566 567 568 569 570 571 572 573 574 575 576 577 578 579
                onReleased: { dragging = 0; }
                onPositionChanged: if (dragging)
                {
                    var newX = mouse.x - originalX + parent.x;
                    if (newX<0) newX=0;
                    if (newX>horizontalScrollbar.width-draggableBar.width)
                        newX=horizontalScrollbar.width-draggableBar.width;
                    horizontalScrollbar.viewPosition = newX*horizontalScrollbar.totalLength/horizontalScrollbar.width;
                }
            }
        }

        // border
        Rectangle {
            anchors.fill:parent;
580
            color:"transparent"
581 582 583 584 585 586
            border.width:1;
            border.color:"#8F8F8F";
        }

    }
}