interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

fix: Placeholder moving away from cursor

Browse source 
- Create global centerElementUnderCursor for centering
- Change order of actions for mouse move
This commit is contained in:
sthag 2025-11-02 11:57:04 +01:00
parent aa5d095e64
commit 3dc836656a
2 changed files with 14 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

10
source/code/hippie/app.js
View file

@ -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

21
source/code/windows.js
View file

@ -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;
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`;
centerElementUnderCursor(event, this.placeholder);
}
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);
}
}