mirror of
https://github.com/Ku6epXBOCTuK/easy-png-tools.git
synced 2026-09-14 13:36:36 +00:00
fix: resolve always text input issue, separate to simple components
This commit is contained in:
@@ -0,0 +1,77 @@
|
||||
<script lang="ts">
|
||||
import DownloadButton from "./ui/DownloadButton.svelte";
|
||||
import { Sparkles, Upload } from "@lucide/svelte";
|
||||
|
||||
interface Props {
|
||||
inputMode: "file" | "text" | "none";
|
||||
canDownload: boolean;
|
||||
running: boolean;
|
||||
onupload: (file: File) => void;
|
||||
ongenerate: () => void;
|
||||
ondownload: () => void;
|
||||
}
|
||||
let {
|
||||
inputMode,
|
||||
canDownload,
|
||||
running,
|
||||
onupload,
|
||||
ongenerate,
|
||||
ondownload,
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="actions">
|
||||
{#if inputMode === "none"}
|
||||
<button class="btn generate" onclick={ongenerate} disabled={running}>
|
||||
<Sparkles size={14} />
|
||||
{running ? "Generating…" : "Generate"}
|
||||
</button>
|
||||
{:else if inputMode === "file"}
|
||||
<label class="btn upload">
|
||||
<Upload size={14} /> Open image
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onchange={(e) => {
|
||||
const f = (e.target as HTMLInputElement).files?.[0];
|
||||
if (f) onupload(f);
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
{/if}
|
||||
{#if canDownload}
|
||||
<DownloadButton label="Download result" onclick={ondownload} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-l);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-m);
|
||||
padding: var(--space-m) var(--space-l);
|
||||
border: var(--size-border) solid var(--color-border);
|
||||
border-radius: var(--radius-m);
|
||||
font: var(--font-size-s) var(--font-mono);
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
.generate {
|
||||
background: var(--color-main);
|
||||
border-color: var(--color-main);
|
||||
color: var(--color-background);
|
||||
}
|
||||
.generate:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
}
|
||||
.upload input {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@@ -1,21 +1,19 @@
|
||||
<script lang="ts">
|
||||
import MetaList from "$lib/components/kit/MetaList.svelte";
|
||||
import DownloadButton from "$lib/components/kit/ui/DownloadButton.svelte";
|
||||
import SchemaTextResult from "$lib/components/kit/SchemaTextResult.svelte";
|
||||
import SchemaTextSource from "$lib/components/kit/SchemaTextSource.svelte";
|
||||
import { toDataUrl } from "$lib/core/io";
|
||||
import SchemaActions from "$lib/components/kit/SchemaActions.svelte";
|
||||
import SchemaResultTile from "$lib/components/kit/SchemaResultTile.svelte";
|
||||
import SchemaSourceTile from "$lib/components/kit/SchemaSourceTile.svelte";
|
||||
import type { PixelImage } from "$lib/core/types";
|
||||
import { Check, Sparkles, Upload } from "@lucide/svelte";
|
||||
|
||||
interface Props {
|
||||
inputMode?: "file" | "text" | "none";
|
||||
resultKind?: "image" | "text" | "verdict";
|
||||
source: PixelImage | null;
|
||||
result: PixelImage | null;
|
||||
textSource?: string;
|
||||
textResult?: string | null;
|
||||
resultKind?: "image" | "text" | "verdict";
|
||||
running: boolean;
|
||||
error: string;
|
||||
isGenerator?: boolean;
|
||||
running?: boolean;
|
||||
error?: string;
|
||||
onupload: (file: File) => void;
|
||||
ongenerate?: () => void;
|
||||
ontextsource?: (text: string) => void;
|
||||
@@ -25,14 +23,14 @@
|
||||
ondownload: () => void;
|
||||
}
|
||||
let {
|
||||
inputMode = "file",
|
||||
resultKind = "image",
|
||||
source,
|
||||
result,
|
||||
textSource = "",
|
||||
textResult = null,
|
||||
resultKind = "image",
|
||||
running,
|
||||
error,
|
||||
isGenerator = false,
|
||||
running = false,
|
||||
error = "",
|
||||
onupload,
|
||||
ongenerate,
|
||||
ontextsource,
|
||||
@@ -42,44 +40,39 @@
|
||||
ondownload,
|
||||
}: Props = $props();
|
||||
|
||||
const isTextInput = $derived(ontextsource !== undefined && !isGenerator);
|
||||
const isImageDownload = $derived(resultKind === "image" && Boolean(result));
|
||||
|
||||
let sourceUrl = $derived(source ? toDataUrl(source) : null);
|
||||
let resultUrl = $derived(result ? toDataUrl(result) : null);
|
||||
const isGenerator = $derived(inputMode === "none");
|
||||
const sourceValue = $derived(
|
||||
isGenerator
|
||||
? "—"
|
||||
: inputMode === "text"
|
||||
? "text"
|
||||
: source
|
||||
? `${source.width} × ${source.height} px`
|
||||
: "—",
|
||||
);
|
||||
const resultValue = $derived(
|
||||
resultKind === "image"
|
||||
? result
|
||||
? `${result.width} × ${result.height} px`
|
||||
: "—"
|
||||
: textResult
|
||||
? "text"
|
||||
: "—",
|
||||
);
|
||||
</script>
|
||||
|
||||
<div class="panel-head">
|
||||
<span class="label"
|
||||
>{isGenerator ? "GENERATOR / RESULT" : "SOURCE / RESULT"}</span
|
||||
>
|
||||
<div class="head-actions">
|
||||
{#if isGenerator}
|
||||
<button
|
||||
class="upload generate-btn"
|
||||
onclick={ongenerate}
|
||||
disabled={running}
|
||||
>
|
||||
<Sparkles size={14} />
|
||||
{running ? "Generating…" : "Generate"}
|
||||
</button>
|
||||
{:else if !isTextInput}
|
||||
<label class="upload">
|
||||
<Upload size={14} /> Open image
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onchange={(e) => {
|
||||
const f = (e.target as HTMLInputElement).files?.[0];
|
||||
if (f) onupload(f);
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
{/if}
|
||||
{#if isImageDownload}
|
||||
<DownloadButton label="Download result" onclick={ondownload} />
|
||||
{/if}
|
||||
</div>
|
||||
<SchemaActions
|
||||
{inputMode}
|
||||
canDownload={resultKind === "image" && Boolean(result)}
|
||||
{running}
|
||||
{onupload}
|
||||
ongenerate={ongenerate ?? (() => {})}
|
||||
{ondownload}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if error}
|
||||
@@ -88,85 +81,31 @@
|
||||
|
||||
<div class="pair">
|
||||
{#if !isGenerator}
|
||||
<figure class="tile">
|
||||
<figcaption><span>SOURCE</span></figcaption>
|
||||
<div class="canvas">
|
||||
{#if isTextInput}
|
||||
<div class="text-source-wrap">
|
||||
<SchemaTextSource
|
||||
value={textSource}
|
||||
disabled={running}
|
||||
oninput={ontextsource ?? (() => {})}
|
||||
onrender={onrendertext ?? (() => {})}
|
||||
/>
|
||||
</div>
|
||||
{:else if sourceUrl}
|
||||
<img src={sourceUrl} alt="source" />
|
||||
{:else}
|
||||
<span class="empty">choose an image</span>
|
||||
{/if}
|
||||
</div>
|
||||
</figure>
|
||||
<SchemaSourceTile
|
||||
mode={inputMode === "text" ? "text" : "file"}
|
||||
{source}
|
||||
{textSource}
|
||||
{running}
|
||||
ontextinput={ontextsource}
|
||||
{onrendertext}
|
||||
/>
|
||||
{/if}
|
||||
<figure class="tile" class:full={isGenerator || resultKind !== "image"}>
|
||||
<figcaption><span>RESULT {running ? "…" : ""}</span></figcaption>
|
||||
<div class="canvas" class:checker={resultKind === "image"}>
|
||||
{#if resultKind === "text" && textResult}
|
||||
<div class="text-result-wrap">
|
||||
<SchemaTextResult
|
||||
value={textResult}
|
||||
kind="text"
|
||||
oncopy={oncopytext ?? (() => {})}
|
||||
ondownload={ondownloadtxt ?? (() => {})}
|
||||
/>
|
||||
</div>
|
||||
{:else if resultKind === "verdict" && textResult}
|
||||
<div class="text-result-wrap">
|
||||
<SchemaTextResult
|
||||
value={textResult}
|
||||
kind="verdict"
|
||||
oncopy={oncopytext ?? (() => {})}
|
||||
ondownload={ondownloadtxt ?? (() => {})}
|
||||
/>
|
||||
</div>
|
||||
{:else if resultKind === "image" && resultUrl}
|
||||
<img src={resultUrl} alt="result" />
|
||||
{:else if running}
|
||||
<Check size={22} />
|
||||
{:else}
|
||||
<span class="empty">
|
||||
{isGenerator ? "click Generate" : "no result yet"}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</figure>
|
||||
<SchemaResultTile
|
||||
{resultKind}
|
||||
{result}
|
||||
{textResult}
|
||||
wide={isGenerator || resultKind !== "image"}
|
||||
{running}
|
||||
oncopy={oncopytext}
|
||||
{ondownloadtxt}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="meta">
|
||||
<MetaList
|
||||
items={[
|
||||
{
|
||||
caption: "SOURCE",
|
||||
value:
|
||||
!isGenerator && !isTextInput
|
||||
? source
|
||||
? `${source.width} × ${source.height} px`
|
||||
: "—"
|
||||
: isTextInput
|
||||
? "text"
|
||||
: "—",
|
||||
},
|
||||
{
|
||||
caption: "RESULT",
|
||||
value:
|
||||
resultKind === "image"
|
||||
? result
|
||||
? `${result.width} × ${result.height} px`
|
||||
: "—"
|
||||
: textResult
|
||||
? "text"
|
||||
: "—",
|
||||
},
|
||||
{ caption: "SOURCE", value: sourceValue },
|
||||
{ caption: "RESULT", value: resultValue },
|
||||
{ caption: "FORMAT", value: "PNG" },
|
||||
]}
|
||||
/>
|
||||
@@ -187,35 +126,6 @@
|
||||
letter-spacing: var(--space-text-l);
|
||||
color: var(--color-main);
|
||||
}
|
||||
.head-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-l);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.upload {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-m);
|
||||
padding: var(--space-m) var(--space-l);
|
||||
border: var(--size-border) solid var(--color-border);
|
||||
border-radius: var(--radius-m);
|
||||
font: var(--font-size-s) var(--font-mono);
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
.generate-btn {
|
||||
background: var(--color-main);
|
||||
border-color: var(--color-main);
|
||||
color: var(--color-background);
|
||||
}
|
||||
.generate-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
}
|
||||
.upload input {
|
||||
display: none;
|
||||
}
|
||||
.error {
|
||||
margin: 0 0 var(--space-l);
|
||||
color: var(--color-danger);
|
||||
@@ -226,50 +136,6 @@
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-l);
|
||||
}
|
||||
.pair > .full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.tile figcaption {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-m);
|
||||
margin-bottom: var(--space-m);
|
||||
font: var(--font-size-s) var(--font-mono);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.canvas {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: clamp(var(--space-brand), 30vh, 60vh);
|
||||
border: var(--size-border) solid var(--color-border);
|
||||
border-radius: var(--radius-m);
|
||||
overflow: hidden;
|
||||
background: var(--color-background-muted);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.canvas img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
.canvas.checker {
|
||||
background: repeating-conic-gradient(
|
||||
var(--color-checker-main) 0 25%,
|
||||
var(--color-checker-alt) 0 50%
|
||||
)
|
||||
50% / 28px 28px;
|
||||
}
|
||||
.empty {
|
||||
font: var(--font-size-s) var(--font-mono);
|
||||
}
|
||||
.text-source-wrap,
|
||||
.text-result-wrap {
|
||||
width: 100%;
|
||||
padding: var(--space-l);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.meta {
|
||||
margin-top: var(--space-l);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
<script lang="ts">
|
||||
import SchemaTextResult from "./SchemaTextResult.svelte";
|
||||
import { toDataUrl } from "$lib/core/io";
|
||||
import type { PixelImage } from "$lib/core/types";
|
||||
import { Check } from "@lucide/svelte";
|
||||
|
||||
interface Props {
|
||||
resultKind?: "image" | "text" | "verdict";
|
||||
result: PixelImage | null;
|
||||
textResult?: string | null;
|
||||
wide?: boolean;
|
||||
running?: boolean;
|
||||
oncopy?: () => void;
|
||||
ondownloadtxt?: () => void;
|
||||
}
|
||||
let {
|
||||
resultKind = "image",
|
||||
result,
|
||||
textResult = null,
|
||||
wide = false,
|
||||
running = false,
|
||||
oncopy,
|
||||
ondownloadtxt,
|
||||
}: Props = $props();
|
||||
|
||||
const resultUrl = $derived(result ? toDataUrl(result) : null);
|
||||
</script>
|
||||
|
||||
<figure class="tile" style:grid-column={wide ? "1 / -1" : undefined}>
|
||||
<figcaption><span>RESULT {running ? "…" : ""}</span></figcaption>
|
||||
<div class="canvas" class:checker={resultKind === "image"}>
|
||||
{#if resultKind === "text" && textResult}
|
||||
<div class="text-result-wrap">
|
||||
<SchemaTextResult
|
||||
value={textResult}
|
||||
kind="text"
|
||||
oncopy={oncopy ?? (() => {})}
|
||||
ondownload={ondownloadtxt ?? (() => {})}
|
||||
/>
|
||||
</div>
|
||||
{:else if resultKind === "verdict" && textResult}
|
||||
<div class="text-result-wrap">
|
||||
<SchemaTextResult
|
||||
value={textResult}
|
||||
kind="verdict"
|
||||
oncopy={oncopy ?? (() => {})}
|
||||
ondownload={ondownloadtxt ?? (() => {})}
|
||||
/>
|
||||
</div>
|
||||
{:else if resultKind === "image" && resultUrl}
|
||||
<img src={resultUrl} alt="result" />
|
||||
{:else if running}
|
||||
<Check size={22} />
|
||||
{:else}
|
||||
<span class="empty">no result yet</span>
|
||||
{/if}
|
||||
</div>
|
||||
</figure>
|
||||
|
||||
<style>
|
||||
.tile figcaption {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-m);
|
||||
margin-bottom: var(--space-m);
|
||||
font: var(--font-size-s) var(--font-mono);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.canvas {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: clamp(var(--space-brand), 30vh, 60vh);
|
||||
border: var(--size-border) solid var(--color-border);
|
||||
border-radius: var(--radius-m);
|
||||
overflow: hidden;
|
||||
background: var(--color-background-muted);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.canvas img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
.canvas.checker {
|
||||
background: repeating-conic-gradient(
|
||||
var(--color-checker-main) 0 25%,
|
||||
var(--color-checker-alt) 0 50%
|
||||
)
|
||||
50% / 28px 28px;
|
||||
}
|
||||
.empty {
|
||||
font: var(--font-size-s) var(--font-mono);
|
||||
}
|
||||
.text-result-wrap {
|
||||
width: 100%;
|
||||
padding: var(--space-l);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,80 @@
|
||||
<script lang="ts">
|
||||
import SchemaTextSource from "./SchemaTextSource.svelte";
|
||||
import { toDataUrl } from "$lib/core/io";
|
||||
import type { PixelImage } from "$lib/core/types";
|
||||
|
||||
interface Props {
|
||||
mode: "file" | "text";
|
||||
source: PixelImage | null;
|
||||
textSource?: string;
|
||||
running?: boolean;
|
||||
ontextinput?: (text: string) => void;
|
||||
onrendertext?: () => void;
|
||||
}
|
||||
let {
|
||||
mode,
|
||||
source,
|
||||
textSource = "",
|
||||
running = false,
|
||||
ontextinput,
|
||||
onrendertext,
|
||||
}: Props = $props();
|
||||
|
||||
const sourceUrl = $derived(source ? toDataUrl(source) : null);
|
||||
</script>
|
||||
|
||||
<figure class="tile">
|
||||
<figcaption><span>SOURCE</span></figcaption>
|
||||
<div class="canvas">
|
||||
{#if mode === "text"}
|
||||
<div class="text-source-wrap">
|
||||
<SchemaTextSource
|
||||
value={textSource}
|
||||
disabled={running}
|
||||
oninput={ontextinput ?? (() => {})}
|
||||
onrender={onrendertext ?? (() => {})}
|
||||
/>
|
||||
</div>
|
||||
{:else if sourceUrl}
|
||||
<img src={sourceUrl} alt="source" />
|
||||
{:else}
|
||||
<span class="empty">choose an image</span>
|
||||
{/if}
|
||||
</div>
|
||||
</figure>
|
||||
|
||||
<style>
|
||||
.tile figcaption {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-m);
|
||||
margin-bottom: var(--space-m);
|
||||
font: var(--font-size-s) var(--font-mono);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.canvas {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: clamp(var(--space-brand), 30vh, 60vh);
|
||||
border: var(--size-border) solid var(--color-border);
|
||||
border-radius: var(--radius-m);
|
||||
overflow: hidden;
|
||||
background: var(--color-background-muted);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.canvas img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
.empty {
|
||||
font: var(--font-size-s) var(--font-mono);
|
||||
}
|
||||
.text-source-wrap {
|
||||
width: 100%;
|
||||
padding: var(--space-l);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
@@ -196,10 +196,10 @@
|
||||
{result}
|
||||
{textSource}
|
||||
{textResult}
|
||||
{inputMode}
|
||||
{resultKind}
|
||||
{running}
|
||||
{error}
|
||||
{isGenerator}
|
||||
onupload={handleFile}
|
||||
ongenerate={runGenerate}
|
||||
ontextsource={(t) => {
|
||||
|
||||
Reference in New Issue
Block a user