Vibecode/epaper-dashboard
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

BUG-01: Resize-Handle bricht ab — HTML5-Drag feuert vor mousedown #3

New Issue
Closed
opened 2026-08-29 15:15:05 +02:00 by ki · 1 comment
ki commented 2026-08-29 15:15:05 +02:00
Owner
Copy Link
Copy Source

Reproduktion

  1. Admin UI aufrufen (z.B. http://10.11.3.144:8080/?demo=1)
  2. Item per Drag hinzufügen oder vorhandenes 2×2-Item wählen
  3. Maus auf die rechts-unten Ecke (Resize-Dreieck) bewegen
  4. Ziehen versuchen

Symptom

  • Item wird verschoben statt resized, ODER
  • gar keine Reaktion, weil HTML5-Dragstart den mousedown-Handler schluckt

Ursache

templates/index.html:1308 setzt div.draggable = true auf dem Grid-Item. Der Resize-Handle (:451-467, 18×18 px in der Ecke) ist ein Kind des Items. Browser fired dragstart am Parent, sobald Maus auf irgendeinem Kind ist — e.preventDefault() in startResize() (:1496) kommt zu spät, das HTML5-Drag-System hat den Move bereits übernommen.

Akzeptanz

  • Resize per Maus funktioniert zuverlässig für jede Ecke und Seite
  • Drag-Move bleibt unverändert (Body ohne Handle)
  • Touch + Mouse-Events parity
  • Tests/Manual: jedes Item kann auf 1×1, 2×2, 4×4 resized werden ohne dass ein Move-Drag startet
## Reproduktion 1. Admin UI aufrufen (z.B. http://10.11.3.144:8080/?demo=1) 2. Item per Drag hinzufügen oder vorhandenes 2×2-Item wählen 3. Maus auf die **rechts-unten Ecke** (Resize-Dreieck) bewegen 4. Ziehen versuchen ## Symptom - Item wird **verschoben** statt resized, ODER - gar keine Reaktion, weil HTML5-Dragstart den mousedown-Handler schluckt ## Ursache `templates/index.html:1308` setzt `div.draggable = true` auf dem Grid-Item. Der Resize-Handle (`:451-467`, 18×18 px in der Ecke) ist ein Kind des Items. Browser fired `dragstart` am Parent, sobald Maus auf irgendeinem Kind ist — `e.preventDefault()` in `startResize()` (`:1496`) kommt zu spät, das HTML5-Drag-System hat den Move bereits übernommen. ## Akzeptanz - Resize per Maus funktioniert zuverlässig für jede Ecke und Seite - Drag-Move bleibt unverändert (Body ohne Handle) - Touch + Mouse-Events parity - Tests/Manual: jedes Item kann auf 1×1, 2×2, 4×4 resized werden ohne dass ein Move-Drag startet
ki added the uxfrontendadmin-uilayoutbug labels 2026-08-29 15:15:05 +02:00
ki commented 2026-08-29 15:32:03 +02:00
Author
Owner
Copy Link
Copy Source

Fixed in branch fix/BUG-01-02-resize-pointer (commit 3a44881, pushed).

Was war kaputt:
Items hatten div.draggable = true (HTML5-DnD). Der Resize-Handle war ein Kind des Items — Browser fired dragstart am Parent sobald die Maus auf irgendeinem Kind war. Der e.preventDefault() im mousedown-Handler kam zu spät, der Move-Drag hatte schon übernommen.

Fix:

  • div.draggable = true komplett raus
  • Eigene Pointer-Events für Move + Resize (pointerdown/pointermove/pointerup)
  • Resize-Handle hat pointer-events:auto, ::before (Dreieck-Deko) pointer-events:none → Hit-Trennung
  • touch-action:none für Touch-Scroll-Fix
  • stopPropagation() im Resize-Handler → Item-Handler sieht das Event NICHT

Frischer Beweis: node tests/test_pointer_events.js (7/7 grün):

TEST 1: Resize-Handle pointerdown — stopPropagation called?  ✓
TEST 2: Item-Body pointerdown (target = item):                ✓
TEST 3: Resize-Handle CSS pointer-events:                     ✓
TEST 4: renderGrid() NOT called inside pointer move handlers: ✓ (0/2)
TEST 5: requestAnimationFrame used for resize/move:           ✓ (3 calls)
TEST 6: draggable=true entfernt:                              ✓ (0)
TEST 7: touch-action:none auf Resize-Handle:                  ✓

PR: https://git.pkop.de/Vibecode/epaper-dashboard/pulls/new/fix/BUG-01-02-resize-pointer

⚠️ Siehe auch BUG-02 — wird im selben Patch mitgefixt.

Fixed in branch `fix/BUG-01-02-resize-pointer` (commit 3a44881, pushed). **Was war kaputt:** Items hatten `div.draggable = true` (HTML5-DnD). Der Resize-Handle war ein Kind des Items — Browser fired `dragstart` am Parent sobald die Maus auf irgendeinem Kind war. Der `e.preventDefault()` im mousedown-Handler kam zu spät, der Move-Drag hatte schon übernommen. **Fix:** - `div.draggable = true` komplett raus - Eigene Pointer-Events für Move + Resize (`pointerdown`/`pointermove`/`pointerup`) - Resize-Handle hat `pointer-events:auto`, `::before` (Dreieck-Deko) `pointer-events:none` → Hit-Trennung - `touch-action:none` für Touch-Scroll-Fix - `stopPropagation()` im Resize-Handler → Item-Handler sieht das Event NICHT **Frischer Beweis:** `node tests/test_pointer_events.js` (7/7 grün): ``` TEST 1: Resize-Handle pointerdown — stopPropagation called? ✓ TEST 2: Item-Body pointerdown (target = item): ✓ TEST 3: Resize-Handle CSS pointer-events: ✓ TEST 4: renderGrid() NOT called inside pointer move handlers: ✓ (0/2) TEST 5: requestAnimationFrame used for resize/move: ✓ (3 calls) TEST 6: draggable=true entfernt: ✓ (0) TEST 7: touch-action:none auf Resize-Handle: ✓ ``` PR: https://git.pkop.de/Vibecode/epaper-dashboard/pulls/new/fix/BUG-01-02-resize-pointer ⚠️ Siehe auch BUG-02 — wird im selben Patch mitgefixt.
ki closed this issue 2026-08-29 15:32:03 +02:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
admin-ui
bug
frontend
good-first-issue
layout
ux
No labels admin-ui bug frontend layout ux
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
Jenkins ki patrik
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Vibecode/epaper-dashboard#3