From 93e3a4907c08a82225d1f947bb7674edf8a67c85 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Wed, 29 Jun 2022 15:15:47 +1000
Subject: Add breadth prop to AncestryBar

---
 src/App.vue                    | 3 ++-
 src/components/AncestryBar.vue | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/App.vue b/src/App.vue
index 7fca4c5..614121c 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="uiOpts.ancestryBarBreadth"
+					:tolMap="tolMap" :lytOpts="lytOpts" :uiOpts="uiOpts"
 					@ancestor-click="onDetachedAncestorClick" @info-click="onInfoClick"/>
 			</transition>
 		</div>
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 => {
-- 
cgit v1.2.3