Ku6epXBOCTuK/easy-png-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: combine tool in single card

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-08-24 08:31:13 +05:00
parent 95ee598875
commit 702b96261d
10 changed files with 267 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/app.css
+21
View File
@@ -198,6 +198,27 @@ input.control[type='number'] {
margin-top: var(--space-4); margin-top: var(--space-4);
} }
.edge-legend {
position: absolute;
top: -0.65em;
padding: 0 var(--space-2);
background: var(--surface);
color: var(--text-muted);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.3;
white-space: nowrap;
z-index: 1;
}
.params-sep {
position: relative;
border-top: 1px solid var(--border);
margin: 0 var(--space-4);
padding-bottom: var(--space-3);
}
.actions-row { .actions-row {
display: flex; display: flex;
gap: var(--space-1); gap: var(--space-1);
web/src/lib/components/ParamForm.svelte
+77 -43
View File
@@ -11,50 +11,84 @@
values: Record<string, any>; values: Record<string, any>;
pipetteTargetId?: string | null; pipetteTargetId?: string | null;
onPipetteToggle?: (id: string) => void; onPipetteToggle?: (id: string) => void;
hasMask?: boolean;
showMask?: boolean;
} }
let { params, values = $bindable(), pipetteTargetId = null, onPipetteToggle }: Props = $props(); let {
params,
values = $bindable(),
pipetteTargetId = null,
onPipetteToggle,
hasMask = false,
showMask = $bindable(false)
}: Props = $props();
</script> </script>
{#each params as param (param.id)} <div class="params-grid">
<div class="field"> {#if hasMask}
{#if param.type === 'checkbox'} <CheckboxField id="show-mask" label="Показать маску" bind:checked={showMask} />
<CheckboxField id={param.id} label={param.label} bind:checked={values[param.id]} /> {/if}
{:else if param.type === 'number'} {#each params as param (param.id)}
<TextField <div class="field">
id={param.id} {#if param.type === 'checkbox'}
label={param.label} <CheckboxField id={param.id} label={param.label} bind:checked={values[param.id]} />
type="number" {:else if param.type === 'number'}
min={param.min} <TextField
max={param.max} id={param.id}
step={param.step} label={param.label}
bind:value={values[param.id]} type="number"
/> min={param.min}
{:else if param.type === 'slider'} max={param.max}
<SliderField step={param.step}
id={param.id} bind:value={values[param.id]}
label={param.label} />
min={param.min} {:else if param.type === 'slider'}
max={param.max} <SliderField
step={param.step} id={param.id}
default={param.default} label={param.label}
bind:value={values[param.id]} min={param.min}
/> max={param.max}
{:else if param.type === 'select'} step={param.step}
<SelectField default={param.default}
id={param.id} bind:value={values[param.id]}
label={param.label} />
options={param.options} {:else if param.type === 'select'}
bind:value={values[param.id]} <SelectField
/> id={param.id}
{:else if param.type === 'color'} label={param.label}
<ColorField options={param.options}
id={param.id} bind:value={values[param.id]}
label={param.label} />
bind:value={values[param.id]} {:else if param.type === 'color'}
pipetteActive={pipetteTargetId === param.id} <ColorField
onPipetteToggle={() => onPipetteToggle?.(param.id)} id={param.id}
/> label={param.label}
{/if} bind:value={values[param.id]}
</div> pipetteActive={pipetteTargetId === param.id}
{/each} onPipetteToggle={() => onPipetteToggle?.(param.id)}
/>
{/if}
</div>
{/each}
</div>
<style>
.params-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-5);
}
@media (min-width: 75rem) {
.params-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 50rem) {
.params-grid {
grid-template-columns: 1fr;
}
}
</style>
web/src/lib/components/ToolPage.svelte
+53 -29
View File
@@ -258,24 +258,29 @@
<div class="error-banner" role="alert">{errorText}</div> <div class="error-banner" role="alert">{errorText}</div>
{/if} {/if}
<div class="panel tool-stage" class:single={isSourceless}> <div class="panel tool-block">
{#if !isSourceless} <div class="tool-stage" class:single={isSourceless}>
{#if !isSourceless}
<span class="edge-legend source-legend" aria-hidden="true">Исходник</span>
<div class="cell">
{#if isTextSource && !source}
<TextInputCard onSubmit={handleTextSubmit} />
{:else}
<SourceCard
{source}
onFile={handleFile}
onError={(message) => (errorText = message)}
onReset={reset}
pipetteActive={!!pipetteTargetId}
onPickColor={handlePickColor}
/>
{/if}
</div>
{/if}
<span class="edge-legend result-legend" aria-hidden="true">
{isInfo ? 'Сводка' : 'Результат'}
</span>
<div class="cell"> <div class="cell">
{#if isTextSource && !source}
<TextInputCard onSubmit={handleTextSubmit} />
{:else}
<SourceCard
{source}
onFile={handleFile}
onError={(message) => (errorText = message)}
onReset={reset}
pipetteActive={!!pipetteTargetId}
onPickColor={handlePickColor}
/>
{/if}
</div>
{/if}
<div class="cell">
<ResultCard <ResultCard
{tool} {tool}
sourceLoaded={isSourceless ? true : !!source} sourceLoaded={isSourceless ? true : !!source}
@@ -293,18 +298,20 @@
</div> </div>
</div> </div>
{#if (source || isSourceless) && !isInfo} {#if (source || isSourceless) && !isInfo && (tool.params.length > 0 || hasMask)}
<div class="base-params"> <div class="params-sep">
<ParamsCard <span class="edge-legend" aria-hidden="true">Параметры</span>
params={tool.params}
bind:values
{pipetteTargetId}
onPipetteToggle={handlePipetteToggle}
hasMask={hasMask}
bind:showMask
/>
</div> </div>
<ParamsCard
params={tool.params}
bind:values
{pipetteTargetId}
onPipetteToggle={handlePipetteToggle}
hasMask={hasMask}
bind:showMask
/>
{/if} {/if}
</div>
<div class="chain-stack"> <div class="chain-stack">
{#each chain as step, index (step.id)} {#each chain as step, index (step.id)}
@@ -357,8 +364,25 @@
margin-bottom: var(--space-3); margin-bottom: var(--space-3);
} }
.base-params { .tool-stage {
margin-top: var(--space-4); position: relative;
}
.source-legend {
left: 25%;
transform: translateX(-50%);
}
.result-legend {
left: 75%;
transform: translateX(-50%);
}
@media (max-width: 48rem) {
.source-legend,
.result-legend {
display: none;
}
} }
.empty-slot { .empty-slot {
web/src/lib/components/chain/ChainToolBlock.svelte
+42 -28
View File
@@ -40,28 +40,28 @@
</script> </script>
<div class="block"> <div class="block">
<header> <div class="panel tool-stage">
<h3 class="heading-section">Шаг {index + 1}: {tool.title}</h3> <span class="edge-legend step-legend">
<button Шаг {index + 1}: {tool.title}
type="button" <button
class="remove" type="button"
aria-label="Убрать шаг" class="remove"
title="Убрать шаг" aria-label="Убрать шаг"
onclick={onRemove} title="Убрать шаг"
> onclick={onRemove}
✕ >
</button> ✕
</header> </button>
</span>
<div class="tool-stage panel">
<div class="cell"> <div class="cell">
<h4 class="heading-section">Вход</h4> <span class="edge-legend cell-legend" aria-hidden="true">Вход</span>
<div class="cell-media"> <div class="cell-media">
<Preview image={input} /> <Preview image={input} />
</div> </div>
</div> </div>
<div class="cell"> <div class="cell">
<h4 class="heading-section">Результат</h4> <span class="edge-legend cell-legend" aria-hidden="true">Результат</span>
{#if busy && !result} {#if busy && !result}
<div class="cell-media"> <div class="cell-media">
<EmptyState title="Обработка…" hint="Выполняется шаг цепочки" /> <EmptyState title="Обработка…" hint="Выполняется шаг цепочки" />
@@ -89,30 +89,38 @@
</div> </div>
</div> </div>
<ParamsCard params={tool.params} bind:values /> {#if tool.params.length > 0}
<div class="params-sep">
<span class="edge-legend" aria-hidden="true">Параметры</span>
</div>
<ParamsCard params={tool.params} bind:values />
{/if}
</div> </div>
<style> <style>
.block { .block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-2);
} }
header { .tool-stage {
display: flex; position: relative;
padding-top: var(--space-3);
border-top: 0;
}
.step-legend {
left: var(--space-3);
display: inline-flex;
align-items: center; align-items: center;
justify-content: space-between;
gap: var(--space-2); gap: var(--space-2);
} color: var(--text);
font-weight: 600;
h3 {
margin: 0;
} }
.remove { .remove {
width: 1.6rem; width: 1.4rem;
height: 1.6rem; height: 1.4rem;
padding: 0; padding: 0;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius-s); border-radius: var(--radius-s);
@@ -130,8 +138,14 @@
color: var(--danger); color: var(--danger);
} }
h4 { .cell {
margin-bottom: var(--space-1); position: relative;
}
.cell-legend {
top: -0.9em;
left: 50%;
transform: translateX(-50%);
} }
.recalc { .recalc {
web/src/lib/components/tool/ParamsCard.svelte
+12 -14
View File
@@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import CheckboxField from '../ui/CheckboxField.svelte';
import ParamForm from '../ParamForm.svelte'; import ParamForm from '../ParamForm.svelte';
import type { ParamDef } from '$lib/registry'; import type { ParamDef } from '$lib/registry';
@@ -22,14 +21,17 @@
}: Props = $props(); }: Props = $props();
</script> </script>
<div class="panel root"> <div class="root">
<h2 class="heading-section">Параметры</h2> {#if params.length > 0 || hasMask}
{#if hasMask} <ParamForm
<CheckboxField id="show-mask" label="Показать маску" bind:checked={showMask} /> {params}
{/if} bind:values
{#if params.length > 0} {pipetteTargetId}
<ParamForm {params} bind:values {pipetteTargetId} {onPipetteToggle} /> {onPipetteToggle}
{:else if !hasMask} {hasMask}
bind:showMask
/>
{:else}
<p class="hint text-caption text-muted"> <p class="hint text-caption text-muted">
У этого инструмента нет параметров — результат уже готов. У этого инструмента нет параметров — результат уже готов.
</p> </p>
@@ -38,11 +40,7 @@
<style> <style>
.root { .root {
padding: var(--space-4); padding: 0 var(--space-4) var(--space-3);
}
h2 {
margin-bottom: var(--space-2);
} }
.hint { .hint {
web/src/lib/components/tool/ResultCard.svelte
-5
View File
@@ -43,7 +43,6 @@
</script> </script>
<div class="container"> <div class="container">
<h2 class="heading-section">{isInfo ? 'Сводка' : 'Результат'}</h2>
{#if !sourceLoaded} {#if !sourceLoaded}
<div class="media"> <div class="media">
<EmptyState <EmptyState
@@ -103,10 +102,6 @@
height: 100%; height: 100%;
} }
h2 {
margin-bottom: var(--space-1);
}
.media { .media {
flex: 1; flex: 1;
display: flex; display: flex;
web/src/lib/components/tool/SourceCard.svelte
-5
View File
@@ -18,7 +18,6 @@
</script> </script>
<div class="container"> <div class="container">
<h2 class="heading-section">Исходник</h2>
{#if !source} {#if !source}
<DropZone {onFile} {onError} /> <DropZone {onFile} {onError} />
{:else} {:else}
@@ -40,10 +39,6 @@
height: 100%; height: 100%;
} }
h2 {
margin-bottom: var(--space-1);
}
.media { .media {
flex: 1; flex: 1;
display: flex; display: flex;
web/src/lib/components/ui/CheckboxField.svelte
+25 -11
View File
@@ -9,34 +9,48 @@
let { id, label, checked = $bindable(false), hint }: Props = $props(); let { id, label, checked = $bindable(false), hint }: Props = $props();
</script> </script>
<div class="checkbox"> <div class="checkbox-row">
<input id={id} type="checkbox" bind:checked /> <label class="checkbox" for={id}>
<label for={id}>{label}</label> <input id={id} type="checkbox" bind:checked />
{label}
</label>
{#if hint}
<p class="hint text-caption text-muted">{hint}</p>
{/if}
</div> </div>
{#if hint}
<p class="hint text-caption text-muted">{hint}</p>
{/if}
<style> <style>
.checkbox-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: calc(var(--space-1) + 2px) 0;
border-bottom: 1px dashed var(--border);
}
.checkbox { .checkbox {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-2); gap: var(--space-2);
margin-bottom: var(--space-3); cursor: pointer;
font-size: var(--text-caption, var(--text-s));
color: var(--text-muted);
} }
input[type='checkbox'] { input[type='checkbox'] {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
cursor: pointer; cursor: pointer;
accent-color: var(--accent);
} }
label { label:hover {
font-size: var(--text-m); color: var(--text);
cursor: pointer;
} }
.hint { .hint {
margin: calc(-1 * var(--space-3)) 0 var(--space-3); margin: 0;
text-align: right;
} }
</style> </style>
web/src/lib/components/ui/Field.svelte
+30 -5
View File
@@ -13,17 +13,42 @@
<div class="field"> <div class="field">
<label class="text-caption text-muted" for={id}>{label}</label> <label class="text-caption text-muted" for={id}>{label}</label>
{@render children()} <div class="control-slot">
{#if hint} {@render children()}
<p class="hint text-caption text-muted">{hint}</p> {#if hint}
{/if} <p class="hint text-caption text-muted">{hint}</p>
{/if}
</div>
</div> </div>
<style> <style>
.field { .field {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: calc(var(--space-1) + 2px) 0;
border-bottom: 1px dashed var(--border);
}
label {
flex: none;
max-width: 45%;
text-align: left;
}
.control-slot {
flex: 1;
min-width: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end;
gap: var(--space-1); gap: var(--space-1);
margin-bottom: var(--space-3); }
.hint {
margin: 0;
align-self: flex-end;
text-align: right;
} }
</style> </style>
web/src/lib/components/ui/SliderField.svelte
+7 -5
View File
@@ -63,19 +63,21 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-1); gap: var(--space-1);
max-width: var(--control-max-width); width: 100%;
max-width: 22rem;
} }
input[type='range'] { input[type='range'] {
flex: 1; flex: 1;
min-width: 0; min-width: 3rem;
accent-color: var(--accent); accent-color: var(--accent);
margin: 0;
} }
.step { .step {
flex: none; flex: none;
width: 1.7rem; width: 1.5rem;
height: 1.7rem; height: 1.5rem;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -84,7 +86,7 @@
border-radius: var(--radius-s); border-radius: var(--radius-s);
background: var(--surface); background: var(--surface);
color: var(--text); color: var(--text);
font-size: 0.9rem; font-size: 0.85rem;
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
transition: transition: