From 8f2b6dff0179eb42831dad42e5a68d1c328df7ff Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sat, 12 Mar 2022 16:59:26 +1100
Subject: Define TreeNode and LayoutNode. Move classes to types.ts.

---
 src/components/Tile.vue     |  4 +--
 src/components/TileTree.vue | 21 +++--------
 src/layout.ts               | 87 +++++++++-----------------------------------
 src/types.ts                | 88 +++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 112 insertions(+), 88 deletions(-)
 create mode 100644 src/types.ts

diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 76d08a8..19c9838 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 '../layout';
+import {TreeNode} from '../types';
 
 const TRANSITION_DURATION = 300;
 export default defineComponent({
@@ -13,7 +13,7 @@ export default defineComponent({
 		}
 	},
 	props: {
-		tree: {type: Object as PropType<TreeNode>, required:true},
+		tree: {type: Object as PropType<TreeNode>, required: true},
 	},
 	computed: {
 		name(){return this.tree.tolNode.name.replaceAll('\'', '\\\'')}
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index e8c0013..73959ee 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -6,7 +6,7 @@ import {staticSqrLayout, staticRectLayout, sweepToSideLayout, layoutInfoHooks} f
 	//for importing f1.ts:
 		//using 'import f1.ts' makes vue-tsc complain, and 'import f1.js' makes vite complain
 		//using 'import f1' might cause problems with build systems other than vite
-import type {TolNode, TreeNode, LayoutNode} from '../layout';
+import {TolNode, TreeNode, LayoutNode} from '../types';
 let LAYOUT_FUNC = sweepToSideLayout;
 
 import tol from '../tol.json';
@@ -30,18 +30,11 @@ export default defineComponent({
 	},
 	methods: {
 		initTree(tol: TolNode, lvl: number): TreeNode {
-			let tree = {
-				tolNode:tol, children:[],
-				x:0, y:0, w:0, h:0, headerSz:0,
-				sideArea:null, tileCount:0,
-			};
+			let tree = new TreeNode(tol, []);
 			function initTreeRec(tree: TreeNode, lvl: number){
 				if (lvl > 0)
-					tree.children = tree.tolNode.children.map((tNode: TolNode) => initTreeRec({
-						tolNode: tNode, children: [],
-						x:0, y:0, w:0, h:0, headerSz:0,
-						sideArea:null, tileCount:0,
-					}, lvl-1));
+					tree.children = tree.tolNode.children.map(
+						(n: TolNode) => initTreeRec(new TreeNode(n, []), lvl-1));
 				return tree;
 			}
 			initTreeRec(tree, lvl);
@@ -66,11 +59,7 @@ export default defineComponent({
 				return;
 			}
 			//add children
-			nodeList[0].children = nodeList[0].tolNode.children.map((tNode: TolNode) => ({
-				tolNode: tNode, children: [],
-				x:0, y:0, w:0, h:0, headerSz:0,
-				sideArea: null, tileCount:0,
-			}));
+			nodeList[0].children = nodeList[0].tolNode.children.map((n: TolNode) => new TreeNode(n, []));
 			layoutInfoHooks.updateLayoutInfoOnExpand(nodeList);
 			//try to layout tree
 			if (!this.tryLayout())
diff --git a/src/layout.ts b/src/layout.ts
index ab0a886..be30bc4 100644
--- a/src/layout.ts
+++ b/src/layout.ts
@@ -1,5 +1,5 @@
 export {staticSqrLayout, staticRectLayout, sweepToSideLayout, layoutInfoHooks};
-export type {TolNode, TreeNode, LayoutNode};
+import {TolNode, TreeNode, LayoutNode, SideArea, LeftoverArea} from './types';
 
 let TILE_SPACING = 5;
 let HEADER_SZ = 20;
@@ -10,50 +10,6 @@ let SWEEP_MODE = 'left'; //'left', 'top', 'shorter', 'auto'
 let ALLOW_SWEEP_TO_PARENT = true;
 let RECT_SPC_SHIFTING = true;
 
-interface TolNode {
-	name: string;
-	children: TolNode[];
-}
-interface TreeNode {
-	tolNode: TolNode;
-	children: TreeNode[];
-	x: number;
-	y: number;
-	w: number;
-	h: number;
-	headerSz: number;
-	sideArea: SideArea | null;
-	tileCount: number;
-}
-interface LayoutNode {
-	name: string;
-	x: number;
-	y: number;
-	w: number;
-	h: number;
-	headerSz: number;
-	children: LayoutNode[];
-	contentW: number;
-	contentH: number;
-	empSpc: number;
-	sideArea: SideArea | null;
-}
-interface SideArea {
-	x: number;
-	y: number;
-	w: number;
-	h: number;
-	sweptLeft: boolean;
-	extraSz: number;
-}
-interface LeftoverArea {
-	parentX: number;
-	parentY: number;
-	w: number;
-	h: number;
-	sweptLeft: boolean;
-}
-
 const layoutInfoHooks = { //made common-across-layout-types for layout inter-usability
 	initLayoutInfo(tree: TreeNode){
 		if (tree.children.length > 0){
@@ -129,15 +85,12 @@ function staticSqrLayout(node: TreeNode, x: number, y: number, w: number, h: num
 			lowestEmp += childLayouts[i].empSpc;
 		}
 	}
-	return {
-		name: node.tolNode.name,
-		x: x, y: y, w: w, h: h, headerSz: headerSz,
-		children: childLayouts,
+	return new LayoutNode(node.tolNode.name, childLayouts, x, y, w, h, {
+		headerSz, 
 		contentW: numCols * (tileSize + TILE_SPACING) + TILE_SPACING,
 		contentH: numRows * (tileSize + TILE_SPACING) + TILE_SPACING + headerSz,
 		empSpc: lowestEmp,
-		sideArea: null,
-	};
+	});
 }
 //lays out nodes as rectangles organised into rows, partially using other layouts for children
 function staticRectLayout(node: TreeNode, x: number, y: number, w: number, h: number, hideHeader: boolean,
@@ -304,15 +257,9 @@ function staticRectLayout(node: TreeNode, x: number, y: number, w: number, h: nu
 	//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 {
-		name: node.tolNode.name,
-		x: x, y: y, w: w, h: h, headerSz: headerSz,
-		children: childLayouts,
-		contentW: w, //trying to shrink this causes problems with swept-to-parent-area div-alignment
-		contentH: h,
-		empSpc: lowestEmp,
-		sideArea: null,
-	};
+	return new LayoutNode(node.tolNode.name, 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
 function sweepToSideLayout(node: TreeNode, x: number, y: number, w: number, h: number, hideHeader: boolean,
@@ -443,10 +390,8 @@ function sweepToSideLayout(node: TreeNode, x: number, y: number, w: number, h: n
 		let layoutsInOldOrder = seq(node.children.length)
 			.map(i => children.findIndex(n => n == node.children[i]))
 			.map(i => layouts[i]);
-		return {
-			name: node.tolNode.name,
-			x: x, y: y, w: w, h: h, headerSz: headerSz,
-			children: layoutsInOldOrder,
+		return new LayoutNode(node.tolNode.name, layoutsInOldOrder, x, y, w, h, {
+			headerSz, 
 			contentW: usingParentArea ? nonLeavesLayout.contentW : (sweptLeft ?
 				sweptLayout.contentW + nonLeavesLayout.contentW - TILE_SPACING :
 				Math.max(sweptLayout.contentW, nonLeavesLayout.contentW)),
@@ -454,12 +399,14 @@ function sweepToSideLayout(node: TreeNode, x: number, y: number, w: number, h: n
 				Math.max(sweptLayout.contentH, nonLeavesLayout.contentH) + headerSz :
 				sweptLayout.contentH + nonLeavesLayout.contentH - TILE_SPACING + headerSz),
 			empSpc: sweptLayout.empSpc + nonLeavesLayout.empSpc,
-			sideArea: usingParentArea && parentArea != null ? {
-				x: parentArea.parentX, y: parentArea.parentY,
-				w: parentArea.w, h: parentArea.h,
-				sweptLeft: sweptLeft, extraSz: TILE_SPACING+1,
-			}: null,
-		};
+			sideArea: (usingParentArea && parentArea != null) ? 
+				{
+					x: parentArea.parentX, y: parentArea.parentY,
+					w: parentArea.w, h: parentArea.h,
+					sweptLeft: sweptLeft, extraSz: TILE_SPACING+1,
+				}:
+				null,
+		});
 	}
 }
 
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..8a42ca0
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,88 @@
+export class TolNode {
+	name: string;
+	children: TolNode[];
+	constructor(name: string, children: TolNode[]){
+		this.name = name;
+		this.children = children;
+	}
+}
+export class TreeNode {
+	tolNode: TolNode;
+	children: TreeNode[];
+	x: number;
+	y: number;
+	w: number;
+	h: number;
+	headerSz: number;
+	sideArea: SideArea | null;
+	tileCount: number;
+	constructor(tolNode: TolNode, children: TreeNode[], x=0, y=0, w=0, h=0, 
+		{headerSz=0, sideArea=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.sideArea = sideArea;
+		this.tileCount = tileCount;
+	}
+}
+export class LayoutNode {
+	name: string;
+	children: LayoutNode[];
+	x: number;
+	y: number;
+	w: number;
+	h: number;
+	headerSz: number;
+	contentW: number;
+	contentH: number;
+	empSpc: number;
+	sideArea: SideArea | null;
+	constructor(name: string, children: LayoutNode[], x=0, y=0, w=0, h=0, 
+		{headerSz=0, contentW=0, contentH=0, empSpc=0, sideArea=null as SideArea|null} = {}){
+		this.name = name;
+		this.x = x;
+		this.y = y;
+		this.w = w;
+		this.h = h;
+		this.headerSz = headerSz;
+		this.children = children;
+		this.contentW = contentW;
+		this.contentH = contentH;
+		this.empSpc = empSpc;
+		this.sideArea = sideArea;
+	}
+}
+export class SideArea {
+	x: number;
+	y: number;
+	w: number;
+	h: number;
+	sweptLeft: boolean;
+	extraSz: number;
+	constructor(x: number, y: number, w: number, h: number, sweptLeft: boolean, extraSz: number){
+		this.x = x;
+		this.y = y;
+		this.w = w;
+		this.h = h;
+		this.sweptLeft = sweptLeft;
+		this.extraSz = extraSz;
+	}
+}
+export class LeftoverArea {
+	parentX: number;
+	parentY: number;
+	w: number;
+	h: number;
+	sweptLeft: boolean;
+	constructor(parentX: number, parentY: number, w: number, h: number, sweptLeft: boolean){
+		this.parentX = parentX;
+		this.parentY = parentY;
+		this.w = w;
+		this.h = h;
+		this.sweptLeft = sweptLeft;
+	}
+}
-- 
cgit v1.2.3