refactor: pick out magic numbers to constants
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import Button from "$components/ui/Button.svelte";
|
||||
import { PANEL_SETTINGS, TYPOGRAPHY, UI_SETTINGS } from "$lib/constants";
|
||||
import type { Panel, TextItem } from "$lib/types/panel";
|
||||
import { setCurrentStep } from "$stores/uiStore";
|
||||
import type { Stage as KonvaStage } from "konva/lib/Stage";
|
||||
@@ -23,7 +24,7 @@
|
||||
});
|
||||
|
||||
function handleUploadNewImage() {
|
||||
setCurrentStep("upload");
|
||||
setCurrentStep(UI_SETTINGS.STEPS.UPLOAD);
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
@@ -63,7 +64,7 @@
|
||||
}
|
||||
|
||||
function getTextPosition(textItem: TextItem) {
|
||||
const panelWidth = 320;
|
||||
const panelWidth = PANEL_SETTINGS.PANEL_WIDTH;
|
||||
const paddingX = textItem.paddingX || 20;
|
||||
const verticalOffset = textItem.verticalOffset || 0;
|
||||
const centerY = panel.height / 2 + verticalOffset;
|
||||
@@ -95,10 +96,10 @@
|
||||
<div class="preview-sections">
|
||||
<div class="preview-section">
|
||||
<div class="canvas-container">
|
||||
<Stage width={320} height={panel.height} bind:this={stageComponent}>
|
||||
<Stage width={PANEL_SETTINGS.PANEL_WIDTH} height={panel.height} bind:this={stageComponent}>
|
||||
<Layer>
|
||||
{#if backgroundImage}
|
||||
<Image image={backgroundImage} width={320} height={panel.height} />
|
||||
<Image image={backgroundImage} width={PANEL_SETTINGS.PANEL_WIDTH} height={panel.height} />
|
||||
{/if}
|
||||
</Layer>
|
||||
|
||||
@@ -108,12 +109,12 @@
|
||||
|
||||
<Text
|
||||
text={panel.text.text}
|
||||
fontSize={panel.text.fontSize || 24}
|
||||
fill={panel.text.color || "#ffffff"}
|
||||
fontSize={panel.text.fontSize || TYPOGRAPHY.FONT_SIZE_DEFAULT}
|
||||
fill={panel.text.color || TYPOGRAPHY.TEXT_COLOR_DEFAULT}
|
||||
fontFamily={panel.text.fontFamily || "Arial"}
|
||||
x={textPosition.x}
|
||||
y={textPosition.y}
|
||||
align={panel.text.textAlign || "center"}
|
||||
align={panel.text.textAlign || TYPOGRAPHY.TEXT_ALIGN_CENTER}
|
||||
width={300}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import Button from "$components/ui/Button.svelte";
|
||||
import { TYPOGRAPHY } from "$lib/constants";
|
||||
import type { TextAlign, TextItem } from "$lib/types/panel";
|
||||
import { textSettingsStore, updateAllTextSettings } from "$stores/panelStore";
|
||||
|
||||
@@ -17,16 +18,7 @@
|
||||
|
||||
let commonTextSettings = $derived($textSettingsStore);
|
||||
|
||||
const availableFonts = [
|
||||
"Arial",
|
||||
"Verdana",
|
||||
"Georgia",
|
||||
"Times New Roman",
|
||||
"Courier New",
|
||||
"Impact",
|
||||
"Comic Sans MS",
|
||||
"Trebuchet MS",
|
||||
];
|
||||
const availableFonts = TYPOGRAPHY.FONT_FAMILIES;
|
||||
|
||||
function handleAddText() {
|
||||
if (!newText.trim()) {
|
||||
@@ -34,8 +26,8 @@
|
||||
return;
|
||||
}
|
||||
|
||||
if (newText.length > 100) {
|
||||
errorMessage = "Текст не должен превышать 100 символов";
|
||||
if (newText.length > TYPOGRAPHY.MAX_TEXT_LENGTH) {
|
||||
errorMessage = `Текст не должен превышать ${TYPOGRAPHY.MAX_TEXT_LENGTH} символов`;
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -75,7 +67,7 @@
|
||||
bind:value={newText}
|
||||
placeholder="Введите текст для панели (например: links, about me, projects...)"
|
||||
class="text-input"
|
||||
maxlength="100"
|
||||
maxlength={TYPOGRAPHY.MAX_TEXT_LENGTH}
|
||||
onkeypress={handleKeyPress}
|
||||
/>
|
||||
<Button variant="primary" onclick={handleAddText}>Добавить</Button>
|
||||
@@ -98,7 +90,7 @@
|
||||
value={textItem.text}
|
||||
oninput={(e) => handleUpdateText(textItem.id, e.currentTarget.value)}
|
||||
class="text-edit-input"
|
||||
maxlength="100"
|
||||
maxlength={TYPOGRAPHY.MAX_TEXT_LENGTH}
|
||||
/>
|
||||
<Button variant="danger" size="sm" onclick={() => handleDeleteText(textItem.id)} aria-label="Удалить текст">
|
||||
×
|
||||
@@ -119,8 +111,8 @@
|
||||
Размер шрифта:
|
||||
<input
|
||||
type="range"
|
||||
min="10"
|
||||
max="72"
|
||||
min={TYPOGRAPHY.FONT_SIZE_MIN}
|
||||
max={TYPOGRAPHY.FONT_SIZE_MAX}
|
||||
step="1"
|
||||
value={commonTextSettings.fontSize}
|
||||
oninput={(e: Event) => {
|
||||
@@ -201,7 +193,7 @@
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="50"
|
||||
max={TYPOGRAPHY.PADDING_X_MAX}
|
||||
step="1"
|
||||
value={commonTextSettings.paddingX}
|
||||
oninput={(e) => {
|
||||
@@ -217,8 +209,8 @@
|
||||
Смещение от центра:
|
||||
<input
|
||||
type="range"
|
||||
min="-50"
|
||||
max="50"
|
||||
min={TYPOGRAPHY.VERTICAL_OFFSET_MIN}
|
||||
max={TYPOGRAPHY.VERTICAL_OFFSET_MAX}
|
||||
step="1"
|
||||
value={commonTextSettings.verticalOffset}
|
||||
oninput={(e) => {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { PANEL_SETTINGS, TYPOGRAPHY } from "$lib/constants";
|
||||
import type { TextItem } from "$lib/types/panel";
|
||||
import { panelStore } from "$stores/panelStore";
|
||||
import { Image, Layer, Stage, Text } from "svelte-konva";
|
||||
@@ -28,17 +29,17 @@
|
||||
}
|
||||
|
||||
function getTextPosition() {
|
||||
const panelWidth = 320;
|
||||
const panelWidth = PANEL_SETTINGS.PANEL_WIDTH;
|
||||
const paddingX = textItem.paddingX || 0;
|
||||
const verticalOffset = textItem.verticalOffset || 0;
|
||||
const centerY = height / 2 + verticalOffset;
|
||||
|
||||
switch (textItem.textAlign) {
|
||||
case "left":
|
||||
case TYPOGRAPHY.TEXT_ALIGN_LEFT:
|
||||
return { x: paddingX, y: centerY };
|
||||
case "right":
|
||||
case TYPOGRAPHY.TEXT_ALIGN_RIGHT:
|
||||
return { x: panelWidth - paddingX, y: centerY };
|
||||
case "center":
|
||||
case TYPOGRAPHY.TEXT_ALIGN_CENTER:
|
||||
default:
|
||||
return { x: panelWidth / 2, y: centerY };
|
||||
}
|
||||
@@ -50,9 +51,9 @@
|
||||
<div class="text-preview">
|
||||
{#if bgImage}
|
||||
<div class="canvas-container">
|
||||
<Stage width={320} {height}>
|
||||
<Stage width={PANEL_SETTINGS.PANEL_WIDTH} {height}>
|
||||
<Layer>
|
||||
<Image image={bgImage} width={320} {height} />
|
||||
<Image image={bgImage} width={PANEL_SETTINGS.PANEL_WIDTH} {height} />
|
||||
<Text
|
||||
text={textItem.text}
|
||||
fontSize={textItem.fontSize}
|
||||
@@ -62,7 +63,11 @@
|
||||
y={textPosition.y}
|
||||
align={textItem.textAlign}
|
||||
width={320 - textItem.paddingX * 2}
|
||||
offsetX={textItem.textAlign === "center" ? 0 : textItem.textAlign === "right" ? 0 : 0}
|
||||
offsetX={textItem.textAlign === TYPOGRAPHY.TEXT_ALIGN_CENTER
|
||||
? 0
|
||||
: textItem.textAlign === TYPOGRAPHY.TEXT_ALIGN_RIGHT
|
||||
? 0
|
||||
: 0}
|
||||
/>
|
||||
</Layer>
|
||||
</Stage>
|
||||
|
||||
Reference in New Issue
Block a user