Components: Add EllipseItem

* Add item library images
* Add new EllipseItem

Task-number: QDS-5179
Change-Id: I0b7df2d405b64acc30f02810a0382be328d21f4d
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

9 files changed, 349 insertions, 30 deletions

diff --git a/src/imports/components/EllipseItem.qml b/src/imports/components/EllipseItem.qml
new file mode 100644
index 0000000..9e0d6a6
--- /dev/null
+++ b/src/imports/components/EllipseItem.qml
@@ -0,0 +1,201 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Studio 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
+
+/*!
+    \qmltype EllipseItem
+    \inqmlmodule QtQuick.Studio.Components
+    \since QtQuick.Studio.Components 1.0
+    \inherits Shape
+
+    \brief A filled ellipse with an optional border.
+*/
+
+Shape {
+    id: root
+    width: 200
+    height: 150
+
+/*!
+    The gradient of the rectangle fill color.
+
+    By default, no gradient is enabled and the value is null. In this case, the
+    fill uses a solid color based on the value of \l fillColor.
+
+    When set, \l fillColor is ignored and filling is done using one of the
+    \l ShapeGradient subtypes.
+
+    \note The \l Gradient type cannot be used here. Rather, prefer using one of
+    the advanced subtypes, like \l LinearGradient.
+*/
+    property alias gradient: path.fillGradient
+
+/*!
+    The style of the rectangle border.
+
+    \value ShapePath.SolidLine
+           A solid line. This is the default value.
+    \value ShapePath.DashLine
+           Dashes separated by a few pixels.
+           The \l dashPattern property specifies the dash pattern.
+
+    \sa Qt::PenStyle
+*/
+    property alias strokeStyle: path.strokeStyle
+
+/*!
+    The width of the border of the rectangle.
+
+    The default value is 4.
+
+    A width of 1 creates a thin line. For no line, use a negative value or a
+    transparent color.
+
+    \note The width of the rectangle's border does not affect the geometry of
+    the rectangle itself or its position relative to other items if anchors are
+    used.
+
+    The border is rendered within the rectangle's boundaries.
+*/
+    property alias strokeWidth: path.strokeWidth
+
+/*!
+    The color used to draw the border of the rectangle.
+
+    When set to \c transparent, no line is drawn.
+
+    The default value is \c red.
+
+    \sa QColor
+*/
+    property alias strokeColor: path.strokeColor
+
+/*!
+    The dash pattern of the rectangle border specified as the dashes and the
+    gaps between them.
+
+    The dash pattern is specified in units of the pen's width. That is, a dash
+    with the length 5 and width 10 is 50 pixels long.
+
+    The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels
+    followed by a space of 2 * \l strokeWidth pixels.
+
+    \sa QPen::setDashPattern()
+*/
+    property alias dashPattern: path.dashPattern
+
+/*!
+    The rectangle fill color.
+
+    A gradient for the fill can be specified by using \l gradient. If both a
+    color and a gradient are specified, the gradient is used.
+
+    When set to \c transparent, no filling occurs.
+
+    The default value is \c white.
+*/
+    property alias fillColor: path.fillColor
+
+/*!
+    The starting point of the dash pattern for the rectangle border.
+
+    The offset is measured in terms of the units used to specify the dash
+    pattern. For example, a pattern where each stroke is four units long,
+    followed by a gap of two units, will begin with the stroke when drawn
+    as a line. However, if the dash offset is set to 4.0, any line drawn
+    will begin with the gap. Values of the offset up to 4.0 will cause part
+    of the stroke to be drawn first, and values of the offset between 4.0 and
+    6.0 will cause the line to begin with part of the gap.
+
+    The default value is 0.
+
+    \sa QPen::setDashOffset()
+*/
+    property alias dashOffset: path.dashOffset
+
+    layer.enabled: root.antialiasing
+    layer.smooth: root.antialiasing
+    layer.textureSize: Qt.size(root.width * 2, root.height * 2)
+
+/*!
+    The border is rendered within the rectangle's boundaries, outside of them,
+    or on top of them.
+*/
+    property int borderMode: 0
+
+    property real borderOffset: {
+        if (root.borderMode === 0)
+            return root.strokeWidth * 0.5
+        if (root.borderMode === 1)
+            return 0
+
+        return -root.strokeWidth * 0.5
+    }
+
+    Item {
+        anchors.fill: parent
+        anchors.margins: {
+            if (root.borderMode === 0)
+                return 0
+            if (root.borderMode === 1)
+                return -root.strokeWidth * 0.5
+
+            return -root.strokeWidth
+        }
+    }
+
+    ShapePath {
+        id: path
+
+        joinStyle: ShapePath.MiterJoin
+        strokeWidth: 4
+        strokeColor: "red"
+        startX: root.width * 0.5
+        startY: root.borderOffset
+
+        PathArc {
+            x: path.startX
+            y: root.height - root.borderOffset
+            radiusX: root.width * 0.5 - root.borderOffset
+            radiusY: root.height * 0.5 - root.borderOffset
+            useLargeArc: true
+        }
+
+        PathArc {
+            x: path.startX
+            y: path.startY
+            radiusX: root.width * 0.5 - root.borderOffset
+            radiusY: root.height * 0.5 - root.borderOffset
+            useLargeArc: true
+        }
+
+    }
+}
diff --git a/src/imports/components/components.pri b/src/imports/components/components.pri
index 2406587..72d1681 100644
--- a/src/imports/components/components.pri
+++ b/src/imports/components/components.pri
@@ -1,6 +1,7 @@
 QML_FILES += \
     $$PWD/ArcItem.qml \
     $$PWD/BorderItem.qml \
