fix: remove old components
This commit is contained in:
@@ -1,173 +0,0 @@
|
||||
<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";
|
||||
import { Image, Layer, Stage, Text } from "svelte-konva";
|
||||
|
||||
interface Props {
|
||||
panel: Panel;
|
||||
onDownload?: (panel: Panel, konvaStage: KonvaStage) => void;
|
||||
}
|
||||
|
||||
let { panel, onDownload }: Props = $props();
|
||||
|
||||
let backgroundImage: HTMLImageElement | undefined = $state(undefined);
|
||||
let konvaStage: KonvaStage | null = $state(null);
|
||||
let stageComponent: any = $state(null);
|
||||
|
||||
$effect(() => {
|
||||
if (stageComponent) {
|
||||
konvaStage = stageComponent.node;
|
||||
}
|
||||
});
|
||||
|
||||
function handleUploadNewImage() {
|
||||
setCurrentStep(UI_SETTINGS.STEPS.UPLOAD);
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (panel?.backgroundImage && panel.backgroundImage !== backgroundImage?.src) {
|
||||
loadImage(panel.backgroundImage);
|
||||
}
|
||||
});
|
||||
|
||||
function loadImage(src: string) {
|
||||
const img = document.createElement("img");
|
||||
img.onload = () => {
|
||||
backgroundImage = img;
|
||||
};
|
||||
img.onerror = (error) => {
|
||||
console.error("[PanelPreview] Failed to load background image");
|
||||
};
|
||||
img.src = src;
|
||||
}
|
||||
|
||||
function handleDownload() {
|
||||
let stageToUse = konvaStage;
|
||||
|
||||
if (!stageToUse && stageComponent) {
|
||||
stageToUse = stageComponent.node || stageComponent.stage || stageComponent._stage || stageComponent;
|
||||
|
||||
if (stageToUse && typeof stageToUse.toBlob === "function") {
|
||||
} else {
|
||||
if (typeof stageComponent.toBlob === "function") {
|
||||
stageToUse = stageComponent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (onDownload && stageToUse) {
|
||||
onDownload(panel, stageToUse);
|
||||
}
|
||||
}
|
||||
|
||||
function getTextPosition(textItem: TextItem) {
|
||||
const panelWidth = PANEL_SETTINGS.PANEL_WIDTH;
|
||||
const paddingX = textItem.paddingX;
|
||||
const verticalOffset = textItem.verticalOffset;
|
||||
const centerY = panel.height / 2 + verticalOffset;
|
||||
const textWidth = panelWidth - paddingX * 2;
|
||||
|
||||
let position;
|
||||
switch (textItem.textAlign) {
|
||||
case "left":
|
||||
position = { x: paddingX, y: centerY };
|
||||
break;
|
||||
case "right":
|
||||
position = { x: panelWidth - textWidth - paddingX, y: centerY };
|
||||
break;
|
||||
case "center":
|
||||
default:
|
||||
position = { x: (panelWidth - textWidth) / 2, y: centerY };
|
||||
break;
|
||||
}
|
||||
|
||||
return position;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="panel-preview">
|
||||
<div class="preview-header">
|
||||
<div class="panel-title">{panel.text?.text || "Без названия"}</div>
|
||||
<Button variant="primary" size="sm" onclick={handleDownload}>Скачать</Button>
|
||||
</div>
|
||||
<div class="preview-sections">
|
||||
<div class="preview-section">
|
||||
<div class="canvas-container">
|
||||
<Stage width={PANEL_SETTINGS.PANEL_WIDTH} height={panel.height} bind:this={stageComponent}>
|
||||
<Layer>
|
||||
{#if backgroundImage}
|
||||
<Image image={backgroundImage} width={PANEL_SETTINGS.PANEL_WIDTH} height={panel.height} />
|
||||
{/if}
|
||||
</Layer>
|
||||
|
||||
<Layer>
|
||||
{#if panel.text}
|
||||
{@const textPosition = getTextPosition(panel.text)}
|
||||
|
||||
<Text
|
||||
text={panel.text.text}
|
||||
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 || TYPOGRAPHY.TEXT_ALIGN_CENTER}
|
||||
width={PANEL_SETTINGS.PANEL_WIDTH - textPosition.x * 2}
|
||||
offsetX={0}
|
||||
/>
|
||||
{/if}
|
||||
</Layer>
|
||||
</Stage>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.panel-preview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.preview-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.preview-sections {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.preview-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.canvas-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
background: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,66 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { Panel } from "$lib/types/panel";
|
||||
import type { Stage as KonvaStage } from "konva/lib/Stage";
|
||||
import Button from "../ui/Button.svelte";
|
||||
import PanelPreview from "./PanelPreview.svelte";
|
||||
|
||||
interface Props {
|
||||
panels: Panel[];
|
||||
onDownload: (panel: Panel, konvaStage: KonvaStage) => void;
|
||||
onDownloadAll: () => void;
|
||||
}
|
||||
let { panels, onDownload, onDownloadAll }: Props = $props();
|
||||
</script>
|
||||
|
||||
{#if panels.length > 0}
|
||||
<div class="panels-container">
|
||||
<div class="panels-header">
|
||||
<h2>Созданные панели ({panels.length})</h2>
|
||||
<Button variant="primary" onclick={onDownloadAll}>Скачать все</Button>
|
||||
</div>
|
||||
<div class="panels-list">
|
||||
{#each panels as panel (panel.id)}
|
||||
<div class="panel-item">
|
||||
<PanelPreview {panel} onDownload={(panel, konvaStage) => onDownload(panel, konvaStage)} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.panels-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.panels-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.panels-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.panels-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.panel-item {
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user