Add an own copy of RectangularGlow, with OpenGL core and D3D12 as well

Change-Id: I0231854ae93cb3f45ea5da13c30c08fdc1b29139
Reviewed-by: J-P Nurmi <jpnurmi@qt.io>

12 files changed, 316 insertions, 5 deletions

diff --git a/README.md b/README.md
index d0a7a4c6..c2903a57 100644
--- a/README.md
+++ b/README.md
@@ -31,8 +31,6 @@ If you have problems or questions, don't hesitate to:
 
 The MINIMUM REQUIREMENT for building this project is to use the same branch
 of Qt 5. The dependencies are *qtbase*, *qtxmlpatterns* and *qtdeclarative*.
-Other optional dependencies include *qtgraphicaleffects* for the Material
-style.
 
 To install the controls into your Qt directory (```QTDIR/qml```):
 
diff --git a/src/imports/controls/material/BoxShadow.qml b/src/imports/controls/material/BoxShadow.qml
index b70fcee5..43722b73 100644
--- a/src/imports/controls/material/BoxShadow.qml
+++ b/src/imports/controls/material/BoxShadow.qml
@@ -35,7 +35,8 @@
 ****************************************************************************/
 
 import QtQuick 2.6
-import QtGraphicalEffects 1.0
+import QtQuick.Controls.Material 2.1
+import QtQuick.Controls.Material.impl 2.1
 
 /*!
    A implementation of CSS's box-shadow, used by ElevationEffect for a Material Design
diff --git a/src/imports/controls/material/RectangularGlow.qml b/src/imports/controls/material/RectangularGlow.qml
new file mode 100644
index 00000000..7cec7e54
--- /dev/null
+++ b/src/imports/controls/material/RectangularGlow.qml
@@ -0,0 +1,240 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+/*!
+   A cross-graphics API implementation of QtGraphicalEffects' RectangularGlow.
+ */
+Item {
+    id: rootItem
+
+    /*!
+        This property defines how many pixels outside the item area are reached
+        by the glow.
+
+        The value ranges from 0.0 (no glow) to inf (infinite glow). By default,
+        the property is set to \c 0.0.
+
+        \table
+        \header
+        \li Output examples with different glowRadius values
+        \li
+        \li
+        \row
+            \li \image RectangularGlow_glowRadius1.png
+            \li \image RectangularGlow_glowRadius2.png
+            \li \image RectangularGlow_glowRadius3.png
+        \row
+            \li \b { glowRadius: 10 }
+            \li \b { glowRadius: 20 }
+            \li \b { glowRadius: 40 }
+        \row
+            \li \l spread: 0
+            \li \l spread: 0
+            \li \l spread: 0
+        \row
+            \li \l color: #ffffff
+            \li \l color: #ffffff
+            \li \l color: #ffffff
+        \row
+            \li \l cornerRadius: 25
+            \li \l cornerRadius: 25
+            \li \l cornerRadius: 25
+        \endtable
+
+    */
+    property real glowRadius: 0.0
+
+    /*!
+        This property defines how large part of the glow color is strenghtened
+        near the source edges.
+
+        The value ranges from 0.0 (no strenght increase) to 1.0 (maximum
+        strenght increase). By default, the property is set to \c 0.0.
+
+        \table
+        \header
+        \li Output examples with different spread values
+        \li
+        \li
+        \row
+            \li \image RectangularGlow_spread1.png
+            \li \image RectangularGlow_spread2.png
+            \li \image RectangularGlow_spread3.png
+        \row
+            \li \b { spread: 0.0 }
+            \li \b { spread: 0.5 }
+            \li \b { spread: 1.0 }
+        \row
+            \li \l glowRadius: 20
+            \li \l glowRadius: 20
+            \li \l glowRadius: 20
+        \row
+            \li \l color: #ffffff
+            \li \l color: #ffffff
+            \li \l color: #ffffff
+        \row
+            \li \l cornerRadius: 25
+            \li \l cornerRadius: 25
+            \li \l cornerRadius: 25
+        \endtable
+    */
+    property real spread: 0.0
+
+    /*!
+        This property defines the RGBA color value which is used for the glow.
+
+        By default, the property is set to \c "white".
+
+        \table
+        \header
+        \li Output examples with different color values
+        \li
+        \li
+        \row
+            \li \image RectangularGlow_color1.png
+            \li \image RectangularGlow_color2.png
+            \li \image RectangularGlow_color3.png
+        \row
+            \li \b { color: #ffffff }
+            \li \b { color: #55ff55 }
+            \li \b { color: #5555ff }
+        \row
+            \li \l glowRadius: 20
+            \li \l glowRadius: 20
+            \li \l glowRadius: 20
+        \row
+            \li \l spread: 0
+            \li \l spread: 0
+            \li \l spread: 0
+        \row
+            \li \l cornerRadius: 25
+            \li \l cornerRadius: 25
+            \li \l cornerRadius: 25
+        \endtable
+    */
+    property color color: "white"
+
+    /*!
+        This property defines the corner radius that is used to draw a glow with
+        rounded corners.
+
+        The value ranges from 0.0 to half of the effective width or height of
+        the glow, whichever is smaller. This can be calculated with: \c{
+        min(width, height) / 2.0 + glowRadius}
+
+        By default, the property is bound to glowRadius property. The glow
+        behaves as if the rectangle was blurred when adjusting the glowRadius
+        property.
+
+        \table
+        \header
+        \li Output examples with different cornerRadius values
+        \li
+        \li
+        \row
+            \li \image RectangularGlow_cornerRadius1.png
+            \li \image RectangularGlow_cornerRadius2.png
+            \li \image RectangularGlow_cornerRadius3.png
+        \row
+            \li \b { cornerRadius: 0 }
+            \li \b { cornerRadius: 25 }
+            \li \b { cornerRadius: 50 }
+        \row
+            \li \l glowRadius: 20
+            \li \l glowRadius: 20
+            \li \l glowRadius: 20
+        \row
+            \li \l spread: 0
+            \li \l spread: 0
+            \li \l spread: 0
+        \row
+            \li \l color: #ffffff
+            \li \l color: #ffffff
+            \li \l color: #ffffff
+        \endtable
+    */
+    property real cornerRadius: glowRadius
+
+    /*!
+        This property allows the effect output pixels to be cached in order to
+        improve the rendering performance.
+
+        Every time the source or effect properties are changed, the pixels in
+        the cache must be updated. Memory consumption is increased, because an
+        extra buffer of memory is required for storing the effect output.
+
+        It is recommended to disable the cache when the source or the effect
+        properties are animated.
+
+        By default, the property is set to \c false.
+    */
+    property bool cached: false
+
+    ShaderEffectSource {
+         id: cacheItem
+         anchors.fill: shaderItem
+         visible: rootItem.cached
+         smooth: true
+         sourceItem: shaderItem
+         live: true
+         hideSource: visible
+     }
+
+    ShaderEffect {
+        id: shaderItem
+
+        x: (parent.width - width) / 2.0
+        y: (parent.height - height) / 2.0
+        width: parent.width + rootItem.glowRadius * 2 + cornerRadius * 2
+        height: parent.height + rootItem.glowRadius * 2 + cornerRadius * 2
+
+        function clampedCornerRadius() {
+            var maxCornerRadius = Math.min(rootItem.width, rootItem.height) / 2 + glowRadius;
+            return Math.max(0, Math.min(rootItem.cornerRadius, maxCornerRadius))
+        }
+
+        property color color: rootItem.color
+        property real inverseSpread: 1.0 - rootItem.spread
+        property real relativeSizeX: ((inverseSpread * inverseSpread) * rootItem.glowRadius + cornerRadius * 2.0) / width
+        property real relativeSizeY: relativeSizeX * (width / height)
+        property real spread: rootItem.spread / 2.0
+        property real cornerRadius: clampedCornerRadius()
+
+        fragmentShader: "qrc:/qt-project.org/imports/QtQuick/Controls.2/Material/shaders/RectangularGlow.frag"
+    }
+}
diff --git a/src/imports/controls/material/material.pri b/src/imports/controls/material/material.pri
index 76b865e4..30be1fb2 100644
--- a/src/imports/controls/material/material.pri
+++ b/src/imports/controls/material/material.pri
@@ -40,6 +40,7 @@ QML_FILES += \
     $$PWD/RadioDelegate.qml \
     $$PWD/RadioIndicator.qml \
     $$PWD/RangeSlider.qml \
