Reimplement Qt5 OpacityMask using Qt6 MultiEffect

https://darapsa.org/qessenger.git/commit/?id=5f777bca13beadd0a56d2264225b0c09e49541a2
The mask Rectangle needs to be put outside of the MultiEffect,
and referred to by the Rectangle's ID.
It wouldn't work if it's put directly on MultiEffect's maskSource.

https://forum.qt.io/topic/145956/rounded-image-in-qt6
Enabling layer and invisibility on the mask rectangle are a must.
Take notice on what Jacoco wrote about jagged edges at the end of the
thread. Will test that later.

6 files changed, 93 insertions, 44 deletions

diff --git a/Course/Detail/Classic/Content/Sidebar/Video.ui.qml b/Course/Detail/Classic/Content/Sidebar/Video.ui.qml
index e8469fb..5c22f05 100644
--- a/Course/Detail/Classic/Content/Sidebar/Video.ui.qml
+++ b/Course/Detail/Classic/Content/Sidebar/Video.ui.qml
@@ -2,6 +2,7 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import Qt5Compat.GraphicalEffects
+import QtQuick.Effects
 import QtMultimedia
 import Bootstrap
 import Eduport
@@ -28,15 +29,23 @@ ColumnLayout {
 		Layout.maximumHeight: width * 400 / 533
 		source: "https://eduport.webestica.com/assets/images/courses/4by3/01.jpg"
 		fillMode: Image.PreserveAspectFit
-		layer.enabled: true
-		layer.effect: OpacityMask {
-			maskSource: Rectangle {
-				width: image.width
-				height: image.height
-				radius: 8
+		layer {
+			enabled: true
+			effect: MultiEffect {
+				maskEnabled: true
+				maskSource: maskRectangle
 			}
 		}
 
+		Rectangle {
+			id: maskRectangle
+			width: image.width
+			height: image.height
+			radius: 8
+			layer.enabled: true
+			visible: false
+		}
+
 		MediaPlayer {
 			id: mediaPlayer
 		}
diff --git a/Header.ui.qml b/Header.ui.qml
index d903b2a..3b19cfb 100644
--- a/Header.ui.qml
+++ b/Header.ui.qml
@@ -2,6 +2,7 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import Qt5Compat.GraphicalEffects
+import QtQuick.Effects
 import Bootstrap
 import Eduport
 import "DropShadow" as DrpShdw
@@ -99,14 +100,19 @@ ToolBar {
 		}
 		layer {
 			enabled: true
-			effect: OpacityMask {
-				maskSource: Rectangle {
-					width: 40
-					height: 40
-					radius: 40
-				}
+			effect: MultiEffect {
+				maskEnabled: true
+				maskSource: maskRectangle
 			}
 		}
+		Rectangle {
+			id: maskRectangle
+			width: 40
+			height: 40
+			radius: 40
+			layer.enabled: true
+			visible: false
+		}
 		contentItem: Item {
 
 			Image {
@@ -214,14 +220,19 @@ ToolBar {
 			}
 			layer {
 				enabled: true
-				effect: OpacityMask {
-					maskSource: Rectangle {
-						width: imageWidth
-						height: imageHeight
-						radius: maskRadius
-					}
+				effect: MultiEffect {
+					maskEnabled: true
+					maskSource: maskRectangle
 				}
 			}
+			Rectangle {
+				id: maskRectangle
+				width: imageWidth
+				height: imageHeight
+				radius: maskRadius
+				layer.enabled: true
+				visible: false
+			}
 		}
 	}
 
diff --git a/Header/CartItem.ui.qml b/Header/CartItem.ui.qml
index 5df5745..f1897d7 100644
--- a/Header/CartItem.ui.qml
+++ b/Header/CartItem.ui.qml
@@ -2,6 +2,7 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import Qt5Compat.GraphicalEffects
+import QtQuick.Effects
 import Bootstrap
 import Eduport
 
@@ -34,14 +35,19 @@ ColumnLayout {
 			}
 			layer {
 				enabled: true
-				effect: OpacityMask {
-					maskSource: Rectangle {
-						width: 50
-						height: 50
-						radius: 5.2
-					}
+				effect: MultiEffect {
+					maskEnabled: true
+					maskSource: maskRectangle
 				}
 			}
+			Rectangle {
+				id: maskRectangle
+				width: 50
+				height: 50
+				radius: 5.2
+				layer.enabled: true
+				visible: false
+			}
 		}
 
 		ColumnLayout {
diff --git a/Home/Default/Card.ui.qml b/Home/Default/Card.ui.qml
index a46cd74..abe5eed 100644
--- a/Home/Default/Card.ui.qml
+++ b/Home/Default/Card.ui.qml
@@ -2,6 +2,7 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import Qt5Compat.GraphicalEffects
+import QtQuick.Effects
 import Bootstrap
 import Eduport
 import "../../DropShadow" as DrpShdw
@@ -59,14 +60,21 @@ Item {
 			}
 			source: imageSource
 			fillMode: Image.PreserveAspectFit
-			layer.enabled: true
-			layer.effect: OpacityMask {
-				maskSource: Rectangle {
-					width: image.width
-					height: image.height
-					radius: 8
+			layer {
+				enabled: true
+				effect: MultiEffect {
+					maskEnabled: true
+					maskSource: maskRectangle
 				}
 			}
+			Rectangle {
+				id: maskRectangle
+				width: image.width
+				height: image.height
+				radius: 8
+				layer.enabled: true
+				visible: false
+			}
 		}
 
 		Rectangle {
diff --git a/Instructor/EditProfile.ui.qml b/Instructor/EditProfile.ui.qml
index dc9e49f..3d3ad1b 100644
--- a/Instructor/EditProfile.ui.qml
+++ b/Instructor/EditProfile.ui.qml
@@ -1,7 +1,7 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
+import QtQuick.Effects
 import Bootstrap
 import Eduport
 import "../TextField" as TxtFld
@@ -98,14 +98,22 @@ Flickable {
 											width: 82
 											height: 82
 										}
-										layer.enabled: true
-										layer.effect: OpacityMask {
-											maskSource: Rectangle {
-												width: 82
-												height: 82
-												radius: 82
+										layer {
+											enabled: true
+											effect: MultiEffect {
+												maskEnabled: true
+												maskSource: maskRectangle
 											}
 										}
+										Rectangle {
+											id: maskRectangle
+											width: 82
+											height: 82
+											radius: 82
+											layer.enabled: true
+											visible: false
+										}
+
 									}
 
 									Button {
diff --git a/Shop/Course.ui.qml b/Shop/Course.ui.qml
index 565cd53..25efed2 100644
--- a/Shop/Course.ui.qml
+++ b/Shop/Course.ui.qml
@@ -1,7 +1,7 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
+import QtQuick.Effects
 import Bootstrap
 
 ColumnLayout {
@@ -41,14 +41,21 @@ ColumnLayout {
 				}
 				source: imageSource
 				fillMode: Image.PreserveAspectFit
-				layer.enabled: true
-				layer.effect: OpacityMask {
-					maskSource: Rectangle {
-						width: courseItemImage.width
-						height: courseItemImage.height
-						radius: 5.2
+				layer {
+					enabled: true
+					effect: MultiEffect {
+						maskEnabled: true
+						maskSource: maskRectangle
 					}
 				}
+				Rectangle {
+					id: maskRectangle
+					width: courseItemImage.width
+					height: courseItemImage.height
+					radius: 5.2
+					layer.enabled: true
+					visible: false
+				}
 			}
 		}