250 lines
8.4 KiB
QML
250 lines
8.4 KiB
QML
import QtQuick 2.6
|
|
|
|
Rectangle {
|
|
id: root
|
|
width: 500
|
|
height: 500
|
|
|
|
required property bool usePopulateTransition
|
|
required property bool enableAddTransition
|
|
required property bool dynamicallyPopulate
|
|
required property var testModel
|
|
required property var model_targetItems_transitionFrom
|
|
required property var model_displacedItems_transitionVia
|
|
required property point targetItems_transitionFrom
|
|
required property point displacedItems_transitionVia
|
|
required property string testedPositioner
|
|
|
|
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
|
|
}
|
|
}
|
|
|