Make changing of min/max-tile-sz update ancestry-bar breadthdynamic-sidebar-breadth

3 files changed, 17 insertions, 10 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]));
diff --git a/src/components/AncestryBar.vue b/src/components/AncestryBar.vue
index c2aadf8..38d51c3 100644
--- a/src/components/AncestryBar.vue
+++ b/src/components/AncestryBar.vue
@@ -16,6 +16,7 @@ export default defineComponent({
 	props: {
 		nodes: {type: Array as PropType<LayoutNode[]>, required: true},
 		vert: {type: Boolean, default: false},
+		breadth: {type: Number, required: true},
 		// Other
 		lytOpts: {type: Object as PropType<LayoutOptions>, required: true},
 		uiOpts: {type: Object as PropType<UiOptions>, required: true},
@@ -23,7 +24,7 @@ export default defineComponent({
 	},
 	computed: {
 		imgSz(){
-			return this.uiOpts.ancestryBarBreadth - this.lytOpts.tileSpacing - this.uiOpts.scrollGap;
+			return this.breadth - this.lytOpts.tileSpacing - this.uiOpts.scrollGap;
 		},
 		dummyNodes(){ // Childless versions of 'nodes' used to parameterise <tile>s
 			return this.nodes.map(n => {
diff --git a/src/lib.ts b/src/lib.ts
index 66e0176..757c0e5 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -113,7 +113,6 @@ export type UiOptions = {
 	nonleafHeaderColor: string, // CSS color
 	ancestryBarBgColor: string,
 	// Component sizing
-	ancestryBarBreadth: number, // px (fixed value needed for transitions)
 	tutPaneSz: number, // px (fixed value needed for transitions)
 	scrollGap: number, // Size of scroll bar, in px
 	// Timing related