aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/App.vue32
-rw-r--r--src/components/SettingsModal.vue36
-rw-r--r--src/lib.ts2
3 files changed, 35 insertions, 35 deletions
diff --git a/src/App.vue b/src/App.vue
index 614121c..1937997 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -84,7 +84,7 @@ import SettingsIcon from './components/icon/SettingsIcon.vue';
import HelpIcon from './components/icon/HelpIcon.vue';
// Other
// Note: Import paths lack a .ts or .js extension because .ts makes vue-tsc complain, and .js makes vite complain
-import {TolNode, TolMap, getServerResponse, InfoResponse, Action, UiOptions} from './lib';
+import {TolNode, TolMap, getServerResponse, InfoResponse, Action, UiOptions, OptionType} from './lib';
import {LayoutNode, LayoutOptions, LayoutTreeChg} from './layout';
import {initLayoutTree, initLayoutMap, tryLayout} from './layout';
import {getBreakpoint, getScrollBarWidth, isTouchDevice,
@@ -167,8 +167,6 @@ function getDefaultUiOpts(lytOpts: LayoutOptions): UiOptions {
useDblClick: isTouchDevice(),
};
}
-const lytOptPrefix = 'LYT '; // Used when saving to localStorage
-const uiOptPrefix = 'UI ';
export default defineComponent({
data(){
@@ -722,20 +720,20 @@ export default defineComponent({
this.resetMode();
this.settingsOpen = true;
},
- async onSettingChg(setting: string){
+ async onSettingChg(optionType: OptionType, option: string){
// Save in localStorage
- if (setting in this.lytOpts){
- localStorage.setItem(lytOptPrefix + setting, String(this.lytOpts[setting as keyof LayoutOptions]));
+ if (optionType == 'LYT'){
+ localStorage.setItem(`${optionType} ${option}`, String(this.lytOpts[option 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'){
+ } else if (optionType == 'UI') {
+ localStorage.setItem(`${optionType} ${option}`, String(this.uiOpts[option as keyof UiOptions]));
+ if (option == 'useReducedTree'){
this.onTreeChange();
}
} else {
- throw new Error('Unexpected setting');
+ throw new Error(`Unexpected setting: ${optionType}, ${option}`);
}
- console.log(`Saved setting ${setting}`);
+ console.log(`Saved setting: ${optionType}, ${option}`);
},
async onTreeChange(){
if (this.activeRoot != this.layoutTree){
@@ -781,7 +779,7 @@ export default defineComponent({
},
onTutorialSkip(): void {
// Remember to skip in future sessions
- localStorage.setItem(uiOptPrefix + 'tutorialSkip', String(true));
+ localStorage.setItem('UI tutorialSkip', String(true));
},
onStartTutorial(): void {
if (!this.tutPaneOpen){
@@ -814,13 +812,13 @@ export default defineComponent({
let uiOpts = getDefaultUiOpts(lytOpts);
let changedTree = false;
for (let prop of Object.getOwnPropertyNames(lytOpts) as (keyof LayoutOptions)[]){
- let item = localStorage.getItem(lytOptPrefix + prop);
+ let item = localStorage.getItem('LYT ' + prop);
if (item == null && this.lytOpts[prop] != lytOpts[prop]){
this.lytOpts[prop] = lytOpts[prop];
}
}
for (let prop of Object.getOwnPropertyNames(uiOpts) as (keyof UiOptions)[]){
- let item = localStorage.getItem(uiOptPrefix + prop);
+ let item = localStorage.getItem('UI ' + prop);
//Not: Using JSON.stringify here to roughly deep-compare values
if (item == null && JSON.stringify(this.uiOpts[prop]) != JSON.stringify(uiOpts[prop])){
this.uiOpts[prop] = uiOpts[prop];
@@ -871,7 +869,7 @@ export default defineComponent({
// If search bar is open, switch search mode
if (this.searchOpen){
this.uiOpts.searchJumpMode = !this.uiOpts.searchJumpMode;
- this.onSettingChg('searchJumpMode');
+ this.onSettingChg('UI', 'searchJumpMode');
}
}
},
@@ -913,7 +911,7 @@ export default defineComponent({
getLytOpts(): LayoutOptions {
let opts = getDefaultLytOpts();
for (let prop of Object.getOwnPropertyNames(opts) as (keyof LayoutOptions)[]){
- let item = localStorage.getItem(lytOptPrefix + prop);
+ let item = localStorage.getItem('LYT ' + prop);
if (item != null){
switch (typeof(opts[prop])){
case 'boolean': (opts[prop] as unknown as boolean) = Boolean(item); break;
@@ -928,7 +926,7 @@ export default defineComponent({
getUiOpts(): UiOptions {
let opts = getDefaultUiOpts(getDefaultLytOpts());
for (let prop of Object.getOwnPropertyNames(opts) as (keyof UiOptions)[]){
- let item = localStorage.getItem(uiOptPrefix + prop);
+ let item = localStorage.getItem('UI ' + prop);
if (item != null){
switch (typeof(opts[prop])){
case 'boolean': (opts[prop] as unknown as boolean) = (item == 'true'); break;
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index 4f9165f..cbbe084 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -12,20 +12,20 @@
Sweep leaves to side
<ul>
<li> <label> <input type="radio" v-model="sweepLeaves" :value="true"
- @change="onSettingChg('layoutType')"/> Yes </label> </li>
+ @change="onSettingChg('LYT', 'layoutType')"/> Yes </label> </li>
<li> <label> <input type="radio" v-model="sweepLeaves" :value="false"
- @change="onSettingChg('layoutType')"/> No </label> </li>
+ @change="onSettingChg('LYT', 'layoutType')"/> No </label> </li>
</ul>
</div>
<div class="grow">
Sweep into parent
<ul>
<li> <label> <input type="radio" :disabled="!sweepLeaves" v-model="lytOpts.sweepToParent"
- value="none" @change="onSettingChg('sweepToParent')"/> Never </label> </li>
+ value="none" @change="onSettingChg('LYT', 'sweepToParent')"/> Never </label> </li>
<li> <label> <input type="radio" :disabled="!sweepLeaves" v-model="lytOpts.sweepToParent"
- value="prefer" @change="onSettingChg('sweepToParent')"/> Always </label> </li>
+ value="prefer" @change="onSettingChg('LYT', 'sweepToParent')"/> Always </label> </li>
<li> <label> <input type="radio" :disabled="!sweepLeaves" v-model="lytOpts.sweepToParent"
- value="fallback" @change="onSettingChg('sweepToParent')"/> If needed </label> </li>
+ value="fallback" @change="onSettingChg('LYT', 'sweepToParent')"/> If needed </label> </li>
</ul>
</div>
</div>
@@ -33,17 +33,17 @@
<!-- Row 1 -->
<label for="minTileSizeInput">Min Tile Size</label>
<input type="range" min="0" max="400" v-model.number="lytOpts.minTileSz"
- @input="onSettingChg('minTileSz')" name="minTileSizeInput" ref="minTileSzInput"/>
+ @input="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>
<input type="range" min="0" max="400" v-model.number="lytOpts.maxTileSz"
- @input="onSettingChg('maxTileSz')" name="maxTileSizeInput" ref="maxTileSzInput"/>
+ @input="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>
<input type="range" min="0" max="20" v-model.number="lytOpts.tileSpacing"
- @input="onSettingChg('tileSpacing')" name="tileSpacingInput"/>
+ @input="onSettingChg('LYT', 'tileSpacing')" name="tileSpacingInput"/>
<div class="my-auto text-right">{{pxToDisplayStr(lytOpts.tileSpacing)}}</div>
</div>
</div>
@@ -53,12 +53,12 @@
<!-- Row 1 -->
<label for="animationTimeInput">Animation Time</label>
<input type="range" min="0" max="3000" v-model.number="uiOpts.transitionDuration"
- @change="onSettingChg('transitionDuration')" class="my-auto" name="animationTimeInput"/>
+ @change="onSettingChg('UI', 'transitionDuration')" class="my-auto" name="animationTimeInput"/>
<div class="my-auto text-right">{{uiOpts.transitionDuration}} ms</div>
<!-- Row 2 -->
<label for="autoModeDelayInput">Auto-mode Delay</label>
<input type="range" min="0" max="3000" v-model.number="uiOpts.autoActionDelay"
- @change="onSettingChg('autoActionDelay')" class="my-auto" name="autoModeDelayInput"/>
+ @change="onSettingChg('UI', 'autoActionDelay')" class="my-auto" name="autoModeDelayInput"/>
<div class="my-auto text-right">{{uiOpts.autoActionDelay}} ms</div>
</div>
</div>
@@ -66,11 +66,11 @@
<h2 class="text-center">Other</h2>
<div>
<label> <input type="checkbox" v-model="uiOpts.useReducedTree"
- @change="onSettingChg('useReducedTree')"/> Use simplified tree </label>
+ @change="onSettingChg('UI', 'useReducedTree')"/> Use simplified tree </label>
</div>
<div>
<label> <input type="checkbox" v-model="uiOpts.searchJumpMode"
- @change="onSettingChg('searchJumpMode')"/> Skip search animation </label>
+ @change="onSettingChg('UI', 'searchJumpMode')"/> Skip search animation </label>
</div>
</div>
<s-button class="mx-auto mt-2" :style="{color: uiOpts.textColor, backgroundColor: uiOpts.bgColor}"
@@ -85,7 +85,7 @@
import {defineComponent, PropType} from 'vue';
import SButton from './SButton.vue';
import CloseIcon from './icon/CloseIcon.vue';
-import {UiOptions} from '../lib';
+import {UiOptions, OptionType} from '../lib';
import {LayoutOptions} from '../layout';
export default defineComponent({
@@ -119,19 +119,19 @@ export default defineComponent({
this.$emit('close');
}
},
- onSettingChg(setting: string){
+ onSettingChg(optionType: OptionType, option: string){
// Maintain min/max-tile-size consistency
- if (setting == 'minTileSz' || setting == 'maxTileSz'){
+ if (optionType == 'LYT' && (option == 'minTileSz' || option == 'maxTileSz')){
let minInput = this.$refs.minTileSzInput as HTMLInputElement;
let maxInput = this.$refs.maxTileSzInput as HTMLInputElement;
- if (setting == 'minTileSz' && Number(minInput.value) > Number(maxInput.value)){
+ if (option == 'minTileSz' && Number(minInput.value) > Number(maxInput.value)){
this.lytOpts.maxTileSz = this.lytOpts.minTileSz;
- } else if (setting == 'maxTileSz' && Number(maxInput.value) < Number(minInput.value)){
+ } else if (option == 'maxTileSz' && Number(maxInput.value) < Number(minInput.value)){
this.lytOpts.minTileSz = this.lytOpts.maxTileSz;
}
}
//
- this.$emit('setting-chg', setting);
+ this.$emit('setting-chg', optionType, option);
},
pxToDisplayStr(px: number): string {
return (px / 3.78).toFixed() + ' mm';
diff --git a/src/lib.ts b/src/lib.ts
index 66e0176..cf0e50f 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -129,3 +129,5 @@ export type UiOptions = {
disabledActions: Set<Action>,
useDblClick: boolean,
};
+// Used in Settings.vue, and when saving to localStorage
+export type OptionType = 'LYT' | 'UI';
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-25 14:10:01 +0000