diff options
| -rw-r--r-- | src/App.vue | 35 | ||||
| -rw-r--r-- | src/components/SearchModal.vue | 4 | ||||
| -rw-r--r-- | src/components/SettingsModal.vue | 60 |
3 files changed, 41 insertions, 58 deletions
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> |