From 4ae50f4abef0241d6517645ada0b28ed8d1103ee Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sun, 13 Mar 2022 21:06:46 +1100
Subject: Merge TreeNode into FormatNode

---
 src/components/Tile.vue     | 54 ++++++++++++++++++------------------
 src/components/TileTree.vue | 67 +++++++++++++++++++++++----------------------
 2 files changed, 62 insertions(+), 59 deletions(-)

(limited to 'src/components')

diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 1790dc3..054bfed 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import {defineComponent, PropType} from 'vue';
-import {TreeNode} from '../types';
+import {LayoutNode} from '../types';
 
 const TRANSITION_DURATION = 300;
 export default defineComponent({
@@ -13,31 +13,31 @@ export default defineComponent({
 		}
 	},
 	props: {
-		tree: {type: Object as PropType<TreeNode>, required: true},
+		layoutNode: {type: Object as PropType<LayoutNode>, required: true},
 	},
 	computed: {
-		name(){return this.tree.tolNode.name.replaceAll('\'', '\\\'')}
+		name(){return this.layoutNode.tolNode.name.replaceAll('\'', '\\\'')}
 	},
 	methods: {
 		onImgClick(){
-			this.$emit('tile-clicked', [this.tree]);
+			this.$emit('tile-clicked', [this.layoutNode]);
 			//increase z-index and hide overflow during transition
 			this.zIdx = 1;
 			this.overFlow = 'hidden';
 			setTimeout(() => {this.zIdx = 0; this.overFlow = 'visible'}, this.transitionDuration);
 		},
-		onInnerTileClicked(nodeList: TreeNode[]){
-			this.$emit('tile-clicked', [...nodeList, this.tree]);
+		onInnerTileClicked(nodeList: LayoutNode[]){
+			this.$emit('tile-clicked', [...nodeList, this.layoutNode]);
 		},
 		onHeaderClick(){
-			this.$emit('header-clicked', [this.tree]);
+			this.$emit('header-clicked', [this.layoutNode]);
 			//increase z-index and hide overflow during transition
 			this.zIdx = 1;
 			this.overFlow = 'hidden';
 			setTimeout(() => {this.zIdx = 0; this.overFlow = 'visible'}, this.transitionDuration);
 		},
-		onInnerHeaderClicked(nodeList: TreeNode[]){
-			this.$emit('header-clicked', [...nodeList, this.tree]);
+		onInnerHeaderClicked(nodeList: LayoutNode[]){
+			this.$emit('header-clicked', [...nodeList, this.layoutNode]);
 		}
 	}
 })
@@ -46,36 +46,38 @@ export default defineComponent({
 <template>
 <div
 	:style="{position: 'absolute',
-		left: tree.x+'px', top: tree.y+'px', width: tree.w+'px', height: tree.h+'px',
+		left: layoutNode.x+'px', top: layoutNode.y+'px', width: layoutNode.w+'px', height: layoutNode.h+'px',
 		zIndex: zIdx, overflow: overFlow, transitionDuration: transitionDuration+'ms'}"
 	class="transition-[left,top,width,height] ease-out border border-stone-900 bg-white">
-	<div v-if="tree.children.length == 0"
+	<div v-if="layoutNode.children.length == 0"
 		:style="{backgroundImage: 'url(\'/img/' + name + '.jpg\')',
-			opacity: (tree.tolNode.children.length > 0 ? 1 : 0.7)}"
+			opacity: (layoutNode.tolNode.children.length > 0 ? 1 : 0.7)}"
 		class="hover:cursor-pointer w-full h-full bg-cover" @click="onImgClick"
 		/>
 	<div v-else>
-		<div v-if="(tree.headerSz && !tree.sepSweptArea) || (tree.sepSweptArea && tree.sepSweptArea.sweptLeft)"
-			:style="{height: tree.headerSz+'px'}"
+		<div
+			v-if="(layoutNode.headerSz && !layoutNode.sepSweptArea) || 
+				(layoutNode.sepSweptArea && layoutNode.sepSweptArea.sweptLeft)"
+			:style="{height: layoutNode.headerSz+'px'}"
 			class="text-center hover:cursor-pointer bg-stone-300" @click="onHeaderClick">
-			{{tree.tolNode.name}}
+			{{layoutNode.tolNode.name}}
 		</div>
-		<div v-if="tree.sepSweptArea"
-			:style="{position: 'absolute', left: tree.sepSweptArea.x+'px', top: tree.sepSweptArea.y+'px',
-				width: (tree.sepSweptArea.w +
-					(tree.sepSweptArea.sweptLeft ? tree.sepSweptArea.tileSpacing+1 : 0))+'px',
-				height: (tree.sepSweptArea.h +
-					(tree.sepSweptArea.sweptLeft ? 0 : tree.sepSweptArea.tileSpacing+1))+'px',
-				borderRightColor: (tree.sepSweptArea.sweptLeft ? 'white' : 'currentColor'),
-				borderBottomColor: (tree.sepSweptArea.sweptLeft ? 'currentColor' : 'white'),
+		<div v-if="layoutNode.sepSweptArea"
+			:style="{position: 'absolute', left: layoutNode.sepSweptArea.x+'px', top: layoutNode.sepSweptArea.y+'px',
+				width: (layoutNode.sepSweptArea.w +
+					(layoutNode.sepSweptArea.sweptLeft ? layoutNode.sepSweptArea.tileSpacing+1 : 0))+'px',
+				height: (layoutNode.sepSweptArea.h +
+					(layoutNode.sepSweptArea.sweptLeft ? 0 : layoutNode.sepSweptArea.tileSpacing+1))+'px',
+				borderRightColor: (layoutNode.sepSweptArea.sweptLeft ? 'white' : 'currentColor'),
+				borderBottomColor: (layoutNode.sepSweptArea.sweptLeft ? 'currentColor' : 'white'),
 				transitionDuration: transitionDuration+'ms'}"
 			class="transition-[left,top,width,height] ease-out border border-stone-900 bg-white">
