From 1ada62f6eceae2a55a9c94466658e3ba384c2a40 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 27 Oct 2025 23:24:02 +0100
Subject: [PATCH] feat: Optimize DragAdv class

- Only use left mouse button
- Handle element and placeholder together
---
 source/code/windows.js | 61 +++++++++++++++++++++---------------------
 1 file changed, 30 insertions(+), 31 deletions(-)

diff --git a/source/code/windows.js b/source/code/windows.js
index c6e42b8..f282729 100644
--- a/source/code/windows.js
+++ b/source/code/windows.js
@@ -61,6 +61,24 @@ class Draggable {
 
 		const closestEdge = Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
 
+		/*switch (closestEdge) {
+			case 'left':
+				this.element.style.left = '0px';
+				this.element.style.top = `${rect.top}px`;
+				break;
+			case 'right':
+				this.element.style.left = `${windowWidth - rect.width}px`;
+				this.element.style.top = `${rect.top}px`;
+				break;
+			case 'top':
+				this.element.style.top = '0px';
+				this.element.style.left = `${rect.left}px`;
+				break;
+			case 'bottom':
+				this.element.style.top = `${windowHeight - rect.height}px`;
+				this.element.style.left = `${rect.left}px`;
+				break;
+		}*/
 		this.setPosition(closestEdge, this.barSize);
 	}
 
@@ -129,19 +147,20 @@ class DragAdv {
 	}
 
 	onMouseDown(event) {
-		this.isDragging = true;
+		if (event.button === 0) {
+			this.isDragging = true;
 
-		this.showPlaceholder();
+			this.showPlaceholder();
 
-		this.offsetX = this.placeholder.getBoundingClientRect().width / 2;
-		this.offsetY = this.placeholder.getBoundingClientRect().height / 2;
-		this.element.style.display = 'none';
+			this.offsetX = this.placeholder.getBoundingClientRect().width / 2;
+			this.offsetY = this.placeholder.getBoundingClientRect().height / 2;
 
-		let x = event.clientX - this.offsetX;
-		let y = event.clientY - this.offsetY;
+			let x = event.clientX - this.offsetX;
+			let y = event.clientY - this.offsetY;
 
-		this.placeholder.style.left = `${x}px`;
-		this.placeholder.style.top = `${y}px`;
+			this.placeholder.style.left = `${x}px`;
+			this.placeholder.style.top = `${y}px`;
+		}
 
 		event.preventDefault();
 	}
@@ -160,18 +179,18 @@ class DragAdv {
 		if (!this.isDragging) return;
 		this.isDragging = false;
 
-		this.element.style.display = 'block';
-
 		this.snapToEdges();
 		this.hidePlaceholder();
 	}
 
 	showPlaceholder() {
+		this.element.style.display = 'none';
 		this.placeholder.style.display = 'block';
 	}
 
 	hidePlaceholder() {
 		this.placeholder.style.display = 'none';
+		this.element.style.display = '';
 	}
 
 	snapToEdges() {
@@ -188,27 +207,7 @@ class DragAdv {
 
 		const closestEdge = Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
 
-		console.log(rect);
-		console.log(closestEdge);
 		this.setPosition(closestEdge, this.barSize);
-		/*switch (closestEdge) {
-			case 'left':
-				this.element.style.left = '0px';
-				this.element.style.top = `${rect.top}px`;
-				break;
-			case 'right':
-				this.element.style.left = `${windowWidth - rect.width}px`;
-				this.element.style.top = `${rect.top}px`;
-				break;
-			case 'top':
-				this.element.style.top = '0px';
-				this.element.style.left = `${rect.left}px`;
-				break;
-			case 'bottom':
-				this.element.style.top = `${windowHeight - rect.height}px`;
-				this.element.style.left = `${rect.left}px`;
-				break;
-		}*/
 	}
 
 	setPosition(side, barSize) {