[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","689f086e8c7481918b75940f439668c4","versionInt","title","Interaktiver Design-Spielplatz","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { Rnd } from \"react-rnd\";\nimport { Copy, Scissors, ClipboardPaste, Undo, Redo, Trash2, Eye, EyeOff, ZoomIn, ZoomOut, AlignLeft, AlignCenter, AlignRight, AlignJustify, ChevronUp, ChevronDown, ChevronsUp, ChevronsDown } from \"lucide-react\";\n\n/**********************************************\n * Mini‑Design‑App – Stable Canvas Build\n * - Robuster „Neue Datei“-Reset\n * - Margin‑Guides immer sichtbar; Karo‑Grid optional (toggle)\n * - Schriftgrößen bis 120 (2er‑Schritte)\n * - Prominente Resize‑Griffe: **genau ein Griff pro Ecke**\n * - Textbox passt Höhe automatisch an Inhalt/Breite an\n **********************************************/\n\n/***** Konstanten *****/\nconst RULER_THICKNESS = 24;\nconst MARGIN = 40;\n\nconst FORMATS = {\n A4_P: { key: \"A4_P\", label: \"A4 Flyer (Hochformat)\", w: 794, h: 1123 },\n A4_L: { key: \"A4_L\", label: \"A4 Flyer (Querformat)\", w: 1123, h: 794 },\n IG: { key: \"IG\", label: \"Instagram Post (Quadrat)\", w: 900, h: 900 },\n};\n\nconst DEFAULT_TEXT = \"Beispieltext - doppelklicken zum Bearbeiten.\";\n\nconst FONT_OPTIONS = [\n { label: \"Arial\", value: \"Arial, Helvetica, sans-serif\" },\n { label: \"Calibri\", value: \"Calibri, Segoe UI, Arial, sans-serif\" },\n { label: \"Calibri Light\", value: \"Calibri, Segoe UI, Arial, sans-serif\", weight: 300 },\n { label: \"Aptos\", value: \"Aptos, Segoe UI, Arial, sans-serif\" },\n { label: \"Daytona\", value: \"Daytona, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif\" },\n { label: \"Comfortaa\", value: \"'Comfortaa', Arial, sans-serif\" },\n { label: \"Lobster Two\", value: \"'Lobster Two', 'Times New Roman', serif\" },\n { label: \"Roboto\", value: \"Roboto, Arial, sans-serif\" },\n { label: \"Roboto Black\", value: \"Roboto, Arial, sans-serif\", weight: 900 },\n { label: \"Raleway\", value: \"Raleway, Arial, sans-serif\" },\n { label: \"Georgia\", value: \"Georgia, serif\" },\n { label: \"Impact\", value: \"Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif\", weight: 700 },\n { label: \"Comic Sans\", value: \"'Comic Sans MS', 'Comic Sans', cursive\" },\n];\n\n// Nutzerentscheidung: bis 120\nconst FONT_SIZES = Array.from({ length: (120 - 12) / 2 + 1 }, (_, i) => 12 + i * 2);\n\nconst STROKE_STYLES = [\n { label: \"Kein Rand\", value: \"none\", dash: [] },\n { label: \"Durchgehend\", value: \"solid\", dash: [] },\n { label: \"Gestrichelt\", value: \"dashed\", dash: [16, 10] },\n { label: \"Gepunktet\", value: \"dotted\", dash: [0, 10] },\n];\n\nlet idCounter = 1; const newId = () => `el_${idCounter++}`;\nconst LINE_SPLIT_RE = /\\r\\n|\\r|\\n/; const splitLines = (s) => String(s ?? \"\").split(LINE_SPLIT_RE);\n\n/***** Rulers *****/\nfunction RulerX({ width }){\n const ticks=[]; for(let x=0;x<=width;x+=10){ const is100=x%100===0, is50=x%50===0; const len=is100?14:is50?10:6; ticks.push(); }\n const labels=[]; for(let x=0;x<=width;x+=100) labels.push({x});\n return ();\n}\nfunction RulerY({ height }){\n const ticks=[]; for(let y=0;y<=height;y+=10){ const is100=y%100===0, is50=y%50===0; const len=is100?14:is50?10:6; ticks.push(); }\n const labels=[]; for(let y=0;y<=height;y+=100) labels.push({y});\n return ();\n}\n\n/***** Guides (Karo optional, Margen immer) *****/\nfunction Guides({ w, h, showGrid }){\n return (\n

\n {showGrid && (\n

\n )}\n

\n );\n}\n\n/***** Position Dropdown *****/\nfunction PositionDropdown({ element, format, onApply }){\n const cells=[\"tl\",\"tc\",\"tr\",\"ml\",\"mc\",\"mr\",\"bl\",\"bc\",\"br\"];\n const apply=(k)=>{ const {w,h}=format; const {w:ew,h:eh}=element; let x=0,y=0; if(k.endsWith('l')) x=0; if(k.endsWith('c')) x=(w-ew)/2; if(k.endsWith('r')) x=w-ew; if(k.startsWith('t')) y=0; if(k.startsWith('m')) y=(h-eh)/2; if(k.startsWith('b')) y=h-eh; onApply({ x:Math.round(x), y:Math.round(y) }); };\n return (\n

Position

\n {cells.map(k=> (\n \n ))}\n

Ausrichtung an Seitenraendern

\n );\n}\n\n/***** Shapes Renderer *****/\nfunction ShapeSVG({ el }){\n const { shape, w, h, fill, stroke, strokeWidth, strokeStyle } = el;\n const styleDef = STROKE_STYLES.find(s=>s.value===strokeStyle);\n const dash = styleDef?.dash || [];\n const sw = Math.max(0, Number(strokeWidth)||0);\n const effectiveStroke = strokeStyle === 'none' ? 'transparent' : (stroke || 'transparent');\n const effectiveWidth = strokeStyle === 'none' ? 0 : sw;\n const common = { fill: fill || 'transparent', stroke: effectiveStroke, strokeWidth: effectiveWidth, strokeDasharray: dash.join(','), strokeLinejoin:'round', strokeLinecap:'round' };\n const pad = effectiveWidth/2;\n\n if (shape==='rect') return (\n \n );\n if (shape==='roundrect' || shape==='roundedRect'){\n const rx = Math.max(4, Math.min(20, Math.min(w,h)*0.15));\n return (\n \n );\n }\n if (shape==='circle'){ const r=Math.max(0, Math.min(w,h)/2 - pad); return (); }\n if (shape==='triangle'){ const pts=`${w/2},${pad} ${w-pad},${h-pad} ${pad},${h-pad}`; return (); }\n if (shape==='star'){ const cx=w/2, cy=h/2, outerR=Math.min(w,h)/2 - pad, innerR=Math.max(0, outerR*0.5); const points=[]; for(let i=0;i<10;i++){ const ang=(Math.PI/5)*i - Math.PI/2; const r=i%2===0?outerR:innerR; points.push([cx+r*Math.cos(ang), cy+r*Math.sin(ang)]);} const pts=points.map(p=>p.join(',')).join(' '); return (); }\n if (shape==='heart'){ const p=pad; const d=`M ${w*0.5} ${h*0.8-p} C ${w*0.2+p} ${h*0.6}, ${w*0.0+p} ${h*0.35}, ${w*0.25} ${h*0.2+p} C ${w*0.45} ${h*0.05+p}, ${w*0.5} ${h*0.2}, ${w*0.5} ${h*0.25} C ${w*0.5} ${h*0.2}, ${w*0.55} ${h*0.05+p}, ${w*0.75} ${h*0.2+p} C ${w*1.0-p} ${h*0.35}, ${w*0.8-p} ${h*0.6}, ${w*0.5} ${h*0.8-p} Z`; return (); }\n if (shape==='arrow'){ const p=pad; const pts=`${0+p},${h*0.35} ${w*0.7-p},${h*0.35} ${w*0.7-p},${h*0.1+p} ${w-p},${h*0.5} ${w*0.7-p},${h*0.9-p} ${w*0.7-p},${h*0.65} ${0+p},${h*0.65}`; return (); }\n if (shape==='line') return ();\n return null;\n}\n\n/***** Prominente Resize‑Griffe (nur Ecken) *****/\nfunction Handle({ pos }){\n const base = { width:12, height:12, borderRadius:6, background:'#0ea5e9', border:'2px solid #ffffff', boxShadow:'0 0 0 1px rgba(14,165,233,0.5)' };\n const cursors = { nw:'nwse-resize', ne:'nesw-resize', sw:'nesw-resize', se:'nwse-resize' };\n return

;\n}\nconst RESIZE_HANDLE_COMPONENT = { topLeft:, topRight:, bottomLeft:, bottomRight: };\n\n/***** Text‑Höhenmessung *****/\nfunction measureTextHeight(el){\n if (!el || el.type !== 'text') return null;\n const pad = 4; // entspricht dem Padding im Renderer\n const probe = document.createElement('div');\n probe.style.position = 'fixed'; probe.style.visibility = 'hidden';\n probe.style.left = '-9999px'; probe.style.top = '-9999px';\n probe.style.whiteSpace = 'pre-wrap'; probe.style.lineHeight = '1.2';\n probe.style.padding = pad + 'px'; probe.style.boxSizing = 'border-box';\n probe.style.width = Math.max(40, el.w) + 'px';\n probe.style.fontFamily = el.fontFamily || 'Arial, Helvetica, sans-serif';\n probe.style.fontSize = (el.fontSize || 16) + 'px';\n probe.style.fontWeight = el.bold ? '700' : String(el.fontWeight || 400);\n probe.style.fontStyle = el.italic ? 'italic' : 'normal';\n probe.style.textDecoration = el.underline ? 'underline' : 'none';\n probe.textContent = String(el.text ?? '');\n document.body.appendChild(probe);\n const h = Math.ceil(probe.clientHeight);\n document.body.removeChild(probe);\n const minH = 32; return Math.max(minH, h);\n}\n\n/***** Datei lesen *****/\nfunction readFileAsDataURL(file){ return new Promise((res,rej)=>{ const fr=new FileReader(); fr.onload=()=>res(fr.result); fr.onerror=()=>rej(fr.error||new Error('Datei konnte nicht gelesen werden')); fr.readAsDataURL(file); }); }\n\n/***** Titlebar *****/\nfunction Titlebar({ onCut, onCopy, onPaste, onUndo, onRedo, onDelete, scale, setScale }){\n const IconBtn = ({title,onClick,children}) => ();\n return (\n

Mini-Design-App

setScale(Number(e.target.value)/100)}/>

