1/****************************************************************************
2**
3** Copyright (C) 2017 The Qt Company Ltd.
4** Contact: https://www.qt.io/licensing/
5**
6** This file is part of the Qt Graphical Effects module.
7**
8** $QT_BEGIN_LICENSE:LGPL$
9** Commercial License Usage
10** Licensees holding valid commercial Qt licenses may use this file in
11** accordance with the commercial license agreement provided with the
12** Software or, alternatively, in accordance with the terms contained in
13** a written agreement between you and The Qt Company. For licensing terms
14** and conditions see https://www.qt.io/terms-conditions. For further
15** information use the contact form at https://www.qt.io/contact-us.
16**
17** GNU Lesser General Public License Usage
18** Alternatively, this file may be used under the terms of the GNU Lesser
19** General Public License version 3 as published by the Free Software
20** Foundation and appearing in the file LICENSE.LGPL3 included in the
21** packaging of this file. Please review the following information to
22** ensure the GNU Lesser General Public License version 3 requirements
23** will be met: https://www.gnu.org/licenses/lgpl-3.0.html.
24**
25** GNU General Public License Usage
26** Alternatively, this file may be used under the terms of the GNU
27** General Public License version 2.0 or (at your option) the GNU General
28** Public license version 3 or any later version approved by the KDE Free
29** Qt Foundation. The licenses are as published by the Free Software
30** Foundation and appearing in the file LICENSE.GPL2 and LICENSE.GPL3
31** included in the packaging of this file. Please review the following
32** information to ensure the GNU General Public License requirements will
33** be met: https://www.gnu.org/licenses/gpl-2.0.html and
34** https://www.gnu.org/licenses/gpl-3.0.html.
35**
36** $QT_END_LICENSE$
37**
38****************************************************************************/
39
40import QtQuick 2.12
41import QtGraphicalEffects.private 1.12
42
43/*!
44    \qmltype RectangularGlow
45    \inqmlmodule QtGraphicalEffects
46    \since QtGraphicalEffects 1.0
47    \inherits QtQuick2::Item
48    \ingroup qtgraphicaleffects-glow
49    \brief Generates a blurred and colorized rectangle, which gives
50    the impression that the source is glowing.
51
52    This effect is intended to have good performance. The shape of the glow is
53    limited to a rectangle with a custom corner radius. For situations where
54    custom shapes are required, consider \l {QtGraphicalEffects::Glow} {Glow}
55    effect.
56
57    \table
58    \header
59        \li Effect applied
60    \row
61        \li \image RectangularGlow_applied.png
62    \endtable
63
64    \note This effect is available when running with OpenGL.
65
66    \section1 Example
67
68    The following example shows how to apply the effect.
69    \snippet RectangularGlow-example.qml example
70*/
71Item {
72    id: rootItem
73
74    /*!
75        This property defines how many pixels outside the item area are reached
76        by the glow.
77
78        The value ranges from 0.0 (no glow) to inf (infinite glow). By default,
79        the property is set to \c 0.0.
80
81        \table
82        \header
83        \li Output examples with different glowRadius values
84        \li
85        \li
86        \row
87            \li \image RectangularGlow_glowRadius1.png
88            \li \image RectangularGlow_glowRadius2.png
89            \li \image RectangularGlow_glowRadius3.png
90        \row
91            \li \b { glowRadius: 10 }
92            \li \b { glowRadius: 20 }
93            \li \b { glowRadius: 40 }
94        \row
95            \li \l spread: 0
96            \li \l spread: 0
97            \li \l spread: 0
98        \row
99            \li \l color: #ffffff
100            \li \l color: #ffffff
101            \li \l color: #ffffff
102        \row
103            \li \l cornerRadius: 25
104            \li \l cornerRadius: 25
105            \li \l cornerRadius: 25
106        \endtable
107
108    */
109    property real glowRadius: 0.0
110
111    /*!
112        This property defines how large part of the glow color is strengthened
113        near the source edges.
114
115        The value ranges from 0.0 (no strength increase) to 1.0 (maximum
116        strength increase). By default, the property is set to \c 0.0.
117
118        \table
119        \header
120        \li Output examples with different spread values
121        \li
122        \li
123        \row
124            \li \image RectangularGlow_spread1.png
125            \li \image RectangularGlow_spread2.png
126            \li \image RectangularGlow_spread3.png
127        \row
128            \li \b { spread: 0.0 }
129            \li \b { spread: 0.5 }
130            \li \b { spread: 1.0 }
131        \row
132            \li \l glowRadius: 20
133            \li \l glowRadius: 20
134            \li \l glowRadius: 20
135        \row
136            \li \l color: #ffffff
137            \li \l color: #ffffff
138            \li \l color: #ffffff
139        \row
140            \li \l cornerRadius: 25
141            \li \l cornerRadius: 25
142            \li \l cornerRadius: 25
143        \endtable
144    */
145    property real spread: 0.0
146
147    /*!
148        This property defines the RGBA color value which is used for the glow.
149
150        By default, the property is set to \c "white".
151
152        \table
153        \header
154        \li Output examples with different color values
155        \li
156        \li
157        \row
158            \li \image RectangularGlow_color1.png
159            \li \image RectangularGlow_color2.png
160            \li \image RectangularGlow_color3.png
161        \row
162            \li \b { color: #ffffff }
163            \li \b { color: #55ff55 }
164            \li \b { color: #5555ff }
165        \row
166            \li \l glowRadius: 20
167            \li \l glowRadius: 20
168            \li \l glowRadius: 20
169        \row
170            \li \l spread: 0
171            \li \l spread: 0
172            \li \l spread: 0
173        \row
174            \li \l cornerRadius: 25
175            \li \l cornerRadius: 25
176            \li \l cornerRadius: 25
177        \endtable
178    */
179    property color color: "white"
180
181    /*!
182        This property defines the corner radius that is used to draw a glow with
183        rounded corners.
184
185        The value ranges from 0.0 to half of the effective width or height of
186        the glow, whichever is smaller. This can be calculated with: \c{
187        min(width, height) / 2.0 + glowRadius}
188
189        By default, the property is bound to glowRadius property. The glow
190        behaves as if the rectangle was blurred when adjusting the glowRadius
191        property.
192
193        \table
194        \header
195        \li Output examples with different cornerRadius values
196        \li
197        \li
198        \row
199            \li \image RectangularGlow_cornerRadius1.png
200            \li \image RectangularGlow_cornerRadius2.png
201            \li \image RectangularGlow_cornerRadius3.png
202        \row
203            \li \b { cornerRadius: 0 }
204            \li \b { cornerRadius: 25 }
205            \li \b { cornerRadius: 50 }
206        \row
207            \li \l glowRadius: 20
208            \li \l glowRadius: 20
209            \li \l glowRadius: 20
210        \row
211            \li \l spread: 0
212            \li \l spread: 0
213            \li \l spread: 0
214        \row
215            \li \l color: #ffffff
216            \li \l color: #ffffff
217            \li \l color: #ffffff
218        \endtable
219    */
220    property real cornerRadius: glowRadius
221
222    /*!
223        This property allows the effect output pixels to be cached in order to
224        improve the rendering performance.
225
226        Every time the source or effect properties are changed, the pixels in
227        the cache must be updated. Memory consumption is increased, because an
228        extra buffer of memory is required for storing the effect output.
229
230        It is recommended to disable the cache when the source or the effect
231        properties are animated.
232
233        By default, the property is set to \c false.
234    */
235    property bool cached: false
236
237    ShaderEffectSource {
238         id: cacheItem
239         anchors.fill: shaderItem
240         visible: rootItem.cached
241         smooth: true
242         sourceItem: shaderItem
243         live: true
244         hideSource: visible
245     }
246
247    ShaderEffect {
248        id: shaderItem
249
250        x: (parent.width - width) / 2.0
251        y: (parent.height - height) / 2.0
252        width: parent.width + rootItem.glowRadius * 2 + cornerRadius * 2
253        height: parent.height + rootItem.glowRadius * 2 + cornerRadius * 2
254
255        function clampedCornerRadius() {
256            var maxCornerRadius = Math.min(rootItem.width, rootItem.height) / 2 + glowRadius;
257            return Math.max(0, Math.min(rootItem.cornerRadius, maxCornerRadius))
258        }
259
260        property color color: rootItem.color
261        property real inverseSpread: 1.0 - rootItem.spread
262        property real relativeSizeX: ((inverseSpread * inverseSpread) * rootItem.glowRadius + cornerRadius * 2.0) / width
263        property real relativeSizeY: relativeSizeX * (width / height)
264        property real spread: rootItem.spread / 2.0
265        property real cornerRadius: clampedCornerRadius()
266
267        fragmentShader: "qrc:/qt-project.org/imports/QtGraphicalEffects/shaders/rectangularglow.frag"
268    }
269}
270