tegwick
8ef356af57
Added comprehensive plugin system for independent JavaScript UI development: **Plugin Infrastructure:** - Extended existing MarkiTect plugin system with RenderingEnginePlugin base class - Added RENDERING plugin type to PluginType enum - Created RenderingConfig for asset management and deployment - Implemented RenderingEngineManager for plugin discovery and lifecycle **TestDrive JSUI Plugin:** - Extracted JavaScript UI components to independent testdrive-jsui plugin - Created standalone development environment (no Python required) - Implemented compass-positioned control panels (NW, NE, E, SE) - Added clean JSON configuration interface for Python↔JavaScript data transfer **Asset Management:** - Development mode: serve assets directly from plugin source directory - Production mode: deploy to _markitect/plugins/[plugin-name]/ structure - Configurable asset URLs and deployment strategies - Support for external dependencies (CDN resources) **Standalone Development:** - testdrive-jsui/test.html for browser-based development - Package.json with npm scripts for development server - Complete separation of JavaScript development from Python environment - Hot reload and standard web development workflow **Integration Demo:** - demo_plugin_integration.py showcasing all plugin capabilities - Standalone, plugin discovery, production deployment examples - Asset URL generation for different deployment modes This enables JavaScript-first development while maintaining clean integration with the MarkiTect Python ecosystem. Developers can now work on UI components independently using standard web development tools and workflows. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
515 lines
20 KiB
JavaScript
515 lines
20 KiB
JavaScript
/**
|
||
* Base Control Class for Markitect UI Controls
|
||
* Provides common functionality for positioning, drag, resize, expand/collapse
|
||
* Supports Fail Fast strict mode for development
|
||
*/
|
||
|
||
// Development mode detection (must match main.js)
|
||
const MARKITECT_STRICT_MODE = (
|
||
window.location.hostname === 'localhost' ||
|
||
window.location.hostname === '127.0.0.1' ||
|
||
window.location.search.includes('strict=true') ||
|
||
window.markitectStrictMode === true
|
||
);
|
||
|
||
const Control = {
|
||
// Default configuration
|
||
config: {
|
||
icon: '🔧',
|
||
title: 'Control',
|
||
className: 'base-control',
|
||
defaultContent: 'Control content',
|
||
ariaLabel: 'Base Control',
|
||
position: 'w', // Default compass position: west (middle-left)
|
||
footer: null // If null, will use default Markitect copyright
|
||
},
|
||
|
||
// Utility functions for safe operations
|
||
safeOperation: function(operation, fallback = null, context = 'Unknown') {
|
||
try {
|
||
return operation();
|
||
} catch (error) {
|
||
console.warn(`Control operation failed in ${context}:`, error);
|
||
|
||
// Fail Fast in development mode
|
||
if (MARKITECT_STRICT_MODE) {
|
||
console.error(`🚨 STRICT MODE: Control operation failed in ${context}`);
|
||
throw error; // Re-throw for immediate debugging
|
||
}
|
||
|
||
if (window.MarkitectDebugSystem) {
|
||
window.MarkitectDebugSystem.addMessage(
|
||
`Safe operation failed: ${error.message}`,
|
||
'WARNING',
|
||
'Control',
|
||
{ context, eventType: 'ERROR' }
|
||
);
|
||
}
|
||
return typeof fallback === 'function' ? fallback() : fallback;
|
||
}
|
||
},
|
||
|
||
safeQuerySelector: function(selector, parent = document) {
|
||
try {
|
||
if (!parent || !parent.querySelector) {
|
||
return null;
|
||
}
|
||
return parent.querySelector(selector);
|
||
} catch (error) {
|
||
console.warn(`Invalid selector: ${selector}`, error);
|
||
return null;
|
||
}
|
||
},
|
||
|
||
safeQuerySelectorAll: function(selector, parent = document) {
|
||
try {
|
||
if (!parent || !parent.querySelectorAll) {
|
||
return [];
|
||
}
|
||
return Array.from(parent.querySelectorAll(selector));
|
||
} catch (error) {
|
||
console.warn(`Invalid selector: ${selector}`, error);
|
||
return [];
|
||
}
|
||
},
|
||
|
||
// Version and default footer
|
||
getMarkitectVersion: function() {
|
||
return this.safeOperation(() => {
|
||
// Try to get version from various sources
|
||
if (window.markitectVersion) {
|
||
return window.markitectVersion;
|
||
}
|
||
|
||
// Check for generator meta tag in document head
|
||
const generatorMeta = this.safeQuerySelector('meta[name="generator"]');
|
||
if (generatorMeta) {
|
||
const content = generatorMeta.getAttribute('content');
|
||
if (content && content.includes('Markitect')) {
|
||
// Extract version from generator content
|
||
// Expected formats: "Markitect 1.0.0" or "Markitect/1.0.0" or "Markitect v1.0.0"
|
||
const versionMatch = content.match(/Markitect[\s\/v]*([\d\.]+[\w\-\.]*)/i);
|
||
if (versionMatch && versionMatch[1]) {
|
||
return versionMatch[1];
|
||
}
|
||
}
|
||
}
|
||
|
||
// Fallback version with generation timestamp
|
||
const now = new Date();
|
||
const timestamp = now.toISOString().slice(0, 19).replace('T', ' ');
|
||
return `Generated ${timestamp}`;
|
||
}, () => 'Unknown Version', 'getMarkitectVersion');
|
||
},
|
||
|
||
getDefaultFooter: function() {
|
||
return `© Markitect ${this.getMarkitectVersion()}`;
|
||
},
|
||
|
||
getFooter: function() {
|
||
if (this.config.footer !== null) {
|
||
return this.config.footer;
|
||
}
|
||
return this.getDefaultFooter();
|
||
},
|
||
|
||
// Compass positioning system (top-aligned for proper expansion)
|
||
compassPositions: {
|
||
'n': { top: '20px', left: '50%', transform: 'translateX(-50%)' },
|
||
'nne': { top: '40px', right: '120px' },
|
||
'ne': { top: '20px', right: '20px' },
|
||
'ene': { top: '80px', right: '20px' },
|
||
'e': { top: '50vh', right: '20px', transform: 'translateY(-20px)' },
|
||
'ese': { top: 'calc(50vh + 80px)', right: '20px', transform: 'translateY(-20px)' },
|
||
'se': { bottom: '20px', right: '20px' },
|
||
'sse': { bottom: '40px', right: '120px' },
|
||
's': { bottom: '20px', left: '50%', transform: 'translateX(-50%)' },
|
||
'ssw': { bottom: '40px', left: '120px' },
|
||
'sw': { bottom: '20px', left: '20px' },
|
||
'wsw': { bottom: '80px', left: '20px' },
|
||
'w': { top: '50vh', left: '20px', transform: 'translateY(-20px)' },
|
||
'wnw': { top: 'calc(50vh - 80px)', left: '20px', transform: 'translateY(-20px)' },
|
||
'nw': { top: '20px', left: '20px' },
|
||
'nnw': { top: '40px', left: '120px' }
|
||
},
|
||
|
||
// State management
|
||
isExpanded: false,
|
||
isDragging: false,
|
||
isResizing: false,
|
||
element: null,
|
||
|
||
createControl: function() {
|
||
return this.safeOperation(() => {
|
||
console.log(`Creating ${this.config.title} control...`);
|
||
|
||
// Validate configuration
|
||
if (!this.config || !this.config.title) {
|
||
throw new Error('Invalid control configuration');
|
||
}
|
||
|
||
// Ensure document.body exists
|
||
if (!document.body) {
|
||
throw new Error('Document body not available');
|
||
}
|
||
|
||
// Create main control element
|
||
this.element = document.createElement('div');
|
||
this.element.className = `control-panel ${this.config.className || ''}`;
|
||
this.element.setAttribute('role', 'dialog');
|
||
this.element.setAttribute('aria-label', this.config.ariaLabel || this.config.title);
|
||
|
||
// Position the control using compass system
|
||
const position = this.compassPositions[this.config.position] || this.compassPositions['w'];
|
||
Object.assign(this.element.style, {
|
||
position: 'fixed',
|
||
zIndex: '1000',
|
||
...position
|
||
});
|
||
|
||
// Build the control structure
|
||
this.buildControlStructure();
|
||
|
||
// Add to document
|
||
document.body.appendChild(this.element);
|
||
|
||
console.log(`${this.config.title} control created and positioned at ${this.config.position}`);
|
||
return this.element;
|
||
}, () => {
|
||
console.error(`Failed to create ${this.config?.title || 'Unknown'} control`);
|
||
return null;
|
||
}, 'createControl');
|
||
},
|
||
|
||
buildControlStructure: function() {
|
||
this.safeOperation(() => {
|
||
if (!this.element) {
|
||
throw new Error('Control element not available');
|
||
}
|
||
|
||
// Sanitize configuration values
|
||
const safeIcon = (this.config.icon || '🔧').replace(/[<>"'&]/g, '');
|
||
const safeTitle = (this.config.title || 'Control').replace(/[<>"'&]/g, '');
|
||
const safeContent = (this.config.defaultContent || 'Control content').replace(/[<>]/g, '');
|
||
|
||
this.element.innerHTML = `
|
||
<div class="control-header" style="
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 0.5rem; background: #f8f9fa; border-radius: 6px;
|
||
cursor: pointer; user-select: none; font-size: 0.9rem;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid #dee2e6;
|
||
transition: all 0.2s ease; min-width: 120px;">
|
||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||
<span style="font-size: 1.2rem;">${safeIcon}</span>
|
||
<span class="control-title" style="font-weight: 500; color: #495057;">${safeTitle}</span>
|
||
</div>
|
||
<button class="control-close" style="
|
||
background: none; border: none; font-size: 1.1rem; color: #6c757d;
|
||
cursor: pointer; padding: 0; width: 20px; height: 20px;
|
||
display: none; align-items: center; justify-content: center;
|
||
border-radius: 50%; transition: all 0.2s ease;"
|
||
onmouseover="this.style.backgroundColor='#e9ecef'"
|
||
onmouseout="this.style.backgroundColor=''"
|
||
onclick="event.stopPropagation();">×</button>
|
||
</div>
|
||
<div class="control-content" style="
|
||
display: none; background: white; border: 1px solid #dee2e6;
|
||
border-radius: 6px; margin-top: 0.5rem; max-width: 350px;
|
||
min-width: 250px; max-height: 400px; overflow-y: auto;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
|
||
<div style="padding: 1rem;">
|
||
${safeContent}
|
||
</div>
|
||
<div class="control-footer" style="display: none;"></div>
|
||
</div>
|
||
`;
|
||
|
||
// Set up event listeners with error protection
|
||
this.safeOperation(() => this.setupEventListeners(), null, 'setupEventListeners');
|
||
this.safeOperation(() => this.addResizeHandle(), null, 'addResizeHandle');
|
||
this.safeOperation(() => this.addDragFunctionality(), null, 'addDragFunctionality');
|
||
}, () => {
|
||
console.error('Failed to build control structure');
|
||
if (this.element) {
|
||
this.element.innerHTML = '<div style="color: red; padding: 0.5rem;">Control failed to load</div>';
|
||
}
|
||
}, 'buildControlStructure');
|
||
},
|
||
|
||
setupEventListeners: function() {
|
||
const header = this.safeQuerySelector('.control-header', this.element);
|
||
const closeBtn = this.safeQuerySelector('.control-close', this.element);
|
||
|
||
if (!header || !closeBtn) {
|
||
console.warn('Control header or close button not found');
|
||
return;
|
||
}
|
||
|
||
// Toggle expand/collapse on header click
|
||
header.addEventListener('click', (e) => {
|
||
this.safeOperation(() => {
|
||
e.stopPropagation();
|
||
this.toggle();
|
||
}, null, 'headerClick');
|
||
});
|
||
|
||
// Close button
|
||
closeBtn.addEventListener('click', (e) => {
|
||
this.safeOperation(() => {
|
||
e.stopPropagation();
|
||
this.collapse();
|
||
}, null, 'closeClick');
|
||
});
|
||
|
||
// Show/hide close button and resize handle on hover with bounds checking
|
||
this.element.addEventListener('mouseenter', () => {
|
||
this.safeOperation(() => {
|
||
if (this.isExpanded && closeBtn) {
|
||
closeBtn.style.display = 'flex';
|
||
const resizeHandle = this.safeQuerySelector('.resize-handle', this.element);
|
||
if (resizeHandle) {
|
||
resizeHandle.style.display = 'block';
|
||
}
|
||
}
|
||
}, null, 'mouseEnter');
|
||
});
|
||
|
||
this.element.addEventListener('mouseleave', () => {
|
||
this.safeOperation(() => {
|
||
if (closeBtn) {
|
||
closeBtn.style.display = 'none';
|
||
}
|
||
const resizeHandle = this.safeQuerySelector('.resize-handle', this.element);
|
||
if (resizeHandle) {
|
||
resizeHandle.style.display = 'none';
|
||
}
|
||
}, null, 'mouseLeave');
|
||
});
|
||
},
|
||
|
||
addResizeHandle: function() {
|
||
const resizeHandle = document.createElement('div');
|
||
resizeHandle.className = 'resize-handle';
|
||
resizeHandle.innerHTML = ''; // Small circle via CSS
|
||
resizeHandle.style.cssText = `
|
||
position: absolute; bottom: 2px; right: 2px;
|
||
width: 8px; height: 8px; cursor: nw-resize;
|
||
display: none; background: #6c757d; border-radius: 50%;
|
||
`;
|
||
|
||
this.element.appendChild(resizeHandle);
|
||
|
||
// Resize functionality
|
||
let startX, startY, startWidth, startHeight;
|
||
|
||
resizeHandle.addEventListener('mousedown', (e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
this.isResizing = true;
|
||
|
||
const content = this.element.querySelector('.control-content');
|
||
const rect = content.getBoundingClientRect();
|
||
|
||
startX = e.clientX;
|
||
startY = e.clientY;
|
||
startWidth = rect.width;
|
||
startHeight = rect.height;
|
||
|
||
document.addEventListener('mousemove', handleResize);
|
||
document.addEventListener('mouseup', stopResize);
|
||
});
|
||
|
||
const handleResize = (e) => {
|
||
if (!this.isResizing) return;
|
||
|
||
const content = this.element.querySelector('.control-content');
|
||
const deltaX = e.clientX - startX;
|
||
const deltaY = e.clientY - startY;
|
||
|
||
const newWidth = Math.max(200, startWidth + deltaX);
|
||
const newHeight = Math.max(100, startHeight + deltaY);
|
||
|
||
content.style.width = `${newWidth}px`;
|
||
content.style.height = `${newHeight}px`;
|
||
};
|
||
|
||
const stopResize = () => {
|
||
this.isResizing = false;
|
||
document.removeEventListener('mousemove', handleResize);
|
||
document.removeEventListener('mouseup', stopResize);
|
||
};
|
||
},
|
||
|
||
addDragFunctionality: function() {
|
||
const header = this.safeQuerySelector('.control-header', this.element);
|
||
if (!header) {
|
||
console.warn('Header not found for drag functionality');
|
||
return;
|
||
}
|
||
|
||
let startX, startY, startLeft, startTop, dragTimeout;
|
||
|
||
header.addEventListener('mousedown', (e) => {
|
||
this.safeOperation(() => {
|
||
if (e.target.closest('.control-close')) return;
|
||
|
||
// Clear any existing drag timeout
|
||
if (dragTimeout) {
|
||
clearTimeout(dragTimeout);
|
||
}
|
||
|
||
this.isDragging = true;
|
||
const rect = this.element.getBoundingClientRect();
|
||
|
||
startX = e.clientX;
|
||
startY = e.clientY;
|
||
startLeft = rect.left;
|
||
startTop = rect.top;
|
||
|
||
document.addEventListener('mousemove', handleDrag);
|
||
document.addEventListener('mouseup', stopDrag);
|
||
|
||
// Safety timeout to prevent infinite dragging
|
||
dragTimeout = setTimeout(() => {
|
||
if (this.isDragging) {
|
||
console.warn('Drag operation timed out');
|
||
stopDrag();
|
||
}
|
||
}, 30000); // 30 second timeout
|
||
}, null, 'dragStart');
|
||
});
|
||
|
||
const handleDrag = (e) => {
|
||
this.safeOperation(() => {
|
||
if (!this.isDragging || !this.element) return;
|
||
|
||
const deltaX = e.clientX - startX;
|
||
const deltaY = e.clientY - startY;
|
||
|
||
// Constrain to viewport bounds
|
||
const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
|
||
const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
|
||
|
||
const newLeft = Math.max(0, Math.min(viewportWidth - 100, startLeft + deltaX));
|
||
const newTop = Math.max(0, Math.min(viewportHeight - 50, startTop + deltaY));
|
||
|
||
this.element.style.left = `${newLeft}px`;
|
||
this.element.style.top = `${newTop}px`;
|
||
this.element.style.right = 'auto';
|
||
this.element.style.bottom = 'auto';
|
||
this.element.style.transform = 'none';
|
||
}, null, 'dragMove');
|
||
};
|
||
|
||
const stopDrag = () => {
|
||
this.safeOperation(() => {
|
||
this.isDragging = false;
|
||
if (dragTimeout) {
|
||
clearTimeout(dragTimeout);
|
||
dragTimeout = null;
|
||
}
|
||
document.removeEventListener('mousemove', handleDrag);
|
||
document.removeEventListener('mouseup', stopDrag);
|
||
}, null, 'dragStop');
|
||
};
|
||
},
|
||
|
||
expand: function() {
|
||
this.safeOperation(() => {
|
||
if (this.isExpanded) return;
|
||
|
||
const content = this.safeQuerySelector('.control-content', this.element);
|
||
const closeBtn = this.safeQuerySelector('.control-close', this.element);
|
||
|
||
if (!content || !closeBtn) {
|
||
console.warn('Control content or close button not found for expansion');
|
||
return;
|
||
}
|
||
|
||
content.style.display = 'block';
|
||
closeBtn.style.display = 'flex';
|
||
this.isExpanded = true;
|
||
|
||
// Style footer
|
||
this.styleFooter();
|
||
|
||
console.log(`${this.config.title || 'Unknown'} control expanded`);
|
||
}, null, 'expand');
|
||
},
|
||
|
||
collapse: function() {
|
||
this.safeOperation(() => {
|
||
if (!this.isExpanded) return;
|
||
|
||
const content = this.safeQuerySelector('.control-content', this.element);
|
||
const closeBtn = this.safeQuerySelector('.control-close', this.element);
|
||
const resizeHandle = this.safeQuerySelector('.resize-handle', this.element);
|
||
|
||
if (content) {
|
||
content.style.display = 'none';
|
||
content.style.width = '';
|
||
content.style.height = '';
|
||
}
|
||
if (closeBtn) {
|
||
closeBtn.style.display = 'none';
|
||
}
|
||
if (resizeHandle) {
|
||
resizeHandle.style.display = 'none';
|
||
}
|
||
this.isExpanded = false;
|
||
|
||
console.log(`${this.config.title || 'Unknown'} control collapsed`);
|
||
}, null, 'collapse');
|
||
},
|
||
|
||
toggle: function() {
|
||
this.safeOperation(() => {
|
||
if (this.isExpanded) {
|
||
this.collapse();
|
||
} else {
|
||
if (this.buildContent) {
|
||
this.buildContent();
|
||
} else {
|
||
this.expand();
|
||
}
|
||
}
|
||
}, null, 'toggle');
|
||
},
|
||
|
||
styleFooter: function() {
|
||
this.safeOperation(() => {
|
||
const footer = this.safeQuerySelector('.control-footer', this.element);
|
||
if (!footer) return;
|
||
|
||
const footerText = this.getFooter();
|
||
|
||
if (footerText && footerText.trim()) {
|
||
// Sanitize footer text
|
||
const safeText = footerText.replace(/[<>"'&]/g, '');
|
||
footer.textContent = safeText;
|
||
footer.style.cssText = `
|
||
display: block; padding: 0.5rem; font-size: 0.7rem;
|
||
color: #6c757d; text-align: center; font-style: italic;
|
||
background: #f8f9fa; border-top: 1px solid #e9ecef;
|
||
border-radius: 0 0 6px 6px;
|
||
`;
|
||
} else {
|
||
footer.style.display = 'none';
|
||
}
|
||
}, null, 'styleFooter');
|
||
},
|
||
|
||
// Virtual method - should be overridden by specific controls
|
||
buildContent: function() {
|
||
this.safeOperation(() => {
|
||
console.log(`${this.config.title || 'Unknown'} control - buildContent should be overridden`);
|
||
this.expand();
|
||
}, () => {
|
||
console.error('Failed to build content, expanding basic control');
|
||
this.expand();
|
||
}, 'buildContent');
|
||
}
|
||
};
|
||
|
||
// Export for use in other modules
|
||
window.Control = Control; |