\n \n \n

\n \n \n \n \n

\n );\n}\n\n/***** Menubar *****/\nfunction Menubar({ onNewA4P, onNewA4L, onNewIG, onAddShape, onAddImage, onAddText, showGrid, toggleGrid, bgColor, onBgChange, onToggleHelp = () => {} }){\n const fileInputRef=useRef(null); const [open,setOpen]=useState(false); const popRef=useRef(null);\n useEffect(()=>{ const onDown=(e)=>{ if(open && popRef.current && !popRef.current.contains(e.target)) setOpen(false); }; const onEsc=(e)=>{ if(e.key==='Escape') setOpen(false); }; document.addEventListener('mousedown',onDown,true); document.addEventListener('keydown',onEsc,true); return ()=>{ document.removeEventListener('mousedown',onDown,true); document.removeEventListener('keydown',onEsc,true); }; },[open]);\n const onPick=(fn)=>()=>{ try{ (document.activeElement)?.blur(); }catch{} fn(); setOpen(false); };\n\n return (\n

\n \n {open && (\n

Format wählen

\n \n \n \n

\n )}\n \n \n { const file=e.target.files?.[0]; if(!file) return; try{ const dataUrl=await readFileAsDataURL(file); onAddImage(String(dataUrl)); } catch { alert('Bild konnte nicht geladen werden.'); } e.target.value=''; }}/>\n \n \n

PapieronBgChange(e.target.value)} />

