Clamp corner radius to item size

Clamp corner radius to item size for RectangleItem, BorderItem and
TriangleItem. Clamp the values in the backend and adapt the SpinBox
ranges in the frontend.

Task-number: QDS-4797
Change-Id: I9d4e504a8920aefbdc2292e5695cf7ec9a088af2
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
Reviewed-by: Qt CI Bot <qt_ci_bot@qt-project.org>

5 files changed, 111 insertions, 98 deletions

diff --git a/src/imports/components/BorderItem.qml b/src/imports/components/BorderItem.qml
index 0c0c389..5260a66 100644
--- a/src/imports/components/BorderItem.qml
+++ b/src/imports/components/BorderItem.qml
@@ -345,7 +345,6 @@ Shape {
     property int borderMode: 0
 
     property real borderOffset: {
-
         if (root.borderMode === 0)
             return path.strokeWidth * 10.0 / 20.0
         if (root.borderMode === 1)
@@ -354,7 +353,6 @@ Shape {
         return -path.strokeWidth * 10.0 / 20.0
     }
 
-
     Item {
         anchors.fill: parent
         anchors.margins: {
@@ -363,101 +361,103 @@ Shape {
             if (root.borderMode === 1)
                 return -root.strokeWidth / 2.0
 
-
             return -root.strokeWidth
         }
     }
 
     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)
+
         joinStyle: ShapePath.MiterJoin
 
         strokeWidth: 4
         strokeColor: "red"
         fillColor: "transparent"
 
-        startX: root.topLeftRadius + root.borderOffset
+        startX: path.__topLeftRadius + root.borderOffset
         startY: root.borderOffset
-
-
     }
 
-
     Item {
         id: shapes
 
         PathLine {
-            x: root.width - root.topRightRadius - root.borderOffset
+            x: root.width - path.__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
+            y: path.__topRightRadius + root.borderOffset
+            radiusX: topRightBevel ? 50000 : path.__topRightRadius
+            radiusY: topRightBevel ? 50000 : path.__topRightRadius
             property bool add: root.drawTop && root.drawRight
         }
 
         PathMove {
             x: root.width - root.borderOffset
-            y: root.topRightRadius + root.borderOffset
+            y: path.__topRightRadius + root.borderOffset
             property bool add: !root.drawTop
         }
 
-
         PathLine {
             x: root.width - root.borderOffset
-            y: root.height - root.bottomRightRadius - root.borderOffset
+            y: root.height - path.__bottomRightRadius - root.borderOffset
             property bool add: root.drawRight
         }
 
         PathArc {
-            x: root.width - root.bottomRightRadius - root.borderOffset
+            x: root.width - path.__bottomRightRadius - root.borderOffset
             y: root.height - root.borderOffset
-            radiusX: bottomRightBevel ? 50000 : root.bottomRightRadius
-            radiusY: bottomRightBevel ? 50000 : root.bottomRightRadius
+            radiusX: bottomRightBevel ? 50000 : path.__bottomRightRadius
+            radiusY: bottomRightBevel ? 50000 : path.__bottomRightRadius
             property bool add: root.drawRight && root.drawBottom
         }
 
         PathMove {
-            x: root.width - root.bottomRightRadius - root.borderOffset
+            x: root.width - path.__bottomRightRadius - root.borderOffset
             y: root.height - root.borderOffset
             property bool add: !root.drawRight
         }
 
         PathLine {
-            x: root.bottomLeftRadius + root.borderOffset
+            x: path.__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
+            y: root.height - path.__bottomLeftRadius - root.borderOffset
+            radiusX: bottomLeftBevel ? 50000 : path.__bottomLeftRadius
+            radiusY: bottomLeftBevel ? 50000 : path.__bottomLeftRadius
             property bool add: root.drawBottom && root.drawLeft
         }
 
         PathMove {
             x: root.borderOffset
-            y: root.height - root.bottomLeftRadius - root.borderOffset
+            y: root.height - path.__bottomLeftRadius - root.borderOffset
             property bool add: !root.drawBottom
         }
 
         PathLine {
             x: root.borderOffset
-            y: root.topLeftRadius + root.borderOffset
+            y: path.__topLeftRadius + root.borderOffset
             property bool add: root.drawLeft
         }
 
         PathArc {
-            x: root.topLeftRadius + root.borderOffset
+            x: path.__topLeftRadius + root.borderOffset
             y: root.borderOffset
-            radiusX: topLeftBevel ? 50000 : root.topLeftRadius
-            radiusY: topLeftBevel ? 50000 : root.topLeftRadius
+            radiusX: topLeftBevel ? 50000 : path.__topLeftRadius
+            radiusY: topLeftBevel ? 50000 : path.__topLeftRadius
             property bool add: root.drawTop && root.drawLeft
         }
     }
@@ -471,13 +471,12 @@ Shape {
             if (s.add)
                 path.pathElements.push(s)
         }
-
     }
 
     property bool __completed: false
 
     Component.onCompleted: {
         root.__completed = true
-        invalidatePaths()
+        root.invalidatePaths()
     }
 }
