RectangleItem: Adapt figma corner radius logicHEADdev

* Adapt corner radius logic to act like figma
* Adapt corner radius logic for BorderItem too
* Change radii range in specifics
* Fix warning about non-NOTIFYable fillGradient

Task-number: QDS-12827
Change-Id: I6f95b207078a6495c0f4c36dc83153a2174b4cd7
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

3 files changed, 183 insertions, 23 deletions

diff --git a/src/imports/components/BorderItem.qml b/src/imports/components/BorderItem.qml
index eb9dc40..e8d593f 100644
--- a/src/imports/components/BorderItem.qml
+++ b/src/imports/components/BorderItem.qml
@@ -373,14 +373,94 @@ Shape {
         }
     }
 
+    onRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
+    onTopLeftRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
+    onTopRightRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
+    onBottomLeftRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
+    onBottomRightRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
+    onWidthChanged: Qt.callLater(root.calculateIndependentRadii)
+    onHeightChanged: Qt.callLater(root.calculateIndependentRadii)
+
+    function calculateIndependentRadii() {
+        let minDimension = Math.min(root.width, root.height)
+        let maxRadius = Math.floor(minDimension / 2)
+        let mixed = !(root.radius === root.topLeftRadius
+                   && root.radius === root.topRightRadius
+                   && root.radius === root.bottomLeftRadius
+                   && root.radius === root.bottomRightRadius)
+
+        // Uniform radii
+        if (!mixed) {
+            path.__topLeftRadius = Math.min(root.topLeftRadius, maxRadius)
+            path.__topRightRadius = Math.min(root.topRightRadius, maxRadius)
+            path.__bottomRightRadius = Math.min(root.bottomRightRadius, maxRadius)
+            path.__bottomLeftRadius = Math.min(root.bottomLeftRadius, maxRadius)
+            return
+        }
+
+        // Mixed radii
+        let topLeftRadiusMin = Math.min(minDimension, root.topLeftRadius)
+        let topRightRadiusMin = Math.min(minDimension, root.topRightRadius)
+        let bottomLeftRadiusMin = Math.min(minDimension, root.bottomLeftRadius)
+        let bottomRightRadiusMin = Math.min(minDimension, root.bottomRightRadius)
+
+        // Top radii
+        let topRadii = root.topLeftRadius + root.topRightRadius
+
+        if (topRadii > root.width) {
+            let topLeftRadiusFactor = root.topLeftRadius / topRadii
+            let tlr = Math.round(root.width * topLeftRadiusFactor)
+
+            topLeftRadiusMin = Math.min(topLeftRadiusMin, tlr)
+            topRightRadiusMin = Math.min(topRightRadiusMin, root.width - tlr)
+        }
+
+        // Right radii
+        let rightRadii = root.topRightRadius + root.bottomRightRadius
+
+        if (rightRadii > root.height) {
+            let topRightRadiusFactor = root.topRightRadius / rightRadii
+            let trr = Math.round(root.height * topRightRadiusFactor)
+
+            topRightRadiusMin = Math.min(topRightRadiusMin, trr)
+            bottomRightRadiusMin = Math.min(bottomRightRadiusMin, root.height - trr)
+        }
+
+        // Bottom radii
+        let bottomRadii = root.bottomRightRadius + root.bottomLeftRadius
+
+        if (bottomRadii > root.width) {
+            let bottomRightRadiusFactor = root.bottomRightRadius / bottomRadii
+            let brr = Math.round(root.width * bottomRightRadiusFactor)
+
+            bottomRightRadiusMin = Math.min(bottomRightRadiusMin, brr)
+            bottomLeftRadiusMin = Math.min(bottomLeftRadiusMin, root.width - brr)
+        }
+
+        // Left radii
+        let leftRadii = root.bottomLeftRadius + root.topLeftRadius
+
+        if (leftRadii > root.height) {
+            let bottomLeftRadiusFactor = root.bottomLeftRadius / leftRadii
+            let blr = Math.round(root.height * bottomLeftRadiusFactor)
+
+            bottomLeftRadiusMin = Math.min(bottomLeftRadiusMin, blr)
+            topLeftRadiusMin = Math.min(topLeftRadiusMin, root.height - blr)
+        }
+
+        path.__topLeftRadius = topLeftRadiusMin
+        path.__topRightRadius = topRightRadiusMin
+        path.__bottomLeftRadius = bottomLeftRadiusMin
+        path.__bottomRightRadius = bottomRightRadiusMin
+    }
+
     ShapePath {
         id: path
 
-        property int __maxRadius: Math.floor(Math.min(root.width, root.height) / 2)
-        property int __topLeftRadius: Math.min(root.topLeftRadius, path.__maxRadius)
-        property int __topRightRadius: Math.min(root.topRightRadius, path.__maxRadius)
-        property int __bottomRightRadius: Math.min(root.bottomRightRadius, path.__maxRadius)
-        property int __bottomLeftRadius: Math.min(root.bottomLeftRadius, path.__maxRadius)
+        property int __topLeftRadius: 0
+        property int __topRightRadius: 0
+        property int __bottomRightRadius: 0
+        property int __bottomLeftRadius: 0
 
         readonly property real __borderRadiusAdjustment: {
             if (root.adjustBorderRadius) {
@@ -508,5 +588,8 @@ Shape {
         path.pathElements = []
     }
 
-    Component.onCompleted: root.constructBorderItem()
+    Component.onCompleted: {
+        root.calculateIndependentRadii()
+        root.constructBorderItem()
+    }
 }
diff --git a/src/imports/components/RectangleItem.qml b/src/imports/components/RectangleItem.qml
index 5e787cd..7424102 100644
--- a/src/imports/components/RectangleItem.qml
+++ b/src/imports/components/RectangleItem.qml
@@ -194,7 +194,7 @@ Shape {
     \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
+    property ShapeGradient gradient: null
 
 /*!
     The style of the rectangle border.
@@ -255,7 +255,6 @@ Shape {
 */
     property alias dashPattern: path.dashPattern
 
-
 /*!
     The rectangle fill color.
 
@@ -355,14 +354,96 @@ Shape {
         }
     }
 
+    onRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
+    onTopLeftRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
+    onTopRightRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
+    onBottomLeftRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
+    onBottomRightRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
+    onWidthChanged: Qt.callLater(root.calculateIndependentRadii)
+    onHeightChanged: Qt.callLater(root.calculateIndependentRadii)
+
+    Component.onCompleted: root.calculateIndependentRadii()
+
+    function calculateIndependentRadii() {
+        let minDimension = Math.min(root.width, root.height)
+        let maxRadius = Math.floor(minDimension / 2)
+        let mixed = !(root.radius === root.topLeftRadius
+                   && root.radius === root.topRightRadius
+                   && root.radius === root.bottomLeftRadius
+                   && root.radius === root.bottomRightRadius)
+
+        // Uniform radii
+        if (!mixed) {
+            path.__topLeftRadius = Math.min(root.topLeftRadius, maxRadius)
+            path.__topRightRadius = Math.min(root.topRightRadius, maxRadius)
+            path.__bottomRightRadius = Math.min(root.bottomRightRadius, maxRadius)
+            path.__bottomLeftRadius = Math.min(root.bottomLeftRadius, maxRadius)
+            return
+        }
+
+        // Mixed radii
+        let topLeftRadiusMin = Math.min(minDimension, root.topLeftRadius)
+        let topRightRadiusMin = Math.min(minDimension, root.topRightRadius)
+        let bottomLeftRadiusMin = Math.min(minDimension, root.bottomLeftRadius)
+        let bottomRightRadiusMin = Math.min(minDimension, root.bottomRightRadius)
+
+        // Top radii
+        let topRadii = root.topLeftRadius + root.topRightRadius
+
+        if (topRadii > root.width) {
+            let topLeftRadiusFactor = root.topLeftRadius / topRadii
+            let tlr = Math.round(root.width * topLeftRadiusFactor)
+
+            topLeftRadiusMin = Math.min(topLeftRadiusMin, tlr)
+            topRightRadiusMin = Math.min(topRightRadiusMin, root.width - tlr)
+        }
+
+        // Right radii
+        let rightRadii = root.topRightRadius + root.bottomRightRadius
+
+        if (rightRadii > root.height) {
+            let topRightRadiusFactor = root.topRightRadius / rightRadii
+            let trr = Math.round(root.height * topRightRadiusFactor)
+
+            topRightRadiusMin = Math.min(topRightRadiusMin, trr)
+            bottomRightRadiusMin = Math.min(bottomRightRadiusMin, root.height - trr)
+        }
+
+        // Bottom radii
+        let bottomRadii = root.bottomRightRadius + root.bottomLeftRadius
+
+        if (bottomRadii > root.width) {
+            let bottomRightRadiusFactor = root.bottomRightRadius / bottomRadii
+            let brr = Math.round(root.width * bottomRightRadiusFactor)
+
+            bottomRightRadiusMin = Math.min(bottomRightRadiusMin, brr)
+            bottomLeftRadiusMin = Math.min(bottomLeftRadiusMin, root.width - brr)
+        }
+
+        // Left radii
+        let leftRadii = root.bottomLeftRadius + root.topLeftRadius
+
+        if (leftRadii > root.height) {
+            let bottomLeftRadiusFactor = root.bottomLeftRadius / leftRadii
+            let blr = Math.round(root.height * bottomLeftRadiusFactor)
+
+            bottomLeftRadiusMin = Math.min(bottomLeftRadiusMin, blr)
+            topLeftRadiusMin = Math.min(topLeftRadiusMin, root.height - blr)
+        }
+
+        path.__topLeftRadius = topLeftRadiusMin
+        path.__topRightRadius = topRightRadiusMin
+        path.__bottomLeftRadius = bottomLeftRadiusMin
+        path.__bottomRightRadius = bottomRightRadiusMin
+    }
+
     ShapePath {
         id: path
 
-        property int __maxRadius: Math.floor(Math.min(root.width, root.height) / 2)
-        property int __topLeftRadius: Math.min(root.topLeftRadius, path.__maxRadius)
-        property int __topRightRadius: Math.min(root.topRightRadius, path.__maxRadius)
-        property int __bottomRightRadius: Math.min(root.bottomRightRadius, path.__maxRadius)
-        property int __bottomLeftRadius: Math.min(root.bottomLeftRadius, path.__maxRadius)
+        property int __topLeftRadius: 0
+        property int __topRightRadius: 0
+        property int __bottomRightRadius: 0
+        property int __bottomLeftRadius: 0
 
         readonly property real __borderRadiusAdjustment: {
             if (root.adjustBorderRadius) {
@@ -380,6 +461,7 @@ Shape {
 
         strokeWidth: 4
         strokeColor: "red"
+        fillGradient: root.gradient
 
         startX: path.__topLeftRadius + root.borderOffset + path.__borderRadiusAdjustment
         startY: root.borderOffset
diff --git a/src/imports/components/designer/CornerRadiusSection.qml b/src/imports/components/designer/CornerRadiusSection.qml
index 56121f1..7af5037 100644
--- a/src/imports/components/designer/CornerRadiusSection.qml
+++ b/src/imports/components/designer/CornerRadiusSection.qml
@@ -49,8 +49,7 @@ Section {
                 backendValue: backendValues.topLeftRadius
                 decimals: 1
                 minimumValue: 0
-                maximumValue: Math.min(backendValues.height.value,
-                                       backendValues.width.value) / 2
+                maximumValue: 0xffff
                 stepSize: 1
             }
 
@@ -69,8 +68,7 @@ Section {
                 backendValue: backendValues.topRightRadius
                 decimals: 1
                 minimumValue: 0
-                maximumValue: Math.min(backendValues.height.value,
-                                       backendValues.width.value) / 2
+                maximumValue: 0xffff
                 stepSize: 1
             }
 
@@ -97,8 +95,7 @@ Section {
                 backendValue: backendValues.bottomLeftRadius
                 decimals: 1
                 minimumValue: 0
-                maximumValue: Math.min(backendValues.height.value,
-                                       backendValues.width.value) / 2
+                maximumValue: 0xffff
                 stepSize: 1
             }
 
@@ -118,8 +115,7 @@ Section {
                 backendValue: backendValues.bottomRightRadius
                 decimals: 1
                 minimumValue: 0
-                maximumValue: Math.min(backendValues.height.value,
-                                       backendValues.width.value) / 2
+                maximumValue: 0xffff
                 stepSize: 1
             }
 
@@ -146,8 +142,7 @@ Section {
                 backendValue: backendValues.radius
                 decimals: 1
                 minimumValue: 0
-                maximumValue: Math.min(backendValues.height.value,
-                                       backendValues.width.value) / 2
+                maximumValue: 0xffff
                 stepSize: 1
             }