From 4a9e686816507c36ec80b1a133a981089d7cca70 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 27 Jun 2022 01:41:18 +1000
Subject: Clean up code in SettingsModal

Add reduced-versions of developer options
Add input-range value indicators
---
 src/App.vue                      |  19 +--
 src/components/SettingsModal.vue | 278 +++++++++++++++++++++------------------
 src/components/Tile.vue          |  10 +-
 3 files changed, 160 insertions(+), 147 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1c80acf..887b9a1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -69,17 +69,9 @@ function getDefaultUiOpts(lytOpts: LayoutOptions): UiOptions {
 	//
 	return {
 		// Shared coloring/sizing
-		textColor,
-		textColorAlt,
-		bgColor,
-		bgColorLight,
-		bgColorDark,
-		bgColorLight2,
-		bgColorDark2,
-		bgColorAlt,
-		bgColorAltDark,
-		altColor,
-		altColorDark,
+		textColor, textColorAlt,
+		bgColor, bgColorLight, bgColorDark, bgColorLight2, bgColorDark2, bgColorAlt, bgColorAltDark,
+		altColor, altColorDark,
 		borderRadius: 5, // px
 		shadowNormal: '0 0 2px black',
 		shadowHovered: '0 0 1px 2px ' + altColor,
@@ -660,6 +652,7 @@ export default defineComponent({
 			this.settingsOpen = true;
 		},
 		async onSettingChg(setting: string){
+			// Save in localStorage
 			if (setting in this.lytOpts){
 				localStorage.setItem(lytOptPrefix + setting, String(this.lytOpts[setting as keyof LayoutOptions]));
 				this.relayoutWithCollapse();
@@ -671,7 +664,7 @@ export default defineComponent({
 			} else {
 				throw new Error('Unexpected setting');
 			}
-			console.log(`Saved ${setting}`)
+			console.log(`Saved setting ${setting}`);
 		},
 		async onTreeChange(){
 			if (this.activeRoot != this.layoutTree){
@@ -683,6 +676,7 @@ export default defineComponent({
 		},
 		onResetSettings(): void {
 			localStorage.clear();
+			// Restore default options
 			let defaultLytOpts = getDefaultLytOpts();
 			let defaultUiOpts = getDefaultUiOpts(defaultLytOpts);
 			if (this.uiOpts.useReducedTree != defaultUiOpts.useReducedTree){
@@ -691,6 +685,7 @@ export default defineComponent({
 			Object.assign(this.lytOpts, defaultLytOpts);
 			Object.assign(this.uiOpts, defaultUiOpts);
 			console.log('Settings reset');
+			//
 			this.relayoutWithCollapse();
 		},
 		// For help events
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index a54fa58..83b42af 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -1,164 +1,182 @@
 <script lang="ts">
+
 import {defineComponent, PropType} from 'vue';
-import CloseIcon from './icon/CloseIcon.vue';
 import RButton from './RButton.vue';
+import CloseIcon from './icon/CloseIcon.vue';
 import {UiOptions} from '../lib';
 import {LayoutOptions} from '../layout';
 
-// Displays configurable options, and sends option-change requests
 export default defineComponent({
 	props: {
 		lytOpts: {type: Object as PropType<LayoutOptions>, required: true},
 		uiOpts: {type: Object as PropType<UiOptions>, required: true},
 	},
+	data(){
+		// For making subsets of various options' values available for user selection
+		let userLayoutTypeVals = [ // Holds pairs of labels with option values
+			['Yes', 'sweep'],
+			['No', 'rect']
+		];
+		let userTileSpacingVals = [
+			['Small', 6],
+			['Medium', 10],
+			['Large', 20]
+		];
+		let userTileSizeVals = [
+			['Default', 50, 200],
+			['Small', 50, 50],
+			['Medium', 100, 100],
+			['Large', 200, 200],
+			['Flexible', 0, 400],
+		];
+		// Warn if user-available values don't include the active option value (indicates a developer mistake)
+		let layoutTypeIdx = userLayoutTypeVals.findIndex(([, optVal]) => optVal == this.lytOpts.layoutType);
+		if (layoutTypeIdx == -1){
+			console.log("WARNING: Initial layoutType option value not included in user setting values");
+		}
+		let tileSpacingIdx = userTileSpacingVals.findIndex(([, optVal]) => optVal == this.lytOpts.tileSpacing);
+		if (tileSpacingIdx == -1){
+			console.log("WARNING: Initial tileSpacing option value not included in user setting values");
+		}
+		let tileSizeValIdx = userTileSizeVals.findIndex(
+			([, min, max]) => min == this.lytOpts.minTileSz && max == this.lytOpts.maxTileSz
+		);
+		if (tileSizeValIdx == -1){
+			console.log("WARNING: Initial minTileSz/maxTileSz option value not included in user setting values");
+		}
+		//
+		return {
+			userLayoutTypeVals,
+			userLayoutType: userLayoutTypeVals[layoutTypeIdx != -1 ? layoutTypeIdx : 0][0],
+			userTileSpacingVals,
+			userTileSpacing: userTileSpacingVals[tileSpacingIdx != -1 ? tileSpacingIdx : 0][0],
+			userTileSizeVals,
+			userTileSize: userTileSizeVals[tileSizeValIdx != -1 ? tileSizeValIdx : 0][0],
+		};
+	},
+	computed: {
+		styles(): Record<string,string> {
+			return {
+				backgroundColor: this.uiOpts.bgColorAlt,
+				borderRadius: this.uiOpts.borderRadius + 'px',
+				boxShadow: this.uiOpts.shadowNormal,
+			};
+		},
+	},
 	methods: {
-		onCloseClick(evt: Event){
+		onClose(evt: Event){
 			if (evt.target == this.$el || (this.$refs.closeIcon as typeof CloseIcon).$el.contains(evt.target)){
 				this.$emit('close');
 			}
 		},
 		onSettingChg(setting: string){
-			if (setting == 'minTileSz'){
-				let minInput = this.$refs.minTileSzInput as HTMLInputElement;
-				let maxInput = this.$refs.maxTileSzInput as HTMLInputElement;
-				if (Number(minInput.value) > Number(maxInput.value)){
-					this.lytOpts.maxTileSz = this.lytOpts.minTileSz;
-				}
-			} else if (setting == 'maxTileSz'){
-				let minInput = this.$refs.minTileSzInput as HTMLInputElement;
-				let maxInput = this.$refs.maxTileSzInput as HTMLInputElement;
-				if (Number(maxInput.value) < Number(minInput.value)){
-					this.lytOpts.minTileSz = this.lytOpts.maxTileSz;
-				}
-			}
 			this.$emit('setting-chg', setting);
 		},
-		onReset(){
-			this.$emit('reset');
+	},
+	watch: {
+		// Propagate option-subsetting user-settings to options
+		userLayoutType(newVal, oldVal){
+			let [,optVal] = this.userLayoutTypeVals.find(([val,]) => val == newVal)!;
+			this.lytOpts.layoutType = optVal as LayoutOptions['layoutType'];
+		},
+		userTileSpacing(newVal, oldVal){
+			let [,optVal] = this.userTileSpacingVals.find(([val,]) => val == newVal)!;
+			this.lytOpts.tileSpacing = optVal as LayoutOptions['tileSpacing'];
+		},
+		userTileSize(newVal, oldVal){
+			let [,min,max] = this.userTileSizeVals.find(([val,,]) => val == newVal)!;
+			this.lytOpts.minTileSz = min as LayoutOptions['minTileSz'];
+			this.lytOpts.maxTileSz = max as LayoutOptions['maxTileSz'];
 		},
 	},
-	components: {CloseIcon, RButton, },
+	components: {RButton, CloseIcon, },
 	emits: ['close', 'setting-chg', 'reset', ],
 });
 </script>
 
 <template>
-<div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onCloseClick">
-	<div class="absolute left-1/2 -translate-x-1/2 w-4/5 top-1/2 -translate-y-1/2 max-h-[80%]
-		p-3 bg-stone-50 visible rounded-md shadow shadow-black">
-		<close-icon @click.stop="onCloseClick" ref="closeIcon"
+<div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onClose">
+	<div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2
+		min-w-[8cm] max-h-[80%] overflow-auto p-3" :style="styles">
+		<close-icon @click.stop="onClose" ref="closeIcon"
 			class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer" />
 		<h1 class="text-xl font-bold mb-2">Settings</h1>
-		<hr class="border-stone-400"/>
-		<div>
-			<label>Tile Spacing <input type="range" min="0" max="20" class="mx-2 w-[3cm]"
-				v-model.number="lytOpts.tileSpacing" @input="onSettingChg('tileSpacing')"/></label>
-		</div>
-		<hr class="border-stone-400"/>
-		<div>
-			<label>
-				<span class="inline-block w-[3cm]">Min Tile Size</span>
-				<input type="range" min="0" max="400" v-model.number="lytOpts.minTileSz" class="w-[3cm]"
-					@input="onSettingChg('minTileSz')" ref="minTileSzInput"/>
-			</label>
-		</div>
-		<div>
-			<label>
-				<span class="inline-block w-[3cm]">Max Tile Size</span>
-				<input type="range" min="0" max="400" v-model.number="lytOpts.maxTileSz" class="w-[3cm]"
-					@input="onSettingChg('maxTileSz')" ref="maxTileSzInput"/>
-			</label>
-		</div>
-		<hr class="border-stone-400"/>
-		<div>
-			Layout Method
-			<ul>
-				<li>
-					<label> <input type="radio" v-model="lytOpts.layoutType" value="sqr"
-						@change="onSettingChg('layoutType')"/> Squares </label>
-				</li>
-				<li>
-					<label> <input type="radio" v-model="lytOpts.layoutType" value="rect"
-						@change="onSettingChg('layoutType')"/> Rectangles </label>
-				</li>
-				<li>
-					<label> <input type="radio" v-model="lytOpts.layoutType" value="sweep"
-						@change="onSettingChg('layoutType')"/> Sweep to side </label>
-				</li>
-			</ul>
-		</div>
-		<hr class="border-stone-400"/>
-		<div>
-			Sweep to parent
-			<ul>
-				<li>
-					<label> <input type="radio" v-model="lytOpts.sweepToParent" value="none"
-						@change="onSettingChg('sweepToParent')"/> None </label>
-				</li>
-				<li>
-					<label> <input type="radio" v-model="lytOpts.sweepToParent" value="prefer"
-						@change="onSettingChg('sweepToParent')"/> Prefer </label>
-				</li>
-				<li>
-					<label> <input type="radio" v-model="lytOpts.sweepToParent" value="fallback"
-						@change="onSettingChg('sweepToParent')"/> Fallback </label>
-				</li>
-			</ul>
-		</div>
-		<hr class="border-stone-400"/>
-		<div>
-			Sweep Mode
-			<ul>
-				<li>
-					<label> <input type="radio" v-model="lytOpts.sweepMode" value="left"
-						@change="onSettingChg('sweepMode')"/> To left </label>
-				</li>
-				<li>
-					<label> <input type="radio" v-model="lytOpts.sweepMode" value="top"
-						@change="onSettingChg('sweepMode')"/> To top </label>
-				</li>
-				<li>
-					<label> <input type="radio" v-model="lytOpts.sweepMode" value="shorter"
-						@change="onSettingChg('sweepMode')"/> To shorter </label>
-				</li>
-				<li>
-					<label> <input type="radio" v-model="lytOpts.sweepMode" value="auto"
-						@change="onSettingChg('sweepMode')"/> Auto </label>
-				</li>
-			</ul>
-		</div>
-		<hr class="border-stone-400"/>
-		<div>
-			<label>Animation Duration <input type="range" min="0" max="3000" class="mx-2 w-[3cm]"
-				v-model.number="uiOpts.transitionDuration" @change="onSettingChg('transitionDuration')"/></label>
-		</div>
-		<hr class="border-stone-400"/>
-		<div>
-			<label>
-				<input type="checkbox" v-model="uiOpts.searchJumpMode" @change="onSettingChg('searchJumpMode')"/>
-				Jump to search result
-			</label>
+		<div class="border rounded">
+			<h2 class="text-center">Layout</h2>
+			<div class="grid grid-cols-2 gap-2">
+				<div>
+					Sweep leaves to side
+					<ul>
+						<li v-for="[val,] in userLayoutTypeVals">
+							<label> <input type="radio" v-model="userLayoutType" :value="val"
+								@change="onSettingChg('layoutType')"/> {{val}} </label>
+						</li>
+					</ul>
+				</div>
+				<div>
+					Sweep into parent
+					<ul>
+						<li> <label> <input type="radio" :disabled="lytOpts.layoutType != 'sweep'"
+							v-model="lytOpts.sweepToParent" value="none"
+							@change="onSettingChg('sweepToParent')"/> Never </label> </li>
+						<li> <label> <input type="radio" :disabled="lytOpts.layoutType != 'sweep'"
+							v-model="lytOpts.sweepToParent" value="prefer"
+							@change="onSettingChg('sweepToParent')"/> Always </label> </li>
+						<li> <label> <input type="radio" :disabled="lytOpts.layoutType != 'sweep'"
+							v-model="lytOpts.sweepToParent" value="fallback"
+							@change="onSettingChg('sweepToParent')"/> If needed </label> </li>
+					</ul>
+				</div>
+				<div>
+					Tile Spacing
+					<ul>
+						<li v-for="[val,] in userTileSpacingVals">
+							<label> <input type="radio" v-model="userTileSpacing" :value="val"
+								@change="onSettingChg('tileSpacing')"/> {{val}} </label>
+						</li>
+					</ul>
+				</div>
+				<div>
+					Tile Size
+					<ul>
+						<li v-for="[val,,] in userTileSizeVals">
+							<label> <input type="radio" v-model="userTileSize" :value="val"
+								@change="onSettingChg('minTileSz'), onSettingChg('maxTileSz')"/> {{val}} </label>
+						</li>
+					</ul>
+				</div>
+			</div>
 		</div>
-		<hr class="border-stone-400"/>
-		<div>
-			Tree
-			<ul>
-				<li>
-					<label> <input type="radio" v-model="uiOpts.useReducedTree" :value="false"
-						@change="onSettingChg('useReducedTree')"/> Default </label>
-				</li>
-				<li>
-					<label> <input type="radio" v-model="uiOpts.useReducedTree" :value="true"
-						@change="onSettingChg('useReducedTree')"/> Reduced </label>
-				</li>
-			</ul>
+		<div class="border rounded">
+			<h2 class="text-center">Timing</h2>
+			<div class="grid grid-cols-3">
+				<!-- Row 1 -->
+				<label for="animationTimeInput">Animation Time</label>
+				<input type="range" min="0" max="3000" class="my-auto" name="animationTimeInput"
+					v-model.number="uiOpts.transitionDuration" @change="onSettingChg('transitionDuration')"/>
+				<div class="my-auto">{{uiOpts.transitionDuration}} ms</div>
+				<!-- Row 2 -->
+				<label for="autoModeDelayInput">Auo-mode Delay</label>
+				<input type="range" min="0" max="3000" class="my-auto" name="autoModeDelayInput"
+					v-model.number="uiOpts.autoActionDelay" @change="onSettingChg('autoActionDelay')"/>
+				<div class="my-auto">{{uiOpts.autoActionDelay}} ms</div>
+			</div>
 		</div>
-		<hr class="border-stone-400"/>
-		<div class="flex justify-around mt-2">
-			<r-button class="bg-stone-800 text-white" @click="onReset">
-				Reset
-			</r-button>
+		<div class="border rounded">
+			<h2 class="text-center">Other</h2>
+			<div>
+				<label> <input type="checkbox" v-model="uiOpts.useReducedTree"
+					@change="onSettingChg('useReducedTree')"/> Use simplified tree </label>
+			</div>
+			<div>
+				<label> <input type="checkbox" v-model="uiOpts.searchJumpMode"
+					@change="onSettingChg('searchJumpMode')"/> Skip search animation </label>
+			</div>
 		</div>
+		<r-button class="mx-auto mt-2" :style="{color: uiOpts.textColor, backgroundColor: uiOpts.bgColor}"
+			@click="$emit('reset')">
+			Reset
+		</r-button>
 	</div>
 </div>
 </template>
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 9983749..608938e 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -327,7 +327,7 @@ export default defineComponent({
 	watch: {
 		// For setting transition state (allows external triggering, like via search and auto-mode)
 		pos: {
-			handler(newVal, oldVal){
+			handler(newVal: [number, number], oldVal: [number, number]){
 				let valChanged = newVal[0] != oldVal[0] || newVal[1] != oldVal[1];
 				if (valChanged && this.uiOpts.transitionDuration > 100 && !this.inTransition){
 					this.inTransition = true;
@@ -336,7 +336,7 @@ export default defineComponent({
 			deep: true,
 		},
 		dims: {
-			handler(newVal, oldVal){
+			handler(newVal: [number, number], oldVal: [number, number]){
 				let valChanged = newVal[0] != oldVal[0] || newVal[1] != oldVal[1];
 				if (valChanged && this.uiOpts.transitionDuration > 100 && !this.inTransition){
 					this.inTransition = true;
@@ -349,7 +349,7 @@ export default defineComponent({
 			this.triggerAnimation(this.isLeaf ? 'animate-expand-shrink' : 'animate-shrink-expand');
 		},
 		// Scroll to focused child if overflownRoot
-		hasFocusedChild(newVal, oldVal){
+		hasFocusedChild(newVal: boolean, oldVal: boolean){
 			if (newVal && this.isOverflownRoot){
 				let focusedChild = this.layoutNode.children.find(n => n.hasFocus)!
 				let bottomY = focusedChild.pos[1] + focusedChild.dims[1] + this.lytOpts.tileSpacing;
@@ -358,14 +358,14 @@ export default defineComponent({
 			}
 		},
 		// Allow overflow temporarily after being unhidden
-		hidden(newVal, oldVal){
+		hidden(newVal: boolean, oldVal: boolean){
 			if (oldVal && !newVal){
 				this.justUnhidden = true;
 				setTimeout(() => {this.justUnhidden = false;}, this.uiOpts.transitionDuration);
 			}
 		},
 		// Used to 'flash' the tile when focused
-		hasFocus(newVal, oldVal){
+		hasFocus(newVal: boolean, oldVal: boolean){
 			if (newVal != oldVal && newVal){
 				this.inFlash = true;
 				setTimeout(() => {this.inFlash = false;}, this.uiOpts.transitionDuration);
-- 
cgit v1.2.3