+    $$PWD/EllipseItem.qml \
     $$PWD/FlipableItem.qml \
     $$PWD/IsoItem.qml \
     $$PWD/PieItem.qml \
diff --git a/src/imports/components/designer/EllipseItemSpecifics.qml b/src/imports/components/designer/EllipseItemSpecifics.qml
new file mode 100644
index 0000000..2576fd2
--- /dev/null
+++ b/src/imports/components/designer/EllipseItemSpecifics.qml
@@ -0,0 +1,104 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 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.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Rectangle Item")
+
+        SectionLayout {
+            PropertyLabel { text: qsTr("Fill color") }
+
+            ColorEditor {
+                backendValue: backendValues.fillColor
+                supportGradient: true
+                shapeGradients: true
+            }
+
+            PropertyLabel { text: qsTr("Stroke color") }
+
+            ColorEditor {
+                backendValue: backendValues.strokeColor
+                supportGradient: false
+            }
+
+            PropertyLabel { text: qsTr("Stroke width") }
+
+            SecondColumnLayout {
+                SpinBox {
+                    id: strokeWidthSpin
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.strokeWidth
+                    decimals: 1
+                    minimumValue: -1
+                    maximumValue: 200
+                    stepSize: 1
+                }
+
+                Spacer {
+                    implicitWidth: StudioTheme.Values.twoControlColumnGap
+                                   + StudioTheme.Values.actionIndicatorWidth
+                }
+
+                CheckBox {
+                    id: strokeWidthCheck
+                    text: qsTr("Hide")
+                    checked: (backendValues.strokeWidth.value >= 0 ? false : true)
+                    actionIndicator.visible: false
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+
+                    onCheckedChanged: {
+                        if (strokeWidthCheck.checked === true)
+                            backendValues.strokeWidth.value = -1
+                        else
+                            backendValues.strokeWidth.value = ((backendValues.strokeWidth.value < 0) ? 4 : backendValues.strokeWidth.value)
+                    }
+                }
+
+                ExpandingSpacer {}
+            }
+        }
+    }
+
+    StrokeDetailsSection {
+        showBorderMode: true
+        showJoinStyle: false
+        showCapStyle: false
+    }
+}
diff --git a/src/imports/components/designer/components.metainfo b/src/imports/components/designer/components.metainfo
index a7dbcb9..adbd724 100644
--- a/src/imports/components/designer/components.metainfo
+++ b/src/imports/components/designer/components.metainfo
@@ -11,6 +11,7 @@ MetaInfo {
             requiredImport: "QtQuick.Studio.Components"
         }
     }
