generated from coulomb/repo-seed
feat: add refactored testdrive-jsui capability with consolidated architecture
Complete integration of refactored testdrive-jsui capability: ## Refactored Architecture - js/ - All JavaScript source (controls, components, core) - static/ - CSS, images, templates - src/testdrive_jsui/ - Python package - tests/ - Python tests ## Plugin Self-Declaration - get_plugin_source_dir() - plugin declares own location - get_asset_paths() - organized asset paths - No hardcoded discovery logic ## Merged Content - Baseline UI scaffold (tutorials, LICENSE, INTRODUCTION.md) - Refactored capability implementation - Comprehensive documentation Ready for standalone use or integration with markitect. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
852
js/controls/control-base.js
Normal file
852
js/controls/control-base.js
Normal file
@@ -0,0 +1,852 @@
|
||||
/**
|
||||
* Base Control Class for TestDrive-JSUI Controls
|
||||
*
|
||||
* Provides common functionality for positioning, drag, resize, expand/collapse operations.
|
||||
* This is the foundation class that all UI controls inherit from to ensure consistent
|
||||
* behavior across the TestDrive-JSUI component system.
|
||||
*
|
||||
* Key Features:
|
||||
* - Drag and drop positioning with compass-based anchoring
|
||||
* - Resize handles with hover-based visibility
|
||||
* - Expand/collapse state management
|
||||
* - Safe operation wrappers with error handling
|
||||
* - Development mode with strict error checking
|
||||
* - Accessibility support with proper ARIA labels
|
||||
*
|
||||
* Dependencies:
|
||||
* - None (standalone base class)
|
||||
*
|
||||
* Usage:
|
||||
* Controls inherit from this base by using Object.create(Control) and
|
||||
* implementing their specific buildContent() methods.
|
||||
*/
|
||||
|
||||
// Development mode detection for enhanced error reporting
|
||||
const MARKITECT_STRICT_MODE = (
|
||||
window.location.hostname === 'localhost' ||
|
||||
window.location.hostname === '127.0.0.1' ||
|
||||
window.location.search.includes('strict=true') ||
|
||||
window.markitectStrictMode === true
|
||||
);
|
||||
|
||||
/**
|
||||
* ControlBase - Foundation class for all TestDrive-JSUI controls
|
||||
*
|
||||
* Provides the base functionality that all controls inherit:
|
||||
* - DOM element management
|
||||
* - Positioning and drag behavior
|
||||
* - Resize handle management
|
||||
* - State persistence
|
||||
* - Error handling with strict mode support
|
||||
*/
|
||||
class ControlBase {
|
||||
constructor() {
|
||||
// Default configuration that controls can override
|
||||
this.config = {
|
||||
icon: '🔧',
|
||||
title: 'Control',
|
||||
className: 'base-control',
|
||||
defaultContent: 'Control content',
|
||||
ariaLabel: 'Base Control',
|
||||
position: 'w', // Compass position: west (middle-left)
|
||||
footer: null // Custom footer text
|
||||
};
|
||||
|
||||
// Internal state
|
||||
this.element = null;
|
||||
this.isExpanded = false;
|
||||
this.isHeaderOnly = false; // New state for header-only visibility
|
||||
this.isDragging = false;
|
||||
this.isResizing = false;
|
||||
this.position = { x: 0, y: 0 };
|
||||
this.size = {
|
||||
width: 300,
|
||||
height: Math.floor(window.innerHeight / 3)
|
||||
};
|
||||
this.originalPosition = null; // Store original position for collapse
|
||||
|
||||
// Event handlers storage
|
||||
this.eventHandlers = new Map();
|
||||
}
|
||||
|
||||
/**
|
||||
* Safe operation wrapper with error handling
|
||||
* Provides consistent error handling across all control operations
|
||||
*/
|
||||
safeOperation(operation, fallback = null, context = 'Unknown') {
|
||||
try {
|
||||
return operation();
|
||||
} catch (error) {
|
||||
console.error(`Control operation failed in ${context}:`, error);
|
||||
|
||||
if (MARKITECT_STRICT_MODE) {
|
||||
throw error; // Re-throw in strict mode for debugging
|
||||
}
|
||||
|
||||
return fallback;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create and initialize the control element
|
||||
* This method sets up the basic DOM structure that all controls use
|
||||
*/
|
||||
createElement() {
|
||||
return this.safeOperation(() => {
|
||||
if (this.element) {
|
||||
this.destroy(); // Clean up existing element
|
||||
}
|
||||
|
||||
const control = document.createElement('div');
|
||||
control.className = `control-panel ${this.config.className}`;
|
||||
control.setAttribute('role', 'dialog');
|
||||
control.setAttribute('aria-label', this.config.ariaLabel);
|
||||
|
||||
control.innerHTML = `
|
||||
<button class="control-toggle" aria-label="${this.config.ariaLabel}">${this.config.icon}</button>
|
||||
<div class="control-panel-expanded" style="display: none;">
|
||||
<div class="control-header">
|
||||
<span class="control-icon">${this.config.icon}</span>
|
||||
<span class="control-title">${this.config.title}</span>
|
||||
<button class="control-close">✕</button>
|
||||
</div>
|
||||
<div class="control-content">
|
||||
${this.config.defaultContent}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
this.element = control;
|
||||
this.setupStyles();
|
||||
this.setupEventListeners();
|
||||
return control;
|
||||
|
||||
}, null, 'createElement');
|
||||
}
|
||||
|
||||
/**
|
||||
* Set up base styles for the control
|
||||
*/
|
||||
setupStyles() {
|
||||
if (!this.element) return;
|
||||
|
||||
// Position the element
|
||||
this.element.style.position = 'fixed';
|
||||
this.element.style.zIndex = '1000';
|
||||
|
||||
// Store original position for collapse
|
||||
this.storeOriginalPosition();
|
||||
|
||||
// Style the icon-only toggle button
|
||||
const toggleBtn = this.element.querySelector('.control-toggle');
|
||||
if (toggleBtn) {
|
||||
toggleBtn.style.cssText = `
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
background: rgba(248, 249, 250, 0.95);
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
transition: all 0.2s ease;
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set up event listeners for control interaction
|
||||
* Handles dragging, resizing, and toggle functionality
|
||||
*/
|
||||
setupEventListeners() {
|
||||
if (!this.element) return;
|
||||
|
||||
// Icon toggle to expand
|
||||
const toggleBtn = this.element.querySelector('.control-toggle');
|
||||
if (toggleBtn) {
|
||||
this.addEventListener(toggleBtn, 'click', () => this.expand());
|
||||
}
|
||||
|
||||
// Close button to collapse back to icon
|
||||
const closeBtn = this.element.querySelector('.control-close');
|
||||
if (closeBtn) {
|
||||
this.addEventListener(closeBtn, 'click', () => this.collapse());
|
||||
}
|
||||
|
||||
// Header title click to toggle content visibility
|
||||
const title = this.element.querySelector('.control-title');
|
||||
if (title) {
|
||||
this.addEventListener(title, 'click', () => this.toggleHeaderOnly());
|
||||
}
|
||||
|
||||
// Drag functionality on header when expanded
|
||||
const header = this.element.querySelector('.control-header');
|
||||
if (header) {
|
||||
this.addEventListener(header, 'mousedown', (e) => {
|
||||
if (this.isExpanded && e.target !== title && e.target !== closeBtn) {
|
||||
this.startDrag(e);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add event listener with automatic cleanup tracking
|
||||
*/
|
||||
addEventListener(element, event, handler) {
|
||||
const key = `${element.className}_${event}`;
|
||||
|
||||
// Remove existing handler if it exists
|
||||
if (this.eventHandlers.has(key)) {
|
||||
const [oldElement, oldEvent, oldHandler] = this.eventHandlers.get(key);
|
||||
oldElement.removeEventListener(oldEvent, oldHandler);
|
||||
}
|
||||
|
||||
// Add new handler
|
||||
element.addEventListener(event, handler);
|
||||
this.eventHandlers.set(key, [element, event, handler]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Store original position for collapse restoration
|
||||
*/
|
||||
storeOriginalPosition() {
|
||||
if (!this.element) return;
|
||||
|
||||
const positionStyles = this.getCompassPosition();
|
||||
this.originalPosition = {
|
||||
top: positionStyles.top,
|
||||
left: positionStyles.left,
|
||||
right: positionStyles.right,
|
||||
bottom: positionStyles.bottom,
|
||||
transform: positionStyles.transform
|
||||
};
|
||||
|
||||
// Apply original position
|
||||
Object.assign(this.element.style, positionStyles);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get compass-based positioning styles
|
||||
*/
|
||||
getCompassPosition() {
|
||||
const positions = {
|
||||
'n': { top: '20px', left: '50%', transform: 'translateX(-50%)' },
|
||||
'ne': { top: '20px', right: '20px' },
|
||||
'e': { right: '20px', top: '50%', transform: 'translateY(-50%)' },
|
||||
'se': { bottom: '20px', right: '20px' },
|
||||
's': { bottom: '20px', left: '50%', transform: 'translateX(-50%)' },
|
||||
'sw': { bottom: '20px', left: '20px' },
|
||||
'w': { left: '20px', top: '50%', transform: 'translateY(-50%)' },
|
||||
'nw': { top: '20px', left: '20px' }
|
||||
};
|
||||
|
||||
return positions[this.config.position] || positions['w'];
|
||||
}
|
||||
|
||||
/**
|
||||
* Expand the control from icon-only state
|
||||
*/
|
||||
expand() {
|
||||
return this.safeOperation(() => {
|
||||
this.isExpanded = true;
|
||||
const panel = this.element?.querySelector('.control-panel-expanded');
|
||||
const toggleBtn = this.element?.querySelector('.control-toggle');
|
||||
|
||||
if (panel && toggleBtn) {
|
||||
panel.style.display = 'block';
|
||||
toggleBtn.style.display = 'none';
|
||||
|
||||
// Calculate default height as 1/3 of window height
|
||||
const defaultHeight = Math.floor(window.innerHeight / 3);
|
||||
|
||||
// Style expanded panel
|
||||
panel.style.cssText = `
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(248, 249, 250, 0.95);
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
backdrop-filter: blur(8px);
|
||||
min-width: 300px;
|
||||
min-height: 200px;
|
||||
max-height: calc(100vh - 40px);
|
||||
width: auto;
|
||||
height: ${defaultHeight}px;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
// Style header
|
||||
const header = this.element.querySelector('.control-header');
|
||||
if (header) {
|
||||
header.style.cssText = `
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px 12px;
|
||||
background: rgba(0,0,0,0.05);
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
cursor: move;
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
min-height: 24px;
|
||||
border-radius: 7px 7px 0 0;
|
||||
margin: -1px -1px 0 -1px;
|
||||
`;
|
||||
}
|
||||
|
||||
// Style content area container
|
||||
const contentArea = this.element.querySelector('.control-content');
|
||||
if (contentArea) {
|
||||
contentArea.style.cssText = `
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
`;
|
||||
}
|
||||
|
||||
// Style close button
|
||||
const closeBtn = this.element.querySelector('.control-close');
|
||||
if (closeBtn) {
|
||||
closeBtn.style.cssText = `
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
`;
|
||||
}
|
||||
|
||||
// Add resize handle
|
||||
this.addResizeHandle();
|
||||
this.buildContent();
|
||||
}
|
||||
|
||||
return this.isExpanded;
|
||||
}, false, 'expand');
|
||||
}
|
||||
|
||||
/**
|
||||
* Collapse back to icon-only state at original position
|
||||
*/
|
||||
collapse() {
|
||||
return this.safeOperation(() => {
|
||||
this.isExpanded = false;
|
||||
this.isHeaderOnly = false;
|
||||
const panel = this.element?.querySelector('.control-panel-expanded');
|
||||
const toggleBtn = this.element?.querySelector('.control-toggle');
|
||||
|
||||
if (panel && toggleBtn) {
|
||||
panel.style.display = 'none';
|
||||
toggleBtn.style.display = 'block';
|
||||
|
||||
// Restore original position
|
||||
if (this.originalPosition) {
|
||||
// Clear any drag positioning
|
||||
this.element.style.left = this.originalPosition.left || '';
|
||||
this.element.style.right = this.originalPosition.right || '';
|
||||
this.element.style.top = this.originalPosition.top || '';
|
||||
this.element.style.bottom = this.originalPosition.bottom || '';
|
||||
this.element.style.transform = this.originalPosition.transform || '';
|
||||
}
|
||||
|
||||
// Reset panel size to defaults
|
||||
panel.style.width = '';
|
||||
panel.style.height = '';
|
||||
panel.style.minWidth = '300px';
|
||||
panel.style.minHeight = '200px';
|
||||
|
||||
// Reset internal size tracking
|
||||
this.size.width = 300;
|
||||
this.size.height = Math.floor(window.innerHeight / 3);
|
||||
this.storedWidth = null;
|
||||
|
||||
// Remove resize handle
|
||||
this.removeResizeHandle();
|
||||
}
|
||||
|
||||
return !this.isExpanded;
|
||||
}, false, 'collapse');
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle header-only visibility (content show/hide)
|
||||
*/
|
||||
toggleHeaderOnly() {
|
||||
return this.safeOperation(() => {
|
||||
if (!this.isExpanded) {
|
||||
// If collapsed, expand first
|
||||
this.expand();
|
||||
return;
|
||||
}
|
||||
|
||||
const content = this.element?.querySelector('.control-content');
|
||||
const panel = this.element?.querySelector('.control-panel-expanded');
|
||||
|
||||
if (content && panel) {
|
||||
this.isHeaderOnly = !this.isHeaderOnly;
|
||||
const resizeHandle = this.element?.querySelector('.control-resize-handle');
|
||||
|
||||
if (this.isHeaderOnly) {
|
||||
// Store current width before collapsing
|
||||
const currentWidth = panel.offsetWidth;
|
||||
this.storedWidth = currentWidth;
|
||||
|
||||
// Hide content and shrink panel height only
|
||||
content.style.display = 'none';
|
||||
panel.style.minHeight = 'auto';
|
||||
panel.style.height = 'auto';
|
||||
|
||||
// Keep the same width and position
|
||||
panel.style.width = `${currentWidth}px`;
|
||||
panel.style.minWidth = `${currentWidth}px`;
|
||||
|
||||
// Hide resize handle in header-only mode
|
||||
if (resizeHandle) {
|
||||
resizeHandle.style.display = 'none';
|
||||
}
|
||||
} else {
|
||||
// Show content and restore full panel size
|
||||
content.style.display = 'block';
|
||||
panel.style.minHeight = '200px';
|
||||
|
||||
// Restore stored width or use default
|
||||
const widthToRestore = this.storedWidth || 300;
|
||||
panel.style.minWidth = `${widthToRestore}px`;
|
||||
|
||||
// Restore height if it was auto
|
||||
if (!panel.style.height || panel.style.height === 'auto') {
|
||||
panel.style.height = '200px';
|
||||
}
|
||||
if (!panel.style.width || panel.style.width === `${widthToRestore}px`) {
|
||||
panel.style.width = `${widthToRestore}px`;
|
||||
}
|
||||
|
||||
// Show resize handle when fully expanded
|
||||
if (resizeHandle) {
|
||||
resizeHandle.style.display = 'flex';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return this.isHeaderOnly;
|
||||
}, false, 'toggleHeaderOnly');
|
||||
}
|
||||
|
||||
/**
|
||||
* Start drag operation
|
||||
*/
|
||||
startDrag(event) {
|
||||
if (!this.isExpanded) return; // Only drag when expanded
|
||||
|
||||
this.isDragging = true;
|
||||
const rect = this.element.getBoundingClientRect();
|
||||
|
||||
// Calculate offset from mouse to element origin
|
||||
this.dragOffset = {
|
||||
x: event.clientX - rect.left,
|
||||
y: event.clientY - rect.top
|
||||
};
|
||||
|
||||
// Store current computed position before clearing styles
|
||||
const computedStyle = window.getComputedStyle(this.element);
|
||||
const currentLeft = rect.left;
|
||||
const currentTop = rect.top;
|
||||
|
||||
// Clear any positioning styles that interfere with dragging
|
||||
this.element.style.right = '';
|
||||
this.element.style.bottom = '';
|
||||
this.element.style.transform = '';
|
||||
|
||||
// Set the element to its current visual position using left/top
|
||||
this.element.style.left = `${currentLeft}px`;
|
||||
this.element.style.top = `${currentTop}px`;
|
||||
|
||||
// Update internal position tracking
|
||||
this.position.x = currentLeft;
|
||||
this.position.y = currentTop;
|
||||
|
||||
// Add global mouse move and up handlers
|
||||
const handleMouseMove = (e) => this.handleDrag(e);
|
||||
const handleMouseUp = () => this.stopDrag();
|
||||
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
|
||||
// Store handlers for cleanup (but don't use the tracked version to avoid conflicts)
|
||||
this._dragHandlers = { move: handleMouseMove, up: handleMouseUp };
|
||||
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle drag movement
|
||||
*/
|
||||
handleDrag(event) {
|
||||
if (!this.isDragging || !this.element) return;
|
||||
|
||||
// Calculate new position based on mouse position and offset
|
||||
const newX = event.clientX - this.dragOffset.x;
|
||||
const newY = event.clientY - this.dragOffset.y;
|
||||
|
||||
// Update element position
|
||||
this.element.style.left = `${newX}px`;
|
||||
this.element.style.top = `${newY}px`;
|
||||
|
||||
this.position.x = newX;
|
||||
this.position.y = newY;
|
||||
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
/**
|
||||
* Stop drag operation
|
||||
*/
|
||||
stopDrag() {
|
||||
if (!this.isDragging) return;
|
||||
|
||||
this.isDragging = false;
|
||||
|
||||
// Clean up event handlers
|
||||
if (this._dragHandlers) {
|
||||
document.removeEventListener('mousemove', this._dragHandlers.move);
|
||||
document.removeEventListener('mouseup', this._dragHandlers.up);
|
||||
delete this._dragHandlers;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add resize handle to expanded control
|
||||
*/
|
||||
addResizeHandle() {
|
||||
// Remove existing resize handle if any
|
||||
this.removeResizeHandle();
|
||||
|
||||
const resizeHandle = document.createElement('div');
|
||||
resizeHandle.className = 'control-resize-handle';
|
||||
resizeHandle.innerHTML = '●'; // Dot resize indicator
|
||||
resizeHandle.style.cssText = `
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 1px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
cursor: se-resize;
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
user-select: none;
|
||||
color: #999;
|
||||
background: transparent;
|
||||
z-index: 10;
|
||||
`;
|
||||
|
||||
// Add to the expanded panel
|
||||
const panel = this.element?.querySelector('.control-panel-expanded');
|
||||
if (panel) {
|
||||
panel.appendChild(resizeHandle);
|
||||
|
||||
// Set up resize handlers
|
||||
this.addEventListener(resizeHandle, 'mousedown', (e) => this.startResize(e));
|
||||
this.addEventListener(resizeHandle, 'dblclick', (e) => this.autoResizeToContent(e));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove resize handle
|
||||
*/
|
||||
removeResizeHandle() {
|
||||
const handle = this.element?.querySelector('.control-resize-handle');
|
||||
if (handle && handle.parentNode) {
|
||||
handle.parentNode.removeChild(handle);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Start resize operation
|
||||
*/
|
||||
startResize(event) {
|
||||
event.stopPropagation(); // Prevent drag from starting
|
||||
if (!this.isExpanded) return;
|
||||
|
||||
this.isResizing = true;
|
||||
const rect = this.element.getBoundingClientRect();
|
||||
|
||||
// Store initial size and mouse position
|
||||
this.resizeStart = {
|
||||
width: rect.width,
|
||||
height: rect.height,
|
||||
mouseX: event.clientX,
|
||||
mouseY: event.clientY
|
||||
};
|
||||
|
||||
// Add global mouse move and up handlers
|
||||
const handleMouseMove = (e) => this.handleResize(e);
|
||||
const handleMouseUp = () => this.stopResize();
|
||||
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
|
||||
// Store handlers for cleanup
|
||||
this._resizeHandlers = { move: handleMouseMove, up: handleMouseUp };
|
||||
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle resize movement (bottom-right corner resize)
|
||||
*/
|
||||
handleResize(event) {
|
||||
if (!this.isResizing || !this.element) return;
|
||||
|
||||
const panel = this.element.querySelector('.control-panel-expanded');
|
||||
if (!panel) return;
|
||||
|
||||
// Calculate size change based on mouse movement (bottom-right corner)
|
||||
const deltaX = event.clientX - this.resizeStart.mouseX; // Right direction
|
||||
const deltaY = event.clientY - this.resizeStart.mouseY; // Down direction
|
||||
|
||||
// Get minimum size (collapsed header size or default minimum)
|
||||
const headerHeight = this.element.querySelector('.control-header')?.offsetHeight || 40;
|
||||
const minWidth = 200;
|
||||
const minHeight = headerHeight + 20; // Header plus small padding
|
||||
|
||||
// Calculate new dimensions with minimum constraints
|
||||
const newWidth = Math.max(minWidth, this.resizeStart.width + deltaX);
|
||||
const newHeight = Math.max(minHeight, this.resizeStart.height + deltaY);
|
||||
|
||||
// Apply new size to the panel
|
||||
panel.style.width = `${newWidth}px`;
|
||||
panel.style.height = `${newHeight}px`;
|
||||
|
||||
// Update stored size
|
||||
this.size.width = newWidth;
|
||||
this.size.height = newHeight;
|
||||
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
/**
|
||||
* Stop resize operation
|
||||
*/
|
||||
stopResize() {
|
||||
if (!this.isResizing) return;
|
||||
|
||||
this.isResizing = false;
|
||||
|
||||
// Clean up event handlers
|
||||
if (this._resizeHandlers) {
|
||||
document.removeEventListener('mousemove', this._resizeHandlers.move);
|
||||
document.removeEventListener('mouseup', this._resizeHandlers.up);
|
||||
delete this._resizeHandlers;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Auto-resize panel to fit content size with viewport repositioning
|
||||
*/
|
||||
autoResizeToContent(event) {
|
||||
return this.safeOperation(() => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
if (!this.isExpanded) return;
|
||||
|
||||
const panel = this.element?.querySelector('.control-panel-expanded');
|
||||
const contentBody = this.element?.querySelector('.control-content-body');
|
||||
|
||||
if (!panel || !contentBody) return;
|
||||
|
||||
// Get current panel position
|
||||
const rect = panel.getBoundingClientRect();
|
||||
const currentLeft = rect.left;
|
||||
const currentTop = rect.top;
|
||||
|
||||
// Measure content size by temporarily allowing natural sizing
|
||||
const originalOverflow = contentBody.style.overflow;
|
||||
const originalMaxHeight = panel.style.maxHeight;
|
||||
const originalHeight = panel.style.height;
|
||||
const originalWidth = panel.style.width;
|
||||
|
||||
// Temporarily remove constraints to measure natural size
|
||||
contentBody.style.overflow = 'visible';
|
||||
panel.style.maxHeight = 'none';
|
||||
panel.style.height = 'auto';
|
||||
panel.style.width = 'auto';
|
||||
|
||||
// Force reflow and measure
|
||||
panel.offsetHeight; // Force reflow
|
||||
const contentRect = contentBody.getBoundingClientRect();
|
||||
const headerHeight = this.element.querySelector('.control-header')?.offsetHeight || 24;
|
||||
|
||||
// Calculate ideal size with padding and margins
|
||||
const idealWidth = Math.max(300, Math.min(window.innerWidth - 40, contentRect.width + 40));
|
||||
const idealHeight = Math.max(200, Math.min(window.innerHeight - 40, contentRect.height + headerHeight + 40));
|
||||
|
||||
// Restore original constraints
|
||||
contentBody.style.overflow = originalOverflow;
|
||||
panel.style.maxHeight = originalMaxHeight;
|
||||
|
||||
// Calculate new position to keep panel in viewport
|
||||
let newLeft = currentLeft;
|
||||
let newTop = currentTop;
|
||||
|
||||
// Adjust position if panel would go outside viewport
|
||||
if (currentLeft + idealWidth > window.innerWidth) {
|
||||
newLeft = window.innerWidth - idealWidth - 20;
|
||||
}
|
||||
if (newLeft < 20) {
|
||||
newLeft = 20;
|
||||
}
|
||||
|
||||
if (currentTop + idealHeight > window.innerHeight) {
|
||||
newTop = window.innerHeight - idealHeight - 20;
|
||||
}
|
||||
if (newTop < 20) {
|
||||
newTop = 20;
|
||||
}
|
||||
|
||||
// Apply new size and position
|
||||
panel.style.width = `${idealWidth}px`;
|
||||
panel.style.height = `${idealHeight}px`;
|
||||
|
||||
// Update position if it changed
|
||||
if (newLeft !== currentLeft || newTop !== currentTop) {
|
||||
this.element.style.left = `${newLeft}px`;
|
||||
this.element.style.top = `${newTop}px`;
|
||||
this.position.x = newLeft;
|
||||
this.position.y = newTop;
|
||||
}
|
||||
|
||||
// Update internal size tracking
|
||||
this.size.width = idealWidth;
|
||||
this.size.height = idealHeight;
|
||||
|
||||
}, null, 'autoResizeToContent');
|
||||
}
|
||||
|
||||
/**
|
||||
* Position the control based on compass position (used by show method)
|
||||
*/
|
||||
positionControl() {
|
||||
if (!this.element) return;
|
||||
|
||||
// Use the compass positioning from setupStyles
|
||||
this.storeOriginalPosition();
|
||||
}
|
||||
|
||||
/**
|
||||
* Build the control content (to be overridden by subclasses)
|
||||
*/
|
||||
/**
|
||||
* Build content with consistent styling - calls subclass generateContent()
|
||||
*/
|
||||
buildContent() {
|
||||
const content = this.element?.querySelector('.control-content');
|
||||
if (content) {
|
||||
// Get content from subclass
|
||||
const innerContent = this.generateContent ? this.generateContent() : this.config.defaultContent;
|
||||
|
||||
// Apply consistent container styling
|
||||
content.innerHTML = `
|
||||
<div class="control-content-container" style="
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 0 10px 1rem;
|
||||
padding: 0.75rem 1rem 1rem 0;
|
||||
font-size: 0.8rem;
|
||||
box-sizing: border-box;
|
||||
min-height: 0;
|
||||
border-radius: 0 0 6px 6px;
|
||||
overflow: hidden;
|
||||
">
|
||||
<div class="control-content-body" style="
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
min-height: 0;
|
||||
">
|
||||
${innerContent}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate content - subclasses should override this method
|
||||
* @returns {string} HTML content for the panel body
|
||||
*/
|
||||
generateContent() {
|
||||
return this.config.defaultContent || `<p>Panel content goes here...</p>`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the control
|
||||
*/
|
||||
show() {
|
||||
return this.safeOperation(() => {
|
||||
if (!this.element) {
|
||||
this.createElement();
|
||||
}
|
||||
|
||||
document.body.appendChild(this.element);
|
||||
this.positionControl();
|
||||
this.buildContent();
|
||||
|
||||
return this.element;
|
||||
}, null, 'show');
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the control
|
||||
*/
|
||||
hide() {
|
||||
return this.safeOperation(() => {
|
||||
if (this.element && this.element.parentNode) {
|
||||
this.element.parentNode.removeChild(this.element);
|
||||
}
|
||||
}, null, 'hide');
|
||||
}
|
||||
|
||||
/**
|
||||
* Destroy the control and clean up resources
|
||||
*/
|
||||
destroy() {
|
||||
return this.safeOperation(() => {
|
||||
// Clean up event listeners
|
||||
for (const [element, event, handler] of this.eventHandlers.values()) {
|
||||
element.removeEventListener(event, handler);
|
||||
}
|
||||
this.eventHandlers.clear();
|
||||
|
||||
// Remove element from DOM
|
||||
if (this.element && this.element.parentNode) {
|
||||
this.element.parentNode.removeChild(this.element);
|
||||
}
|
||||
|
||||
this.element = null;
|
||||
}, null, 'destroy');
|
||||
}
|
||||
}
|
||||
|
||||
// Export for module systems or attach to global for direct usage
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = ControlBase;
|
||||
} else {
|
||||
window.ControlBase = ControlBase;
|
||||
}
|
||||
Reference in New Issue
Block a user