Make ancestry-bar scroll-to-end when added to

1 files changed, 18 insertions, 0 deletions

diff --git a/src/components/AncestryBar.vue b/src/components/AncestryBar.vue
index 2dd19fb..66c1b13 100644
--- a/src/components/AncestryBar.vue
+++ b/src/components/AncestryBar.vue
@@ -67,6 +67,14 @@ export default defineComponent({
 			};
 		},
 	},
+	watch: {
+		nodes(){
+			setTimeout(() => this.scrollToEnd(), 0); // Without timeout, seems to run before new tiles are added
+		},
+		wideArea(){
+			setTimeout(() => this.scrollToEnd(), 0);
+		},
+	},
 	methods: {
 		onTileClick(node: LayoutNode){
 			this.$emit('detached-ancestor-click', node);
@@ -80,6 +88,16 @@ export default defineComponent({
 				this.$el.scrollLeft -= (evt.deltaY > 0 ? 30 : -30);
 			}
 		},
+		scrollToEnd(){
+			if (this.wideArea){
+				this.$el.scrollLeft = this.$el.scrollWidth;
+			} else {
+				this.$el.scrollTop = this.$el.scrollHeight;
+			}
+		},
+	},
+	mounted(){
+		this.scrollToEnd();
 	},
 	components: {Tile, },
 	emits: ['detached-ancestor-click', 'info-icon-click', ],