Add Alternative stroke radius calculationqds-4.1

Task-number: QDS-9546
Change-Id: I436ba76e1e2bc006472a4b7bd3e8beaf2001e33b
Reviewed-by: Aleksei German <aleksei.german@qt.io>

6 files changed, 89 insertions, 37 deletions

diff --git a/src/imports/components/BorderItem.qml b/src/imports/components/BorderItem.qml
index cded3f4..5644bbf 100644
--- a/src/imports/components/BorderItem.qml
+++ b/src/imports/components/BorderItem.qml
@@ -351,6 +351,12 @@ Shape {
         return -root.strokeWidth * 0.5
     }
 
+/*!
+    The property changes the way border radius is calculated.
+    Deactivated by default.
+*/
+    property bool adjustBorderRadius: false
+
     Item {
         anchors.fill: parent
         anchors.margins: {
@@ -372,13 +378,23 @@ Shape {
         property int __bottomRightRadius: Math.min(root.bottomRightRadius, path.__maxRadius)
         property int __bottomLeftRadius: Math.min(root.bottomLeftRadius, path.__maxRadius)
 
+        readonly property real __borderRadiusAdjustment: {
+            if (root.adjustBorderRadius) {
+                if (root.borderMode === 1)
+                    return (root.strokeWidth * 0.5)
+                if (root.borderMode === 2)
+                    return root.strokeWidth
+            }
+            return 0
+        }
+
         joinStyle: ShapePath.MiterJoin
 
         strokeWidth: 4
         strokeColor: "red"
         fillColor: "transparent"
 
-        startX: path.__topLeftRadius + root.borderOffset
+        startX: path.__topLeftRadius + root.borderOffset + path.__borderRadiusAdjustment
         startY: root.borderOffset
     }
 
@@ -393,13 +409,13 @@ Shape {
         // Top line
         if (root.drawTop) {
             let pathLine = Qt.createQmlObject('import QtQuick 2.15; PathLine {}', path)
-            pathLine.x = Qt.binding(function() { return root.width - path.__topRightRadius - root.borderOffset })
+            pathLine.x = Qt.binding(function() { return root.width - path.__topRightRadius - root.borderOffset - path.__borderRadiusAdjustment })
             pathLine.y = Qt.binding(function() { return root.borderOffset })
             path.pathElements.push(pathLine)
         } else {
             let pathMove = Qt.createQmlObject('import QtQuick 2.15; PathMove {}', path)
             pathMove.x = Qt.binding(function() { return root.width - root.borderOffset })
-            pathMove.y = Qt.binding(function() { return path.__topRightRadius + root.borderOffset })
+            pathMove.y = Qt.binding(function() { return path.__topRightRadius + root.borderOffset + path.__borderRadiusAdjustment })
             path.pathElements.push(pathMove)
         }
 
@@ -407,9 +423,9 @@ Shape {
         if (root.drawTop && root.drawRight) {
             let pathArc = Qt.createQmlObject('import QtQuick 2.15; PathArc {}', path)
             pathArc.x = Qt.binding(function() { return root.width - root.borderOffset })
-            pathArc.y = Qt.binding(function() { return path.__topRightRadius + root.borderOffset })
-            pathArc.radiusX = Qt.binding(function() { return root.topRightBevel ? 50000 : path.__topRightRadius })
-            pathArc.radiusY = Qt.binding(function() { return root.topRightBevel ? 50000 : path.__topRightRadius })
+            pathArc.y = Qt.binding(function() { return path.__topRightRadius + root.borderOffset + path.__borderRadiusAdjustment })
+            pathArc.radiusX = Qt.binding(function() { return root.topRightBevel ? 50000 : path.__topRightRadius + path.__borderRadiusAdjustment })
+            pathArc.radiusY = Qt.binding(function() { return root.topRightBevel ? 50000 : path.__topRightRadius + path.__borderRadiusAdjustment })
             path.pathElements.push(pathArc)
         }
 
@@ -417,11 +433,11 @@ Shape {
         if (root.drawRight) {
             let pathLine = Qt.createQmlObject('import QtQuick 2.15; PathLine {}', path)
             pathLine.x = Qt.binding(function() { return root.width - root.borderOffset })
-            pathLine.y = Qt.binding(function() { return root.height - path.__bottomRightRadius - root.borderOffset })
+            pathLine.y = Qt.binding(function() { return root.height - path.__bottomRightRadius - root.borderOffset - path.__borderRadiusAdjustment })
             path.pathElements.push(pathLine)
         } else {
             let pathMove = Qt.createQmlObject('import QtQuick 2.15; PathMove {}', path)
-            pathMove.x = Qt.binding(function() { return root.width - path.__bottomRightRadius - root.borderOffset })
+            pathMove.x = Qt.binding(function() { return root.width - path.__bottomRightRadius - root.borderOffset - path.__borderRadiusAdjustment })
             pathMove.y = Qt.binding(function() { return root.height - root.borderOffset })
             path.pathElements.push(pathMove)
         }
@@ -429,23 +445,23 @@ Shape {
         // Bottom right corner
         if (root.drawBottom && root.drawRight) {
             let pathArc = Qt.createQmlObject('import QtQuick 2.15; PathArc {}', path)
-            pathArc.x = Qt.binding(function() { return root.width - path.__bottomRightRadius - root.borderOffset })
+            pathArc.x = Qt.binding(function() { return root.width - path.__bottomRightRadius - root.borderOffset - path.__borderRadiusAdjustment })
             pathArc.y = Qt.binding(function() { return root.height - root.borderOffset })
-            pathArc.radiusX = Qt.binding(function() { return root.bottomRightBevel ? 50000 : path.__bottomRightRadius })
-            pathArc.radiusY = Qt.binding(function() { return root.bottomRightBevel ? 50000 : path.__bottomRightRadius })
+            pathArc.radiusX = Qt.binding(function() { return root.bottomRightBevel ? 50000 : path.__bottomRightRadius + path.__borderRadiusAdjustment })
+            pathArc.radiusY = Qt.binding(function() { return root.bottomRightBevel ? 50000 : path.__bottomRightRadius + path.__borderRadiusAdjustment })
             path.pathElements.push(pathArc)
         }
 
         // Bottom line
         if (root.drawBottom) {
             let pathLine = Qt.createQmlObject('import QtQuick 2.15; PathLine {}', path)
-            pathLine.x = Qt.binding(function() { return path.__bottomLeftRadius + root.borderOffset })
+            pathLine.x = Qt.binding(function() { return path.__bottomLeftRadius + root.borderOffset + path.__borderRadiusAdjustment })
             pathLine.y = Qt.binding(function() { return root.height - root.borderOffset })
             path.pathElements.push(pathLine)
         } else {
             let pathMove = Qt.createQmlObject('import QtQuick 2.15; PathMove {}', path)
             pathMove.x = Qt.binding(function() { return root.borderOffset })
-            pathMove.y = Qt.binding(function() { return root.height - path.__bottomLeftRadius - root.borderOffset })
+            pathMove.y = Qt.binding(function() { return root.height - path.__bottomLeftRadius - root.borderOffset - path.__borderRadiusAdjustment })
             path.pathElements.push(pathMove)
         }
 
@@ -453,9 +469,9 @@ Shape {
         if (root.drawBottom && root.drawLeft) {
             let pathArc = Qt.createQmlObject('import QtQuick 2.15; PathArc {}', path)
             pathArc.x = Qt.binding(function() { return root.borderOffset })
-            pathArc.y = Qt.binding(function() { return root.height - path.__bottomLeftRadius - root.borderOffset })
-            pathArc.radiusX = Qt.binding(function() { return root.bottomLeftBevel ? 50000 : path.__bottomLeftRadius })
-            pathArc.radiusY = Qt.binding(function() { return root.bottomLeftBevel ? 50000 : path.__bottomLeftRadius })
+            pathArc.y = Qt.binding(function() { return root.height - path.__bottomLeftRadius - root.borderOffset - path.__borderRadiusAdjustment })
+            pathArc.radiusX = Qt.binding(function() { return root.bottomLeftBevel ? 50000 : path.__bottomLeftRadius + path.__borderRadiusAdjustment })
+            pathArc.radiusY = Qt.binding(function() { return root.bottomLeftBevel ? 50000 : path.__bottomLeftRadius + path.__borderRadiusAdjustment })
             path.pathElements.push(pathArc)
         }
 
@@ -463,7 +479,7 @@ Shape {
         if (root.drawLeft) {
             let pathLine = Qt.createQmlObject('import QtQuick 2.15; PathLine {}', path)
             pathLine.x = Qt.binding(function() { return root.borderOffset })
-            pathLine.y = Qt.binding(function() { return path.__topLeftRadius + root.borderOffset })
+            pathLine.y = Qt.binding(function() { return path.__topLeftRadius + root.borderOffset + path.__borderRadiusAdjustment })
             path.pathElements.push(pathLine)
         }
         // No need to use PathMove, if left line shouldn't be drawn we just leave the shape open.
@@ -471,10 +487,10 @@ Shape {
         // Top left corner
         if (root.drawTop && root.drawLeft) {
             let pathArc = Qt.createQmlObject('import QtQuick 2.15; PathArc {}', path)
-            pathArc.x = Qt.binding(function() { return path.__topLeftRadius + root.borderOffset })
+            pathArc.x = Qt.binding(function() { return path.__topLeftRadius + root.borderOffset + path.__borderRadiusAdjustment })
             pathArc.y = Qt.binding(function() { return root.borderOffset })
-            pathArc.radiusX = Qt.binding(function() { return root.topLeftBevel ? 50000 : path.__topLeftRadius })
-            pathArc.radiusY = Qt.binding(function() { return root.topLeftBevel ? 50000 : path.__topLeftRadius })
+            pathArc.radiusX = Qt.binding(function() { return root.topLeftBevel ? 50000 : path.__topLeftRadius + path.__borderRadiusAdjustment })
+            pathArc.radiusY = Qt.binding(function() { return root.topLeftBevel ? 50000 : path.__topLeftRadius + path.__borderRadiusAdjustment })
             path.pathElements.push(pathArc)
         }
     }
diff --git a/src/imports/components/RectangleItem.qml b/src/imports/components/RectangleItem.qml
index c6da4fb..7d95d77 100644
--- a/src/imports/components/RectangleItem.qml
+++ b/src/imports/components/RectangleItem.qml
@@ -334,6 +334,12 @@ Shape {
         return -root.strokeWidth * 0.5
     }
 
+/*!
+    The property changes the way border radius is calculated.
+    Deactivated by default.
+*/
+    property bool adjustBorderRadius: false
+
     Item {
         anchors.fill: parent
         anchors.margins: {
@@ -355,64 +361,74 @@ Shape {
         property int __bottomRightRadius: Math.min(root.bottomRightRadius, path.__maxRadius)
         property int __bottomLeftRadius: Math.min(root.bottomLeftRadius, path.__maxRadius)
 
+        readonly property real __borderRadiusAdjustment: {
+            if (root.adjustBorderRadius) {
+                if (root.borderMode === 1)
+                    return (root.strokeWidth * 0.5)
+                if (root.borderMode === 2)
+                    return root.strokeWidth
+            }
+            return 0
+        }
+
         joinStyle: ShapePath.MiterJoin
 
         strokeWidth: 4
         strokeColor: "red"
 
-        startX: path.__topLeftRadius + root.borderOffset
+        startX: path.__topLeftRadius + root.borderOffset + path.__borderRadiusAdjustment
         startY: root.borderOffset
 
         PathLine {
-            x: root.width - path.__topRightRadius - root.borderOffset
+            x: root.width - path.__topRightRadius - root.borderOffset - path.__borderRadiusAdjustment
             y: root.borderOffset
         }
 
         PathArc {
             x: root.width - root.borderOffset
-            y: path.__topRightRadius + root.borderOffset
+            y: path.__topRightRadius + root.borderOffset + path.__borderRadiusAdjustment
 
-            radiusX: root.topRightBevel ? 50000 : path.__topRightRadius
-            radiusY: root.topRightBevel ? 50000 : path.__topRightRadius
+            radiusX: root.topRightBevel ? 50000 : path.__topRightRadius + path.__borderRadiusAdjustment
+            radiusY: root.topRightBevel ? 50000 : path.__topRightRadius + path.__borderRadiusAdjustment
         }
 
         PathLine {
             x: root.width - root.borderOffset
-            y: root.height - path.__bottomRightRadius - root.borderOffset
+            y: root.height - path.__bottomRightRadius - root.borderOffset - path.__borderRadiusAdjustment
         }
 
         PathArc {
-            x: root.width - path.__bottomRightRadius - root.borderOffset
+            x: root.width - path.__bottomRightRadius - root.borderOffset - path.__borderRadiusAdjustment
             y: root.height - root.borderOffset
 
-            radiusX: root.bottomRightBevel ? 50000 : path.__bottomRightRadius
-            radiusY: root.bottomRightBevel ? 50000 : path.__bottomRightRadius
+            radiusX: root.bottomRightBevel ? 50000 : path.__bottomRightRadius + path.__borderRadiusAdjustment
+            radiusY: root.bottomRightBevel ? 50000 : path.__bottomRightRadius + path.__borderRadiusAdjustment
         }
 
         PathLine {
-            x: path.__bottomLeftRadius + root.borderOffset
+            x: path.__bottomLeftRadius + root.borderOffset + path.__borderRadiusAdjustment
             y: root.height - root.borderOffset
         }
 
         PathArc {
             x: root.borderOffset
-            y: root.height - path.__bottomLeftRadius - root.borderOffset
+            y: root.height - path.__bottomLeftRadius - root.borderOffset - path.__borderRadiusAdjustment
 
-            radiusX: root.bottomLeftBevel ? 50000 : path.__bottomLeftRadius
-            radiusY: root.bottomLeftBevel ? 50000 : path.__bottomLeftRadius
+            radiusX: root.bottomLeftBevel ? 50000 : path.__bottomLeftRadius + path.__borderRadiusAdjustment
+            radiusY: root.bottomLeftBevel ? 50000 : path.__bottomLeftRadius + path.__borderRadiusAdjustment
         }
 
         PathLine {
             x: root.borderOffset
-            y: path.__topLeftRadius + root.borderOffset
+            y: path.__topLeftRadius + root.borderOffset + path.__borderRadiusAdjustment
         }
 
         PathArc {
-            x: path.__topLeftRadius + root.borderOffset
+            x: path.__topLeftRadius + root.borderOffset + path.__borderRadiusAdjustment
             y: root.borderOffset
 
-            radiusX: root.topLeftBevel ? 50000 : path.__topLeftRadius
-            radiusY: root.topLeftBevel ? 50000 : path.__topLeftRadius
+            radiusX: root.topLeftBevel ? 50000 : path.__topLeftRadius + path.__borderRadiusAdjustment
+            radiusY: root.topLeftBevel ? 50000 : path.__topLeftRadius + path.__borderRadiusAdjustment
         }
     }
 }
diff --git a/src/imports/components/designer/BorderItemSpecifics.qml b/src/imports/components/designer/BorderItemSpecifics.qml
index 7927c78..f5eea2b 100644
--- a/src/imports/components/designer/BorderItemSpecifics.qml
+++ b/src/imports/components/designer/BorderItemSpecifics.qml
@@ -179,6 +179,7 @@ Column {
 
     StrokeDetailsSection {
         showBorderMode: true
+        showRadiusAdjustmentment: true
         showJoinStyle: true
     }
 }
diff --git a/src/imports/components/designer/RectangleItemSpecifics.qml b/src/imports/components/designer/RectangleItemSpecifics.qml
index 0af8eeb..85aacac 100644
--- a/src/imports/components/designer/RectangleItemSpecifics.qml
+++ b/src/imports/components/designer/RectangleItemSpecifics.qml
@@ -108,6 +108,7 @@ Column {
 
     StrokeDetailsSection {
         showBorderMode: true
+        showRadiusAdjustmentment: true
         showJoinStyle: true
         showCapStyle: false
     }
diff --git a/src/imports/components/designer/StrokeDetailsSection.qml b/src/imports/components/designer/StrokeDetailsSection.qml
index 96e8a87..3e6c599 100644
--- a/src/imports/components/designer/StrokeDetailsSection.qml
+++ b/src/imports/components/designer/StrokeDetailsSection.qml
@@ -40,6 +40,7 @@ Section {
     property bool showCapStyle: true
 
     property bool showBorderMode: false
+    property bool showRadiusAdjustmentment: false
     property bool showJoinStyle: false
     property bool showHideLine: false
 
@@ -56,6 +57,21 @@ Section {
             ExpandingSpacer {}
         }
 
+        PropertyLabel {
+            text: qsTr("Adjust radius")
+            visible: showRadiusAdjustmentment
+        }
+
+        SecondColumnLayout {
+            visible: showRadiusAdjustmentment
+            CheckBox {
+                id: adjustRadiusBox
+                text: qsTr("Adjust border radius")
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                backendValue: backendValues.adjustBorderRadius
+            }
+        }
+
         PropertyLabel { text: qsTr("Stroke style") }
 
         SecondColumnLayout {
diff --git a/src/imports/components/designer/components.metainfo b/src/imports/components/designer/components.metainfo
index adbd724..b773455 100644
--- a/src/imports/components/designer/components.metainfo
+++ b/src/imports/components/designer/components.metainfo
@@ -88,6 +88,7 @@ MetaInfo {
             libraryIcon: "images/custom-rectangle-24px.png"
             version: "1.0"
             requiredImport: "QtQuick.Studio.Components"
+            Property { name: "adjustBorderRadius"; type: "bool"; value: "true"; }
         }
     }
 
@@ -127,6 +128,7 @@ MetaInfo {
             libraryIcon: "images/custom-border-24px.png"
             version: "1.0"
             requiredImport: "QtQuick.Studio.Components"
+            Property { name: "adjustBorderRadius"; type: "bool"; value: "true"; }
         }
     }