From 3a5acfbc452a2a2fc350dc4e803b0846473779c2 Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Mon, 24 Aug 2026 06:02:32 +0500
Subject: [PATCH] refactor: change show mask flow - checkbox in params

---
 web/src/lib/components/ToolPage.svelte        |  9 ++++++---
 web/src/lib/components/tool/ParamsCard.svelte | 17 +++++++++++++++--
 web/src/lib/components/tool/ResultCard.svelte | 15 +++------------
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/web/src/lib/components/ToolPage.svelte b/web/src/lib/components/ToolPage.svelte
index 06e163d..8a96d73 100644
--- a/web/src/lib/components/ToolPage.svelte
+++ b/web/src/lib/components/ToolPage.svelte
@@ -39,6 +39,8 @@
 	const canChainBase = $derived(
 		(tool.resultType ?? 'image') === 'image' && tool.sourceMode !== 'text'
 	);
+	const hasMask = $derived(typeof tool.preview === 'function');
+	const shownBase = $derived(showMask && previewResult ? previewResult : result);
 	const hasFilledSteps = $derived(chain.some((step) => step.toolId !== ''));
 
 	function addChainStep() {
@@ -272,15 +274,14 @@
 				sourceLoaded={isSourceless ? true : !!source}
 				{status}
 				{result}
-				{previewResult}
-				bind:showMask
+				displayImage={shownBase}
 				{info}
 				{isInfo}
 				params={sanitized}
 				textResult={textResult}
-				onDownloadError={showError}
 				onChainToggle={canChainBase ? toggleChain : undefined}
 				hasChain={chain.length > 0}
+				onDownloadError={showError}
 			/>
 		</div>
 	</div>
@@ -292,6 +293,8 @@
 				bind:values
 				{pipetteTargetId}
 				onPipetteToggle={handlePipetteToggle}
+				hasMask={hasMask}
+				bind:showMask
 			/>
 		</div>
 	{/if}
diff --git a/web/src/lib/components/tool/ParamsCard.svelte b/web/src/lib/components/tool/ParamsCard.svelte
index 3c14720..770549d 100644
--- a/web/src/lib/components/tool/ParamsCard.svelte
+++ b/web/src/lib/components/tool/ParamsCard.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import CheckboxField from '../ui/CheckboxField.svelte';
 	import ParamForm from '../ParamForm.svelte';
 	import type { ParamDef } from '$lib/registry';
 
@@ -7,16 +8,28 @@
 		values: Record<string, any>;
 		pipetteTargetId?: string | null;
 		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>
 
 <div class="panel root">
 	<h2 class="heading-section">Параметры</h2>
+	{#if hasMask}
+		<CheckboxField id="show-mask" label="Показать маску" bind:checked={showMask} />
+	{/if}
 	{#if params.length > 0}
 		<ParamForm {params} bind:values {pipetteTargetId} {onPipetteToggle} />
-	{:else}
+	{:else if !hasMask}
 		<p class="hint text-caption text-muted">
 			У этого инструмента нет параметров — результат уже готов.
 		</p>
diff --git a/web/src/lib/components/tool/ResultCard.svelte b/web/src/lib/components/tool/ResultCard.svelte
index 5ed85a5..b6a9d07 100644
--- a/web/src/lib/components/tool/ResultCard.svelte
+++ b/web/src/lib/components/tool/ResultCard.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import CheckboxField from '../ui/CheckboxField.svelte';
 	import Button from '../ui/Button.svelte';
 	import DownloadButton from '../DownloadButton.svelte';
 	import EmptyState from '../ui/EmptyState.svelte';
@@ -17,8 +16,7 @@
 		sourceLoaded: boolean;
 		status: Status;
 		result: PixelImage | null;
-		previewResult: PixelImage | null;
-		showMask: boolean;
+		displayImage: PixelImage | null;
 		info: ImageInfo | null;
 		isInfo: boolean;
 		params: Record<string, unknown>;
@@ -33,8 +31,7 @@
 		sourceLoaded,
 		status,
 		result,
-		previewResult,
-		showMask = $bindable(false),
+		displayImage,
 		info,
 		isInfo,
 		params,
@@ -43,9 +40,6 @@
 		hasChain = false,
 		onDownloadError
 	}: Props = $props();
-
-	const hasPreview = $derived(typeof tool.preview === 'function');
-	const shown = $derived(showMask && previewResult ? previewResult : result);
 </script>
 
 <div class="container">
@@ -77,11 +71,8 @@
 			{/if}
 		</div>
 	{:else}
-		{#if hasPreview}
-			<CheckboxField id="show-mask" label="Показать маску" bind:checked={showMask} />
-		{/if}
 		<div class="media">
-			<Preview image={shown} />
+			<Preview image={displayImage} />
 			{#if status === 'processing'}
 				<span class="recalc" aria-live="polite">Пересчёт…</span>
 			{/if}