Update TransitionItem

Change-Id: I16e5fdc1d875ba0c577bbe93d7646db2f9b69191
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

11 files changed, 1575 insertions, 75 deletions

diff --git a/examples/TransitionItem/Page01.ui.qml b/examples/TransitionItem/Page01.ui.qml
new file mode 100644
index 0000000..7884483
--- /dev/null
+++ b/examples/TransitionItem/Page01.ui.qml
@@ -0,0 +1,214 @@
+import QtQuick 2.12
+
+
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import TransitionItem 1.0
+import FlowView 1.0
+import QtQuick.Controls 2.3
+
+FlowItem {
+    id: page01
+    width: 640
+    height: 480
+
+    PageTemplate {
+        id: pageTemplate
+        anchors.fill: parent
+
+        Rectangle {
+            id: rectangle
+            x: 46
+            y: 90
+            width: 149
+            height: 256
+            color: "#323244"
+
+            Rectangle {
+                id: rectangle6
+                x: 22
+                y: 168
+                width: 106
+                height: 56
+                color: "#ffffff"
+            }
+
+            Rectangle {
+                id: rectangle7
+                x: 22
+                y: 34
+                width: 106
+                height: 10
+                color: "#ffffff"
+            }
+
+            Rectangle {
+                id: rectangle8
+                x: 22
+                y: 73
+                width: 106
+                height: 10
+                color: "#ffffff"
+            }
+
+            Rectangle {
+                id: rectangle9
+                x: 28
+                y: 53
+                width: 90
+                height: 10
+                color: "#ffffff"
+            }
+        }
+
+        Rectangle {
+            id: rectangle1
+            x: 246
+            y: 90
+            width: 149
+            height: 256
+            color: "#323244"
+
+            Rectangle {
+                id: rectangle10
+                x: 22
+                y: 168
+                width: 106
+                height: 56
+                color: "#ffffff"
+            }
+
+            Rectangle {
+                id: rectangle11
+                x: 22
+                y: 34
+                width: 106
+                height: 10
+                color: "#ffffff"
+            }
+
+            Rectangle {
+                id: rectangle12
+                x: 22
+                y: 73
+                width: 106
+                height: 10
+                color: "#ffffff"
+            }
+
+            Rectangle {
+                id: rectangle13
+                x: 28
+                y: 53
+                width: 90
+                height: 10
+                color: "#ffffff"
+            }
+        }
+
+        Rectangle {
+            id: rectangle2
+            x: 441
+            y: 90
+            width: 149
+            height: 256
+            color: "#323244"
+
+            Rectangle {
+                id: rectangle14
+                x: 22
+                y: 168
+                width: 106
+                height: 56
+                color: "#ffffff"
+            }
+
+            Rectangle {
+                id: rectangle15
+                x: 22
+                y: 34
+                width: 106
+                height: 10
+                color: "#ffffff"
+            }
+
+            Rectangle {
+                id: rectangle16
+                x: 22
+                y: 73
+                width: 106
+                height: 10
+                color: "#ffffff"
+            }
+
+            Rectangle {
+                id: rectangle17
+                x: 28
+                y: 53
+                width: 90
+                height: 10
+                color: "#ffffff"
+            }
+        }
+
+        Rectangle {
+            id: rectangle3
+            x: 46
+            y: 366
+            width: 538
+            height: 14
+            color: "#323244"
+        }
+
+        Rectangle {
+            id: rectangle4
+            x: 81
+            y: 400
+            width: 480
+            height: 14
+            color: "#323244"
+        }
+
+        Rectangle {
+            id: rectangle5
+            x: 46
+            y: 434
+            width: 538
+            height: 14
+            color: "#323244"
+        }
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;height:480;width:640}
+}
+##^##*/
+
diff --git a/examples/TransitionItem/Page02.ui.qml b/examples/TransitionItem/Page02.ui.qml
new file mode 100644
index 0000000..989992e
--- /dev/null
+++ b/examples/TransitionItem/Page02.ui.qml
@@ -0,0 +1,107 @@
+import QtQuick 2.12
+
+
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import TransitionItem 1.0
+import FlowView 1.0
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+
+FlowItem {
+    id: page01
+    width: 640
+    height: 480
+
+    PageTemplate {
+        id: pageTemplate
+        anchors.fill: parent
+
+        Rectangle {
+            id: rectangle
+            x: 177
+            y: 192
+            width: 168
+            height: 28
+            color: "#ffffff"
+            border.color: "#9d9d9d"
+            border.width: 4
+        }
+
+        Rectangle {
+            id: rectangle1
+            x: 177
+            y: 233
+            width: 168
+            height: 118
+            color: "#ffffff"
+            border.width: 4
+            border.color: "#9d9d9d"
+        }
+
+        Rectangle {
+            id: rectangle2
+            x: 177
+            y: 151
+            width: 168
+            height: 28
+            color: "#ffffff"
+            border.width: 4
+            border.color: "#9d9d9d"
+        }
+
+        Rectangle {
+            id: rectangle3
+            x: 177
+            y: 366
+            width: 88
+            height: 28
+            color: "#323244"
+            border.width: 4
+
+            Text {
+                id: element
+                x: 30
+                y: 3
+                color: "#ffffff"
+                text: qsTr("OK")
+                font.bold: true
+                font.family: "Verdana"
+                font.pixelSize: 18
+            }
+        }
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;height:480;width:640}
+}
+##^##*/
+
diff --git a/examples/TransitionItem/Page03.ui.qml b/examples/TransitionItem/Page03.ui.qml
new file mode 100644
index 0000000..6684d0d
--- /dev/null
+++ b/examples/TransitionItem/Page03.ui.qml
@@ -0,0 +1,53 @@
+import QtQuick 2.12
+
+
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import TransitionItem 1.0
+import FlowView 1.0
+import QtQuick.Controls 2.3
+
+FlowItem {
+    id: page01
+    width: 640
+    height: 480
+
+    PageTemplate {
+        id: pageTemplate
+        anchors.fill: parent
+    }
+}
+
+
+/*##^##
+Designer {
+    D{i:0;height:415;width:478}
+}
+##^##*/
+
diff --git a/examples/TransitionItem/Page04.ui.qml b/examples/TransitionItem/Page04.ui.qml
new file mode 100644
index 0000000..458d121
--- /dev/null
+++ b/examples/TransitionItem/Page04.ui.qml
@@ -0,0 +1,91 @@
+import QtQuick 2.12
+
+
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import TransitionItem 1.0
+import FlowView 1.0
+import QtQuick.Controls 2.3
+
+FlowItem {
+    id: page01
+    width: 640
+    height: 480
+
+    PageTemplate {
+        id: pageTemplate
+        anchors.fill: parent
+
+        Rectangle {
+            id: rectangle
+            x: 156
+            y: 175
+            width: 328
+            height: 42
+            color: "#323244"
+        }
+
+        Rectangle {
+            id: rectangle1
+            x: 126
+            y: 260
+            width: 389
+            height: 42
+            color: "#323244"
+        }
+
+        Rectangle {
+            id: rectangle2
+            x: 257
+            y: 349
+            width: 127
+            height: 42
+            color: "#ffffff"
+            border.width: 4
+            border.color: "#323244"
+
+            Text {
+                id: element
+                text: qsTr("Text")
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.verticalCenter: parent.verticalCenter
+                font.bold: true
+                font.family: "Verdana"
+                font.pixelSize: 28
+            }
+        }
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;height:480;width:640}
+}
+##^##*/
+
diff --git a/examples/TransitionItem/Page05.ui.qml b/examples/TransitionItem/Page05.ui.qml
new file mode 100644
index 0000000..b48c6ec
--- /dev/null
+++ b/examples/TransitionItem/Page05.ui.qml
@@ -0,0 +1,135 @@
+import QtQuick 2.12
+
+
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import TransitionItem 1.0
+import FlowView 1.0
+import QtQuick.Controls 2.3
+
+FlowItem {
+    id: page01
+    width: 640
+    height: 480
+
+    PageTemplate {
+        id: pageTemplate
+        anchors.fill: parent
+
+        Rectangle {
+            id: rectangle
+            x: 110
+            y: 211
+            width: 100
+            height: 100
+            color: "#323244"
+            radius: 50
+        }
+
+        Rectangle {
+            id: rectangle1
+            x: 70
+            y: 317
+            width: 180
+            height: 53
+            color: "#323244"
+        }
+
+        Rectangle {
+            id: rectangle2
+            x: 45
+            y: 387
+            width: 230
+            height: 19
+            color: "#323244"
+        }
+
+        Rectangle {
+            id: rectangle3
+            x: 45
+            y: 428
+            width: 230
+            height: 19
+            color: "#323244"
+        }
+
+        Rectangle {
+            id: rectangle4
+            x: 413
+            y: 211
+            width: 100
+            height: 100
+            color: "#323244"
+            radius: 50
+        }
+
+        Rectangle {
+            id: rectangle5
+            x: 373
+            y: 317
+            width: 180
+            height: 53
+            color: "#323244"
+        }
+
+        Rectangle {
+            id: rectangle6
+            x: 348
+            y: 387
+            width: 230
+            height: 19
+            color: "#323244"
+        }
+
+        Rectangle {
+            id: rectangle7
+            x: 348
+            y: 428
+            width: 230
+            height: 19
+            color: "#323244"
+        }
+
+        Rectangle {
+            id: rectangle8
+            x: 96
+            y: 72
+            width: 429
+            height: 126
+            color: "#9d9d9d"
+        }
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;height:480;width:640}
+}
+##^##*/
+
diff --git a/examples/TransitionItem/Page06.ui.qml b/examples/TransitionItem/Page06.ui.qml
new file mode 100644
index 0000000..6edc063
--- /dev/null
+++ b/examples/TransitionItem/Page06.ui.qml
@@ -0,0 +1,298 @@
+import QtQuick 2.12
+
+
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import TransitionItem 1.0
+import FlowView 1.0
+import QtQuick.Controls 2.3
+
+FlowItem {
+    id: page01
+    width: 640
+    height: 480
+
+    PageTemplate {
+        id: pageTemplate
+        anchors.fill: parent
+
+        Rectangle {
+            id: rectangle
+            x: 40
+            y: 328
+            width: 200
+            height: 24
+            color: "#323244"
+        }
+
+        Rectangle {
+            id: rectangle1
+            x: 40
+            y: 358
+            width: 24
+            height: 24
+            color: "#9d9d9d"
+            radius: 12
+        }
+
+        Rectangle {
+            id: rectangle2
+            x: 70
+            y: 358
+            width: 283
+            height: 24
+            color: "#9d9d9d"
+            radius: 12
+        }
+
+        Rectangle {
+            id: rectangle3
+            x: 40
+            y: 388
+            width: 24
+            height: 24
+            color: "#9d9d9d"
+            radius: 12
+        }
+
+        Rectangle {
+            id: rectangle4
+            x: 70
+            y: 388
+            width: 283
+            height: 24
+            color: "#9d9d9d"
+            radius: 12
+        }
+
+        Rectangle {
+            id: rectangle5
+            x: 40
+            y: 418
+            width: 24
+            height: 24
+            color: "#9d9d9d"
+            radius: 12
+        }
+
+        Rectangle {
+            id: rectangle6
+            x: 70
+            y: 418
+            width: 283
+            height: 24
+            color: "#9d9d9d"
+            radius: 12
+        }
+
+        Rectangle {
+            id: rectangle7
+            x: 40
+            y: 448
+            width: 24
+            height: 24
+            color: "#9d9d9d"
+            radius: 12
+        }
+
+        Rectangle {
+            id: rectangle8
+            x: 70
+            y: 448
+            width: 283
+            height: 24
+            color: "#9d9d9d"
+            radius: 12
+        }
+
+        Rectangle {
+            id: rectangle9
+            x: 40
+            y: 104
+            width: 200
+            height: 24
+            color: "#323244"
+        }
+
+        Rectangle {
+            id: rectangle10
+            x: 40
+            y: 134
+            width: 24
+            height: 24
+            color: "#9d9d9d"
+            radius: 12
+        }
+
+        Rectangle {
+            id: rectangle11
+            x: 70
+            y: 134
+            width: 283
+            height: 24
+            color: "#9d9d9d"
+            radius: 12
+        }
+
+        Rectangle {
+            id: rectangle12
+            x: 40
+            y: 164
+            width: 24
+            height: 24
+            color: "#9d9d9d"
+            radius: 12
+        }
+
+        Rectangle {
+            id: rectangle13
+            x: 70
+            y: 164
+            width: 283
+            height: 24
+            color: "#9d9d9d"
+            radius: 12
+        }
+
+        Rectangle {
+            id: rectangle14
+            x: 40
+            y: 194
+            width: 24
+            height: 24
+            color: "#9d9d9d"
+            radius: 12
+        }
+
+        Rectangle {
+            id: rectangle15
+            x: 70
+            y: 194
+            width: 283
+            height: 24
+            color: "#9d9d9d"
+            radius: 12
+        }
+
+        Rectangle {
+            id: rectangle16
+            x: 40
+            y: 224
+            width: 24
+            height: 24
+            color: "#9d9d9d"
+            radius: 12
+        }
+
+        Rectangle {
+            id: rectangle17
+            x: 70
+            y: 224
+            width: 283
+            height: 24
+            color: "#9d9d9d"
+            radius: 12
+        }
+
+        Rectangle {
+            id: rectangle18
+            x: 40
+            y: 254
+            width: 24
+            height: 24
+            color: "#9d9d9d"
+            radius: 12
+        }
+
+        Rectangle {
+            id: rectangle19
+            x: 70
+            y: 254
+            width: 283
+            height: 24
+            color: "#9d9d9d"
+            radius: 12
+        }
+
+        Rectangle {
+            id: rectangle20
+            x: 40
+            y: 284
+            width: 24
+            height: 24
+            color: "#9d9d9d"
+            radius: 12
+        }
+
+        Rectangle {
+            id: rectangle21
+            x: 70
+            y: 284
+            width: 283
+            height: 24
+            color: "#9d9d9d"
+            radius: 12
+        }
+
+        Rectangle {
+            id: rectangle22
+            x: 388
+            y: 104
+            width: 176
+            height: 131
+            color: "#9d9d9d"
+        }
+
+        Rectangle {
+            id: rectangle23
+            x: 388
+            y: 322
+            width: 176
+            height: 134
+            color: "#9d9d9d"
+        }
+
+        Text {
+            id: element
+            x: 252
+            y: 48
+            text: qsTr("Contacts")
+            font.bold: true
+            font.family: "Verdana"
+            font.pixelSize: 28
+        }
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;height:480;width:640}
+}
+##^##*/
+
diff --git a/examples/TransitionItem/PageTemplate.ui.qml b/examples/TransitionItem/PageTemplate.ui.qml
new file mode 100644
index 0000000..a9964ca
--- /dev/null
+++ b/examples/TransitionItem/PageTemplate.ui.qml
@@ -0,0 +1,103 @@
+
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.4
+
+Item {
+    width: 400
+    height: 400
+
+    Rectangle {
+        id: rectangle
+        color: "#ffffff"
+        radius: 1
+        border.width: 4
+        border.color: "#9d9d9d"
+        anchors.fill: parent
+
+        Rectangle {
+            id: rectangle1
+            y: 32
+            height: 4
+            color: "#9d9d9d"
+            anchors.left: parent.left
+            anchors.right: parent.right
+        }
+
+        Rectangle {
+            id: rectangle2
+            x: 8
+            y: 10
+            width: 16
+            height: 16
+            color: "#9d9d9d"
+            radius: 8
+        }
+
+        Rectangle {
+            id: rectangle3
+            x: 30
+            y: 10
+            width: 16
+            height: 16
+            color: "#9d9d9d"
+            radius: 8
+        }
+
+        Rectangle {
+            id: rectangle4
+            x: 52
+            y: 10
+            width: 16
+            height: 16
+            color: "#9d9d9d"
+            radius: 8
+        }
+
+        Rectangle {
+            id: rectangle5
+            x: -2
+            y: 14
+            height: 8
+            color: "#9d9d9d"
+            radius: 2
+            anchors.rightMargin: 8
+            anchors.leftMargin: 80
+            anchors.right: parent.right
+            anchors.left: parent.left
+        }
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;height:480;width:640}D{i:2;anchors_width:200}D{i:6;anchors_width:200}D{i:1;anchors_height:200;anchors_width:200}
+}
+##^##*/
+
diff --git a/examples/TransitionItem/Screen05.ui.qml b/examples/TransitionItem/Screen05.ui.qml
index b90c390..69663d1 100644
--- a/examples/TransitionItem/Screen05.ui.qml
+++ b/examples/TransitionItem/Screen05.ui.qml
@@ -1,4 +1,3 @@
-import QtQuick 2.12
 /****************************************************************************
 **
 ** Copyright (C) 2018 The Qt Company Ltd.
@@ -28,93 +27,213 @@ import QtQuick 2.12
 **
 ****************************************************************************/
 
