Update FlowView

* Adding history
* Adding Decision block
* Adding Wildcard
* Adding Property Editor sheets

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

15 files changed, 780 insertions, 39 deletions

diff --git a/examples/TransitionItem/DecisionDialog.qml b/examples/TransitionItem/DecisionDialog.qml
new file mode 100644
index 0000000..acd9c73
--- /dev/null
+++ b/examples/TransitionItem/DecisionDialog.qml
@@ -0,0 +1,77 @@
+
+/****************************************************************************
+**
+** 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.0
+import FlowView 1.0
+import QtQuick.Dialogs 1.1
+
+FlowDecision {
+    id: root
+
+
+    property alias text: dialog.text
+
+    function trigger() {
+        dialog.open()
+    }
+
+    property MessageDialog dialog: MessageDialog {
+
+        id: dialog
+
+        //property QtObject yesTarget
+        //property QtObject noTarget
+
+        //modal: true
+
+        //visible: false
+
+        standardButtons: StandardButton.Yes | StandardButton.No
+
+        onYes: {
+            print("acc")
+            print("yes")
+            root.targets[0].trigger()
+        }
+        onNo: {
+            root.targets[1].trigger()
+        }
+
+        Component.onCompleted: print(dialog.footer)
+
+    }
+}
+
+
+/*##^##
+Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+##^##*/
diff --git a/examples/TransitionItem/Screen03.ui.qml b/examples/TransitionItem/Screen03.ui.qml
index bfcd4c3..3223ede 100644
--- a/examples/TransitionItem/Screen03.ui.qml
+++ b/examples/TransitionItem/Screen03.ui.qml
@@ -53,10 +53,7 @@ Rectangle {
             list: pageList
         }
         id: view
-        x: 3
-        y: -4
-        width: 1277
-        height: 727
+        anchors.fill: parent
 
         activatedItem: pageList.currentItem
 
