diff options
| -rw-r--r-- | src/App.vue | 44 | ||||
| -rw-r--r-- | src/components/SettingsModal.vue | 104 |
2 files changed, 84 insertions, 64 deletions
diff --git a/src/App.vue b/src/App.vue index 66db8c0..a622caf 100644 --- a/src/App.vue +++ b/src/App.vue @@ -58,7 +58,7 @@ function getDefaultLytOpts(): LayoutOptions { rectMode: 'auto first-row', //'horz' | 'vert' | 'linear' | 'auto' | 'auto first-row' sweepMode: 'left', //'left' | 'top' | 'shorter' | 'auto' sweptNodesPrio: 'sqrt', //'linear' | 'sqrt' | 'pow-2/3' - sweepToParent: 'fallback', //'none' | 'prefer' | 'fallback' + sweepToParent: 'prefer', //'none' | 'prefer' | 'fallback' }; } function getDefaultUiOpts(){ @@ -575,7 +575,19 @@ export default defineComponent({ // Re-initialise tree this.initTreeFromServer(); }, + onSettingsClose(changedLytOpts: Set<string>, changedUiOpts: Set<string>){ + this.settingsOpen = false; + // Save changed settings + for (let opt of changedLytOpts){ + localStorage.setItem('lyt ' + opt, String(this.lytOpts[opt as keyof LayoutOptions])); + } + for (let opt of changedUiOpts){ + localStorage.setItem('ui ' + opt, String(this.uiOpts[opt])); + } + console.log('Settings saved'); + }, onResetSettings(){ + localStorage.clear(); let defaultLytOpts = getDefaultLytOpts(); let defaultUiOpts = getDefaultUiOpts(); if (this.uiOpts.useReducedTree != defaultUiOpts.useReducedTree){ @@ -583,6 +595,7 @@ export default defineComponent({ } Object.assign(this.lytOpts, defaultLytOpts); Object.assign(this.uiOpts, defaultUiOpts); + console.log('Settings reset'); this.relayoutWithCollapse(); }, // For help events @@ -644,9 +657,32 @@ export default defineComponent({ if (this.pendingResizeHdlr == 0){ const resizeDelay = 100; let handleResize = () => { - this.uiOpts.scrollGap = getScrollBarWidth(); + // Update unmodified layout/ui options with defaults + let lytOpts = getDefaultLytOpts(); + let uiOpts = getDefaultUiOpts(); + let changedTree = false; + for (let prop of Object.getOwnPropertyNames(lytOpts)){ + let item = localStorage.getItem('lyt ' + prop); + if (item == null && this.lytOpts[prop] != lytOpts[prop as keyof LayoutOptions]){ + this.lytOpts[prop] = lytOpts[prop as keyof LayoutOptions]; + } + } + for (let prop of Object.getOwnPropertyNames(uiOpts)){ + let item = localStorage.getItem('lyt ' + prop); + if (item == null && this.uiOpts[prop] != uiOpts[prop as keyof typeof uiOpts]){ + this.uiOpts[prop] = uiOpts[prop as keyof typeof uiOpts]; + if (prop == 'useReducedTree'){ + changedTree = true; + } + } + } + // this.overflownRoot = false; - return this.updateAreaDims().then(() => this.relayoutWithCollapse()); + if (!changedTree){ + return this.updateAreaDims().then(() => this.relayoutWithCollapse()); + } else { + return Promise.resolve(this.onTreeChange()); + } }; let currentTime = new Date().getTime(); if (currentTime - this.lastResizeHdlrTime > resizeDelay){ @@ -853,7 +889,7 @@ export default defineComponent({ @close="helpOpen = false" @start-tutorial="onStartTutorial"/> </transition> <settings-modal v-if="settingsOpen" :lytOpts="lytOpts" :uiOpts="uiOpts" class="z-10" - @close="settingsOpen = false" @reset="onResetSettings" + @close="onSettingsClose" @reset="onResetSettings" @layout-setting-chg="relayoutWithCollapse" @tree-chg="onTreeChange"/> <!-- Overlay used to prevent interaction and capture clicks --> <div :style="{visibility: modeRunning ? 'visible' : 'hidden'}" diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue index c4f896d..b4fa251 100644 --- a/src/components/SettingsModal.vue +++ b/src/components/SettingsModal.vue @@ -12,61 +12,43 @@ export default defineComponent({ }, data(){ return { - optChgd: false, + 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)){ - if (this.optChgd){ - this.saveSettings(); - } - this.$emit('close'); + this.$emit('close', this.changedLytOpts, this.changedUiOpts); } }, - onOptChg(){ - this.optChgd = true; - }, - onLytOptChg(){ - this.$emit('layout-setting-chg'); - this.onOptChg(); - }, - onMinTileSzChg(){ - 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.onLytOptChg(); - }, - onMaxTileSzChg(){ - 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; + onLytOptChg(opt: string){ + if (opt == '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'){ + 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.onLytOptChg(); - }, - onTreeChg(){ - this.$emit('tree-chg'); - this.onOptChg(); + this.$emit('layout-setting-chg'); + this.changedLytOpts.add(opt); }, - saveSettings(){ - const savedLytOpts = ['tileSpacing', 'minTileSz', 'maxTileSz', 'layoutType', 'sweepMode', 'sweepToParent', ]; - for (let prop of savedLytOpts){ - localStorage.setItem('lyt ' + prop, String(this.lytOpts[prop as keyof LayoutOptions])); + onUiOptChg(opt: string){ + if (opt == 'useReducedTree'){ + this.$emit('tree-chg'); } - const savedUiOpts = ['tileChgDuration', 'jumpToSearchedNode', 'useReducedTree', ]; - for (let prop of savedUiOpts){ - localStorage.setItem('ui ' + prop, String(this.uiOpts[prop])); - } - console.log('Settings saved'); + this.changedUiOpts.add(opt); }, onReset(){ - localStorage.clear(); - this.optChgd = false; this.$emit('reset'); - console.log('Settings reset'); }, }, components: {CloseIcon, RButton, }, @@ -84,21 +66,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" @change="onLytOptChg"/></label> + v-model.number="lytOpts.tileSpacing" @input="onLytOptChg('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]" - @change="onMinTileSzChg" ref="minTileSzInput"/> + @input="onLytOptChg('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]" - @change="onMaxTileSzChg" ref="maxTileSzInput"/> + @input="onLytOptChg('maxTileSz')" ref="maxTileSzInput"/> </label> </div> <hr class="border-stone-400"/> @@ -107,15 +89,15 @@ export default defineComponent({ <ul> <li> <label> <input type="radio" v-model="lytOpts.layoutType" value="sqr" - @change="onLytOptChg"/> Squares </label> + @change="onLytOptChg('layoutType')"/> Squares </label> </li> <li> <label> <input type="radio" v-model="lytOpts.layoutType" value="rect" - @change="onLytOptChg"/> Rectangles </label> + @change="onLytOptChg('layoutType')"/> Rectangles </label> </li> <li> <label> <input type="radio" v-model="lytOpts.layoutType" value="sweep" - @change="onLytOptChg"/> Sweep to side </label> + @change="onLytOptChg('layoutType')"/> Sweep to side </label> </li> </ul> </div> @@ -125,15 +107,15 @@ export default defineComponent({ <ul> <li> <label> <input type="radio" v-model="lytOpts.sweepToParent" value="none" - @change="onLytOptChg"/> None </label> + @change="onLytOptChg('sweepToParent')"/> None </label> </li> <li> <label> <input type="radio" v-model="lytOpts.sweepToParent" value="prefer" - @change="onLytOptChg"/> Prefer </label> + @change="onLytOptChg('sweepToParent')"/> Prefer </label> </li> <li> <label> <input type="radio" v-model="lytOpts.sweepToParent" value="fallback" - @change="onLytOptChg"/> Fallback </label> + @change="onLytOptChg('sweepToParent')"/> Fallback </label> </li> </ul> </div> @@ -143,31 +125,33 @@ export default defineComponent({ <ul> <li> <label> <input type="radio" v-model="lytOpts.sweepMode" value="left" - @change="onLytOptChg"/> To left </label> + @change="onLytOptChg('sweepMode')"/> To left </label> </li> <li> <label> <input type="radio" v-model="lytOpts.sweepMode" value="top" - @change="onLytOptChg"/> To top </label> + @change="onLytOptChg('sweepMode')"/> To top </label> </li> <li> <label> <input type="radio" v-model="lytOpts.sweepMode" value="shorter" - @change="onLytOptChg"/> To shorter </label> + @change="onLytOptChg('sweepMode')"/> To shorter </label> </li> <li> <label> <input type="radio" v-model="lytOpts.sweepMode" value="auto" - @change="onLytOptChg"/> Auto </label> + @change="onLytOptChg('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.tileChgDuration" @change="onOptChg"/></label> + v-model.number="uiOpts.tileChgDuration" @change="onUiOptChg('tileChgDuration')"/></label> </div> <hr class="border-stone-400"/> <div> - <label> <input type="checkbox" v-model="uiOpts.jumpToSearchedNode" @change="onOptChg"/> - Jump to search result</label> + <label> + <input type="checkbox" v-model="uiOpts.jumpToSearchedNode" @change="onUiOptChg('jumpToSearchedNode')"/> + Jump to search result + </label> </div> <hr class="border-stone-400"/> <div> @@ -175,11 +159,11 @@ export default defineComponent({ <ul> <li> <label> <input type="radio" v-model="uiOpts.useReducedTree" :value="false" - @change="onTreeChg"/> Default </label> + @change="onUiOptChg('useReducedTree')"/> Default </label> </li> <li> <label> <input type="radio" v-model="uiOpts.useReducedTree" :value="true" - @change="onTreeChg"/> Reduced </label> + @change="onUiOptChg('useReducedTree')"/> Reduced </label> </li> </ul> </div> |