+import QtQuick 2.12
 import TransitionItem 1.0
 import FlowView 1.0
 import QtQuick.Controls 2.3
 
-Item {
-    width: Constants.width
-    height: Constants.height
-
-    FlowView {
-        x: 401
-        y: 153
-        width: 478
-        height: 415
-        FlowItem {
-            FlowActionArea {
-                enabled: false
-
-                Connections {
-                    target: button
-                    onClicked: forwardTransition.trigger()
-                }
-            }
+FlowView {
 
-            id: page01
-            width: 333
-            height: 319
+    width: 478
+    height: 415
+    Page01 {
+        id: page01
+        FlowActionArea {
+            target: forwardTransition
+            x: 66
+            y: 259
+            width: 107
+            height: 51
+            //enabled: false
 
-            Rectangle {
-                color: "#ffffff"
-                anchors.fill: parent
 
-                Button {
-                    id: button
-                    x: 27
-                    y: 254
-                    text: qsTr("Next")
-                }
+            /*
+            Connections {
+                target: page01.button
+                onClicked: forwardTransition.trigger()
             }
+            */
+        }
 
-            Text {
-                id: element
-                text: qsTr("Page 01")
-                font.pixelSize: 12
-            }
+        FlowActionArea {
+            target: forwardTransition02
+            x: 465
+            y: 259
+            width: 102
+            height: 51
         }
-        FlowItem {
-            id: page02
-            width: 333
-            height: 319
-
-            Rectangle {
-                color: "#ffffff"
-                anchors.fill: parent
-
-                Button {
-                    id: button1
-                    x: 15
-                    y: 263
-                    text: qsTr("Back")
-                }
-            }
 
-            Text {
-                text: qsTr("Page 02")
-                font.pixelSize: 12
-            }
+        FlowActionArea {
+            target: flowTransition3
+            x: 267
+            y: 259
+            width: 107
+            height: 51
+        }
+    }
+    Page02 {
+        id: page02
+        FlowActionArea {
+            width: 105
+            height: 41
 
-            FlowActionArea {
-                enabled: false
+            //enabled: false
 
-                Connections {
-                    target: button1
-                    onClicked: backwardTransition.trigger()
-                }
-            }
+
+            /*
+            Connections {
+                target: page02.button
+                onClicked: backwardTransition.trigger()
+            }*/
+            target: backwardTransition
+            x: 169
+            y: 361
+        }
+    }
+
+    Page03 {
+        id: page03
+
+        FlowActionArea {
+            target: otherTransition
+            x: 222
+            y: 313
+            width: 137
+            height: 64
         }
-        flowTransitions: [
-            FlowTransition {
-                id: forwardTransition
-                from: page01
-                to: page02
-            },
-            FlowTransition {
-                id: backwardTransition
-                from: page02
-                to: page01
-            }
-        ]
     }
+
+    Page04 {
+        id: page04
+
+        FlowActionArea {
+            target: flowTransition
+            x: 262
+            y: 348
+            width: 120
+            height: 42
+        }
+
+        FlowActionArea {
+            target: flowTransition1
+            x: 501
+            y: 66
+            width: 64
+            height: 60
+        }
+
+        FlowActionArea {
+            target: flowTransition2
+            x: 31
+            y: 80
+            width: 144
+            height: 32
+        }
+    }
+
+    Page05 {
+        id: page05
+
+        FlowActionArea {
+            target: flowTransition4
+            x: 97
+            y: 215
+            width: 121
+            height: 98
+        }
+    }
+
+    Page06 {
+        id: page06
+
+        FlowActionArea {
+            target: flowTransition6
+            x: 390
+            y: 322
+            width: 174
+            height: 131
+        }
+
+        FlowActionArea {
+            target: flowTransition5
+            x: 390
+            y: 109
+            width: 174
+            height: 123
+        }
+    }
+
+    Page06 {
+        id: page061
+        x: -277
+        y: -37
+    }
+
+    flowTransitions: [
+        FlowTransition {
+            id: forwardTransition
+            from: page01
+            to: page02
+        },
+        FlowTransition {
+            id: forwardTransition02
+            from: page01
+            to: page02
+        },
+        FlowTransition {
+            id: backwardTransition
+            from: page02
+            to: page01
+        },
+        FlowTransition {
+            id: otherTransition
+            from: page03
+            to: page01
+        },
+        FlowTransition {
+            id: flowTransition
+            to: page01
+            from: page04
+        },
+        FlowTransition {
+            id: flowTransition1
+            to: page06
+            from: page04
+        },
+        FlowTransition {
+            id: flowTransition2
+            to: page05
+            from: page04
+        },
+        FlowTransition {
+            id: flowTransition3
+            to: page05
+            from: page01
+        },
+        FlowTransition {
+            id: flowTransition4
+            to: page04
+            from: page05
+            effect: FlowFadeEffect {}
+        },
+        FlowTransition {
+            id: flowTransition5
+            to: page03
+            from: page06
+        },
+        FlowTransition {
+            id: flowTransition6
+            to: page03
+            from: page06
+        }
+    ]
 }
+
+/*##^##
+Designer {
+    D{i:0;height:6400;width:4800}D{i:3;flowX:752;flowY:"-256"}D{i:1;flowX:836;flowY:619}
+D{i:6;flowX:"-617";flowY:325}D{i:5;flowX:1738;flowY:560}D{i:7;flowX:1081;flowY:39}
+D{i:10;flowX:829;flowY:1324}D{i:9;flowX:28;flowY:914}D{i:13;flowX:1697;flowY:1348}
+}
+##^##*/
+
diff --git a/examples/TransitionItem/Screen06.ui.qml b/examples/TransitionItem/Screen06.ui.qml
new file mode 100644
index 0000000..47d4e2d
--- /dev/null
+++ b/examples/TransitionItem/Screen06.ui.qml
@@ -0,0 +1,220 @@
+import QtQuick 2.12
+
+
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import TransitionItem 1.0
+import FlowView 1.0
+import QtQuick.Controls 2.3
+
+FlowView {
+
+    width: 478
+    height: 415
+    flowTransitions: [
+        FlowTransition {
+            id: flowTransition
+            effect: FlowSlideUpEffect {}
+            from: page01
+            to: page04
+        },
+        FlowTransition {
+            id: flowTransition1
+            effect: FlowSlideUpEffect {}
+            from: page01
+            to: page06
+        },
+        FlowTransition {
+            id: flowTransition2
+            effect: FlowPushRightEffect {
+                opacity: 0.8
+                scale: 0.8
+            }
+            from: page01
+            to: page02
+        },
+        FlowTransition {
+            id: flowTransition3
+            effect: FlowSlideDownEffect {}
+            from: page04
+            to: page01
+        },
+        FlowTransition {
+            id: flowTransition4
+            effect: FlowSlideDownEffect {}
+            from: page06
+            to: page01
+        },
+        FlowTransition {
+            id: flowTransition5
+            effect: FlowPushRightEffect {
+                opacity: 0.8
+                scale: 0.8
+            }
+            from: page02
+            to: page05
+        },
+        FlowTransition {
+            id: flowTransition6
+            effect: FlowPushLeftEffect {
+                opacity: 0.8
+                scale: 0.8
+            }
+            from: page05
+            to: page01
+        },
+        FlowTransition {
+            id: flowTransition7
+            effect: FlowSlideUpEffect {}
+            from: page01
+            to: page03
+        },
+        FlowTransition {
+            id: flowTransition8
+            from: page03
+            to: page01
+        },
+        FlowTransition {
+            id: flowTransition9
+            from: page03
+            to: page01
+        }
+    ]
+    Page01 {
+        id: page01
+
+        FlowActionArea {
+            target: flowTransition
+            x: 65
+            y: 257
+            width: 110
+            height: 57
+        }
+
+        FlowActionArea {
+            target: flowTransition2
+            x: 462
+            y: 257
+            width: 110
+            height: 57
+        }
+
+        FlowActionArea {
+            target: flowTransition1
+            x: 265
+            y: 257
+            width: 110
+            height: 57
+        }
+
+        FlowActionArea {
+            target: flowTransition7
+            x: 54
+            y: 112
+            width: 126
+            height: 74
+        }
+    }
+    Page02 {
+        id: page02
+
+        FlowActionArea {
+            target: flowTransition5
+            x: 171
+            y: 365
+            width: 95
+            height: 33
+        }
+    }
+
+    Page03 {
+        id: page03
+
+        FlowActionArea {
+            target: flowTransition8
+            x: 0
+            y: 8
+            width: 88
+            height: 20
+        }
+
+        FlowActionArea {
+            target: flowTransition9
+            x: 258
+            y: 271
+            width: 113
+            height: 69
+        }
+    }
+
+    Page04 {
+        id: page04
+
+        FlowActionArea {
+            target: flowTransition3
+            x: 250
+            y: 344
+            width: 140
+            height: 50
+        }
+    }
+
+    Page05 {
+        id: page05
+
+        FlowActionArea {
+            target: flowTransition6
+            x: 103
+            y: 200
+            width: 113
+            height: 111
+        }
+    }
+
+    Page06 {
+        id: page06
+
+        FlowActionArea {
+            target: flowTransition4
+            x: 381
+            y: 100
+            width: 187
+            height: 139
+        }
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;height:6400;width:4800}D{i:9;inOffset:-24;outOffset:-64}D{i:17;inOffset:23}
+D{i:18;inOffset:-26}D{i:19;flowX:836;flowY:619}D{i:24;flowX:1710;flowY:595}D{i:26;flowX:968;flowY:41}
+D{i:29;flowX:28;flowY:914}D{i:31;flowX:1697;flowY:1348}
+}
+##^##*/
+
diff --git a/examples/TransitionItem/Screen07.ui.qml b/examples/TransitionItem/Screen07.ui.qml
new file mode 100644
index 0000000..9050092
--- /dev/null
+++ b/examples/TransitionItem/Screen07.ui.qml
@@ -0,0 +1,152 @@
+import QtQuick 2.12
+
+
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import TransitionItem 1.0
+import FlowView 1.0
+import QtQuick.Controls 2.3
+
+FlowView {
+    width: 478
+    height: 415
+    flowTransitions: [
+        FlowTransition {
+            id: flowTransition
+            effect: FlowSlideUpEffect {}
+            to: page02
+            from: page01
+        },
+        FlowTransition {
+            id: flowTransition1
+            effect: FlowSlideRightEffect {}
+            to: page04
+            from: page01
+        },
+        FlowTransition {
+            id: flowTransition2
+            effect: FlowSlideDownEffect {}
+            to: page01
+            from: page02
+        },
+        FlowTransition {
+            id: flowTransition3
+            effect: FlowSlideLeftEffect {}
+            to: page01
+            from: page04
+        },
+        FlowTransition {
+            id: flowTransition4
+            from: page01
+            to: page05
+        },
+        FlowTransition {
+            id: flowTransition5
+            from: page05
+            to: page02
+        }
+    ]
+
+    Page01 {
+        id: page01
+
+        FlowActionArea {
+            target: flowTransition1
+            x: 456
+            y: 248
+            width: 116
+            height: 70
+        }
+
+        FlowActionArea {
+            target: flowTransition
+            x: 264
+            y: 248
+            width: 112
+            height: 76
+        }
+
+        FlowActionArea {
+            target: flowTransition4
+            x: 58
+            y: 255
+            width: 122
+            height: 63
+        }
+    }
+
+    Page02 {
+        id: page02
+
+        FlowActionArea {
+            target: flowTransition2
+            x: 168
+            y: 360
+            width: 108
+            height: 40
+        }
+    }
+
+    Page04 {
+        id: page04
+
+        FlowActionArea {
+            target: flowTransition3
+            x: 244
+            y: 342
+            width: 152
+            height: 56
+        }
+    }
+
+    Page06 {
+        id: page06
+    }
+
+    Page05 {
+        id: page05
+
+        FlowActionArea {
+            target: flowTransition5
+            x: 389
+            y: 202
+            width: 144
+            height: 115
+        }
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;height:2000;width:2000}D{i:11;flowX:970.6666666666666;flowY:64}D{i:15;flowX:486.66666666666663;flowY:818.6666666666666}
+D{i:17;flowX:50.66666666666667;flowY:1353.3333333333333}D{i:19;flowX:-576;flowY:-273.3333333333333}
+D{i:20;flowX:14.666666666666657;flowY:-146.66666666666666}
+}
+##^##*/
+
diff --git a/examples/imports/FlowView/FlowActionArea.qml b/examples/imports/FlowView/FlowActionArea.qml
index f4c9cc0..6fb06b7 100644
--- a/examples/imports/FlowView/FlowActionArea.qml
+++ b/examples/imports/FlowView/FlowActionArea.qml
@@ -30,8 +30,16 @@
 import QtQuick 2.10
 
 MouseArea {
+    width: 40
+    height: 20
     property Connections connections : Connections {
         id: connections
     }
 
+    property FlowTransition target
+
+    enabled: target !== null
+
+    onClicked: target.trigger()
+
 }