From 48c7d8876a4b695825cc271ac6e6c838242ed1f5 Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Thu, 19 Feb 2026 08:19:44 +0500
Subject: [PATCH] feat: add outline button and render text in canvas

---
 src/components/panel/Preview.svelte   |  4 ++--
 src/components/text/TextConfig.svelte |  4 +++-
 src/components/ui/Button.svelte       |  2 +-
 src/components/ui/Outline.svelte      | 17 +++++++++++++++++
 4 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 src/components/ui/Outline.svelte

diff --git a/src/components/panel/Preview.svelte b/src/components/panel/Preview.svelte
index a336814..13d359b 100644
--- a/src/components/panel/Preview.svelte
+++ b/src/components/panel/Preview.svelte
@@ -31,8 +31,8 @@
       {width}
       {height}
       fontSize={textConfigState.fontSize}
-      stroke={textConfigState.color}
-      fill="transparent"
+      stroke={textConfigState.outlined ? textConfigState.color : "transparent"}
+      fill={textConfigState.outlined ? "transparent" : textConfigState.color}
       fontFamily={textConfigState.fontFamily}
       align={textConfigState.align}
       wrap="none"
diff --git a/src/components/text/TextConfig.svelte b/src/components/text/TextConfig.svelte
index cd5494f..8e602f4 100644
--- a/src/components/text/TextConfig.svelte
+++ b/src/components/text/TextConfig.svelte
@@ -4,6 +4,7 @@
   import SettingsRow from "$components/layout/SettingsRow.svelte";
   import Alignment from "$components/ui/Alignment.svelte";
   import ColorPicker from "$components/ui/ColorPicker.svelte";
+  import Outline from "$components/ui/Outline.svelte";
   import RangeSlider from "$components/ui/RangeSlider.svelte";
   import SelectFont from "$components/ui/SelectFont.svelte";
   import { TYPOGRAPHY } from "$lib/constants";
@@ -23,8 +24,9 @@
     <SettingsRow label="Шрифт">
       <SelectFont bind:value={textConfigState.fontFamily} />
     </SettingsRow>
-    <SettingsRow label="Цвет">
+    <SettingsRow label="Цвет" noLabel={true}>
       <ColorPicker bind:value={textConfigState.color} />
+      <Outline bind:outlined={textConfigState.outlined} />
     </SettingsRow>
     <SettingsRow label="Выравнивание" noLabel={true}>
       <Alignment bind:align={textConfigState.align} />
diff --git a/src/components/ui/Button.svelte b/src/components/ui/Button.svelte
index 97d5e84..1418535 100644
--- a/src/components/ui/Button.svelte
+++ b/src/components/ui/Button.svelte
@@ -44,7 +44,7 @@
     --btn-main: var(--action-primary);
     --btn-hover: var(--action-primary-hover);
     padding: 10px 16px;
-    border: none;
+    border: 1px solid var(--btn-main);
     border-radius: var(--radius);
     font-size: 13px;
     font-weight: 500;
diff --git a/src/components/ui/Outline.svelte b/src/components/ui/Outline.svelte
new file mode 100644
index 0000000..148a03b
--- /dev/null
+++ b/src/components/ui/Outline.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import TypeOutline from "~icons/lucide/type-outline";
+  import Button from "./Button.svelte";
+
+  interface Props {
+    outlined: boolean;
+  }
+
+  let { outlined = $bindable(false) }: Props = $props();
+</script>
+
+<Button
+  icon={TypeOutline}
+  ariaLabel="toggle outline"
+  onclick={() => (outlined = !outlined)}
+  type={outlined ? "outline" : "primary"}
+/>