fix(layout): Phase-5-Review — off-screen-Clamp, Drag-Cleanup, Blur-Position, Import-pos

- Render + neuer debounced Resize-Handler clampen --board-x/y gegen den
  aktuellen Viewport: ein auf breiterem Fenster platziertes Board rendert
  nie mehr off-screen (und damit per Drag unerreichbar). board.pos bleibt
  unveraendert, bei spaeterer Verbreiterung wird die Originalposition erreicht.
- drag.js: cleanup() + pointercancel-Listener. Die Klasse .board.dragging
  klebte bei Touch-Interrupt/Browser-Geste sonst dauerhaft und legte den
  app.js-Sync-Guard (Quick-Save-Render) still.
- main.css: '.board.blurred { position: relative }' entfernt — lag im
  utilities-Layer und schlug das absolute Free-Layout (geblurrtes Board fiel
  aus seiner Position + war nicht mehr drag-bar).
- data.js: board.pos wird beim JSON-Import durchgereicht (safePos-Validierung
  via Number.isFinite), sonst Verlust des frei gesetzten Layouts beim Restore.
This commit is contained in:
2026-06-14 15:16:51 +02:00
parent 1d9e9dab81
commit 70f3f705b4
5 changed files with 76 additions and 23 deletions
+17
View File
@@ -27,6 +27,7 @@ async function init() {
bindGlobalEvents();
bindSettingsEvents();
bindStorageSync();
bindBoardResizeReclamp(); // Boards bei Fenster-Verkleinerung wieder in den sichtbaren Bereich holen
await drainQuickSavePending(); // beim Start angesammelte Quick-Saves (kein Tab war offen) einlesen
initSearch();
initPalette();
@@ -282,4 +283,20 @@ function bindStorageSync() {
});
}
// Freies Layout (LAYOUT-04): Boards stehen absolut positioniert. Schrumpft das Fenster, koennen
// sie ganz aus dem sichtbaren Bereich rutschen. renderBoards() klemmt die --board-x/--board-y jedes
// Boards beim Aufbau gegen die aktuelle Viewport — ein simpler Re-Render holt sie also zurueck.
// Debounce (150ms), damit kontinuierliches Resizen nicht hunderte Renders ausloest. Waehrend eines
// aktiven Drags NICHT neu rendern: renderBoards->replaceChildren wuerde den laufenden Drag abreissen.
function bindBoardResizeReclamp() {
let resizeTimer = null;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
if (document.querySelector('.board.dragging, .bm-item.dragging-source')) return;
renderBoards();
}, 150);
});
}
document.addEventListener('DOMContentLoaded', init);