refactor: pick out logic into services

src/routes/+page.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { createPanelFromText, updatePanelText } from "../stores/panelStore";
-  import { uiStore, setLoading, setCurrentStep } from "../stores/uiStore";
-
-  import { exportService } from "../lib/services/exportService";
+  import { uiStore } from "../stores/uiStore";
+  import { imageService } from "../services/imageService";
+  import { panelService } from "../services/panelService";
+  import { exportService } from "../services/exportService";
   import type { Panel } from "../lib/types/panel";
 
   import AppHeader from "../components/AppHeader.svelte";
@@ -15,122 +15,68 @@
   let uploadedImage = $state<string | null>(null);
   let panels = $state<Panel[]>([]);
   let texts = $state<Array<{ id: string; text: string }>>([]);
-  let errorMessage = $state<string | null>(null);
   let backgroundImage = $state<string | null>(null);
 
   onMount(async () => {
-    // Загружаем фоновое изображение по умолчанию
     try {
-      const defaultBackground = "/backgrounds/b1.jpg";
-      const response = await fetch(defaultBackground);
-      if (!response.ok) throw new Error("Не удалось загрузить фоновое изображение");
-      const blob = await response.blob();
-      const reader = new FileReader();
-      reader.onload = () => {
-        backgroundImage = reader.result as string;
-      };
-      reader.readAsDataURL(blob);
+      backgroundImage = await imageService.loadDefaultBackground();
     } catch (error) {
-      console.error("Ошибка загрузки фонового изображения:", error);
-      errorMessage = "Не удалось загрузить фоновое изображение по умолчанию";
+      exportService.setErrorMessage("Не удалось загрузить фоновое изображение по умолчанию");
     }
   });
 
   function handleImageUpload(image: string) {
     uploadedImage = image;
-    errorMessage = null;
-    setCurrentStep("crop");
+    imageService.handleImageUpload(image);
   }
 
   function handleUploadNewImage() {
-    setCurrentStep("upload");
+    imageService.handleUploadNewImage();
   }
 
   function handleCropComplete(croppedImage: string) {
     backgroundImage = croppedImage;
-    // Обновляем все панели с новым фоновым изображением
-    panels = panels.map(panel => ({
-      ...panel,
-      backgroundImage: croppedImage,
-      updatedAt: new Date(),
-    }));
-    setCurrentStep("text");
+    uploadedImage = null;
+    imageService.handleCropComplete(croppedImage);
+    panels = panelService.updatePanelsBackground(panels, croppedImage);
+    panels = panelService.updatePanelsFromTexts(texts, panels, croppedImage);
   }
 
   function handleCropCancel() {
     uploadedImage = null;
-    setCurrentStep("text");
+    imageService.handleCropCancel();
   }
 
   function handleAddText(text: string) {
-    // Проверяем, что текст не пустой и не дублируется
-    if (!text.trim()) return;
-    if (texts.some(t => t.text === text)) return;
-    
-    texts = [...texts, { id: crypto.randomUUID(), text }];
-    updatePanelsFromTexts();
+    texts = panelService.addText(texts, text);
+    panels = panelService.updatePanelsFromTexts(texts, panels, backgroundImage!);
   }
 
   function handleUpdateText(id: string, newText: string) {
-    // Проверяем, что текст не пустой и не дублируется
-    if (!newText.trim()) return;
-    if (texts.some(t => t.id !== id && t.text === newText)) return;
-    
-    texts = texts.map(t => t.id === id ? { ...t, text: newText } : t);
-    updatePanelsFromTexts();
+    texts = panelService.updateText(texts, id, newText);
+    panels = panelService.updatePanelsFromTexts(texts, panels, backgroundImage!);
   }
 
   function handleDeleteText(id: string) {
-    texts = texts.filter(t => t.id !== id);
-    updatePanelsFromTexts();
-  }
-
-  function updatePanelsFromTexts() {
-    if (!backgroundImage) return;
-    panels = texts.map(textItem => {
-      const existingPanel = panels.find(p => p.texts[0]?.text === textItem.text);
-      if (existingPanel) {
-        return updatePanelText(existingPanel, textItem.text);
-      }
-      return createPanelFromText(backgroundImage!, textItem.text);
-    });
+    texts = panelService.deleteText(texts, id);
+    panels = panelService.updatePanelsFromTexts(texts, panels, backgroundImage!);
   }
 
   async function handleDownload(panel: Panel) {
-    try {
-      setLoading(true);
-      const result = await exportService.exportPanel(panel);
-
-      if (!result.success) {
-        errorMessage = result.error || "Ошибка экспорта панели";
-      }
-    } catch (error) {
-      errorMessage = error instanceof Error ? error.message : "Ошибка экспорта панели";
-    } finally {
-      setLoading(false);
-    }
+    await exportService.handleDownload(panel);
   }
 
   async function handleDownloadAll() {
-    try {
-      setLoading(true);
-      for (const panel of panels) {
-        await exportService.exportPanel(panel);
-      }
-    } catch (error) {
-      errorMessage = error instanceof Error ? error.message : "Ошибка экспорта панелей";
-    } finally {
-      setLoading(false);
-    }
+    await exportService.handleDownloadAll(panels);
   }
 </script>
 
 <div class="app-container">
   <AppHeader onUploadNewImage={handleUploadNewImage} />
 
-  {#if errorMessage}
+  {#if exportService.getErrorMessage()}
     <div class="error-message">
-      {errorMessage}
+      {exportService.getErrorMessage()}
     </div>
   {/if}