-			<div v-if="!tree.sepSweptArea.sweptLeft" :style="{height: tree.headerSz+'px'}"
+			<div v-if="!layoutNode.sepSweptArea.sweptLeft" :style="{height: layoutNode.headerSz+'px'}"
 				class="text-center hover:cursor-pointer bg-stone-300" @click="onHeaderClick">
-				{{tree.tolNode.name}}
+				{{layoutNode.tolNode.name}}
 			</div>
 		</div>
-		<tile v-for="child in tree.children" :key="child.tolNode.name" :tree="child"
+		<tile v-for="child in layoutNode.children" :key="child.tolNode.name" :layoutNode="child"
 			@tile-clicked="onInnerTileClicked" @header-clicked="onInnerHeaderClicked"
 			></tile>
 	</div>
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index 24d0d84..e9c8c93 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -2,7 +2,7 @@
 import {defineComponent} from 'vue';
 import Tile from './Tile.vue';
 
-import {TolNode, TreeNode, LayoutNode} from '../types';
+import {TolNode, LayoutNode} from '../types';
 import {genLayout, layoutInfoHooks} from '../layout';
 //regarding importing a file f1.ts:
 	//using 'import f1.ts' makes vue-tsc complain, and 'import f1.js' makes vite complain
@@ -21,24 +21,24 @@ preprocessTol(tol);
 export default defineComponent({
 	data(){
 		return {
-			tree: this.initTree(tol as TolNode, 1),
+			layoutTree: this.initLayoutTree(tol as TolNode, 1),
 			width: document.documentElement.clientWidth,
 			height: document.documentElement.clientHeight,
 			resizeThrottled: false,
 		}
 	},
 	methods: {
-		initTree(tol: TolNode, lvl: number): TreeNode {
-			let tree = new TreeNode(tol, []);
-			function initTreeRec(tree: TreeNode, lvl: number){
+		initLayoutTree(tol: TolNode, lvl: number): LayoutNode {
+			let node = new LayoutNode(tol, []);
+			function initRec(node: LayoutNode, lvl: number){
 				if (lvl > 0)
-					tree.children = tree.tolNode.children.map(
-						(n: TolNode) => initTreeRec(new TreeNode(n, []), lvl-1));
-				return tree;
+					node.children = node.tolNode.children.map(
+						(n: TolNode) => initRec(new LayoutNode(n, []), lvl-1));
+				return node;
 			}
-			initTreeRec(tree, lvl);
-			layoutInfoHooks.initLayoutInfo(tree)
-			return tree;
+			initRec(node, lvl);
+			layoutInfoHooks.initLayoutInfo(node)
+			return node;
 		},
 		onResize(){
 			if (!this.resizeThrottled){
@@ -50,21 +50,22 @@ export default defineComponent({
 				setTimeout(() => {this.resizeThrottled = false;}, 100);
 			}
 		},
-		onInnerTileClicked(nodeList: TreeNode[]){
-			//nodeList holds an array of tree-objects, from the clicked-on-tile's tree-object upward
+		onInnerTileClicked(nodeList: LayoutNode[]){
+			//nodeList is an array of layout-nodes, from the clicked-on-tile's node 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((n: TolNode) => new TreeNode(n, []));
+			nodeList[0].children = nodeList[0].tolNode.children.map((n: TolNode) => new LayoutNode(n, []));
 			layoutInfoHooks.updateLayoutInfoOnExpand(nodeList);
-			//try to layout tree
+			//try to re-layout
 			if (!this.tryLayout())
 				nodeList[0].children = [];
 		},
-		onInnerHeaderClicked(nodeList: TreeNode[]){ //nodeList is array of tree-objects, from clicked-on-tile's tree-object upward
+		onInnerHeaderClicked(nodeList: LayoutNode[]){
+			//nodeList is an array of layout-nodes, from the clicked-on-tile's node upward
 			let children = nodeList[0].children;
 			nodeList[0].children = [];
 			layoutInfoHooks.updateLayoutInfoOnCollapse(nodeList);
@@ -72,33 +73,33 @@ export default defineComponent({
 				nodeList[0].children = children;
 		},
 		tryLayout(){
-			let layout = genLayout(this.tree, 0, 0, this.width, this.height, true);
-			if (layout == null){
+			let newLayout = genLayout(this.layoutTree, 0, 0, this.width, this.height, true);
+			if (newLayout == null){
 				console.log('Unable to layout tree');
 				return false;
 			} else {
-				this.applyLayout(layout, this.tree);
+				this.applyLayout(newLayout, this.layoutTree);
 				return true;
 			}
 		},
-		applyLayout(layout: LayoutNode, tree: TreeNode){
-			tree.x = layout.x;
-			tree.y = layout.y;
-			tree.w = layout.w;
-			tree.h = layout.h;
-			tree.headerSz = layout.headerSz;
-			layout.children.forEach((n,i) => this.applyLayout(n, tree.children[i]));
+		applyLayout(newLayout: LayoutNode, layoutTree: LayoutNode){
+			layoutTree.x = newLayout.x;
+			layoutTree.y = newLayout.y;
+			layoutTree.w = newLayout.w;
+			layoutTree.h = newLayout.h;
+			layoutTree.headerSz = newLayout.headerSz;
+			newLayout.children.forEach((n,i) => this.applyLayout(n, layoutTree.children[i]));
 			//handle case where leaf nodes placed in leftover space from parent-sweep
-			if (layout.sepSweptArea != null){
+			if (newLayout.sepSweptArea != null){
 				//add parent area coords
-				tree.sepSweptArea = layout.sepSweptArea;
+				layoutTree.sepSweptArea = newLayout.sepSweptArea;
 				//move leaf node children to parent area
-				tree.children.filter(n => n.children.length == 0).map(n => {
-					n.x += layout.sepSweptArea!.x;
-					n.y += layout.sepSweptArea!.y;
+				layoutTree.children.filter(n => n.children.length == 0).map(n => {
+					n.x += newLayout.sepSweptArea!.x;
+					n.y += newLayout.sepSweptArea!.y;
 				});
 			} else {
-				tree.sepSweptArea = null;
+				layoutTree.sepSweptArea = null;
 			}
 		}
 	},
@@ -117,7 +118,7 @@ export default defineComponent({
 
 <template>
 <div class="h-[100vh]">
-	<tile :tree="tree" @tile-clicked="onInnerTileClicked" @header-clicked="onInnerHeaderClicked"></tile>
+	<tile :layoutNode="layoutTree" @tile-clicked="onInnerTileClicked" @header-clicked="onInnerHeaderClicked"></tile>
 </div>
 </template>
 
-- 
cgit v1.2.3