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

fix: resolve 0 padding fallback to non zero

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-02-05 01:01:39 +05:00
parent a19d94a744
commit cbd030da82
2 changed files with 4 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/panel/PanelPreview.svelte
+4 -3
View File
@@ -65,8 +65,8 @@
function getTextPosition(textItem: TextItem) { function getTextPosition(textItem: TextItem) {
const panelWidth = PANEL_SETTINGS.PANEL_WIDTH; const panelWidth = PANEL_SETTINGS.PANEL_WIDTH;
const paddingX = textItem.paddingX || 20; const paddingX = textItem.paddingX ?? 20;
const verticalOffset = textItem.verticalOffset || 0; const verticalOffset = textItem.verticalOffset ?? 0;
const centerY = panel.height / 2 + verticalOffset; const centerY = panel.height / 2 + verticalOffset;
const textWidth = 300; const textWidth = 300;
@@ -115,7 +115,8 @@
x={textPosition.x} x={textPosition.x}
y={textPosition.y} y={textPosition.y}
align={panel.text.textAlign || TYPOGRAPHY.TEXT_ALIGN_CENTER} align={panel.text.textAlign || TYPOGRAPHY.TEXT_ALIGN_CENTER}
width={300} width={PANEL_SETTINGS.PANEL_WIDTH - textPosition.x * 2}
offsetX={0}
/> />
{/if} {/if}
</Layer> </Layer>
src/components/text/TextPreview.svelte
-103
View File
@@ -1,103 +0,0 @@
<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";
interface Props {
textItem: TextItem;
height: number;
}
let { textItem, height }: Props = $props();
let bgImage: HTMLImageElement | undefined = $state(undefined);
let currentPanel = $state($panelStore);
$effect(() => {
if (currentPanel?.backgroundImage && currentPanel.backgroundImage !== bgImage?.src) {
loadImage(currentPanel.backgroundImage);
}
});
function loadImage(src: string) {
const img = document.createElement("img");
img.onload = () => {
bgImage = img;
};
img.src = src;
}
function getTextPosition() {
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 TYPOGRAPHY.TEXT_ALIGN_LEFT:
return { x: paddingX, y: centerY };
case TYPOGRAPHY.TEXT_ALIGN_RIGHT:
return { x: panelWidth - paddingX, y: centerY };
case TYPOGRAPHY.TEXT_ALIGN_CENTER:
default:
return { x: panelWidth / 2, y: centerY };
}
}
let textPosition = $derived(getTextPosition());
</script>
<div class="text-preview">
{#if bgImage}
<div class="canvas-container">
<Stage width={PANEL_SETTINGS.PANEL_WIDTH} {height}>
<Layer>
<Image image={bgImage} width={PANEL_SETTINGS.PANEL_WIDTH} {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 === TYPOGRAPHY.TEXT_ALIGN_CENTER
? 0
: textItem.textAlign === TYPOGRAPHY.TEXT_ALIGN_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>