From 005873dc9c276d54c150c057e9655aa0fddddd70 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Wed, 29 Jun 2022 15:08:39 +1000
Subject: Make changing of min/max-tile-sz update ancestry-bar breadth

---
 src/App.vue | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

(limited to 'src/App.vue')

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]));
-- 
cgit v1.2.3