diff --git a/src/imports/components/RectangleItem.qml b/src/imports/components/RectangleItem.qml
index 6125276..bb4ef79 100644
--- a/src/imports/components/RectangleItem.qml
+++ b/src/imports/components/RectangleItem.qml
@@ -326,7 +326,6 @@ Shape {
     property int borderMode: 0
 
     property real borderOffset: {
-
         if (root.borderMode === 0)
             return path.strokeWidth * 10.0 / 20.0
         if (root.borderMode === 1)
@@ -335,7 +334,6 @@ Shape {
         return -path.strokeWidth * 10.0 / 20.0
     }
 
-
     Item {
         anchors.fill: parent
         anchors.margins: {
@@ -344,70 +342,77 @@ Shape {
             if (root.borderMode === 1)
                 return -root.strokeWidth / 2.0
 
-
             return -root.strokeWidth
         }
     }
 
     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)
+
         joinStyle: ShapePath.MiterJoin
 
         strokeWidth: 4
         strokeColor: "red"
 
-        startX: root.topLeftRadius + borderOffset
+        startX: path.__topLeftRadius + borderOffset
         startY: root.borderOffset
 
         PathLine {
-            x: root.width - root.topRightRadius - root.borderOffset
+            x: root.width - path.__topRightRadius - root.borderOffset
             y: root.borderOffset
         }
 
         PathArc {
             x: root.width - root.borderOffset
-            y: root.topRightRadius + root.borderOffset
+            y: path.__topRightRadius + root.borderOffset
 
-            radiusX: root.topRightBevel ? 50000 : root.topRightRadius
-            radiusY: root.topRightBevel ? 50000 : root.topRightRadius
+            radiusX: root.topRightBevel ? 50000 : path.__topRightRadius
+            radiusY: root.topRightBevel ? 50000 : path.__topRightRadius
         }
 
         PathLine {
             x: root.width - root.borderOffset
-            y: root.height - root.bottomRightRadius - root.borderOffset
+            y: root.height - path.__bottomRightRadius - root.borderOffset
         }
 
         PathArc {
-            x: root.width - root.bottomRightRadius - root.borderOffset
+            x: root.width - path.__bottomRightRadius - root.borderOffset
             y: root.height - root.borderOffset
 
-            radiusX: root.bottomRightBevel ? 50000 : root.bottomRightRadius
-            radiusY: root.bottomRightBevel ? 50000 : root.bottomRightRadius
+            radiusX: root.bottomRightBevel ? 50000 : path.__bottomRightRadius
+            radiusY: root.bottomRightBevel ? 50000 : path.__bottomRightRadius
         }
 
         PathLine {
-            x: root.bottomLeftRadius + root.borderOffset
+            x: path.__bottomLeftRadius + root.borderOffset
             y: root.height - root.borderOffset
         }
 
         PathArc {
             x: root.borderOffset
-            y: root.height - root.bottomLeftRadius - root.borderOffset
+            y: root.height - path.__bottomLeftRadius - root.borderOffset
 
-            radiusX: root.bottomLeftBevel ? 50000 : root.bottomLeftRadius
-            radiusY: root.bottomLeftBevel ? 50000 : root.bottomLeftRadius
+            radiusX: root.bottomLeftBevel ? 50000 : path.__bottomLeftRadius
+            radiusY: root.bottomLeftBevel ? 50000 : path.__bottomLeftRadius
         }
+
         PathLine {
             x: borderOffset
-            y: root.topLeftRadius + root.borderOffset
+            y: path.__topLeftRadius + root.borderOffset
         }
 
         PathArc {
-            x: root.topLeftRadius + root.borderOffset
+            x: path.__topLeftRadius + root.borderOffset
             y: root.borderOffset
 
-            radiusX: root.topLeftBevel ? 50000 : root.topLeftRadius
-            radiusY: root.topLeftBevel ? 50000 : root.topLeftRadius
+            radiusX: root.topLeftBevel ? 50000 : path.__topLeftRadius
+            radiusY: root.topLeftBevel ? 50000 : path.__topLeftRadius
         }
     }
 }
