Allow single-setting-resets via settings-label-clicks

1 files changed, 55 insertions, 17 deletions

diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index 2e4d217..42647a5 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -9,16 +9,16 @@
 			<h2 class="text-center">Layout</h2>
 			<div class="flex gap-2">
 				<div class="grow">
-					Sweep leaves to side
+					<div @click="onReset('LYT', 'layoutType')" :class="labelClasses">Sweep leaves to side</div>
 					<ul>
 						<li> <label> <input type="radio" v-model="sweepLeaves" :value="true"
-								@change="onSettingChg('LYT', 'layoutType')"/> Yes </label> </li>
+							@change="onSettingChg('LYT', 'layoutType')"/> Yes </label> </li>
 						<li> <label> <input type="radio" v-model="sweepLeaves" :value="false"
-								@change="onSettingChg('LYT', 'layoutType')"/> No </label> </li>
+							@change="onSettingChg('LYT', 'layoutType')"/> No </label> </li>
 					</ul>
 				</div>
 				<div class="grow">
-					Sweep into parent
+					<div @click="onReset('LYT', 'sweepToParent')" :class="labelClasses">Sweep into parent</div>
 					<ul>
 						<li> <label> <input type="radio" :disabled="!sweepLeaves" v-model="lytOpts.sweepToParent"
 							value="none" @change="onSettingChg('LYT', 'sweepToParent')"/> Never </label> </li>
@@ -31,19 +31,25 @@
 			</div>
 			<div class="grid grid-cols-[minmax(0,3fr)_minmax(0,4fr)_minmax(0,2fr)] gap-1">
 				<!-- Row 1 -->
-				<label for="minTileSizeInput">Min Tile Size</label>
+				<label for="minTileSizeInput" @click="onReset('LYT', 'minTileSz')" :class="labelClasses">
+					Min Tile Size
+				</label>
 				<input type="range" min="0" max="400" v-model.number="lytOpts.minTileSz"
 					@input="onSettingChg('LYT', 'minTileSz', false)" @change="onSettingChg('LYT', 'minTileSz')"
 					name="minTileSizeInput" ref="minTileSzInput"/>
 				<div class="my-auto text-right">{{pxToDisplayStr(lytOpts.minTileSz)}}</div>
 				<!-- Row 2 -->
-				<label for="maxTileSizeInput">Max Tile Size</label>
+				<label for="maxTileSizeInput" @click="onReset('LYT', 'maxTileSz')" :class="labelClasses">
+					Max Tile Size
+				</label>
 				<input type="range" min="0" max="400" v-model.number="lytOpts.maxTileSz"
 					@input="onSettingChg('LYT', 'maxTileSz', false)" @change="onSettingChg('LYT', 'maxTileSz')"
 					name="maxTileSizeInput" ref="maxTileSzInput"/>
 				<div class="my-auto text-right">{{pxToDisplayStr(lytOpts.maxTileSz)}}</div>
 				<!-- Row 3 -->
-				<label for="tileSpacingInput">Tile Spacing</label>
+				<label for="tileSpacingInput" @click="onReset('LYT', 'tileSpacing')" :class="labelClasses">
+					Tile Spacing
+				</label>
 				<input type="range" min="0" max="20" v-model.number="lytOpts.tileSpacing"
 					@input="onSettingChg('LYT', 'tileSpacing', false)" @change="onSettingChg('LYT', 'tileSpacing')"
 					name="tileSpacingInput"/>
@@ -54,30 +60,38 @@
 			<h2 class="text-center">Timing</h2>
 			<div class="grid grid-cols-[minmax(0,3fr)_minmax(0,4fr)_minmax(0,2fr)] gap-1">
 				<!-- Row 1 -->
-				<label for="animationTimeInput">Animation Time</label>
+				<label for="animTimeInput" @click="onReset('UI', 'transitionDuration')" :class="labelClasses">
+					Animation Time
+				</label>
 				<input type="range" min="0" max="3000" v-model.number="uiOpts.transitionDuration"
