Adding alternative watch demo

playground/watchDS/DateComp.ui.qml

+import QtQuick 2.8
+import QtQuick.Timeline 1.0
+import QtQuick.Studio.Components 1.0
+
+RectangleItem {
+    id: rectangle
+    width: 80
+    height: 22
+    fillColor: "#0b0a0a"
+    strokeColor: "#f0efef"
+    strokeWidth: 1
+
+    RectangleItem {
+        id: rectangle1
+        x: 42
+        y: 1
+        width: 37
+        height: 20
+        borderMode: 1
+        bottomLeftRadius: 0
+        topLeftRadius: 0
+        strokeColor: "#00f0efef"
+        strokeWidth: 0
+        fillColor: "#b7b3b3"
+
+        Item {
+            id: clipMaskDays1
+            x: -4
+            y: 0
+            width: 47
+            height: 22
+            clip: true
+
+            PathView {
+                id: pathView1
+                x: 5
+                y: -219
+                width: 42
+                height: 549
+                path: Path {
+                    PathCubic {
+                        x: 24
+                        y: 600
+                        control1X: 13
+                        control2Y: 315
+                        control1Y: 144.667
+                        control2X: 23
+                    }
+                    startY: 78
+                    startX: 13
+                }
+                delegate: Column {
+                    width: 50
+                    height: 140
+                    spacing: 5
+                    Text {
+                        x: 5
+                        color: "#484848"
+                        text: name
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        font.bold: true
+                    }
+                }
+                model: ListModel {
+                    ListElement {
+                        name: "1"
+                    }
+
+                    ListElement {
+                        name: "2"
+                    }
+
+                    ListElement {
+                        name: "3"
+                    }
+
+                    ListElement {
+                        name: "4"
+                    }
+
+                    ListElement {
+                        name: "5"
+                    }
+
+                    ListElement {
+                        name: "6"
+                    }
+
+                    ListElement {
+                        name: "7"
+                    }
+
+                    ListElement {
+                        name: "8"
+                    }
+
+                    ListElement {
+                        name: "9"
+                    }
+
+                    ListElement {
+                        name: "10"
+                    }
+
+                    ListElement {
+                        name: "11"
+                    }
+
+                    ListElement {
+                        name: "12"
+                    }
+
+                    ListElement {
+                        name: "13"
+                    }
+
+                    ListElement {
+                        name: "14"
+                    }
+
+                    ListElement {
+                        name: "15"
+                    }
+
+                    ListElement {
+                        name: "16"
+                    }
+
+                    ListElement {
+                        name: "17"
+                    }
+
+                    ListElement {
+                        name: "18"
+                    }
+
+                    ListElement {
+                        name: "19"
+                    }
+
+                    ListElement {
+                        name: "20"
+                    }
+
+                    ListElement {
+                        name: "21"
+                    }
+
+                    ListElement {
+                        name: "22"
+                    }
+
+                    ListElement {
+                        name: "23"
+                    }
+
+                    ListElement {
+                        name: "22"
+                    }
+
+                    ListElement {
+                        name: "24"
+                    }
+
+                    ListElement {
+                        name: "25"
+                    }
+
+                    ListElement {
+                        name: "26"
+                    }
+
+                    ListElement {
+                        name: "27"
+                    }
+
+                    ListElement {
+                        name: "28"
+                    }
+
+                    ListElement {
+                        name: "29"
+                    }
+
+                    ListElement {
+                        name: "30"
+                    }
+
+                    ListElement {
+                        name: "31"
+                    }
+                }
+            }
+        }
+
+        Item {
+            id: clipMaskDays
+            x: -42
+            y: 0
+            width: 47
+            height: 22
+            clip: true
+
+            PathView {
+                id: pathView
+                x: 6
+                y: -128
+                width: 42
+                height: 312
+                path: Path {
+                    startY: 78
+                    startX: 13
+
+                    PathCubic {
+                        x: 24
+                        y: 313
+                        control1X: 13
+                        control2Y: 315
+                        control1Y: 144.667
+                        control2X: 23
+                    }
+                }
+                delegate: Column {
+                    width: 50
+                    height: 140
+                    spacing: 5
+
+                    Text {
+                        x: 5
+                        color: "#ffffff"
+                        text: name
+                        styleColor: "#00000000"
+                        style: Text.Normal
+                        font.family: "Verdana"
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        font.bold: true
+                    }
+                }
+                model: ListModel {
+                    ListElement {
+                        name: "Mon"
+                    }
+
+                    ListElement {
+                        name: "Tues"
+                    }
+
+                    ListElement {
+                        name: "Wed"
+                    }
+
+                    ListElement {
+                        name: "Thur"
+                    }
+
+                    ListElement {
+                        name: "Fri"
+                    }
+
+                    ListElement {
+                        name: "Sat"
+                    }
+
+                    ListElement {
+                        name: "Sun"
+                    }
+                }
+            }
+        }
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;height:22;width:80}
+}
+##^##*/

playground/watchDS/testProject/Screen01.ui.qml

+import QtQuick 2.12
+import testProject 1.0
+
+Rectangle {
+    width: Constants.width
+    height: Constants.height
+
+    color: Constants.backgroundColor
+
+    Text {
+        text: qsTr("Hello testProject")
+        anchors.centerIn: parent
+        font.family: Constants.font.family
+    }
+}

playground/watchDS/testProject/fonts/fonts.txt

+Fonts in this folder are loaded automatically.

playground/watchDS/testProject/imports/QtQuick/Studio/Components/ArcItem.qml

