soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

typescript-typenfehler behoben.. npm run lint läuft nun fehlerfrei durch.

Browse Source
This commit is contained in:
Codex Agent
2025-11-22 11:49:47 +01:00
parent 6c78d7e281
commit eb41cb6194
74 changed files with 469 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
resources/js/admin/pages/components/InviteLayoutCustomizerPanel.tsx
View File

@@ -1561,37 +1561,34 @@ export function InviteLayoutCustomizerPanel({
const highlightedElementId = activeElementId ?? inspectorElementId;
const renderResponsiveSection = React.useCallback(
(id: string, title: string, description: string, content: React.ReactNode) => {
const body = <div className="space-y-4">{content}</div>;
if (!isCompact) {
return (
<section key={id} className="space-y-4 rounded-2xl border border-border bg-[var(--tenant-surface)] p-5 shadow-sm transition-colors">
<header className="space-y-1">
<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">{title}</h3>
{description ? <p className="text-xs text-muted-foreground">{description}</p> : null}
</header>
{body}
</section>
);
}
const renderResponsiveSection = (id: string, title: string, description: string, content: React.ReactNode) => {
const body = <div className="space-y-4">{content}</div>;
if (!isCompact) {
return (
<Collapsible key={id} defaultOpen className="rounded-2xl border border-border bg-[var(--tenant-surface)] p-3 shadow-sm transition-colors">
<CollapsibleTrigger type="button" className="flex w-full items-center justify-between gap-3 text-left">
<div className="space-y-1">
<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">{title}</h3>
{description ? <p className="text-xs text-muted-foreground">{description}</p> : null}
</div>
<ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform data-[state=open]:rotate-180" />
</CollapsibleTrigger>
<CollapsibleContent className="pt-4">{body}</CollapsibleContent>
</Collapsible>
<section key={id} className="space-y-4 rounded-2xl border border-border bg-[var(--tenant-surface)] p-5 shadow-sm transition-colors">
<header className="space-y-1">
<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">{title}</h3>
{description ? <p className="text-xs text-muted-foreground">{description}</p> : null}
</header>
{body}
</section>
);
},
[isCompact]
);
}
return (
<Collapsible key={id} defaultOpen className="rounded-2xl border border-border bg-[var(--tenant-surface)] p-3 shadow-sm transition-colors">
<CollapsibleTrigger type="button" className="flex w-full items-center justify-between gap-3 text-left">
<div className="space-y-1">
<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">{title}</h3>
{description ? <p className="text-xs text-muted-foreground">{description}</p> : null}
</div>
<ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform data-[state=open]:rotate-180" />
</CollapsibleTrigger>
<CollapsibleContent className="pt-4">{body}</CollapsibleContent>
</Collapsible>
);
};
return (
<div className="space-y-4">

27
resources/js/admin/pages/components/invite-layout/DesignerCanvas.tsx
View File

@@ -6,7 +6,6 @@ import {
CANVAS_WIDTH,
LayoutElement,
clamp,
LayoutElementType,
} from './schema';
type DesignerCanvasProps = {
@@ -23,7 +22,6 @@ type DesignerCanvasProps = {
qrCodeDataUrl: string | null;
logoDataUrl: string | null;
scale?: number;
layoutKey?: string;
readOnly?: boolean;
};
@@ -43,7 +41,6 @@ export function DesignerCanvas({
qrCodeDataUrl,
logoDataUrl,
scale = 1,
layoutKey,
readOnly = false,
}: DesignerCanvasProps): React.JSX.Element {
const canvasElementRef = React.useRef<HTMLCanvasElement | null>(null);
@@ -170,10 +167,6 @@ export function DesignerCanvas({
return () => {
const timeoutId = window.setTimeout(() => {
if (disposeTokenRef.current !== disposeToken) {
return;
}
destroyCanvas(canvas);
pendingTimeoutRef.current = null;
pendingDisposeRef.current = null;
@@ -216,8 +209,8 @@ export function DesignerCanvas({
onSelect(active.elementId);
};
const handleSelectionCleared = (event?: unknown) => {
const pointerEvent = event as { e?: MouseEvent } | undefined;
const handleSelectionCleared = (event?: fabric.IEvent<MouseEvent>) => {
const pointerEvent = event?.e;
if (readOnly) {
return;
}
@@ -229,11 +222,11 @@ export function DesignerCanvas({
onSelect(null);
};
const handleObjectModified = (e: any) => {
const handleObjectModified = (event: fabric.IEvent<MouseEvent>) => {
if (readOnly) {
return;
}
const target = e.target as FabricObjectWithId | undefined;
const target = event.target as FabricObjectWithId | undefined;
if (!target || typeof target.elementId !== 'string') {
return;
}
@@ -312,7 +305,7 @@ export function DesignerCanvas({
canvas.on('selection:cleared', handleSelectionCleared);
canvas.on('object:modified', handleObjectModified);
const handleEditingExited = (event: { target?: FabricObjectWithId & { text?: string } }) => {
const handleEditingExited = (event: fabric.IEvent<MouseEvent> & { target?: FabricObjectWithId & { text?: string } }) => {
if (readOnly) {
return;
}
@@ -327,14 +320,14 @@ export function DesignerCanvas({
canvas.requestRenderAll();
};
(canvas as any).on('editing:exited', handleEditingExited);
canvas.on('editing:exited', handleEditingExited);
return () => {
canvas.off('selection:created', handleSelection);
canvas.off('selection:updated', handleSelection);
canvas.off('selection:cleared', handleSelectionCleared);
canvas.off('object:modified', handleObjectModified);
(canvas as any).off('editing:exited', handleEditingExited);
canvas.off('editing:exited', handleEditingExited);
};
}, [onChange, onSelect, readOnly]);
@@ -702,7 +695,9 @@ export async function createFabricObject({
padding: 0, // No padding to fix large frame
});
if (qrImage) {
(qrImage as any).uniformScaling = true; // Lock aspect ratio
if (qrImage instanceof fabric.Image) {
qrImage.uniformScaling = true; // Lock aspect ratio
}
qrImage.lockScalingFlip = true;
qrImage.padding = 0;
qrImage.cornerColor = 'transparent';
@@ -801,7 +796,7 @@ export async function loadImageObject(
options?: { objectFit?: 'contain' | 'cover'; shadow?: string; padding?: number },
abortSignal?: AbortSignal,
): Promise<fabric.Object | null> {
return new Promise((resolve, reject) => {
return new Promise((resolve) => {
let resolved = false;
const resolveSafely = (value: fabric.Object | null) => {
if (resolved) {

17
resources/js/admin/pages/components/invite-layout/schema.ts
View File

@@ -1,5 +1,18 @@
// import type { EventQrInviteLayout } from '../../api'; // Temporär deaktiviert wegen Modul-Fehler; definiere lokal falls nötig
type EventQrInviteLayout = any; // Placeholder für Typ, bis Pfad gefixt
// import type { EventQrInviteLayout } from '../../api'; // Temporär deaktiviert wegen Modul-Fehler; definiere lokal falls nötig
type EventQrInviteLayout = {
id: string;
name?: string;
description?: string | null;
subtitle?: string | null;
preview?: {
background?: string | null;
background_gradient?: { angle?: number; stops?: string[] } | null;
accent?: string | null;
text?: string | null;
qr_size_px?: number | null;
} | null;
formats?: string[];
};
export const CANVAS_WIDTH = 1240;
export const CANVAS_HEIGHT = 1754;