feat: add DOM-based prototype template system for full Inkscape editability

Implements a new templating approach that allows complete visual control
in Inkscape while maintaining 100% valid SVG.

New Features:
- DOM-based generator using DOMParser and cloneNode()
- Prototype elements (month-proto, lane-proto, item-proto) instead of string templates
- Full WYSIWYG editing in Inkscape - see exactly how timeline will look
- Auto-detection of template type (prototype vs template-v2)
- Text element mapping via IDs (e.g., id="item-title")
- SVG transforms for positioning instead of placeholder replacement

Implementation:
- generator-dom.js: New DOM-based generator with cloning logic
- engine.js: Auto-detect template type and use appropriate generator
- example-proto/: Complete working example with prototype template
- PROTOTYPE_TEMPLATES.md: Comprehensive guide for creating prototype templates

Benefits:
- No string placeholders ({{PLACEHOLDER}}) needed
- Native SVG editing workflow
- Better performance (DOM manipulation vs regex)
- Easier maintenance and styling
- Backward compatible (old template-v2 still works)

Template Structure:
- Prototypes with specific IDs visible in SVG (hidden after cloning)
- Container groups for generated content
- CSS classes for styling
- Text elements with IDs matching field names

All 56 tests still passing.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-23 23:50:37 +01:00
parent a5811040e7
commit 5bec61740b
10 changed files with 837 additions and 6 deletions

View File

@@ -152,12 +152,12 @@ dist:
@echo "📦 Created dist/ directory"
@# Copy core application files
@cp index.html engine.js generator.js file-editor.js dist/
@echo "✅ Copied core files (index.html, engine.js, generator.js, file-editor.js)"
@cp index.html engine.js generator.js generator-dom.js file-editor.js dist/
@echo "✅ Copied core files (index.html, engine.js, generator.js, generator-dom.js, file-editor.js)"
@# Copy project directories
@cp -r example example-1 my-project dist/
@echo "✅ Copied project directories (example, example-1, my-project)"
@cp -r example example-1 example-proto my-project dist/
@echo "✅ Copied project directories (example, example-1, example-proto, my-project)"
@# Copy documentation
@cp README.md LICENSE dist/