From 2702a58d8a11cad040f9150f4536471c18bca7e5 Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Wed, 4 Feb 2026 01:11:36 +0500
Subject: [PATCH] fix: update console output

---
 src/components/ImageCropper.svelte |  16 ----
 src/components/ImageUpload.svelte  |   8 +-
 src/components/PanelPreview.svelte |  72 ++++++++++++++++--
 src/components/TextManager.svelte  |  11 ++-
 src/components/TextPreview.svelte  | 115 +++++++++++++++++++++++++++++
 src/lib/fonts.ts                   |   3 -
 src/routes/+page.svelte            |   3 -
 7 files changed, 192 insertions(+), 36 deletions(-)
 create mode 100644 src/components/TextPreview.svelte

diff --git a/src/components/ImageCropper.svelte b/src/components/ImageCropper.svelte
index ca9478b..fa7ab1d 100644
--- a/src/components/ImageCropper.svelte
+++ b/src/components/ImageCropper.svelte
@@ -10,12 +10,8 @@
 
   onMount(async () => {
     if (browser) {
-      console.log("Loading cropperjs module");
       const cropperModule = await import("cropperjs");
-      console.log("cropperjs module loaded:", cropperModule);
       Cropper = cropperModule.default || cropperModule;
-      console.log("Cropper class:", Cropper);
-      console.log("Cropper.getCroppedCanvas:", typeof Cropper?.prototype?.getCroppedCanvas);
       
       // Импортируем стили только на клиенте
 
@@ -50,11 +46,9 @@
   function initializeCropper() {
     console.log("initializeCropper called, imageElement:", !!imageElement, "Cropper:", !!Cropper);
     if (!imageElement || !Cropper) {
-      console.error("Cannot initialize cropper: imageElement:", !!imageElement, "Cropper:", !!Cropper);
       return;
     }
 
-    console.log("Creating new Cropper instance");
     cropper = new Cropper(imageElement, {
       aspectRatio: NaN, // Allow any aspect ratio
       viewMode: 1,
@@ -71,15 +65,10 @@
       minCropBoxHeight: 50,
       responsive: true,
     });
-    console.log("Cropper instance created:", cropper);
-    console.log("cropper.getCroppedCanvas:", typeof cropper?.getCroppedCanvas);
-    console.log("cropper methods:", Object.getOwnPropertyNames(Object.getPrototypeOf(cropper)));
   }
 
   async function handleCrop() {
-    console.log("handleCrop called, cropper:", cropper);
     if (!cropper) {
-      console.error("Cropper is not initialized");
       return;
     }
 
@@ -103,9 +92,6 @@
         imageSmoothingEnabled: true,
         imageSmoothingQuality: "high",
       });
-      console.log("Canvas result:", canvas);
-      console.log("Canvas type:", typeof canvas);
-      console.log("Canvas.toDataURL:", typeof canvas?.toDataURL);
 
       if (!canvas) {
         throw new Error("Не удалось получить canvas");
@@ -113,7 +99,6 @@
 
       // Теперь canvas - это обычный HTMLCanvasElement
       const croppedImage = canvas.toDataURL("image/png");
-      console.log("Cropped image:", croppedImage);
 
       // Validate cropped image
       const cropResult: ImageCropResult = {
@@ -124,7 +109,6 @@
       onCropComplete(croppedImage);
     } catch (error) {
       errorMessage = error instanceof Error ? error.message : "Ошибка обрезки изображения";
-      console.error("Crop error:", error);
     } finally {
       isProcessing = false;
       setLoading(false);
diff --git a/src/components/ImageUpload.svelte b/src/components/ImageUpload.svelte
index 997de21..62c3f0a 100644
--- a/src/components/ImageUpload.svelte
+++ b/src/components/ImageUpload.svelte
@@ -68,17 +68,13 @@
   }
 
   async function handleFileUpload(file: File) {
-    console.log("handleFileUpload called with file:", file.name, "size:", file.size);
     try {
       setLoading(true);
       clearError();
-      console.log("Calling imageService.handleFileUpload");
       const result: ImageUploadResult = await imageService.handleFileUpload(file);
-      console.log("Image upload result - success:", result.success, "has image:", !!result.image);
 
       if (result.success && result.image) {
         uploadedImage = result.image;
-        console.log("Calling onImageSelect with image length:", result.image.length);
         onImageSelect(result.image);
         setCurrentStep("crop");
       } else {
@@ -102,7 +98,7 @@
 
       if (result.success && result.image) {
         uploadedImage = result.image;
-        console.log("Calling onImageSelect with image length:", result.image.length);
+
         onImageSelect(result.image);
         setCurrentStep("crop");
       } else {
@@ -128,7 +124,7 @@
 
       if (result.success && result.image) {
         uploadedImage = result.image;
-        console.log("Calling onImageSelect with image length:", result.image.length);
+
         onImageSelect(result.image);
         setCurrentStep("crop");
         showUrlInput = false;
diff --git a/src/components/PanelPreview.svelte b/src/components/PanelPreview.svelte
index 0d49860..58718bd 100644
--- a/src/components/PanelPreview.svelte
+++ b/src/components/PanelPreview.svelte
@@ -48,6 +48,23 @@
       onDownload();
     }
   }
+
+  function getTextPosition(textItem: any) {
+    const panelWidth = 320;
+    const paddingX = textItem.paddingX || 0;
+    const verticalOffset = textItem.verticalOffset || 0;
+    const centerY = currentPanel!.height / 2 + verticalOffset;
+
+    switch (textItem.textAlign) {
+      case "left":
+        return { x: paddingX, y: centerY };
+      case "right":
+        return { x: panelWidth - paddingX, y: centerY };
+      case "center":
+      default:
+        return { x: panelWidth / 2, y: centerY };
+    }
+  }
 </script>
 
 <div class="panel-preview">
@@ -61,8 +78,30 @@
   </div>
 
   {#if currentPanel && Stage}
-    <div class="canvas-container">
-      <Stage width={320} height={currentPanel.height}>
+    <div class="preview-sections">
+      <!-- Превью чистой картинки -->
+      <div class="preview-section">
+        <h3>Чистая картинка</h3>
+        <div class="canvas-container">
+          <Stage width={320} height={currentPanel.height}>
+            <Layer>
+              {#if backgroundImage}
+                <Image
+                  image={backgroundImage}
+                  width={320}
+                  height={currentPanel.height}
+                />
+              {/if}
+            </Layer>
+          </Stage>
+        </div>
+      </div>
+
+      <!-- Превью с текстом -->
+      <div class="preview-section">
+        <h3>С текстом</h3>
+        <div class="canvas-container">
+          <Stage width={320} height={currentPanel.height}>
         <Layer>
           {#if backgroundImage}
             <Image
@@ -72,19 +111,22 @@
             />
           {/if}
           {#each currentPanel.texts as textItem (textItem.id)}
+            {@const textPosition = getTextPosition(textItem)}
             <Text
               text={textItem.text}
               fontSize={textItem.fontSize}
               fill={textItem.color}
               fontFamily={textItem.fontFamily}
-              x={textItem.x}
-              y={textItem.y}
-              align="center"
-              width={320}
+              x={textPosition.x}
+              y={textPosition.y}
+              align={textItem.textAlign}
+              width={320 - (textItem.paddingX * 2)}
             />
           {/each}
         </Layer>
       </Stage>
+        </div>
+      </div>
     </div>
   {:else}
     <div class="empty-state">
@@ -118,6 +160,24 @@
     font-size: 1.5rem;
   }
 
+  .preview-sections {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .preview-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .preview-section h3 {
+    margin: 0;
+    color: #333;
+    font-size: 1.25rem;
+  }
+
   .canvas-container {
     display: flex;
     justify-content: center;
diff --git a/src/components/TextManager.svelte b/src/components/TextManager.svelte
index 0590fd6..e4efff6 100644
--- a/src/components/TextManager.svelte
+++ b/src/components/TextManager.svelte
@@ -3,6 +3,7 @@
   import { panelStore, addTextToPanel, updateTextInPanel, removeTextFromPanel } from "../stores/panelStore";
   import type { TextItem } from "../lib/types/panel";
   import { v4 as uuidv4 } from "uuid";
+  import TextPreview from "./TextPreview.svelte";
 
   let { onTextUpdate }: {
     onTextUpdate: (texts: TextItem[]) => void;
@@ -265,7 +266,7 @@
     <div class="text-list">
       {#each currentPanel.texts as textItem (textItem.id)}
         <div class="text-item">
-          <div class="text-preview">
+          <div class="text-info">
             <span class="text-content">{textItem.text}</span>
             <button
               class="btn-icon btn-delete"
@@ -275,6 +276,12 @@
               ×
             </button>
           </div>
+          {#if currentPanel?.backgroundImage}
+            <TextPreview
+              textItem={textItem}
+              height={currentPanel.height}
+            />
+          {/if}
         </div>
       {/each}
     </div>
@@ -413,7 +420,7 @@
     transition: all 0.3s ease;
   }
 
-  .text-preview {
+  .text-info {
     display: flex;
     justify-content: space-between;
     align-items: center;
diff --git a/src/components/TextPreview.svelte b/src/components/TextPreview.svelte
new file mode 100644
index 0000000..981cddb
--- /dev/null
+++ b/src/components/TextPreview.svelte
@@ -0,0 +1,115 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { browser } from "$app/environment";
+  import type { TextItem } from "../lib/types/panel";
+  import { panelStore } from "../stores/panelStore";
+
+  let {
+    textItem,
+    height,
+  }: {
+    textItem: TextItem;
+    height: number;
+  } = $props();
+
+  let Stage: any;
+  let Layer: any;
+  let Image: any;
+  let Text: any;
+  let bgImage: HTMLImageElement | undefined = $state(undefined);
+  let currentPanel = $state($panelStore);
+
+  onMount(async () => {
+    if (browser) {
+      const svelteKonva = await import("svelte-konva");
+      Stage = svelteKonva.Stage;
+      Layer = svelteKonva.Layer;
+      Image = svelteKonva.Image;
+      Text = svelteKonva.Text;
+    }
+  });
+
+  $effect(() => {
+    if (currentPanel?.backgroundImage) {
+      loadImage(currentPanel.backgroundImage);
+    }
+  });
+
+  function loadImage(src: string) {
+    const img = new Image();
+    img.onload = () => {
+      bgImage = img;
+    };
+    img.src = src;
+  }
+
+  // Вычисляем позицию текста на основе выравнивания и отступов
+  function getTextPosition() {
+    const panelWidth = 320;
+    const paddingX = textItem.paddingX || 0;
+    const verticalOffset = textItem.verticalOffset || 0;
+    const centerY = height / 2 + verticalOffset;
+
+    switch (textItem.textAlign) {
+      case "left":
+        return { x: paddingX, y: centerY };
+      case "right":
+        return { x: panelWidth - paddingX, y: centerY };
+      case "center":
+      default:
+        return { x: panelWidth / 2, y: centerY };
+    }
+  }
+
+  let textPosition = $derived(getTextPosition());
+</script>
+
+<div class="text-preview">
+  {#if Stage && bgImage}
+    <div class="canvas-container">
+      <Stage width={320} {height}>
+        <Layer>
+          <Image image={bgImage} width={320} {height} />
+          <Text
+            text={textItem.text}
+            fontSize={textItem.fontSize}
+            fill={textItem.color}
+            fontFamily={textItem.fontFamily}
+            x={textPosition.x}
+            y={textPosition.y}
+            align={textItem.textAlign}
+            width={320 - textItem.paddingX * 2}
+            offsetX={textItem.textAlign === "center" ? 0 : textItem.textAlign === "right" ? 0 : 0}
+          />
+        </Layer>
+      </Stage>
+    </div>
+  {:else}
+    <div class="loading">Загрузка...</div>
+  {/if}
+</div>
+
+<style>
+  .text-preview {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .canvas-container {
+    display: flex;
+    justify-content: center;
+    padding: 1rem;
+    background: #f5f5f5;
+    border-radius: 8px;
+    border: 2px solid #e9ecef;
+  }
+
+  .loading {
+    text-align: center;
+    padding: 2rem;
+    color: #666;
+    background: #f9f9f9;
+    border-radius: 8px;
+  }
+</style>
diff --git a/src/lib/fonts.ts b/src/lib/fonts.ts
index 65fa402..9036f8b 100644
--- a/src/lib/fonts.ts
+++ b/src/lib/fonts.ts
@@ -5,9 +5,7 @@ import { join } from "path";
 export function loadFonts() {
   try {
     const fontsDir = join(process.cwd(), "static", "fonts");
-    console.log(fontsDir);
     const files = readdirSync(fontsDir);
-    console.log(files);
 
     let fonts = files
       .filter((file) => /\.(woff2|woff|ttf|otf)$/i.test(file))
@@ -20,7 +18,6 @@ export function loadFonts() {
 
     return fonts;
   } catch (error) {
-    console.log("err");
     return [];
   }
 }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 237e7d3..6231b7b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -44,12 +44,9 @@
   });
 
   function handleImageUpload(image: string) {
-    console.log("handleImageUpload called with image length:", image.length);
     uploadedImage = image;
     errorMessage = null;
-    console.log("Setting current step to crop");
     setCurrentStep("crop");
-    console.log("Current step after setting:", $uiStore.currentStep);
   }
 
   function handleCropComplete(croppedImage: string) {