-					@change="onSettingChg('UI', 'transitionDuration')" class="my-auto" name="animationTimeInput"/>
+					@change="onSettingChg('UI', 'transitionDuration')" class="my-auto" name="animTimeInput"/>
 				<div class="my-auto text-right">{{uiOpts.transitionDuration}} ms</div>
 				<!-- Row 2 -->
-				<label for="autoModeDelayInput">Auto-mode Delay</label>
+				<label for="autoDelayInput" @click="onReset('UI', 'autoActionDelay')" :class="labelClasses">
+					Auto-mode Delay
+				</label>
 				<input type="range" min="0" max="3000" v-model.number="uiOpts.autoActionDelay"
-					@change="onSettingChg('UI', 'autoActionDelay')" class="my-auto" name="autoModeDelayInput"/>
+					@change="onSettingChg('UI', 'autoActionDelay')" class="my-auto" name="autoDelayInput"/>
 				<div class="my-auto text-right">{{uiOpts.autoActionDelay}} ms</div>
 			</div>
 		</div>
 		<div class="border rounded p-1">
 			<h2 class="text-center">Other</h2>
 			<div>
-				<label> <input type="checkbox" v-model="uiOpts.useReducedTree"
-					@change="onSettingChg('UI', 'useReducedTree')"/> Use simplified tree </label>
+				<input type="checkbox" v-model="uiOpts.useReducedTree"
+					@change="onSettingChg('UI', 'useReducedTree')" name="useReducedTreeInput"/>
+				<label for="useReducedTreeInput" @click="onReset('UI', 'useReducedTree')"
+					:class="labelClasses" class="ml-1"> Use simplified tree </label>
 			</div>
 			<div>
-				<label> <input type="checkbox" v-model="uiOpts.searchJumpMode"
-					@change="onSettingChg('UI', 'searchJumpMode')"/> Skip search animation </label>
+				<input type="checkbox" v-model="uiOpts.searchJumpMode"
+					@change="onSettingChg('UI', 'searchJumpMode')" name="searchModeInput"/>
+				<label for="searchModeInput" @click="onReset('UI', 'searchJumpMode')"
+					:class="labelClasses" class="ml-1"> Skip search animation </label>
 			</div>
 		</div>
 		<s-button class="mx-auto mt-2" :style="{color: uiOpts.textColor, backgroundColor: uiOpts.bgColor}"
-			@click="onReset">
+			@click="onResetAll">
 			Reset
 		</s-button>
 		<transition name="fade">
@@ -116,6 +130,9 @@ export default defineComponent({
 				boxShadow: this.uiOpts.shadowNormal,
 			};
 		},
+		labelClasses(): Record<string,string> {
+			return "w-fit hover:cursor-pointer hover:text-lime-600";
+		},
 	},
 	watch: {
 		sweepLeaves(newVal: boolean, oldVal: boolean){
@@ -156,7 +173,28 @@ export default defineComponent({
 				}
 			}
 		},
-		onReset(){
+		onReset(optionType: OptionType, option: string){
+			let defaultLytOpts = getDefaultLytOpts();
+			let defaultUiOpts = getDefaultUiOpts(defaultLytOpts);
+			if (optionType == 'LYT'){
+				let lytOpt = option as keyof LayoutOptions;
+				if (this.lytOpts[lytOpt] == defaultLytOpts[lytOpt]){
+					return;
+				}
+				(this.lytOpts[lytOpt] as any) = defaultLytOpts[lytOpt];
+				if (option == 'layoutType'){
+					this.sweepLeaves = this.lytOpts.layoutType == 'sweep';
+				}
+			} else {
+				let uiOpt = option as keyof UiOptions;
+				if (this.uiOpts[uiOpt] == defaultUiOpts[uiOpt]){
+					return;
+				}
+				(this.uiOpts[uiOpt] as any) = defaultUiOpts[uiOpt];
+			}
+			this.onSettingChg(optionType, option);
+		},
+		onResetAll(){
 			// Restore default options
 			let defaultLytOpts = getDefaultLytOpts();
 			let defaultUiOpts = getDefaultUiOpts(defaultLytOpts);