+    $$PWD/RectangularGlow.qml \
     $$PWD/ScrollBar.qml \
     $$PWD/ScrollIndicator.qml \
     $$PWD/Slider.qml \
diff --git a/src/imports/controls/material/qmldir b/src/imports/controls/material/qmldir
index 51dafa08..6125e67d 100644
--- a/src/imports/controls/material/qmldir
+++ b/src/imports/controls/material/qmldir
@@ -2,4 +2,3 @@ module QtQuick.Controls.Material
 plugin qtquickcontrols2materialstyleplugin
 classname QtQuickControls2MaterialStylePlugin
 depends QtQuick.Controls 2.0
-depends QtGraphicalEffects 1.0
diff --git a/src/imports/controls/material/qtquickcontrols2materialstyleplugin.cpp b/src/imports/controls/material/qtquickcontrols2materialstyleplugin.cpp
index 8214d5ac..744d17a0 100644
--- a/src/imports/controls/material/qtquickcontrols2materialstyleplugin.cpp
+++ b/src/imports/controls/material/qtquickcontrols2materialstyleplugin.cpp
@@ -95,6 +95,7 @@ void QtQuickControls2MaterialStylePlugin::initializeEngine(QQmlEngine *engine, c
     qmlRegisterType(typeUrl(QStringLiteral("BoxShadow.qml")), import, 2, 1, "BoxShadow");
     qmlRegisterType(typeUrl(QStringLiteral("CheckIndicator.qml")), import, 2, 1, "CheckIndicator");
     qmlRegisterType(typeUrl(QStringLiteral("ElevationEffect.qml")), import, 2, 1, "ElevationEffect");
+    qmlRegisterType(typeUrl(QStringLiteral("RectangularGlow.qml")), import, 2, 1, "RectangularGlow");
     qmlRegisterType(typeUrl(QStringLiteral("SliderHandle.qml")), import, 2, 1, "SliderHandle");
     qmlRegisterType(typeUrl(QStringLiteral("SwitchIndicator.qml")), import, 2, 1, "SwitchIndicator");
 }
