feat(dashboard): add lock button to prevent accidental widget movement

- Add lock/unlock button to dashboard header (always visible)
- Lock state prevents dragging in both normal and edit modes
- Lock state prevents resizing in edit mode
- Icon changes: lock-open (unlocked) ↔ lock (locked)
- Hide resize handles and prevent grab cursor when locked
- Lock state persists across edit mode toggles
- Integrate lock checks in DragDropHandler and ResizeHandler
- Pass editManager reference to drag/resize handlers for lock state access
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-25 19:50:17 +11:00
parent d6c5101a7e
commit f84cbf794a
7 changed files with 112 additions and 66 deletions
+15 -2
View File
@@ -24,6 +24,7 @@ export class DragDropHandler {
*/
constructor(gridEngine, options = {}) {
this.gridEngine = gridEngine;
this.editManager = options.editManager || null; // Reference to EditModeManager for lock state
this.options = {
showGrid: true,
showCollisions: true,
@@ -64,6 +65,11 @@ export class DragDropHandler {
const mouseDownHandler = (e) => {
if (e.button !== 0) return; // Only left mouse button
// Don't drag if widgets are locked
if (this.editManager?.isWidgetsLocked()) {
return;
}
// Don't drag if clicking on resize handle or widget controls
if (e.target.closest('.resize-handle') || e.target.closest('.widget-edit-controls')) {
return;
@@ -92,6 +98,11 @@ export class DragDropHandler {
};
const touchStartHandler = (e) => {
// Don't drag if widgets are locked
if (this.editManager?.isWidgetsLocked()) {
return;
}
// Don't drag if touching resize handle or widget controls
if (e.target.closest('.resize-handle') || e.target.closest('.widget-edit-controls')) {
return;
@@ -130,8 +141,10 @@ export class DragDropHandler {
dragHandle
});
// Add draggable cursor
dragHandle.style.cursor = 'grab';
// Add draggable cursor (unless locked)
if (!this.editManager?.isWidgetsLocked()) {
dragHandle.style.cursor = 'grab';
}
}
/**