Merge TileImg back into Tile, adding nonAbsPos prop for AncestryBar usage

1 files changed, 12 insertions, 5 deletions

diff --git a/src/components/AncestryBar.vue b/src/components/AncestryBar.vue
index 46f1edf..0cdadf8 100644
--- a/src/components/AncestryBar.vue
+++ b/src/components/AncestryBar.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import {defineComponent, PropType} from 'vue';
 import {LayoutNode} from '../layout';
-import TileImg from './TileImg.vue'
+import Tile from './Tile.vue'
 
 export default defineComponent({
 	props: {
@@ -23,6 +23,13 @@ export default defineComponent({
 		tileSz(){
 			return (this.wideArea ? this.dims[1] : this.dims[0]) - (this.tileMargin * 2) - this.scrollBarOffset;
 		},
+		usedNodes(){
+			return this.nodes.map(n => {
+				let newNode = new LayoutNode(n.tolNode, []);
+				newNode.dims = [this.tileSz, this.tileSz];
+				return newNode;
+			});
+		},
 		hasOverflow(){
 			let len = this.tileMargin + (this.tileSz + this.tileMargin) * this.nodes.length;
 			return len > (this.wideArea ? this.dims[0] : this.dims[1]);
@@ -59,7 +66,7 @@ export default defineComponent({
 		}
 	},
 	components: {
-		TileImg,
+		Tile,
 	},
 	emits: ['detached-ancestor-clicked', 'info-icon-clicked'],
 });
@@ -67,8 +74,8 @@ export default defineComponent({
 
 <template>
 <div :style="styles">
-	<tile-img v-for="node in nodes" :key="node.tolNode.name"
-		:layoutNode="node" :tileSz="tileSz" :options="options"
-		@click="onClick(node)" @info-icon-clicked="onInnerInfoIconClicked"/>
+	<tile v-for="(node, idx) in usedNodes" :key="node.tolNode.name" :layoutNode="node"
+		:nonAbsPos="true" :headerSz="0" :tileSpacing="0" :options="options"
+		@leaf-clicked="onClick(nodes[idx])" @info-icon-clicked="onInnerInfoIconClicked"/>
 </div>
 </template>