feat: implement plugin infrastructure for rendering engines
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>
This commit is contained in:
215
testdrive-jsui/static/js/widgets/base/UIWidget.js
Normal file
215
testdrive-jsui/static/js/widgets/base/UIWidget.js
Normal file
@@ -0,0 +1,215 @@
|
||||
/**
|
||||
* UI Widget Base Class
|
||||
*
|
||||
* Extends Widget with DOM manipulation and visual functionality.
|
||||
* Base for all widgets that render UI elements.
|
||||
*/
|
||||
import { Widget } from './Widget.js';
|
||||
|
||||
export class UIWidget extends Widget {
|
||||
constructor(options = {}) {
|
||||
super(options);
|
||||
|
||||
// UI properties
|
||||
this.element = null;
|
||||
this.isVisible = false;
|
||||
this.isRendered = false;
|
||||
this.theme = options.theme || 'default';
|
||||
this.cssClasses = new Set(['markitect-widget']);
|
||||
|
||||
// Animation support
|
||||
this.animationDuration = options.animationDuration || 300;
|
||||
this.enableAnimations = options.enableAnimations !== false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the widget to DOM (abstract method)
|
||||
*/
|
||||
async render() {
|
||||
throw new Error('render() method must be implemented by subclass');
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the widget
|
||||
*/
|
||||
async show(options = {}) {
|
||||
if (!this.isRendered) {
|
||||
await this.render();
|
||||
}
|
||||
|
||||
if (this.isVisible) {
|
||||
return this;
|
||||
}
|
||||
|
||||
this.isVisible = true;
|
||||
|
||||
if (this.element) {
|
||||
if (this.enableAnimations && !options.immediate) {
|
||||
await this.animateShow();
|
||||
} else {
|
||||
this.element.style.display = '';
|
||||
}
|
||||
}
|
||||
|
||||
this.emit('shown');
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the widget
|
||||
*/
|
||||
async hide(options = {}) {
|
||||
if (!this.isVisible) {
|
||||
return this;
|
||||
}
|
||||
|
||||
this.isVisible = false;
|
||||
|
||||
if (this.element) {
|
||||
if (this.enableAnimations && !options.immediate) {
|
||||
await this.animateHide();
|
||||
} else {
|
||||
this.element.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
this.emit('hidden');
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle visibility
|
||||
*/
|
||||
async toggle(options = {}) {
|
||||
return this.isVisible ? this.hide(options) : this.show(options);
|
||||
}
|
||||
|
||||
/**
|
||||
* Show animation (override for custom animations)
|
||||
*/
|
||||
async animateShow() {
|
||||
if (!this.element) return;
|
||||
|
||||
return new Promise(resolve => {
|
||||
this.element.style.transition = `opacity ${this.animationDuration}ms ease-in-out`;
|
||||
this.element.style.opacity = '0';
|
||||
this.element.style.display = '';
|
||||
|
||||
// Force reflow
|
||||
this.element.offsetHeight;
|
||||
|
||||
this.element.style.opacity = '1';
|
||||
|
||||
setTimeout(() => {
|
||||
this.element.style.transition = '';
|
||||
resolve();
|
||||
}, this.animationDuration);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide animation (override for custom animations)
|
||||
*/
|
||||
async animateHide() {
|
||||
if (!this.element) return;
|
||||
|
||||
return new Promise(resolve => {
|
||||
this.element.style.transition = `opacity ${this.animationDuration}ms ease-in-out`;
|
||||
this.element.style.opacity = '0';
|
||||
|
||||
setTimeout(() => {
|
||||
this.element.style.display = 'none';
|
||||
this.element.style.transition = '';
|
||||
this.element.style.opacity = '';
|
||||
resolve();
|
||||
}, this.animationDuration);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* CSS class management
|
||||
*/
|
||||
addClass(className) {
|
||||
this.cssClasses.add(className);
|
||||
if (this.element) {
|
||||
this.element.classList.add(className);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
removeClass(className) {
|
||||
this.cssClasses.delete(className);
|
||||
if (this.element) {
|
||||
this.element.classList.remove(className);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
hasClass(className) {
|
||||
return this.cssClasses.has(className);
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply theme styling
|
||||
*/
|
||||
applyTheme(themeName) {
|
||||
const oldTheme = this.theme;
|
||||
this.theme = themeName;
|
||||
|
||||
this.removeClass(`theme-${oldTheme}`);
|
||||
this.addClass(`theme-${themeName}`);
|
||||
|
||||
this.emit('theme-changed', { oldTheme, newTheme: themeName });
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* Find child element by selector
|
||||
*/
|
||||
findElement(selector) {
|
||||
return this.element ? this.element.querySelector(selector) : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Find all child elements by selector
|
||||
*/
|
||||
findElements(selector) {
|
||||
return this.element ? this.element.querySelectorAll(selector) : [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Override destroy to clean up DOM
|
||||
*/
|
||||
async destroy() {
|
||||
if (this.element && this.element.parentNode) {
|
||||
this.element.parentNode.removeChild(this.element);
|
||||
}
|
||||
|
||||
this.element = null;
|
||||
this.isRendered = false;
|
||||
this.isVisible = false;
|
||||
|
||||
await super.destroy();
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply all CSS classes to element
|
||||
*/
|
||||
applyCSSClasses(element = this.element) {
|
||||
if (element) {
|
||||
element.className = Array.from(this.cssClasses).join(' ');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Default configuration for UI widgets
|
||||
*/
|
||||
getDefaultConfig() {
|
||||
return {
|
||||
...super.getDefaultConfig(),
|
||||
theme: 'default',
|
||||
animationDuration: 300,
|
||||
enableAnimations: true
|
||||
};
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user