+/****************************************************************************
+**
+** Copyright (C) 2019 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 QtQuick 2.9
+import QtQuick.Shapes 1.0
+
+Shape {
+    id: root
+
+    implicitWidth: 100
+    implicitHeight: 100
+
+    property alias gradient: path.fillGradient
+    property alias strokeStyle: path.strokeStyle
+    property alias strokeWidth: path.strokeWidth
+    property alias strokeColor: path.strokeColor
+    property alias dashPattern: path.dashPattern
+    property alias joinStyle: path.joinStyle
+    property alias fillColor: path.fillColor
+    property alias capStyle: path.capStyle
+    property alias dashOffset: path.dashOffset
+
+    property real begin: 0
+    property real end: 90
+
+    property real arcWidth: 10
+
+    property real arcWidthBegin: arcWidth
+    property real arcWidthEnd: arcWidth
+
+    property real radiusInnerAdjust: 0
+    property real radiusOuterAdjust: 0
+
+    property real alpha: clamp(sortedEnd() - sortedBegin(),0, 359.9)
+
+    property bool antialiasing: false
+    layer.enabled: antialiasing
+    layer.smooth: antialiasing
+    layer.textureSize: Qt.size(width * 2, height * 2)
+    property bool outlineArc: false
+
+    property bool round: false
+
+    property bool roundEnd: round
+    property bool roundBegin: round
+
+    function clamp(num, min, max) {
+        return num <= min ? min : num >= max ? max : num;
+    }
+
+    function myCos(angleInDegrees) {
+        var angleInRadians = angleInDegrees * Math.PI / 180.0;
+        return Math.cos(angleInRadians)
+    }
+
+    function mySin(angleInDegrees) {
+        var angleInRadians = angleInDegrees * Math.PI / 180.0;
+        return Math.sin(angleInRadians)
+    }
+
+    function polarToCartesianX(centerX, centerY, radius, angleInDegrees) {
+        var angleInRadians = angleInDegrees * Math.PI / 180.0;
+        var x = centerX + radius * Math.cos(angleInRadians)
+        return x
+    }
+
+    function polarToCartesianY(centerX, centerY, radius, angleInDegrees) {
+        var angleInRadians = angleInDegrees * Math.PI / 180.0;
+        var y = centerY + radius * Math.sin(angleInRadians);
+        return y
+    }
+
+    function calc()
+    {
+        path.__xRadius = root.width / 2 - root.strokeWidth / 2
+        path.__yRadius = root.height / 2 - root.strokeWidth / 2
+
+        path.__Xcenter = root.width / 2
+        path.__Ycenter = root.height / 2
+
+        path.startX = root.polarToCartesianX(path.__Xcenter, path.__Ycenter, path.__xRadius, root.sortedBegin() - 90) +  root.__beginOff * myCos(root.sortedBegin() + 90)
+        path.startY = root.polarToCartesianY(path.__Xcenter, path.__Ycenter, path.__yRadius, root.sortedBegin() - 90) + root.__beginOff * mySin(root.sortedBegin() + 90)
+
+        arc1.x = root.polarToCartesianX(path.__Xcenter, path.__Ycenter, path.__xRadius, root.sortedEnd() - 90) + root.__endOff * myCos(root.sortedEnd() + 90)
+        arc1.y = root.polarToCartesianY(path.__Xcenter, path.__Ycenter,  path.__yRadius, root.sortedEnd() - 90) + root.__endOff * mySin(root.sortedEnd() + 90)
+
+        arc1.radiusX =  path.__xRadius - root.__endOff / 2 -root.__beginOff / 2 + root.radiusOuterAdjust
+        arc1.radiusY =  path.__yRadius - root.__endOff / 2 -root.__beginOff / 2 + root.radiusOuterAdjust
+
+        arc1.useLargeArc =  root.alpha > 180
+    }
+
+    function sortedBegin()
+    {
+        return(Math.min(root.begin, root.end))
+    }
+
+    function sortedEnd()
+    {
+        return(Math.max(root.begin, root.end))
+    }
+
+
+    onWidthChanged: calc()
+    onBeginChanged: calc()
+    onEndChanged: calc()
+    onAlphaChanged: calc()
+
+    ShapePath {
+        id: path
+
+        property real __xRadius
+        property real __yRadius
+
+        property real __Xcenter
+        property real __Ycenter
+
+        strokeColor: "transparent"
+        strokeWidth: 1
+        capStyle: ShapePath.FlatCap
+    }
+
+    property real __beginOff: {
+
+        if (root.arcWidthEnd > root.arcWidthBegin)
+            return (root.arcWidthEnd - root.arcWidthBegin) / 2
+
+        return 0;
+    }
+
+    property real __endOff: {
+
+        if (root.arcWidthBegin > root.arcWidthEnd)
+            return (root.arcWidthBegin - root.arcWidthEnd) / 2
+
+        return 0;
+    }
+
+    property real __startP: root.arcWidthBegin + __beginOff
+    property real __endP: root.arcWidthEnd + __endOff
+
+    Item {
+        id: shapes
+        PathArc {
+            id: arc1
+            property bool add: true
+        }
+
+        PathLine {
+            relativeX: root.arcWidthEnd * myCos(root.sortedEnd())
+            relativeY: root.arcWidthEnd * mySin(root.sortedEnd())
+            property bool add: !root.roundEnd && (root.outlineArc && root.alpha < 359.8)
+
+        }
+
+        PathArc {
+            relativeX: root.arcWidthEnd * myCos(root.sortedEnd())
+            relativeY: root.arcWidthEnd * mySin(root.sortedEnd())
+            radiusX: root.arcWidthEnd /2
+            radiusY: root.arcWidthEnd /2
+            property bool add: root.roundEnd && (root.outlineArc && root.alpha < 359.8)
+        }
+
+        PathMove {
+            relativeX: root.arcWidthEnd * myCos(root.sortedEnd())
+            relativeY: root.arcWidthEnd * mySin(root.sortedEnd())
+            property bool add: root.outlineArc && root.alpha > 359.7
+        }
+
+        PathArc {
+            id: arc2
+            useLargeArc: arc1.useLargeArc
+
+            radiusX: path.__xRadius - root.arcWidthBegin + root.__beginOff / 2 + root.__endOff / 2  + root.radiusInnerAdjust
+            radiusY:path.__yRadius - root.arcWidthBegin + root.__beginOff / 2 + root.__endOff / 2 + root.radiusInnerAdjust
+
+            x: path.startX + root.arcWidthBegin * myCos(root.sortedBegin())
+            y: path.startY + root.arcWidthBegin * mySin(root.sortedBegin())
+
+            direction: PathArc.Counterclockwise
+
+            property bool add: root.outlineArc
+        }
+
+
+        PathLine {
+            x: path.startX
+            y: path.startY
+            property bool add: !root.roundBegin && root.outlineArc && root.alpha < 359.8
+
+        }
+
+        PathArc {
+            x: path.startX
+            y: path.startY
+            radiusX: root.arcWidthEnd /2
+            radiusY: root.arcWidthEnd /2
+            property bool add: root.roundBegin && root.outlineArc && root.alpha < 359.8
+        }
+
+        PathMove {
+            x: path.startX
+            y: path.startY
+            property bool add: root.outlineArc && root.alpha == 360
+        }
+    }
+
+    function invalidatePaths() {
+        if (!root.__completed)
+            return
+
+        for (var i = 0; i < shapes.resources.length; i++) {
+            var s = shapes.resources[i];
+            if (s.add)
+                path.pathElements.push(s)
+        }
+
+    }
+
+    property bool __completed: false
+
+    Component.onCompleted: {
+        root.__completed = true
+        invalidatePaths()
+        calc()
+    }
+}

playground/watchDS/testProject/imports/QtQuick/Studio/Components/BorderItem.qml

+/****************************************************************************
+**
+** Copyright (C) 2019 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
+import QtQuick.Shapes 1.0
+
+Shape {
+    id: root
+    width: 200
+    height: 150
+
+    property int radius: 10
+
+    property int topLeftRadius: radius
+    property int bottomLeftRadius: radius
+    property int topRightRadius: radius
+    property int bottomRightRadius: radius
+
+    property bool bevel: false
+
+    property bool topLeftBevel: bevel
+    property bool topRightBevel: bevel
+    property bool bottomRightBevel: bevel
+    property bool bottomLeftBevel: bevel
+
+    //property alias gradient: path.fillGradient
+
+    property alias strokeStyle: path.strokeStyle
+    property alias strokeWidth: path.strokeWidth
+    property alias strokeColor: path.strokeColor
+    property alias dashPattern: path.dashPattern
+    property alias joinStyle: path.joinStyle
+    property alias dashOffset: path.dashOffset
+    property alias capStyle: path.capStyle
+
+    //property alias fillColor: path.fillColor
+
+    property bool drawTop: true
+    property bool drawBottom: true
+    property bool drawRight: true
+    property bool drawLeft: true
+
+    property bool antialiasing: false
+    layer.enabled: antialiasing
+    layer.smooth: antialiasing
+    layer.textureSize: Qt.size(width * 2, height * 2)
+
+    property int borderMode: 0
+
+    property real borderOffset: {
+
+        if (root.borderMode === 0)
+            return path.strokeWidth * 10.0 / 20.0
+        if (root.borderMode === 1)
+            return 0
+
+        return -path.strokeWidth * 10.0 / 20.0
+    }
+
+
+    Item {
+        anchors.fill: parent
+        anchors.margins: {
+            if (root.borderMode === 0)
+                return 0
+            if (root.borderMode === 1)
+                return -root.strokeWidth / 2.0
+
+
+            return -root.strokeWidth
+        }
+    }
+
+    ShapePath {
+        id: path
+        joinStyle: ShapePath.MiterJoin
+
+        strokeWidth: 4
+        strokeColor: "red"
+        fillColor: "transparent"
+
+        startX: root.topLeftRadius + root.borderOffset
+        startY: root.borderOffset
+
+
+    }
+
+
+    Item {
+        id: shapes
+
+        PathLine {
+            x: root.width - root.topRightRadius - root.borderOffset
+            y: root.borderOffset
+            property bool add: root.drawTop
+        }
+
+        PathArc {
+            x: root.width - root.borderOffset
+            y: root.topRightRadius + root.borderOffset
+            radiusX: topRightBevel ? 50000 : root.topRightRadius
+            radiusY: topRightBevel ? 50000 : root.topRightRadius
+            property bool add: root.drawTop && root.drawRight
+        }
+
+        PathMove {
+            x: root.width - root.borderOffset
+            y: root.topRightRadius + root.borderOffset
+            property bool add: !root.drawTop
+        }
+
+
+        PathLine {
+            x: root.width - root.borderOffset
+            y: root.height - root.bottomRightRadius - root.borderOffset
+            property bool add: root.drawRight
+        }
+
+        PathArc {
+            x: root.width - root.bottomRightRadius - root.borderOffset
+            y: root.height - root.borderOffset
+            radiusX: bottomRightBevel ? 50000 : root.bottomRightRadius
+            radiusY: bottomRightBevel ? 50000 : root.bottomRightRadius
+            property bool add: root.drawRight && root.drawBottom
+        }
+
+        PathMove {
+            x: root.width - root.bottomRightRadius - root.borderOffset
+            y: root.height - root.borderOffset
+            property bool add: !root.drawRight
+        }
+
+        PathLine {
+            x: root.bottomLeftRadius + root.borderOffset
+            y: root.height - root.borderOffset
+            property bool add: root.drawBottom
+        }
+
+        PathArc {
+            x: root.borderOffset
+            y: root.height - root.bottomLeftRadius - root.borderOffset
+            radiusX: bottomLeftBevel ? 50000 : root.bottomLeftRadius
+            radiusY: bottomLeftBevel ? 50000 : root.bottomLeftRadius
+            property bool add: root.drawBottom && root.drawLeft
+        }
+
+        PathMove {
+            x: root.borderOffset
+            y: root.height - root.bottomLeftRadius - root.borderOffset
+            property bool add: !root.drawBottom
+        }
+
+        PathLine {
+            x: root.borderOffset
+            y: root.topLeftRadius + root.borderOffset
+            property bool add: root.drawLeft
+        }
+
+        PathArc {
+            x: root.topLeftRadius + root.borderOffset
+            y: root.borderOffset
+            radiusX: topLeftBevel ? 50000 : root.topLeftRadius
+            radiusY: topLeftBevel ? 50000 : root.topLeftRadius
+            property bool add: root.drawTop && root.drawLeft
+        }
+    }
+
+    function invalidatePaths() {
+        if (!root.__completed)
+            return
+
+        for (var i = 0; i < shapes.resources.length; i++) {
+            var s = shapes.resources[i];
+            if (s.add)
+                path.pathElements.push(s)
+        }
+
+    }
+
+    property bool __completed: false
+
+    Component.onCompleted: {
+        root.__completed = true
+        invalidatePaths()
+    }
+}

playground/watchDS/testProject/imports/QtQuick/Studio/Components/FlipableItem.qml

+/****************************************************************************
+**
+** Copyright (C) 2019 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.9
+
+Flipable {
+    id: flipable
+    width: 240
+    height: 240
+
+    property alias flipAngle: rotation.angle
+    property real opacityFront: 1
+    property real opacityBack: 1
+    property int rotationalAxis: 1 // 0: x-axis, 1: y-axis
+
+    Binding {
+        target: flipable.front
+        value: opacityFront
+        property: "opacity"
+        when: flipable.front !== undefined
+    }
+
+    Binding {
+        target: flipable.back
+        value: opacityBack
+        property: "opacity"
+        when: flipable.back !== undefined
+    }
+
+    property bool flipped: false
+
+    Component.onCompleted: {
+        flipable.front = flipable.children[0]
+        flipable.back = flipable.children[1]
+    }
+
+    transform: Rotation {
+        id: rotation
+        origin.x: flipable.width/2
+        origin.y: flipable.height/2
+        axis.x: flipable.rotationalAxis === 0 ? 1 : 0
+        axis.y: flipable.rotationalAxis === 1 ? 1 : 0
+        axis.z: 0
+        angle: 0    // the default angle
+    }
+}

playground/watchDS/testProject/imports/QtQuick/Studio/Components/GroupItem.qml

+/****************************************************************************
+**
+** Copyright (C) 2019 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
+
+Item {
+    implicitWidth: Math.max(16, childrenRect.width + childrenRect.x)
+    implicitHeight: Math.max(16, childrenRect.height + childrenRect.y)
+}

playground/watchDS/testProject/imports/QtQuick/Studio/Components/IsoItem.qml

+/****************************************************************************
+**
+** Copyright (C) 2019 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 QtQuick 2.9
+import QtQuick.Extras 1.4
+
+Picture {
+
+}

playground/watchDS/testProject/imports/QtQuick/Studio/Components/PieItem.qml

+/****************************************************************************
+**
+** Copyright (C) 2019 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 QtQuick 2.9
+import QtQuick.Shapes 1.0
+
+Shape {
+    id: root
+
+    implicitWidth: 100
+    implicitHeight: 100
+
+    property alias gradient: path.fillGradient
+    property alias strokeStyle: path.strokeStyle
+    property alias strokeWidth: path.strokeWidth
+    property alias strokeColor: path.strokeColor
+    property alias dashPattern: path.dashPattern
+    property alias joinStyle: path.joinStyle
+    property alias fillColor: path.fillColor
+    property alias dashOffset: path.dashOffset
+    property alias capStyle: path.capStyle
+
+    property real begin: 0
+    property real end: 90
+
+    property real alpha: clamp(end - begin,0, 359.9)
+
+    property bool antialiasing: false
+    layer.enabled: antialiasing
+    layer.smooth: antialiasing
+    layer.textureSize: Qt.size(width * 2, height * 2)
+
+    function clamp(num, min, max) {
+        return num <= min ? min : num >= max ? max : num;
+    }
+
+    property bool hideLine: {
+        if (alpha <= 0)
+            return true
+        if (alpha >= 359)
+            return true
+        return false
+    }
+
+    function polarToCartesianX(centerX, centerY, radius, angleInDegrees) {
+        var angleInRadians = angleInDegrees * Math.PI / 180.0;
+        var x = centerX + radius * Math.cos(angleInRadians)
+        return x
+    }
+
+    function polarToCartesianY(centerX, centerY, radius, angleInDegrees) {
+        var angleInRadians = angleInDegrees * Math.PI / 180.0;
+        var y = centerY + radius * Math.sin(angleInRadians);
+        return y
+    }
+
+    ShapePath {
+        id: path
+
+        property real __xRadius: width / 2 - strokeWidth / 2
+        property real __yRadius: height / 2 - strokeWidth / 2
+
+        property real __Xcenter: width / 2
+        property real __Ycenter: height / 2
+
+        strokeColor: "transparent"
+        capStyle: ShapePath.FlatCap
+
+        strokeWidth: 1
+
+        startX: root.hideLine ? root.polarToCartesianX(path.__Xcenter, path.__Ycenter, path.__xRadius, root.begin - 90)
+                              : __Xcenter
+        startY: root.hideLine ? root.polarToCartesianY(path.__Xcenter, path.__Ycenter, path.__yRadius, root.begin - 90)
+                              : __Ycenter
+        //startX: __Xcenter
+        //startY: __Ycenter
+
+        PathLine {
+            x: root.polarToCartesianX(path.__Xcenter, path.__Ycenter, path.__xRadius, root.begin - 90)
+            y: root.polarToCartesianY(path.__Xcenter, path.__Ycenter, path.__yRadius, root.begin - 90)
+        }
+
+        PathArc {
+            id: arc
+
+            x: root.polarToCartesianX(path.__Xcenter, path.__Ycenter, path.__xRadius, root.begin + root.alpha - 90)
+            y: root.polarToCartesianY(path.__Xcenter, path.__Ycenter,  path.__yRadius, root.begin + root.alpha - 90)
+
+            radiusY: path.__yRadius;
+            radiusX: path.__xRadius;
+
+            useLargeArc: root.alpha > 180
+        }
+
+        PathLine {
+            x: root.hideLine ? root.polarToCartesianX(path.__Xcenter, path.__Ycenter, path.__xRadius, root.begin + root.alpha - 90)
+                             : path.__Xcenter
+            y: root.hideLine ? root.polarToCartesianY(path.__Xcenter, path.__Ycenter,  path.__yRadius, root.begin + root.alpha - 90)
+                             : path.__Ycenter
+        }
+    }
+}
+

playground/watchDS/testProject/imports/QtQuick/Studio/Components/RectangleItem.qml

+/****************************************************************************
+**
+** Copyright (C) 2019 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
+import QtQuick.Shapes 1.0
+
+Shape {
+    id: root
+    width: 200
+    height: 150
+
+    property int radius: 10
+
+    property int topLeftRadius: radius
+    property int bottomLeftRadius: radius
+    property int topRightRadius: radius
+    property int bottomRightRadius: radius
+
+    property alias gradient: path.fillGradient
+    property alias strokeStyle: path.strokeStyle
+    property alias strokeWidth: path.strokeWidth
+    property alias strokeColor: path.strokeColor
+    property alias dashPattern: path.dashPattern
+    property alias joinStyle: path.joinStyle
+    property alias fillColor: path.fillColor
+    property alias dashOffset: path.dashOffset
+
+    property bool bevel: false
+
+    property bool topLeftBevel: bevel
+    property bool topRightBevel: bevel
+    property bool bottomRightBevel: bevel
+    property bool bottomLeftBevel: bevel
+
+    property bool antialiasing: false
+    layer.enabled: antialiasing
+    layer.smooth: antialiasing
+    layer.textureSize: Qt.size(width * 2, height * 2)
+
+    property int borderMode: 0
+
+    property real borderOffset: {
+
+        if (root.borderMode === 0)
+            return path.strokeWidth * 10.0 / 20.0
+        if (root.borderMode === 1)
+            return 0
+
+        return -path.strokeWidth * 10.0 / 20.0
+    }
+
+
+    Item {
+        anchors.fill: parent
+        anchors.margins: {
+            if (root.borderMode === 0)
+                return 0
+            if (root.borderMode === 1)
+                return -root.strokeWidth / 2.0
+
+
+            return -root.strokeWidth
+        }
+    }
+
+    ShapePath {
+        id: path
+        joinStyle: ShapePath.MiterJoin
+
+        strokeWidth: 4
+        strokeColor: "red"
+
+        startX: root.topLeftRadius + borderOffset
+        startY: root.borderOffset
+
+        PathLine {
+            x: root.width - root.topRightRadius - root.borderOffset
+            y: root.borderOffset
+        }
+
+        PathArc {
+            x: root.width - root.borderOffset
+            y: root.topRightRadius + root.borderOffset
+
+            radiusX: root.topRightBevel ? 50000 : root.topRightRadius
+            radiusY: root.topRightBevel ? 50000 : root.topRightRadius
+        }
+
+        PathLine {
+            x: root.width - root.borderOffset
+            y: root.height - root.bottomRightRadius - root.borderOffset
+        }
+
+        PathArc {
+            x: root.width - root.bottomRightRadius - root.borderOffset
+            y: root.height - root.borderOffset
+
+            radiusX: root.bottomRightBevel ? 50000 : root.bottomRightRadius
+            radiusY: root.bottomRightBevel ? 50000 : root.bottomRightRadius
+        }
+
+        PathLine {
+            x: root.bottomLeftRadius + root.borderOffset
+            y: root.height - root.borderOffset
+        }
+
+        PathArc {
+            x: root.borderOffset
+            y: root.height - root.bottomLeftRadius - root.borderOffset
+
+            radiusX: root.bottomLeftBevel ? 50000 : root.bottomLeftRadius
+            radiusY: root.bottomLeftBevel ? 50000 : root.bottomLeftRadius
+        }
+        PathLine {
+            x: borderOffset
+            y: root.topLeftRadius + root.borderOffset
+        }
+
+        PathArc {
+            x: root.topLeftRadius + root.borderOffset
+            y: root.borderOffset
+
+            radiusX: root.topLeftBevel ? 50000 : root.topLeftRadius
+            radiusY: root.topLeftBevel ? 50000 : root.topLeftRadius
+        }
+    }
+}

playground/watchDS/testProject/imports/QtQuick/Studio/Components/SvgPathItem.qml

+/****************************************************************************
+**
+** Copyright (C) 2019 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 QtQuick.Timeline 1.0
+import QtQuick.Shapes 1.0
+
+Shape {
+    width: 200
+    height: 200
+
+    property alias gradient: shape.fillGradient
+    property alias strokeStyle: shape.strokeStyle
+    property alias strokeWidth: shape.strokeWidth
+    property alias strokeColor: shape.strokeColor
+    property alias dashPattern: shape.dashPattern
+    property alias joinStyle: shape.joinStyle
+    property alias fillColor: shape.fillColor
+    property alias path: pathSvg.path
+    property alias dashOffset: shape.dashOffset
+    property alias capStyle: shape.capStyle
+
+    property bool antialiasing: false
+    layer.enabled: antialiasing
+    layer.smooth: antialiasing
+    layer.textureSize: Qt.size(width * 2, height * 2)
+
+    id: svgPathItem
+
+    ShapePath {
+        id: shape
+        strokeWidth: 4
+        strokeColor: "red"
+        joinStyle: ShapePath.MiterJoin
+
+        PathSvg {
+            id: pathSvg
+
+            path: "M91,70.6c4.6,0,8.6,2.4,10.9,6.3l19.8,34.2c2.3,3.9,2.3,8.7,0,12.6c-2.3,3.9-6.4,6.3-10.9,6.3H71.2 c-4.6,0-8.6-2.4-10.9-6.3c-2.3-3.9-2.3-8.7,0-12.6l19.8-34.2C82.4,72.9,86.4,70.6,91,70.6z"
+        }
+    }
+}

playground/watchDS/testProject/imports/QtQuick/Studio/Components/TriangleItem.qml

+/****************************************************************************
+**
+** Copyright (C) 2019 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 QtQuick 2.9
+import QtQuick.Shapes 1.0
+
+Shape {
+    id: root
+
+    implicitWidth: 100
+    implicitHeight: 100
+
+    property alias gradient: path.fillGradient
+    property alias strokeStyle: path.strokeStyle
+    property alias strokeWidth: path.strokeWidth
+    property alias strokeColor: path.strokeColor
+    property alias dashPattern: path.dashPattern
+    property alias joinStyle: path.joinStyle
+    property alias fillColor: path.fillColor
+    property alias dashOffset: path.dashOffset
+
+    property int pLineXStart
+    property int pLineXEnd
+    property int pLineYStart
+    property int pLineYEnd
+
+    property point topIntersection1
+    property point topIntersection2
+    property point leftIntersection1
+    property point leftIntersection2
+    property point rightIntersection1
+    property point rightIntersection2
+
+    property int radius: 5
+    property real arcRadius: radius
+
+    property real leftMargin: 0
+    property real topMargin: 0
+
+    property real rightMargin: 0
+    property real bottomMargin: 0
+
+    property bool antialiasing: false
+    layer.enabled: antialiasing
+    layer.smooth: antialiasing
+    layer.textureSize: Qt.size(width * 2, height * 2)
+
+    ShapePath {
+        id: path
+
+        property real __width: root.width - root.strokeWidth - root.leftMargin - root.rightMargin
+        property real __height: root.height - root.strokeWidth - root.topMargin - root.bottomMargin
+        property real xOffset: root.strokeWidth / 2 + root.leftMargin
+        property real yOffset: root.strokeWidth / 2 + root.topMargin
+
+        strokeColor: "transparent"
+        strokeWidth: 1
+        capStyle: ShapePath.FlatCap
+        joinStyle: ShapePath.MiterJoin
+
+        startX: root.topIntersection1.x + path.xOffset
+        startY: root.topIntersection1.y + path.yOffset
+
+        PathArc {
+            radiusX: root.arcRadius
+            radiusY: root.arcRadius
+
+            x: root.topIntersection2.x + path.xOffset
+            y: root.topIntersection2.y + path.yOffset
+
+        }
+
+        PathLine {
+            x: root.rightIntersection1.x + path.xOffset
+            y: root.rightIntersection1.y + path.yOffset
+        }
+
+        PathArc {
+            radiusX: root.arcRadius
+            radiusY: root.arcRadius
+
+            x: root.rightIntersection2.x + path.xOffset
+            y: root.rightIntersection2.y + path.yOffset
+        }
+
+        PathLine {
+            x: root.leftIntersection1.x + path.xOffset
+            y: root.leftIntersection1.y + path.yOffset
+        }
+
+        PathArc {
+            radiusX: root.arcRadius
+            radiusY: root.arcRadius
+
+            x: root.leftIntersection2.x + path.xOffset
+            y: root.leftIntersection2.y + path.yOffset
+        }
+
+        PathLine {
+            x: root.topIntersection1.x + path.xOffset
+            y: root.topIntersection1.y + path.yOffset
+        }
+
+
+
+    }
+
+    onWidthChanged: calc()
+
+    onHeightChanged: calc()
+
+    onRadiusChanged: calc()
+    onArcRadiusChanged: calc()
+
+    onTopMarginChanged: calc()
+    onBottomMarginChanged: calc()
+    onLeftMarginChanged: calc()
+    onRightMarginChanged: calc()
+
+    Component.onCompleted: root.calc()
+
+    function normalize(x, y)
+    {
+        var length = Math.sqrt(x*x+y*y)
+
+        return {
+            x: x / length,
+            y: y / length
+        }
+    }
+
+    function dotProduct(x1, y1, x2, y2)
+    {
+        return x1 * x2 + y1 * y2;
+    }
+
+    function project(x1, y1, x2, y2)
+    {
+        var normalized = normalize(x1, y1)
+
+        var dot = dotProduct(normalized.x, normalized.y, x2, y2)
+
+        return {
+            x: normalized.x * dot,
+            y: normalized.y * dot
+        }
+    }
+
+    function intersect(x1, y1, x2, y2, x3, y3, x4, y4)
+    {
+        var denom = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1)
+
+        var ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denom
+        var ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denom
+        return {
+            x: x1 + ua * (x2 - x1),
+            y: y1 + ua * (y2 - y1)
+        };
+    }
+
+    function moveLine(startX, startY, endX, endY)
+    {
+        var angle = Math.atan2(endY - startY, endX - startX)
+        var xOffset = Math.sin(angle) * root.radius
+        var yOffset = -Math.cos(angle) * root.radius
+
+        return {
+            startX: startX + xOffset,
+            startY: startY + yOffset,
+            endX: endX + xOffset,
+            endY: endY + yOffset
+        };
+    }
+
+    function calc() {
+        var movedLine1 = moveLine(path.__width / 2, 0, 0, path.__height)
+
+        var movedLine2 = moveLine(path.__width, path.__height, path.__width / 2, 0)
+
+        var movedLine3 = moveLine(0, path.__height, path.__width, path.__height)
+
+        var intersectionTop = intersect(movedLine1.startX, movedLine1.startY, movedLine1.endX, movedLine1.endY,
+                                        movedLine2.startX, movedLine2.startY, movedLine2.endX, movedLine2.endY)
+
+        var intersectionLeft = intersect(movedLine1.startX, movedLine1.startY, movedLine1.endX, movedLine1.endY,
+                                         movedLine3.startX, movedLine3.startY, movedLine3.endX, movedLine3.endY)
+
+        var intersectionRight = intersect(movedLine2.startX, movedLine2.startY, movedLine2.endX, movedLine2.endY,
+                                          movedLine3.startX, movedLine3.startY, movedLine3.endX, movedLine3.endY)
+
+        var leftBottom = project(1, 0, intersectionLeft.x, intersectionLeft.y)
+
+        var rightBottom = project(1, 0, intersectionRight.x, intersectionRight.y)
+
+        root.leftIntersection1 = Qt.point(leftBottom.x, leftBottom.y + path.__height)
+        root.rightIntersection2 = Qt.point(rightBottom.x, rightBottom.y + path.__height)
+
+        var leftTop = project(-path.__width / 2 , path.__height, intersectionTop.x - path.__width / 2, intersectionTop.y)
+
+        leftBottom = project(-path.__width / 2 , path.__height, intersectionLeft.x - path.__width / 2, intersectionLeft.y)
+
+        root.leftIntersection2 = Qt.point(leftBottom.x + path.__width / 2, leftBottom.y)
+        root.topIntersection1 = Qt.point(leftTop.x + path.__width / 2, leftTop.y)
+
+        var rightTop = project(path.__width / 2 , path.__height, intersectionTop.x - path.__width / 2, intersectionTop.y)
+
+        rightBottom = project(path.__width / 2 , path.__height, intersectionRight.x - path.__width / 2, intersectionRight.y)
+
+        root.topIntersection2 = Qt.point(rightTop.x + path.__width / 2, rightTop.y)
+        root.rightIntersection1 = Qt.point(rightBottom.x + path.__width / 2, rightBottom.y)
+    }
+
+}

playground/watchDS/testProject/imports/QtQuick/Studio/Components/designer/ArcItemSpecifics.qml

+import QtQuick 2.0
+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("Fill Color")
+
+        ColorEditor {
+            caption: qsTr("Fill Color")
+            backendValue: backendValues.fillColor
+            supportGradient: true
+            shapeGradients: true
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Stroke Color")
+
+        ColorEditor {
+            caption: qsTr("Stroke Color")
+            backendValue: backendValues.strokeColor
+            supportGradient: false
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Stroke Details")
+
+        SectionLayout {
+            rows: 2
+
+            Label {
+                text: qsTr("Stroke Width")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.strokeWidth
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 200
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("Begin")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.begin
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: -360
+                    maximumValue: 360
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("End")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.end
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: -360
+                    maximumValue: 360
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("Stroke Style")
+            }
+            SecondColumnLayout {
+                ComboBox {
+                    id: strokeStyle
+                    model: ["None", "Solid", "Dash", "Dot", "Dash Dot", "Dash Dot Dot"]
+                    backendValue: backendValues.strokeStyle
+                    Layout.fillWidth: true
+                    useInteger: true
+                }
+            }
+
+            Label {
+                Layout.alignment: Qt.AlignTop | Qt.AlignLeft
+                text: qsTr("Dash Pattern")
+            }
+            DashPatternEditor {
+                enableEditors: strokeStyle.currentIndex === 2
+            }
+
+            Label {
+                text: qsTr("Cap Style")
+            }
+            SecondColumnLayout {
+                CapComboBox {
+                }
+            }
+
+            Label {
+                text: qsTr("Dash Offset")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.dashOffset
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 1000
+                    stepSize: 1
+                }
+            }
+
+            Label {
+                text: qsTr("Anti Aliasing")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    backendValue: backendValues.antialiasing
+                    text: qsTr("Anti Aliasing")
+                }
+                ExpandingSpacer {
+                }
+            }
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Outline")
+        SectionLayout {
+            rows: 2
+
+            Label {
+                text: qsTr("Full Outline")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    backendValue: backendValues.outlineArc
+                    text: backendValues.outlineArc.valueToString
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("Arc Outline Width")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.arcWidth
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 1000
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("Arc Outline Begin")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.arcWidthBegin
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 1000
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("Arc Outline End")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.arcWidthEnd
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 1000
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("Round Outline")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    backendValue: backendValues.round
+                    text: backendValues.round.valueToString
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("Round Begin Outline")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    backendValue: backendValues.roundBegin
+                    text: backendValues.roundBegin.valueToString
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("Round End Outline")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    backendValue: backendValues.roundEnd
+                    text: backendValues.roundEnd.valueToString
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("Radius Inner Adjust")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.radiusInnerAdjust
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 1000
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("Radius Outer Adjust")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.radiusOuterAdjust
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 1000
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+        }
+    }
+}

playground/watchDS/testProject/imports/QtQuick/Studio/Components/designer/BevelSection.qml

+import QtQuick 2.0
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.0
+
+
+Section {
+    anchors.left: parent.left
+    anchors.right: parent.right
+    caption: qsTr("Corner Bevel")
+
+    SectionLayout {
+        rows: 2
+
+        Label {
+            text: qsTr("Bevel")
+        }
+        SecondColumnLayout {
+            CheckBox {
+                backendValue: backendValues.bevel
+                text: backendValues.bevel.value
+            }
+            ExpandingSpacer {
+
+            }
+        }
+
+        Label {
+            text: qsTr("Top Left Bevel")
+        }
+        SecondColumnLayout {
+            CheckBox {
+                backendValue: backendValues.topLeftBevel
+                text: backendValues.topLeftBevel.value
+            }
+            ExpandingSpacer {
+
+            }
+        }
+
+        Label {
+            text: qsTr("Top Right Bevel")
+        }
+        SecondColumnLayout {
+            CheckBox {
+                backendValue: backendValues.topRightBevel
+                text: backendValues.topRightBevel.value
+            }
+            ExpandingSpacer {
+
+            }
+        }
+
+        Label {
+            text: qsTr("Bottom Right Bevel")
+        }
+        SecondColumnLayout {
+            CheckBox {
+                backendValue: backendValues.bottomRightBevel
+                text: backendValues.bottomRightBevel.value
+            }
+            ExpandingSpacer {
+
+            }
+        }
+
+        Label {
+            text: qsTr("Bottom Left Bevel")
+        }
+        SecondColumnLayout {
+            CheckBox {
+                backendValue: backendValues.bottomLeftBevel
+                text: backendValues.bottomLeftBevel.value
+            }
+            ExpandingSpacer {
+
+            }
+        }
+    }
+}

playground/watchDS/testProject/imports/QtQuick/Studio/Components/designer/BorderItemSpecifics.qml

+import QtQuick 2.0
+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("Stroke Color")
+
+        ColorEditor {
+            caption: qsTr("Stroke Color")
+            backendValue: backendValues.strokeColor
+            supportGradient: false
+        }
+    }
+
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Radiuses")
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("Radius")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.radius
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 200
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+            Label {
+                text: qsTr("Top Left Radius")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.topLeftRadius
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 200
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("Top Right Radius")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.topRightRadius
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 200
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("Bottom Right Radius")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.bottomRightRadius
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 200
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("Bottom Left Radius")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.bottomLeftRadius
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 200
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+        }
+    }
+
+    BevelSection {
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Draw Edges")
+
+        SectionLayout {
+            rows: 2
+
+            Label {
+                text: qsTr("Draw Top")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    backendValue: backendValues.drawTop
+                    text: qsTr("draw the top border")
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("Draw Right")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    backendValue: backendValues.drawRight
+                    text: qsTr("draw the right border")
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("Draw Bottom")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    backendValue: backendValues.drawBottom
+                    text: qsTr("draw the bottom border")
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("Draw Left")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    backendValue: backendValues.drawLeft
+                    text: qsTr("draw the left border")
+                }
+                ExpandingSpacer {
+                }
+            }
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Stroke Details")
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("Stroke Width")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.strokeWidth
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 200
+                    stepSize: 1
+                }
+            }
+
+            Label {
+                text: qsTr("Border Mode")
+            }
+
+            SecondColumnLayout {
+                BorderModeComboBox {
+                }
+            }
+
+            Label {
+                text: qsTr("Stroke Style")
+            }
+
+            SecondColumnLayout {
+                ComboBox {
+                    id: strokeStyle
+                    model: ["None", "Solid", "Dash", "Dot", "Dash Dot", "Dash Dot Dot"]
+                    backendValue: backendValues.strokeStyle
+                    Layout.fillWidth: true
+                    useInteger: true
+                }
+            }
+
+            Label {
+                Layout.alignment: Qt.AlignTop | Qt.AlignLeft
+                text: qsTr("Dash Pattern")
+            }
+
+            DashPatternEditor {
+                enableEditors: strokeStyle.currentIndex === 2
+            }
+
+            Label {
+                text: qsTr("Joint Style")
+            }
+
+            SecondColumnLayout {
+                ComboBox {
+                    model: ["Miter Join", "Bevel Join", "Round Join"]
+                    backendValue: backendValues.joinStyle
+                    Layout.fillWidth: true
+                    useInteger: true
+                }
+            }
+
+            Label {
+                text: qsTr("Cap Style")
+            }
+
+            SecondColumnLayout {
+                CapComboBox {
+                }
+            }
+
+            Label {
+                text: qsTr("Dash Offset")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.dashOffset
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 1000
+                    stepSize: 1
+                }
+            }
+
+            Label {
+                text: qsTr("Anti Aliasing")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    backendValue: backendValues.antialiasing
+                    text: qsTr("Anti Aliasing")
+                }
+                ExpandingSpacer {
+                }
+            }
+        }
+    }
+}

playground/watchDS/testProject/imports/QtQuick/Studio/Components/designer/BorderModeComboBox.qml

+import QtQuick 2.0
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.0
+
+ComboBox {
+    model: ["Inside", "Middle", "Outside"]
+    backendValue: backendValues.borderMode
+    Layout.fillWidth: true
+    useInteger: true
+    manualMapping: true
+
+    property bool block: false
+
+    onValueFromBackendChanged: fromBackendToFrontend()
+
+    onCurrentTextChanged: {
+        if (!__isCompleted)
+            return
+
+        if (block)
+            return
+
+        if (currentText === "Inside")
+            backendValues.borderMode.value = 0
+
+        if (currentText === "Middle")
+            backendValues.borderMode.value = 1
+
+        if (currentText === "Outside")
+            backendValues.borderMode.value = 2
+    }
+
+    Connections {
+        target: modelNodeBackend
+        onSelectionChanged: fromBackendToFrontend()
+    }
+
+    function fromBackendToFrontend()
+    {
+        if (!__isCompleted)
+            return
+
+        block = true
+
+        if (backendValues.borderMode.value === 0)
+            currentIndex = 0
+        if (backendValues.borderMode.value === 1)
+            currentIndex = 1
+        if (backendValues.borderMode.value === 2)
+            currentIndex = 2
+
+        block = false
+    }
+}

playground/watchDS/testProject/imports/QtQuick/Studio/Components/designer/CapComboBox.qml

+import QtQuick 2.0
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.0
+
+ComboBox {
+    model: ["FlatCap", "SquareCap", "RoundCap"]
+    backendValue: backendValues.capStyle
+    Layout.fillWidth: true
+    useInteger: true
+    manualMapping: true
+
+    property bool block: false
+
+    onValueFromBackendChanged: fromBackendToFrontend()
+
+    onCurrentTextChanged: {
+        if (!__isCompleted)
+            return
+
+        if (block)
+            return
+
+        if (currentText === "FlatCap")
+            backendValues.capStyle.value = 0
+
+        if (currentText === "SquareCap")
+            backendValues.capStyle.value = 16
+
+        if (currentText === "RoundCap")
+            backendValues.capStyle.value = 32
+    }
+
+    Connections {
+        target: modelNodeBackend
+        onSelectionChanged: fromBackendToFrontend()
+    }
+
+    function fromBackendToFrontend()
+    {
+        if (!__isCompleted)
+            return
+
+        block = true
+
+        if (backendValues.capStyle.value === 0)
+            currentIndex = 0
+        if (backendValues.capStyle.value === 16)
+            currentIndex = 1
+        if (backendValues.capStyle.value === 32)
+            currentIndex = 2
+
+        block = false
+    }
+}

playground/watchDS/testProject/imports/QtQuick/Studio/Components/designer/DashPatternEditor.qml

+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+import HelperWidgets 2.0
+import QtQuickDesignerTheme 1.0
+
+GridLayout {
+    id: root
+    Layout.fillWidth: true
+    rowSpacing: 2
+    columnSpacing: 6
+    rows: 2
+    columns: 5
+
+    property bool __block: false
+    property int labelWidth: 32
+    property bool enableEditors: true
+    property variant backendValue: backendValues.dashPattern
+    property string expression: backendValue.expression
+
+    onExpressionChanged: root.parseExpression()
+
+    function createArray() {
+        if (root.__block)
+            return
+
+        var array = []
+        array.push(dash01.value)
+        array.push(gap01.value)
+        array.push(dash02.value)
+        array.push(gap02.value)
+
+        root.__block = true
+        root.backendValue.expression = '[' + array.toString() + ']'
+        root.__block = false
+    }
+
+    function parseExpression() {
+        if (root.__block)
+            return
+
+        root.__block = true
+
+        dash01.value = 0
+        gap01.value = 0
+        dash02.value = 0
+        gap02.value = 0
+
+        var array = backendValue.expression.toString()
+        array = array.replace("[", "")
+        array = array.replace("]", "")
+        array = array.split(',')
+
+        try {
+            dash01.value = array[0]
+            gap01.value = array[1]
+            dash02.value = array[2]
+            gap02.value = array[3]
+        } catch (err) {
+        }
+
+        root.__block = false
+    }
+
+    Connections {
+        target: modelNodeBackend
+        onSelectionChanged: parseExpression()
+    }
+
+    ExtendedFunctionLogic {
+        id: extFuncLogic
+        backendValue: root.backendValue
+    }
+
+    ActionIndicator {
+        id: actionIndicator
+
+        enabled: root.enableEditors
+        icon.color: extFuncLogic.color
+        icon.text: extFuncLogic.glyph
+        onClicked: extFuncLogic.show()
+    }
+
+    Label {
+        text: qsTr("Dash")
+        color: Theme.color(Theme.PanelTextColorLight)
+        elide: Text.ElideRight
+        width: root.labelWidth
+    }
+
+    DoubleSpinBox {
+        id: dash01
+
+        enabled: root.enableEditors
+        property color textColor: colorLogic.textColor
+        ColorLogic {
+            id: colorLogic
+            backendValue: backendValues.dashPattern
+        }
+        onValueChanged: root.createArray()
+        maximumValue: 1000
+        Layout.fillWidth: true
+    }
+
+    Label {
+        text: qsTr("Gap")
+        color: Theme.color(Theme.PanelTextColorLight)
+        elide: Text.ElideRight
+        width: root.labelWidth
+    }
+
+    DoubleSpinBox {
+        id: gap01
+
+        enabled: root.enableEditors
+        property color textColor: colorLogic.textColor
+
+        onValueChanged: root.createArray()
+        maximumValue: 1000
+        Layout.fillWidth: true
+    }
+
+    Item {
+        width: actionIndicator.width
+    }
+
+    Label {
+        text: qsTr("Dash")
+        color: Theme.color(Theme.PanelTextColorLight)
+        elide: Text.ElideRight
+        width: root.labelWidth
+    }
+
+    DoubleSpinBox {
+        id: dash02
+
+        enabled: root.enableEditors
+        property color textColor: colorLogic.textColor
+
+        onValueChanged: root.createArray()
+        maximumValue: 1000
+        Layout.fillWidth: true
+    }
+
+    Label {
+        text: qsTr("Gap")
+        color: Theme.color(Theme.PanelTextColorLight)
+        elide: Text.ElideRight
+        width: root.labelWidth
+    }
+
+    DoubleSpinBox {
+        id: gap02
+
+        enabled: root.enableEditors
+        property color textColor: colorLogic.textColor
+
+        onValueChanged: root.createArray()
+        maximumValue: 1000
+        Layout.fillWidth: true
+    }
+}

playground/watchDS/testProject/imports/QtQuick/Studio/Components/designer/FlipableItemSpecifics.qml

+import QtQuick 2.0
+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("Flipped Status")
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("Rotational Axis")
+            }
+            SecondColumnLayout {
+                ComboBox {
+                    model: ["X Axis", "Y Axis"]
+                    backendValue: backendValues.rotationalAxis
+                    Layout.fillWidth: true
+                    useInteger: true
+                }
+            }
+
+            Label {
+                text: qsTr("Flip Angle")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.flipAngle
+                    Layout.preferredWidth: 80
+                    minimumValue: -360
+                    maximumValue: 360
+                    stepSize: 10
+                }
+                ExpandingSpacer {
+
+                }
+            }
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Opacity")
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("Opacity Front")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.opacityFront
+                    Layout.preferredWidth: 80
+                    decimals: 2
+                    minimumValue: 0
+                    maximumValue: 1
+                    stepSize: 0.1
+                }
+                ExpandingSpacer {
+                }
+            }
+            Label {
+                text: qsTr("Opacity Back")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.opacityBack
+                    Layout.preferredWidth: 80
+                    decimals: 2
+                    minimumValue: 0
+                    maximumValue: 1
+                    stepSize: 0.1
+                }
+                ExpandingSpacer {
+                }
+            }
+        }
+    }
+}