Add QtQuickUltralite.Studio.Components and ArcItem

The ArcItem is a compatible type to the one with the same name in
QtQuick.Studio.Components. But it has reduced properties due to runtime
limitation, so the design panel would have the matching properties.

- Add QtQuickUltralite.Studio.Components plugin
- Add ArcItem into the plugin

Task-number: UL-8504
Change-Id: If5d53f09eb059eec230df632f9a58a75d62b6bc8
Reviewed-by: Yasser Grimes <yasser.grimes@qt.io>
Reviewed-by: Aleksei German <aleksei.german@qt.io>

12 files changed, 678 insertions, 1 deletions

diff --git a/src/imports/compat/CMakeLists.txt b/src/imports/compat/CMakeLists.txt
index 1578454..454e984 100644
--- a/src/imports/compat/CMakeLists.txt
+++ b/src/imports/compat/CMakeLists.txt
@@ -1,4 +1,4 @@
+add_subdirectory(Components)
 add_subdirectory(Extras)
 add_subdirectory(Layers)
 add_subdirectory(Profiling)
-
diff --git a/src/imports/compat/Components/ArcItem.qml b/src/imports/compat/Components/ArcItem.qml
new file mode 100644
index 0000000..870e101
--- /dev/null
+++ b/src/imports/compat/Components/ArcItem.qml
@@ -0,0 +1,243 @@
+/****************************************************************************
+**
+** Copyright (C) 2023 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Ultralite compatibility.
+**
+** $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
+import QtQuick.Shapes 1.12
+
+//! [ArcItem compatibility]
+Shape {
+    id: root
+
+    implicitWidth: 100
+    implicitHeight: 100
+
+    // These properties are not supported in Qt Quick Ultralite:
+    // gradient, strokeStyle, dashPattern, dashOffset
+
+    property alias strokeWidth: path.strokeWidth
+    property alias strokeColor: path.strokeColor
+    property alias joinStyle: path.joinStyle
+    property alias fillColor: path.fillColor
+    property alias capStyle: path.capStyle
+    property real begin: 0
+    property real end: 90
+    property real arcWidth: 10
+    property real alpha: root.clamp(root.sortedEnd() - root.sortedBegin(), 0, 359.9)
+
+    // antialiasing is enabled to have the same shape as Qt Quick Ultralite runtime
+    antialiasing: true
+
+    layer.enabled: root.antialiasing
+    layer.smooth: root.antialiasing
+    layer.samples: root.antialiasing ? 4 : 0
+
+    property bool outlineArc: false
+    property bool round: false
+    property bool roundEnd: root.round
+    property bool roundBegin: root.round
+
+    function clamp(num, min, max) {
+        return Math.max(min, Math.min(num, max))
+    }
+
+    function toRadians(degrees) {
+        return degrees * (Math.PI / 180.0)
+    }
+
+    function myCos(angleInDegrees) {
+        return Math.cos(root.toRadians(angleInDegrees))
+    }
+
+    function mySin(angleInDegrees) {
+        return Math.sin(root.toRadians(angleInDegrees))
+    }
+
+    function polarToCartesianX(centerX, centerY, radius, angleInDegrees) {
+        return centerX + radius * Math.cos(root.toRadians(angleInDegrees))
+    }
+
+    function polarToCartesianY(centerX, centerY, radius, angleInDegrees) {
+        return centerY + radius * Math.sin(root.toRadians(angleInDegrees))
+    }
+
+    function sortedBegin() {
+        return Math.min(root.begin, root.end)
+    }
+
+    function sortedEnd() {
+        return Math.min(Math.max(root.begin, root.end), root.sortedBegin() + 359.9)
+    }
+
+    function isArcFull() {
+        return root.alpha > 359.5
+    }
+
+    onAlphaChanged: {
+        if (root.__wasFull !== root.isArcFull())
+            root.constructArcItem()
+
+        root.__wasFull = root.isArcFull()
+    }
+    onOutlineArcChanged: root.constructArcItem()
+    onRoundChanged: root.constructArcItem()
+    onRoundBeginChanged: root.constructArcItem()
+    onRoundEndChanged: root.constructArcItem()
+
+    property bool __wasFull: false
+
+    property real maxArcWidth: Math.min(path.__xRadius, path.__yRadius)
+
+    ShapePath {
+        id: path
+
+        property real __xRadius: root.width / 2 - root.strokeWidth / 2
+        property real __yRadius: root.height / 2 - root.strokeWidth / 2
+
+        property real __arcWidth: Math.min(Math.min(path.__xRadius, path.__yRadius), root.arcWidth)
+
+        property real __xCenter: root.width / 2
+        property real __yCenter: root.height / 2
+
+        strokeColor: "red"
+        strokeWidth: 4
+        capStyle: ShapePath.FlatCap
+
+        startX: root.polarToCartesianX(path.__xCenter, path.__yCenter, path.__xRadius, root.sortedBegin() - 90)
+        startY: root.polarToCartesianY(path.__xCenter, path.__yCenter, path.__yRadius, root.sortedBegin() - 90)
+    }
+
+    function constructArcItem() {
+        root.clearPathElements()
+
+        // Outer arc
+        let outerArc = Qt.createQmlObject('import QtQuick 2.15; PathArc {}', path)
+        outerArc.x = Qt.binding(function() {
+            return root.polarToCartesianX(path.__xCenter, path.__yCenter, path.__xRadius, root.sortedEnd() - 90)
+        })
+        outerArc.y = Qt.binding(function() {
+            return root.polarToCartesianY(path.__xCenter, path.__yCenter, path.__yRadius, root.sortedEnd() - 90)
+        })
+        outerArc.radiusX = Qt.binding(function() { return path.__xRadius })
+        outerArc.radiusY = Qt.binding(function() { return path.__yRadius })
+        outerArc.useLargeArc = Qt.binding(function() { return root.alpha > 180 })
+        path.pathElements.push(outerArc)
+
+        // Straight end
+        if (!root.roundEnd && root.outlineArc && !root.isArcFull()) {
+            let pathLine = Qt.createQmlObject('import QtQuick 2.15; PathLine {}', path)
+            pathLine.relativeX = Qt.binding(function() {
+                return -path.__arcWidth * root.myCos(root.sortedEnd() - 90)
+            })
+            pathLine.relativeY = Qt.binding(function() {
+                return -path.__arcWidth * root.mySin(root.sortedEnd() - 90)
+            })
+            path.pathElements.push(pathLine)
+        }
+
+        // Round end
+        if (root.roundEnd && root.outlineArc && !root.isArcFull()) {
+            let pathArc = Qt.createQmlObject('import QtQuick 2.15; PathArc {}', path)
+            pathArc.relativeX = Qt.binding(function() {
+                return -path.__arcWidth * root.myCos(root.sortedEnd() - 90)
+            })
+            pathArc.relativeY = Qt.binding(function() {
+                return -path.__arcWidth * root.mySin(root.sortedEnd() - 90)
+            })
+            pathArc.radiusX = Qt.binding(function() { return path.__arcWidth / 2 })
+            pathArc.radiusY = Qt.binding(function() { return path.__arcWidth / 2 })
+            path.pathElements.push(pathArc)
+        }
+
+        // Open end
+        if (root.outlineArc && root.isArcFull()) {
+            let pathMove = Qt.createQmlObject('import QtQuick 2.15; PathMove {}', path)
+            pathMove.relativeX = Qt.binding(function() {
+                return -path.__arcWidth * root.myCos(root.sortedEnd() - 90)
+            })
+            pathMove.relativeY = Qt.binding(function() {
+                return -path.__arcWidth * root.mySin(root.sortedEnd() - 90)
+            })
+            path.pathElements.push(pathMove)
+        }
+
+        // Inner arc
+        if (root.outlineArc) {
+            let innerArc = Qt.createQmlObject('import QtQuick 2.15; PathArc {}', path)
+            innerArc.x = Qt.binding(function() {
+                return path.startX - path.__arcWidth * root.myCos(root.sortedBegin() - 90)
+            })
+            innerArc.y = Qt.binding(function() {
+                return path.startY - path.__arcWidth * root.mySin(root.sortedBegin() - 90)
+            })
+            innerArc.radiusX = Qt.binding(function() { return path.__xRadius - path.__arcWidth })
+            innerArc.radiusY = Qt.binding(function() { return path.__yRadius - path.__arcWidth })
+            innerArc.useLargeArc = Qt.binding(function() { return root.alpha > 180 })
+            innerArc.direction = PathArc.Counterclockwise
+            path.pathElements.push(innerArc)
+        }
+
+        // Straight begin
+        if (!root.roundBegin && root.outlineArc && !root.isArcFull()) {
+            let pathLine = Qt.createQmlObject('import QtQuick 2.15; PathLine {}', path)
+            pathLine.x = Qt.binding(function() { return path.startX })
+            pathLine.y = Qt.binding(function() { return path.startY })
+            path.pathElements.push(pathLine)
+        }
+
+        // Round begin
+        if (root.roundBegin && root.outlineArc && !root.isArcFull()) {
+            let pathArc = Qt.createQmlObject('import QtQuick 2.15; PathArc {}', path)
+            pathArc.x = Qt.binding(function() { return path.startX })
+            pathArc.y = Qt.binding(function() { return path.startY })
+            pathArc.radiusX = Qt.binding(function() { return path.__arcWidth / 2 })
+            pathArc.radiusY = Qt.binding(function() { return path.__arcWidth / 2 })
+            path.pathElements.push(pathArc)
+        }
+
+        // Open begin
+        if (root.outlineArc && root.isArcFull()) {
+            let pathMove = Qt.createQmlObject('import QtQuick 2.15; PathMove {}', path)
+            pathMove.x = Qt.binding(function() { return path.startX })
+            pathMove.y = Qt.binding(function() { return path.startY })
+            path.pathElements.push(pathMove)
+        }
+    }
+
+    function clearPathElements() {
+        for (var i = 0; i !== path.pathElements.length; ++i)
+            path.pathElements[i].destroy()
+
+        path.pathElements = []
+    }
+
+    Component.onCompleted: {
+        root.__wasFull = root.isArcFull()
+        root.constructArcItem()
+    }
+}
+//! [ArcItem compatibility]
diff --git a/src/imports/compat/Components/CMakeLists.txt b/src/imports/compat/Components/CMakeLists.txt
new file mode 100644
index 0000000..83eeb7d
--- /dev/null
+++ b/src/imports/compat/Components/CMakeLists.txt
@@ -0,0 +1,15 @@
+qt_internal_add_qml_module(QuickUltraLiteStudioComponents
+    URI "QtQuickUltralite.Studio.Components"
+    VERSION "${PROJECT_VERSION}"
+    DESIGNER_SUPPORTED
+    NO_SYNC_QT
+    PAST_MAJOR_VERSIONS
+        1
+        2
+    QML_FILES
+        ArcItem.qml
+)
+
+if(QT_FEATURE_quick_designer AND QT_BUILD_SHARED_LIBS)
+    add_subdirectory(designer)
+endif()
diff --git a/src/imports/compat/Components/designer/ArcItemSpecifics.qml b/src/imports/compat/Components/designer/ArcItemSpecifics.qml
new file mode 100644
index 0000000..a027af4
--- /dev/null
+++ b/src/imports/compat/Components/designer/ArcItemSpecifics.qml
@@ -0,0 +1,305 @@
+/****************************************************************************
+**
+** Copyright (C) 2023 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
+import QtQuick.Layouts
+import HelperWidgets
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    Section {
+        caption: qsTr("Arc Item")
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+
+        SectionLayout {
+            PropertyLabel {
+                text: qsTr("Fill color")
+                tooltip: qsTr("Sets the color inside the Arc stroke. This only works if the <b>Full outline</b> option is selected and the Arc stroke is not thick enough to fill the space.")
+            }
+
+            ColorEditor {
+                backendValue: backendValues.fillColor
+            }
+
+            PropertyLabel {
+                text: qsTr("Stroke color")
+                tooltip: qsTr("Sets the color of the Arc.")
+            }
+
+            ColorEditor {
+                backendValue: backendValues.strokeColor
+            }
+
+            PropertyLabel {
+                text: qsTr("Stroke width")
+                tooltip: qsTr("Sets the thickness of the Arc.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    id: strokeWidthSpinBox
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.strokeWidth
+                    decimals: 1
+                    minimumValue: -1
+                    maximumValue: 200
+                    stepSize: 1
+
+                    property real previousValue: 0
+
+                    onValueChanged: {
+                        if (strokeWidthSpinBox.value > 0)
+                            strokeWidthSpinBox.previousValue = strokeWidthSpinBox.value
+                    }
+
+                    Component.onCompleted: strokeWidthSpinBox.previousValue
+                                           = Math.max(1, backendValues.strokeWidth.value)
+                }
+
+                Spacer {
+                    implicitWidth: StudioTheme.Values.twoControlColumnGap
+                                   + StudioTheme.Values.actionIndicatorWidth
+                }
+
+                CheckBox {
+                    id: strokeWidthCheckBox
+                    text: qsTr("Hide")
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                    checked: (backendValues.strokeWidth.value < 0)
+                    actionIndicator.visible: false
+
+                    onCheckedChanged: backendValues.strokeWidth.value
+                                      = (strokeWidthCheckBox.checked ? -1 : strokeWidthSpinBox.previousValue)
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Arc start")
+                tooltip: qsTr("Sets the start angle of the Arc.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.begin
+                    decimals: 1
+                    minimumValue: -720
+                    maximumValue: 720
+                    stepSize: 1
+                }
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel { text: "°" }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Arc end")
+                tooltip: qsTr("Sets the end angle of the Arc.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.end
+                    decimals: 1
+                    minimumValue: -720
+                    maximumValue: 720
+                    stepSize: 1
+                }
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel { text: "°" }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Cap style")
+                tooltip: qsTr("Sets the line ends as square or rounded.")
+            }
+
+            SecondColumnLayout {
+                // copied from CapComboBox
+                ComboBox {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    model: ["Flat Cap", "Square Cap", "Round Cap"]
+                    backendValue: backendValues.capStyle
+                    useInteger: true
+                    manualMapping: true
+
+                    property bool block: false
+
+                    onValueFromBackendChanged: fromBackendToFrontend()
+
+                    onCurrentTextChanged: {
+                        if (!__isCompleted)
+                            return
+
+                        if (block)
+                            return
+
+                        if (currentText === "Flat Cap")
+                            backendValues.capStyle.value = 0
+
+                        if (currentText === "Square Cap")
+                            backendValues.capStyle.value = 16
+
+                        if (currentText === "Round Cap")
+                            backendValues.capStyle.value = 32
+                    }
+
+                    Connections {
+                        target: modelNodeBackend
+                        function onSelectionChanged() { fromBackendToFrontend() }
+                    }
+
+                    function fromBackendToFrontend()
+                    {
+                        if (!__isCompleted || backendValues.capStyle === undefined)
+                            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
+                    }
+                }
+            }
+
+            ExpandingSpacer {}
+        }
+    }
+
+    Section {
+        caption: qsTr("Outline")
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+
+        SectionLayout {
+            PropertyLabel {
+                text: qsTr("Outline width")
+                tooltip: qsTr("Sets the width of the outline that follows the Arc.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.arcWidth
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: backendValues.maxArcWidth.value
+                    stepSize: 1
+                }
+
+                Spacer { implicitWidth: StudioTheme.Values.twoControlColumnGap }
+
+                CheckBox {
+                    text: qsTr("Full outline")//backendValues.outlineArc.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.outlineArc
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Round outline")
+                tooltip: qsTr("Toggles the <b>Full outline</b> to have rounded edges.")
+            }
+
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.round.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.round
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Round start")
+                tooltip: qsTr("Toggles the starting edge of the <b>Full outline</b> to be rounded.")
+            }
+
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.roundBegin.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.roundBegin
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Round end")
+                tooltip: qsTr("Toggles the end edge of the <b>Full outline</b> to be rounded.")
+            }
+
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.roundEnd.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.roundEnd
+                }
+
+                ExpandingSpacer {}
+            }
+        }
+    }
+}
diff --git a/src/imports/compat/Components/designer/CMakeLists.txt b/src/imports/compat/Components/designer/CMakeLists.txt
new file mode 100644
index 0000000..7310efa
--- /dev/null
+++ b/src/imports/compat/Components/designer/CMakeLists.txt
@@ -0,0 +1,16 @@
+qt_path_join(installdesignerdir "${INSTALL_QMLDIR}" "QtQuickUltralite/Studio/Components")
+qt_path_join(targetdesignerdir "${CMAKE_BINARY_DIR}" "${installdesignerdir}/designer")
+
+file(
+    COPY .
+    DESTINATION ${targetdesignerdir}
+    FILES_MATCHING PATTERN "*qml"
+                   PATTERN "*metainfo"
+                   PATTERN "images/*png"
+                   PATTERN "CMakeFiles" EXCLUDE
+)
+
+qt_install(
+    DIRECTORY ${targetdesignerdir}
+    DESTINATION ${installdesignerdir}
+)
diff --git a/src/imports/compat/Components/designer/QtQuickUltraliteStudioComponents.metainfo b/src/imports/compat/Components/designer/QtQuickUltraliteStudioComponents.metainfo
new file mode 100644
index 0000000..634f14e
--- /dev/null
+++ b/src/imports/compat/Components/designer/QtQuickUltraliteStudioComponents.metainfo
@@ -0,0 +1,18 @@
+MetaInfo {
+    Type {
+        name: "QtQuickUltralite.Studio.Components.ArcItem"
+        icon: "images/item-arc-16px.png"
+
+        ItemLibraryEntry {
+            name: "ArcItem"
+            category: "QtQuickUltralite - Components"
+            libraryIcon: "images/item-arc-24px.png"
+            version: "1.0"
+            requiredImport: "QtQuickUltralite.Studio.Components"
+            Property { name: "width"; type: "int"; value: 100; }
+            Property { name: "height"; type: "int"; value: 100; }
+            Property { name: "fillColor"; type: "QColor"; value: "transparent"; }
+            toolTip: qsTr("An arc that begins and ends at given positions.")
+        }
+    }
+}
diff --git a/src/imports/compat/Components/designer/images/item-arc-16px.png b/src/imports/compat/Components/designer/images/item-arc-16px.png
new file mode 100644
index 0000000..8c3bad9
--- /dev/null
+++ b/src/imports/compat/Components/designer/images/item-arc-16px.png
diff --git a/src/imports/compat/Components/designer/images/item-arc-24px.png b/src/imports/compat/Components/designer/images/item-arc-24px.png
new file mode 100644
index 0000000..bba68f6
--- /dev/null
+++ b/src/imports/compat/Components/designer/images/item-arc-24px.png
diff --git a/src/imports/compat/Components/designer/images/item-arc-24px@2x.png b/src/imports/compat/Components/designer/images/item-arc-24px@2x.png
new file mode 100644
index 0000000..e44762c
--- /dev/null
+++ b/src/imports/compat/Components/designer/images/item-arc-24px@2x.png
diff --git a/src/imports/compat/Components/plugins.qmltypes b/src/imports/compat/Components/plugins.qmltypes
new file mode 100644
index 0000000..6a6c815
--- /dev/null
+++ b/src/imports/compat/Components/plugins.qmltypes
@@ -0,0 +1,13 @@
+import QtQuick.tooling 1.2
+
+// This file describes the plugin-supplied types contained in the library.
+// It is used for QML tooling purposes only.
+//
+// This file was auto-generated by:
+// 'qmlplugindump -nonrelocatable -dependencies dependencies.json QtQuick.Controls 2.15'
+
+Module {
+    dependencies: [
+        "QtQuick 2.12"
+    ]
+}
diff --git a/src/imports/compat/Components/qmldir b/src/imports/compat/Components/qmldir
new file mode 100644
index 0000000..6ecd448
--- /dev/null
+++ b/src/imports/compat/Components/qmldir
@@ -0,0 +1,10 @@
+module QtQuickUltralite.Studio.Components
+designersupported
+linktarget studioqtquickultralitecomponentsplugin
+optional plugin studioqtquickultralitecomponentsplugin
+classname QtQuickUltralite_Studio_ComponentsPlugin
+typeinfo studioqtquickultralitecomponents.qmltypes
+prefer :/QtQuickUltralite/Studio/Components/
+ArcItem 1.0 ArcItem.qml
+ArcItem 2.0 ArcItem.qml
+ArcItem 6.0 ArcItem.qml
diff --git a/src/imports/compat/Components/studiocompatibilityqulcomponents.cpp b/src/imports/compat/Components/studiocompatibilityqulcomponents.cpp
new file mode 100644
index 0000000..53fbd7e
--- /dev/null
+++ b/src/imports/compat/Components/studiocompatibilityqulcomponents.cpp
@@ -0,0 +1,57 @@
+/****************************************************************************
+**
+** Copyright (C) 2023 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Ultralite compatibility.
+**
+** $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$
+**
+****************************************************************************/
+
+#include <QQmlEngine>
+#include <QQmlContext>
+#include <QtQml/qqmlextensionplugin.h>
+
+QT_BEGIN_NAMESPACE
+
+class StudioCompatibilityQULComponents: public QQmlExtensionPlugin
+{
+    Q_OBJECT
+    Q_PLUGIN_METADATA(IID QQmlExtensionInterface_iid)
+
+public:
+    StudioCompatibilityQULComponents(QObject *parent = nullptr);
+    void registerTypes(const char *uri) override;
+};
+
+StudioCompatibilityQULComponents::StudioCompatibilityQULComponents(QObject *parent)
+    : QQmlExtensionPlugin(parent)
+{
+}
+
+void StudioCompatibilityQULComponents::registerTypes(const char *)
+{
+}
+
+QT_END_NAMESPACE
+
+#include "studiocompatibilityqulcomponents.moc"