1247 lines
44 KiB
TypeScript
1247 lines
44 KiB
TypeScript
import React from 'react';
|
||
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { ArrowLeft, RefreshCcw, Plus } from 'lucide-react';
|
||
import { YStack, XStack } from '@tamagui/stacks';
|
||
import { SizableText as Text } from '@tamagui/text';
|
||
import { Pressable } from '@tamagui/react-native-web-lite';
|
||
import { Input, TextArea } from 'tamagui';
|
||
import type { fabric as FabricNS } from 'fabric';
|
||
import { MobileShell } from './components/MobileShell';
|
||
import { MobileCard, CTAButton, PillBadge } from './components/Primitives';
|
||
import {
|
||
TenantEvent,
|
||
EventQrInvite,
|
||
EventQrInviteLayout,
|
||
getEvent,
|
||
getEventQrInvites,
|
||
updateEventQrInvite,
|
||
} from '../api';
|
||
import { isAuthError } from '../auth/tokens';
|
||
import { getApiErrorMessage } from '../lib/apiError';
|
||
import toast from 'react-hot-toast';
|
||
import {
|
||
generatePdfBytes,
|
||
generatePngDataUrl,
|
||
triggerDownloadFromBlob,
|
||
triggerDownloadFromDataUrl,
|
||
} from '../pages/components/invite-layout/export-utils';
|
||
import { LayoutElement, CANVAS_WIDTH, CANVAS_HEIGHT } from '../pages/components/invite-layout/schema';
|
||
|
||
type Step = 'background' | 'text' | 'preview';
|
||
|
||
const BACKGROUND_PRESETS = [
|
||
{ id: 'bg-blue-floral', src: '/storage/layouts/backgrounds-portrait/bg-blue-floral.png', label: 'Blue Floral' },
|
||
{ id: 'bg-goldframe', src: '/storage/layouts/backgrounds-portrait/bg-goldframe.png', label: 'Gold Frame' },
|
||
{ id: 'gr-green-floral', src: '/storage/layouts/backgrounds-portrait/gr-green-floral.png', label: 'Green Floral' },
|
||
];
|
||
|
||
export function buildInitialTextFields({
|
||
customization,
|
||
layoutDefaults,
|
||
eventName,
|
||
}: {
|
||
customization: Record<string, unknown> | null | undefined;
|
||
layoutDefaults: EventQrInviteLayout | null | undefined;
|
||
eventName?: string | null;
|
||
}): { headline: string; subtitle: string; description: string; instructions: string[] } {
|
||
const initialInstructions =
|
||
Array.isArray(customization?.instructions) && customization.instructions.length
|
||
? customization.instructions
|
||
.map((item: unknown) => String(item ?? ''))
|
||
.filter((item: string) => item.length > 0)
|
||
: [
|
||
'QR-Code scannen\nKamera-App öffnen und auf den Code richten.',
|
||
'Webseite öffnen\nDer Link öffnet direkt das gemeinsame Jubiläumsalbum.',
|
||
'Fotos hochladen\nZeigt eure Lieblingsmomente oder erfüllt kleine Fotoaufgaben, um besondere Erinnerungen beizusteuern.',
|
||
];
|
||
|
||
return {
|
||
headline:
|
||
(typeof customization?.headline === 'string' && customization.headline.length ? customization.headline : null) ??
|
||
(typeof eventName === 'string' && eventName.length ? eventName : null) ??
|
||
(typeof layoutDefaults?.name === 'string' ? layoutDefaults.name : '') ??
|
||
'',
|
||
subtitle: typeof customization?.subtitle === 'string' ? customization.subtitle : '',
|
||
description:
|
||
(typeof customization?.description === 'string' && customization.description.length ? customization.description : null) ??
|
||
(typeof layoutDefaults?.description === 'string' ? layoutDefaults.description : null) ??
|
||
'Helft uns, diesen besonderen Tag mit euren schönen Momenten festzuhalten.',
|
||
instructions: initialInstructions,
|
||
};
|
||
}
|
||
|
||
export default function MobileQrLayoutCustomizePage() {
|
||
const { slug: slugParam, tokenId: tokenParam } = useParams<{ slug?: string; tokenId?: string }>();
|
||
const [searchParams] = useSearchParams();
|
||
const slug = slugParam ?? null;
|
||
const tokenId = tokenParam ? Number(tokenParam) : null;
|
||
const layoutParam = searchParams.get('layout');
|
||
const navigate = useNavigate();
|
||
const { t } = useTranslation('management');
|
||
|
||
const [event, setEvent] = React.useState<TenantEvent | null>(null);
|
||
const [invite, setInvite] = React.useState<EventQrInvite | null>(null);
|
||
const [selectedLayoutId, setSelectedLayoutId] = React.useState<string | null>(layoutParam);
|
||
const [backgroundPreset, setBackgroundPreset] = React.useState<string | null>(null);
|
||
const [backgroundGradient, setBackgroundGradient] = React.useState<{ angle: number; stops: string[] } | null>(null);
|
||
const [backgroundSolid, setBackgroundSolid] = React.useState<string | null>(null);
|
||
const [textFields, setTextFields] = React.useState({
|
||
headline: '',
|
||
subtitle: '',
|
||
description: '',
|
||
instructions: [''],
|
||
});
|
||
const [qrPngUrl, setQrPngUrl] = React.useState<string | null>(null);
|
||
const [step, setStep] = React.useState<Step>('background');
|
||
const [saving, setSaving] = React.useState(false);
|
||
const [loading, setLoading] = React.useState(true);
|
||
const [error, setError] = React.useState<string | null>(null);
|
||
|
||
const handleSelectPreset = React.useCallback((id: string | null) => {
|
||
setBackgroundPreset(id);
|
||
if (id) {
|
||
setBackgroundGradient(null);
|
||
setBackgroundSolid(null);
|
||
}
|
||
}, []);
|
||
|
||
const handleSelectGradient = React.useCallback((gradient: { angle: number; stops: string[] } | null) => {
|
||
setBackgroundGradient(gradient);
|
||
if (gradient) {
|
||
setBackgroundPreset(null);
|
||
setBackgroundSolid(null);
|
||
}
|
||
}, []);
|
||
|
||
const handleSelectSolid = React.useCallback((color: string | null) => {
|
||
setBackgroundSolid(color);
|
||
if (color) {
|
||
setBackgroundPreset(null);
|
||
setBackgroundGradient(null);
|
||
}
|
||
}, []);
|
||
|
||
React.useEffect(() => {
|
||
if (!slug) return;
|
||
(async () => {
|
||
setLoading(true);
|
||
try {
|
||
const eventData = await getEvent(slug);
|
||
const invites = await getEventQrInvites(slug);
|
||
const matchedInvite = tokenId ? invites.find((item) => item.id === tokenId) : invites.find((i) => i.is_active) ?? invites[0] ?? null;
|
||
setEvent(eventData);
|
||
setInvite(matchedInvite ?? null);
|
||
setQrPngUrl(matchedInvite?.qr_code_data_url ?? null);
|
||
const customization = (matchedInvite?.metadata as any)?.layout_customization ?? {};
|
||
const initialLayoutId = layoutParam ?? customization.layout_id ?? matchedInvite?.layouts?.[0]?.id ?? null;
|
||
const layoutDefaults = matchedInvite?.layouts?.find((l) => l.id === initialLayoutId) ?? matchedInvite?.layouts?.[0] ?? null;
|
||
setBackgroundPreset(typeof customization.background_preset === 'string' ? customization.background_preset : null);
|
||
setSelectedLayoutId(initialLayoutId);
|
||
setBackgroundGradient(customization.background_gradient ?? null);
|
||
setBackgroundSolid(customization.background_color ?? null);
|
||
setTextFields(
|
||
buildInitialTextFields({
|
||
customization,
|
||
layoutDefaults,
|
||
eventName: eventData?.name ?? null,
|
||
})
|
||
);
|
||
setError(null);
|
||
} catch (err) {
|
||
if (!isAuthError(err)) {
|
||
setError(getApiErrorMessage(err, t('events.errors.loadFailed', 'QR-Daten konnten nicht geladen werden.')));
|
||
}
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
})();
|
||
}, [slug, tokenId, layoutParam, t]);
|
||
|
||
const selectedLayout = invite?.layouts.find((l) => l.id === selectedLayoutId) ?? invite?.layouts?.[0] ?? null;
|
||
const isFoldable = (selectedLayout?.panel_mode ?? '').toLowerCase() === 'double-mirror';
|
||
|
||
const handleSave = async () => {
|
||
if (!slug || !invite || !selectedLayout) {
|
||
toast.error(t('events.qr.missing', 'Kein QR-Link vorhanden'));
|
||
return;
|
||
}
|
||
setSaving(true);
|
||
try {
|
||
const payload = {
|
||
metadata: {
|
||
layout_customization: {
|
||
layout_id: selectedLayout.id,
|
||
background_preset: backgroundPreset,
|
||
background_gradient: backgroundGradient ?? undefined,
|
||
background_color: backgroundSolid ?? undefined,
|
||
headline: textFields.headline || null,
|
||
subtitle: textFields.subtitle || null,
|
||
description: textFields.description || null,
|
||
instructions: textFields.instructions.filter((item) => item.trim().length > 0),
|
||
},
|
||
},
|
||
};
|
||
const updated = await updateEventQrInvite(slug, invite.id, payload);
|
||
setInvite(updated);
|
||
toast.success(t('common.saved', 'Gespeichert'));
|
||
} catch (err) {
|
||
toast.error(getApiErrorMessage(err, t('events.errors.saveFailed', 'Speichern fehlgeschlagen.')));
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<MobileShell
|
||
activeTab="home"
|
||
title={t('events.qr.customize', 'Layout anpassen')}
|
||
onBack={() => navigate(-1)}
|
||
headerActions={
|
||
<Pressable onPress={() => window.location.reload()}>
|
||
<RefreshCcw size={18} color="#0f172a" />
|
||
</Pressable>
|
||
}
|
||
>
|
||
{error ? (
|
||
<MobileCard>
|
||
<Text fontWeight="700" color="#b91c1c">
|
||
{error}
|
||
</Text>
|
||
</MobileCard>
|
||
) : null}
|
||
|
||
<Stepper current={step} onStepChange={setStep} />
|
||
|
||
<MobileCard space="$2" marginTop="$2">
|
||
{step === 'background' && (
|
||
<BackgroundStep
|
||
onBack={() => navigate(-1)}
|
||
presets={BACKGROUND_PRESETS}
|
||
selectedPreset={backgroundPreset}
|
||
onSelectPreset={handleSelectPreset}
|
||
selectedLayout={selectedLayout}
|
||
layouts={invite?.layouts ?? []}
|
||
onSelectGradient={handleSelectGradient}
|
||
onSelectSolid={handleSelectSolid}
|
||
selectedGradient={backgroundGradient}
|
||
selectedSolid={backgroundSolid}
|
||
onSave={() => {
|
||
handleSave();
|
||
setStep('text');
|
||
}}
|
||
saving={saving || loading}
|
||
/>
|
||
)}
|
||
|
||
{step === 'text' && (
|
||
<TextStep
|
||
onBack={() => setStep('background')}
|
||
textFields={textFields}
|
||
onChange={(fields) => setTextFields(fields)}
|
||
onSave={() => {
|
||
handleSave();
|
||
setStep('preview');
|
||
}}
|
||
saving={saving || loading}
|
||
/>
|
||
)}
|
||
|
||
{step === 'preview' && (
|
||
<PreviewStep
|
||
onBack={() => setStep('text')}
|
||
layout={selectedLayout}
|
||
backgroundPreset={backgroundPreset}
|
||
backgroundGradient={backgroundGradient}
|
||
backgroundSolid={backgroundSolid}
|
||
presets={BACKGROUND_PRESETS}
|
||
textFields={textFields}
|
||
qrUrl={qrPngUrl ?? invite?.url ?? ''}
|
||
isFoldable={isFoldable}
|
||
onExport={(format) => {
|
||
const layout = selectedLayout;
|
||
const url = layout?.download_urls?.[format];
|
||
if (!url) {
|
||
toast.error(t('events.qr.missing', 'Kein QR-Link vorhanden'));
|
||
return;
|
||
}
|
||
window.open(url, '_blank', 'noopener');
|
||
}}
|
||
/>
|
||
)}
|
||
</MobileCard>
|
||
</MobileShell>
|
||
);
|
||
}
|
||
|
||
function Stepper({ current, onStepChange }: { current: Step; onStepChange: (step: Step) => void }) {
|
||
const { t } = useTranslation('management');
|
||
const steps: { key: Step; label: string }[] = [
|
||
{ key: 'background', label: t('events.qr.background', 'Hintergrund') },
|
||
{ key: 'text', label: t('events.qr.text', 'Text') },
|
||
{ key: 'preview', label: t('events.qr.preview', 'Vorschau') },
|
||
];
|
||
const currentIndex = steps.findIndex((s) => s.key === current);
|
||
const progress = ((currentIndex + 1) / steps.length) * 100;
|
||
|
||
return (
|
||
<YStack space="$2" marginTop="$2">
|
||
<XStack space="$2" alignItems="center">
|
||
{steps.map((step, idx) => {
|
||
const active = step.key === current;
|
||
const completed = idx < currentIndex;
|
||
return (
|
||
<Pressable key={step.key} onPress={() => onStepChange(step.key)} style={{ flex: 1 }}>
|
||
<YStack
|
||
borderRadius={12}
|
||
borderWidth={1}
|
||
borderColor={active ? '#2563EB' : completed ? '#16a34a' : '#e5e7eb'}
|
||
backgroundColor={active ? '#eff6ff' : '#fff'}
|
||
padding="$2"
|
||
alignItems="center"
|
||
justifyContent="center"
|
||
>
|
||
<Text fontSize="$sm" fontWeight="700" color="#111827">
|
||
{step.label}
|
||
</Text>
|
||
<Text fontSize="$xs" color="#6b7280">
|
||
{t('events.qr.step', 'Schritt')} {idx + 1}
|
||
</Text>
|
||
</YStack>
|
||
</Pressable>
|
||
);
|
||
})}
|
||
</XStack>
|
||
<YStack height={8} borderRadius={999} backgroundColor="#e5e7eb" overflow="hidden">
|
||
<YStack height="100%" width={`${progress}%`} backgroundColor="#2563EB" />
|
||
</YStack>
|
||
</YStack>
|
||
);
|
||
}
|
||
|
||
type SlotDefinition = {
|
||
x: number;
|
||
y: number;
|
||
w: number;
|
||
h?: number;
|
||
fontSize?: number;
|
||
fontWeight?: string | number;
|
||
lineHeight?: number;
|
||
align?: 'left' | 'center' | 'right';
|
||
};
|
||
|
||
function getDefaultSlots(): Record<string, SlotDefinition> {
|
||
return {
|
||
headline: { x: 0.08, y: 0.08, w: 0.84, fontSize: 30, fontWeight: 800, align: 'center' },
|
||
subtitle: { x: 0.1, y: 0.16, w: 0.8, fontSize: 18, fontWeight: 600, align: 'center' },
|
||
description: { x: 0.1, y: 0.22, w: 0.8, fontSize: 16, lineHeight: 1.4, align: 'center' },
|
||
instructions: { x: 0.1, y: 0.34, w: 0.8, fontSize: 14, lineHeight: 1.35 },
|
||
qr: { x: 0.35, y: 0.55, w: 0.3 },
|
||
};
|
||
}
|
||
|
||
function resolveSlots(layout: EventQrInviteLayout | null, isFoldable: boolean): Record<string, SlotDefinition> {
|
||
const fromLayout = (layout as any)?.slots;
|
||
if (fromLayout && typeof fromLayout === 'object') {
|
||
return Object.entries(fromLayout as Record<string, unknown>).reduce<Record<string, SlotDefinition>>((acc, [key, value]) => {
|
||
if (value && typeof value === 'object') {
|
||
const slot = value as Record<string, unknown>;
|
||
acc[key] = {
|
||
x: Number(slot.x ?? 0),
|
||
y: Number(slot.y ?? 0),
|
||
w: Number(slot.w ?? 0.8),
|
||
h: typeof slot.h === 'number' ? slot.h : undefined,
|
||
fontSize: typeof slot.fontSize === 'number' ? slot.fontSize : undefined,
|
||
fontWeight: typeof slot.fontWeight === 'string' || typeof slot.fontWeight === 'number' ? slot.fontWeight : undefined,
|
||
lineHeight: typeof slot.lineHeight === 'number' ? slot.lineHeight : undefined,
|
||
align: typeof slot.align === 'string' ? (slot.align as SlotDefinition['align']) : undefined,
|
||
};
|
||
}
|
||
return acc;
|
||
}, {});
|
||
}
|
||
|
||
if (isFoldable) {
|
||
return {
|
||
headline: { x: 0.1, y: 0.1, w: 0.8, fontSize: 28, fontWeight: 800, align: 'center' },
|
||
subtitle: { x: 0.12, y: 0.18, w: 0.76, fontSize: 18, fontWeight: 600, align: 'center' },
|
||
description: { x: 0.12, y: 0.24, w: 0.76, fontSize: 15, lineHeight: 1.4, align: 'center' },
|
||
instructions: { x: 0.12, y: 0.36, w: 0.76, fontSize: 13, lineHeight: 1.3 },
|
||
qr: { x: 0.36, y: 0.56, w: 0.28 },
|
||
};
|
||
}
|
||
|
||
return getDefaultSlots();
|
||
}
|
||
|
||
function getCanvasSize(layout: EventQrInviteLayout | null, isFoldable: boolean): { width: number; height: number } {
|
||
const svgWidth = (layout as any)?.preview?.svg?.width;
|
||
const svgHeight = (layout as any)?.preview?.svg?.height;
|
||
if (svgWidth && svgHeight) {
|
||
return { width: svgWidth, height: svgHeight };
|
||
}
|
||
if ((layout?.orientation || '').toLowerCase() === 'landscape' || isFoldable) {
|
||
return { width: 1754, height: 1240 }; // A4 landscape fallback
|
||
}
|
||
return { width: 1240, height: 1754 }; // A4 portrait fallback
|
||
}
|
||
|
||
function FabricCanvasPreview({
|
||
layout,
|
||
isFoldable,
|
||
backgroundPresetSrc,
|
||
backgroundGradient,
|
||
backgroundSolid,
|
||
textFields,
|
||
qrUrl,
|
||
}: {
|
||
layout: EventQrInviteLayout | null;
|
||
isFoldable: boolean;
|
||
backgroundPresetSrc: string | null;
|
||
backgroundGradient: { angle: number; stops: string[] } | null;
|
||
backgroundSolid: string | null;
|
||
textFields: { headline: string; subtitle: string; description: string; instructions: string[] };
|
||
qrUrl: string;
|
||
}) {
|
||
const canvasRef = React.useRef<HTMLCanvasElement | null>(null);
|
||
const slots = React.useMemo(() => resolveSlots(layout, isFoldable), [layout, isFoldable]);
|
||
const containerRef = React.useRef<HTMLDivElement | null>(null);
|
||
const [frame, setFrame] = React.useState<{ width: number; height: number } | null>(null);
|
||
|
||
React.useLayoutEffect(() => {
|
||
const measure = () => {
|
||
if (!containerRef.current) return;
|
||
const rect = containerRef.current.getBoundingClientRect();
|
||
const width = rect.width || 320;
|
||
const aspect =
|
||
layout?.preview?.aspect_ratio ??
|
||
((layout?.orientation || '').toLowerCase() === 'landscape' || isFoldable ? 297 / 210 : 210 / 297);
|
||
const height = width / aspect;
|
||
setFrame({ width, height });
|
||
};
|
||
measure();
|
||
window.addEventListener('resize', measure);
|
||
return () => window.removeEventListener('resize', measure);
|
||
}, [layout?.orientation, layout?.preview?.aspect_ratio, isFoldable]);
|
||
|
||
React.useEffect(() => {
|
||
if (!frame) return;
|
||
const baseWidth = frame.width;
|
||
const baseHeight = frame.height;
|
||
let canvas: FabricNS.Canvas | null = null;
|
||
let disposed = false;
|
||
|
||
async function render() {
|
||
const mod = await import('fabric');
|
||
const fabricLib: typeof FabricNS | undefined = (mod as any)?.fabric ?? (mod as any)?.default ?? (mod as any);
|
||
const canvasEl = canvasRef.current;
|
||
const fallbackColor = backgroundSolid ?? '#f8fafc';
|
||
if (canvasEl) {
|
||
const ctx = canvasEl.getContext('2d');
|
||
if (ctx) {
|
||
ctx.fillStyle = fallbackColor;
|
||
ctx.fillRect(0, 0, baseWidth, baseHeight);
|
||
}
|
||
}
|
||
if (!fabricLib || !fabricLib.Canvas || !canvasEl) {
|
||
return;
|
||
}
|
||
if (disposed || !canvasRef.current) return;
|
||
const fabric: typeof FabricNS = fabricLib as unknown as typeof FabricNS;
|
||
|
||
canvasEl.width = baseWidth;
|
||
canvasEl.height = baseHeight;
|
||
|
||
canvas = new fabric.Canvas(canvasRef.current, {
|
||
selection: false,
|
||
hoverCursor: 'default',
|
||
});
|
||
canvas.setWidth(baseWidth);
|
||
canvas.setHeight(baseHeight);
|
||
canvas.clear();
|
||
const lower = (canvas as any).lowerCanvasEl as HTMLCanvasElement | undefined;
|
||
const upper = (canvas as any).upperCanvasEl as HTMLCanvasElement | undefined;
|
||
[lower, upper].forEach((el, idx) => {
|
||
if (!el) return;
|
||
el.style.position = 'absolute';
|
||
el.style.left = '0';
|
||
el.style.top = '0';
|
||
el.style.width = '100%';
|
||
el.style.height = '100%';
|
||
el.style.setProperty('background-color', 'transparent', 'important');
|
||
el.style.pointerEvents = 'none';
|
||
el.style.zIndex = idx === 0 ? '1' : '2';
|
||
});
|
||
canvas.set('backgroundColor', 'transparent');
|
||
canvas.renderAll();
|
||
|
||
const textColor = layout?.preview?.text ?? '#0f172a';
|
||
const panelWidth = isFoldable ? baseWidth / 2 : baseWidth;
|
||
const panelHeight = baseHeight;
|
||
|
||
const drawPanel = async (offset: number, mirrored: boolean) => {
|
||
const placeX = (slotX: number, slotW: number) =>
|
||
mirrored ? offset + (panelWidth - (slotX + slotW) * panelWidth) : offset + slotX * panelWidth;
|
||
|
||
// Headline
|
||
if (textFields.headline) {
|
||
const slot = slots.headline;
|
||
const txt = new fabric.Textbox(textFields.headline, {
|
||
left: placeX(slot.x, slot.w),
|
||
top: slot.y * panelHeight,
|
||
width: slot.w * panelWidth,
|
||
fontSize: slot.fontSize ?? 28,
|
||
fontWeight: slot.fontWeight ?? '800',
|
||
fill: textColor,
|
||
textAlign: slot.align ?? 'center',
|
||
selectable: false,
|
||
evented: false,
|
||
});
|
||
canvas!.add(txt);
|
||
}
|
||
|
||
if (textFields.subtitle) {
|
||
const slot = slots.subtitle;
|
||
const txt = new fabric.Textbox(textFields.subtitle, {
|
||
left: placeX(slot.x, slot.w),
|
||
top: slot.y * panelHeight,
|
||
width: slot.w * panelWidth,
|
||
fontSize: slot.fontSize ?? 18,
|
||
fontWeight: slot.fontWeight ?? '600',
|
||
fill: textColor,
|
||
textAlign: slot.align ?? 'center',
|
||
selectable: false,
|
||
evented: false,
|
||
});
|
||
canvas!.add(txt);
|
||
}
|
||
|
||
if (textFields.description) {
|
||
const slot = slots.description;
|
||
const txt = new fabric.Textbox(textFields.description, {
|
||
left: placeX(slot.x, slot.w),
|
||
top: slot.y * panelHeight,
|
||
width: slot.w * panelWidth,
|
||
fontSize: slot.fontSize ?? 16,
|
||
lineHeight: slot.lineHeight ?? 1.35,
|
||
fill: textColor,
|
||
textAlign: slot.align ?? 'center',
|
||
selectable: false,
|
||
evented: false,
|
||
});
|
||
canvas!.add(txt);
|
||
}
|
||
|
||
const instructions = textFields.instructions.filter((i) => i.trim().length > 0);
|
||
if (instructions.length) {
|
||
const slot = slots.instructions;
|
||
const txt = new fabric.Textbox(
|
||
instructions
|
||
.map((line, idx) => `${idx + 1}. ${line}`)
|
||
.join('\n'),
|
||
{
|
||
left: placeX(slot.x, slot.w),
|
||
top: slot.y * panelHeight,
|
||
width: slot.w * panelWidth,
|
||
fontSize: slot.fontSize ?? 14,
|
||
lineHeight: slot.lineHeight ?? 1.3,
|
||
fill: textColor,
|
||
textAlign: slot.align ?? 'left',
|
||
selectable: false,
|
||
evented: false,
|
||
}
|
||
);
|
||
canvas!.add(txt);
|
||
}
|
||
|
||
if (qrUrl) {
|
||
const slot = slots.qr;
|
||
const size = slot.w * panelWidth;
|
||
const left = placeX(slot.x, slot.w);
|
||
const top = slot.y * panelHeight;
|
||
await new Promise<void>((resolve) => {
|
||
fabric.Image.fromURL(
|
||
qrUrl,
|
||
(img) => {
|
||
if (!img) return resolve();
|
||
img.set({
|
||
left,
|
||
top,
|
||
selectable: false,
|
||
evented: false,
|
||
objectCaching: false,
|
||
});
|
||
img.scaleToWidth(size);
|
||
img.scaleToHeight(size);
|
||
canvas!.add(img);
|
||
resolve();
|
||
},
|
||
{ crossOrigin: qrUrl.startsWith(window.location.origin) ? undefined : 'anonymous' }
|
||
);
|
||
});
|
||
}
|
||
};
|
||
|
||
await drawPanel(0, false);
|
||
if (isFoldable) {
|
||
await drawPanel(panelWidth, true);
|
||
}
|
||
|
||
canvas.renderAll();
|
||
}
|
||
|
||
render();
|
||
|
||
return () => {
|
||
disposed = true;
|
||
if (canvas) {
|
||
canvas.dispose();
|
||
}
|
||
};
|
||
}, [
|
||
backgroundGradient,
|
||
backgroundPresetSrc,
|
||
backgroundSolid,
|
||
frame,
|
||
isFoldable,
|
||
layout?.preview?.text,
|
||
qrUrl,
|
||
slots,
|
||
textFields.description,
|
||
textFields.headline,
|
||
textFields.instructions,
|
||
textFields.subtitle,
|
||
]);
|
||
|
||
return (
|
||
<YStack
|
||
ref={containerRef}
|
||
position="relative"
|
||
width="100%"
|
||
height="100%"
|
||
borderRadius={16}
|
||
overflow="hidden"
|
||
backgroundColor="transparent"
|
||
borderWidth={1}
|
||
borderColor="#e5e7eb"
|
||
minHeight={frame?.height ?? undefined}
|
||
>
|
||
<canvas
|
||
ref={canvasRef}
|
||
style={{
|
||
width: frame ? `${frame.width}px` : '100%',
|
||
height: frame ? `${frame.height}px` : '100%',
|
||
display: 'block',
|
||
backgroundColor: 'transparent',
|
||
position: 'absolute',
|
||
inset: 0,
|
||
pointerEvents: 'none',
|
||
}}
|
||
/>
|
||
</YStack>
|
||
);
|
||
}
|
||
|
||
function buildFabricOptions({
|
||
layout,
|
||
isFoldable,
|
||
backgroundGradient,
|
||
backgroundSolid,
|
||
backgroundImageUrl,
|
||
textFields,
|
||
qrUrl,
|
||
qrPngUrl,
|
||
baseWidth = CANVAS_WIDTH,
|
||
baseHeight = CANVAS_HEIGHT,
|
||
}: {
|
||
layout: EventQrInviteLayout | null;
|
||
isFoldable: boolean;
|
||
backgroundGradient: { angle: number; stops: string[] } | null;
|
||
backgroundSolid: string | null;
|
||
backgroundImageUrl: string | null;
|
||
textFields: { headline: string; subtitle: string; description: string; instructions: string[] };
|
||
qrUrl: string;
|
||
qrPngUrl?: string | null;
|
||
baseWidth?: number;
|
||
baseHeight?: number;
|
||
}) {
|
||
const scaleX = CANVAS_WIDTH / baseWidth;
|
||
const scaleY = CANVAS_HEIGHT / baseHeight;
|
||
const panelWidth = isFoldable ? baseWidth / 2 : baseWidth;
|
||
const panelHeight = baseHeight;
|
||
const slots = resolveSlots(layout, isFoldable);
|
||
|
||
const elements: LayoutElement[] = [];
|
||
const textColor = layout?.preview?.text ?? '#0f172a';
|
||
const accentColor = layout?.preview?.accent ?? '#2563EB';
|
||
const secondaryColor = layout?.preview?.secondary ?? '#1f2937';
|
||
const badgeColor = layout?.preview?.badge ?? accentColor;
|
||
|
||
const addTextElement = (
|
||
type: LayoutElement['type'],
|
||
content: string,
|
||
slot: SlotDefinition,
|
||
opts: { panelOffset: number; mirrored: boolean }
|
||
) => {
|
||
if (!content) return;
|
||
const widthPx = slot.w * panelWidth * scaleX;
|
||
const heightPx = (slot.h ?? 0.12) * panelHeight * scaleY;
|
||
const xBase = opts.mirrored
|
||
? opts.panelOffset + (panelWidth - (slot.x + slot.w) * panelWidth)
|
||
: opts.panelOffset + slot.x * panelWidth;
|
||
const xPx = xBase * scaleX;
|
||
const yPx = slot.y * panelHeight * scaleY;
|
||
|
||
elements.push({
|
||
id: `${type}-${opts.panelOffset}-${opts.mirrored ? 'm' : 'n'}`,
|
||
type,
|
||
x: xPx,
|
||
y: yPx,
|
||
width: widthPx,
|
||
height: heightPx,
|
||
fontSize: slot.fontSize ?? (type === 'headline' ? 30 : type === 'subtitle' ? 18 : 16),
|
||
align: slot.align ?? 'center',
|
||
lineHeight: slot.lineHeight ?? 1.35,
|
||
content,
|
||
fill: textColor,
|
||
});
|
||
};
|
||
|
||
const addQr = (slot: SlotDefinition, opts: { panelOffset: number; mirrored: boolean }) => {
|
||
if (!qrUrl) return;
|
||
const sizePx = slot.w * panelWidth * scaleX;
|
||
const xBase = opts.mirrored
|
||
? opts.panelOffset + (panelWidth - (slot.x + slot.w) * panelWidth)
|
||
: opts.panelOffset + slot.x * panelWidth;
|
||
const xPx = xBase * scaleX;
|
||
const yPx = slot.y * panelHeight * scaleY;
|
||
elements.push({
|
||
id: `qr-${opts.panelOffset}-${opts.mirrored ? 'm' : 'n'}`,
|
||
type: 'qr',
|
||
x: xPx,
|
||
y: yPx,
|
||
width: sizePx,
|
||
height: sizePx,
|
||
});
|
||
};
|
||
|
||
const instructions = textFields.instructions.filter((i) => i.trim().length > 0);
|
||
const instructionContent = instructions.map((line, idx) => `${idx + 1}. ${line}`).join('\n');
|
||
|
||
const drawPanelElements = (panelOffset: number, mirrored: boolean) => {
|
||
addTextElement('headline', textFields.headline, slots.headline, { panelOffset, mirrored });
|
||
addTextElement('subtitle', textFields.subtitle, slots.subtitle, { panelOffset, mirrored });
|
||
addTextElement('description', textFields.description, slots.description, { panelOffset, mirrored });
|
||
if (instructionContent) {
|
||
addTextElement('description', instructionContent, slots.instructions, { panelOffset, mirrored });
|
||
}
|
||
addQr(slots.qr, { panelOffset, mirrored });
|
||
};
|
||
|
||
drawPanelElements(0, false);
|
||
if (isFoldable) {
|
||
drawPanelElements(panelWidth, true);
|
||
}
|
||
|
||
return {
|
||
elements,
|
||
accentColor,
|
||
textColor,
|
||
secondaryColor,
|
||
badgeColor,
|
||
qrCodeDataUrl: qrPngUrl ?? (qrUrl ? `https://api.qrserver.com/v1/create-qr-code/?size=400x400&data=${encodeURIComponent(qrUrl)}` : null),
|
||
logoDataUrl: null,
|
||
backgroundColor: backgroundSolid ?? layout?.preview?.background ?? '#ffffff',
|
||
backgroundGradient,
|
||
backgroundImageUrl,
|
||
readOnly: true,
|
||
} as const;
|
||
}
|
||
|
||
function BackgroundStep({
|
||
onBack,
|
||
presets,
|
||
selectedPreset,
|
||
onSelectPreset,
|
||
selectedLayout,
|
||
layouts,
|
||
onSelectGradient,
|
||
onSelectSolid,
|
||
selectedGradient,
|
||
selectedSolid,
|
||
onSave,
|
||
saving,
|
||
}: {
|
||
onBack: () => void;
|
||
presets: { id: string; src: string; label: string }[];
|
||
selectedPreset: string | null;
|
||
onSelectPreset: (id: string) => void;
|
||
selectedLayout: EventQrInviteLayout | null;
|
||
layouts: EventQrInviteLayout[];
|
||
onSelectGradient: (gradient: { angle: number; stops: string[] } | null) => void;
|
||
onSelectSolid: (color: string | null) => void;
|
||
selectedGradient: { angle: number; stops: string[] } | null;
|
||
selectedSolid: string | null;
|
||
onSave: () => void;
|
||
saving: boolean;
|
||
}) {
|
||
const { t } = useTranslation('management');
|
||
const resolvedLayout =
|
||
selectedLayout ??
|
||
layouts.find((layout) => {
|
||
const panel = (layout.panel_mode ?? '').toLowerCase();
|
||
const orientation = (layout.orientation ?? '').toLowerCase();
|
||
return panel === 'double-mirror' || orientation === 'landscape';
|
||
}) ??
|
||
layouts[0] ??
|
||
null;
|
||
|
||
const isFoldable = (resolvedLayout?.panel_mode ?? '').toLowerCase() === 'double-mirror';
|
||
const formatLabel = isFoldable ? 'A4 Landscape (Double/Mirror)' : 'A4 Portrait';
|
||
const disablePresets = isFoldable;
|
||
const gradientPresets = [
|
||
{ angle: 180, stops: ['#F8FAFC', '#EEF2FF', '#F8FAFC'], label: 'Soft Lilac' },
|
||
{ angle: 135, stops: ['#FEE2E2', '#EFF6FF', '#ECFDF3'], label: 'Pastell' },
|
||
{ angle: 210, stops: ['#0B132B', '#1C2541', '#274690'], label: 'Midnight' },
|
||
];
|
||
const solidPresets = ['#FFFFFF', '#F8FAFC', '#0F172A', '#2563EB', '#F59E0B'];
|
||
|
||
return (
|
||
<YStack space="$3" marginTop="$2">
|
||
<XStack alignItems="center" space="$2">
|
||
<Pressable onPress={onBack}>
|
||
<XStack alignItems="center" space="$1">
|
||
<ArrowLeft size={16} color="#111827" />
|
||
<Text fontSize="$sm" color="#111827">
|
||
{t('common.back', 'Zurück')}
|
||
</Text>
|
||
</XStack>
|
||
</Pressable>
|
||
<PillBadge tone="muted">{formatLabel}</PillBadge>
|
||
</XStack>
|
||
|
||
<YStack space="$2">
|
||
<Text fontSize="$sm" fontWeight="700" color="#111827">
|
||
{disablePresets
|
||
? t('events.qr.backgroundPicker', 'Hintergrund für A5 (Gradient/Farbe)')
|
||
: t('events.qr.backgroundPicker', `Hintergrund auswählen (${formatLabel})`)}
|
||
</Text>
|
||
{!disablePresets ? (
|
||
<>
|
||
<XStack flexWrap="wrap" gap="$2">
|
||
{presets.map((preset) => {
|
||
const isSelected = selectedPreset === preset.id;
|
||
return (
|
||
<Pressable key={preset.id} onPress={() => onSelectPreset(preset.id)} style={{ width: '48%' }}>
|
||
<YStack
|
||
aspectRatio={210 / 297}
|
||
maxHeight={220}
|
||
borderRadius={14}
|
||
overflow="hidden"
|
||
borderWidth={isSelected ? 2 : 1}
|
||
borderColor={isSelected ? '#2563EB' : '#e5e7eb'}
|
||
backgroundColor="#f8fafc"
|
||
>
|
||
<YStack
|
||
flex={1}
|
||
backgroundImage={`url(${preset.src})`}
|
||
backgroundSize="cover"
|
||
backgroundPosition="center"
|
||
/>
|
||
<XStack padding="$2" justifyContent="space-between" alignItems="center" backgroundColor="rgba(255,255,255,0.92)">
|
||
<Text fontSize="$xs" color="#111827">
|
||
{preset.label}
|
||
</Text>
|
||
{isSelected ? <PillBadge tone="muted">{t('common.selected', 'Ausgewählt')}</PillBadge> : null}
|
||
</XStack>
|
||
</YStack>
|
||
</Pressable>
|
||
);
|
||
})}
|
||
</XStack>
|
||
<Text fontSize="$xs" color="#6b7280">
|
||
{t('events.qr.backgroundNote', 'Diese Presets sind für A4 Hochformat. Spiegelung erfolgt automatisch bei Tischkarten.')}
|
||
</Text>
|
||
</>
|
||
) : (
|
||
<Text fontSize="$xs" color="#6b7280">
|
||
{t('events.qr.foldableBackgroundNote', 'Für A5 Tischkarten bitte Gradient oder Vollfarbe wählen.')}
|
||
</Text>
|
||
)}
|
||
|
||
<YStack space="$2" marginTop="$2">
|
||
<Text fontSize="$sm" fontWeight="700" color="#111827">
|
||
{t('events.qr.gradients', 'Gradienten')}
|
||
</Text>
|
||
<XStack flexWrap="wrap" gap="$2">
|
||
{gradientPresets.map((gradient, idx) => {
|
||
const isSelected =
|
||
selectedGradient &&
|
||
selectedGradient.angle === gradient.angle &&
|
||
JSON.stringify(selectedGradient.stops) === JSON.stringify(gradient.stops);
|
||
const style = {
|
||
backgroundImage: `linear-gradient(${gradient.angle}deg, ${gradient.stops.join(',')})`,
|
||
} as React.CSSProperties;
|
||
return (
|
||
<Pressable key={idx} onPress={() => onSelectGradient(gradient)} style={{ width: '30%' }}>
|
||
<YStack
|
||
height={70}
|
||
borderRadius={12}
|
||
overflow="hidden"
|
||
borderWidth={isSelected ? 2 : 1}
|
||
borderColor={isSelected ? '#2563EB' : '#e5e7eb'}
|
||
style={style}
|
||
/>
|
||
</Pressable>
|
||
);
|
||
})}
|
||
</XStack>
|
||
</YStack>
|
||
|
||
<YStack space="$2" marginTop="$2">
|
||
<Text fontSize="$sm" fontWeight="700" color="#111827">
|
||
{t('events.qr.colors', 'Vollfarbe')}
|
||
</Text>
|
||
<XStack flexWrap="wrap" gap="$2">
|
||
{solidPresets.map((color) => {
|
||
const isSelected = selectedSolid === color;
|
||
return (
|
||
<Pressable key={color} onPress={() => onSelectSolid(color)} style={{ width: '20%' }}>
|
||
<YStack
|
||
height={50}
|
||
borderRadius={12}
|
||
overflow="hidden"
|
||
borderWidth={isSelected ? 2 : 1}
|
||
borderColor={isSelected ? '#2563EB' : '#e5e7eb'}
|
||
backgroundColor={color}
|
||
/>
|
||
</Pressable>
|
||
);
|
||
})}
|
||
</XStack>
|
||
</YStack>
|
||
</YStack>
|
||
|
||
<CTAButton
|
||
label={saving ? t('common.saving', 'Speichern …') : t('common.next', 'Weiter')}
|
||
disabled={saving || !resolvedLayout}
|
||
onPress={onSave}
|
||
/>
|
||
</YStack>
|
||
);
|
||
}
|
||
|
||
function TextStep({
|
||
onBack,
|
||
textFields,
|
||
onChange,
|
||
onSave,
|
||
saving,
|
||
}: {
|
||
onBack: () => void;
|
||
textFields: { headline: string; subtitle: string; description: string; instructions: string[] };
|
||
onChange: (fields: { headline: string; subtitle: string; description: string; instructions: string[] }) => void;
|
||
onSave: () => void;
|
||
saving: boolean;
|
||
}) {
|
||
const { t } = useTranslation('management');
|
||
|
||
const updateField = (key: 'headline' | 'subtitle' | 'description', value: string) => {
|
||
onChange({ ...textFields, [key]: value });
|
||
};
|
||
|
||
const updateInstruction = (idx: number, value: string) => {
|
||
const next = [...textFields.instructions];
|
||
next[idx] = value;
|
||
onChange({ ...textFields, instructions: next });
|
||
};
|
||
|
||
const addInstruction = () => {
|
||
onChange({ ...textFields, instructions: [...textFields.instructions, ''] });
|
||
};
|
||
|
||
const removeInstruction = (idx: number) => {
|
||
const next = textFields.instructions.filter((_, i) => i !== idx);
|
||
onChange({ ...textFields, instructions: next.length ? next : [''] });
|
||
};
|
||
|
||
return (
|
||
<YStack space="$3" marginTop="$2">
|
||
<XStack alignItems="center" space="$2">
|
||
<Pressable onPress={onBack}>
|
||
<XStack alignItems="center" space="$1">
|
||
<ArrowLeft size={16} color="#111827" />
|
||
<Text fontSize="$sm" color="#111827">
|
||
{t('common.back', 'Zurück')}
|
||
</Text>
|
||
</XStack>
|
||
</Pressable>
|
||
<PillBadge tone="muted">{t('events.qr.textStep', 'Texte & Hinweise')}</PillBadge>
|
||
</XStack>
|
||
|
||
<YStack space="$2">
|
||
<Text fontSize="$sm" fontWeight="700" color="#111827">
|
||
{t('events.qr.textFields', 'Texte')}
|
||
</Text>
|
||
<Input
|
||
placeholder={t('events.qr.headline', 'Headline')}
|
||
value={textFields.headline}
|
||
onChangeText={(val) => updateField('headline', val)}
|
||
size="$4"
|
||
/>
|
||
<Input
|
||
placeholder={t('events.qr.subtitle', 'Subtitle')}
|
||
value={textFields.subtitle}
|
||
onChangeText={(val) => updateField('subtitle', val)}
|
||
size="$4"
|
||
/>
|
||
<TextArea
|
||
placeholder={t('events.qr.description', 'Beschreibung')}
|
||
value={textFields.description}
|
||
onChangeText={(val) => updateField('description', val)}
|
||
size="$4"
|
||
numberOfLines={3}
|
||
/>
|
||
</YStack>
|
||
|
||
<YStack space="$2">
|
||
<Text fontSize="$sm" fontWeight="700" color="#111827">
|
||
{t('events.qr.instructions', 'Anleitung')}
|
||
</Text>
|
||
{textFields.instructions.map((item, idx) => (
|
||
<XStack key={idx} alignItems="center" space="$2">
|
||
<TextArea
|
||
value={item}
|
||
onChangeText={(val) => updateInstruction(idx, val)}
|
||
placeholder={t('events.qr.instructionsPlaceholder', 'Schritt hinzufügen')}
|
||
numberOfLines={2}
|
||
flex={1}
|
||
size="$4"
|
||
/>
|
||
<Pressable onPress={() => removeInstruction(idx)} disabled={textFields.instructions.length === 1}>
|
||
<XStack
|
||
width={44}
|
||
height={44}
|
||
borderRadius={12}
|
||
alignItems="center"
|
||
justifyContent="center"
|
||
borderWidth={1}
|
||
borderColor="#e5e7eb"
|
||
backgroundColor="#fff"
|
||
>
|
||
<Text fontSize="$md" fontWeight="800" color="#111827">
|
||
–
|
||
</Text>
|
||
</XStack>
|
||
</Pressable>
|
||
{idx === textFields.instructions.length - 1 ? (
|
||
<Pressable onPress={addInstruction}>
|
||
<XStack
|
||
width={44}
|
||
height={44}
|
||
borderRadius={12}
|
||
alignItems="center"
|
||
justifyContent="center"
|
||
borderWidth={1}
|
||
borderColor="#e5e7eb"
|
||
backgroundColor="#fff"
|
||
>
|
||
<Plus size={18} color="#111827" />
|
||
</XStack>
|
||
</Pressable>
|
||
) : null}
|
||
</XStack>
|
||
))}
|
||
</YStack>
|
||
|
||
<CTAButton
|
||
label={saving ? t('common.saving', 'Speichern …') : t('events.qr.preview', 'Vorschau')}
|
||
disabled={saving}
|
||
onPress={onSave}
|
||
/>
|
||
</YStack>
|
||
);
|
||
}
|
||
|
||
function PreviewStep({
|
||
onBack,
|
||
layout,
|
||
backgroundPreset,
|
||
backgroundGradient,
|
||
backgroundSolid,
|
||
presets,
|
||
textFields,
|
||
qrUrl,
|
||
qrPngUrl,
|
||
isFoldable,
|
||
onExport,
|
||
}: {
|
||
onBack: () => void;
|
||
layout: EventQrInviteLayout | null;
|
||
backgroundPreset: string | null;
|
||
backgroundGradient: { angle: number; stops: string[] } | null;
|
||
backgroundSolid: string | null;
|
||
presets: { id: string; src: string; label: string }[];
|
||
textFields: { headline: string; subtitle: string; description: string; instructions: string[] };
|
||
qrUrl: string;
|
||
qrPngUrl?: string | null;
|
||
isFoldable: boolean;
|
||
onExport: (format: 'pdf' | 'png') => void;
|
||
}) {
|
||
const { t } = useTranslation('management');
|
||
const presetSrc = backgroundPreset ? presets.find((p) => p.id === backgroundPreset)?.src ?? null : null;
|
||
const resolvedBgGradient =
|
||
backgroundGradient ??
|
||
layout?.preview?.background_gradient ??
|
||
(layout?.preview?.background
|
||
? { angle: 180, stops: [layout.preview.background, layout.preview.background, layout.preview.background] }
|
||
: null);
|
||
const resolvedBgSolid = backgroundSolid ?? layout?.preview?.background ?? null;
|
||
const aspectRatio =
|
||
layout?.preview?.aspect_ratio ??
|
||
((layout?.orientation || '').toLowerCase() === 'landscape' ? 297 / 210 : 210 / 297);
|
||
const backgroundImageUrl = presetSrc ?? null;
|
||
const exportOptions = React.useMemo(() => {
|
||
const svgWidth = (layout as any)?.preview?.svg?.width ?? CANVAS_WIDTH;
|
||
const svgHeight = (layout as any)?.preview?.svg?.height ?? CANVAS_HEIGHT;
|
||
return buildFabricOptions({
|
||
layout,
|
||
isFoldable,
|
||
backgroundGradient: resolvedBgGradient,
|
||
backgroundSolid: resolvedBgSolid,
|
||
backgroundImageUrl,
|
||
textFields,
|
||
qrUrl,
|
||
qrPngUrl,
|
||
baseWidth: svgWidth,
|
||
baseHeight: svgHeight,
|
||
});
|
||
}, [backgroundImageUrl, isFoldable, layout, qrUrl, qrPngUrl, resolvedBgGradient, resolvedBgSolid, textFields]);
|
||
|
||
const cssBg = React.useMemo(() => {
|
||
if (presetSrc) {
|
||
const url = presetSrc.startsWith('http') || presetSrc.startsWith('data:') ? presetSrc : `${window.location.origin}${presetSrc}`;
|
||
return { backgroundImage: `url(${url})`, backgroundSize: 'cover', backgroundPosition: 'center' } as React.CSSProperties;
|
||
}
|
||
if (resolvedBgGradient) {
|
||
return {
|
||
backgroundImage: `linear-gradient(${resolvedBgGradient.angle}deg, ${resolvedBgGradient.stops.join(',')})`,
|
||
} as React.CSSProperties;
|
||
}
|
||
return { backgroundColor: resolvedBgSolid ?? '#f8fafc' } as React.CSSProperties;
|
||
}, [presetSrc, resolvedBgGradient, resolvedBgSolid]);
|
||
|
||
const qrImageSrc = qrPngUrl ?? qrUrl ?? '';
|
||
const qrSlot = React.useMemo(() => resolveSlots(layout, isFoldable).qr, [layout, isFoldable]);
|
||
|
||
const Panel = () => (
|
||
<YStack width="100%" maxWidth={380} aspectRatio={aspectRatio} borderRadius={16} overflow="hidden" position="relative" style={cssBg}>
|
||
{presetSrc ? (
|
||
<img
|
||
src={presetSrc.startsWith('http') || presetSrc.startsWith('data:') ? presetSrc : `${window.location.origin}${presetSrc}`}
|
||
alt=""
|
||
aria-hidden
|
||
style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', zIndex: 0 }}
|
||
/>
|
||
) : null}
|
||
{qrImageSrc ? (
|
||
<>
|
||
<img
|
||
src={qrImageSrc}
|
||
alt="QR"
|
||
style={{
|
||
position: 'absolute',
|
||
left: `${qrSlot.x * 100}%`,
|
||
top: `${qrSlot.y * 100}%`,
|
||
width: `${qrSlot.w * 100}%`,
|
||
height: 'auto',
|
||
objectFit: 'contain',
|
||
zIndex: 5,
|
||
}}
|
||
/>
|
||
{isFoldable ? (
|
||
<img
|
||
src={qrImageSrc}
|
||
alt="QR"
|
||
style={{
|
||
position: 'absolute',
|
||
left: `${50 + qrSlot.x * 50}%`,
|
||
top: `${qrSlot.y * 100}%`,
|
||
width: `${qrSlot.w * 50}%`,
|
||
height: 'auto',
|
||
objectFit: 'contain',
|
||
transform: 'scaleX(-1)',
|
||
zIndex: 5,
|
||
}}
|
||
/>
|
||
) : null}
|
||
</>
|
||
) : null}
|
||
<FabricCanvasPreview
|
||
layout={layout}
|
||
isFoldable={isFoldable}
|
||
backgroundPresetSrc={presetSrc}
|
||
backgroundGradient={resolvedBgGradient}
|
||
backgroundSolid={resolvedBgSolid}
|
||
textFields={textFields}
|
||
qrUrl={qrPngUrl ?? qrUrl}
|
||
/>
|
||
</YStack>
|
||
);
|
||
|
||
return (
|
||
<YStack space="$3" marginTop="$2">
|
||
<XStack alignItems="center" space="$2">
|
||
<Pressable onPress={onBack}>
|
||
<XStack alignItems="center" space="$1">
|
||
<ArrowLeft size={16} color="#111827" />
|
||
<Text fontSize="$sm" color="#111827">
|
||
{t('common.back', 'Zurück')}
|
||
</Text>
|
||
</XStack>
|
||
</Pressable>
|
||
<PillBadge tone="muted">{isFoldable ? 'A5 Foldable' : 'A4 Poster'}</PillBadge>
|
||
</XStack>
|
||
|
||
<YStack space="$2">
|
||
<Text fontSize="$sm" fontWeight="700" color="#111827">
|
||
{t('events.qr.preview', 'Vorschau')}
|
||
</Text>
|
||
{isFoldable ? (
|
||
<Panel />
|
||
) : (
|
||
<Panel />
|
||
)}
|
||
</YStack>
|
||
|
||
<XStack space="$2">
|
||
<CTAButton
|
||
label={t('events.qr.exportPdf', 'Export PDF')}
|
||
onPress={async () => {
|
||
try {
|
||
const pdfBytes = await generatePdfBytes(exportOptions, 'a4', isFoldable ? 'landscape' : 'portrait');
|
||
const blob = new Blob([pdfBytes], { type: 'application/pdf' });
|
||
triggerDownloadFromBlob(blob, 'qr-layout.pdf');
|
||
} catch (err) {
|
||
toast.error(t('events.qr.exportFailed', 'Export fehlgeschlagen'));
|
||
console.error(err);
|
||
}
|
||
}}
|
||
/>
|
||
<CTAButton
|
||
label={t('events.qr.exportPng', 'Export PNG')}
|
||
onPress={async () => {
|
||
try {
|
||
const dataUrl = await generatePngDataUrl(exportOptions);
|
||
await triggerDownloadFromDataUrl(dataUrl, 'qr-layout.png');
|
||
} catch (err) {
|
||
toast.error(t('events.qr.exportFailed', 'Export fehlgeschlagen'));
|
||
console.error(err);
|
||
}
|
||
}}
|
||
/>
|
||
</XStack>
|
||
</YStack>
|
||
);
|
||
}
|