easy-png-tools2/web/src/lib/components/schema/SchemaPreview.svelte

<script lang="ts">
	import { hasPreviewResult } from "./schema-preview-model";
	import SchemaActions from "./SchemaActions.svelte";
	import SchemaResultTile from "./SchemaResultTile.svelte";
	import SchemaSourceTile from "./SchemaSourceTile.svelte";
	import type { PixelImage } from "$lib/core/types";
	import type { OutputMime } from "$lib/core/io";
	import { t } from "$lib/i18n/t";
	import type {
		FileResult,
		InputMode,
		ResultKind,
		ResultNote,
	} from "$lib/registry";

	interface Props {
		inputMode: InputMode;
		resultKind?: ResultKind;
		toolId: string;
		source: PixelImage | null;
		result: PixelImage | null;
		resultNote?: ResultNote | null;
		fileResult?: FileResult | null;
		textSource?: string;
		textResult?: string | null;
		textVars?: Record<string, string | number>;
		running?: boolean;
		error?: string;
		format?: OutputMime;
		quality?: number;
		alphaLoss?: boolean;
		onupload: (file: File) => void;
		ontextsource?: (text: string) => void;
		onrendertext?: () => void;
		oncopytext?: () => void;
		ondownloadtxt?: () => void;
		ondownload: () => void;
		onformat?: (mime: OutputMime) => void;
		onquality?: (value: number) => void;
	}
	let {
		inputMode,
		resultKind = "image",
		toolId,
		source,
		result,
		resultNote = null,
		fileResult = null,
		textSource = "",
		textResult = null,
		textVars = undefined,
		running = false,
		error = "",
		format = "image/png",
		quality = undefined,
		alphaLoss = false,
		onupload,
		ontextsource,
		onrendertext,
		oncopytext,
		ondownloadtxt,
		ondownload,
		onformat,
		onquality,
	}: Props = $props();

	const hasResult = $derived(
		hasPreviewResult({ inputMode, resultKind, result, fileResult, textResult }),
	);
</script>

<div class="panel-head">
	<span class="label">{t("resultCard.previewPanel")}</span>
	<SchemaActions
		{inputMode}
		{resultKind}
		canDownload={hasResult}
		{running}
		{format}
		{quality}
		{alphaLoss}
		{onupload}
		{ondownload}
		{onformat}
		{onquality}
	/>
</div>

{#if error}
	<p class="error" role="alert">{error}</p>
{/if}

<div class="pair">
	<SchemaSourceTile
		mode={inputMode}
		{source}
		{textSource}
		{running}
		ontextinput={ontextsource}
		{onrendertext}
		{onupload}
	/>
	<SchemaResultTile
		{resultKind}
		{result}
		{resultNote}
		{fileResult}
		{textResult}
		{textVars}
		{toolId}
		{running}
		oncopy={oncopytext}
		{ondownloadtxt}
	/>
</div>

<style>
	.panel-head {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: var(--space-m);
		padding-bottom: var(--space-l);
		border-bottom: var(--size-border) solid var(--color-border);
		margin-bottom: var(--space-xl);
	}
	.label {
		font: var(--font-size-s) var(--font-mono);
		letter-spacing: var(--space-text-l);
		text-transform: uppercase;
		color: var(--color-main);
	}
	.error {
		margin: 0 0 var(--space-l);
		color: var(--color-danger);
		font: var(--font-size-s) var(--font-mono);
	}
	.pair {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-l);
	}
	@media (--bp-tablet) {
		.pair {
			grid-template-columns: 1fr;
		}
	}
</style>