From 85e01e3f389cd3f42de8a72a00b3a860e222c41c Mon Sep 17 00:00:00 2001 From: Terry Truong Date: Thu, 23 Jun 2022 21:39:39 +1000 Subject: Only save user-changed settings, and re-apply other settings on resize --- src/App.vue | 44 +++++++++++++++-- src/components/SettingsModal.vue | 104 +++++++++++++++++---------------------- 2 files changed, 84 insertions(+), 64 deletions(-) (limited to 'src') 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, changedUiOpts: Set){ + 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"/>
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({
+ v-model.number="lytOpts.tileSpacing" @input="onLytOptChg('tileSpacing')"/>
@@ -107,15 +89,15 @@ export default defineComponent({
  • + @change="onLytOptChg('layoutType')"/> Squares
  • + @change="onLytOptChg('layoutType')"/> Rectangles
  • + @change="onLytOptChg('layoutType')"/> Sweep to side
@@ -125,15 +107,15 @@ export default defineComponent({
  • + @change="onLytOptChg('sweepToParent')"/> None
  • + @change="onLytOptChg('sweepToParent')"/> Prefer
  • + @change="onLytOptChg('sweepToParent')"/> Fallback
@@ -143,31 +125,33 @@ export default defineComponent({
  • + @change="onLytOptChg('sweepMode')"/> To left
  • + @change="onLytOptChg('sweepMode')"/> To top
  • + @change="onLytOptChg('sweepMode')"/> To shorter
  • + @change="onLytOptChg('sweepMode')"/> Auto
+ v-model.number="uiOpts.tileChgDuration" @change="onUiOptChg('tileChgDuration')"/>
- +
@@ -175,11 +159,11 @@ export default defineComponent({
  • + @change="onUiOptChg('useReducedTree')"/> Default
  • + @change="onUiOptChg('useReducedTree')"/> Reduced
-- cgit v1.2.3