aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/App.vue35
-rw-r--r--src/components/SearchModal.vue4
-rw-r--r--src/components/SettingsModal.vue60
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>
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-25 10:58:34 +0000