From d8aa98562d3b81ace693ccf52c46ee899a4b17ca Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Thu, 3 Mar 2022 18:36:26 +1100
Subject: Add basic multi-level-tree display

---
 src/App.vue | 52 +++++++++-------------------------------------------
 1 file changed, 9 insertions(+), 43 deletions(-)

(limited to 'src/App.vue')

diff --git a/src/App.vue b/src/App.vue
index 274ec13..5c7c293 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,47 +1,16 @@
 <script>
 import tol from './tol.json';
+import TileTree from "./components/TileTree.vue";
 export default {
 	data() {
 		return {
-			drawnTol: tol.map(e => ({...e, children:[]})),
+			//tree: tol.map(e => ({...e, children:[]})),
+			tree: tol,
 			width: document.documentElement.clientWidth,
 			height: document.documentElement.clientHeight,
 		}
 	},
-	computed: {
-		tiles(){
-			//minSize, maxSize, 
-			let nodes = this.drawnTol;
-			let spacing = 5;
-			let numCols = this.pickNumCols(nodes.length, this.width/this.height);
-			let numRows = Math.ceil(nodes.length / numCols);
-			let tileSz = Math.min(
-				((this.width - spacing) / numCols) - spacing,
-				((this.height - spacing) / numRows) - spacing);
-			let res = nodes.map((el, idx) => ({
-				name: el.name,
-				x: (idx % numCols)*(tileSz + spacing) + spacing,
-				y: Math.floor(idx / numCols)*(tileSz + spacing) + spacing,
-				sz: tileSz,
-				}));
-			console.log(res)
-			return res;
-		}
-	},
 	methods: {
-		pickNumCols(numTiles, aspectRatio){ //account for tile-spacing?
-			//find number of columns with corresponding aspect-ratio closest to aspectRatio
-			let closest, smallestDiff = Number.MAX_VALUE;
-			for (let numCols = 1; numCols <= numTiles; numCols++){
-				let ratio = numCols/Math.ceil(numTiles/numCols);
-				let diff = Math.abs(ratio - aspectRatio);
-				if (diff < smallestDiff){
-					smallestDiff = diff;
-					closest = numCols;
-				}
-			}
-			return closest;
-		},
 		onResize(){
 			this.width = document.documentElement.clientWidth;
 			this.height = document.documentElement.clientHeight;
@@ -52,19 +21,16 @@ export default {
 	},
 	unmounted(){
 		window.removeEventListener('resize', this.onResize);
+	},
+	components: {
+		TileTree
 	}
 }
 </script>
 
 <template>
-	<div class="bg-black h-[100vh]">
-		<img v-for="tile in tiles" :src="'/src/assets/' + tile.name + '.jpg'" :alt="tile.name" :id="tile.name"
-			:width="tile.sz" :height="tile.sz"
-			:style="{position: 'absolute', left: tile.x + 'px', top: tile.y + 'px'}"
-			class="transition-all duration-300 ease-out border-2 border-amber-900"
-			/>
-	</div>
+<div class="h-[100vh]">
+	<tile-tree :tree="tree" :x="0" :y="0" :width="width" :height="height" isRoot></tile-tree>
+</div>
 </template>
 
-<style>
-</style>
-- 
cgit v1.2.3