verbesserung von benachrichtungen und warnungen an nutzer abgeschlossen. layout editor nun auf gutem stand.

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

@@ -450,7 +450,7 @@ export async function renderFabricLayout(
   } = options;
 
   canvas.discardActiveObject();
-  canvas.getObjects().forEach((object) => canvas.remove(object));
+  canvas.clear();
 
   applyBackground(canvas, backgroundColor, backgroundGradient);
 
@@ -461,6 +461,7 @@ export async function renderFabricLayout(
     readOnly,
   });
 
+  const abortController = new AbortController();
   const objectPromises = elements.map((element) =>
     createFabricObject({
       element,
@@ -471,10 +472,11 @@ export async function renderFabricLayout(
       qrCodeDataUrl,
       logoDataUrl,
       readOnly,
-    }),
+    }, abortController.signal),
   );
 
   const fabricObjects = await Promise.all(objectPromises);
+  abortController.abort(); // Abort any pending loads
   console.debug('[Invites][Fabric] resolved objects', {
     count: fabricObjects.length,
     nulls: fabricObjects.filter((obj) => !obj).length,
@@ -765,8 +767,9 @@ export async function loadImageObject(
   element: LayoutElement,
   baseConfig: FabricObjectWithId,
   options?: { objectFit?: 'contain' | 'cover'; shadow?: string; padding?: number },
+  abortSignal?: AbortSignal,
 ): Promise<fabric.Object | null> {
-  return new Promise((resolve) => {
+  return new Promise((resolve, reject) => {
     let resolved = false;
     const resolveSafely = (value: fabric.Object | null) => {
       if (resolved) {
@@ -779,7 +782,7 @@ export async function loadImageObject(
     const isDataUrl = source.startsWith('data:');
 
     const onImageLoaded = (img?: HTMLImageElement | HTMLCanvasElement | null) => {
-      if (!img) {
+      if (!img || resolved) {
         console.warn('[Invites][Fabric] image load returned empty', { source });
         resolveSafely(null);
         return;
@@ -819,14 +822,26 @@ export async function loadImageObject(
     };
 
     const onError = (error?: unknown) => {
+      if (resolved) return;
       console.warn('[Invites][Fabric] failed to load image', source, error);
       resolveSafely(null);
     };
 
+    const abortHandler = () => {
+      if (resolved) return;
+      console.debug('[Invites][Fabric] Image load aborted', { source });
+      resolveSafely(null);
+    };
+
+    if (abortSignal) {
+      abortSignal.addEventListener('abort', abortHandler);
+    }
+
     try {
       if (isDataUrl) {
         const imageElement = new Image();
         imageElement.onload = () => {
+          if (resolved) return;
           console.debug('[Invites][Fabric] image loaded (data-url)', {
             source: source.slice(0, 48),
             width: imageElement.naturalWidth,
@@ -840,6 +855,7 @@ export async function loadImageObject(
         // Use direct Image constructor approach for better compatibility
         const img = new Image();
         img.onload = () => {
+          if (resolved) return;
           console.debug('[Invites][Fabric] image loaded', {
             source: source.slice(0, 48),
             width: img.width,
@@ -854,7 +870,17 @@ export async function loadImageObject(
       onError(error);
     }
 
-    window.setTimeout(() => resolveSafely(null), 3000);
+    const timeoutId = window.setTimeout(() => {
+      if (resolved) return;
+      resolveSafely(null);
+    }, 3000);
+
+    return () => {
+      clearTimeout(timeoutId);
+      if (abortSignal) {
+        abortSignal.removeEventListener('abort', abortHandler);
+      }
+    };
   });
 }