Skip to content

Commit

Permalink
Fix cneben#62
Browse files Browse the repository at this point in the history
Factor glow/shadow effect code for gradient and solid node background in RectShadowEffect.qml and RectGlowEffect.qml components.
WIP (do not use with CMake)

Signed-off-by: cneben <[email protected]>
  • Loading branch information
cneben committed Sep 28, 2018
1 parent b974a2b commit cac3848
Show file tree
Hide file tree
Showing 9 changed files with 218 additions and 200 deletions.
6 changes: 3 additions & 3 deletions quickqanava.pro
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,12 @@ test-cpp.subdir = samples/cpp

#SUBDIRS += test-resizer
#SUBDIRS += test-navigable
#SUBDIRS += test-nodes
SUBDIRS += test-edges
SUBDIRS += test-nodes
#SUBDIRS += test-edges
#SUBDIRS += test-connector
#SUBDIRS += test-groups
#SUBDIRS += test-selection
#SUBDIRS += test-style
SUBDIRS += test-style
#SUBDIRS += test-topology
#SUBDIRS += test-dataflow
#SUBDIRS += test-cpp
Expand Down
2 changes: 2 additions & 0 deletions src/QuickQanava_static.qrc
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,9 @@
<file>RectNodeTemplate.qml</file>
<file>RectSolidBackground.qml</file>
<file>RectSolidShadowBackground.qml</file>
<file>RectShadowEffect.qml</file>
<file>RectSolidGlowBackground.qml</file>
<file>RectGlowEffect.qml</file>
<file>RectGradientBackground.qml</file>
<file>RectGradientShadowBackground.qml</file>
<file>RectGradientGlowBackground.qml</file>
Expand Down
100 changes: 100 additions & 0 deletions src/RectGlowEffect.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
/*
Copyright (c) 2008-2018, Benoit AUTHEMAN All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright
notice, this list of conditions and the following disclaimer in the
documentation and/or other materials provided with the distribution.
* Neither the name of the author or Destrat.io nor the
names of its contributors may be used to endorse or promote products
derived from this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL AUTHOR BE LIABLE FOR ANY
DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/

//-----------------------------------------------------------------------------
// This file is a part of the QuickQanava software. Copyright 2017 Benoit AUTHEMAN.
//
// \file RectGlowEffect.qml
// \author [email protected]
// \date 2018 03 23
//-----------------------------------------------------------------------------

import QtQuick 2.7
import QtGraphicalEffects 1.0

import QuickQanava 2.0 as Qan

/*! \brief Node or group background component with solid fill, glow effect and backOpacity style support
*
*/
Item {
id: glowEffect

// Public:
property var nodeItem: undefined

// private:
// Default settings for rect radius, shadow margin is the _maximum_ shadow radius (+vertical or horizontal offset).
property real glowRadius: nodeItem.style.effectRadius
property color glowColor: nodeItem.style.effectColor
property real effectMargin: glowRadius * 2
property real borderWidth: nodeItem.style.borderWidth
property real borderWidth2: borderWidth / 2.

Item {
id: effectBackground
z: -1 // Effect should be behind edges , docks and connectors...
x: -effectMargin; y: -effectMargin
width: nodeItem.width + effectMargin * 2; height: nodeItem.height + effectMargin * 2
visible: false
Rectangle {
x: effectMargin
y: effectMargin
width: nodeItem.width // Avoid aliasing artifacts for mask at high scales.
height: nodeItem.height
radius: nodeItem.style.backRadius
border.width: borderWidth
color: Qt.rgba(0, 0, 0, 1)
antialiasing: true
layer.enabled: true
layer.effect: Glow {
color: glowEffect.glowColor
radius: glowEffect.glowRadius; samples: Math.min( 16, glowEffect.glowRadius)
spread: 0.25; transparentBorder: true; cached: false
visible: nodeItem.style.effectEnabled
}
}
}
Item {
id: backgroundMask
anchors.fill: effectBackground
visible: false
Rectangle {
x: effectMargin + borderWidth2
y: effectMargin + borderWidth2
width: nodeItem.width - borderWidth; height: nodeItem.height - borderWidth
radius: nodeItem.style.backRadius
color: Qt.rgba(0,0,0,1)
antialiasing: true
}
}
OpacityMask {
anchors.fill: effectBackground
source: effectBackground
maskSource: backgroundMask
invert: true
}
}
50 changes: 3 additions & 47 deletions src/RectGradientGlowBackground.qml
Original file line number Diff line number Diff line change
Expand Up @@ -51,53 +51,9 @@ Item {
//! Back color property, default to style.backColor, but available for user overidde.
property color backColor: nodeItem.style.backColor

// private:
// Default settings for rect radius, shadow margin is the _maximum_ shadow radius (+vertical or horizontal offset).
property real glowRadius: nodeItem && nodeItem.style ? nodeItem.style.effectRadius : 15
property color glowColor: nodeItem && nodeItem.style ? nodeItem.style.effectColor : Qt.rgba(0,0,0, 0.45)
property real effectMargin: glowRadius * 2.

Item {
id: fakeBackground
z: -1 // Effect should be behind edges , docks and connectors...
x: -glowRadius; y: -glowRadius
width: nodeItem.width + effectMargin; height: nodeItem.height + effectMargin
visible: false
Rectangle {
x: glowRadius + 0.5 ; y: glowRadius + 0.5
width: nodeItem.width - 1. // Avoid aliasing artifacts for mask at high scales.
height: nodeItem.height - 1.
radius: nodeItem.style.backRadius
color: Qt.rgba(0, 0, 0, 1)
antialiasing: true
layer.enabled: true
layer.effect: Glow {
color: background.glowColor
radius: background.glowRadius; samples: Math.min( 15, background.glowRadius * 0.75)
spread: 0.25; transparentBorder: true; cached: false
visible: nodeItem.style.effectEnabled
}
}
}
Item {
id: backgroundMask
x: -glowRadius; y: -glowRadius
width: nodeItem.width + effectMargin; height: nodeItem.height + effectMargin
visible: false
Rectangle {
x: glowRadius + 0.5; y: glowRadius + 0.5
width: nodeItem.width - 1.; height: nodeItem.height - 1.
radius: nodeItem.style.backRadius
color: Qt.rgba(0,0,0,1)
antialiasing: true
}
}
OpacityMask {
x: -glowRadius; y: -glowRadius
width: nodeItem.width + effectMargin; height: nodeItem.height + effectMargin
source: ShaderEffectSource { sourceItem: fakeBackground; hideSource: false }
maskSource: ShaderEffectSource { format: ShaderEffectSource.Alpha; sourceItem: backgroundMask; hideSource: false }
invert: true
RectGlowEffect {
anchors.fill: parent
nodeItem: background.nodeItem
}

RectGradientBackground {
Expand Down
54 changes: 3 additions & 51 deletions src/RectGradientShadowBackground.qml
Original file line number Diff line number Diff line change
Expand Up @@ -49,58 +49,10 @@ Item {
//! Back color property, default to style.backColor, but available for user overidde.
property color backColor: nodeItem.style.backColor

// private:
// Default settings for rect radius, shadow margin is the _maximum_ shadow radius (+vertical or horizontal offset).
property real shadowOffset : nodeItem && nodeItem.style ? nodeItem.style.effectOffset : 4
property real shadowRadius : nodeItem && nodeItem.style ? nodeItem.style.effectRadius : 4
property color shadowColor : nodeItem && nodeItem.style ? nodeItem.style.effectColor : Qt.rgba(0.1, 0.1, 0.1)
property real shadowMargin : (shadowRadius + shadowOffset) * 2

Item {
z: -1 // Effect should be behind edges , docks and connectors...
id: effectBackground
anchors.centerIn: parent
width: nodeItem.width + shadowMargin; height: nodeItem.height + shadowMargin
visible: false
Rectangle {
anchors.centerIn: parent
width: nodeItem.width - 1.0; height: nodeItem.height - 2.0 // Reduce rectangle used to generate shadow/glow to
radius: nodeItem.style.backRadius // avoid aliasing artifacts at high scales.
color: Qt.rgba(0, 0, 0, 1)
antialiasing: true
visible: false
layer.enabled: true
layer.effect: DropShadow {
horizontalOffset: shadowOffset; verticalOffset: shadowOffset
radius: shadowRadius; samples: 8
color: shadowColor
visible: nodeItem.style.effectEnabled
transparentBorder: true
cached: false
}
}
}
Item {
id: backgroundMask
anchors.centerIn: parent
width: parent.width + shadowMargin; height: parent.height + shadowMargin
visible: false
Rectangle {
anchors.centerIn: parent
width: nodeItem.width - 0.5; height: nodeItem.height - 0.5
radius: nodeItem.style.backRadius
color: Qt.rgba(0, 0, 0, 1)
antialiasing: true
}
}
OpacityMask {
anchors.centerIn: parent
width: parent.width + shadowMargin; height: parent.height + shadowMargin
source: ShaderEffectSource { sourceItem: effectBackground; hideSource: false }
maskSource: ShaderEffectSource { format: ShaderEffectSource.Alpha; sourceItem: backgroundMask; hideSource: false }
invert: true
RectShadowEffect {
anchors.fill: parent
nodeItem: parent.nodeItem
}

RectGradientBackground {
anchors.fill: parent
nodeItem: background.nodeItem
Expand Down
99 changes: 99 additions & 0 deletions src/RectShadowEffect.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
/*
Copyright (c) 2008-2018, Benoit AUTHEMAN All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright
notice, this list of conditions and the following disclaimer in the
documentation and/or other materials provided with the distribution.
* Neither the name of the author or Destrat.io nor the
names of its contributors may be used to endorse or promote products
derived from this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL AUTHOR BE LIABLE FOR ANY
DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/

//-----------------------------------------------------------------------------
// This file is a part of the QuickQanava software. Copyright 2017 Benoit AUTHEMAN.
//
// \file RectShadowEffect.qml
// \author [email protected]
// \date 2017 11 17
//-----------------------------------------------------------------------------

import QtQuick 2.7
import QtGraphicalEffects 1.0

import QuickQanava 2.0 as Qan

/*! \brief Node or group background component with solid fill, shadow effect and backOpacity style support
*
*/
Item {
// Public:
property var nodeItem: undefined

// private:
// Default settings for rect radius, shadow margin is the _maximum_ shadow radius (+vertical or horizontal offset).
property real borderWidth : nodeItem.style.borderWidth
property real borderWidth2 : borderWidth / 2.
property real shadowOffset : nodeItem.style.effectOffset
property real shadowRadius : nodeItem.style.effectRadius
property color shadowColor : nodeItem.style.effectColor

Item {
id: effectBackground
x: 0; y: 0
//z: -1 // Effect should be behind edges , docks and connectors...
width: nodeItem.width + shadowOffset + shadowRadius
height: nodeItem.height + shadowOffset + shadowRadius
visible: false
Rectangle {
x: borderWidth2; y: borderWidth2
width: nodeItem.width - borderWidth // avoid aliasing artifacts at high scales.
height: nodeItem.height - borderWidth
radius: nodeItem.style.backRadius
color: Qt.rgba(0, 0, 0, 1)
antialiasing: true
layer.enabled: true
layer.effect: DropShadow {
horizontalOffset: shadowOffset; verticalOffset: shadowOffset
radius: shadowRadius; samples: 8
color: shadowColor
visible: nodeItem.style.effectEnabled
transparentBorder: true
cached: false
}
}
}

Item {
id: backgroundMask
anchors.fill: effectBackground
visible: false
Rectangle {
x: 0; y: 0
width: nodeItem.width - borderWidth2
height: nodeItem.height - borderWidth2
radius: nodeItem.style.backRadius
color: Qt.rgba(1, 0, 0, 1)
}
}
OpacityMask {
anchors.fill: effectBackground
source: effectBackground
maskSource: backgroundMask
invert: true
}
}
Loading

0 comments on commit cac3848

Please sign in to comment.