From 06aa08b1de6bdb60203231d5c22816a6c9c4cee4 Mon Sep 17 00:00:00 2001 From: Terry Truong Date: Wed, 29 Jun 2022 15:32:21 +1000 Subject: Avoid layout/ui-option saved-string name-collisions Assistively add OptionType type --- src/App.vue | 32 +++++++++++++++----------------- src/components/SettingsModal.vue | 36 ++++++++++++++++++------------------ src/lib.ts | 2 ++ 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
Sweep into parent
@@ -33,17 +33,17 @@ + @input="onSettingChg('LYT', 'minTileSz')" name="minTileSizeInput" ref="minTileSzInput"/>
{{pxToDisplayStr(lytOpts.minTileSz)}}
+ @input="onSettingChg('LYT', 'maxTileSz')" name="maxTileSizeInput" ref="maxTileSzInput"/>
{{pxToDisplayStr(lytOpts.maxTileSz)}}
+ @input="onSettingChg('LYT', 'tileSpacing')" name="tileSpacingInput"/>
{{pxToDisplayStr(lytOpts.tileSpacing)}}
@@ -53,12 +53,12 @@ + @change="onSettingChg('UI', 'transitionDuration')" class="my-auto" name="animationTimeInput"/>
{{uiOpts.transitionDuration}} ms
+ @change="onSettingChg('UI', 'autoActionDelay')" class="my-auto" name="autoModeDelayInput"/>
{{uiOpts.autoActionDelay}} ms
@@ -66,11 +66,11 @@

Other

+ @change="onSettingChg('UI', 'useReducedTree')"/> Use simplified tree
+ @change="onSettingChg('UI', 'searchJumpMode')"/> Skip search animation
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, useDblClick: boolean, }; +// Used in Settings.vue, and when saving to localStorage +export type OptionType = 'LYT' | 'UI'; -- cgit v1.2.3