diff --git a/examples/TransitionItem/Screen06.ui.qml b/examples/TransitionItem/Screen06.ui.qml
index 47d4e2d..531e2d1 100644
--- a/examples/TransitionItem/Screen06.ui.qml
+++ b/examples/TransitionItem/Screen06.ui.qml
@@ -212,9 +212,9 @@ FlowView {
 
 /*##^##
 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}
+    D{i:0;height:10000;width:10000}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}
+D{i:9;color:"#c2c2c2";inOffset:"-24";outOffset:"-64"}D{i:17;inOffset:23}D{i:18;inOffset:"-26"}
 }
 ##^##*/
 
diff --git a/examples/TransitionItem/Screen07.ui.qml b/examples/TransitionItem/Screen07.ui.qml
index 9050092..093788d 100644
--- a/examples/TransitionItem/Screen07.ui.qml
+++ b/examples/TransitionItem/Screen07.ui.qml
@@ -36,6 +36,28 @@ import QtQuick.Controls 2.3
 FlowView {
     width: 478
     height: 415
+    id: flow
+    children: [
+        Rectangle {
+            z: 10
+            color: "red"
+            width: 478
+            height: 20
+            MouseArea {
+                anchors.fill: parent
+                onClicked: flow.goBack()
+            }
+        }
+    ]
+
+    flowDecisions: [
+        DecisionDialog {
+            id: dialog
+            text: "This is a question?"
+            targets: [flowTransition6, flowTransition8]
+        }
+    ]
+
     flowTransitions: [
         FlowTransition {
             id: flowTransition
@@ -70,6 +92,16 @@ FlowView {
             id: flowTransition5
             from: page05
             to: page02
+        },
+        FlowTransition {
+            id: flowTransition6
+            to: page06
+            from: page02
+        },
+        FlowTransition {
+            id: flowTransition7
+            to: page02
+            from: page06
         }
     ]
 
@@ -105,11 +137,25 @@ FlowView {
         id: page02
 
         FlowActionArea {
+            id: area
             target: flowTransition2
             x: 168
             y: 360
             width: 108
             height: 40
+
+            Connections {
+                target: parent
+                onClicked: area.trigger()
+            }
+        }
+
+        FlowActionArea {
+            target: dialog
+            x: 168
+            y: 154
+            width: 176
+            height: 20
         }
     }
 
@@ -127,6 +173,14 @@ FlowView {
 
     Page06 {
         id: page06
+
+        FlowActionArea {
+            target: flowTransition7
+            x: 394
+            y: 325
+            width: 159
+            height: 123
+        }
     }
 
     Page05 {
@@ -142,11 +196,5 @@ FlowView {
     }
 }
 
-/*##^##
-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/TransitionItem/Screen08.ui.qml b/examples/TransitionItem/Screen08.ui.qml
new file mode 100644
index 0000000..072b50c
--- /dev/null
+++ b/examples/TransitionItem/Screen08.ui.qml
@@ -0,0 +1,148 @@
+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 {
+    id: flowView
+    width: 478
+    height: 415
+
+    flowDecisions: [
+        DecisionDialog {
+            id: dialog
+            text: "This is a question?"
+            targets: [flowTransition1, flowTransition2, flowTransition3]
+        }
+    ]
+
+    flowWildcards: [
+        FlowWildcard {
+            id: wildcard01
+            target: wildcardTransition
+        }
+    ]
+
+    defaultTransition: FlowTransition {}
+
+    flowTransitions: [
+        FlowTransition {
+            id: flowTransition1
+            effect: FlowSlideUpEffect {}
+            to: page05
+            from: page01
+        },
+        FlowTransition {
+            id: flowTransition2
+            effect: FlowSlideRightEffect {}
+            to: page04
+            from: page01
+        },
+        FlowTransition {
+            id: flowTransition3
+            effect: FlowSlideRightEffect {}
+            to: page06
+            from: page01
+        },
+
+        FlowTransition {
+            id: flowTransition4
+            to: dialog
+            from: page01
+        },
+        FlowTransition {
+            id: start
+            to: page01
+            from: flowView
+        },
+        FlowTransition {
+            id: wildcardTransition
+            to: page01
+            //from: null
+        }
+    ]
+
+    Page01 {
+        id: page01
+
+        FlowActionArea {
+            id: flowAction
+            target: flowTransition4
+            x: 264
+            y: 248
+            width: 112
+            height: 76
+
+            Connections {
+                target: flowTransition2
+                onClicked: flowAction.trigger()
+            }
+        }
+    }
+
+    Page05 {
+        id: page05
+    }
+
+    Page04 {
+        id: page04
+
+        FlowActionArea {
+            x: 8
+            y: 8
+            width: 80
+            height: 63
+            goBack: true
+        }
+    }
+
+    Page06 {
+        id: page06
+    }
+
+    Page06 {
+        id: page061
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;formeditorZoom:0.33000001311302185;height:10000;width:10000}D{i:2;flowX:1439.7878796307727;flowY:59.24242327911688}
+D{i:12;flowX:214.45454364834416;flowY:80.24242327911688}D{i:15;flowX:964;flowY:1395}
+D{i:13;flowX:214.45454364834416;flowY:80.24242327911688}D{i:16;flowX:964;flowY:1395}
+D{i:18;flowX:57.57575528790261;flowY:1212.696966927461}D{i:17;flowX:1371.3636349186752;flowY:383.39393782856496}
+D{i:19;flowX:57.57575528790261;flowY:1212.696966927461}D{i:20;flowX:3182.9999630451207;flowY:1339.0000134110448}
+D{i:1;flowX:494;flowY:791}
+}
+##^##*/
+
diff --git a/examples/TransitionItem/TransitionItem.qmlproject b/examples/TransitionItem/TransitionItem.qmlproject
index 4395520..cdd28d3 100644
--- a/examples/TransitionItem/TransitionItem.qmlproject
+++ b/examples/TransitionItem/TransitionItem.qmlproject
@@ -1,7 +1,7 @@
 import QmlProject 1.1
 
 Project {
-    mainFile: "TransitionItem.qml"
+   // mainFile: "TransitionItem.qml"
 
     /* Include .qml, .js, and image files from current directory and subdirectories */
     QmlFiles {
diff --git a/examples/imports/FlowView/FlowActionArea.qml b/examples/imports/FlowView/FlowActionArea.qml
index 6fb06b7..9d42d9a 100644
--- a/examples/imports/FlowView/FlowActionArea.qml
+++ b/examples/imports/FlowView/FlowActionArea.qml
@@ -32,14 +32,43 @@ import QtQuick 2.10
 MouseArea {
     width: 40
     height: 20
+
+    id: root
+
+    function trigger() {
+        target.trigger()
+    }
+
     property Connections connections : Connections {
         id: connections
     }
 
-    property FlowTransition target
+    property QtObject target
 
-    enabled: target !== null
+    enabled: target !== null || root.goBack
 
-    onClicked: target.trigger()
+    onClicked: {
+        if (root.goBack) {
+            print("go back")
+            var par = root.parent
+            while (parent) {
+                if (parent.__isFlowView) {
+                    parent.goBack()
+                    return
+                }
+                parent = parent.parent
+            }
+        } else {
+            target.trigger()
+        }
+    }
+
+    property bool goBack: false
+
+}
 
+/*##^##
+Designer {
+    D{i:0;height:63;width:80}
 }
+##^##*/
diff --git a/examples/imports/FlowView/FlowDecision.qml b/examples/imports/FlowView/FlowDecision.qml
new file mode 100644
index 0000000..6bf7072
--- /dev/null
+++ b/examples/imports/FlowView/FlowDecision.qml
@@ -0,0 +1,38 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 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.10
+
+QtObject {
+    id: root
+
+    property list<FlowTransition> targets
+
+    readonly property bool isFlowDecision: true
+}
diff --git a/examples/imports/FlowView/FlowTransition.qml b/examples/imports/FlowView/FlowTransition.qml
index c386711..ed80ca6 100644
--- a/examples/imports/FlowView/FlowTransition.qml
+++ b/examples/imports/FlowView/FlowTransition.qml
@@ -37,8 +37,8 @@ QtObject {
     /* Those should be lists that allow a n*n mappings. */
     //property Item from: null
     //property Item to: null
-    property list<Item> from
-    property list<Item> to
+    property list<QtObject> from
+    property list<QtObject> to
     property int duration
 
     property var transitionView: Item {}
@@ -46,6 +46,7 @@ QtObject {
     property real progress: effect.progress
 
     function __start() {
+        print("start " + this)
         root.effect.start()
     }
 
@@ -75,11 +76,15 @@ QtObject {
     }
 
     function trigger() {
+        print("hmm")
         if (root.from === null)
             return;
         if (root.to === null)
             return;
 
+        if (to[0].isFlowDecision === true)
+            to[0].trigger();
+
         if (__checkInclude(root.from, transitionView.currentItem))
             transitionView.gotoPage(root)
     }
diff --git a/examples/imports/FlowView/FlowView.qml b/examples/imports/FlowView/FlowView.qml
index 4ff59b6..08a976e 100644
--- a/examples/imports/FlowView/FlowView.qml
+++ b/examples/imports/FlowView/FlowView.qml
@@ -41,6 +41,8 @@ Item {
     property FlowTransition __forceTransition
 
     property list<FlowTransition> flowTransitions
+    property list<FlowDecision> flowDecisions
+    property list<FlowWildcard> flowWildcards
 
     property Item interaction: Item {
     }
@@ -52,6 +54,47 @@ Item {
         Pop
     }
 
+    property bool __blockHistory: false
+
+    property bool __isFlowView: true
+
+    function goBack() {
+        if (root.__history.length === 0)
+            return
+
+        var poppedItem = root.__history.pop()
+
+        root.__blockHistory = true
+        root.activatedItem = poppedItem
+        root.__activateItem()
+        root.__blockHistory = false
+
+
+        if (root.__history.length > 0)
+            root.lastItem = root.__history.slice(-1)[0]
+        else
+            root.lastItem = null
+    }
+
+    function __activateItem() {
+        if (!__isCompleted)
+            return
+
+        if (root.activatedItem === root.currentItem)
+            return;
+
+        if (root.activatedItem === root.nextItem)
+            return;
+
+        root.nextItem = root.activatedItem
+
+        for (var i = 0; i <  root.allChildren.length; ++i) {
+            if (root.allChildren[i] === root.activatedItem)
+                root.currentIndex = i
+        }
+
+    }
+
     default property alias item: stack.children
 
     property Item nextItem
@@ -61,6 +104,9 @@ Item {
     property Item lastItem
     property int currentIndex: 0
 
+    //property list<Item> __history
+    property var __history: []
+
     property int maxIndex: 0
 
     signal transitionFinished
@@ -79,24 +125,14 @@ Item {
     property bool __blockSchedule: false
 
     onActivatedItemChanged: {
-        if (!__isCompleted)
-            return
-
-        if (root.activatedItem === root.currentItem)
-            return;
-
-        root.nextItem = root.activatedItem
-
-        for (var i = 0; i <  root.allChildren.length; ++i) {
-            if (root.allChildren[i] === root.activatedItem)
-                root.currentIndex = i
-        }
+        root.__activateItem()
     }
 
     function resetCurrentIndex() {
         root.__blockSchedule = true
         root.lastItem = root.currentItem
-        //root.currentItem = root.nextItem
+        root.__history.push(root.lastItem)
+
         for (var i = 0; i <  root.allChildren.length; ++i) {
             if (root.allChildren[i] === root.currentItem)
                 root.currentIndex = i
@@ -187,7 +223,13 @@ Item {
 
         scheduleTransition()
 
-        root.lastItem = root.currentItem
+        if (!root.__blockHistory) {
+            root.lastItem = root.currentItem
+            if (!Array.isArray(root.__history))
+                root.__history = []
+
+            root.__history.push(root.lastItem)
+        }
 
         root.currentTransition.__start()
     }
@@ -233,8 +275,4 @@ Item {
     }
 }
 
-/*##^##
-Designer {
-    D{i:0;autoSize:true;height:480;width:640}
-}
-##^##*/
+
diff --git a/examples/imports/FlowView/FlowWildcard.qml b/examples/imports/FlowView/FlowWildcard.qml
new file mode 100644
index 0000000..810147e
--- /dev/null
+++ b/examples/imports/FlowView/FlowWildcard.qml
@@ -0,0 +1,41 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 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.10
+
+QtObject {
+    id: root
+
+    property FlowTransition target
+
+    function trigger() {
+
+    }
+
+}
diff --git a/examples/imports/FlowView/designer/FlowActionAreaSpecifics.qml b/examples/imports/FlowView/designer/FlowActionAreaSpecifics.qml
new file mode 100644
index 0000000..708c5f5
--- /dev/null
+++ b/examples/imports/FlowView/designer/FlowActionAreaSpecifics.qml
@@ -0,0 +1,119 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 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.1
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.0
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Outline Color")
+
+        ColorEditor {
+            backendValue: backendValues.color__AUX
+            supportGradient: false
+        }
+   }
+   Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Fill Color")
+
+        ColorEditor {
+            backendValue: backendValues.fillColor__AUX
+            supportGradient: false
+        }
+   }
+   Section {
+       anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("FlowAction Parameters")
+        SectionLayout {
+             rows: 1
+             columns: 2
+
+             Label {
+                 text: qsTr("Go Back")
+                 tooltip: qsTr("")
+             }
+             CheckBox {
+                 Layout.fillWidth: true
+                 text: backendValues.goBack
+                 backendValue: backendValues.goBack
+             }
+
+        }
+   }
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Transition Parameters")
+
+         SectionLayout {
+             rows: 4
+             columns: 2
+
+             Label {
+                 text: qsTr("Line Width")
+                 tooltip: qsTr("Sets the margin, in pixels, around the text in the TextEdit..")
+             }
+             SpinBox {
+                 backendValue: backendValues.width__AUX
+                 maximumValue: 22
+                 minimumValue: 1
+             }
+
+             Label {
+                 text: qsTr("Dash Line")
+                 tooltip: qsTr("Sets the margin, in pixels, around the text in the TextEdit..")
+             }
+             CheckBox {
+                 Layout.fillWidth: true
+                 text: backendValues.dash__AUX.value
+                 backendValue: backendValues.dash__AUX
+             }
+
+             Label {
+                 text: qsTr("Enabled")
+                 tooltip: qsTr("Sets the margin, in pixels, around the text in the TextEdit..")
+             }
+             CheckBox {
+                 Layout.fillWidth: true
+                 text: backendValues.enabled
+                 backendValue: backendValues.enabled
+             }
+
+         }
+   }
+}
diff --git a/examples/imports/FlowView/designer/FlowItemSpecifics.qml b/examples/imports/FlowView/designer/FlowItemSpecifics.qml
new file mode 100644
index 0000000..2d2ae75
--- /dev/null
+++ b/examples/imports/FlowView/designer/FlowItemSpecifics.qml
@@ -0,0 +1,90 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 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.1
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.0
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Outline Color")
+
+        ColorEditor {
+            backendValue: backendValues.color__AUX
+            supportGradient: false
+        }
+   }
+   Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Fill Color")
+
+        ColorEditor {
+            backendValue: backendValues.fillColor__AUX
+            supportGradient: false
+        }
+   }
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Transition Parameters")
+
+         SectionLayout {
+             rows: 4
+             columns: 2
+
+             Label {
+                 text: qsTr("Line Width")
+                 tooltip: qsTr("Sets the margin, in pixels, around the text in the TextEdit..")
+             }
+             SpinBox {
+                 backendValue: backendValues.width__AUX
+                 maximumValue: 22
+                 minimumValue: 1
+             }
+
+             Label {
+                 visible: !textInputSection.isTextInput
+                 text: qsTr("Enabled")
+                 tooltip: qsTr("Sets the margin, in pixels, around the text in the TextEdit..")
+             }
+             CheckBox {
+                 Layout.fillWidth: true
+                 text: backendValues.enabled
+                 backendValue: backendValues.enabled
+             }
+
+         }
+   }
+}
diff --git a/examples/imports/FlowView/designer/FlowTransitionSpecifics.qml b/examples/imports/FlowView/designer/FlowTransitionSpecifics.qml
new file mode 100644
index 0000000..b6f0c9f
--- /dev/null
+++ b/examples/imports/FlowView/designer/FlowTransitionSpecifics.qml
@@ -0,0 +1,109 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 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.1
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.0
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Transition Color")
+
+        ColorEditor {
+            backendValue: backendValues.color__AUX
+            supportGradient: false
+        }
+   }
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Transition Parameters")
+
+         SectionLayout {
+             rows: 4
+             columns: 2
+
+             Label {
+                 text: qsTr("Line Width")
+                 tooltip: qsTr("Sets the margin, in pixels, around the text in the TextEdit..")
+             }
+             SpinBox {
+                 backendValue: backendValues.width__AUX
+                 maximumValue: 22
+                 minimumValue: 1
+             }
+
+            Label {
+                 text: qsTr("In Offset")
+                 tooltip: qsTr("Sets the margin, in pixels, around the text in the TextEdit..")
+             }
+             SpinBox {
+                 backendValue: backendValues.inOffset__AUX
+                 maximumValue: 128
+                 minimumValue: -128
+             }
+
+             Label {
+                 text: qsTr("Out Offset")
+                 tooltip: qsTr("Sets the margin, in pixels, around the text in the TextEdit..")
+             }
+             SpinBox {
+                 backendValue: backendValues.outOffset__AUX
+                 maximumValue: 128
+                 minimumValue: -128
+             }
+
+             Label {
+                 text: qsTr("Break Offset")
+                 tooltip: qsTr("Sets the margin, in pixels, around the text in the TextEdit..")
+             }
+             SpinBox {
+                 backendValue: backendValues.breakPoint__AUX
+                 maximumValue: 100
+                 minimumValue: 0
+             }
+
+             Label {
+                 text: qsTr("Dash Line")
+                 tooltip: qsTr("Sets the margin, in pixels, around the text in the TextEdit..")
+             }
+             CheckBox {
+                 Layout.fillWidth: true
+                 text: backendValues.dash__AUX.value
+                 backendValue: backendValues.dash__AUX
+             }
+
+         }
+   }
+}
diff --git a/examples/imports/FlowView/qmldir b/examples/imports/FlowView/qmldir
index 9f7eddb..3762849 100644
--- a/examples/imports/FlowView/qmldir
+++ b/examples/imports/FlowView/qmldir
@@ -13,4 +13,6 @@ FlowTransitionList 1.0 FlowTransitionList.qml
 FlowView 1.0 FlowView.qml
 FlowPushUpEffect 1.0 FlowPushUpEffect.qml
 FlowItem 1.0 FlowItem.qml
+FlowDecision 1.0 FlowDecision.qml
+FlowWildcard 1.0 FlowWildcard.qml
 FlowActionArea 1.0 FlowActionArea.qml