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 +++++++++++++++++++++++----------------------
 src/layout.ts               | 60 ++++++++++++++++++++--------------------
 src/types.ts                | 40 ++++++++-------------------
 4 files changed, 104 insertions(+), 117 deletions(-)

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>
 
diff --git a/src/layout.ts b/src/layout.ts
index bf8412e..0d4cf39 100644
--- a/src/layout.ts
+++ b/src/layout.ts
@@ -1,7 +1,7 @@
-import {TolNode, TreeNode, LayoutNode, SepSweptArea} from './types';
+import {TolNode, LayoutNode, SepSweptArea} from './types';
 export {genLayout, layoutInfoHooks};
 
-type LayoutFn = (node: TreeNode, x: number, y: number, w: number, h: number, hideHeader: boolean,
+type LayoutFn = (node: LayoutNode, x: number, y: number, w: number, h: number, hideHeader: boolean,
 	options?: {subLayoutFn?: LayoutFn, sepSweptArea?: SepSweptArea|null}) => LayoutNode | null;
 
 let TILE_SPACING = 5;
@@ -14,30 +14,30 @@ let ALLOW_SWEEP_TO_PARENT = true;
 let RECT_SPC_SHIFTING = true;
 
 const layoutInfoHooks = { //made common-across-layout-types for layout inter-usability
-	initLayoutInfo(tree: TreeNode){
-		if (tree.children.length > 0){
-			tree.children.forEach((n: TreeNode) => this.initLayoutInfo(n));
+	initLayoutInfo(node: LayoutNode){
+		if (node.children.length > 0){
+			node.children.forEach((n: LayoutNode) => this.initLayoutInfo(n));
 		}
-		this.updateLayoutInfo(tree);
+		this.updateLayoutInfo(node);
 	},
-	updateLayoutInfoOnExpand(nodeList: TreeNode[]){
-		//given list of tree-nodes from expanded_child-to-parent, update layout-info
+	updateLayoutInfoOnExpand(nodeList: LayoutNode[]){
+		//given list of layout-nodes from expanded_child-to-parent, update layout-info
 		nodeList[0].children.forEach(this.updateLayoutInfo);
 		for (let node of nodeList){
 			this.updateLayoutInfo(node);
 		}
 	},
-	updateLayoutInfoOnCollapse(nodeList: TreeNode[]){
-		//given list of tree-nodes from child_to_collapse-to-parent, update layout-info
+	updateLayoutInfoOnCollapse(nodeList: LayoutNode[]){
+		//given list of layout-nodes from child_to_collapse-to-parent, update layout-info
 		for (let node of nodeList){
 			this.updateLayoutInfo(node);
 		}
 	},
-	updateLayoutInfo(tree: TreeNode){
-		if (tree.children.length == 0){
-			tree.tileCount = 1;
+	updateLayoutInfo(node: LayoutNode){
+		if (node.children.length == 0){
+			node.tileCount = 1;
 		} else {
-			tree.tileCount = tree.children.map(e => e.tileCount).reduce((x,y) => x+y);
+			node.tileCount = node.children.map(n => n.tileCount).reduce((x,y) => x+y);
 		}
 	}
 }
@@ -76,7 +76,7 @@ let sqrLayoutFn: LayoutFn = function (node, x, y, w, h, hideHeader){
 		let childX = TILE_SPACING + (i % numCols)*(tileSize + TILE_SPACING);
 		let childY = TILE_SPACING + headerSz + Math.floor(i / numCols)*(tileSize + TILE_SPACING);
 		if (child.children.length == 0){
-			childLayouts[i] = new LayoutNode(child.tolNode.name, [], childX, childY, tileSize, tileSize,
+			childLayouts[i] = new LayoutNode(child.tolNode, [], childX, childY, tileSize, tileSize,
 				{headerSz: 0, contentW: tileSize, contentH: tileSize, empSpc: 0});
 		} else {
 			childLayouts[i] = sqrLayoutFn(child, childX, childY, tileSize, tileSize, false);
@@ -85,7 +85,7 @@ let sqrLayoutFn: LayoutFn = function (node, x, y, w, h, hideHeader){
 			lowestEmp += childLayouts[i].empSpc;
 		}
 	}
-	return new LayoutNode(node.tolNode.name, childLayouts, x, y, w, h, {
+	return new LayoutNode(node.tolNode, childLayouts, x, y, w, h, {
 		headerSz,
 		contentW: numCols * (tileSize + TILE_SPACING) + TILE_SPACING,
 		contentH: numRows * (tileSize + TILE_SPACING) + TILE_SPACING + headerSz,
@@ -190,7 +190,7 @@ let rectLayoutFn: LayoutFn = function (node, x, y, w, h, hideHeader, options={su
 					childW = cellWs[nodeIdx] - TILE_SPACING, childH = cellHs[r] - TILE_SPACING;
 				if (child.children.length == 0){
 					let contentSz = Math.min(childW, childH);
-					childLyts[nodeIdx] = new LayoutNode(child.tolNode.name, [], childX, childY, childW, childH,
+					childLyts[nodeIdx] = new LayoutNode(child.tolNode, [], childX, childY, childW, childH,
 						{headerSz: 0, contentW: contentSz, contentH: contentSz, empSpc: childW*childH - contentSz**2});
 				} else if (child.children.every(n => n.children.length == 0)){
 					childLyts[nodeIdx] = sqrLayoutFn(child, childX, childY, childW, childH, false);
@@ -251,30 +251,30 @@ let rectLayoutFn: LayoutFn = function (node, x, y, w, h, hideHeader, options={su
 	//make no-child tiles have width/height fitting their content
 	childLayouts.filter(l => l.children.length == 0).forEach(l => {l.w = l.contentW; l.h = l.contentH;});
 	//determine layout
-	return new LayoutNode(node.tolNode.name, childLayouts, x, y, w, h,
+	return new LayoutNode(node.tolNode, childLayouts, x, y, w, h,
 		{headerSz, contentW: w, contentH: h, empSpc: lowestEmp});
 		//trying to shrink contentW and contentH causes problems with swept-to-parent-area div-alignment
 }
 //lays out nodes by pushing leaves to one side, partially using other layouts for children
 let sweepLeavesLayoutFn: LayoutFn = function (node, x, y, w, h, hideHeader, options={sepSweptArea: null}){
 	//separate leaf and non-leaf nodes
-	let leaves: TreeNode[] = [], nonLeaves: TreeNode[] = [];
+	let leaves: LayoutNode[] = [], nonLeaves: LayoutNode[] = [];
 	node.children.forEach(n => (n.children.length == 0 ? leaves : nonLeaves).push(n));
 	//determine layout
-	let tempTree: TreeNode;
+	let tempTree: LayoutNode;
 	if (nonLeaves.length == 0){ //if all leaves, use squares-layout
 		return sqrLayoutFn(node, x, y, w, h, hideHeader);
 	} else if (leaves.length == 0){
-		tempTree = new TreeNode(new TolNode('SWEEP_REM_' + node.tolNode.name), nonLeaves);
+		tempTree = new LayoutNode(new TolNode('SWEEP_REM_' + node.tolNode.name), nonLeaves);
 		return rectLayoutFn(tempTree, x, y, w, h, hideHeader, {subLayoutFn: sweepLeavesLayoutFn});
 	} else {
-		let ratio = leaves.length / (leaves.length + nonLeaves.map(e => e.tileCount).reduce((x,y) => x+y));
+		let ratio = leaves.length / (leaves.length + nonLeaves.map(n => n.tileCount).reduce((x,y) => x+y));
 		let headerSz = (hideHeader ? 0 : HEADER_SZ);
 		let sweptLayout = null, nonLeavesLayout = null, sweptLeft = false;
 		//get swept-area layout
 		let parentArea = options && options.sepSweptArea, usingParentArea = false;
 		if (ALLOW_SWEEP_TO_PARENT && parentArea){
-			tempTree = new TreeNode(new TolNode('SWEEP_' + node.tolNode.name), leaves);
+			tempTree = new LayoutNode(new TolNode('SWEEP_' + node.tolNode.name), leaves);
 			sweptLeft = parentArea.sweptLeft;
 			sweptLayout = sqrLayoutFn(tempTree, 0, 0, parentArea.w, parentArea.h, sweptLeft);
 			if (sweptLayout != null){
@@ -283,7 +283,7 @@ let sweepLeavesLayoutFn: LayoutFn = function (node, x, y, w, h, hideHeader, opti
 					area.y = y; area.h = h;
 				}
 				//get remaining-area layout
-				tempTree = new TreeNode(new TolNode('SWEEP_REM_' + node.tolNode.name), nonLeaves);
+				tempTree = new LayoutNode(new TolNode('SWEEP_REM_' + node.tolNode.name), nonLeaves);
 				if (nonLeaves.length > 1){
 					nonLeavesLayout = rectLayoutFn(tempTree, 0, 0, area.w, area.h, true,
 						{subLayoutFn: sweepLeavesLayoutFn});
@@ -301,7 +301,7 @@ let sweepLeavesLayoutFn: LayoutFn = function (node, x, y, w, h, hideHeader, opti
 					//call genLayout
 					nonLeavesLayout = rectLayoutFn(
 						tempTree, 0, 0, area.w, area.h, true,
-						{subLayoutFn: (n,x,y,w,h,hh) => sweepLeavesLayoutFn(n,x,y,w,h,hh,{sepSweptArea: leftoverArea})});
+						{subLayoutFn: (n,x,y,w,h,hh) => sweepLeavesLayoutFn(n,x,y,w,h,hh,{sepSweptArea:leftoverArea})});
 				}
 				if (nonLeavesLayout != null){
 					nonLeavesLayout.children.forEach(layout => {layout.y += (sweptLeft ? headerSz : 0)});
@@ -311,7 +311,7 @@ let sweepLeavesLayoutFn: LayoutFn = function (node, x, y, w, h, hideHeader, opti
 		}
 		if (!usingParentArea){
 			let area = {x: x, y: y+headerSz, w: w, h: h-headerSz};
-			tempTree = new TreeNode(new TolNode('SWEEP_' + node.tolNode.name), leaves);
+			tempTree = new LayoutNode(new TolNode('SWEEP_' + node.tolNode.name), leaves);
 			let xyChg: [number, number];
 			//get swept-area layout
 			let leftLayout = null, topLayout = null;
@@ -342,12 +342,12 @@ let sweepLeavesLayoutFn: LayoutFn = function (node, x, y, w, h, hideHeader, opti
 				xyChg = [0, sweptLayout.contentH - TILE_SPACING];
 				area.h += -sweptLayout.contentH + TILE_SPACING;
 			}
-			tempTree = new TreeNode(new TolNode('SWEEP_REM_' + node.tolNode.name), nonLeaves);
+			tempTree = new LayoutNode(new TolNode('SWEEP_REM_' + node.tolNode.name), nonLeaves);
 			if (nonLeaves.length > 1){
 				nonLeavesLayout = rectLayoutFn(tempTree, 0, 0, area.w, area.h, true, {subLayoutFn: sweepLeavesLayoutFn});
 			} else {
 				//get leftover swept-layout-area to propagate
-				let leftoverArea;
+				let leftoverArea : SepSweptArea;
 				if (sweptLeft){
 					leftoverArea = new SepSweptArea( //x and y are relative to the non-leaves-area
 						-sweptLayout.contentW + TILE_SPACING, sweptLayout.contentH - TILE_SPACING,
@@ -366,7 +366,7 @@ let sweepLeavesLayoutFn: LayoutFn = function (node, x, y, w, h, hideHeader, opti
 				//call genLayout
 				nonLeavesLayout = rectLayoutFn(
 					tempTree, 0, 0, area.w, area.h, true,
-					{subLayoutFn: (n,x,y,w,h,hh) => sweepLeavesLayoutFn(n,x,y,w,h,hh,{sepSweptArea: leftoverArea})});
+					{subLayoutFn: (n,x,y,w,h,hh) => sweepLeavesLayoutFn(n,x,y,w,h,hh,{sepSweptArea:leftoverArea})});
 			}
 			if (nonLeavesLayout == null)
 				return null;
@@ -380,7 +380,7 @@ let sweepLeavesLayoutFn: LayoutFn = function (node, x, y, w, h, hideHeader, opti
 		let layoutsInOldOrder = seq(node.children.length)
 			.map(i => children.findIndex(n => n == node.children[i]))
 			.map(i => layouts[i]);
-		return new LayoutNode(node.tolNode.name, layoutsInOldOrder, x, y, w, h, {
+		return new LayoutNode(node.tolNode, layoutsInOldOrder, x, y, w, h, {
 			headerSz,
 			contentW: usingParentArea ? nonLeavesLayout.contentW : (sweptLeft ?
 				sweptLayout.contentW + nonLeavesLayout.contentW - TILE_SPACING :
diff --git a/src/types.ts b/src/types.ts
index 92deef5..0c38be8 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -6,50 +6,34 @@ export class TolNode {
 		this.children = children;
 	}
 }
-export class TreeNode {
-	tolNode: TolNode;
-	children: TreeNode[];
-	x: number;
-	y: number;
-	w: number;
-	h: number;
-	headerSz: number;
-	sepSweptArea: SepSweptArea | null;
-	tileCount: number;
-	constructor(tolNode: TolNode, children: TreeNode[], x=0, y=0, w=0, h=0,
-		{headerSz=0, sepSweptArea=null, tileCount=1} = {}){
-		this.tolNode = tolNode;
-		this.children = children;
-		this.x = x;
-		this.y = y;
-		this.w = w;
-		this.h = h;
-		this.headerSz = headerSz;
-		this.sepSweptArea = sepSweptArea;
-		this.tileCount = tileCount;
-	}
-}
 export class LayoutNode {
-	name: string;
+	//set by TileTree and LayoutFn funcs, eventually used by Tile
+	tolNode: TolNode;
 	children: LayoutNode[];
 	x: number;
 	y: number;
 	w: number;
 	h: number;
 	headerSz: number;
+	//set by layoutInfoHooks, used by LayoutFn funcs
+	tileCount: number;
+	//set_by/internal_to LayoutFn funcs
 	contentW: number;
 	contentH: number;
 	empSpc: number;
+	//set by LayoutFn funcs, eventually used by Tile
 	sepSweptArea: SepSweptArea | null;
-	constructor(name: string, children: LayoutNode[], x=0, y=0, w=0, h=0,
-		{headerSz=0, contentW=0, contentH=0, empSpc=0, sepSweptArea=null as SepSweptArea|null} = {}){
-		this.name = name;
+	//
+	constructor(tolNode: TolNode, children: LayoutNode[], x=0, y=0, w=0, h=0,
+		{headerSz=0, tileCount=0, contentW=0, contentH=0, empSpc=0, sepSweptArea=null as SepSweptArea|null} = {}){
+		this.tolNode = tolNode;
+		this.children = children;
 		this.x = x;
 		this.y = y;
 		this.w = w;
 		this.h = h;
 		this.headerSz = headerSz;
-		this.children = children;
+		this.tileCount = tileCount;
 		this.contentW = contentW;
 		this.contentH = contentH;
 		this.empSpc = empSpc;
-- 
cgit v1.2.3