diff options
Diffstat (limited to 'src/App.vue')
| -rw-r--r-- | src/App.vue | 23 |
1 files changed, 15 insertions, 8 deletions
diff --git a/src/App.vue b/src/App.vue index 7fca4c5..75eb127 100644 --- a/src/App.vue +++ b/src/App.vue @@ -32,7 +32,8 @@ <transition name="fade" @after-enter="ancestryBarInTransition = false" @after-leave="ancestryBarInTransition = false"> <ancestry-bar v-if="detachedAncestors != null" class="w-full h-full" - :nodes="detachedAncestors" :vert="wideArea" :tolMap="tolMap" :lytOpts="lytOpts" :uiOpts="uiOpts" + :nodes="detachedAncestors" :vert="wideArea" :breadth="ancestryBarBreadth" + :tolMap="tolMap" :lytOpts="lytOpts" :uiOpts="uiOpts" @ancestor-click="onDetachedAncestorClick" @info-click="onInfoClick"/> </transition> </div> @@ -149,7 +150,6 @@ function getDefaultUiOpts(lytOpts: LayoutOptions): UiOptions { nonleafHeaderColor: bgColorDark, ancestryBarBgColor: bgColorLight, // Component sizing - ancestryBarBreadth: lytOpts.maxTileSz / 2 + lytOpts.tileSpacing*2, // px tutPaneSz: 200, // px scrollGap, // Timing related @@ -195,7 +195,7 @@ export default defineComponent({ helpOpen: false, // For search and auto-mode modeRunning: false, - lastFocused: null as LayoutNode | null, // Used to un-focus + lastFocused: null as LayoutNode | null, // Used to un-focus // For auto-mode autoPrevAction: null as AutoAction | null, // Used to help prevent action cycles autoPrevActionFail: false, // Used to avoid re-trying a failed expand/collapse @@ -225,6 +225,9 @@ export default defineComponent({ wideArea(): boolean { return this.mainAreaDims[0] > this.mainAreaDims[1]; }, + ancestryBarBreadth(): number { + return (this.lytOpts.minTileSz + this.lytOpts.maxTileSz) / 2 + this.lytOpts.tileSpacing*2; + }, // Nodes to show in ancestry-bar (ordered from root downwards) detachedAncestors(): LayoutNode[] | null { if (this.activeRoot == this.layoutTree){ @@ -255,7 +258,7 @@ export default defineComponent({ }; }, ancestryBarContainerStyles(): Record<string,string> { - let ancestryBarBreadth = this.detachedAncestors == null ? 0 : this.uiOpts.ancestryBarBreadth; + let breadth = this.detachedAncestors == null ? 0 : this.ancestryBarBreadth; let styles = { minWidth: 'auto', maxWidth: 'none', @@ -266,12 +269,12 @@ export default defineComponent({ overflow: 'hidden', }; if (this.wideArea){ - styles.minWidth = ancestryBarBreadth + 'px'; - styles.maxWidth = ancestryBarBreadth + 'px'; + styles.minWidth = breadth + 'px'; + styles.maxWidth = breadth + 'px'; styles.transitionProperty = 'min-width, max-width'; } else { - styles.minHeight = ancestryBarBreadth + 'px'; - styles.maxHeight = ancestryBarBreadth + 'px'; + styles.minHeight = breadth + 'px'; + styles.maxHeight = breadth + 'px'; styles.transitionProperty = 'min-height, max-height'; } return styles; @@ -722,6 +725,10 @@ export default defineComponent({ this.settingsOpen = true; }, async onSettingChg(setting: string){ + // Special case for ancestry-bar layout-influencing options + if (setting == 'minTileSz' || setting == 'maxTileSz'){ + await this.updateAreaDims(); + } // Save in localStorage if (setting in this.lytOpts){ localStorage.setItem(lytOptPrefix + setting, String(this.lytOpts[setting as keyof LayoutOptions])); |