From cc6fae9a55ec9cfc1f431c7948c88c503f08481b Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Wed, 4 Feb 2026 18:41:43 +0500
Subject: [PATCH] fix: resolve text settings not applied

---
 src/components/text/TextManager.svelte | 35 ++++++++++-------------
 src/components/text/TextSection.svelte |  3 +-
 src/routes/+page.svelte                | 39 ++++++++++++++++++++++++--
 src/services/panelService.ts           | 11 ++++++--
 src/stores/panelStore.ts               | 33 +++++++++++++++++-----
 5 files changed, 87 insertions(+), 34 deletions(-)

diff --git a/src/components/text/TextManager.svelte b/src/components/text/TextManager.svelte
index a879686..d116c8b 100644
--- a/src/components/text/TextManager.svelte
+++ b/src/components/text/TextManager.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
   import Button from "$components/ui/Button.svelte";
+  import type { TextAlign, TextItem } from "$lib/types/panel";
+  import { textSettingsStore, updateAllTextSettings } from "$stores/panelStore";
 
   interface Props {
-    onTextAdd: (text: string) => void;
+    onTextAdd: (text: string, settings?: Partial<TextItem>) => void;
     onTextUpdate: (id: string, text: string) => void;
     onTextDelete: (id: string) => void;
     texts: Array<{ id: string; text: string }>;
@@ -13,15 +15,8 @@
   let newText = $state("");
   let errorMessage = $state<string | undefined>(undefined);
 
-  // Общие настройки текста для всех панелей
-  let commonTextSettings = $state({
-    fontSize: 18,
-    fontFamily: "Arial",
-    color: "#ffffff",
-    textAlign: "left",
-    paddingX: 10,
-    verticalOffset: 0,
-  });
+  // Use reactive store for text settings
+  let commonTextSettings = $derived($textSettingsStore);
 
   // Список доступных шрифтов
   const availableFonts = [
@@ -48,7 +43,7 @@
 
     try {
       errorMessage = undefined;
-      onTextAdd(newText.trim());
+      onTextAdd(newText.trim(), commonTextSettings);
       newText = "";
     } catch (error) {
       errorMessage = error instanceof Error ? error.message : "Ошибка добавления текста";
@@ -133,7 +128,7 @@
             step="1"
             value={commonTextSettings.fontSize}
             oninput={(e: Event) => {
-              commonTextSettings.fontSize = parseInt((e.target as HTMLInputElement).value);
+              updateAllTextSettings({ fontSize: parseInt((e.target as HTMLInputElement).value) });
             }}
           />
           <span class="value-display">{commonTextSettings.fontSize}px</span>
@@ -146,7 +141,7 @@
           <select
             value={commonTextSettings.fontFamily}
             onchange={(e) => {
-              commonTextSettings.fontFamily = (e.target as HTMLSelectElement).value;
+              updateAllTextSettings({ fontFamily: (e.target as HTMLSelectElement).value });
             }}
           >
             {#each availableFonts as font}
@@ -163,7 +158,7 @@
             type="color"
             value={commonTextSettings.color}
             oninput={(e) => {
-              commonTextSettings.color = (e.target as HTMLInputElement).value;
+              updateAllTextSettings({ color: (e.target as HTMLInputElement).value });
             }}
           />
         </label>
@@ -176,7 +171,7 @@
             <button
               class="align-btn {commonTextSettings.textAlign === 'left' ? 'active' : ''}"
               onclick={() => {
-                commonTextSettings.textAlign = "left";
+                updateAllTextSettings({ textAlign: "left" as TextAlign });
               }}
               aria-label="Выровнять по левому краю"
             >
@@ -185,7 +180,7 @@
             <button
               class="align-btn {commonTextSettings.textAlign === 'center' ? 'active' : ''}"
               onclick={() => {
-                commonTextSettings.textAlign = "center";
+                updateAllTextSettings({ textAlign: "center" as TextAlign });
               }}
               aria-label="Выровнять по центру"
             >
@@ -194,7 +189,7 @@
             <button
               class="align-btn {commonTextSettings.textAlign === 'right' ? 'active' : ''}"
               onclick={() => {
-                commonTextSettings.textAlign = "right";
+                updateAllTextSettings({ textAlign: "right" as TextAlign });
               }}
               aria-label="Выровнять по правому краю"
             >
@@ -214,7 +209,7 @@
             step="1"
             value={commonTextSettings.paddingX}
             oninput={(e) => {
-              commonTextSettings.paddingX = parseInt((e.target as HTMLInputElement).value);
+              updateAllTextSettings({ paddingX: parseInt((e.target as HTMLInputElement).value) });
             }}
           />
           <span class="value-display">{commonTextSettings.paddingX}px</span>
@@ -231,11 +226,11 @@
             step="1"
             value={commonTextSettings.verticalOffset}
             oninput={(e) => {
-              commonTextSettings.verticalOffset = parseInt((e.target as HTMLInputElement).value);
+              updateAllTextSettings({ verticalOffset: parseInt((e.target as HTMLInputElement).value) });
             }}
           />
           <span class="value-display"
-            >{commonTextSettings.verticalOffset > 0 ? "+" : ""}{commonTextSettings.verticalOffset}px</span
+            >{(commonTextSettings.verticalOffset ?? 0) > 0 ? "+" : ""}{commonTextSettings.verticalOffset ?? 0}px</span
           >
         </label>
       </div>
diff --git a/src/components/text/TextSection.svelte b/src/components/text/TextSection.svelte
index 5d8f3e0..ce27b96 100644
--- a/src/components/text/TextSection.svelte
+++ b/src/components/text/TextSection.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
+  import type { TextItem } from "$lib/types/panel";
   import TextManager from "./TextManager.svelte";
 
   interface Props {
     texts: Array<{ id: string; text: string }>;
-    onTextAdd: (text: string) => void;
+    onTextAdd: (text: string, settings?: Partial<TextItem>) => void;
     onTextUpdate: (id: string, text: string) => void;
     onTextDelete: (id: string) => void;
   }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f7d1638..c195993 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-  import type { Panel } from "$lib/types/panel";
+  import type { Panel, TextItem } from "$lib/types/panel";
   import { onMount } from "svelte";
   import { exportService } from "../services/exportService";
   import { imageService } from "../services/imageService";
   import { panelService } from "../services/panelService";
+  import { textSettingsStore } from "../stores/panelStore";
 
   import AppContainer from "../components/layout/AppContainer.svelte";
 
@@ -12,6 +13,38 @@
   let texts = $state<Array<{ id: string; text: string }>>([]);
   let backgroundImage = $state<string | undefined>(undefined);
 
+  // Create a derived store for text settings to avoid cyclic dependencies
+  let textSettings = $derived($textSettingsStore);
+
+  // Listen for text settings changes and update all panels
+  let previousSettings = $state<string>("");
+
+  $effect(() => {
+    // Only depend on the derived settings value
+    const currentSettings = textSettings;
+    const settingsString = JSON.stringify(currentSettings);
+
+    // Only update if settings actually changed
+    if (settingsString !== previousSettings) {
+      console.log("[SETTINGS] Applying text settings to all panels:", currentSettings);
+
+      // Update panels with new settings
+      const updatedPanels = panels.map((panel) => ({
+        ...panel,
+        text: { ...panel.text, ...currentSettings },
+      }));
+
+      // Use a microtask to avoid synchronous update issues
+      Promise.resolve().then(() => {
+        if (panels.length > 0) {
+          panels = updatedPanels;
+        }
+      });
+
+      previousSettings = settingsString;
+    }
+  });
+
   onMount(async () => {
     // Initialize with default texts for common Twitch panels
     console.log("[INIT] Creating default texts...");
@@ -62,9 +95,9 @@
     imageService.handleCropCancel();
   }
 
-  function handleAddText(text: string) {
+  function handleAddText(text: string, settings?: Partial<TextItem>) {
     texts = panelService.addText(texts, text);
-    panels = panelService.updatePanelsFromTexts(texts, panels, backgroundImage!);
+    panels = panelService.updatePanelsFromTexts(texts, panels, backgroundImage!, settings);
   }
 
   function handleUpdateText(id: string, newText: string) {
diff --git a/src/services/panelService.ts b/src/services/panelService.ts
index e15ca18..0077f7e 100644
--- a/src/services/panelService.ts
+++ b/src/services/panelService.ts
@@ -1,4 +1,4 @@
-import type { Panel } from "../lib/types/panel";
+import type { Panel, TextItem } from "../lib/types/panel";
 import { createPanelFromText, updatePanelText } from "../stores/panelStore";
 
 export class PanelService {
@@ -43,13 +43,18 @@ export class PanelService {
     return texts.filter((t) => t.id !== id);
   }
 
-  updatePanelsFromTexts(texts: Array<{ id: string; text: string }>, panels: Panel[], backgroundImage: string): Panel[] {
+  updatePanelsFromTexts(
+    texts: Array<{ id: string; text: string }>,
+    panels: Panel[],
+    backgroundImage: string,
+    textSettings?: Partial<TextItem>,
+  ): Panel[] {
     return texts.map((textItem) => {
       const existingPanel = panels.find((p) => p.text.text === textItem.text);
       if (existingPanel) {
         return updatePanelText(existingPanel, textItem.text);
       }
-      return createPanelFromText(backgroundImage, textItem.text);
+      return createPanelFromText(backgroundImage, textItem.text, 100, textSettings);
     });
   }
 
diff --git a/src/stores/panelStore.ts b/src/stores/panelStore.ts
index 2b1b1b0..2ec95ac 100644
--- a/src/stores/panelStore.ts
+++ b/src/stores/panelStore.ts
@@ -4,6 +4,20 @@ import { type Panel, type TextItem } from "../lib/types/panel";
 
 export const panelStore: Writable<Panel | undefined> = writable(undefined);
 
+// Store for common text settings that should apply to all texts
+export const textSettingsStore = writable<Partial<TextItem>>({
+  fontSize: 18,
+  fontFamily: "Arial",
+  color: "#ffffff",
+  textAlign: "left",
+  paddingX: 10,
+  verticalOffset: 0,
+});
+
+export const updateAllTextSettings = (settings: Partial<TextItem>) => {
+  textSettingsStore.update((current) => ({ ...current, ...settings }));
+};
+
 // Panel creation should go through panelService.updatePanelsFromTexts()
 // These functions are kept for backward compatibility but should be avoided
 export const createEmptyPanel = (height: number = 100): Panel => {
@@ -48,16 +62,21 @@ export const updateTextProperties = (panel: Panel, updates: Partial<TextItem>):
   });
 };
 
-export const createPanelFromText = (backgroundImage: string, text: string, height: number = 100): Panel => {
+export const createPanelFromText = (
+  backgroundImage: string,
+  text: string,
+  height: number = 100,
+  textSettings?: Partial<TextItem>,
+): Panel => {
   const newText: TextItem = {
     id: uuidv4(),
     text,
-    fontSize: 18,
-    fontFamily: "Arial",
-    color: "#ffffff",
-    textAlign: "center",
-    paddingX: 10,
-    verticalOffset: 0,
+    fontSize: textSettings?.fontSize ?? 18,
+    fontFamily: textSettings?.fontFamily ?? "Arial",
+    color: textSettings?.color ?? "#ffffff",
+    textAlign: textSettings?.textAlign ?? "center",
+    paddingX: textSettings?.paddingX ?? 10,
+    verticalOffset: textSettings?.verticalOffset ?? 0,
   };
 
   return {