mirror of
https://github.com/Ku6epXBOCTuK/easy-png-tools.git
synced 2026-11-13 17:08:20 +00:00
118 lines
2.6 KiB
Svelte
118 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
import { toDataUrl } from "$lib/core/io";
|
|
import type { PixelImage } from "$lib/core/types";
|
|
import { t } from "$lib/i18n/t";
|
|
import type { InputMode } from "$lib/registry";
|
|
import Dropzone from "./Dropzone.svelte";
|
|
import PreviewTile from "./PreviewTile.svelte";
|
|
import SchemaTextSource from "./SchemaTextSource.svelte";
|
|
|
|
interface Props {
|
|
mode: InputMode;
|
|
source: PixelImage | null;
|
|
textSource?: string;
|
|
running?: boolean;
|
|
ontextinput?: (text: string) => void;
|
|
onrendertext?: () => void;
|
|
onupload?: (file: File) => void;
|
|
}
|
|
let {
|
|
mode,
|
|
source,
|
|
textSource = "",
|
|
running = false,
|
|
ontextinput,
|
|
onrendertext,
|
|
onupload,
|
|
}: Props = $props();
|
|
|
|
const sourceUrl = $derived(source ? toDataUrl(source) : null);
|
|
|
|
let dragging = $state(false);
|
|
|
|
function onDrop(e: DragEvent) {
|
|
e.preventDefault();
|
|
dragging = false;
|
|
const file = e.dataTransfer?.files?.[0];
|
|
if (file) onupload?.(file);
|
|
}
|
|
</script>
|
|
|
|
<PreviewTile label={t("sourceCard.source")} viewMode={mode}>
|
|
{#if mode === "text"}
|
|
<div class="text-source-wrap">
|
|
<SchemaTextSource
|
|
value={textSource}
|
|
disabled={running}
|
|
oninput={ontextinput ?? (() => {})}
|
|
onrender={onrendertext ?? (() => {})}
|
|
/>
|
|
</div>
|
|
{:else if mode === "image" && sourceUrl}
|
|
<div
|
|
class="tile-drop"
|
|
class:dragging
|
|
role="region"
|
|
aria-label={t("dropZone.overlayDefault")}
|
|
ondragover={(e) => {
|
|
e.preventDefault();
|
|
dragging = true;
|
|
}}
|
|
ondragleave={() => (dragging = false)}
|
|
ondrop={onDrop}
|
|
>
|
|
<img
|
|
data-testid="source-image"
|
|
src={sourceUrl}
|
|
alt={t("sourceCard.alt")}
|
|
/>
|
|
{#if dragging}
|
|
<span class="drop-hint">{t("dropZone.overlayDefault")}</span>
|
|
{/if}
|
|
</div>
|
|
{:else if mode === "image"}
|
|
<Dropzone onfile={onupload} />
|
|
{:else}
|
|
<span class="empty">{t("sourceCard.noSource")}</span>
|
|
{/if}
|
|
</PreviewTile>
|
|
|
|
<style>
|
|
.empty {
|
|
font: var(--font-size-s) var(--font-mono);
|
|
}
|
|
.text-source-wrap {
|
|
width: 100%;
|
|
padding: var(--space-l);
|
|
box-sizing: border-box;
|
|
}
|
|
.tile-drop {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
align-self: stretch;
|
|
}
|
|
.tile-drop.dragging::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border: var(--size-border-thick) dashed var(--color-main);
|
|
border-radius: var(--radius-m);
|
|
background: var(--color-main-tint);
|
|
pointer-events: none;
|
|
}
|
|
.tile-drop .drop-hint {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: var(--space-l);
|
|
color: var(--color-main);
|
|
font: var(--font-size-s) var(--font-mono);
|
|
text-align: center;
|
|
pointer-events: none;
|
|
}
|
|
</style>
|