Refactor symbols app: cleanup and fix issues

- Removed duplicate files (index2/3/4.html, symbols.js duplicates)
- Kept index4.html as the main index.html (modular version)
- Removed old text-generator.js (replaced by modular version)
- Fixed ID mismatch in ui-bindings.js to match HTML
- Added square and circle shape support in svg-generator.js
- Added legend preview with copy functionality
- Removed 580 lines of obsolete text-generator v4 code from app.js
- Added addTextToLegend and addStandaloneArrowToLegend to export.js

Still TODO: Split large files to comply with 300 line limit
- app.js: 1219 lines
- styles.css: 1319 lines
- symbols.js: 870 lines

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
architeur
2025-12-14 21:09:39 +01:00
parent 2a50a15745
commit c0ae55a597
12 changed files with 286 additions and 4693 deletions

View File

@@ -319,3 +319,44 @@ window.downloadStandaloneArrowDXF = function() {
window.TextExport.downloadDxf(svg, 'pfeil.dxf');
}
};
// Zur Legende hinzufuegen
window.addTextToLegend = function() {
var state = window.TextGenState.current;
var svg = window.SvgGenerator.generate(state);
var name = state.text || 'Text-Symbol';
if (typeof legendItems !== 'undefined' && typeof updateLegendCount === 'function') {
legendItems.push({
id: 'text_' + Date.now(),
name: name.split('\n')[0].substring(0, 30),
svg: svg,
description: ''
});
updateLegendCount();
saveLegendToStorage();
if (typeof showNotification === 'function') {
showNotification('Zur Legende hinzugefuegt!');
}
}
};
window.addStandaloneArrowToLegend = function() {
var state = window.TextGenState.current;
var svg = window.SvgGenerator.generateArrowOnly(state);
if (!svg) return;
if (typeof legendItems !== 'undefined' && typeof updateLegendCount === 'function') {
legendItems.push({
id: 'arrow_' + Date.now(),
name: 'Pfeil ' + state.arrow,
svg: svg,
description: ''
});
updateLegendCount();
saveLegendToStorage();
if (typeof showNotification === 'function') {
showNotification('Pfeil zur Legende hinzugefuegt!');
}
}
};

View File

@@ -44,9 +44,19 @@ var SvgGenerator = {
case 'rect':
shapeEl = draw.rect(width, height).move(x, y).radius(4);
break;
case 'square':
var squareSize = Math.max(width, height);
var squareX = x - (squareSize - width) / 2;
var squareY = y - (squareSize - height) / 2;
shapeEl = draw.rect(squareSize, squareSize).move(squareX, squareY).radius(4);
break;
case 'rounded':
shapeEl = draw.rect(width, height).move(x, y).radius(Math.min(halfW, halfH) * 0.5);
break;
case 'circle':
var circleRadius = Math.max(halfW, halfH);
shapeEl = draw.circle(circleRadius * 2).center(cx, cy);
break;
case 'oval':
shapeEl = draw.ellipse(width, height).center(cx, cy);
break;

View File

@@ -18,11 +18,13 @@ var UiBindings = {
var e = this.elements;
// Text & Farben
e.textInput = document.getElementById('textInput');
e.textInput = document.getElementById('customText');
e.fontSizeInput = document.getElementById('fontSize');
e.fontSizeValue = document.getElementById('fontSizeValue');
e.textColorInput = document.getElementById('textColor');
e.textColorValue = document.getElementById('textColorValue');
e.frameColorInput = document.getElementById('frameColor');
e.frameColorValue = document.getElementById('frameColorValue');
// Rahmen
e.frameScaleInput = document.getElementById('frameScale');
@@ -30,16 +32,16 @@ var UiBindings = {
e.frameScaleRow = document.getElementById('frameScaleRow');
// Padding
e.paddingAllInput = document.getElementById('framePaddingAll');
e.paddingAllValue = document.getElementById('framePaddingAllValue');
e.paddingTopInput = document.getElementById('framePaddingTop');
e.paddingTopValue = document.getElementById('framePaddingTopValue');
e.paddingRightInput = document.getElementById('framePaddingRight');
e.paddingRightValue = document.getElementById('framePaddingRightValue');
e.paddingBottomInput = document.getElementById('framePaddingBottom');
e.paddingBottomValue = document.getElementById('framePaddingBottomValue');
e.paddingLeftInput = document.getElementById('framePaddingLeft');
e.paddingLeftValue = document.getElementById('framePaddingLeftValue');
e.paddingAllInput = document.getElementById('paddingAll');
e.paddingAllValue = document.getElementById('paddingAllValue');
e.paddingTopInput = document.getElementById('paddingTop');
e.paddingTopValue = document.getElementById('paddingTopValue');
e.paddingRightInput = document.getElementById('paddingRight');
e.paddingRightValue = document.getElementById('paddingRightValue');
e.paddingBottomInput = document.getElementById('paddingBottom');
e.paddingBottomValue = document.getElementById('paddingBottomValue');
e.paddingLeftInput = document.getElementById('paddingLeft');
e.paddingLeftValue = document.getElementById('paddingLeftValue');
e.paddingAllRow = document.getElementById('framePaddingAllRow');
e.paddingRow = document.getElementById('framePaddingRow');
@@ -64,8 +66,8 @@ var UiBindings = {
// Buttons
e.shapeButtons = document.querySelectorAll('.shape-btn');
e.arrowButtons = document.querySelectorAll('.arrow-btn');
e.lineStyleButtons = document.querySelectorAll('.line-style-btn');
e.lineWeightButtons = document.querySelectorAll('.line-weight-btn');
e.lineStyleButtons = document.querySelectorAll('.line-btn');
e.lineWeightButtons = document.querySelectorAll('.weight-btn');
},
bindEvents: function() {
@@ -95,12 +97,14 @@ var UiBindings = {
if (e.textColorInput) {
e.textColorInput.addEventListener('input', function(ev) {
state.set('textColor', ev.target.value);
if (e.textColorValue) e.textColorValue.textContent = ev.target.value;
self.updatePreview();
});
}
if (e.frameColorInput) {
e.frameColorInput.addEventListener('input', function(ev) {
state.set('frameColor', ev.target.value);
if (e.frameColorValue) e.frameColorValue.textContent = ev.target.value;
self.updatePreview();
});
}