sinkのparametersから変換オプションのGUIを生成する(Poc) (#563)

<!-- Close or Related Issues -->
Close #334

### Description（変更内容）
<!-- Please describe the motivation behind this PR and the changes it
introduces. -->
<!-- 何のために、どのような変更をしますか？ -->


![image](https://github.com/MIERUNE/plateau-gis-converter/assets/84182110/fc68c1d1-24bf-4fac-a6d2-e05ecacc130a)


- sinkのparametersをUIから変更できるようにしました（MVTのみ）
- UIはIntegerのみ対応。StringとBooleanは仮実装してますが、まだ使用してないのでコメントアウトしてます。
- 入力ファイルと出力ファイルが指定されてない場合は変換ボタンを押せないようにしました。

### Manual Testing（手動テスト）
<!-- If manual testing is required, please describe the procedure. -->
<!-- 手動での動作確認が必要なら、そのやり方を記述してください。-->

- MVTのズームレベルを変更して出力できるか確認

app/src-tauri/src/main.rs

@@ -9,6 +9,7 @@ use std::{
 };
 
 use log::LevelFilter;
+use nusamai::parameters::Parameters;
 use nusamai::{
     pipeline::{feedback, Canceller},
     sink::{
@@ -57,6 +58,7 @@ fn main() {
         .invoke_handler(tauri::generate_handler![
             run_conversion,
             cancel_conversion,
+            get_parameter,
             get_transform
         ])
         .run(tauri::generate_context!())
@@ -134,6 +136,7 @@ fn run_conversion(
     epsg: u16,
     rules_path: String,
     transformer_options: Vec<TransformerOption>,
+    sink_parameters: Parameters,
     tasks_state: tauri::State<ConversionTasksState>,
     window: tauri::Window,
 ) -> Result<(), Error> {
@@ -174,7 +177,7 @@ fn run_conversion(
             Error::InvalidSetting(msg)
         })?;
 
-        let mut sink_params = sink_provider.parameters();
+        let mut sink_params = sink_parameters;
         if let Err(err) = sink_params.update_values_with_str(&sinkopt) {
             let msg = format!("Error parsing sink options: {:?}", err);
             log::error!("{}", msg);
@@ -307,3 +310,16 @@ fn get_transform(filetype: String) -> Result<TransformerRegistry, Error> {
 
     Ok(transformer_registry)
 }
+
+/// Get the configurable parameters of the sink
+#[tauri::command]
+fn get_parameter(filetype: String) -> Result<Parameters, Error> {
+    let sink_provider = select_sink_provider(&filetype).ok_or_else(|| {
+        let msg = format!("Invalid sink type: {}", filetype);
+        log::error!("{}", msg);
+        Error::InvalidSetting(msg)
+    })?;
+    let sink_params = sink_provider.parameters();
+
+    Ok(sink_params)
+}

app/src/app.css

@@ -5,3 +5,16 @@
 body {
 	@apply text-base;
 }
+
+body::-webkit-scrollbar {
+	width: 9px;
+	height: 9px;
+}
+
+body::-webkit-scrollbar-track {
+	background-color: #d9d9d9;
+}
+
+body::-webkit-scrollbar-thumb {
+	background-color: rgb(0 190 190);
+}

app/src/lib/sinkparams.ts

@@ -0,0 +1,55 @@
+export interface IntegerParameter {
+	Integer: {
+		value: number;
+		min?: number;
+		max?: number;
+	};
+}
+
+export interface StringParameter {
+	String: {
+		value: string;
+	};
+}
+
+export interface BooleanParameter {
+	Boolean: {
+		value: boolean;
+	};
+}
+
+type Parameter = IntegerParameter | StringParameter | BooleanParameter;
+
+interface ParamsOptionItem {
+	parameter: Parameter;
+	description: string;
+	label?: string;
+}
+
+export interface SinkParameters {
+	items: {
+		[key: string]: ParamsOptionItem;
+	};
+}
+
+// Check the parameter type
+export function isIntegerParameter(
+	parameter: Parameter
+): parameter is { Integer: { value: number; min: number; max: number } } {
+	return (parameter as { Integer?: unknown }).Integer !== undefined;
+}
+export function isStringParameter(
+	parameter: Parameter
+): parameter is { String: { value: string } } {
+	return (parameter as { String?: unknown }).String !== undefined;
+}
+export function isBooleanParameter(
+	parameter: Parameter
+): parameter is { Boolean: { value: boolean } } {
+	return (parameter as { Boolean?: unknown }).Boolean !== undefined;
+}
+
+export function createRangeArray(min: number, max: number): number[] {
+	if (min > max) throw new Error('min should be less than or equal to max');
+	return Array.from({ length: max - min + 1 }, (_, i) => min + i);
+}

app/src/routes/+page.svelte

@@ -2,6 +2,7 @@
 	import { message } from '@tauri-apps/api/dialog';
 	import { invoke } from '@tauri-apps/api/tauri';
 	import { attachConsole } from 'tauri-plugin-log-api';
+	import type { SinkParameters } from '$lib/sinkparams';
 
 	import Icon from '@iconify/svelte';
 	import InputSelector from './InputSelector.svelte';
@@ -16,20 +17,14 @@
 	let epsg: number;
 	let rulesPath = '';
 	let outputPath = '';
+	let sinkParameters = {} as SinkParameters;
 	let isRunning = false;
+	let isConvertButtonDisabled = true;
+
+	$: isConvertButtonDisabled = !inputPaths.length || !outputPath || isRunning;
 	let transformerRegistry: { key: string; label: string; is_enabled: boolean }[];
 
 	async function convertAndSave() {
-		if (!inputPaths) {
-			await message('入力フォルダ/ファイルを選択してください', { type: 'warning' });
-			return;
-		}
-
-		if (!outputPath) {
-			await message('出力先を選択してください', { type: 'warning' });
-			return;
-		}
-
 		isRunning = true;
 
 		const transformerOptions = transformerRegistry.map((transformerConfig) => {
@@ -46,7 +41,8 @@
 				filetype,
 				epsg,
 				rulesPath,
-				transformerOptions
+				transformerOptions,
+				sinkParameters
 			});
 			isRunning = false;
 			await message(`変換が完了しました。\n'${outputPath}' に出力しました。`, { type: 'info' });
@@ -63,7 +59,7 @@
 </script>
 
 {#if isRunning}
-	<div class="absolute inset-0 bg-black/70 backdrop-blur-[2px] z-20">
+	<div class="fixed inset-0 bg-black/70 backdrop-blur-[2px] z-20 h-screen">
 		<LoadingAnimation />
 	</div>
 {/if}
@@ -79,14 +75,23 @@
 
 		<InputSelector bind:inputPaths />
 
-		<SettingSelector bind:filetype bind:epsg bind:rulesPath bind:transformerRegistry />
+		<SettingSelector
+			bind:filetype
+			bind:epsg
+			bind:rulesPath
+			bind:sinkParameters
+			bind:transformerRegistry
+		/>
 
 		<OutputSelector {filetype} bind:outputPath />
 
 		<div class="flex justify-end">
 			<button
 				on:click={convertAndSave}
-				class="bg-accent1 flex items-center font-bold py-1.5 pl-3 pr-5 rounded-full gap-1 shawdow-2xl hover:opacity-75"
+				disabled={isConvertButtonDisabled}
+				class="bg-accent1 flex items-center font-bold py-1.5 pl-3 pr-5 rounded-full gap-1 shawdow-2xl {isConvertButtonDisabled
+					? 'opacity-50'
+					: ''}"
 			>
 				<Icon class="text-lg" icon="ic:baseline-play-arrow" />
 				変換

app/src/routes/InputSelector.svelte

@@ -90,7 +90,7 @@
 			<div class="text-sm">
 				{#if isFolderMode}
 					{#if inputFolders.length === 0}
-						<p class="opacity-50">フォルダが選択されていません</p>
+						<p class="text-red-400">フォルダが選択されていません</p>
 					{:else}
 						<div class="flex items-center gap-1">
 							<p>
@@ -112,7 +112,7 @@
 						</div>
 					{/if}
 				{:else if inputPaths.length === 0}
-					<p class="opacity-50">ファイルが選択されていません</p>
+					<p class="text-red-400">ファイルが選択されていません</p>
 				{:else}
 					<div class="flex items-center gap-1">
 						<p><b>{inputPaths.length}</b> ファイル</p>

app/src/routes/OutputSelector.svelte

@@ -43,7 +43,7 @@
 				on:click={openOutputDialog}
 				class="bg-accent1 font-semibold rounded px-4 py-0.5 shadow hover:opacity-75">選択</button
 			>
-			<div class="text-sm" class:opacity-50={!outputPath}>
+			<div class="text-sm">
 				{#if outputPath}
 					<div class="flex justify-center items-center gap-1.5">
 						<p><code>{abbreviatePath(outputPath, 40)}</code></p>
@@ -52,7 +52,7 @@
 						</button>
 					</div>
 				{:else}
-					<p>出力先が選択されていません</p>
+					<p class="text-red-400">出力先が選択されていません</p>
 				{/if}
 			</div>
 		</div>