+
     Type {
         name: "QtQuick.Studio.Components.ArcItem"
         icon: "images/item-arc-16px.png"
@@ -24,6 +25,7 @@ MetaInfo {
             Property { name: "fillColor"; type: "QColor"; value: "transparent"; }
         }
     }
+
     Type {
         name: "QtQuick.Studio.Components.PieItem"
         icon: "images/item-pie-16px.png"
@@ -34,9 +36,9 @@ MetaInfo {
             libraryIcon: "images/item-pie-24px.png"
             version: "1.0"
             requiredImport: "QtQuick.Studio.Components"
-
         }
     }
+
     Type {
         name: "QtQuick.Studio.Components.TriangleItem"
         icon: "images/item-triangle-16px.png"
@@ -47,9 +49,9 @@ MetaInfo {
             libraryIcon: "images/item-triangle-24px.png"
             version: "1.0"
             requiredImport: "QtQuick.Studio.Components"
-
         }
     }
+
     Type {
         name: "QtQuick.Studio.Components.SvgPathItem"
         icon: "images/item-svg-16px.png"
@@ -60,9 +62,9 @@ MetaInfo {
             libraryIcon: "images/item-svg-24px.png"
             version: "1.0"
             requiredImport: "QtQuick.Studio.Components"
-
         }
     }
+
     Type {
         name: "QtQuick.Studio.Components.FlipableItem"
         icon: "images/item-flippable-16px.png"
@@ -73,36 +75,47 @@ MetaInfo {
             libraryIcon: "images/item-flippable-24px.png"
             version: "1.0"
             requiredImport: "QtQuick.Studio.Components"
-
         }
     }
 