diff --git a/src/imports/components/TriangleItem.qml b/src/imports/components/TriangleItem.qml
index 9828f28..16962ff 100644
--- a/src/imports/components/TriangleItem.qml
+++ b/src/imports/components/TriangleItem.qml
@@ -300,6 +300,8 @@ Shape {
 */
     property real bottomMargin: 0
 
+    property int maxRadius: 0
+
     layer.enabled: antialiasing
     layer.smooth: antialiasing
     layer.textureSize: Qt.size(width * 2, height * 2)
@@ -321,12 +323,11 @@ Shape {
         startY: root.topIntersection1.y + path.yOffset
 
         PathArc {
-            radiusX: root.arcRadius
-            radiusY: root.arcRadius
+            radiusX: Math.max(root.arcRadius, 1)
+            radiusY: Math.max(root.arcRadius, 1)
 
             x: root.topIntersection2.x + path.xOffset
             y: root.topIntersection2.y + path.yOffset
-
         }
 
         PathLine {
@@ -335,8 +336,8 @@ Shape {
         }
 
         PathArc {
-            radiusX: root.arcRadius
-            radiusY: root.arcRadius
+            radiusX: Math.max(root.arcRadius, 1)
+            radiusY: Math.max(root.arcRadius, 1)
 
             x: root.rightIntersection2.x + path.xOffset
             y: root.rightIntersection2.y + path.yOffset
@@ -348,8 +349,8 @@ Shape {
         }
 
         PathArc {
-            radiusX: root.arcRadius
-            radiusY: root.arcRadius
+            radiusX: Math.max(root.arcRadius, 1)
+            radiusY: Math.max(root.arcRadius, 1)
 
             x: root.leftIntersection2.x + path.xOffset
             y: root.leftIntersection2.y + path.yOffset
@@ -361,37 +362,37 @@ Shape {
         }
     }
 
-    onWidthChanged: calc()
+    onWidthChanged: root.calc()
+    onHeightChanged: root.calc()
 
-    onHeightChanged: calc()
+    onRadiusChanged: root.calc()
+    onArcRadiusChanged: root.calc()
 
-    onRadiusChanged: calc()
-    onArcRadiusChanged: calc()
-
-    onTopMarginChanged: calc()
-    onBottomMarginChanged: calc()
-    onLeftMarginChanged: calc()
-    onRightMarginChanged: calc()
+    onTopMarginChanged: root.calc()
+    onBottomMarginChanged: root.calc()
+    onLeftMarginChanged: root.calc()
+    onRightMarginChanged: root.calc()
 
     Component.onCompleted: root.calc()
 
-    function normalize(x, y)
-    {
-        var length = Math.sqrt(x*x+y*y)
+    function length(x, y) {
+        return Math.sqrt(x * x + y * y)
+    }
+
+    function normalize(x, y) {
+        var l = length(x, y)
 
         return {
-            x: x / length,
-            y: y / length
+            x: x / l,
+            y: y / l
         }
     }
 
-    function dotProduct(x1, y1, x2, y2)
-    {
+    function dotProduct(x1, y1, x2, y2) {
         return x1 * x2 + y1 * y2;
     }
 
-    function project(x1, y1, x2, y2)
-    {
+    function project(x1, y1, x2, y2) {
         var normalized = normalize(x1, y1)
 
         var dot = dotProduct(normalized.x, normalized.y, x2, y2)
@@ -402,8 +403,7 @@ Shape {
         }
     }
 
-    function intersect(x1, y1, x2, y2, x3, y3, x4, y4)
-    {
+    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
@@ -414,11 +414,10 @@ Shape {
         };
     }
 
-    function moveLine(startX, startY, endX, endY)
-    {
+    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
+        var xOffset = Math.sin(angle) * Math.min(root.radius, root.maxRadius)
+        var yOffset = -Math.cos(angle) * Math.min(root.radius, root.maxRadius)
 
         return {
             startX: startX + xOffset,
@@ -430,22 +429,28 @@ Shape {
 
     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 lengthLine1 = Math.floor(length(movedLine1.endX - movedLine1.startX, movedLine1.endY - movedLine1.startY))
+        var lengthLine2 = Math.floor(length(movedLine2.endX - movedLine2.startX, movedLine2.endY - movedLine2.startY))
+        var lengthLine3 = Math.floor(length(movedLine3.endX - movedLine3.startX, movedLine3.endY - movedLine3.startY))
+
+        var perimeter = lengthLine1 + lengthLine2 + lengthLine3
+        var area = (path.__height) * (path.__width) * 0.5
+
+        root.maxRadius = area * 2 / perimeter
+
+        console.log("max radius", root.maxRadius)
+
         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)
@@ -465,5 +470,4 @@ Shape {
         root.topIntersection2 = Qt.point(rightTop.x + path.__width / 2, rightTop.y)
         root.rightIntersection1 = Qt.point(rightBottom.x + path.__width / 2, rightBottom.y)
     }
-
 }
diff --git a/src/imports/components/designer/CornerRadiusSection.qml b/src/imports/components/designer/CornerRadiusSection.qml
index 1ac1ea0..e8037a5 100644
--- a/src/imports/components/designer/CornerRadiusSection.qml
+++ b/src/imports/components/designer/CornerRadiusSection.qml
@@ -42,11 +42,12 @@ Section {
         SecondColumnLayout {
             SpinBox {
                 implicitWidth: StudioTheme.Values.twoControlColumnWidth
-                            + StudioTheme.Values.actionIndicatorWidth
+                               + StudioTheme.Values.actionIndicatorWidth
                 backendValue: backendValues.topLeftRadius
                 decimals: 1
                 minimumValue: 0
-                maximumValue: 200
+                maximumValue: Math.min(backendValues.height.value,
+                                       backendValues.width.value) / 2
                 stepSize: 1
             }
 
@@ -61,11 +62,12 @@ Section {
 
             SpinBox {
                 implicitWidth: StudioTheme.Values.twoControlColumnWidth
-                            + StudioTheme.Values.actionIndicatorWidth
+                               + StudioTheme.Values.actionIndicatorWidth
                 backendValue: backendValues.topRightRadius
                 decimals: 1
                 minimumValue: 0
-                maximumValue: 200
+                maximumValue: Math.min(backendValues.height.value,
+                                       backendValues.width.value) / 2
                 stepSize: 1
             }
 
@@ -85,11 +87,12 @@ Section {
         SecondColumnLayout {
             SpinBox {
                 implicitWidth: StudioTheme.Values.twoControlColumnWidth
-                            + StudioTheme.Values.actionIndicatorWidth
+                               + StudioTheme.Values.actionIndicatorWidth
                 backendValue: backendValues.bottomLeftRadius
                 decimals: 1
                 minimumValue: 0
-                maximumValue: 200
+                maximumValue: Math.min(backendValues.height.value,
+                                       backendValues.width.value) / 2
                 stepSize: 1
             }
 
@@ -105,11 +108,12 @@ Section {
 
             SpinBox {
                 implicitWidth: StudioTheme.Values.twoControlColumnWidth
-                            + StudioTheme.Values.actionIndicatorWidth
+                               + StudioTheme.Values.actionIndicatorWidth
                 backendValue: backendValues.bottomRightRadius
                 decimals: 1
                 minimumValue: 0
-                maximumValue: 200
+                maximumValue: Math.min(backendValues.height.value,
+                                       backendValues.width.value) / 2
                 stepSize: 1
             }
 
@@ -129,11 +133,12 @@ Section {
         SecondColumnLayout {
             SpinBox {
                 implicitWidth: StudioTheme.Values.twoControlColumnWidth
-                            + StudioTheme.Values.actionIndicatorWidth
+                               + StudioTheme.Values.actionIndicatorWidth
                 backendValue: backendValues.radius
                 decimals: 1
                 minimumValue: 0
-                maximumValue: 200
+                maximumValue: Math.min(backendValues.height.value,
+                                       backendValues.width.value) / 2
                 stepSize: 1
             }
 
diff --git a/src/imports/components/designer/TriangleItemSpecifics.qml b/src/imports/components/designer/TriangleItemSpecifics.qml
index 625b482..9c8d24a 100644
--- a/src/imports/components/designer/TriangleItemSpecifics.qml
+++ b/src/imports/components/designer/TriangleItemSpecifics.qml
@@ -119,7 +119,7 @@ Column {
                                    + StudioTheme.Values.actionIndicatorWidth
                     decimals: 1
                     minimumValue: 0
-                    maximumValue: 10000
+                    maximumValue: backendValues.maxRadius.value
                     stepSize: 1
                 }
 
@@ -137,7 +137,7 @@ Column {
                     implicitWidth: StudioTheme.Values.twoControlColumnWidth
                                    + StudioTheme.Values.actionIndicatorWidth
                     decimals: 1
-                    minimumValue: 0
+                    minimumValue: 1
                     maximumValue: 10000
                     stepSize: 1
                 }