Use static-layout for ancestry-bar and tutorial-pane

1 files changed, 11 insertions, 39 deletions

diff --git a/src/components/AncestryBar.vue b/src/components/AncestryBar.vue
index 66c1b13..8f31900 100644
--- a/src/components/AncestryBar.vue
+++ b/src/components/AncestryBar.vue
@@ -8,57 +8,29 @@ import type {TolMap} from '../tol';
 // Displays a sequence of nodes, representing ancestors from a tree-of-life root to a currently-active root
 export default defineComponent({
 	props: {
-		// For absolute positioning
-		pos: {type: Array as unknown as PropType<[number,number]>, required: true},
-		dims: {type: Array as unknown as PropType<[number,number]>, required: true},
-		// The ancestors to display
 		nodes: {type: Array as PropType<LayoutNode[]>, required: true},
+		vert: {type: Boolean, default: false},
 		// Other
 		tolMap: {type: Object as PropType<TolMap>, required: true},
 		lytOpts: {type: Object as PropType<LayoutOptions>, required: true},
 		uiOpts: {type: Object, required: true},
 	},
 	computed: {
-		wideArea(){
-			return this.dims[0] >= this.dims[1];
-		},
-		tileSz(){
-			return (this.wideArea ? this.dims[1] : this.dims[0]) -
-				(this.uiOpts.ancestryTileMargin * 2) - this.uiOpts.scrollGap;
-		},
 		usedNodes(){ // Childless versions of 'nodes' used to parameterise <tile>
 			return this.nodes.map(n => {
 				let newNode = new LayoutNode(n.name, []);
-				newNode.dims = [this.tileSz, this.tileSz];
+				newNode.dims = [this.uiOpts.ancestryBarImgSz, this.uiOpts.ancestryBarImgSz];
 				return newNode;
 			});
 		},
-		overflowing(){
-			let len = this.uiOpts.ancestryTileMargin +
-				(this.tileSz + this.uiOpts.ancestryTileMargin) * this.nodes.length;
-			return len > (this.wideArea ? this.dims[0] : this.dims[1]);
-		},
-		width(){
-			return this.dims[0] + (this.wideArea || this.overflowing ? 0 : -this.uiOpts.scrollGap);
-		},
-		height(){
-			return this.dims[1] + (!this.wideArea || this.overflowing ? 0 : -this.uiOpts.scrollGap);
-		},
 		styles(): Record<string,string> {
 			return {
-				position: 'absolute',
-				left: this.pos[0] + 'px',
-				top: this.pos[1] + 'px',
-				width: this.width + 'px',
-				height: this.height + 'px',
-				overflowX: this.wideArea ? 'auto' : 'hidden',
-				overflowY: this.wideArea ? 'hidden' : 'auto',
-				// Extra padding for scrollbar inclusion
-				paddingRight: (this.overflowing && !this.wideArea ? this.uiOpts.scrollGap : 0) + 'px',
-				paddingBottom: (this.overflowing && this.wideArea ? this.uiOpts.scrollGap : 0) + 'px',
+				overflowX: this.vert ? 'hidden' : 'auto',
+				overflowY: this.vert ? 'auto' : 'hidden',
+				maxHeight: '100vh',
 				// For child layout
 				display: 'flex',
-				flexDirection: this.wideArea ? 'row' : 'column',
+				flexDirection: this.vert ? 'column' : 'row',
 				gap: this.uiOpts.ancestryTileMargin + 'px',
 				padding: this.uiOpts.ancestryTileMargin + 'px',
 				// Other
@@ -71,7 +43,7 @@ export default defineComponent({
 		nodes(){
 			setTimeout(() => this.scrollToEnd(), 0); // Without timeout, seems to run before new tiles are added
 		},
-		wideArea(){
+		vert(){
 			setTimeout(() => this.scrollToEnd(), 0);
 		},
 	},
@@ -84,15 +56,15 @@ export default defineComponent({
 		},
 		onWheelEvt(evt: WheelEvent){
 			// Possibly convert vertical scroll to horizontal
-			if (this.wideArea && Math.abs(evt.deltaX) < Math.abs(evt.deltaY)){
+			if (!this.vert && Math.abs(evt.deltaX) < Math.abs(evt.deltaY)){
 				this.$el.scrollLeft -= (evt.deltaY > 0 ? 30 : -30);
 			}
 		},
 		scrollToEnd(){
-			if (this.wideArea){
-				this.$el.scrollLeft = this.$el.scrollWidth;
-			} else {
+			if (this.vert){
 				this.$el.scrollTop = this.$el.scrollHeight;
+			} else {
+				this.$el.scrollLeft = this.$el.scrollWidth;
 			}
 		},
 	},