\n \n

\n );\n}\n\n/***** Element‑Factories *****/\nfunction createTextElement(){ return { id:newId(), type:'text', x:MARGIN, y:MARGIN, w:320, h:120, text:DEFAULT_TEXT, fontFamily:FONT_OPTIONS[0].value, fontSize:28, fontWeight:400, color:'#111111', bold:false, italic:false, underline:false, textAlign:'left' }; }\nfunction createShapeElement(shape='rect'){ return { id:newId(), type:'shape', shape, x:MARGIN+40, y:MARGIN+40, w: shape==='line'?280:180, h: shape==='line'?6:180, fill:'#FFEB3B', stroke:'#111111', strokeWidth:2, strokeStyle:'solid' }; }\nfunction createImageElement(src){ return { id:newId(), type:'image', src, x:MARGIN+80, y:MARGIN+80, w:320, h:220 }; }\nfunction createPage(){ return { id:newId(), elements:[] }; }\n\n/***** Hauptkomponente *****/\nexport default function MiniDesignApp(){\n const [confirmReset, setConfirmReset] = useState({ open:false, nextKey:null });\n const [docKey, setDocKey] = useState(0);\n const [docFormatKey,setDocFormatKey]=useState('A4_P');\n const [pages,setPages]=useState([createPage()]);\n const [activePageId,setActivePageId]=useState(pages[0].id);\n const [selectedId,setSelectedId]=useState(null);\n const [editingTextId,setEditingTextId]=useState(null);\n const [clipboard,setClipboard]=useState(null);\n const [dirty,setDirty]=useState(false);\n const [showGrid,setShowGrid]=useState(false); // Karo‑Grid optional\n const [help,setHelp]=useState(false);\n const [docBg,setDocBg]=useState('#FFFFFF');\n const [history,setHistory]=useState([]); const [future,setFuture]=useState([]);\n const scrollRef=useRef(null); const [scale,setScale]=useState(1);\n const resettingRef=useRef(false);\n\n const format = FORMATS[docFormatKey];\n const activePageIndex = pages.findIndex(p=>p.id===activePageId);\n const activePage = activePageIndex>=0 ? pages[activePageIndex] : pages[0];\n\n useEffect(()=>{ const handle=()=>{ const c=scrollRef.current; if(!c) return; const maxW=Math.min(c.clientWidth-340,1100); const s=Math.min(1.6, maxW/(format.w+RULER_THICKNESS)); setScale(prev=>Math.min(1.6, Math.max(0.25, prev||s))); }; handle(); window.addEventListener('resize',handle); return ()=>window.removeEventListener('resize',handle); },[format.w]);\n\n const selected = useMemo(()=>{ if(!activePage) return null; return activePage.elements.find(el=>el.id===selectedId)||null; },[activePage,selectedId]);\n\n const pushHistory=()=>{ if(resettingRef.current) return; setHistory(h=>[...h,{ pages:JSON.parse(JSON.stringify(pages)), docFormatKey, docBg }]); setFuture([]); };\n const markDirty = ()=>{ if(resettingRef.current) return; setDirty(true); };\n const center=(el)=>({ x: Math.round((format.w-el.w)/2), y: Math.round((format.h-el.h)/2) });\n\n const addPage=()=>{ if(resettingRef.current) return; pushHistory(); const p=createPage(); setPages(prev=>[...prev,p]); setActivePageId(p.id); setSelectedId(null); markDirty(); };\n function updateActivePage(mut){ if(resettingRef.current) return; pushHistory(); setPages(prev=>{ const cp=[...prev]; const idx=cp.findIndex(p=>p.id===activePageId); if(idx===-1) return prev; cp[idx]=mut({...cp[idx]}); return cp; }); markDirty(); }\n function updateElementById(id,patch){ if(resettingRef.current) return; pushHistory(); setPages(prev=> prev.map(pg=> pg.id===activePageId ? { ...pg, elements: pg.elements.map(el=>{ if(el.id!==id) return el; let merged={...el,...patch}; if(merged.type==='text'){ const shouldMeasure=('text'in patch||'fontSize'in patch||'fontFamily'in patch||'fontWeight'in patch||'bold'in patch||'italic'in patch||'underline'in patch||'w'in patch); if(shouldMeasure){ const newH=measureTextHeight(merged); if(Number.isFinite(newH)) merged.h=newH; } } return merged; }) } : pg )); markDirty(); }\n\n const addText = ()=>updateActivePage(p=>{ const el=createTextElement(); const pos=center(el); return { ...p, elements:[...p.elements,{...el,...pos}] }; });\n const addShape= (shape)=>updateActivePage(p=>{ const el=createShapeElement(shape); const pos=center(el); return { ...p, elements:[...p.elements,{...el,...pos}] }; });\n const addImage= (src)=>updateActivePage(p=>{ const el=createImageElement(src); const pos=center(el); return { ...p, elements:[...p.elements,{...el,...pos}] }; });\n\n const updateSelected=(patch)=>{ if(selected) updateElementById(selected.id,patch); };\n const removeSelected=()=>{ if(!selected || resettingRef.current) return; updateActivePage(p=>({ ...p, elements:p.elements.filter(el=>el.id!==selected.id) })); setSelectedId(null); };\n const duplicateSelected=()=>{ if(!selected || resettingRef.current) return; pushHistory(); const clone=JSON.parse(JSON.stringify(selected)); clone.id=newId(); clone.x+=20; clone.y+=20; setPages(prev=>prev.map(pg=> pg.id===activePageId ? { ...pg, elements:[...pg.elements,clone] } : pg)); setSelectedId(clone.id); markDirty(); };\n const reorderSelected=(dir)=>{ if(resettingRef.current) return; const idx=activePage?.elements.findIndex(el=>el.id===selectedId); if(idx==null||idx<0) return; pushHistory(); setPages(prev=> prev.map(pg=>{ if(pg.id!==activePageId) return pg; const els=[...pg.elements]; const el=els.splice(idx,1)[0]; if(dir==='up'&&idx0) els.splice(idx-1,0,el); else if(dir==='top') els.push(el); else if(dir==='bottom') els.unshift(el); return { ...pg, elements:els }; })); };\n\n function handleCopy(){ if(selected) setClipboard(JSON.parse(JSON.stringify(selected))); }\n function handleCut(){ if(selected){ setClipboard(JSON.parse(JSON.stringify(selected))); removeSelected(); } }\n function handlePaste(){ if(!clipboard || resettingRef.current) return; pushHistory(); const clone=JSON.parse(JSON.stringify(clipboard)); clone.id=newId(); clone.x=(selected?.x??MARGIN)+20; clone.y=(selected?.y??MARGIN)+20; setPages(prev=>prev.map(pg=> pg.id===activePageId ? { ...pg, elements:[...pg.elements,clone] } : pg)); setSelectedId(clone.id); markDirty(); }\n function undo(){ if(resettingRef.current) return; if(!history.length) return; const prev=history[history.length-1]; setHistory(h=>h.slice(0,-1)); setFuture(f=>[...f,{ pages:JSON.parse(JSON.stringify(pages)), docFormatKey, docBg }]); setPages(prev.pages); setSelectedId(null); }\n function redo(){ if(resettingRef.current) return; if(!future.length) return; const nxt=future[future.length-1]; setFuture(f=>f.slice(0,-1)); setHistory(h=>[...h,{ pages:JSON.parse(JSON.stringify(pages)), docFormatKey, docBg }]); setPages(nxt.pages); setSelectedId(null); }\n\n function handleKeyDown(e){\n const tag=(e.target&&e.target.tagName)?String(e.target.tagName).toLowerCase():\"\";\n if(editingTextId||tag==='textarea'||tag==='input') return;\n if(e.metaKey||e.ctrlKey){ const k=e.key.toLowerCase(); if(k==='z'&&!e.shiftKey) return void undo(); if(k==='y'||(k==='z'&&e.shiftKey)) return void redo(); if(k==='c') return void handleCopy(); if(k==='x') return void handleCut(); if(k==='v') return void handlePaste(); if(k==='d') return void duplicateSelected(); }\n if(!selected) return; if([\"Backspace\",\"Delete\"].includes(e.key)){ e.preventDefault(); removeSelected(); }\n const step=e.shiftKey?10:1; if([\"ArrowUp\",\"ArrowDown\",\"ArrowLeft\",\"ArrowRight\"].includes(e.key)){ e.preventDefault(); const dx=e.key==='ArrowLeft'?-step:e.key==='ArrowRight'?step:0; const dy=e.key==='ArrowUp'?-step:e.key==='ArrowDown'?step:0; updateSelected({ x:selected.x+dx, y:selected.y+dy }); }\n }\n\n // Reset: atomar & guard gegen späte Events\n function newDocument(nextKey){\n try { (document.activeElement)?.blur(); } catch {}\n resettingRef.current = true;\n const first = createPage();\n flushSync(()=>{\n setEditingTextId(null); setSelectedId(null); setDocFormatKey(nextKey);\n setPages([first]); setActivePageId(first.id); setDirty(false);\n setHistory([]); setFuture([]); setDocKey(k=>k+1);\n });\n const release=()=>{ resettingRef.current=false; };\n if (typeof requestAnimationFrame==='function'){ requestAnimationFrame(()=>requestAnimationFrame(release)); } else { setTimeout(release,50); }\n }\n function requestNew(nextKey){ if(!dirty){ newDocument(nextKey); } else { setConfirmReset({ open:true, nextKey }); } }\n\n // Self‑Tests (nicht destruktiv)\n useEffect(()=>{\n console.assert(!!STROKE_STYLES.find(s=>s.value==='none'), 'Stroke style \"none\" fehlt');\n console.assert(typeof createTextElement==='function' && typeof createPage==='function', 'Factories fehlen');\n },[]);\n useEffect(()=>{\n window.__miniDesignAppTests = () => {\n const results=[]; const t=(name,fn)=>{ try{ fn(); console.log('✅',name); results.push({name,pass:true}); }catch(e){ console.error('❌',name,e); results.push({name,pass:false,error:String(e)}); } };\n t('measureTextHeight returns number', ()=>{ const el={ type:'text', w:200, text:'Hallo\\nWelt', fontSize:20, fontFamily:'Arial' }; const h=measureTextHeight(el); if(!(h>0)) throw new Error('height<=0'); });\n t('LINE_SPLIT_RE works', ()=>{ const lines=splitLines('a\\r\\nb\\nc'); if(lines.length!==3) throw new Error('split failed'); });\n return results;\n };\n return ()=>{ try{ delete window.__miniDesignAppTests; }catch{} };\n },[]);\n\n if(!activePage) return

Keine aktive Seite gefunden. Lege über \"Neue Datei\" ein Dokument an.

;\n\n return (\n

\n \n \n \n\n \n\n requestNew('A4_P')}\n onNewA4L={()=>requestNew('A4_L')}\n onNewIG={()=>requestNew('IG')}\n onAddShape={addShape}\n onAddImage={addImage}\n onAddText={addText}\n showGrid={showGrid}\n toggleGrid={()=>setShowGrid(v=>!v)}\n bgColor={docBg}\n onBgChange={(c)=>{ pushHistory(); setDocBg(c); }}\n onToggleHelp={()=>setHelp(h=>!h)}\n />\n\n {help && (\n

\n Kurzanleitung – Design‑Spielplatz\n \n

Neue Seite: Format oben wählen
Seiten hinzufügen: links über „+ Seite“
Elemente: Text/Form/Bild – erscheint mittig
Farben & Fonts: Farbwähler & Auswahl nutzen
Position: Positions‑Dropdown (Ecken/Mitte)
Hilfslinien: Karo‑Grid & 40px Ränder

\n )}\n\n

⌫ Löschen · Pfeiltasten Nudge · Ctrl/Cmd+C/X/V · Ctrl/Cmd+Z / Shift+Z

\n\n {selected && selected.type==='text' && (\n

\n Text:\n \n \n

FarbeupdateSelected({ color:e.target.value })}/>

\n \n \n \n \n

\n \n \n \n

updateSelected(patch)}/>

\n )}\n\n {selected && selected.type==='shape' && (\n

Form:FüllungupdateSelected({ fill:e.target.value })}/>

RandupdateSelected({ stroke:e.target.value })}/>

