| import QtQuick 2.6 |
| |
| Rectangle { |
| id: root |
| width: 500 |
| height: 500 |
| |
| property int duration: 50 |
| |
| property real incrementalSize: 5 |
| |
| property int populateTransitionsDone |
| property int addTransitionsDone |
| property int displaceTransitionsDone |
| |
| property var targetTrans_items: new Object() |
| property var targetTrans_targetIndexes: new Array() |
| property var targetTrans_targetItems: new Array() |
| |
| property var displacedTrans_items: new Object() |
| property var displacedTrans_targetIndexes: new Array() |
| property var displacedTrans_targetItems: new Array() |
| |
| // for QQmlListProperty types |
| function copyList(propList) { |
| var temp = new Array() |
| for (var i=0; i<propList.length; i++) |
| temp.push(propList[i]) |
| return temp |
| } |
| |
| function checkPos(x, y, name) { |
| if (Qt.point(x, y) == targetItems_transitionFrom) |
| model_targetItems_transitionFrom.addItem(name, "") |
| if (Qt.point(x, y) == displacedItems_transitionVia) |
| model_displacedItems_transitionVia.addItem(name, "") |
| } |
| |
| Component.onCompleted: { |
| if (dynamicallyPopulate) { |
| for (var i=0; i<30; i++) |
| testModel.addItem("item " + i, "") |
| } |
| } |
| |
| Transition { |
| id: populateTransition |
| enabled: usePopulateTransition |
| |
| SequentialAnimation { |
| ScriptAction { |
| script: { |
| root.targetTrans_items[populateTransition.ViewTransition.item.nameData] = populateTransition.ViewTransition.index |
| root.targetTrans_targetIndexes.push(populateTransition.ViewTransition.targetIndexes) |
| root.targetTrans_targetItems.push(root.copyList(populateTransition.ViewTransition.targetItems)) |
| } |
| } |
| ParallelAnimation { |
| NumberAnimation { properties: "x"; from: targetItems_transitionFrom.x; duration: root.duration } |
| NumberAnimation { properties: "y"; from: targetItems_transitionFrom.y; duration: root.duration } |
| } |
| |
| ScriptAction { script: root.populateTransitionsDone += 1 } |
| } |
| } |
| |
| Transition { |
| id: addTransition |
| enabled: enableAddTransition |
| |
| SequentialAnimation { |
| ScriptAction { |
| script: { |
| root.targetTrans_items[addTransition.ViewTransition.item.nameData] = addTransition.ViewTransition.index |
| root.targetTrans_targetIndexes.push(addTransition.ViewTransition.targetIndexes) |
| root.targetTrans_targetItems.push(root.copyList(addTransition.ViewTransition.targetItems)) |
| } |
| } |
| ParallelAnimation { |
| NumberAnimation { properties: "x"; from: targetItems_transitionFrom.x; duration: root.duration } |
| NumberAnimation { properties: "y"; from: targetItems_transitionFrom.y; duration: root.duration } |
| } |
| |
| ScriptAction { script: root.addTransitionsDone += 1 } |
| } |
| } |
| |
| Transition { |
| id: displaced |
| |
| SequentialAnimation { |
| ScriptAction { |
| script: { |
| root.displacedTrans_items[displaced.ViewTransition.item.nameData] = displaced.ViewTransition.index |
| root.displacedTrans_targetIndexes.push(displaced.ViewTransition.targetIndexes) |
| root.displacedTrans_targetItems.push(root.copyList(displaced.ViewTransition.targetItems)) |
| } |
| } |
| ParallelAnimation { |
| NumberAnimation { properties: "x"; duration: root.duration; to: displacedItems_transitionVia.x } |
| NumberAnimation { properties: "y"; duration: root.duration; to: displacedItems_transitionVia.y } |
| } |
| NumberAnimation { properties: "x,y"; duration: root.duration } |
| |
| ScriptAction { script: root.displaceTransitionsDone += 1 } |
| } |
| |
| } |
| |
| Row { |
| objectName: "row" |
| |
| property int count: children.length - 1 // omit Repeater |
| |
| x: 50; y: 50 |
| width: 400; height: 400 |
| padding: 1; topPadding: 2; leftPadding: 3; rightPadding: 4; bottomPadding: 5 |
| Repeater { |
| objectName: "repeater" |
| model: testedPositioner == "row" ? testModel : undefined |
| Rectangle { |
| property string nameData: name |
| objectName: "wrapper" |
| width: 30 + index*root.incrementalSize |
| height: 30 + index*root.incrementalSize |
| border.width: 1 |
| Column { |
| Text { text: index } |
| Text { objectName: "name"; text: name } |
| Text { text: parent.parent.y } |
| } |
| onXChanged: root.checkPos(x, y, name) |
| onYChanged: root.checkPos(x, y, name) |
| } |
| } |
| |
| populate: populateTransition |
| add: addTransition |
| move: displaced |
| } |
| |
| Column { |
| objectName: "column" |
| |
| property int count: children.length - 1 // omit Repeater |
| |
| x: 50; y: 50 |
| width: 400; height: 400 |
| padding: 1; topPadding: 2; leftPadding: 3; rightPadding: 4; bottomPadding: 5 |
| Repeater { |
| objectName: "repeater" |
| model: testedPositioner == "column" ? testModel : undefined |
| Rectangle { |
| property string nameData: name |
| objectName: "wrapper" |
| width: 30 + index*root.incrementalSize |
| height: 30 + index*root.incrementalSize |
| border.width: 1 |
| Column { |
| Text { text: index } |
| Text { objectName: "name"; text: name } |
| Text { text: parent.parent.y } |
| } |
| onXChanged: root.checkPos(x, y, name) |
| onYChanged: root.checkPos(x, y, name) |
| } |
| } |
| |
| populate: populateTransition |
| add: addTransition |
| move: displaced |
| } |
| |
| Grid { |
| objectName: "grid" |
| |
| property int count: children.length - 1 // omit Repeater |
| |
| x: 50; y: 50 |
| width: 400; height: 400 |
| padding: 1; topPadding: 2; leftPadding: 3; rightPadding: 4; bottomPadding: 5 |
| Repeater { |
| objectName: "repeater" |
| model: testedPositioner == "grid" ? testModel : undefined |
| Rectangle { |
| property string nameData: name |
| objectName: "wrapper" |
| width: 30 + index*root.incrementalSize |
| height: 30 + index*root.incrementalSize |
| border.width: 1 |
| Column { |
| Text { text: index } |
| Text { objectName: "name"; text: name } |
| Text { text: parent.parent.y } |
| } |
| |
| onXChanged: root.checkPos(x, y, name) |
| onYChanged: root.checkPos(x, y, name) |
| } |
| } |
| |
| populate: populateTransition |
| add: addTransition |
| move: displaced |
| } |
| |
| Flow { |
| objectName: "flow" |
| |
| property int count: children.length - 1 // omit Repeater |
| |
| x: 50; y: 50 |
| width: 400; height: 400 |
| padding: 1; topPadding: 2; leftPadding: 3; rightPadding: 4; bottomPadding: 5 |
| Repeater { |
| objectName: "repeater" |
| model: testedPositioner == "flow" ? testModel : undefined |
| Rectangle { |
| property string nameData: name |
| objectName: "wrapper" |
| width: 30 + index*root.incrementalSize |
| height: 30 + index*root.incrementalSize |
| border.width: 1 |
| Column { |
| Text { text: index } |
| Text { objectName: "name"; text: name } |
| Text { text: parent.parent.x + " " + parent.parent.y } |
| } |
| onXChanged: root.checkPos(x, y, name) |
| onYChanged: root.checkPos(x, y, name) |
| } |
| } |
| |
| populate: populateTransition |
| add: addTransition |
| move: displaced |
| } |
| } |
| |
