+
+
+ SVG & DXF Symbole fuer Schadensgutachten und Vermessung
+SVG & DXF Symbole fuer Schadensgutachten und Vermessung
+SVG & DXF Symbole fuer Schadensgutachten und Vermessung
+SVG & DXF Symbole fuer Schadensgutachten und Vermessung
+Waehle einen Pfeil aus
'; + return; + } + var preview = document.getElementById('standaloneArrowPreview'); + if (preview) { + preview.innerHTML = generateStandaloneArrowSVG(); + } +} + +async function copyStandaloneArrow() { + var svg = generateStandaloneArrowSVG(); + try { + var canvas = await svgToCanvas(svg, 2); + canvas.toBlob(async function(blob) { + try { + await navigator.clipboard.write([ + new ClipboardItem({ 'image/png': blob }) + ]); + showNotification('Pfeil in Zwischenablage kopiert!'); + } catch (err) { + downloadStandaloneArrowPNG(); + } + }, 'image/png'); + } catch (err) { + showNotification('Fehler beim Kopieren', 'error'); + } +} + +function downloadStandaloneArrowSVG() { + var svg = generateStandaloneArrowSVG(); + var blob = new Blob([svg], { type: 'image/svg+xml' }); + var url = URL.createObjectURL(blob); + var link = document.createElement('a'); + link.href = url; + link.download = 'pfeil.svg'; + link.click(); + URL.revokeObjectURL(url); + showNotification('Pfeil SVG heruntergeladen!'); +} + +async function downloadStandaloneArrowPNG() { + var svg = generateStandaloneArrowSVG(); + try { + var canvas = await svgToCanvas(svg, 2); + canvas.toBlob(function(blob) { + var link = document.createElement('a'); + link.href = URL.createObjectURL(blob); + link.download = 'pfeil.png'; + link.click(); + URL.revokeObjectURL(link.href); + showNotification('Pfeil PNG heruntergeladen!'); + }, 'image/png'); + } catch (err) { + showNotification('Fehler beim PNG-Export', 'error'); + } +} + +async function downloadStandaloneArrowJPG() { + var svg = generateStandaloneArrowSVG(); + try { + var canvas = await svgToCanvas(svg, 2); + var tempCanvas = document.createElement('canvas'); + tempCanvas.width = canvas.width; + tempCanvas.height = canvas.height; + var tempCtx = tempCanvas.getContext('2d'); + tempCtx.fillStyle = '#FFFFFF'; + tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height); + tempCtx.drawImage(canvas, 0, 0); + + tempCanvas.toBlob(function(blob) { + var link = document.createElement('a'); + link.href = URL.createObjectURL(blob); + link.download = 'pfeil.jpg'; + link.click(); + URL.revokeObjectURL(link.href); + showNotification('Pfeil JPG heruntergeladen!'); + }, 'image/jpeg', 0.95); + } catch (err) { + showNotification('Fehler beim JPG-Export', 'error'); + } +} + +function downloadStandaloneArrowDXF() { + var svg = generateStandaloneArrowSVG(); + var dxf = svgToDxf(svg, 1); + var blob = new Blob([dxf], { type: 'application/dxf' }); + var url = URL.createObjectURL(blob); + var link = document.createElement('a'); + link.href = url; + link.download = 'pfeil.dxf'; + link.click(); + URL.revokeObjectURL(url); + showNotification('Pfeil DXF heruntergeladen!'); +} + +function addStandaloneArrowToLegend() { + var svg = generateStandaloneArrowSVG(); + legendItems.push({ + id: 'arrow_' + Date.now(), + name: 'Pfeil', + svg: svg, + description: '' + }); + updateLegendCount(); + saveLegendToStorage(); + showNotification('Pfeil zur Legende hinzugefuegt!'); +} + +function updateTextPreview() { + console.log("updateTextPreview called"); + var preview = document.getElementById('textPreview'); + if (preview) { + var svg = generateTextSVG(); console.log("Generated SVG length:", svg.length); preview.innerHTML = svg; + } +} + +// Hilfsfunktion: SVG zu Canvas rendern +async function svgToCanvas(svg, scale) { + var parser = new DOMParser(); + var svgDoc = parser.parseFromString(svg, 'image/svg+xml'); + var svgEl = svgDoc.documentElement; + var svgWidth = parseFloat(svgEl.getAttribute('width')) || 100; + var svgHeight = parseFloat(svgEl.getAttribute('height')) || 100; + + if (!scale) { + scale = Math.max(200 / Math.min(svgWidth, svgHeight), 1); + scale = Math.min(scale, 512 / Math.max(svgWidth, svgHeight)); + } + + var canvasWidth = Math.round(svgWidth * scale); + var canvasHeight = Math.round(svgHeight * scale); + + var canvas = document.createElement('canvas'); + var ctx = canvas.getContext('2d'); + canvas.width = canvasWidth; + canvas.height = canvasHeight; + + var img = new Image(); + var svgBlob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' }); + var url = URL.createObjectURL(svgBlob); + + await new Promise(function(resolve, reject) { + img.onload = resolve; + img.onerror = reject; + img.src = url; + }); + + ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight); + URL.revokeObjectURL(url); + + return canvas; +} + +async function copyTextAsImage() { + var svg = generateTextSVG(); + + try { + var canvas = await svgToCanvas(svg); + + canvas.toBlob(async function(blob) { + try { + await navigator.clipboard.write([ + new ClipboardItem({ 'image/png': blob }) + ]); + showNotification('In Zwischenablage kopiert!'); + } catch (err) { + var link = document.createElement('a'); + link.href = URL.createObjectURL(blob); + link.download = 'text-symbol.png'; + link.click(); + showNotification('PNG heruntergeladen'); + } + }, 'image/png'); + } catch (err) { + console.error('Fehler:', err); + showNotification('Fehler beim Kopieren', 'error'); + } +} + +function downloadTextSVG() { + var svg = generateTextSVG(); + var blob = new Blob([svg], { type: 'image/svg+xml' }); + var url = URL.createObjectURL(blob); + var link = document.createElement('a'); + link.href = url; + var filename = textGenState.text ? textGenState.text.replace(/\n/g, '_').replace(/[^a-zA-Z0-9_-]/g, '').substring(0, 20) : 'symbol'; + link.download = 'text-' + filename + '.svg'; + link.click(); + URL.revokeObjectURL(url); + showNotification('SVG heruntergeladen!'); +} + +async function downloadTextPNG() { + var svg = generateTextSVG(); + try { + var canvas = await svgToCanvas(svg, 2); + + canvas.toBlob(function(blob) { + var link = document.createElement('a'); + link.href = URL.createObjectURL(blob); + var filename = textGenState.text ? textGenState.text.replace(/\n/g, '_').replace(/[^a-zA-Z0-9_-]/g, '').substring(0, 20) : 'symbol'; + link.download = 'text-' + filename + '.png'; + link.click(); + URL.revokeObjectURL(link.href); + showNotification('PNG heruntergeladen!'); + }, 'image/png'); + } catch (err) { + console.error('Fehler:', err); + showNotification('Fehler beim PNG-Export', 'error'); + } +} + +async function downloadTextJPG() { + var svg = generateTextSVG(); + try { + var canvas = await svgToCanvas(svg, 2); + var ctx = canvas.getContext('2d'); + + var tempCanvas = document.createElement('canvas'); + tempCanvas.width = canvas.width; + tempCanvas.height = canvas.height; + var tempCtx = tempCanvas.getContext('2d'); + tempCtx.fillStyle = '#FFFFFF'; + tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height); + tempCtx.drawImage(canvas, 0, 0); + + tempCanvas.toBlob(function(blob) { + var link = document.createElement('a'); + link.href = URL.createObjectURL(blob); + var filename = textGenState.text ? textGenState.text.replace(/\n/g, '_').replace(/[^a-zA-Z0-9_-]/g, '').substring(0, 20) : 'symbol'; + link.download = 'text-' + filename + '.jpg'; + link.click(); + URL.revokeObjectURL(link.href); + showNotification('JPG heruntergeladen!'); + }, 'image/jpeg', 0.95); + } catch (err) { + console.error('Fehler:', err); + showNotification('Fehler beim JPG-Export', 'error'); + } +} + +function downloadTextDXF() { + var svg = generateTextSVG(); + var dxf = svgToDxf(svg, 1); + var blob = new Blob([dxf], { type: 'application/dxf' }); + var url = URL.createObjectURL(blob); + var link = document.createElement('a'); + link.href = url; + var filename = textGenState.text ? textGenState.text.replace(/\n/g, '_').replace(/[^a-zA-Z0-9_-]/g, '').substring(0, 20) : 'symbol'; + link.download = 'text-' + filename + '.dxf'; + link.click(); + URL.revokeObjectURL(url); + showNotification('DXF heruntergeladen!'); +} + +function addTextToLegend() { + var svg = generateTextSVG(); + var text = textGenState.text || 'Text'; + var displayName = text.replace(/\n/g, ' ').substring(0, 30); + + legendItems.push({ + id: 'custom_text_' + Date.now(), + name: displayName, + svg: svg, + description: '' + }); + + updateLegendCount(); + saveLegendToStorage(); + showNotification('Zur Legende hinzugefuegt!'); +} + +// ========== CUSTOM SYMBOLS STORAGE ========== + +function loadCustomSymbols() { + try { + var stored = localStorage.getItem('customSymbols'); + if (stored) { + customSymbols = JSON.parse(stored); + } + } catch (e) { + console.error('Fehler beim Laden der eigenen Symbole:', e); + customSymbols = []; + } +} + +function saveCustomSymbols() { + try { + localStorage.setItem('customSymbols', JSON.stringify(customSymbols)); + } catch (e) { + console.error('Fehler beim Speichern der eigenen Symbole:', e); + } +} + +function openSaveModal() { + var modal = document.getElementById('saveModal'); + var nameInput = document.getElementById('symbolName'); + var descInput = document.getElementById('symbolDescription'); + + var suggestedName = textGenState.text ? textGenState.text.replace(/\n/g, ' ').substring(0, 30) : ''; + nameInput.value = suggestedName; + descInput.value = ''; + + modal.style.display = 'flex'; + nameInput.focus(); +} + +function closeSaveModal() { + var modal = document.getElementById('saveModal'); + modal.style.display = 'none'; +} + +function saveCustomSymbol() { + var nameInput = document.getElementById('symbolName'); + var descInput = document.getElementById('symbolDescription'); + + var name = nameInput.value.trim(); + if (!name) { + showNotification('Bitte einen Namen eingeben!', 'error'); + return; + } + + var svg = generateTextSVG(); + + var newSymbol = { + id: 'custom_' + Date.now(), + name: name, + description: descInput.value.trim(), + svg: svg, + category: 'custom', + tags: ['eigene', 'custom', name.toLowerCase()], + createdAt: new Date().toISOString(), + state: JSON.parse(JSON.stringify(textGenState)) + }; + + customSymbols.push(newSymbol); + saveCustomSymbols(); + + closeSaveModal(); + showNotification('Symbol "' + name + '" gespeichert!'); + + var activeFilter = document.querySelector('.filter-pill.active'); + if (activeFilter && activeFilter.dataset.filter === 'custom') { + renderSymbolGrid(); + } +} + +function deleteCustomSymbol(id) { + if (!confirm('Symbol wirklich loeschen?')) return; + + customSymbols = customSymbols.filter(function(s) { return s.id !== id; }); + saveCustomSymbols(); + renderSymbolGrid(); + showNotification('Symbol geloescht'); +} + +var originalRenderSymbolGrid = typeof renderSymbolGrid === 'function' ? renderSymbolGrid : null; + +function renderSymbolGridWithCustom() { + var activeFilter = document.querySelector('.filter-pill.active'); + var filter = activeFilter ? activeFilter.dataset.filter : 'all'; + + if (filter === 'custom') { + renderCustomSymbolsOnly(); + } else if (originalRenderSymbolGrid) { + originalRenderSymbolGrid(); + if (filter === 'all') { + appendCustomSymbols(); + } + } +} + +function renderCustomSymbolsOnly() { + var grid = document.getElementById('symbolGrid'); + if (!grid) return; + + grid.innerHTML = ''; + + if (customSymbols.length === 0) { + grid.innerHTML = 'Waehle einen Pfeil aus
'; + return; + } + + if (window.SvgGenerator) { + var svg = window.SvgGenerator.generateArrowOnly(s); + if (svg) { + e.standaloneArrowPreview.innerHTML = svg; + } + } + }, + + resetToDefaults: function() { + window.TextGenState.reset(); + this.syncFromState(); + this.updateVisibility(); + this.updatePreview(); + this.updateStandaloneArrowPreview(); + } +}; + +window.UiBindings = UiBindings; diff --git a/symbols/lib/svg.min.js b/symbols/lib/svg.min.js new file mode 100644 index 0000000..06f7123 --- /dev/null +++ b/symbols/lib/svg.min.js @@ -0,0 +1,13 @@ +/*! @svgdotjs/svg.js v3.2.5 MIT*/; +/*! +* @svgdotjs/svg.js - A lightweight library for manipulating and animating SVG. +* @version 3.2.5 +* https://svgjs.dev/ +* +* @copyright Wout Fierens