From 5ba114da668f702d507175200783bcd780924ae0 Mon Sep 17 00:00:00 2001 From: Aleksei German Date: Tue, 4 Apr 2023 17:22:00 +0200 Subject: Add Alternative stroke radius calculation Task-number: QDS-9546 Change-Id: I436ba76e1e2bc006472a4b7bd3e8beaf2001e33b Reviewed-by: Aleksei German --- src/imports/components/BorderItem.qml | 56 ++++++++++++++-------- src/imports/components/RectangleItem.qml | 50 ++++++++++++------- .../components/designer/BorderItemSpecifics.qml | 1 + .../components/designer/RectangleItemSpecifics.qml | 1 + .../components/designer/StrokeDetailsSection.qml | 16 +++++++ .../components/designer/components.metainfo | 2 + 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"; } } } -- cgit v1.2.3