From ae78a0efe93641b11fe101329e784f58b9729459 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Fri, 4 Mar 2022 16:39:19 +1100
Subject: Add tile expansion, modify tol representation

---
 src/App.vue                 | 27 ++++++++++++++-------
 src/components/TileTree.vue | 59 ++++++++++++++++++++++++++++++++++++---------
 2 files changed, 65 insertions(+), 21 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 26ae610..5e7f904 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,22 +1,19 @@
 <script>
 import tol from './tol.json';
-function addTileCounts(tree){
-	if (tree.children && tree.children.length > 0){
-		tree.children.forEach(addTileCounts)
-		tree.tileCount = tree.children.reduce((acc, val) => acc + val.tileCount, 0);
+function addChildArrays(tree){
+	if (!tree.children){
+		tree.children = [];
 	} else {
-		tree.tileCount = 1;
+		tree.children.forEach(addChildArrays);
 	}
 }
-addTileCounts(tol);
+addChildArrays(tol);
 
 import TileTree from "./components/TileTree.vue";
 export default {
 	data() {
 		return {
-			//tree: {...tol, children:[]},
-			tree: {...tol, children:tol.children.map(e => ({...e, children:[]}))},
-			//tree: tol,
+			tree: this.genTreeForTol(tol, 1), //allow for zero-level?
 			width: document.documentElement.clientWidth,
 			height: document.documentElement.clientHeight,
 		}
@@ -25,6 +22,18 @@ export default {
 		onResize(){
 			this.width = document.documentElement.clientWidth;
 			this.height = document.documentElement.clientHeight;
+		},
+		genTreeForTol(tol, lvl){
+			if (lvl == 0){
+				return {tolNode: tol, children: [], tileCount: 1};
+			} else {
+				let childTrees = tol.children.map(e => this.genTreeForTol(e, lvl-1));
+				return {
+					tolNode: tol,
+					children: childTrees,
+					tileCount: (childTrees.length == 0) ? 1 : childTrees.map(e => e.tileCount).reduce((x,y) => x+y)
+				};
+			}
 		}
 	},
 	created(){
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index 8170ad7..b528ba4 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -17,7 +17,7 @@ export default {
 	},
 	computed: {
 		layout(){
-			if (!this.tree.children || this.tree.children.length == 0)
+			if (this.tree.children.length == 0)
 				return {};
 			let hOffset = (this.isRoot ? 0 : this.HEADER_SZ);
 			let x = 0, y = hOffset, w = this.width, h = this.height - hOffset;
@@ -48,7 +48,7 @@ export default {
 				((h - this.TILE_SPACING) / numRows) - this.TILE_SPACING);
 			//determine layout
 			return Object.fromEntries(
-				nodes.map((el, idx) => [el.name, {
+				nodes.map((el, idx) => [el.tolNode.name, {
 					x: x0 + (idx % numCols)*(tileSz + this.TILE_SPACING) + this.TILE_SPACING,
 					y: y0 + Math.floor(idx / numCols)*(tileSz + this.TILE_SPACING) + this.TILE_SPACING,
 					w: tileSz,
@@ -97,7 +97,7 @@ export default {
 				colNetProps.push(colNetProps[i] + colProportions[i]);
 			}
 			let retVal = Object.fromEntries(
-				nodes.map((el, idx) => [el.name, {
+				nodes.map((el, idx) => [el.tolNode.name, {
 					x: x0 + colNetProps[idx % numCols]*(w - this.TILE_SPACING) + this.TILE_SPACING,
 					y: y0 + rowNetProps[Math.floor(idx / numCols)]*(h - this.TILE_SPACING) + this.TILE_SPACING,
 					w: colProportions[idx % numCols]*(w - this.TILE_SPACING) - this.TILE_SPACING,
@@ -108,10 +108,10 @@ export default {
 		sweepToSideLayout(nodes, x0, y0, w, h){
 			//separate leaf and non-leaf nodes
 			let leaves = [], nonLeaves = [];
-			nodes.forEach(e => ((e.children && e.children.length > 0) ? nonLeaves : leaves).push(e));
+			nodes.forEach(e => (e.children.length == 0 ? leaves : nonLeaves).push(e));
 			//determine layout
 			if (nonLeaves.length == 0){ //if all leaves, use squares-layout
-				return this.basicSquaresLayout(this.tree.children, x0, y0, w, h);
+				return this.basicSquaresLayout(nodes, x0, y0, w, h);
 			} else { //if some non-leaves, use rect-layout
 				let retVal = {};
 				if (leaves.length > 0){
@@ -123,23 +123,58 @@ export default {
 				//return {...retVal, ...this.basicSquaresLayout(nonLeaves, x0, y0, w, h)};
 				return {...retVal, ...this.basicRectsLayout(nonLeaves, x0, y0, w, h)};
 			}
+		},
+		onImgClick(){
+			this.$emit('tile-clicked', [this.tree]);
+		},
+		onInnerTileClicked(nodeList){
+			if (!this.isRoot){
+				this.$emit('tile-clicked', nodeList.concat([this.tree]));
+			} else { //nodeList will hold an array of tree-objects, from the clicked-on-tile's tree-object upward
+				let numNewTiles = nodeList[0].tolNode.children.length;
+				if (numNewTiles == 0){
+					console.log('Tile-to-expand has no children');
+					return;
+				}
+				//add children
+				nodeList[0].children = nodeList[0].tolNode.children.map(e => ({
+					tolNode: e,
+					children: [],
+					tileCount: 1
+				}));
+				//update tile counts
+				nodeList[0].tileCount = numNewTiles;
+				for (let i = 1; i < nodeList.length; i++){
+					nodeList[i].tileCount += numNewTiles;
+				}
+				this.tree.tileCount += numNewTiles; //redundant?
+			}
+		},
+		onHeaderClick(){
+			console.log('Header clicked');
 		}
 	}
 }
 </script>
 
 <template>
-<div v-if="tree.children && tree.children.length > 0" class="border border-black"
-	:style="{position: 'absolute', left: x + 'px', top: y + 'px', width: + width + 'px', height: height + 'px'}">
-	<div v-if="!isRoot" :style="{height: HEADER_SZ + 'px'}" class="text-center">{{tree.name}}</div>
-	<tile-tree v-for="child in tree.children" :key="child.name" :tree="child"
-		:x="layout[child.name].x" :y="layout[child.name].y" :width="layout[child.name].w" :height="layout[child.name].h"
+<div v-if="tree.children.length > 0" class="border border-black"
+	:style="{position: 'absolute', left: x + 'px', top: y + 'px', width: width + 'px', height: height + 'px'}">
+	<div v-if="!isRoot" :style="{height: HEADER_SZ + 'px'}"
+		class="text-center hover:cursor-pointer" @click="onHeaderClick">
+		{{tree.tolNode.name}}
+	</div>
+	<tile-tree v-for="child in tree.children" :key="child.tolNode.name" :tree="child"
+		:x="layout[child.tolNode.name].x" :y="layout[child.tolNode.name].y"
+		:width="layout[child.tolNode.name].w" :height="layout[child.tolNode.name].h"
+		@tile-clicked="onInnerTileClicked"
 		></tile-tree>
 </div>
 <img v-else
-	:src="'/src/assets/' + tree.name + '.jpg'" :alt="tree.name"
+	:src="'/src/assets/' + tree.tolNode.name + '.jpg'" :alt="tree.tolNode.name"
 	:style="{position: 'absolute', left: x + 'px', top: y + 'px'}" :width="width" :height="height"
-	class="transition-all duration-300 ease-out border-2 border-amber-900"
+	class="transition-all duration-300 ease-out border-2 border-amber-900 hover:cursor-pointer"
+	@click="onImgClick"
 	/>
 </template>
 
-- 
cgit v1.2.3