coulomb/markitect-main
2
0
Fork 0
Code Issues 61 Pull Requests Actions Projects 12 Releases 1 Wiki Activity

feat: enhance ControlBase with advanced panel behavior patterns

Browse Source 
Implement comprehensive control panel functionality based on reference patterns:

## New Features
- Icon-only collapsed state with compass positioning
- Expand/drag functionality for repositioning panels
- Bottom-left corner resize with minimum size constraints
- Collapse button returns to original position
- Header toggle for content visibility control

## Technical Improvements
- Enhanced DOM structure with expanded/collapsed states
- Robust event handling with automatic cleanup
- State management for drag, resize, expand operations
- Position restoration system for collapse behavior
- Comprehensive styling system with backdrop effects

## Components Added
- Enhanced ControlBase class with 5 core behaviors
- ContentsControl, StatusControl, EditControl, DebugControl panels
- Component discovery system with TDD implementation
- Legacy DocumentControlsLegacy for backward compatibility

## Testing & Documentation
- Interactive test page for behavior validation
- Comprehensive implementation notes
- TDD test suite with 84 passing tests
- Component listing automation

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Bernd Worsch
2025-11-14 11:33:49 +01:00
parent 6ef2641bff
commit 4262310302
22 changed files with 3846 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
capabilities/testdrive-jsui/js/tests/test-real-user-functionality.js
View File

@@ -18,12 +18,12 @@ runner.describe('Real User Functionality Tests', () => {
const sectionModule = require('../core/section-manager.js');
const domModule = require('../components/dom-renderer.js');
const debugModule = require('../components/debug-panel.js');
const controlsModule = require('../components/document-controls.js');
const controlsModule = require('../components/document-controls-legacy.js');
const { SectionManager } = sectionModule;
const { DOMRenderer } = domModule;
const { DebugPanel } = debugModule;
const { DocumentControls } = controlsModule;
const { DocumentControlsLegacy } = controlsModule;
// Setup DOM container
const container = document.createElement('div');
@@ -34,7 +34,7 @@ runner.describe('Real User Functionality Tests', () => {
const sectionManager = new SectionManager();
const domRenderer = new DOMRenderer(sectionManager, container);
const debugPanel = new DebugPanel();
const documentControls = new DocumentControls();
const documentControls = new DocumentControlsLegacy();
// Setup document controls
documentControls.create();
@@ -96,11 +96,11 @@ runner.describe('Real User Functionality Tests', () => {
// Setup similar to above
const sectionModule = require('../core/section-manager.js');
const domModule = require('../components/dom-renderer.js');
const controlsModule = require('../components/document-controls.js');
const controlsModule = require('../components/document-controls-legacy.js');
const { SectionManager } = sectionModule;
const { DOMRenderer } = domModule;
const { DocumentControls } = controlsModule;
const { DocumentControlsLegacy } = controlsModule;
const container = document.createElement('div');
container.innerHTML = '<div id="markdown-content"></div>';
@@ -108,7 +108,7 @@ runner.describe('Real User Functionality Tests', () => {
const sectionManager = new SectionManager();
const domRenderer = new DOMRenderer(sectionManager, container);
const documentControls = new DocumentControls();
const documentControls = new DocumentControlsLegacy();
documentControls.create();
@@ -195,12 +195,12 @@ runner.describe('Real User Functionality Tests', () => {
const sectionModule = require('../core/section-manager.js');
const domModule = require('../components/dom-renderer.js');
const debugModule = require('../components/debug-panel.js');
const controlsModule = require('../components/document-controls.js');
const controlsModule = require('../components/document-controls-legacy.js');
const { SectionManager } = sectionModule;
const { DOMRenderer } = domModule;
const { DebugPanel } = debugModule;
const { DocumentControls } = controlsModule;
const { DocumentControlsLegacy } = controlsModule;
const container = document.createElement('div');
container.innerHTML = '<div id="markdown-content"></div>';
@@ -209,7 +209,7 @@ runner.describe('Real User Functionality Tests', () => {
const sectionManager = new SectionManager();
const domRenderer = new DOMRenderer(sectionManager, container);
const debugPanel = new DebugPanel();
const documentControls = new DocumentControls();
const documentControls = new DocumentControlsLegacy();
documentControls.create();