BreiteupdateSelected({ strokeWidth:Number(e.target.value) })}/>Stil

updateSelected(patch)}/>

\n )}\n\n {selected && selected.type==='image' && (\n

Bild:updateSelected(patch)}/>

\n )}\n

\n\n

\n {/* left sidebar */}\n

Seiten

\n {pages.map((p,i)=>(\n \n ))}\n \n

\n\n {/* workspace */}\n

\n \n \n

\n \n {activePage?.elements.map((el)=> (\n setSelectedId(el.id)}\n onDragStart={()=>setSelectedId(el.id)}\n onDragStop={(e,d)=>updateElementById(el.id,{ x:d.x, y:d.y })}\n onResizeStop={(e,dir,ref,delta,pos)=>updateElementById(el.id,{ w:parseFloat(ref.style.width), h:parseFloat(ref.style.height), x:pos.x, y:pos.y })}\n enableResizing={{ bottomRight:true, topLeft:true, topRight:true, bottomLeft:true, top:false, bottom:false, left:false, right:false }}\n resizeHandleComponent={RESIZE_HANDLE_COMPONENT}\n style={{ border:selectedId===el.id? '1px dashed #0ea5e9':'1px solid transparent', background: el.type==='text' ? 'transparent' : undefined }}\n >\n {el.type==='text' && (\n { setSelectedId(el.id); if(el.text===DEFAULT_TEXT) updateElementById(el.id,{ text:'' }); setEditingTextId(el.id); }}\n style={{ fontFamily:el.fontFamily, fontSize:el.fontSize, color:el.color, fontWeight: el.bold?700:(el.fontWeight??400), fontStyle: el.italic?'italic':'normal', textDecoration: el.underline?'underline':'none', lineHeight:1.2, width:'100%', height:'100%', cursor:'text', display:'flex', alignItems:'flex-start', justifyContent: el.textAlign==='center'?'center': el.textAlign==='right'?'flex-end':'flex-start', padding:4, textAlign: el.textAlign==='justify'?'justify':(el.textAlign||'left'), whiteSpace:'pre-wrap', position:'relative' }}\n >\n {splitLines(el.text).join(\"\\n\")}\n {editingTextId===el.id && (\n ev.stopPropagation()}\n onBlur={(ev)=>{ if (resettingRef.current) return; updateElementById(el.id,{ text:ev.target.value }); setEditingTextId(null); }}\n style={{ position:'absolute', inset:0, width:'100%', height:'100%', padding:4, border:'1px dashed #0ea5e9', background:'#ffffffdd', fontFamily:el.fontFamily, fontSize:el.fontSize, fontWeight: el.bold?700:(el.fontWeight??400), fontStyle: el.italic?'italic':'normal', color:el.color, lineHeight:1.2, resize:'none', outline:'none' }}\n />\n )}\n

\n )}\n {el.type==='shape' && } \n {el.type==='image' && $\"\"$ } \n \n ))}\n

\n\n {/* right sidebar */}\n

Ebenen

\n \n \n \n \n

Tipp: Wähle zuerst ein Element aus.

\n\n {/* In‑App Confirm Modal */}\n {confirmReset.open && (\n

Neues Dokument anlegen?

Ungespeicherte Änderungen gehen verloren.

\n \n \n

\n )}\n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","12129427842911563949","traceTime",1776857970117]