Ku6epXBOCTuK/twitch-panels
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update console output

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-02-04 01:11:36 +05:00
parent c18e0a6574
commit 2702a58d8a
7 changed files with 192 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ImageCropper.svelte
-16
View File
@@ -10,12 +10,8 @@
onMount(async () => {
if (browser) {
console.log("Loading cropperjs module");
const cropperModule = await import("cropperjs");
console.log("cropperjs module loaded:", cropperModule);
Cropper = cropperModule.default || cropperModule;
console.log("Cropper class:", Cropper);
console.log("Cropper.getCroppedCanvas:", typeof Cropper?.prototype?.getCroppedCanvas);
// Импортируем стили только на клиенте
@@ -50,11 +46,9 @@
function initializeCropper() {
console.log("initializeCropper called, imageElement:", !!imageElement, "Cropper:", !!Cropper);
if (!imageElement || !Cropper) {
console.error("Cannot initialize cropper: imageElement:", !!imageElement, "Cropper:", !!Cropper);
return;
}
console.log("Creating new Cropper instance");
cropper = new Cropper(imageElement, {
aspectRatio: NaN, // Allow any aspect ratio
viewMode: 1,
@@ -71,15 +65,10 @@
minCropBoxHeight: 50,
responsive: true,
});
console.log("Cropper instance created:", cropper);
console.log("cropper.getCroppedCanvas:", typeof cropper?.getCroppedCanvas);
console.log("cropper methods:", Object.getOwnPropertyNames(Object.getPrototypeOf(cropper)));
}
async function handleCrop() {
console.log("handleCrop called, cropper:", cropper);
if (!cropper) {
console.error("Cropper is not initialized");
return;
}
@@ -103,9 +92,6 @@
imageSmoothingEnabled: true,
imageSmoothingQuality: "high",
});
console.log("Canvas result:", canvas);
console.log("Canvas type:", typeof canvas);
console.log("Canvas.toDataURL:", typeof canvas?.toDataURL);
if (!canvas) {
throw new Error("Не удалось получить canvas");
@@ -113,7 +99,6 @@
// Теперь canvas - это обычный HTMLCanvasElement
const croppedImage = canvas.toDataURL("image/png");
console.log("Cropped image:", croppedImage);
// Validate cropped image
const cropResult: ImageCropResult = {
@@ -124,7 +109,6 @@
onCropComplete(croppedImage);
} catch (error) {
errorMessage = error instanceof Error ? error.message : "Ошибка обрезки изображения";
console.error("Crop error:", error);
} finally {
isProcessing = false;
setLoading(false);
src/components/ImageUpload.svelte
+2 -6
View File
@@ -68,17 +68,13 @@
}
async function handleFileUpload(file: File) {
console.log("handleFileUpload called with file:", file.name, "size:", file.size);
try {
setLoading(true);
clearError();
console.log("Calling imageService.handleFileUpload");
const result: ImageUploadResult = await imageService.handleFileUpload(file);
console.log("Image upload result - success:", result.success, "has image:", !!result.image);
if (result.success && result.image) {
uploadedImage = result.image;
console.log("Calling onImageSelect with image length:", result.image.length);
onImageSelect(result.image);
setCurrentStep("crop");
} else {
@@ -102,7 +98,7 @@
if (result.success && result.image) {
uploadedImage = result.image;
console.log("Calling onImageSelect with image length:", result.image.length);
onImageSelect(result.image);
setCurrentStep("crop");
} else {
@@ -128,7 +124,7 @@
if (result.success && result.image) {
uploadedImage = result.image;
console.log("Calling onImageSelect with image length:", result.image.length);
onImageSelect(result.image);
setCurrentStep("crop");
showUrlInput = false;
src/components/PanelPreview.svelte
+66 -6
View File
@@ -48,6 +48,23 @@
onDownload();
}
}
function getTextPosition(textItem: any) {
const panelWidth = 320;
const paddingX = textItem.paddingX || 0;
const verticalOffset = textItem.verticalOffset || 0;
const centerY = currentPanel!.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 };
}
}
</script>
<div class="panel-preview">
@@ -61,8 +78,30 @@
</div>
{#if currentPanel && Stage}
<div class="canvas-container">
<Stage width={320} height={currentPanel.height}>
<div class="preview-sections">
<!-- Превью чистой картинки -->
<div class="preview-section">
<h3>Чистая картинка</h3>
<div class="canvas-container">
<Stage width={320} height={currentPanel.height}>
<Layer>
{#if backgroundImage}
<Image
image={backgroundImage}
width={320}
height={currentPanel.height}
/>
{/if}
</Layer>
</Stage>
</div>
</div>
<!-- Превью с текстом -->
<div class="preview-section">
<h3>С текстом</h3>
<div class="canvas-container">
<Stage width={320} height={currentPanel.height}>
<Layer>
{#if backgroundImage}
<Image
@@ -72,19 +111,22 @@
/>
{/if}
{#each currentPanel.texts as textItem (textItem.id)}
{@const textPosition = getTextPosition(textItem)}
<Text
text={textItem.text}
fontSize={textItem.fontSize}
fill={textItem.color}
fontFamily={textItem.fontFamily}
x={textItem.x}
y={textItem.y}
align="center"
width={320}
x={textPosition.x}
y={textPosition.y}
align={textItem.textAlign}
width={320 - (textItem.paddingX * 2)}
/>
{/each}
</Layer>
</Stage>
</div>
</div>
</div>
{:else}
<div class="empty-state">
@@ -118,6 +160,24 @@
font-size: 1.5rem;
}
.preview-sections {
display: flex;
flex-direction: column;
gap: 2rem;
}
.preview-section {
display: flex;
flex-direction: column;
gap: 1rem;
}
.preview-section h3 {
margin: 0;
color: #333;
font-size: 1.25rem;
}
.canvas-container {
display: flex;
justify-content: center;
src/components/TextManager.svelte
+9 -2
View File
@@ -3,6 +3,7 @@
import { panelStore, addTextToPanel, updateTextInPanel, removeTextFromPanel } from "../stores/panelStore";
import type { TextItem } from "../lib/types/panel";
import { v4 as uuidv4 } from "uuid";
import TextPreview from "./TextPreview.svelte";
let { onTextUpdate }: {
onTextUpdate: (texts: TextItem[]) => void;
@@ -265,7 +266,7 @@
<div class="text-list">
{#each currentPanel.texts as textItem (textItem.id)}
<div class="text-item">
<div class="text-preview">
<div class="text-info">
<span class="text-content">{textItem.text}</span>
<button
class="btn-icon btn-delete"
@@ -275,6 +276,12 @@
×
</button>
</div>
{#if currentPanel?.backgroundImage}
<TextPreview
textItem={textItem}
height={currentPanel.height}
/>
{/if}
</div>
{/each}
</div>
@@ -413,7 +420,7 @@
transition: all 0.3s ease;
}
.text-preview {
.text-info {
display: flex;
justify-content: space-between;
align-items: center;
src/components/TextPreview.svelte
+115
View File
@@ -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>
src/lib/fonts.ts
-3
View File
@@ -5,9 +5,7 @@ import { join } from "path";
export function loadFonts() {
try {
const fontsDir = join(process.cwd(), "static", "fonts");
console.log(fontsDir);
const files = readdirSync(fontsDir);
console.log(files);
let fonts = files
.filter((file) => /\.(woff2|woff|ttf|otf)$/i.test(file))
@@ -20,7 +18,6 @@ export function loadFonts() {
return fonts;
} catch (error) {
console.log("err");
return [];
}
}
src/routes/+page.svelte
-3
View File
@@ -44,12 +44,9 @@
});
function handleImageUpload(image: string) {
console.log("handleImageUpload called with image length:", image.length);
uploadedImage = image;
errorMessage = null;
console.log("Setting current step to crop");
setCurrentStep("crop");
console.log("Current step after setting:", $uiStore.currentStep);
}
function handleCropComplete(croppedImage: string) {