generated from coulomb/repo-seed
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:
21
example-proto/project.json
Normal file
21
example-proto/project.json
Normal file
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "Prototype Template Example",
|
||||
"description": "Example using DOM-based prototype templates - fully editable in Inkscape!",
|
||||
"dataSource": "sample.csv",
|
||||
"stylesheet": "style.css",
|
||||
"svgTemplate": "template-proto.svg",
|
||||
"settings": {
|
||||
"timelineMonths": 18,
|
||||
"marginLeft": 220,
|
||||
"marginTop": 140,
|
||||
"monthWidth": 120,
|
||||
"laneHeight": 80,
|
||||
"laneGap": 16
|
||||
},
|
||||
"fieldMapping": {
|
||||
"id": "ID",
|
||||
"title": "Title",
|
||||
"lane": "Lane",
|
||||
"due": ["Due"]
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user