From ec6a42c8f6c38f3f054745526a900f4b0ad02067 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20Gro=C3=9F?= <magnus@mggross.com>
Date: Mon, 6 Nov 2023 19:13:04 +0100
Subject: [PATCH] Add a Wave

The radius of the Wave can be easily computed with the Pythagorean
theorem.
---
 src/qml/Main.qml | 13 ++++++++++---
 src/qml/Wave.qml | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 3 deletions(-)
 create mode 100644 src/qml/Wave.qml

diff --git a/src/qml/Main.qml b/src/qml/Main.qml
index 1cf659f..6530994 100644
--- a/src/qml/Main.qml
+++ b/src/qml/Main.qml
@@ -18,14 +18,21 @@ ApplicationWindow {
 		onActivated: Qt.quit();
 	}
 	DropArea {
+		property int mouseX: 0
+		property int mouseY: 0
 		anchors.fill: parent
 		onDropped: (drop) => {
 			Stdout.print_urls(drop.urls);
 		}
-		Rectangle {
+		onPositionChanged: (drag) => {
+			mouseX = drag.x;
+			mouseY = drag.y;
+		}
+		Wave {
 			anchors.fill: parent
-			color: parent.containsDrag && parent.drag.source === null ? Material.primary : Material.background
-			Behavior on color { ColorAnimation { duration: 200; easing.type: Easing.InOutSine }}
+			size: parent.containsDrag && parent.drag.source === null ? 1.0 : 0.0
+			centreX: parent.mouseX
+			centreY: parent.mouseY
 		}
 	}
 	Welcome {
diff --git a/src/qml/Wave.qml b/src/qml/Wave.qml
new file mode 100644
index 0000000..3eeb583
--- /dev/null
+++ b/src/qml/Wave.qml
@@ -0,0 +1,32 @@
+import QtQuick
+import QtQuick.Controls.Material
+import QtQuick.Effects
+
+Rectangle {
+	id: wave
+	property real size: 0.0
+	property int centreX: width / 2
+	property int centreY: height / 2
+	color: Material.primary
+	visible: size > 0.0
+	Behavior on size {
+		NumberAnimation { duration: 300; easing.type: Easing.InOutSine; }
+	}
+	layer.enabled: true
+	layer.effect: MultiEffect {
+		maskEnabled: true
+		maskSource: ShaderEffectSource {
+			sourceItem: Item {
+				width: wave.width
+				height: wave.height
+				Rectangle {
+					radius: Math.ceil(Math.sqrt(Math.pow(wave.width / 2 + Math.abs(wave.centreX - wave.width / 2), 2) + Math.pow(wave.height / 2 + Math.abs(wave.centreY - wave.height / 2), 2)))
+					width: wave.size * 2 * radius
+					height: width
+					x: wave.centreX - width / 2
+					y: wave.centreY - height / 2
+				}
+			}
+		}
+	}
+}