fix: update console output

2026-02-04 01:11:36 +05:00
parent c18e0a6574
commit 2702a58d8a
7 changed files with 192 additions and 36 deletions
@@ -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>