diff --git a/src/controls/ShadowedImage.qml b/src/controls/ShadowedImage.qml --- a/src/controls/ShadowedImage.qml +++ b/src/controls/ShadowedImage.qml @@ -12,6 +12,7 @@ property alias radius: shadowRectangle.radius property alias shadow: shadowRectangle.shadow property alias border: shadowRectangle.border + property alias corners: shadowRectangle.corners property alias source: image.source ShadowedTexture { diff --git a/src/kirigamiplugin.cpp b/src/kirigamiplugin.cpp --- a/src/kirigamiplugin.cpp +++ b/src/kirigamiplugin.cpp @@ -245,6 +245,8 @@ qmlRegisterUncreatableType(uri, 2, 12, "BorderGroup", QStringLiteral("Used as grouped property")); qmlRegisterUncreatableType(uri, 2, 12, "ShadowGroup", QStringLiteral("Used as grouped property")); + qmlRegisterUncreatableType(uri, 2, 12, "CornersGroup", QStringLiteral("Used as grouped property")); + qmlProtectModule(uri, 2); } diff --git a/src/scenegraph/shaders/shadowedborderrectangle.frag b/src/scenegraph/shaders/shadowedborderrectangle.frag --- a/src/scenegraph/shaders/shadowedborderrectangle.frag +++ b/src/scenegraph/shaders/shadowedborderrectangle.frag @@ -11,7 +11,7 @@ uniform lowp float opacity; uniform lowp float size; -uniform lowp float radius; +uniform lowp vec4 radius; uniform lowp vec4 color; uniform lowp vec4 shadowColor; uniform lowp vec2 offset; @@ -36,18 +36,18 @@ // Correction factor to round the corners of a larger shadow. // We want to account for size in regards to shadow radius, so that a larger shadow is // more rounded, but only if we are not already rounding the corners due to corner radius. - lowp float size_factor = 0.5 * (minimum_shadow_radius / max(radius, minimum_shadow_radius)); - lowp float shadow_radius = radius + size * size_factor; + lowp vec4 size_factor = 0.5 * (minimum_shadow_radius / max(radius, minimum_shadow_radius)); + lowp vec4 shadow_radius = radius + size * size_factor; lowp vec4 col = vec4(0.0); // Calculate the shadow's distance field. - lowp float shadow = sdf_rounded_rectangle(uv - offset * 2.0 * inverse_scale, aspect * inverse_scale, vec4(shadow_radius * inverse_scale)); + lowp float shadow = sdf_rounded_rectangle(uv - offset * 2.0 * inverse_scale, aspect * inverse_scale, shadow_radius * inverse_scale); // Render it, interpolating the color over the distance. col = mix(col, shadowColor * sign(size), 1.0 - smoothstep(-size * 0.5, size * 0.5, shadow)); // Scale corrected corner radius - lowp vec4 corner_radius = vec4(radius * inverse_scale); + lowp vec4 corner_radius = radius * inverse_scale; // Calculate the outer rectangle distance field. lowp float outer_rect = sdf_rounded_rectangle(uv, aspect * inverse_scale, corner_radius); @@ -61,7 +61,7 @@ // Calculate the inner rectangle distance field. // This uses a reduced corner radius because the inner corners need to be smaller than the outer corners. - lowp vec4 inner_radius = vec4((radius - borderWidth * 2.0) * inverse_scale); + lowp vec4 inner_radius = (radius - borderWidth * 2.0) * inverse_scale; lowp float inner_rect = sdf_rounded_rectangle(uv, (aspect - borderWidth * 2.0) * inverse_scale, inner_radius); // Like above, but this time cut out the inner rectangle. diff --git a/src/scenegraph/shaders/shadowedbordertexture.frag b/src/scenegraph/shaders/shadowedbordertexture.frag --- a/src/scenegraph/shaders/shadowedbordertexture.frag +++ b/src/scenegraph/shaders/shadowedbordertexture.frag @@ -11,7 +11,7 @@ uniform lowp float opacity; uniform lowp float size; -uniform lowp float radius; +uniform lowp vec4 radius; uniform lowp vec4 color; uniform lowp vec4 shadowColor; uniform lowp vec2 offset; @@ -47,18 +47,18 @@ // Correction factor to round the corners of a larger shadow. // We want to account for size in regards to shadow radius, so that a larger shadow is // more rounded, but only if we are not already rounding the corners due to corner radius. - lowp float size_factor = 0.5 * (minimum_shadow_radius / max(radius, minimum_shadow_radius)); - lowp float shadow_radius = radius + size * size_factor; + lowp vec4 size_factor = 0.5 * (minimum_shadow_radius / max(radius, minimum_shadow_radius)); + lowp vec4 shadow_radius = radius + size * size_factor; lowp vec4 col = vec4(0.0); // Calculate the shadow's distance field. - lowp float shadow = sdf_rounded_rectangle(uv - offset * 2.0 * inverse_scale, aspect * inverse_scale, vec4(shadow_radius * inverse_scale)); + lowp float shadow = sdf_rounded_rectangle(uv - offset * 2.0 * inverse_scale, aspect * inverse_scale, shadow_radius * inverse_scale); // Render it, interpolating the color over the distance. col = mix(col, shadowColor * sign(size), 1.0 - smoothstep(-size * 0.5, size * 0.5, shadow)); // Scale corrected corner radius - lowp vec4 corner_radius = vec4(radius * inverse_scale); + lowp vec4 corner_radius = radius * inverse_scale; // Calculate the outer rectangle distance field. lowp float outer_rect = sdf_rounded_rectangle(uv, aspect * inverse_scale, corner_radius); @@ -72,15 +72,16 @@ // Calculate the inner rectangle distance field. // This uses a reduced corner radius because the inner corners need to be smaller than the outer corners. - lowp vec4 inner_radius = vec4((radius - borderWidth * 2.0) * inverse_scale); + lowp vec4 inner_radius = (radius - borderWidth * 2.0) * inverse_scale; lowp float inner_rect = sdf_rounded_rectangle(uv, (aspect - borderWidth * 2.0) * inverse_scale, inner_radius); // Like above, but this time cut out the inner rectangle. col = sdf_render(inner_rect, col, vec4(0.0)); // Finally, render the inner rectangle. col = sdf_render(inner_rect, col, color); + // Slightly increase the size of the inner rectangle, to avoid issues with anti-aliasing. inner_rect = sdf_rounded_rectangle(uv, (aspect - borderWidth * 2.0 + 0.005) * inverse_scale, inner_radius); // Sample the texture, then blend it on top of the background color. diff --git a/src/scenegraph/shaders/shadowedrectangle.frag b/src/scenegraph/shaders/shadowedrectangle.frag --- a/src/scenegraph/shaders/shadowedrectangle.frag +++ b/src/scenegraph/shaders/shadowedrectangle.frag @@ -10,7 +10,7 @@ uniform lowp float opacity; uniform lowp float size; -uniform lowp float radius; +uniform lowp vec4 radius; uniform lowp vec4 color; uniform lowp vec4 shadowColor; uniform lowp vec2 offset; @@ -33,18 +33,18 @@ // Correction factor to round the corners of a larger shadow. // We want to account for size in regards to shadow radius, so that a larger shadow is // more rounded, but only if we are not already rounding the corners due to corner radius. - lowp float size_factor = 0.5 * (minimum_shadow_radius / max(radius, minimum_shadow_radius)); - lowp float shadow_radius = radius + size * size_factor; + lowp vec4 size_factor = 0.5 * (minimum_shadow_radius / max(radius, minimum_shadow_radius)); + lowp vec4 shadow_radius = radius + size * size_factor; lowp vec4 col = vec4(0.0); // Calculate the shadow's distance field. - lowp float shadow = sdf_rounded_rectangle(uv - offset * 2.0 * inverse_scale, aspect * inverse_scale, vec4(shadow_radius * inverse_scale)); + lowp float shadow = sdf_rounded_rectangle(uv - offset * 2.0 * inverse_scale, aspect * inverse_scale, shadow_radius * inverse_scale); // Render it, interpolating the color over the distance. col = mix(col, shadowColor * sign(size), 1.0 - smoothstep(-size * 0.5, size * 0.5, shadow)); // Calculate the main rectangle distance field. - lowp float rect = sdf_rounded_rectangle(uv, aspect * inverse_scale, vec4(radius * inverse_scale)); + lowp float rect = sdf_rounded_rectangle(uv, aspect * inverse_scale, radius * inverse_scale); // First, remove anything that was rendered by the shadow if it is inside the rectangle. // This allows us to use colors with alpha without rendering artifacts. diff --git a/src/scenegraph/shaders/shadowedtexture.frag b/src/scenegraph/shaders/shadowedtexture.frag --- a/src/scenegraph/shaders/shadowedtexture.frag +++ b/src/scenegraph/shaders/shadowedtexture.frag @@ -11,7 +11,7 @@ uniform lowp float opacity; uniform lowp float size; -uniform lowp float radius; +uniform lowp vec4 radius; uniform lowp vec4 color; uniform lowp vec4 shadowColor; uniform lowp vec2 offset; @@ -45,18 +45,18 @@ // Correction factor to round the corners of a larger shadow. // We want to account for size in regards to shadow radius, so that a larger shadow is // more rounded, but only if we are not already rounding the corners due to corner radius. - lowp float size_factor = 0.5 * (minimum_shadow_radius / max(radius, minimum_shadow_radius)); - lowp float shadow_radius = radius + size * size_factor; + lowp vec4 size_factor = 0.5 * (minimum_shadow_radius / max(radius, minimum_shadow_radius)); + lowp vec4 shadow_radius = radius + size * size_factor; lowp vec4 col = vec4(0.0); // Calculate the shadow's distance field. - lowp float shadow = sdf_rounded_rectangle(uv - offset * 2.0 * inverse_scale, aspect * inverse_scale, vec4(shadow_radius * inverse_scale)); + lowp float shadow = sdf_rounded_rectangle(uv - offset * 2.0 * inverse_scale, aspect * inverse_scale, shadow_radius * inverse_scale); // Render it, interpolating the color over the distance. col = mix(col, shadowColor * sign(size), 1.0 - smoothstep(-size * 0.5, size * 0.5, shadow)); // Calculate the main rectangle distance field. - lowp float rect = sdf_rounded_rectangle(uv, aspect * inverse_scale, vec4(radius * inverse_scale)); + lowp float rect = sdf_rounded_rectangle(uv, aspect * inverse_scale, radius * inverse_scale); // First, remove anything that was rendered by the shadow if it is inside the rectangle. // This allows us to use colors with alpha without rendering artifacts. @@ -69,7 +69,6 @@ lowp vec2 texture_uv = ((uv / aspect) + (1.0 * inverse_scale)) / (2.0 * inverse_scale); lowp vec4 texture_color = sample_texture(textureSource, texture_uv); col = sdf_render(rect, col, texture_color, texture_color.a, sdf_default_smoothing); -// col = sdf_render(rect, col, vec4(texture_uv / inverse_scale, sign(texture_uv).x, 1.0)); #ifdef CORE_PROFILE out_color = col * opacity; diff --git a/src/scenegraph/shadowedrectanglematerial.h b/src/scenegraph/shadowedrectanglematerial.h --- a/src/scenegraph/shadowedrectanglematerial.h +++ b/src/scenegraph/shadowedrectanglematerial.h @@ -27,7 +27,7 @@ QVector2D aspect = QVector2D{1.0, 1.0}; float size = 0.0; - float radius = 0.0; + QVector4D radius = QVector4D{0.0, 0.0, 0.0, 0.0}; QColor color = Qt::white; QColor shadowColor = Qt::black; QVector2D offset; diff --git a/src/scenegraph/shadowedrectanglenode.h b/src/scenegraph/shadowedrectanglenode.h --- a/src/scenegraph/shadowedrectanglenode.h +++ b/src/scenegraph/shadowedrectanglenode.h @@ -9,6 +9,7 @@ #include #include #include +#include class QSGMaterialType; class ShadowedRectangleMaterial; @@ -40,7 +41,7 @@ void setRect(const QRectF &rect); void setSize(qreal size); - void setRadius(qreal radius); + void setRadius(const QVector4D &radius); void setColor(const QColor &color); void setShadowColor(const QColor &color); void setOffset(const QVector2D &offset); @@ -67,7 +68,7 @@ private: QRectF m_rect; qreal m_size = 0.0; - qreal m_radius = 0.0; + QVector4D m_radius = QVector4D{0.0, 0.0, 0.0, 0.0}; QVector2D m_offset = QVector2D{0.0, 0.0}; QVector2D m_aspect = QVector2D{1.0, 1.0}; qreal m_borderWidth = 0.0; diff --git a/src/scenegraph/shadowedrectanglenode.cpp b/src/scenegraph/shadowedrectanglenode.cpp --- a/src/scenegraph/shadowedrectanglenode.cpp +++ b/src/scenegraph/shadowedrectanglenode.cpp @@ -86,13 +86,18 @@ } } -void ShadowedRectangleNode::setRadius(qreal radius) -{ - auto minDimension = std::min(m_rect.width(), m_rect.height()); - float uniformRadius = radius * 2.0 / minDimension; - - if (!qFuzzyCompare(m_material->radius, uniformRadius)) { - m_material->radius = std::min(uniformRadius, 1.0f); +void ShadowedRectangleNode::setRadius(const QVector4D &radius) +{ + float minDimension = std::min(m_rect.width(), m_rect.height()); + auto uniformRadius = QVector4D{ + std::min(radius.x() * 2.0f / minDimension, 1.0f), + std::min(radius.y() * 2.0f / minDimension, 1.0f), + std::min(radius.z() * 2.0f / minDimension, 1.0f), + std::min(radius.w() * 2.0f / minDimension, 1.0f) + }; + + if (m_material->radius != uniformRadius) { + m_material->radius = uniformRadius; markDirty(QSGNode::DirtyMaterial); m_radius = radius; } diff --git a/src/shadowedrectangle.h b/src/shadowedrectangle.h --- a/src/shadowedrectangle.h +++ b/src/shadowedrectangle.h @@ -108,6 +108,63 @@ QColor m_color = Qt::black; }; +/** + * Grouped property for corner radius. + */ +class CornersGroup : public QObject +{ + Q_OBJECT + /** + * The radius of the top-left corner. + * + * In pixels. Defaults to -1, which indicates this value should not be used. + */ + Q_PROPERTY(qreal topLeftRadius READ topLeft WRITE setTopLeft NOTIFY changed) + /** + * The radius of the top-right corner. + * + * In pixels. Defaults to -1, which indicates this value should not be used. + */ + Q_PROPERTY(qreal topRightRadius READ topRight WRITE setTopRight NOTIFY changed) + /** + * The radius of the bottom-left corner. + * + * In pixels. Defaults to -1, which indicates this value should not be used. + */ + Q_PROPERTY(qreal bottomLeftRadius READ bottomLeft WRITE setBottomLeft NOTIFY changed) + /** + * The radius of the bottom-right corner. + * + * In pixels. Defaults to -1, which indicates this value should not be used. + */ + Q_PROPERTY(qreal bottomRightRadius READ bottomRight WRITE setBottomRight NOTIFY changed) + +public: + explicit CornersGroup(QObject *parent = nullptr); + + qreal topLeft() const; + void setTopLeft(qreal newTopLeft); + + qreal topRight() const; + void setTopRight(qreal newTopRight); + + qreal bottomLeft() const; + void setBottomLeft(qreal newBottomLeft); + + qreal bottomRight() const; + void setBottomRight(qreal newBottomRight); + + Q_SIGNAL void changed(); + + QVector4D toVector4D(float all) const; + +private: + float m_topLeft = -1.0; + float m_topRight = -1.0; + float m_bottomLeft = -1.0; + float m_bottomRight = -1.0; +}; + /** * A rectangle with a shadow. * @@ -124,7 +181,10 @@ /** * Corner radius of the rectangle. * - * This is the amount of rounding to apply to the rectangle's corners, in pixels. + * This is the amount of rounding to apply to all of the rectangle's + * corners, in pixels. Individual corners can have a different radius, see + * \property corners. + * * The default is 0. */ Q_PROPERTY(qreal radius READ radius WRITE setRadius NOTIFY radiusChanged) @@ -146,13 +206,23 @@ * \sa ShadowGroup */ Q_PROPERTY(ShadowGroup *shadow READ shadow CONSTANT) + /** + * Corner radius. + * + * Note that the values from this group override \property radius for the + * corner they affect. + * + * \sa CornerGroup + */ + Q_PROPERTY(CornersGroup *corners READ corners CONSTANT) public: ShadowedRectangle(QQuickItem *parent = nullptr); ~ShadowedRectangle() override; BorderGroup *border() const; ShadowGroup *shadow() const; + CornersGroup *corners() const; qreal radius() const; void setRadius(qreal newRadius); @@ -172,6 +242,7 @@ void checkSoftwareItem(); const std::unique_ptr m_border; const std::unique_ptr m_shadow; + const std::unique_ptr m_corners; qreal m_radius = 0.0; QColor m_color = Qt::white; PaintedRectangleItem *m_softwareItem = nullptr; diff --git a/src/shadowedrectangle.cpp b/src/shadowedrectangle.cpp --- a/src/shadowedrectangle.cpp +++ b/src/shadowedrectangle.cpp @@ -113,13 +113,92 @@ Q_EMIT changed(); } +CornersGroup::CornersGroup(QObject* parent) + : QObject(parent) +{ +} + +qreal CornersGroup::topLeft() const +{ + return m_topLeft; +} + +void CornersGroup::setTopLeft(qreal newTopLeft) +{ + if (newTopLeft == m_topLeft) { + return; + } + + m_topLeft = newTopLeft; + Q_EMIT changed(); +} + +qreal CornersGroup::topRight() const +{ + return m_topRight; +} + +void CornersGroup::setTopRight(qreal newTopRight) +{ + if (newTopRight == m_topRight) { + return; + } + + m_topRight = newTopRight; + Q_EMIT changed(); +} + +qreal CornersGroup::bottomLeft() const +{ + return m_bottomLeft; +} + +void CornersGroup::setBottomLeft(qreal newBottomLeft) +{ + if (newBottomLeft == m_bottomLeft) { + return; + } + + m_bottomLeft = newBottomLeft; + Q_EMIT changed(); +} + +qreal CornersGroup::bottomRight() const +{ + return m_bottomRight; +} + +void CornersGroup::setBottomRight(qreal newBottomRight) +{ + if (newBottomRight == m_bottomRight) { + return; + } + + m_bottomRight = newBottomRight; + Q_EMIT changed(); +} + +QVector4D CornersGroup::toVector4D(float all) const +{ + return QVector4D{ + m_bottomRight < 0.0 ? all : m_bottomRight, + m_topRight < 0.0 ? all : m_topRight, + m_bottomLeft < 0.0 ? all : m_bottomLeft, + m_topLeft < 0.0 ? all : m_topLeft + }; +} + ShadowedRectangle::ShadowedRectangle(QQuickItem *parentItem) - : QQuickItem(parentItem), m_border(new BorderGroup), m_shadow(new ShadowGroup) + : QQuickItem(parentItem) + , m_border(new BorderGroup) + , m_shadow(new ShadowGroup) + , m_corners(new CornersGroup) { setFlag(QQuickItem::ItemHasContents, true); connect(m_border.get(), &BorderGroup::changed, this, &ShadowedRectangle::update); connect(m_shadow.get(), &ShadowGroup::changed, this, &ShadowedRectangle::update); + connect(m_corners.get(), &CornersGroup::changed, this, &ShadowedRectangle::update); } ShadowedRectangle::~ShadowedRectangle() @@ -136,6 +215,11 @@ return m_shadow.get(); } +CornersGroup *ShadowedRectangle::corners() const +{ + return m_corners.get(); +} + qreal ShadowedRectangle::radius() const { return m_radius; @@ -194,7 +278,7 @@ shadowNode->setBorderEnabled(m_border->isEnabled()); shadowNode->setRect(boundingRect()); shadowNode->setSize(m_shadow->size()); - shadowNode->setRadius(m_radius); + shadowNode->setRadius(m_corners->toVector4D(m_radius)); shadowNode->setOffset(QVector2D{float(m_shadow->xOffset()), float(m_shadow->yOffset())}); shadowNode->setColor(m_color); shadowNode->setShadowColor(m_shadow->color()); diff --git a/src/shadowedtexture.h b/src/shadowedtexture.h --- a/src/shadowedtexture.h +++ b/src/shadowedtexture.h @@ -32,10 +32,7 @@ void setSource(QQuickItem *newSource); Q_SIGNAL void sourceChanged(); -// void componentComplete() override; - protected: -// void itemChange(QQuickItem::ItemChange change, const QQuickItem::ItemChangeData &value) override; QSGNode *updatePaintNode(QSGNode *node, QQuickItem::UpdatePaintNodeData *data) override; private: diff --git a/src/shadowedtexture.cpp b/src/shadowedtexture.cpp --- a/src/shadowedtexture.cpp +++ b/src/shadowedtexture.cpp @@ -41,20 +41,6 @@ Q_EMIT sourceChanged(); } -// void ShadowedRectangle::componentComplete() -// { -// QQuickItem::componentComplete(); -// -// checkSoftwareItem(); -// } -// -// void ShadowedRectangle::itemChange(QQuickItem::ItemChange change, const QQuickItem::ItemChangeData &value) -// { -// if (change == QQuickItem::ItemSceneChange && value.window) { -// checkSoftwareItem(); -// } -// } - QSGNode *ShadowedTexture::updatePaintNode(QSGNode *node, QQuickItem::UpdatePaintNodeData *data) { Q_UNUSED(data); @@ -67,7 +53,7 @@ shadowNode->setBorderEnabled(border()->isEnabled()); shadowNode->setRect(boundingRect()); shadowNode->setSize(shadow()->size()); - shadowNode->setRadius(radius()); + shadowNode->setRadius(corners()->toVector4D(radius())); shadowNode->setOffset(QVector2D{float(shadow()->xOffset()), float(shadow()->yOffset())}); shadowNode->setColor(color()); shadowNode->setShadowColor(shadow()->color()); diff --git a/tests/ShadowedImageTest.qml b/tests/ShadowedImageTest.qml --- a/tests/ShadowedImageTest.qml +++ b/tests/ShadowedImageTest.qml @@ -12,8 +12,8 @@ Kirigami.ApplicationWindow { id: window - width: 500 - height: 500 + width: 600 + height: 800 pageStack.initialPage: Kirigami.Page { leftPadding: 0 @@ -30,6 +30,8 @@ color: Kirigami.Theme.highlightColor + source: "/usr/share/wallpapers/Next/contents/images/1024x768.jpg" + radius: radiusSlider.value shadow.size: sizeSlider.value @@ -39,44 +41,26 @@ border.width: borderWidthSlider.value border.color: Kirigami.Theme.textColor - source: "/usr/share/wallpapers/Next/contents/images/1024x768.jpg" - } - - Item { width: 1; height: Kirigami.Units.gridUnit } - - Slider { - id: sizeSlider - - from: 0 - to: 100 + corners.topLeftRadius: topLeftSlider.value + corners.topRightRadius: topRightSlider.value + corners.bottomLeftRadius: bottomLeftSlider.value + corners.bottomRightRadius: bottomRightSlider.value } - Slider { - id: radiusSlider + Kirigami.FormLayout { + Item { Kirigami.FormData.isSection: true } - from: 0 - to: 200 - } - - Slider { - id: xOffsetSlider - - from: -100 - to: 100 - } - - Slider { - id: yOffsetSlider - - from: -100 - to: 100 - } + Slider { id: radiusSlider; from: 0; to: 200; Kirigami.FormData.label: "Overall Radius" } + Slider { id: topLeftSlider; from: -1; to: 200; value: -1; Kirigami.FormData.label: "Top Left Radius" } + Slider { id: topRightSlider; from: -1; to: 200; value: -1; Kirigami.FormData.label: "Top Right Radius" } + Slider { id: bottomLeftSlider; from: -1; to: 200; value: -1; Kirigami.FormData.label: "Bottom Left Radius" } + Slider { id: bottomRightSlider; from: -1; to: 200; value: -1; Kirigami.FormData.label: "Bottom Right Radius" } - Slider { - id: borderWidthSlider + Slider { id: sizeSlider; from: 0; to: 100; Kirigami.FormData.label: "Shadow Size" } + Slider { id: xOffsetSlider; from: -100; to: 100; Kirigami.FormData.label: "Shadow X-Offset" } + Slider { id: yOffsetSlider; from: -100; to: 100; Kirigami.FormData.label: "Shadow Y-Offset" } - from: 0 - to: 50 + Slider { id: borderWidthSlider; from: 0; to: 50; Kirigami.FormData.label: "Border Width" } } } } diff --git a/tests/ShadowedRectangleTest.qml b/tests/ShadowedRectangleTest.qml --- a/tests/ShadowedRectangleTest.qml +++ b/tests/ShadowedRectangleTest.qml @@ -12,8 +12,8 @@ Kirigami.ApplicationWindow { id: window - width: 500 - height: 500 + width: 600 + height: 800 pageStack.initialPage: Kirigami.Page { leftPadding: 0 @@ -38,43 +38,27 @@ border.width: borderWidthSlider.value border.color: Kirigami.Theme.textColor - } - - Item { width: 1; height: Kirigami.Units.gridUnit } - - Slider { - id: sizeSlider - - from: 0 - to: 100 - } - Slider { - id: radiusSlider - - from: 0 - to: 200 + corners.topLeftRadius: topLeftSlider.value + corners.topRightRadius: topRightSlider.value + corners.bottomLeftRadius: bottomLeftSlider.value + corners.bottomRightRadius: bottomRightSlider.value } - Slider { - id: xOffsetSlider - - from: -100 - to: 100 - } + Kirigami.FormLayout { + Item { Kirigami.FormData.isSection: true } - Slider { - id: yOffsetSlider - - from: -100 - to: 100 - } + Slider { id: radiusSlider; from: 0; to: 200; Kirigami.FormData.label: "Overall Radius" } + Slider { id: topLeftSlider; from: -1; to: 200; value: -1; Kirigami.FormData.label: "Top Left Radius" } + Slider { id: topRightSlider; from: -1; to: 200; value: -1; Kirigami.FormData.label: "Top Right Radius" } + Slider { id: bottomLeftSlider; from: -1; to: 200; value: -1; Kirigami.FormData.label: "Bottom Left Radius" } + Slider { id: bottomRightSlider; from: -1; to: 200; value: -1; Kirigami.FormData.label: "Bottom Right Radius" } - Slider { - id: borderWidthSlider + Slider { id: sizeSlider; from: 0; to: 100; Kirigami.FormData.label: "Shadow Size" } + Slider { id: xOffsetSlider; from: -100; to: 100; Kirigami.FormData.label: "Shadow X-Offset" } + Slider { id: yOffsetSlider; from: -100; to: 100; Kirigami.FormData.label: "Shadow Y-Offset" } - from: 0 - to: 50 + Slider { id: borderWidthSlider; from: 0; to: 50; Kirigami.FormData.label: "Border Width" } } } }