diff --git a/src/imports/controls/material/qtquickcontrols2materialstyleplugin.qrc b/src/imports/controls/material/qtquickcontrols2materialstyleplugin.qrc
index 47257ce4..e2cc90fa 100644
--- a/src/imports/controls/material/qtquickcontrols2materialstyleplugin.qrc
+++ b/src/imports/controls/material/qtquickcontrols2materialstyleplugin.qrc
@@ -8,5 +8,8 @@
         <file>images/drop-indicator@2x.png</file>
         <file>images/drop-indicator@3x.png</file>
         <file>images/drop-indicator@4x.png</file>
+        <file>shaders/RectangularGlow.frag</file>
+        <file>shaders/+glslcore/RectangularGlow.frag</file>
+        <file>shaders/+hlsl/RectangularGlow.frag</file>
     </qresource>
 </RCC>
diff --git a/src/imports/controls/material/shaders/+glslcore/RectangularGlow.frag b/src/imports/controls/material/shaders/+glslcore/RectangularGlow.frag
new file mode 100644
index 00000000..432d86b5
--- /dev/null
+++ b/src/imports/controls/material/shaders/+glslcore/RectangularGlow.frag
@@ -0,0 +1,25 @@
+#version 150
+
+uniform float qt_Opacity;
+uniform float relativeSizeX;
+uniform float relativeSizeY;
+uniform float spread;
+uniform vec4 color;
+
+in vec2 qt_TexCoord0;
+out vec4 fragColor;
+
+float linearstep(float e0, float e1, float x)
+{
+    return clamp((x - e0) / (e1 - e0), 0.0, 1.0);
+}
+
+void main()
+{
+    float alpha =
+        smoothstep(0.0, relativeSizeX, 0.5 - abs(0.5 - qt_TexCoord0.x)) *
+        smoothstep(0.0, relativeSizeY, 0.5 - abs(0.5 - qt_TexCoord0.y));
+
+    float spreadMultiplier = linearstep(spread, 1.0 - spread, alpha);
+    fragColor = color * qt_Opacity * spreadMultiplier * spreadMultiplier;
+}
diff --git a/src/imports/controls/material/shaders/+hlsl/RectangularGlow.frag b/src/imports/controls/material/shaders/+hlsl/RectangularGlow.frag
new file mode 100644
index 00000000..69d9f852
--- /dev/null
+++ b/src/imports/controls/material/shaders/+hlsl/RectangularGlow.frag
@@ -0,0 +1,21 @@
+cbuffer ConstantBuffer : register(b0)
+{
+    float4x4 qt_Matrix;
+    float qt_Opacity;
+    float relativeSizeX;
+    float relativeSizeY;
+    float spread;
+    float4 color;
+}
+
+float linearstep(float e0, float e1, float x) { return clamp((x - e0) / (e1 - e0), 0.0, 1.0); }
+
+float4 main(float4 position : SV_POSITION, float2 coord : TEXCOORD0) : SV_TARGET
+{
+    float alpha =
+        smoothstep(0.0, relativeSizeX, 0.5 - abs(0.5 - coord.x)) *
+        smoothstep(0.0, relativeSizeY, 0.5 - abs(0.5 - coord.y));
+
+    float spreadMultiplier = linearstep(spread, 1.0 - spread, alpha);
+    return color * qt_Opacity * spreadMultiplier * spreadMultiplier;
+}
diff --git a/src/imports/controls/material/shaders/RectangularGlow.frag b/src/imports/controls/material/shaders/RectangularGlow.frag
new file mode 100644
index 00000000..40bab580
--- /dev/null
+++ b/src/imports/controls/material/shaders/RectangularGlow.frag
@@ -0,0 +1,19 @@
+uniform highp float qt_Opacity;
+uniform mediump float relativeSizeX;
+uniform mediump float relativeSizeY;
+uniform mediump float spread;
+uniform lowp vec4 color;
+varying highp vec2 qt_TexCoord0;
+
+highp float linearstep(highp float e0, highp float e1, highp float x) {
+    return clamp((x - e0) / (e1 - e0), 0.0, 1.0);
+}
+
+void main() {
+    lowp float alpha =
+        smoothstep(0.0, relativeSizeX, 0.5 - abs(0.5 - qt_TexCoord0.x)) *
+        smoothstep(0.0, relativeSizeY, 0.5 - abs(0.5 - qt_TexCoord0.y));
+
+    highp float spreadMultiplier = linearstep(spread, 1.0 - spread, alpha);
+    gl_FragColor = color * qt_Opacity * spreadMultiplier * spreadMultiplier;
+}
diff --git a/sync.profile b/sync.profile
index 213a944e..8823bf6f 100644
--- a/sync.profile
+++ b/sync.profile
@@ -15,5 +15,4 @@
     "qtbase" => "",
     "qtxmlpatterns" => "",
     "qtdeclarative" => "",
-    "qtgraphicaleffects" => ""
 );
diff --git a/tests/auto/sanity/BLACKLIST b/tests/auto/sanity/BLACKLIST
index 09cc7f3d..768f3985 100644
--- a/tests/auto/sanity/BLACKLIST
+++ b/tests/auto/sanity/BLACKLIST
@@ -14,3 +14,7 @@
 *
 [attachedObjects:universal/ComboBox.qml]
 *
+[functions:material/RectangularGlow.qml]
+*
+[anchors:material/RectangularGlow.qml]
+*