From 7f56bd873b7391350d0379f497d0d0881486f867 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sat, 5 Mar 2022 13:07:21 +1100
Subject: Separate some of TileTree.vue into Tile.vue

---
 src/App.vue                 |  34 +------------
 src/components/Tile.vue     |  72 +++++++++++++++++++++++++++
 src/components/TileTree.vue | 119 ++++++++++++++++----------------------------
 3 files changed, 116 insertions(+), 109 deletions(-)
 create mode 100644 src/components/Tile.vue

(limited to 'src')

diff --git a/src/App.vue b/src/App.vue
index 5c33543..3e95082 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,36 +1,6 @@
 <script>
-import tol from './tol.json';
-function addChildArrays(tree){
-	if (!tree.children){
-		tree.children = [];
-	} else {
-		tree.children.forEach(addChildArrays);
-	}
-}
-addChildArrays(tol);
-
-import {initTree} from './components/layout.js';
 import TileTree from './components/TileTree.vue';
 export default {
-	data() {
-		return {
-			tree: initTree(tol, 1),
-			width: document.documentElement.clientWidth,
-			height: document.documentElement.clientHeight,
-		}
-	},
-	methods: {
-		onResize(){
-			this.width = document.documentElement.clientWidth;
-			this.height = document.documentElement.clientHeight;
-		},
-	},
-	created(){
-		window.addEventListener('resize', this.onResize);
-	},
-	unmounted(){
-		window.removeEventListener('resize', this.onResize);
-	},
 	components: {
 		TileTree
 	}
@@ -38,8 +8,8 @@ export default {
 </script>
 
 <template>
-<div class="h-[100vh]">
-	<tile-tree :tree="tree" :x="0" :y="0" :width="width" :height="height" isRoot></tile-tree>
+<div>
+	<tile-tree></tile-tree>
 </div>
 </template>
 
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
new file mode 100644
index 0000000..f5835c1
--- /dev/null
+++ b/src/components/Tile.vue
@@ -0,0 +1,72 @@
+<script>
+import {defaultLayout} from './layout.js';
+export default {
+	name: 'tile',
+	data(){
+		return {
+			zIdx: 0,
+			layoutSys: defaultLayout,
+		}
+	},
+	props: {
+		tree: Object,
+		x: Number,
+		y: Number,
+		width: Number,
+		height: Number,
+		hideHeader: Boolean,
+	},
+	computed: {
+		layout(){
+			if (this.tree.children.length == 0)
+				return {};
+			let hOffset = (this.hideHeader ? 0 : this.layoutSys.HEADER_SZ);
+			let x = 0, y = hOffset, w = this.width, h = this.height - hOffset;
+			return this.layoutSys.genLayout(this.tree.children, 0, hOffset, this.width, this.height - hOffset);
+		}
+	},
+	methods: {
+		onImgClick(){
+			this.$emit('tile-clicked', [this.tree]);
+			//increase z-index during transition
+			this.zIdx = 1;
+			setTimeout(() => this.zIdx = 0, 300);
+		},
+		onInnerTileClicked(nodeList){
+			this.$emit('tile-clicked', [...nodeList, this.tree]);
+		},
+		onHeaderClick(){
+			this.$emit('header-clicked', [this.tree]);
+			//increase z-index during transition
+			this.zIdx = 1;
+			setTimeout(() => this.zIdx = 0, 300);
+		},
+		onInnerHeaderClicked(nodeList){
+			this.$emit('header-clicked', [...nodeList, this.tree]);
+		}
+	}
+}
+</script>
+
+<template>
+<div
+	:style="{position: 'absolute', left: x+'px', top: y+'px', width: width+'px', height: height+'px', zIndex: zIdx}"
+	class="transition-[left,top,width,height] duration-300 ease-out border border-stone-900 bg-white">
+	<img v-if="tree.children.length == 0"
+		:src="'/src/assets/' + tree.tolNode.name + '.jpg'" :alt="tree.tolNode.name"
+		class="h-full hover:cursor-pointer" @click="onImgClick"
+		/>
+	<div v-else>
+		<div v-if="!hideHeader" :style="{height: this.layoutSys.HEADER_SZ + 'px'}"
+			class="text-center hover:cursor-pointer bg-stone-300" @click="onHeaderClick">
+			{{tree.tolNode.name}}
+		</div>
+		<tile 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" @header-clicked="onInnerHeaderClicked"
+			></tile>
+	</div>
+</div>
+</template>
+
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index d0c674e..9421052 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -1,101 +1,66 @@
 <script>
-import {defaultLayout} from './layout.js';
-
-let lastChangedTile = null; //used to increase TileTree z-index during a transition
-function updateZForTransition(tileTree){
-	if (lastChangedTile !== null){
-		lastChangedTile.zIdx = 0;
-	}
-	tileTree.zIdx = 1;
-	lastChangedTile = tileTree;
-}
+import tol from '../tol.json';
+import {defaultLayout, initTree} from './layout.js';
+import Tile from './Tile.vue';
 
 export default {
-	name: 'tile-tree',
 	data(){
 		return {
-			zIdx: 0,
+			tree: initTree(this.preprocessTol(tol), 1),
+			width: document.documentElement.clientWidth,
+			height: document.documentElement.clientHeight,
 			layoutSys: defaultLayout,
 		}
 	},
-	props: {
-		tree: Object,
-		x: Number,
-		y: Number,
-		width: Number,
-		height: Number,
-		isRoot: Boolean,
-	},
-	computed: {
-		layout(){
-			if (this.tree.children.length == 0)
-				return {};
-			let hOffset = (this.isRoot ? 0 : this.layoutSys.HEADER_SZ);
-			let x = 0, y = hOffset, w = this.width, h = this.height - hOffset;
-			return this.layoutSys.genLayout(this.tree.children, 0, hOffset, this.width, this.height - hOffset);
-		}
-	},
 	methods: {
-		onImgClick(){
-			if (!this.isRoot){
-				this.$emit('tile-clicked', [this.tree]);
+		preprocessTol(tree){
+			if (!tree.children){
+				tree.children = [];
 			} else {
-				this.onInnerTileClicked([this.tree]);
+				tree.children.forEach(this.preprocessTol);
 			}
-			updateZForTransition(this);
+			return tree;
+		},
+		onResize(){
+			this.width = document.documentElement.clientWidth;
+			this.height = document.documentElement.clientHeight;
 		},
 		onInnerTileClicked(nodeList){
-			if (!this.isRoot){
-				this.$emit('tile-clicked', [...nodeList, 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: [],
-				}));
-				this.layoutSys.updateLayoutInfoOnExpand(nodeList);
+			//nodeList holds 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;
 			}
-		},
-		onHeaderClick(){
-			this.$emit('header-clicked', [this.tree]);
-			updateZForTransition(this);
+			//add children
+			nodeList[0].children = nodeList[0].tolNode.children.map(e => ({
+				tolNode: e,
+				children: [],
+			}));
+			this.layoutSys.updateLayoutInfoOnExpand(nodeList);
 		},
 		onInnerHeaderClicked(nodeList){
-			if (!this.isRoot){
-				this.$emit('header-clicked', [...nodeList, this.tree]);
-			} else { //nodeList will hold an array of tree-objects, from the clicked-on-tile's tree-object upward
-				this.layoutSys.updateLayoutInfoOnCollapse(nodeList);
-				nodeList[0].children = [];
-			}
-		}
+			//nodeList will hold an array of tree-objects, from the clicked-on-tile's tree-object upward
+			this.layoutSys.updateLayoutInfoOnCollapse(nodeList);
+			nodeList[0].children = [];
+		},
+	},
+	created(){
+		window.addEventListener('resize', this.onResize);
+	},
+	unmounted(){
+		window.removeEventListener('resize', this.onResize);
+	},
+	components: {
+		Tile
 	}
 }
 </script>
 
 <template>
-<div
-	:style="{position: 'absolute', left: x+'px', top: y+'px', width: width+'px', height: height+'px', zIndex: zIdx}"
-	class="transition-[left,top,width,height] duration-300 ease-out border border-stone-900 bg-white">
-	<img v-if="tree.children.length == 0"
-		:src="'/src/assets/' + tree.tolNode.name + '.jpg'" :alt="tree.tolNode.name"
-		class="h-full hover:cursor-pointer" @click="onImgClick"
-		/>
-	<div v-else>
-		<div v-if="!isRoot" :style="{height: this.layoutSys.HEADER_SZ + 'px'}"
-			class="text-center hover:cursor-pointer bg-stone-300" @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" @header-clicked="onInnerHeaderClicked"
-			></tile-tree>
-	</div>
+<div class="h-[100vh]">
+	<tile :tree="tree" :x="0" :y="0" :width="width" :height="height" hideHeader
+		@tile-clicked="onInnerTileClicked" @header-clicked="onInnerHeaderClicked"></tile>
 </div>
 </template>
 
-- 
cgit v1.2.3