Add a Wave

The radius of the Wave can be easily computed with the Pythagorean
theorem.

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 {

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
+				}
+			}
+		}
+	}
+}