fix: Placeholder moving away from cursor

- Create global centerElementUnderCursor for centering
- Change order of actions for mouse move

source/code/hippie/app.js

@@ -360,6 +360,16 @@ function getClosestEdge(element) {
 	return Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
 }
 
+function centerElementUnderCursor(event, element) {
+	const offsetX = element.getBoundingClientRect().width / 2;
+	const offsetY = element.getBoundingClientRect().height / 2;
+	const x = event.clientX - offsetX;
+	const y = event.clientY - offsetY;
+
+	element.style.left = `${x}px`;
+	element.style.top = `${y}px`;
+}
+
 // CONCEPTS
 
 // NOTE: Benutzt private Zuweisungen

source/code/windows.js

@@ -3,10 +3,8 @@ class HippieTaskBar {
 		this.element = element;
 		this.placeholder = placeholder;
 		this.date = null;
-		this.offsetX = 0;
-		this.offsetY = 0;
 		this.isDragging = false;
-		this.barSize = '64px';
+		this.barSize = '';
 		// TODO: Erweitern auf allgemeine Möglichkeiten und dann aus JSON-Datei laden
 		this.options = options || {
 			direction: 0,
@@ -41,17 +39,9 @@ class HippieTaskBar {
 
 			this.isDragging = true;
 
-			// TODO: Platzhalter anpassen je nach Ziel
 			this.showPlaceholder();
 
-			this.offsetX = this.placeholder.getBoundingClientRect().width / 2;
+			centerElementUnderCursor(event, this.placeholder);
-			this.offsetY = this.placeholder.getBoundingClientRect().height / 2;
-
-			const x = event.clientX - this.offsetX;
-			const y = event.clientY - this.offsetY;
-
-			this.placeholder.style.left = `${x}px`;
-			this.placeholder.style.top = `${y}px`;
 		}
 
 		event.preventDefault();
@@ -61,13 +51,8 @@ class HippieTaskBar {
 		if (this.isDragging) {
 			if (!this.isDragging) return;
 
-			const x = event.clientX - this.offsetX;
-			const y = event.clientY - this.offsetY;
 			const closestEdge = getClosestEdge(this.placeholder);
 
-			this.placeholder.style.left = `${x}px`;
-			this.placeholder.style.top = `${y}px`;
-
 			switch (closestEdge) {
 				case 'right':
 				case 'left':
@@ -79,6 +64,8 @@ class HippieTaskBar {
 					this.placeholder.style.flexDirection = 'row';
 					break;
 			}
+
+			centerElementUnderCursor(event, this.placeholder);
 		}
 	}