diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/imports/components/BorderItem.qml | 95 | ||||
-rw-r--r-- | src/imports/components/RectangleItem.qml | 96 | ||||
-rw-r--r-- | src/imports/components/designer/CornerRadiusSection.qml | 15 |
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 } |