From 72cdc7bfbb672b6d9f06efe02faaa1a816076dc5 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sat, 25 Jun 2022 20:01:38 +1000
Subject: Fix settings not saving if closed by other_modal/etc

---
 src/App.vue                      | 35 ++++++++++++-----------
 src/components/SearchModal.vue   |  4 +--
 src/components/SettingsModal.vue | 60 +++++++++++++++-------------------------
 3 files changed, 41 insertions(+), 58 deletions(-)

(limited to 'src')

diff --git a/src/App.vue b/src/App.vue
index 14df49f..d1d3aaa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -636,6 +636,20 @@ export default defineComponent({
 			this.resetMode();
 			this.settingsOpen = true;
 		},
+		async onSettingChg(setting: string){
+			if (setting in this.lytOpts){
+				localStorage.setItem(lytOptPrefix + setting, String(this.lytOpts[setting as keyof LayoutOptions]));
+				this.relayoutWithCollapse();
+			} else if (setting in this.uiOpts){
+				localStorage.setItem(uiOptPrefix + setting, String(this.uiOpts[setting as keyof UiOptions]));
+				if (setting == 'useReducedTree'){
+					this.onTreeChange();
+				}
+			} else {
+				throw new Error('Unexpected setting');
+			}
+			console.log(`Saved ${setting}`)
+		},
 		async onTreeChange(){
 			if (this.activeRoot != this.layoutTree){
 				// Collapse tree to root
@@ -644,20 +658,6 @@ export default defineComponent({
 			await this.onNonleafClick(this.layoutTree);
 			await this.initTreeFromServer();
 		},
-		onSettingsChg(changedLytOpts: Iterable<string>, changedUiOpts: Iterable<string>): void {
-			let changed = false;
-			for (let opt of changedLytOpts){
-				localStorage.setItem(lytOptPrefix + opt, String(this.lytOpts[opt as keyof LayoutOptions]));
-				changed = true;
-			}
-			for (let opt of changedUiOpts){
-				localStorage.setItem(uiOptPrefix + opt, String(this.uiOpts[opt]));
-				changed = true;
-			}
-			if (changed){
-				console.log('Settings saved');
-			}
-		},
 		onResetSettings(): void {
 			localStorage.clear();
 			let defaultLytOpts = getDefaultLytOpts();
@@ -780,7 +780,7 @@ export default defineComponent({
 				// If search bar is open, switch search mode
 				if (this.searchOpen){
 					this.uiOpts.searchJumpMode = !this.uiOpts.searchJumpMode;
-					this.onSettingsChg([], ['searchJumpMode']);
+					this.onSettingChg('searchJumpMode');
 				}
 			}
 		},
@@ -996,7 +996,7 @@ export default defineComponent({
 	<!-- Modals -->
 	<transition name="fade">
 		<search-modal v-if="searchOpen" :tolMap="tolMap" :uiOpts="uiOpts" ref="searchModal"
-			@close="searchOpen = false" @search="onSearch" @info-click="onInfoClick" @settings-chg="onSettingsChg" />
+			@close="searchOpen = false" @search="onSearch" @info-click="onInfoClick" @setting-chg="onSettingChg" />
 	</transition>
 	<transition name="fade">
 		<tile-info-modal v-if="infoModalNodeName != null"
@@ -1007,8 +1007,7 @@ export default defineComponent({
 		<help-modal v-if="helpOpen" :uiOpts="uiOpts" @close="helpOpen = false" @start-tutorial="onStartTutorial"/>
 	</transition>
 	<settings-modal v-if="settingsOpen" :lytOpts="lytOpts" :uiOpts="uiOpts" class="z-10"
-		@close="settingsOpen = false" @reset="onResetSettings"
-		@settings-chg="onSettingsChg" @layout-setting-chg="relayoutWithCollapse" @tree-chg="onTreeChange"/>
+		@close="settingsOpen = false" @reset="onResetSettings" @setting-chg="onSettingChg"/>
 	<!-- Overlay used to prevent interaction and capture clicks -->
 	<div :style="{visibility: modeRunning ? 'visible' : 'hidden'}"
 		class="absolute left-0 top-0 w-full h-full" @click="modeRunning = false"></div>
diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index a3fbd14..166c9f8 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -72,7 +72,7 @@ export default defineComponent({
 		},
 		onSearchModeChg(){
 			this.uiOpts.searchJumpMode = !this.uiOpts.searchJumpMode;
-			this.$emit('settings-chg', [], ['searchJumpMode']);
+			this.$emit('setting-chg', 'searchJumpMode');
 		},
 		resolveSearch(tolNodeName: string){
 			if (tolNodeName == ''){
@@ -191,7 +191,7 @@ export default defineComponent({
 		(this.$refs.searchInput as HTMLInputElement).focus();
 	},
 	components: {SearchIcon, InfoIcon, LogInIcon, },
-	emits: ['search', 'close', 'info-click', 'settings-chg', ],
+	emits: ['search', 'close', 'info-click', 'setting-chg', ],
 });
 </script>
 
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index 8cebf7c..a54fa58 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -11,50 +11,34 @@ export default defineComponent({
 		lytOpts: {type: Object as PropType<LayoutOptions>, required: true},
 		uiOpts: {type: Object as PropType<UiOptions>, required: true},
 	},
-	data(){
-		return {
-			changedLytOpts: new Set(),
-			changedUiOpts: new Set(),
-		};
-	},
 	methods: {
 		onCloseClick(evt: Event){
 			if (evt.target == this.$el || (this.$refs.closeIcon as typeof CloseIcon).$el.contains(evt.target)){
-				this.$emit('settings-chg', this.changedLytOpts, this.changedUiOpts);
 				this.$emit('close');
 			}
 		},
-		onLytOptChg(opt: string){
-			if (opt == 'minTileSz'){
+		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;
-					this.changedLytOpts.add('maxTileSz');
 				}
-			} else if (opt == 'maxTileSz'){
+			} 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.changedLytOpts.add('minTileSz');
 				}
 			}
-			this.$emit('layout-setting-chg');
-			this.changedLytOpts.add(opt);
-		},
-		onUiOptChg(opt: string){
-			if (opt == 'useReducedTree'){
-				this.$emit('tree-chg');
-			}
-			this.changedUiOpts.add(opt);
+			this.$emit('setting-chg', setting);
 		},
 		onReset(){
 			this.$emit('reset');
 		},
 	},
 	components: {CloseIcon, RButton, },
-	emits: ['close', 'layout-setting-chg', 'tree-chg', 'reset', 'settings-chg', ],
+	emits: ['close', 'setting-chg', 'reset', ],
 });
 </script>
 
@@ -68,21 +52,21 @@ export default defineComponent({
 		<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="onLytOptChg('tileSpacing')"/></label>
+				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="onLytOptChg('minTileSz')" ref="minTileSzInput"/>
+					@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="onLytOptChg('maxTileSz')" ref="maxTileSzInput"/>
+					@input="onSettingChg('maxTileSz')" ref="maxTileSzInput"/>
 			</label>
 		</div>
 		<hr class="border-stone-400"/>
@@ -91,15 +75,15 @@ export default defineComponent({
 			<ul>
 				<li>
 					<label> <input type="radio" v-model="lytOpts.layoutType" value="sqr"
-						@change="onLytOptChg('layoutType')"/> Squares </label>
+						@change="onSettingChg('layoutType')"/> Squares </label>
 				</li>
 				<li>
 					<label> <input type="radio" v-model="lytOpts.layoutType" value="rect"
-						@change="onLytOptChg('layoutType')"/> Rectangles </label>
+						@change="onSettingChg('layoutType')"/> Rectangles </label>
 				</li>
 				<li>
 					<label> <input type="radio" v-model="lytOpts.layoutType" value="sweep"
-						@change="onLytOptChg('layoutType')"/> Sweep to side </label>
+						@change="onSettingChg('layoutType')"/> Sweep to side </label>
 				</li>
 			</ul>
 		</div>
@@ -109,15 +93,15 @@ export default defineComponent({
 			<ul>
 				<li>
 					<label> <input type="radio" v-model="lytOpts.sweepToParent" value="none"
-						@change="onLytOptChg('sweepToParent')"/> None </label>
+						@change="onSettingChg('sweepToParent')"/> None </label>
 				</li>
 				<li>
 					<label> <input type="radio" v-model="lytOpts.sweepToParent" value="prefer"
-						@change="onLytOptChg('sweepToParent')"/> Prefer </label>
+						@change="onSettingChg('sweepToParent')"/> Prefer </label>
 				</li>
 				<li>
 					<label> <input type="radio" v-model="lytOpts.sweepToParent" value="fallback"
-						@change="onLytOptChg('sweepToParent')"/> Fallback </label>
+						@change="onSettingChg('sweepToParent')"/> Fallback </label>
 				</li>
 			</ul>
 		</div>
@@ -127,31 +111,31 @@ export default defineComponent({
 			<ul>
 				<li>
 					<label> <input type="radio" v-model="lytOpts.sweepMode" value="left"
-						@change="onLytOptChg('sweepMode')"/> To left </label>
+						@change="onSettingChg('sweepMode')"/> To left </label>
 				</li>
 				<li>
 					<label> <input type="radio" v-model="lytOpts.sweepMode" value="top"
-						@change="onLytOptChg('sweepMode')"/> To top </label>
+						@change="onSettingChg('sweepMode')"/> To top </label>
 				</li>
 				<li>
 					<label> <input type="radio" v-model="lytOpts.sweepMode" value="shorter"
-						@change="onLytOptChg('sweepMode')"/> To shorter </label>
+						@change="onSettingChg('sweepMode')"/> To shorter </label>
 				</li>
 				<li>
 					<label> <input type="radio" v-model="lytOpts.sweepMode" value="auto"
-						@change="onLytOptChg('sweepMode')"/> Auto </label>
+						@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="onUiOptChg('transitionDuration')"/></label>
+				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="onUiOptChg('searchJumpMode')"/>
+				<input type="checkbox" v-model="uiOpts.searchJumpMode" @change="onSettingChg('searchJumpMode')"/>
 				Jump to search result
 			</label>
 		</div>
@@ -161,11 +145,11 @@ export default defineComponent({
 			<ul>
 				<li>
 					<label> <input type="radio" v-model="uiOpts.useReducedTree" :value="false"
-						@change="onUiOptChg('useReducedTree')"/> Default </label>
+						@change="onSettingChg('useReducedTree')"/> Default </label>
 				</li>
 				<li>
 					<label> <input type="radio" v-model="uiOpts.useReducedTree" :value="true"
-						@change="onUiOptChg('useReducedTree')"/> Reduced </label>
+						@change="onSettingChg('useReducedTree')"/> Reduced </label>
 				</li>
 			</ul>
 		</div>
-- 
cgit v1.2.3