Pakobbix/rpg-companion-sillytavern
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files
src/systems/dashboard/dashboardIntegration.js
+11
View File
@@ -238,6 +238,17 @@ function setupDashboardEventListeners(dependencies) {
});
}
// Lock/unlock widgets button
const lockWidgetsBtn = document.querySelector('#rpg-dashboard-lock-widgets');
if (lockWidgetsBtn) {
lockWidgetsBtn.addEventListener('click', () => {
if (dashboardManager && dashboardManager.editManager) {
console.log('[RPG Companion] Lock button clicked');
dashboardManager.editManager.toggleLock();
}
});
}
// Add widget button
const addWidgetBtn = document.querySelector('#rpg-dashboard-add-widget');
if (addWidgetBtn) {
src/systems/dashboard/dashboardManager.js
+17 -15
View File
@@ -156,21 +156,7 @@ export class DashboardManager {
}
});
// Initialize Drag & Drop
this.dragHandler = new DragDropHandler(this.gridEngine, {
showGrid: true,
enableSnap: true
});
// Initialize Resize Handler
this.resizeHandler = new ResizeHandler(this.gridEngine, {
minWidth: 1,
minHeight: 2,
maxWidth: 4, // Max 4 columns (will be clamped to actual column count)
maxHeight: 10
});
// Initialize Edit Mode Manager
// Initialize Edit Mode Manager first (needed by drag/resize handlers)
this.editManager = new EditModeManager({
container: this.container,
onSave: () => this.handleEditSave(),
@@ -180,6 +166,22 @@ export class DashboardManager {
onWidgetSettings: (widgetId) => this.openWidgetSettings(widgetId)
});
// Initialize Drag & Drop (with editManager reference)
this.dragHandler = new DragDropHandler(this.gridEngine, {
showGrid: true,
enableSnap: true,
editManager: this.editManager
});
// Initialize Resize Handler (with editManager reference)
this.resizeHandler = new ResizeHandler(this.gridEngine, {
minWidth: 1,
minHeight: 2,
maxWidth: 4, // Max 4 columns (will be clamped to actual column count)
maxHeight: 10,
editManager: this.editManager
});
// Initialize Layout Persistence
this.persistence = new LayoutPersistence({
debounceMs: this.config.debounceMs,
src/systems/dashboard/dashboardTemplate.html
+5
View File
@@ -18,6 +18,11 @@
<i class="fa-solid fa-table-cells-large"></i>
</button>
<!-- Lock/Unlock Button (always visible) -->
<button id="rpg-dashboard-lock-widgets" class="rpg-dashboard-btn rpg-lock-widgets-btn" title="Lock Widgets">
<i class="fa-solid fa-lock-open"></i>
</button>
<!-- Edit Mode Toggle -->
<button id="rpg-dashboard-edit-mode" class="rpg-dashboard-btn rpg-edit-mode-btn" title="Toggle Edit Mode">
<i class="fa-solid fa-pen-to-square"></i>
src/systems/dashboard/dragDrop.js
+14 -1
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,9 +141,11 @@ export class DragDropHandler {
dragHandle
});
// Add draggable cursor
// Add draggable cursor (unless locked)
if (!this.editManager?.isWidgetsLocked()) {
dragHandle.style.cursor = 'grab';
}
}
/**
* Remove drag functionality from a widget element
src/systems/dashboard/editModeManager.js
+44 -49
View File
@@ -28,8 +28,8 @@ export class EditModeManager {
this.onWidgetSettings = config.onWidgetSettings;
this.isEditMode = false;
this.isLocked = false; // Lock state prevents dragging/resizing
this.originalLayout = null;
this.editControls = null;
this.gridOverlay = null;
this.widgetLibrary = null;
this.widgetControlsMap = new Map();
@@ -48,14 +48,14 @@ export class EditModeManager {
// Store original layout for cancel
this.originalLayout = this.captureLayout();
// Create edit controls
this.createEditControls();
// Show edit mode buttons (lock button is always visible)
const addWidgetBtn = document.querySelector('#rpg-dashboard-add-widget');
const exportBtn = document.querySelector('#rpg-dashboard-export-layout');
const importBtn = document.querySelector('#rpg-dashboard-import-layout');
// Show grid overlay
this.showGridOverlay();
// Show widget library
this.showWidgetLibrary();
if (addWidgetBtn) addWidgetBtn.style.display = '';
if (exportBtn) exportBtn.style.display = '';
if (importBtn) importBtn.style.display = '';
// Add edit class to container
this.container.classList.add('edit-mode');
@@ -88,14 +88,14 @@ export class EditModeManager {
this.isEditMode = false;
this.originalLayout = null;
// Remove edit controls
this.removeEditControls();
// Hide edit mode buttons (lock button stays visible)
const addWidgetBtn = document.querySelector('#rpg-dashboard-add-widget');
const exportBtn = document.querySelector('#rpg-dashboard-export-layout');
const importBtn = document.querySelector('#rpg-dashboard-import-layout');
// Hide grid overlay
this.hideGridOverlay();
// Hide widget library
this.hideWidgetLibrary();
if (addWidgetBtn) addWidgetBtn.style.display = 'none';
if (exportBtn) exportBtn.style.display = 'none';
if (importBtn) importBtn.style.display = 'none';
// Remove edit class from container
this.container.classList.remove('edit-mode');
@@ -115,50 +115,45 @@ export class EditModeManager {
}
/**
* Create edit control buttons
* Toggle lock state
*/
createEditControls() {
if (this.editControls) return;
toggleLock() {
this.isLocked = !this.isLocked;
this.editControls = document.createElement('div');
this.editControls.className = 'edit-controls';
this.editControls.style.position = 'absolute';
this.editControls.style.top = '10px';
this.editControls.style.right = '10px';
this.editControls.style.display = 'flex';
this.editControls.style.gap = '8px';
this.editControls.style.zIndex = '10000';
// Update button appearance
const lockBtn = document.querySelector('#rpg-dashboard-lock-widgets');
if (lockBtn) {
const icon = lockBtn.querySelector('i');
if (this.isLocked) {
icon.className = 'fa-solid fa-lock';
lockBtn.title = 'Unlock Widgets';
} else {
icon.className = 'fa-solid fa-lock-open';
lockBtn.title = 'Lock Widgets';
}
}
// Save button
const saveBtn = document.createElement('button');
saveBtn.className = 'edit-btn edit-btn-save';
saveBtn.textContent = '💾 Save';
saveBtn.onclick = () => this.exitEditMode(true);
this.styleButton(saveBtn, '#4ecca3', '#1a1a2e');
// Add/remove locked class to container for CSS styling
if (this.isLocked) {
this.container.classList.add('widgets-locked');
} else {
this.container.classList.remove('widgets-locked');
}
// Cancel button
const cancelBtn = document.createElement('button');
cancelBtn.className = 'edit-btn edit-btn-cancel';
cancelBtn.textContent = '✖ Cancel';
cancelBtn.onclick = () => this.confirmCancel(() => this.exitEditMode(false));
this.styleButton(cancelBtn, '#e94560', 'white');
this.editControls.appendChild(saveBtn);
this.editControls.appendChild(cancelBtn);
this.container.appendChild(this.editControls);
// Notify listeners
this.notifyChange('lockStateChanged', { locked: this.isLocked });
console.log('[EditModeManager] Lock state:', this.isLocked ? 'LOCKED' : 'UNLOCKED');
}
/**
* Remove edit control buttons
* Check if widgets are currently locked
* @returns {boolean} True if locked
*/
removeEditControls() {
if (this.editControls) {
this.editControls.remove();
this.editControls = null;
}
isWidgetsLocked() {
return this.isLocked;
}
/**
* Show grid overlay (now handled via CSS on container)
*/
src/systems/dashboard/resizeHandler.js
+9
View File
@@ -27,6 +27,7 @@ export class ResizeHandler {
*/
constructor(gridEngine, options = {}) {
this.gridEngine = gridEngine;
this.editManager = options.editManager || null; // Reference to EditModeManager for lock state
this.options = {
showDimensions: true,
showGrid: true,
@@ -92,12 +93,20 @@ export class ResizeHandler {
const mouseDownHandler = (e) => {
if (e.button !== 0) return;
// Don't resize if widgets are locked
if (this.editManager?.isWidgetsLocked()) {
return;
}
e.preventDefault();
e.stopPropagation();
this.startResize(e, handleType, element, widget, onResizeEnd, widgetConstraints);
};
const touchStartHandler = (e) => {
// Don't resize if widgets are locked
if (this.editManager?.isWidgetsLocked()) {
return;
}
this.touchTimer = setTimeout(() => {
e.preventDefault();
e.stopPropagation();
style.css
+11
View File
@@ -1172,6 +1172,17 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
pointer-events: auto;
}
/* Hide resize handles when widgets are locked */
.widgets-locked .resize-handles {
opacity: 0 !important;
pointer-events: none !important;
}
/* Prevent grab cursor when widgets are locked */
.widgets-locked .rpg-widget {
cursor: default !important;
}
/* ========================================
DASHBOARD V2 WIDGET STYLES
========================================