-Type {
-    name: "QtQuick.Studio.Components.RectangleItem"
-    icon: "images/custom-rectangle-16px.png"
+    Type {
+        name: "QtQuick.Studio.Components.RectangleItem"
+        icon: "images/custom-rectangle-16px.png"
 
-    ItemLibraryEntry {
-        name: "Rectangle"
-        category: "Studio Components"
-        libraryIcon: "images/custom-rectangle-24px.png"
-        version: "1.0"
-        requiredImport: "QtQuick.Studio.Components"
+        ItemLibraryEntry {
+            name: "Rectangle"
+            category: "Studio Components"
+            libraryIcon: "images/custom-rectangle-24px.png"
+            version: "1.0"
+            requiredImport: "QtQuick.Studio.Components"
+        }
+    }
+
+    Type {
+        name: "QtQuick.Studio.Components.RegularPolygonItem"
+        icon: "images/polygon-16px.png"
 
+        ItemLibraryEntry {
+            name: "Regular Polygon"
+            category: "Studio Components"
+            libraryIcon: "images/polygon-24px.png"
+            version: "1.0"
+            requiredImport: "QtQuick.Studio.Components"
+        }
     }
-}
 
-Type {
-    name: "QtQuick.Studio.Components.RegularPolygonItem"
-    icon: "images/polygon-16px.png"
+    Type {
+        name: "QtQuick.Studio.Components.EllipseItem"
+        icon: "images/ellipse-16px.png"
 
-    ItemLibraryEntry {
-        name: "Regular Polygon"
-        category: "Studio Components"
-        libraryIcon: "images/polygon-24px.png"
-        version: "1.0"
-        requiredImport: "QtQuick.Studio.Components"
+        ItemLibraryEntry {
+            name: "Ellipse"
+            category: "Studio Components"
+            libraryIcon: "images/ellipse-24px.png"
+            version: "1.0"
+            requiredImport: "QtQuick.Studio.Components"
+        }
     }
-}
 
     Type {
         name: "QtQuick.Studio.Components.BorderItem"
@@ -114,7 +127,6 @@ Type {
             libraryIcon: "images/custom-border-24px.png"
             version: "1.0"
             requiredImport: "QtQuick.Studio.Components"
-
         }
     }
 
@@ -128,9 +140,9 @@ Type {
             libraryIcon: "images/iso-icons-24px.png"
             version: "1.0"
             requiredImport: "QtQuick.Studio.Components"
-
         }
     }
+
     Type {
         name: "QtQuick.Studio.Components.ArcArrow"
         icon: "images/item-arrow-arc-16px.png"
@@ -141,7 +153,6 @@ Type {
             libraryIcon: "images/item-arrow-arc-24px.png"
             version: "1.0"
             requiredImport: "QtQuick.Studio.Components"
-
         }
     }
 
@@ -154,7 +165,6 @@ Type {
             libraryIcon: "images/item-arrow-left-24px.png"
             version: "1.0"
             requiredImport: "QtQuick.Studio.Components"
-
         }
         ItemLibraryEntry {
             name: "Right"
@@ -247,7 +257,6 @@ Type {
             Property { name: "corner"; type: "bool"; value: "true"; }
             Property { name: "flipCorner"; type: "bool"; value: "true"; }
         }
-
         ItemLibraryEntry {
             name: "Right Down"
             category: "Studio Components Arrows"
@@ -260,5 +269,4 @@ Type {
             Property { name: "flipCorner"; type: "bool"; value: "true"; }
         }
     }
-
 }
diff --git a/src/imports/components/designer/designer.pri b/src/imports/components/designer/designer.pri
index 13db20e..8238992 100644
--- a/src/imports/components/designer/designer.pri
+++ b/src/imports/components/designer/designer.pri
@@ -9,6 +9,7 @@ AUX_QML_FILES += \
     $$PWD/CapComboBox.qml \
     $$PWD/CornerRadiusSection.qml \
     $$PWD/DashPatternEditor.qml \
+    $$PWD/EllipseItemSpecifics.qml \
     $$PWD/FlipableItemSpecifics.qml \
     $$PWD/GroupItemSpecifics.qml \
     $$PWD/IsoItemSpecifics.qml \
@@ -50,6 +51,9 @@ AUX_QML_FILES += \
     $$PWD/images/polygon-16px.png \
     $$PWD/images/polygon-24px.png \
     $$PWD/images/polygon-24px@2x.png \
+    $$PWD/images/ellipse-16px.png \
+    $$PWD/images/ellipse-24px.png \
+    $$PWD/images/ellipse-24px@2x.png \
     $$PWD/images/item-arrow-16px.png \
     $$PWD/images/item-arrow-arc-16px.png \
     $$PWD/images/item-arrow-arc-24px.png \
diff --git a/src/imports/components/designer/images/ellipse-16px.png b/src/imports/components/designer/images/ellipse-16px.png
new file mode 100644
index 0000000..ab0e225
--- /dev/null
+++ b/src/imports/components/designer/images/ellipse-16px.png
diff --git a/src/imports/components/designer/images/ellipse-24px.png b/src/imports/components/designer/images/ellipse-24px.png
new file mode 100644
index 0000000..559551e
--- /dev/null
+++ b/src/imports/components/designer/images/ellipse-24px.png
diff --git a/src/imports/components/designer/images/ellipse-24px@2x.png b/src/imports/components/designer/images/ellipse-24px@2x.png
new file mode 100644
index 0000000..438de3f
--- /dev/null
+++ b/src/imports/components/designer/images/ellipse-24px@2x.png
diff --git a/src/imports/components/qmldir b/src/imports/components/qmldir
index 38c358b..4fdc28d 100644
--- a/src/imports/components/qmldir
+++ b/src/imports/components/qmldir
@@ -2,6 +2,7 @@ ArcItem 1.0 ArcItem.qml
 PieItem 1.0 PieItem.qml
 TriangleItem 1.0 TriangleItem.qml
 SvgPathItem 1.0 SvgPathItem.qml
+EllipseItem 1.0 EllipseItem.qml
 FlipableItem 1.0 FlipableItem.qml
 RectangleItem 1.0 RectangleItem.qml
 RegularPolygonItem 1.0 RegularPolygonItem.qml